@runtypelabs/persona 4.19.0 → 4.21.0

package/src/utils/composer-modes.test.ts

@@ -4,6 +4,7 @@ import type { ComposerMode, ComposerModeGroup } from "../types";
 import {
   chipVisibleComposerModes,
   clearOnceComposerModes,
+  hasHiddenModeChips,
   composerModeActionId,
   composerModeGroupActionId,
   composerModeOrder,
@@ -139,6 +140,38 @@ describe("segmented mode groups", () => {
   });
 });
 
+describe("chipVisibility on a mode group", () => {
+  const hidden: ComposerModeGroup[] = [
+    { id: "tool", selection: "single", chipVisibility: "hidden" },
+    { id: "style", selection: "multiple", chipVisibility: "auto" },
+  ];
+
+  it("reads the opt-out off the group", () => {
+    expect(hasHiddenModeChips("tool", hidden)).toBe(true);
+    expect(hasHiddenModeChips("style", hidden)).toBe(false);
+    expect(hasHiddenModeChips("tool", groups)).toBe(false);
+    expect(hasHiddenModeChips(undefined, hidden)).toBe(false);
+    expect(hasHiddenModeChips("missing", hidden)).toBe(false);
+  });
+
+  it("suppresses chips for a buttons group on the segmented pathway", () => {
+    expect(chipVisibleComposerModes(modes, hidden).map((mode) => mode.id)).toEqual([
+      "concise",
+      "verbose",
+      "draft",
+    ]);
+  });
+
+  it("leaves no chip-visible mode when every group opts out", () => {
+    const allHidden: ComposerModeGroup[] = [
+      { id: "tool", selection: "single", chipVisibility: "hidden" },
+      { id: "style", selection: "multiple", chipVisibility: "hidden" },
+    ];
+    const grouped = modes.filter((mode) => mode.groupId);
+    expect(chipVisibleComposerModes(grouped, allHidden)).toEqual([]);
+  });
+});
+
 describe("mode action identity and ordering", () => {
   it("namespaces the registry id", () => {
     expect(composerModeActionId("search")).toBe("core:mode:search");

package/src/utils/composer-modes.ts

@@ -38,16 +38,33 @@ export function isSegmentedModeGroup(
   );
 }
 
+/** True when this group opts out of chips, whatever its presentation. */
+export function hasHiddenModeChips(
+  groupId: string | undefined,
+  groups: readonly ComposerModeGroup[] | undefined
+): boolean {
+  if (!groupId) return false;
+  return (
+    groups?.find((group) => group.id === groupId)?.chipVisibility === "hidden"
+  );
+}
+
 /**
  * Modes that still earn a header chip. A segmented track already shows its own
- * state, so a chip for the same mode would be a second, removable copy of it.
+ * state, so a chip for the same mode would be a second, removable copy of it;
+ * `chipVisibility: "hidden"` opts a buttons-presentation group out of the same
+ * row on the same pathway.
  */
 export function chipVisibleComposerModes(
   modes: readonly ComposerMode[] | undefined,
   groups: readonly ComposerModeGroup[] | undefined
 ): ComposerMode[] {
   if (!modes?.length) return [];
-  return modes.filter((mode) => !isSegmentedModeGroup(mode.groupId, groups));
+  return modes.filter(
+    (mode) =>
+      !isSegmentedModeGroup(mode.groupId, groups) &&
+      !hasHiddenModeChips(mode.groupId, groups)
+  );
 }
 
 const groupSelection = (

package/src/utils/tokens-parity.test.ts

@@ -150,6 +150,26 @@ const FIXTURES: Record<string, DeepPartial<PersonaTheme>> = {
       },
     },
   },
+  'composer model picker closed control + overflow menu': {
+    components: {
+      composer: {
+        modelPicker: {
+          background: '#303030',
+          hoverBackground: '#3f3f3f',
+          borderColor: 'rgba(255, 255, 255, 0.08)',
+          borderRadius: '9999px',
+          labelColor: '#c4c7c5',
+        },
+        overflowMenu: {
+          background: '#353535',
+          borderColor: 'rgba(255, 255, 255, 0.08)',
+          borderRadius: '12px',
+          foreground: '#ececec',
+          shadow: '0 12px 32px rgba(0, 0, 0, 0.4)',
+        },
+      },
+    },
+  },
 };
 
 describe('token pipeline parity (golden)', () => {

package/src/utils/tokens.test.ts

@@ -95,3 +95,79 @@ describe('interactive-state defaults', () => {
     expect(css['--persona-icon-btn-active-border']).toBe('#0000ff');
   });
 });
+
+/**
+ * `components.composer.modelPicker.*` and `.overflowMenu.*` carry no short
+ * aliases (they would cost gzip in the launcher bundle, which draws no
+ * composer), so the emitted contract is the full path. The rules that read
+ * them are covered in styles/widget-styles.test.ts.
+ */
+describe('composer surface tokens', () => {
+  it('emits the model picker closed-control vars as full paths', () => {
+    const css = vars({
+      components: {
+        composer: {
+          modelPicker: {
+            background: '#303030',
+            hoverBackground: '#3f3f3f',
+            borderColor: 'rgba(255, 255, 255, 0.08)',
+            borderRadius: '9999px',
+            labelColor: '#c4c7c5',
+          },
+        },
+      },
+    });
+
+    expect(css['--persona-components-composer-modelPicker-background']).toBe('#303030');
+    expect(css['--persona-components-composer-modelPicker-hoverBackground']).toBe('#3f3f3f');
+    expect(css['--persona-components-composer-modelPicker-borderColor']).toBe(
+      'rgba(255, 255, 255, 0.08)'
+    );
+    expect(css['--persona-components-composer-modelPicker-borderRadius']).toBe('9999px');
+    expect(css['--persona-components-composer-modelPicker-labelColor']).toBe('#c4c7c5');
+  });
+
+  it('resolves a token reference on a model picker surface key', () => {
+    const css = vars({
+      components: {
+        composer: { modelPicker: { background: 'palette.colors.gray.800' } },
+      },
+    });
+
+    expect(css['--persona-components-composer-modelPicker-background']).toBe('#1f2937');
+  });
+
+  it('emits the overflow menu panel vars as full paths', () => {
+    const css = vars({
+      components: {
+        composer: {
+          overflowMenu: {
+            background: '#353535',
+            borderColor: 'rgba(255, 255, 255, 0.08)',
+            borderRadius: '12px',
+            foreground: '#ececec',
+            shadow: 'none',
+          },
+        },
+      },
+    });
+
+    expect(css['--persona-components-composer-overflowMenu-background']).toBe('#353535');
+    expect(css['--persona-components-composer-overflowMenu-borderColor']).toBe(
+      'rgba(255, 255, 255, 0.08)'
+    );
+    expect(css['--persona-components-composer-overflowMenu-borderRadius']).toBe('12px');
+    expect(css['--persona-components-composer-overflowMenu-foreground']).toBe('#ececec');
+    expect(css['--persona-components-composer-overflowMenu-shadow']).toBe('none');
+  });
+
+  it('leaves every composer surface var unset on the stock theme', () => {
+    const css = vars({});
+
+    for (const name of Object.keys(css)) {
+      expect(name.startsWith('--persona-components-composer-modelPicker-')).toBe(false);
+      expect(name.startsWith('--persona-components-composer-overflowMenu-')).toBe(false);
+    }
+  });
+
+});

package/src/utils/tokens.ts

@@ -1108,10 +1108,10 @@ export function themeToCssVariables(theme: PersonaTheme): Record<string, string>
     ['motion-easing', 'components-motion-easing', '=cubic-bezier(0.2, 0, 0, 1)'],
     ['composer-border-color', 'components-composer-borderColor', 'border', '=#e5e7eb'],
     ['composer-overlay-band', 'components-composer-overlayBand', '=transparent'],
-    // `components.composer.segmented.*` and `.modelPicker.*` get no short
-    // aliases: the rows cost gzip in the critical launcher bundle, which never
-    // draws a composer. widget.css reads the auto-emitted full paths, like
-    // introCard title/subtitle.
+    // `components.composer.segmented.*`, `.modelPicker.*`, and `.overflowMenu.*`
+    // get no short aliases: the rows cost gzip in the critical launcher bundle,
+    // which never draws a composer. widget.css reads the auto-emitted full
+    // paths, like introCard title/subtitle.
     ['scrollbar-thumb', 'components-scrollbar-thumb', 'border', '=#e5e7eb'],
     ['scrollbar-track', 'components-scrollbar-track', '=transparent'],
     ['md-inline-code-bg', 'components-markdown-inlineCode-background', 'container'],