fix(ui): polish branding, settings, galleries, and voice opt-in

OpenBitFun-Installer/index.html

@@ -5,6 +5,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta name="theme-color" content="" />
   <link rel="icon" type="image/png" href="/src/assets/openbitfun-app-icon.png" />
+  <link rel="icon" type="image/png" sizes="16x16" href="/src/assets/openbitfun-app-icon-16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="/src/assets/openbitfun-app-icon-32.png" />
     <title>Install OpenBitFun</title>
   <script type="module" src="/src/theme/installerThemeBootstrap.ts"></script>
   <style>

assets/brand/README.md

@@ -1,15 +1,40 @@
 # OpenBitFun application brand assets
 
-`source/` contains the two transparent Logo masters supplied for the product:
+`source/openbitfun-mark.svg` is the transparent vector master for the fine-line
+Logo. Its fifteen rounded hexagonal contours match the About dialog's static
+geometry. Motion and moving highlights are intentionally absent from icon files.
+The SVG uses `currentColor`, with a light default for dark backgrounds.
+The outer contour is opaque and heavier than the interior filaments so the
+white rim remains legible when the master is reduced by an application host.
+
+The generator also maintains the existing transparent PNG paths:
 
 - `openbitfun-mark-dark.png` is the dark mark for light surfaces.
 - `openbitfun-mark-light.png` is the light mark for dark surfaces.
 
-The application icon is generated from the light mark. It uses the supplied
-black-and-white application treatment, removes the construction grid from the
-reference, and applies a transparent rounded-corner mask. The construction
-grid is not a shippable asset.
+The application icon uses the light mark on the existing black rounded-square
+background, with transparent corners. The 1024 px master is rendered directly
+from the vector before generating Windows ICO and macOS ICNS containers.
+
+`exports/` contains the SVG, ICO, ICNS, and PNGs at 16, 24, 32, 48, 64, 96,
+128, 192, 256, 512, 1024, and 2048 px. Each PNG size includes a dark transparent
+mark, a light transparent mark, and the application icon. PNG exports are
+rendered directly from the SVG rather than enlarged from a small bitmap.
+At 16–24 px, 32–48 px, and 64–96 px, PNGs use 3, 5, and 7 contours respectively
+with a minimum 1.35 px opaque outer rim, a 0.85 px inner contour, and 0.65 px
+interior filaments. Larger PNGs and the SVG retain all 15 contours.
+Windows ICO frames and Linux icons use the same size-specific renders; macOS
+PNG representations do too. Tauri encodes the legacy 16/32 px ICNS representations
+from their corresponding optical renders.
 
-Run `pnpm run generate-brand-assets` after changing a source master. The
+Browser entry points select explicit 16/32 px favicons. The macOS menu bar uses
+`src/apps/desktop/icons/openbitfun-tray-template.png`, a transparent 32 px template
+drawn for a 16 pt display, so the system can tint it for light and dark menus.
+Windows and Linux trays use the 32 px application icon.
+
+Run `pnpm run generate-brand-assets` after changing the SVG master. The
 generator is the single owner of the derived desktop, web, installer, Android,
 iOS, and HarmonyOS files.
+
+Verify generated dimensions, small-size rim contrast, favicon references, and
+icon containers with `node --test scripts/generate-brand-assets.test.mjs`.

design-system/packages/ui/src/components/Combobox/Combobox.module.css

@@ -174,6 +174,11 @@
 
   .tags {
     gap: var(--openbitfun-space-1);
+    font-family: var(--openbitfun-type-label-md-font-family);
+    font-size: var(--openbitfun-type-label-md-font-size);
+    font-weight: var(--openbitfun-type-label-md-font-weight);
+    line-height: var(--openbitfun-type-label-md-line-height);
+    letter-spacing: var(--openbitfun-type-label-md-letter-spacing);
   }
 
   .control[data-tags="true"] .tags {
@@ -207,16 +212,22 @@
     overflow: hidden;
     align-items: center;
     max-inline-size: 10rem;
+    min-block-size: var(--openbitfun-control-icon-button-xs-size);
     gap: var(--openbitfun-space-1);
-    padding-inline-start: var(--openbitfun-space-2);
-    border-radius: var(--openbitfun-radius-xs);
-    color: var(--openbitfun-color-action-neutral-content);
-    background: var(--openbitfun-color-action-neutral-surface);
+    padding-inline: var(--openbitfun-space-2);
+    border: var(--openbitfun-border-width-default) solid var(--openbitfun-color-border-subtle);
+    border-radius: var(--openbitfun-radius-pill);
+    color: var(--openbitfun-color-content-primary);
+    background: var(--openbitfun-color-surface-tertiary);
     pointer-events: auto;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
+  .tag:has(button) {
+    padding-inline-end: 0;
+  }
+
   .tag > span {
     overflow: hidden;
     text-overflow: ellipsis;

design-system/packages/ui/src/components/Combobox/Combobox.tsx

@@ -621,6 +621,7 @@ const CollectionPicker = forwardRef<HTMLDivElement, PickerProps>(function Collec
                     commitValues(selectedValues.filter((value) => value !== option.value));
                   }}
                   onMouseDown={(event) => event.preventDefault()}
+                  shape="circle"
                   size="xs"
                   variant="quiet"
                 />

design-system/packages/ui/tests/combobox.test.mjs

@@ -74,7 +74,7 @@ test("Combobox styling uses public field, overlay, action, and motion tokens", a
 
   assert.match(styles, /--openbitfun-color-field-background/);
   assert.match(styles, /--openbitfun-overlay-menu-surface-radius/);
-  assert.match(styles, /--openbitfun-color-action-neutral-surface/);
+  assert.match(styles, /--openbitfun-color-surface-tertiary/);
   assert.match(styles, /--openbitfun-shadow-menu/);
   assert.match(styles, /position:\s*fixed/);
   assert.match(styles, /z-index:\s*var\(--openbitfun-layer-popover\)/);