Add Favicon Generator example app (#935)

Adds a client-only example app that builds a Hoist app's favicon set from any Font Awesome Pro glyph. It gives us a quick way to brand a new app, and it shows Hoist inputs, panels and cards in a small, finished tool.

- New `favicons` entry point, listed on the Example Apps tab and in the nginx entry-point routes.
- Controls for the glyph and its weight, glyph and backdrop colors, backdrop shape, corner radius, padding and app name. Presets and a "Surprise me" button give quick starting points.
- Live previews of the 512px icon, light and dark browser tabs, a phone home screen, and common sizes. In a full tab, the page's own tab icon also shows the design.
- The design lives in the URL, so a link reopens it. The downloaded SVG embeds that link.
- Download builds a zip of `favicon.svg`, 192px and 512px PNGs, and `apple-touch-icon.png`. A `configureRsbuild()` snippet shows how to install them.
- Glyphs fit their actual path shape inside circle and rounded backdrops, not just their bounding box.
- A `GlyphService` loads the Font Awesome Pro packs at startup and owns the glyph catalog. Rendering, layout, export and URL logic are pure functions in `lib/`.
- A README in the app folder covers usage, the zip, and the patterns worth a look.
- New dependencies: the Font Awesome Pro light, solid and thin packs, loaded on demand into an async chunk, and `fflate` for the zip.
- Unit specs cover the glyph service and the layout, SVG, export, URL and preset logic.

Author: amcclain

CHANGELOG.md

@@ -23,6 +23,7 @@
 * Reorganized the desktop tabs - a new Components tab gathers General components, Charts, and Choosers & Pickers, and the Other tab is now System, grouped into Concepts, Dialogs & Alerts, and Formatting. Tab URLs changed to match (e.g. `/app/charts/line` is now `/app/components/line`).
 * Added a Grid Helpers group to the Grids tab, with new `FilterChooser`, `GroupingChooser`, `StoreFilterField`, and `GridFindField` demo pages, each driving a live trades grid.
 * Renamed the App Notifications demo to Updates & Idle and App Banners to Banners, and removed the Forms > Other Controls overview page - its controls now live under Components > Choosers & Pickers.
+* Added Favicon Designer example app - a client-only tool that builds a Hoist app's favicon set from any Font Awesome Pro glyph, with custom colors, backdrop shapes and padding, live browser-tab and home-screen previews, shareable design URLs, and a one-click zip of `favicon.svg` plus the PNGs `configureRsbuild()` picks up.
 
 ### Bug Fixes
 

CLAUDE.md

@@ -388,7 +388,7 @@ defines an entry point, and its filename (minus the extension) becomes the URL p
 | Mobile app | http://localhost:3000/mobile |
 
 **Example apps**: `/contact`, `/todo`, `/portfolio`, `/news`, `/recalls`, `/fileManager`,
-`/weather` - each at `http://localhost:3000/<name>`.
+`/weather`, `/favicons` - each at `http://localhost:3000/<name>`.
 
 ### Unit Tests
 

client-app/package.json

@@ -36,7 +36,10 @@
     "@codemirror/autocomplete": "^6.20.3",
     "@fortawesome/fontawesome-svg-core": "^7.3.1",
     "@fortawesome/free-brands-svg-icons": "^7.3.1",
+    "@fortawesome/pro-light-svg-icons": "^7.3.1",
     "@fortawesome/pro-regular-svg-icons": "^7.3.1",
+    "@fortawesome/pro-solid-svg-icons": "^7.3.1",
+    "@fortawesome/pro-thin-svg-icons": "^7.3.1",
     "@ibm/plex-mono": "^2.5.0",
     "@ibm/plex-sans": "^1.1.0",
     "@xh/hoist": "next",
@@ -47,6 +50,7 @@
     "ag-grid-react": "~36.2.0",
     "classnames": "~2.5.1",
     "core-js": "~3.50.0",
+    "fflate": "~0.8.3",
     "filesize": "~11.0.25",
     "highcharts": "~12.6.2",
     "lodash": "~4.18.1",
@@ -58,7 +62,7 @@
   "devDependencies": {
     "@testing-library/dom": "^10.4.2",
     "@testing-library/react": "^16.3.3",
-    "@types/lodash": "~4.17.25",
+    "@types/lodash": "~4.17.26",
     "@types/react": "~19.3.0",
     "@types/react-dom": "~19.3.0",
     "@xh/eslint-config": "^8.1.0",
@@ -69,9 +73,9 @@
     "husky": "~9.1.7",
     "jsdom": "^30.1.2",
     "lint-staged": "~17.5.1",
-    "msw": "^3.0.2",
+    "msw": "^3.0.3",
     "postcss": "~8.5.29",
-    "prettier": "~3.9.9",
+    "prettier": "~3.9.10",
     "stylelint": "~17.15.0",
     "stylelint-config-recommended-scss": "~17.0.1",
     "typescript": "~7.0.2",

client-app/pnpm-lock.yaml

@@ -15,6 +15,7 @@ import {when} from '@xh/hoist/mobx';
 import type {ContactService} from './examples/contact/svc/ContactService';
 import type {DocService} from './core/svc/DocService';
 import type {GitHubService} from './core/svc/GitHubService';
+import type {GlyphService} from './examples/favicons/svc/GlyphService';
 import type {PortfolioService} from './core/svc/PortfolioService';
 import type {TaskService} from './examples/todo/TaskService';
 
@@ -24,6 +25,7 @@ declare module '@xh/hoist/core' {
         contactService: ContactService;
         docService: DocService;
         gitHubService: GitHubService;
+        glyphService: GlyphService;
         portfolioService: PortfolioService;
         taskService: TaskService;
     }

client-app/src/Bootstrap.ts

@@ -0,0 +1,19 @@
+import '../Bootstrap';
+
+import {XH} from '@xh/hoist/core';
+import {AppContainer} from '@xh/hoist/desktop/appcontainer';
+import {AppComponent} from '../examples/favicons/AppComponent';
+import {AppModel} from '../examples/favicons/AppModel';
+import {AuthModel} from '../core/AuthModel';
+
+XH.renderApp({
+    clientAppCode: 'favicons',
+    clientAppName: 'Hoist Favicon Designer',
+    componentClass: AppComponent,
+    modelClass: AppModel,
+    containerClass: AppContainer,
+    authModelClass: AuthModel,
+    isMobileApp: false,
+    enableLogout: true,
+    checkAccess: () => true
+});

client-app/src/apps/favicons.ts

@@ -3,6 +3,7 @@ import {PanelModel} from '@xh/hoist/desktop/cmp/panel';
 import {Icon} from '@xh/hoist/icon/Icon';
 import {bindable} from '@xh/hoist/mobx';
 import {p, strong} from '@xh/hoist/cmp/layout';
+import {iconsIcon} from '../../../core/Icons';
 
 export class ExamplesTabModel extends HoistModel {
     @managed
@@ -111,6 +112,18 @@ export class ExamplesTabModel extends HoistModel {
                     ' to prevent arbitrary file uploads. Contact us for a walkthrough.'
                 )
             ]
+        },
+        {
+            title: 'Favicon Designer',
+            icon: iconsIcon(),
+            path: 'favicons',
+            srcPath: 'favicons',
+            text: [
+                p('Mint a complete favicon set for your next Hoist app in seconds.'),
+                p(
+                    'Pick any Font Awesome Pro glyph, style it with colors, a backdrop shape and padding, preview it live in browser tabs and on a home screen, then download a zip ready to drop into client-app/public.'
+                )
+            ]
         }
     ];
 }

client-app/src/desktop/tabs/examples/ExamplesTabModel.ts

@@ -28,7 +28,7 @@ const ITEMS: StartHereItem[] = [
     {
         icon: Icon.rocket(),
         title: 'Browse the example apps',
-        blurb: 'Complete mini-apps - portfolio, weather, contacts, news, and more.',
+        blurb: 'Complete mini-apps - portfolio, weather, contacts, a favicon designer, and more.',
         onClick: () => XH.navigate('default.examples')
     },
     {

client-app/src/desktop/tabs/home/widgets/StartHereWidget.ts

@@ -0,0 +1,51 @@
+import {hframe} from '@xh/hoist/cmp/layout';
+import {hoistCmp, uses} from '@xh/hoist/core';
+import {appBar, appBarSeparator} from '@xh/hoist/desktop/cmp/appbar';
+import {button, themeToggleButton} from '@xh/hoist/desktop/cmp/button';
+import {clipboardButton} from '@xh/hoist/desktop/cmp/clipboard';
+import {panel} from '@xh/hoist/desktop/cmp/panel';
+import {Icon} from '@xh/hoist/icon';
+import {iconsIcon} from '../../core/Icons';
+import {AppModel} from './AppModel';
+import {controlsPanel} from './cmp/ControlsPanel';
+import {previewsPanel} from './cmp/PreviewsPanel';
+import '../../core/Toolbox.scss';
+import './Favicons.scss';
+
+export const AppComponent = hoistCmp({
+    displayName: 'App',
+    model: uses(AppModel),
+
+    render({model}) {
+        const {faviconModel} = model;
+        return panel({
+            className: 'tb-favicons',
+            tbar: appBar({
+                icon: iconsIcon({size: '2x'}),
+                hideAppMenuButton: true,
+                hideRefreshButton: true,
+                hideWhatsNewButton: true,
+                rightItems: [
+                    clipboardButton({
+                        text: 'Copy link',
+                        icon: Icon.link(),
+                        tooltip: 'Copy a link that reopens this exact design',
+                        getCopyText: () => faviconModel.shareUrl,
+                        successMessage: 'Design link copied to clipboard.'
+                    }),
+                    button({
+                        text: 'Download .zip',
+                        icon: Icon.download(),
+                        intent: 'primary',
+                        outlined: true,
+                        onClick: () => faviconModel.downloadAsync()
+                    }),
+                    appBarSeparator(),
+                    themeToggleButton()
+                ]
+            }),
+            mask: faviconModel.downloadTask,
+            item: hframe(controlsPanel({model: faviconModel}), previewsPanel({model: faviconModel}))
+        });
+    }
+});

client-app/src/examples/favicons/AppComponent.ts

@@ -0,0 +1,18 @@
+import type {InitContext} from '@xh/hoist/core';
+import {managed, XH} from '@xh/hoist/core';
+import {BaseAppModel} from '../../BaseAppModel';
+import {FaviconModel} from './FaviconModel';
+import {GlyphService} from './svc/GlyphService';
+
+export class AppModel extends BaseAppModel {
+    static instance: AppModel;
+
+    /** Created once `GlyphService` is installed, so it can rely on every glyph being present. */
+    @managed faviconModel: FaviconModel;
+
+    override async initAsync(ctx: InitContext) {
+        await super.initAsync(ctx);
+        await XH.installServicesAsync([GlyphService], ctx);
+        this.faviconModel = new FaviconModel();
+    }
+}