@vibes.diy/base 14.3.35 → 14.3.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/components/vibe-menu/cards/AccountCard.d.ts +1 -1
  2. package/components/vibe-menu/cards/AccountCard.js +3 -3
  3. package/components/vibe-menu/cards/CodeModeWorkspace.d.ts +1 -1
  4. package/components/vibe-menu/cards/CodeModeWorkspace.js +3 -3
  5. package/components/vibe-menu/cards/share-card.styles.d.ts +1 -1
  6. package/components/vibe-menu/cards/share-card.styles.js +2 -2
  7. package/components/vibe-menu/vibe-menu.styles.d.ts +3 -3
  8. package/components/vibe-menu/vibe-menu.styles.js +25 -24
  9. package/components/vibe-menu/vibe-menu.styles.js.map +1 -1
  10. package/package.json +4 -4
package/components/vibe-menu/cards/AccountCard.d.ts CHANGED
@@ -29,7 +29,7 @@ export declare const ACCOUNT_COPY: Readonly<{
29
29
  notNow: "Not now";
30
30
  claimFailed: "Couldn't claim that handle. Try another.";
31
31
  }>;
32
- export declare const ACCOUNT_CARD_CSS = "\n[data-vibe-menu] .vm-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 4px 0 14px; }\n[data-vibe-menu] .vm-big { font: 700 42px/0.8 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; }\n[data-vibe-menu] .vm-caption { flex: 1; white-space: nowrap; font-size: 12px; line-height: 14px; color: var(--muted); }\n[data-vibe-menu] .vm-who { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; }\n[data-vibe-menu] .vm-avatar { width: 28px; height: 28px; border-radius: 50%; border: var(--stroke-rule) solid var(--line); background: var(--section-account); color: var(--on-account); display: grid; place-items: center; font: 700 12px/1 var(--font-tab); }\n[data-vibe-menu] .vm-handle { font: 700 16px/1 var(--font-display); }\n[data-vibe-menu] .vm-no-handle { font: 400 16px/1 var(--font-display); color: var(--muted); }\n[data-vibe-menu] .vm-meter { height: var(--size-meter); margin-bottom: var(--space-16); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-meter); overflow: hidden; }\n[data-vibe-menu] .vm-meter span { display: block; height: 100%; background: var(--section-account); border-right: var(--stroke-rule) solid var(--line); }\n[data-vibe-menu] .vm-account .vm-group + .vm-group { margin-top: var(--space-14); }\n[data-vibe-menu] .vm-handle-line { margin: 0 0 12px; font-size: 14px; line-height: 1.35; }\n[data-vibe-menu] .vm-drill .vm-input + .vm-drill-sec { margin-top: 14px; }\n[data-vibe-menu] .vm-handle-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }\n[data-vibe-menu] .vm-handle-add .vm-input { flex: 1 1 180px; height: 40px; margin: 0; }\n[data-vibe-menu] .vm-acting-head { margin-top: 16px; padding-bottom: 2px; }\n[data-vibe-menu] .vm-acting-line { margin: 0 0 6px; font-size: 13px; color: var(--muted); }\n[data-vibe-menu] .vm-handle-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; }\n[data-vibe-menu] .vm-handle-row + .vm-handle-row { border-top: var(--stroke-hairline) solid var(--line-hairline); }\n[data-vibe-menu] .vm-handle-row .vm-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }\n[data-vibe-menu] .vm-handle-row.is-active .vm-label { font-weight: 700; }\n[data-vibe-menu] .vm-handle-row.is-active .vm-initial { background: var(--accent); color: var(--on-accent); }\n[data-vibe-menu] .vm-check { display: grid; color: var(--ink); }\n[data-vibe-menu] .vm-check .vm-glyph { width: 18px; height: 18px; stroke-width: 3; }\n[data-vibe-menu] .vm-picture { display: flex; padding: 2px 0 8px 40px; }\n[data-vibe-menu] .vm-form-note { margin: 8px 0 0; font-size: 13px; color: var(--ink); }\n[data-vibe-menu] .vm-claim { margin-top: 18px; }\n@container (max-width: 480px) {\n [data-vibe-menu] .vm-big { font-size: 36px; }\n [data-vibe-menu] .vm-handle-add .vm-input { flex-basis: 100%; }\n}\n";
32
+ export declare const ACCOUNT_CARD_CSS = "\n[data-vibe-menu] .vm-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 4px 0 14px; }\n[data-vibe-menu] .vm-big { font: 700 42px/0.8 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; }\n[data-vibe-menu] .vm-caption { flex: 1; white-space: nowrap; font-size: 12px; line-height: 14px; color: var(--muted); }\n[data-vibe-menu] .vm-who { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; }\n[data-vibe-menu] .vm-avatar { width: 28px; height: 28px; border-radius: 50%; border: var(--stroke-rule) solid var(--line-card); background: var(--section-account); color: var(--on-account); display: grid; place-items: center; font: 700 12px/1 var(--font-tab); }\n[data-vibe-menu] .vm-handle { font: 700 16px/1 var(--font-display); }\n[data-vibe-menu] .vm-no-handle { font: 400 16px/1 var(--font-display); color: var(--muted); }\n[data-vibe-menu] .vm-meter { height: var(--size-meter); margin-bottom: var(--space-16); border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-meter); overflow: hidden; }\n[data-vibe-menu] .vm-meter span { display: block; height: 100%; background: var(--section-account); border-right: var(--stroke-rule) solid var(--line-card); }\n[data-vibe-menu] .vm-account .vm-group + .vm-group { margin-top: var(--space-14); }\n[data-vibe-menu] .vm-handle-line { margin: 0 0 12px; font-size: 14px; line-height: 1.35; }\n[data-vibe-menu] .vm-drill .vm-input + .vm-drill-sec { margin-top: 14px; }\n[data-vibe-menu] .vm-handle-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; }\n[data-vibe-menu] .vm-handle-add .vm-input { flex: 1 1 180px; height: 40px; margin: 0; }\n[data-vibe-menu] .vm-acting-head { margin-top: 16px; padding-bottom: 2px; }\n[data-vibe-menu] .vm-acting-line { margin: 0 0 6px; font-size: 13px; color: var(--muted); }\n[data-vibe-menu] .vm-handle-row { display: flex; align-items: center; gap: 12px; width: 100%; height: 42px; }\n[data-vibe-menu] .vm-handle-row + .vm-handle-row { border-top: var(--stroke-hairline) solid var(--line-hairline); }\n[data-vibe-menu] .vm-handle-row .vm-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; }\n[data-vibe-menu] .vm-handle-row.is-active .vm-label { font-weight: 700; }\n[data-vibe-menu] .vm-handle-row.is-active .vm-initial { background: var(--accent); color: var(--on-accent); }\n[data-vibe-menu] .vm-check { display: grid; color: var(--ink); }\n[data-vibe-menu] .vm-check .vm-glyph { width: 18px; height: 18px; stroke-width: 3; }\n[data-vibe-menu] .vm-picture { display: flex; padding: 2px 0 8px 40px; }\n[data-vibe-menu] .vm-form-note { margin: 8px 0 0; font-size: 13px; color: var(--ink); }\n[data-vibe-menu] .vm-claim { margin-top: 18px; }\n@container (max-width: 480px) {\n [data-vibe-menu] .vm-big { font-size: 36px; }\n [data-vibe-menu] .vm-handle-add .vm-input { flex-basis: 100%; }\n}\n";
33
33
  export interface AccountCardProps {
34
34
  readonly viewer: ViewerSlice;
35
35
  readonly account: AccountSlice;
package/components/vibe-menu/cards/AccountCard.js CHANGED
@@ -43,11 +43,11 @@ export const ACCOUNT_CARD_CSS = `
43
43
  [data-vibe-menu] .vm-big { font: 700 42px/0.8 var(--font-display); letter-spacing: -0.04em; white-space: nowrap; }
44
44
  [data-vibe-menu] .vm-caption { flex: 1; white-space: nowrap; font-size: 12px; line-height: 14px; color: var(--muted); }
45
45
  [data-vibe-menu] .vm-who { display: flex; align-items: center; gap: 10px; padding: 0 0 14px; }
46
- [data-vibe-menu] .vm-avatar { width: 28px; height: 28px; border-radius: 50%; border: var(--stroke-rule) solid var(--line); background: var(--section-account); color: var(--on-account); display: grid; place-items: center; font: 700 12px/1 var(--font-tab); }
46
+ [data-vibe-menu] .vm-avatar { width: 28px; height: 28px; border-radius: 50%; border: var(--stroke-rule) solid var(--line-card); background: var(--section-account); color: var(--on-account); display: grid; place-items: center; font: 700 12px/1 var(--font-tab); }
47
47
  [data-vibe-menu] .vm-handle { font: 700 16px/1 var(--font-display); }
48
48
  [data-vibe-menu] .vm-no-handle { font: 400 16px/1 var(--font-display); color: var(--muted); }
49
- [data-vibe-menu] .vm-meter { height: var(--size-meter); margin-bottom: var(--space-16); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-meter); overflow: hidden; }
50
- [data-vibe-menu] .vm-meter span { display: block; height: 100%; background: var(--section-account); border-right: var(--stroke-rule) solid var(--line); }
49
+ [data-vibe-menu] .vm-meter { height: var(--size-meter); margin-bottom: var(--space-16); border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-meter); overflow: hidden; }
50
+ [data-vibe-menu] .vm-meter span { display: block; height: 100%; background: var(--section-account); border-right: var(--stroke-rule) solid var(--line-card); }
51
51
  [data-vibe-menu] .vm-account .vm-group + .vm-group { margin-top: var(--space-14); }
52
52
  [data-vibe-menu] .vm-handle-line { margin: 0 0 12px; font-size: 14px; line-height: 1.35; }
53
53
  [data-vibe-menu] .vm-drill .vm-input + .vm-drill-sec { margin-top: 14px; }
package/components/vibe-menu/cards/CodeModeWorkspace.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from "react";
2
2
  import type { CodeTab } from "../code-tabs.js";
3
3
  import type { LogLine } from "../slices.js";
4
4
  export declare const WORKSPACE_CODE_TABS: readonly CodeTab[];
5
- export declare const CODE_MODE_CSS = "\n[data-vibe-menu] .vm-cm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }\n[data-vibe-menu] .vm-cm-tabs { display: flex; align-items: center; gap: 4px; flex: none; margin: 12px 0; padding: 3px; border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); overflow-x: auto; scrollbar-width: none; }\n[data-vibe-menu] .vm-cm-tabs::-webkit-scrollbar { display: none; }\n[data-vibe-menu] .vm-cm-tab,\n[data-vibe-menu] .vm-cm-switch { display: flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: none; color: var(--ink); font: 700 11px/1 var(--font-tab); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }\n[data-vibe-menu] .vm-cm-tab.is-active { background: var(--section-code); color: var(--on-code); }\n[data-vibe-menu] .vm-cm-tab[aria-disabled=\"true\"] { opacity: 0.35; cursor: default; }\n[data-vibe-menu] .vm-cm-switch { margin-left: auto; border: var(--stroke-rule) solid var(--line); background: var(--section-code); color: var(--on-code); }\n[data-vibe-menu] .vm-cm-tab-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--card-bg); flex: none; }\n[data-vibe-menu] .vm-cm-tab.is-active .vm-cm-tab-dot { background: var(--menu-ink); color: var(--section-code); }\n[data-vibe-menu] .vm-cm-tab .vm-glyph { width: 12px; height: 12px; }\n[data-vibe-menu] .vm-cm-switch .vm-glyph { width: 14px; height: 14px; }\n[data-vibe-menu] .vm-cm-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-top: 4px; border-top: var(--stroke-rule) solid var(--line); }\n[data-vibe-menu] .vm-cm-body[data-history] { display: flex; flex-direction: column; overflow: hidden; }\n[data-vibe-menu] .vm-cm-history { flex: 1 1 0%; min-height: 0; }\n[data-vibe-menu] .vm-cm-queued { flex: none; max-height: 40%; overflow: auto; }\n[data-vibe-menu] .vm-workspace > * { flex: 1 1 auto; min-height: 0; }\n@container (max-width: 480px) {\n [data-vibe-menu] .vm-cm-tabs { justify-content: flex-start; }\n [data-vibe-menu] .vm-cm-tab-label { font-size: 10px; }\n}\n";
5
+ export declare const CODE_MODE_CSS = "\n[data-vibe-menu] .vm-cm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }\n[data-vibe-menu] .vm-cm-tabs { display: flex; align-items: center; gap: 4px; flex: none; margin: 12px 0; padding: 3px; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-full); background: var(--card-bg); overflow-x: auto; scrollbar-width: none; }\n[data-vibe-menu] .vm-cm-tabs::-webkit-scrollbar { display: none; }\n[data-vibe-menu] .vm-cm-tab,\n[data-vibe-menu] .vm-cm-switch { display: flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: none; color: var(--ink); font: 700 11px/1 var(--font-tab); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }\n[data-vibe-menu] .vm-cm-tab.is-active { background: var(--section-code); color: var(--on-code); }\n[data-vibe-menu] .vm-cm-tab[aria-disabled=\"true\"] { opacity: 0.35; cursor: default; }\n[data-vibe-menu] .vm-cm-switch { margin-left: auto; border: var(--stroke-rule) solid var(--line-card); background: var(--section-code); color: var(--on-code); }\n[data-vibe-menu] .vm-cm-tab-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--card-bg); flex: none; }\n[data-vibe-menu] .vm-cm-tab.is-active .vm-cm-tab-dot { background: var(--menu-ink); color: var(--section-code); }\n[data-vibe-menu] .vm-cm-tab .vm-glyph { width: 12px; height: 12px; }\n[data-vibe-menu] .vm-cm-switch .vm-glyph { width: 14px; height: 14px; }\n[data-vibe-menu] .vm-cm-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-top: 4px; border-top: var(--stroke-rule) solid var(--line-card); }\n[data-vibe-menu] .vm-cm-body[data-history] { display: flex; flex-direction: column; overflow: hidden; }\n[data-vibe-menu] .vm-cm-history { flex: 1 1 0%; min-height: 0; }\n[data-vibe-menu] .vm-cm-queued { flex: none; max-height: 40%; overflow: auto; }\n[data-vibe-menu] .vm-workspace > * { flex: 1 1 auto; min-height: 0; }\n@container (max-width: 480px) {\n [data-vibe-menu] .vm-cm-tabs { justify-content: flex-start; }\n [data-vibe-menu] .vm-cm-tab-label { font-size: 10px; }\n}\n";
6
6
  export declare function resolveActiveCodeTab(input: {
7
7
  readonly tab: CodeTab;
8
8
  readonly disabled: readonly CodeTab[];
package/components/vibe-menu/cards/CodeModeWorkspace.js CHANGED
@@ -16,18 +16,18 @@ const TAB_GLYPHS = {
16
16
  };
17
17
  export const CODE_MODE_CSS = `
18
18
  [data-vibe-menu] .vm-cm { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
19
- [data-vibe-menu] .vm-cm-tabs { display: flex; align-items: center; gap: 4px; flex: none; margin: 12px 0; padding: 3px; border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-full); background: var(--card-bg); overflow-x: auto; scrollbar-width: none; }
19
+ [data-vibe-menu] .vm-cm-tabs { display: flex; align-items: center; gap: 4px; flex: none; margin: 12px 0; padding: 3px; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-full); background: var(--card-bg); overflow-x: auto; scrollbar-width: none; }
20
20
  [data-vibe-menu] .vm-cm-tabs::-webkit-scrollbar { display: none; }
21
21
  [data-vibe-menu] .vm-cm-tab,
22
22
  [data-vibe-menu] .vm-cm-switch { display: flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-full); background: none; color: var(--ink); font: 700 11px/1 var(--font-tab); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
23
23
  [data-vibe-menu] .vm-cm-tab.is-active { background: var(--section-code); color: var(--on-code); }
24
24
  [data-vibe-menu] .vm-cm-tab[aria-disabled="true"] { opacity: 0.35; cursor: default; }
25
- [data-vibe-menu] .vm-cm-switch { margin-left: auto; border: var(--stroke-rule) solid var(--line); background: var(--section-code); color: var(--on-code); }
25
+ [data-vibe-menu] .vm-cm-switch { margin-left: auto; border: var(--stroke-rule) solid var(--line-card); background: var(--section-code); color: var(--on-code); }
26
26
  [data-vibe-menu] .vm-cm-tab-dot { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: var(--card-bg); flex: none; }
27
27
  [data-vibe-menu] .vm-cm-tab.is-active .vm-cm-tab-dot { background: var(--menu-ink); color: var(--section-code); }
28
28
  [data-vibe-menu] .vm-cm-tab .vm-glyph { width: 12px; height: 12px; }
29
29
  [data-vibe-menu] .vm-cm-switch .vm-glyph { width: 14px; height: 14px; }
30
- [data-vibe-menu] .vm-cm-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-top: 4px; border-top: var(--stroke-rule) solid var(--line); }
30
+ [data-vibe-menu] .vm-cm-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding-top: 4px; border-top: var(--stroke-rule) solid var(--line-card); }
31
31
  [data-vibe-menu] .vm-cm-body[data-history] { display: flex; flex-direction: column; overflow: hidden; }
32
32
  [data-vibe-menu] .vm-cm-history { flex: 1 1 0%; min-height: 0; }
33
33
  [data-vibe-menu] .vm-cm-queued { flex: none; max-height: 40%; overflow: auto; }
package/components/vibe-menu/cards/share-card.styles.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const SHARE_CARD_CSS = "\n[data-vibe-menu] .vm-sr {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n[data-vibe-menu] .vm-access-note {\n margin: calc(-1 * var(--space-4)) 0 var(--space-12);\n font-size: 13px;\n line-height: 1.3;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-who-block > .vm-textbtn {\n margin: calc(-1 * var(--space-6)) 0 var(--space-8);\n height: 32px;\n text-align: left;\n}\n[data-vibe-menu] .vm-publish {\n margin-bottom: var(--space-12);\n}\n[data-vibe-menu] .vm-fail {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n margin: var(--space-6) 0;\n font-size: 13px;\n line-height: 1.3;\n}\n[data-vibe-menu] .vm-fail > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-share-empty {\n margin: 0;\n padding: var(--space-8) 0 var(--space-14);\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-reveal {\n padding: var(--space-12) var(--space-16) var(--space-14);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-reveal + .vm-row,\n[data-vibe-menu] .vm-reveal + a.vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] a.vm-row {\n color: var(--ink);\n text-decoration: none;\n}\n[data-vibe-menu] .vm-qr {\n display: inline-block;\n padding: var(--space-8);\n background: #ffffff;\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-input);\n line-height: 0;\n}\n[data-vibe-menu] .vm-embed {\n display: block;\n width: 100%;\n height: calc(4.5em + 10px);\n margin-bottom: var(--space-8);\n padding: 8px 10px 0;\n resize: none;\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n/* Phone sizing is the named container query (T5 note 5). The @media arm keeps\n the iOS no-zoom-on-focus guarantee keyed on the device as well. */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-embed {\n font-size: 16px;\n }\n}\n@media (max-width: 480px) {\n [data-vibe-menu] .vm-embed {\n font-size: 16px;\n }\n}\n";
1
+ export declare const SHARE_CARD_CSS = "\n[data-vibe-menu] .vm-sr {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n}\n[data-vibe-menu] .vm-access-note {\n margin: calc(-1 * var(--space-4)) 0 var(--space-12);\n font-size: 13px;\n line-height: 1.3;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-who-block > .vm-textbtn {\n margin: calc(-1 * var(--space-6)) 0 var(--space-8);\n height: 32px;\n text-align: left;\n}\n[data-vibe-menu] .vm-publish {\n margin-bottom: var(--space-12);\n}\n[data-vibe-menu] .vm-fail {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n margin: var(--space-6) 0;\n font-size: 13px;\n line-height: 1.3;\n}\n[data-vibe-menu] .vm-fail > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-share-empty {\n margin: 0;\n padding: var(--space-8) 0 var(--space-14);\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-reveal {\n padding: var(--space-12) var(--space-16) var(--space-14);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-reveal + .vm-row,\n[data-vibe-menu] .vm-reveal + a.vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] a.vm-row {\n color: var(--ink);\n text-decoration: none;\n}\n[data-vibe-menu] .vm-qr {\n display: inline-block;\n padding: var(--space-8);\n background: #ffffff;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-input);\n line-height: 0;\n}\n[data-vibe-menu] .vm-embed {\n display: block;\n width: 100%;\n height: calc(4.5em + 10px);\n margin-bottom: var(--space-8);\n padding: 8px 10px 0;\n resize: none;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: 400 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;\n}\n/* Phone sizing is the named container query (T5 note 5). The @media arm keeps\n the iOS no-zoom-on-focus guarantee keyed on the device as well. */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-embed {\n font-size: 16px;\n }\n}\n@media (max-width: 480px) {\n [data-vibe-menu] .vm-embed {\n font-size: 16px;\n }\n}\n";
package/components/vibe-menu/cards/share-card.styles.js CHANGED
@@ -57,7 +57,7 @@ export const SHARE_CARD_CSS = `
57
57
  display: inline-block;
58
58
  padding: var(--space-8);
59
59
  background: #ffffff;
60
- border: var(--stroke-rule) solid var(--line);
60
+ border: var(--stroke-rule) solid var(--line-card);
61
61
  border-radius: var(--radius-input);
62
62
  line-height: 0;
63
63
  }
@@ -68,7 +68,7 @@ export const SHARE_CARD_CSS = `
68
68
  margin-bottom: var(--space-8);
69
69
  padding: 8px 10px 0;
70
70
  resize: none;
71
- border: var(--stroke-rule) solid var(--line);
71
+ border: var(--stroke-rule) solid var(--line-card);
72
72
  border-radius: var(--radius-input);
73
73
  background: transparent;
74
74
  color: var(--ink);
package/components/vibe-menu/vibe-menu.styles.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- export declare const VIBE_MENU_LIGHT_VARS = "\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 58px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;";
3
- export declare const VIBE_MENU_DARK_VARS = "\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;";
4
- export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n Detached layers (portalled out of the menu root) carry\n data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 58px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;\n}\n@media (prefers-color-scheme: dark) {\n [data-vibe-menu],\n [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n container-name: vibe-menu;\n container-type: inline-size;\n color: var(--ink);\n font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n native dark bar inside the cream card. The colour is set on the root AND\n every descendant, for every scroller the menu hosts (drills, the Embed box,\n injected panels): the app's global sheet sets scrollbar-color on *, which\n beats a colour only inherited from the root. The width rule has zero\n specificity so a part that hides its bar (the Code mode tab strip) still\n wins. The webkit arm is for engines without the standard properties; Chrome\n ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n border-radius: var(--radius-full);\n background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n --accent: var(--section-home);\n --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n --accent: var(--section-account);\n --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n --accent: var(--section-code);\n --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n --accent: var(--section-share);\n --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n position: relative;\n padding: var(--space-14) var(--space-16) var(--space-16);\n background: var(--card-bg);\n color: var(--ink);\n font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--stroke-glyph);\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n font: 700 16px/1.1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n margin: 0 0 var(--space-8);\n font: 700 10.5px/1.3 var(--font-tab);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n margin: var(--space-16) 0 0;\n padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n margin: var(--space-8) 0 var(--space-14);\n font-size: 13px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-busy {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: var(--stroke-rule) solid var(--line);\n border-top-color: transparent;\n flex: none;\n animation: vm-spin 0.9s linear infinite;\n}\n@keyframes vm-spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-busy {\n animation: none;\n border-top-color: var(--line);\n }\n}\n\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n position: relative;\n}\n[data-vibe-menu] .vm-strip {\n position: relative;\n width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-end;\n border: var(--stroke-rule) solid var(--line);\n border-right: 0;\n border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-tab {\n position: relative;\n width: var(--size-tab);\n flex: none;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: 0;\n padding: 0 0 0 var(--space-9);\n cursor: pointer;\n background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--menu-ink);\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n width: calc(var(--size-icon-circle) / 2);\n height: calc(var(--size-icon-circle) / 2);\n fill: none;\n stroke: var(--vibes-cream);\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 0 0 1.9px;\n font-family: var(--font-tab);\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 1.9px;\n text-transform: uppercase;\n white-space: nowrap;\n pointer-events: none;\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n width: calc(var(--size-tab) + var(--size-home-extra));\n padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n left: calc(var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] {\n width: calc(var(--size-tab) + var(--size-bar-end));\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] .vm-tab-label {\n right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n outline: var(--stroke-focus) solid var(--line);\n outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n and drew square corners. The pill's ring is cream, sits in the obsidian\n glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n outline: var(--stroke-focus) solid var(--vibes-cream);\n outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n position: absolute;\n top: -4px;\n right: 6px;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n position: relative;\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n position: absolute;\n left: 0;\n bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n position: absolute;\n right: 0;\n bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n width: auto;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-width: 0;\n padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n width: var(--size-icon-circle-phone);\n height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n width: 12px;\n height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n padding-right: var(--size-bar-end);\n flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n position: static;\n display: block;\n font-size: 9.6px;\n letter-spacing: 1px;\n padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n position: relative;\n width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n border-radius: var(--radius-full);\n flex: none;\n background:\n linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n var(--obsidian-fill);\n box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n position: absolute;\n left: var(--size-ring);\n top: var(--size-ring);\n width: var(--size-pill-w);\n height: var(--size-pill-h);\n padding: 0;\n border: 0;\n border-radius: var(--radius-full);\n background: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-switch-art {\n width: 100%;\n height: 100%;\n display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n top: -6px;\n right: 4px;\n}\n[data-vibe-menu] .vm-chiclet {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--section-code);\n /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n color: var(--on-code);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n position: absolute;\n left: 0;\n top: 0;\n background: var(--card-bg);\n color: var(--ink);\n overflow: hidden;\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n position: absolute;\n left: 0;\n top: 0;\n overflow: visible;\n pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n fill: none;\n stroke: var(--line);\n stroke-width: 2;\n stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-14) var(--space-18);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font: 700 21px/1 var(--font-display);\n letter-spacing: -0.02em;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n width: var(--size-glyph-cta);\n height: var(--size-glyph-cta);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n height: var(--size-chip);\n padding: 0 var(--space-12);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-chip);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 11px;\n flex: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n font: 700 14px/1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n height: var(--size-copy);\n padding: 0 var(--space-14);\n border-radius: var(--radius-copy);\n flex-shrink: 0;\n align-self: center;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n the card (DS \"text that can outgrow its track wraps\") instead of running\n past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n min-height: var(--size-chip);\n max-width: 100%;\n min-width: 0;\n padding: var(--space-2) var(--space-12);\n text-align: left;\n overflow-wrap: anywhere;\n border: var(--stroke-mini) solid var(--suggest-border);\n border-radius: var(--radius-chip);\n background: none;\n color: var(--ink);\n font: 400 13px/20px var(--font-display);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover {\n border-color: var(--line);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-picks {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape ---------- */\n[data-vibe-menu] .vm-composer {\n display: flex;\n align-items: stretch;\n min-height: var(--size-composer);\n margin-bottom: var(--space-16);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-full);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n flex: 1;\n min-width: 0;\n align-self: center;\n margin: 0 var(--space-12) 0 2px;\n padding: 0;\n resize: none;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font: 700 18px/1.2 var(--font-display);\n letter-spacing: -0.02em;\n field-sizing: content;\n max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n order: -1;\n width: var(--size-copy);\n height: var(--size-copy);\n margin-left: var(--space-10);\n align-self: center;\n border-radius: 50%;\n display: grid;\n place-items: center;\n flex: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-24) 0 20px;\n border-left: var(--stroke-rule) solid var(--line);\n background: var(--section-code);\n color: var(--on-code);\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n display: flex;\n}\n[data-vibe-menu] .vm-queue-note {\n display: none;\n margin: -10px 0 12px 18px;\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n display: block;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n margin-left: 4px;\n width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n border-top: var(--stroke-rule) solid var(--line);\n margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: 100%;\n height: var(--size-row);\n padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--ink);\n color: var(--card-bg);\n display: grid;\n place-items: center;\n flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n background: transparent;\n color: var(--ink);\n box-shadow: inset 0 0 0 2px var(--line);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n opacity: 0.35;\n cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n background: var(--ink) !important;\n color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n font: 700 12px/1 var(--font-tab);\n box-shadow: inset 0 0 0 2px var(--line);\n}\n[data-vibe-menu] .vm-app {\n background: var(--app);\n color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n display: grid;\n color: var(--muted);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.08em;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n max-width: 45%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n position: relative;\n width: var(--size-switch-w);\n height: 20px;\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-switch);\n flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: calc(100% + 2 * var(--space-16));\n height: var(--size-row-compact);\n margin: 0 calc(-1 * var(--space-16));\n padding: 0 var(--space-16);\n border-top: var(--stroke-rule) solid var(--line);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n top edge, which the outline already draws: no rule, and it takes the body's\n top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n margin-top: calc(-1 * var(--space-14));\n border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: 400 16px/1.1 var(--font-display);\n color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n margin: 0 0 var(--space-14);\n font: 700 18px/1.25 var(--font-display);\n letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n display: block;\n width: 100%;\n height: var(--size-row-compact);\n margin-top: var(--space-16);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-done);\n background: var(--accent);\n color: var(--on-accent);\n text-align: center;\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n display: block;\n width: 100%;\n height: 40px;\n margin-top: var(--space-4);\n text-align: center;\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-12) 0;\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n margin: 0;\n font: 400 16px/1.3 var(--font-display);\n color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n border: var(--stroke-rule) solid var(--line);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-moment-text {\n margin: 0 0 var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n width: 100%;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n display: inline-block;\n margin: 0 var(--space-2);\n font: 400 14px/1.3 var(--font-display);\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n overflow-wrap: anywhere;\n pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n so the base stylesheet owns its shut and open states. The shell's per-frame\n tween (T11) writes an inline height, which overrides these during motion.\n C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n height: 0;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n height: auto;\n /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n 8px margin-top and two hairline borders, so the clip never scrolls on top\n of the log. */\n max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n overflow: auto;\n /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n .vm-log scrolls itself, so the clip never shows a bar. */\n scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n display: none;\n}\n[data-vibe-menu] .vm-log {\n max-height: var(--size-log-max);\n overflow-y: auto;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: var(--space-8);\n padding: var(--space-10) 4px var(--space-10) var(--space-24);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n font-size: 13.5px;\n line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n display: flex;\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n flex: 1;\n height: var(--size-bar);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-10);\n text-align: center;\n font: 700 24px/1 var(--font-display);\n letter-spacing: -0.02em;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n border-left: var(--stroke-rule) solid var(--line);\n}\n[data-vibe-menu] .vm-access button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n background: transparent;\n}\n[data-vibe-menu] .vm-access button .vm-busy {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-access-line {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n min-height: var(--size-access-line);\n margin: var(--space-10) 0 var(--space-12);\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-access-line);\n background: var(--share-tint);\n font-size: 16.5px;\n line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n padding: 5px 5px 5px var(--space-10);\n border: var(--stroke-rule) solid var(--line);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n font: 700 11px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n flex: 1;\n min-width: 0;\n font-size: 13px;\n line-height: 1.25;\n color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n display: flex;\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n flex: 1;\n height: var(--size-segment);\n text-align: center;\n font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n border-left: var(--stroke-rule) solid var(--line);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n margin: 0;\n border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n flex: none;\n height: var(--size-segment-mini);\n padding: 0 var(--space-8);\n font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n width: 100%;\n height: var(--size-input);\n margin-bottom: var(--space-14);\n padding: 0 var(--space-18);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n margin-top: 0;\n padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n height: 40px;\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n margin-bottom: 2px;\n padding: var(--space-10) var(--space-12);\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-card);\n background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n display: flex;\n gap: var(--space-6);\n margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n width: calc(100% + 2 * var(--space-16));\n margin: 2px calc(-1 * var(--space-16)) 0;\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n display: grid;\n place-items: center;\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border: var(--stroke-rule) solid var(--line);\n border-radius: 50%;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n background: var(--accent);\n color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n color: inherit;\n text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n border-color: var(--section-account);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n Siblings of .vm-suggest, since a button can't nest a button. The owner's\n toggle (FastPathToggle) is outline when not blessed, filled when blessed\n (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n border-radius: var(--radius-full);\n background: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-ask {\n font-size: 18px;\n }\n /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n [data-vibe-menu] .vm-composer textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 4px;\n width: 28px;\n }\n [data-vibe-menu] .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n }\n [data-vibe-menu] .vm-access button {\n font-size: 21px;\n }\n /* the access line keeps its sentence to two lines beside the chip */\n [data-vibe-menu] .vm-access-line {\n padding-left: 12px;\n gap: 8px;\n font-size: 15.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 10px;\n }\n /* Data and Code drop under the handle on one line (two on the narrowest) */\n [data-vibe-menu] .vm-person .vm-grants {\n flex-basis: 100%;\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request .vm-grants {\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request-top {\n flex-basis: 100%;\n }\n [data-vibe-menu] .vm-input {\n font-size: 16px;\n }\n}\n@container vibe-menu (max-width: 359px) {\n [data-vibe-menu] .vm-access button {\n font-size: 19px;\n }\n /* the line drops its icon here: the enclosure already marks it */\n [data-vibe-menu] .vm-access-line > .vm-glyph {\n display: none;\n }\n [data-vibe-menu] .vm-access-line {\n margin: 8px 0 10px;\n font-size: 14.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 8px;\n }\n /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n [data-vibe-menu] .vm-cap {\n padding: 0 13px 0 10px;\n letter-spacing: 0.05em;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 3px;\n width: 24px;\n }\n /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n [data-vibe-menu] .vm-composer textarea {\n margin: 0 4px 0 0;\n font-size: 16px;\n }\n [data-vibe-menu] .vm-chip.vm-copy {\n padding: 0 10px;\n letter-spacing: 0.06em;\n }\n}\n";
2
+ export declare const VIBE_MENU_LIGHT_VARS = "\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-card: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 58px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;";
3
+ export declare const VIBE_MENU_DARK_VARS = "\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;";
4
+ export declare const VIBE_MENU_CSS = "\n/* ---------- tokens (tokens.json), light, then both dark arms ----------\n Detached layers (portalled out of the menu root) carry\n data-vibe-menu-detached, so every token block lists them too. */\n[data-vibe-menu],\n[data-vibe-menu-detached] {\n color-scheme: light;\n --section-home: oklch(76.02% 0.1832 146.61);\n --section-account: oklch(57.46% 0.2126 29.55);\n --section-code: oklch(89.78% 0.1857 98.22);\n --section-share: oklch(64.39% 0.1304 231.41);\n --vibes-black: #000000;\n --vibes-cream: #fffff0;\n --menu-ink: #1a1a1a;\n --card-bg: var(--vibes-cream);\n --ink: #111111;\n --muted: #555555;\n --line: #111111;\n --line-card: #111111;\n --line-hairline: #1111112e;\n --placeholder: var(--muted);\n --suggest-border: #11111173;\n --share-tint: #009ace1f;\n --share-tint-strong: #009ace40;\n --on-home: var(--menu-ink);\n --on-account: var(--vibes-cream);\n --on-code: var(--menu-ink);\n --on-share: var(--menu-ink);\n --badge: var(--section-account);\n --on-badge: var(--vibes-cream);\n --obsidian-fill: rgba(6, 9, 10, 0.94);\n --obsidian-edge: rgba(255, 255, 255, 0.17);\n --obsidian-highlight: rgba(255, 255, 255, 0.32);\n --obsidian-rim: rgba(255, 255, 255, 0.1);\n --font-display: \"Alte Haas Grotesk\", Inter, sans-serif;\n --font-tab: Inter, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --space-9: 9px;\n --space-2: 2px;\n --space-4: 4px;\n --space-6: 6px;\n --space-8: 8px;\n --space-10: 10px;\n --space-12: 12px;\n --space-14: 14px;\n --space-16: 16px;\n --space-18: 18px;\n --space-24: 24px;\n --radius-card: 16px;\n --radius-full: 999px;\n --radius-bar-end: 25px;\n --radius-access-line: 24px;\n --radius-input: 22px;\n --radius-done: 21px;\n --radius-copy: 18px;\n --radius-chip: 14px;\n --radius-moment: 12px;\n --radius-switch: 10px;\n --radius-meter: 7px;\n --obsidian-shadow: 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 0 0 12px rgba(255, 255, 255, 0.02);\n --swatch-selected: 0 0 0 2px #fffff0, 0 0 0 4px #111111;\n --stroke-rule: 2px;\n --stroke-hairline: 1px;\n --stroke-mini: 1.5px;\n --stroke-focus: 3px;\n --stroke-glyph: 2.4px;\n --size-icon-circle: 28px;\n --size-icon-circle-phone: 22px;\n --size-glyph: 14px;\n --size-glyph-cta: 20px;\n --size-bar: 50px;\n --size-tab: 176px;\n --size-home-extra: 14px;\n --size-bar-end: 63px;\n --size-pill-w: 120px;\n --size-pill-h: 44px;\n --size-ring: 3px;\n --size-edge: 24px;\n --size-edge-phone: 16px;\n --size-pill-flat-inset: 19px;\n --size-band: 8px;\n --size-row: 46px;\n --size-row-compact: 42px;\n --size-chip: 28px;\n --size-copy: 36px;\n --size-input: 44px;\n --size-composer: 58px;\n --size-access-line: 48px;\n --size-segment: 32px;\n --size-segment-mini: 24px;\n --size-switch-w: 36px;\n --size-meter: 14px;\n --size-card-max: 480px;\n --size-card-max-phone: 560px;\n --size-log-max: 160px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;\n}\n@media (prefers-color-scheme: dark) {\n [data-vibe-menu],\n [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n }\n}\n.dark [data-vibe-menu],\n.dark [data-vibe-menu-detached] {\n color-scheme: dark;\n --card-bg: #1a1a1a;\n --ink: #e0e0e0;\n --muted: #a3a3a3;\n --line-card: #e0e0e0;\n --line-hairline: #e0e0e02e;\n --suggest-border: #e0e0e073;\n --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;\n}\n\n/* ---------- the root: the phone container ---------- */\n[data-vibe-menu] {\n container-name: vibe-menu;\n container-type: inline-size;\n color: var(--ink);\n font-family: var(--font-display);\n}\n\n/* Scrollbars (smoke F15): thin, in the menu's hairline, both themes, never the\n native dark bar inside the cream card. The colour is set on the root AND\n every descendant, for every scroller the menu hosts (drills, the Embed box,\n injected panels): the app's global sheet sets scrollbar-color on *, which\n beats a colour only inherited from the root. The width rule has zero\n specificity so a part that hides its bar (the Code mode tab strip) still\n wins. The webkit arm is for engines without the standard properties; Chrome\n ignores it once they are set. */\n[data-vibe-menu],\n[data-vibe-menu] *,\n[data-vibe-menu-detached],\n[data-vibe-menu-detached] * {\n scrollbar-color: var(--line-hairline) transparent;\n}\n:where([data-vibe-menu]),\n:where([data-vibe-menu]) :where(*) {\n scrollbar-width: thin;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n background: transparent;\n}\n:where([data-vibe-menu]) ::-webkit-scrollbar-thumb {\n border-radius: var(--radius-full);\n background: var(--line-hairline);\n}\n\n/* A section is set by data-section on any ancestor (or the root), using the\n code keys: home | settings (Account) | vibe (Code) | share. It sets --accent\n (the section colour) and --on-accent (its label colour). */\n[data-vibe-menu][data-section=\"home\"],\n[data-vibe-menu] [data-section=\"home\"] {\n --accent: var(--section-home);\n --on-accent: var(--on-home);\n}\n[data-vibe-menu][data-section=\"settings\"],\n[data-vibe-menu] [data-section=\"settings\"] {\n --accent: var(--section-account);\n --on-accent: var(--on-account);\n}\n[data-vibe-menu][data-section=\"vibe\"],\n[data-vibe-menu] [data-section=\"vibe\"] {\n --accent: var(--section-code);\n --on-accent: var(--on-code);\n}\n[data-vibe-menu][data-section=\"share\"],\n[data-vibe-menu] [data-section=\"share\"] {\n --accent: var(--section-share);\n --on-accent: var(--on-share);\n}\n\n[data-vibe-menu],\n[data-vibe-menu] * {\n box-sizing: border-box;\n}\n/* the card's surface and side padding, so rows can bleed edge to edge */\n[data-vibe-menu] .vm-card-body {\n position: relative;\n padding: var(--space-14) var(--space-16) var(--space-16);\n background: var(--card-bg);\n color: var(--ink);\n font: 400 14px/20px var(--font-display);\n}\n[data-vibe-menu] .vm-card-body.is-framed {\n border: var(--stroke-rule) solid var(--line);\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n overflow: hidden;\n}\n\n/* ---------- shared ---------- */\n/* Zero specificity: every vm-* rule wins over it, and so does any utility\n class on content a host injects into the card (slots). */\n:where([data-vibe-menu]) :where(button) {\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n text-align: left;\n touch-action: manipulation;\n}\n[data-vibe-menu] .vm-glyph {\n width: var(--size-glyph);\n height: var(--size-glyph);\n fill: none;\n stroke: currentColor;\n stroke-width: var(--stroke-glyph);\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-label,\n[data-vibe-menu] .vm-seg button,\n[data-vibe-menu] .vm-chip {\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-label.is-plain {\n font: 700 16px/1.1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-kicker,\n[data-vibe-menu] .vm-subhead {\n margin: 0 0 var(--space-8);\n font: 700 10.5px/1.3 var(--font-tab);\n letter-spacing: 0.14em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-subhead {\n margin: var(--space-16) 0 0;\n padding-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-sub {\n margin: var(--space-8) 0 var(--space-14);\n font-size: 13px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-app-name {\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-busy {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: var(--stroke-rule) solid var(--line-card);\n border-top-color: transparent;\n flex: none;\n animation: vm-spin 0.9s linear infinite;\n}\n@keyframes vm-spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-busy {\n animation: none;\n border-top-color: var(--line-card);\n }\n}\n\n/* ---------- SectionStrip: the bar ---------- */\n[data-vibe-menu] .vm-menu {\n position: relative;\n}\n[data-vibe-menu] .vm-strip {\n position: relative;\n width: calc(var(--size-tab) * 4 + var(--size-home-extra) + var(--size-bar-end) + 2px);\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-strip-slide {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: flex-end;\n border: var(--stroke-rule) solid var(--line);\n border-right: 0;\n border-radius: var(--bar-tl, var(--radius-bar-end)) 0 0 var(--radius-bar-end);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-tab {\n position: relative;\n width: var(--size-tab);\n flex: none;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-start;\n border: 0;\n padding: 0 0 0 var(--space-9);\n cursor: pointer;\n background: var(--accent);\n}\n[data-vibe-menu] .vm-tab-circle {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--menu-ink);\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n}\n[data-vibe-menu] .vm-tab svg {\n width: calc(var(--size-icon-circle) / 2);\n height: calc(var(--size-icon-circle) / 2);\n fill: none;\n stroke: var(--vibes-cream);\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex: none;\n}\n[data-vibe-menu] .vm-tab-label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 0 0 1.9px;\n font-family: var(--font-tab);\n font-size: 14px;\n font-weight: 700;\n letter-spacing: 1.9px;\n text-transform: uppercase;\n white-space: nowrap;\n pointer-events: none;\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] {\n width: calc(var(--size-tab) + var(--size-home-extra));\n padding-left: calc(var(--space-9) + var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"home\"] .vm-tab-label {\n left: calc(var(--size-home-extra) / 2);\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] {\n width: calc(var(--size-tab) + var(--size-bar-end));\n}\n[data-vibe-menu] .vm-tab[data-section=\"share\"] .vm-tab-label {\n right: var(--size-bar-end);\n}\n[data-vibe-menu] .vm-tab:focus-visible {\n outline: var(--stroke-focus) solid var(--line);\n outline-offset: -3px;\n}\n/* Port change (smoke F5): the DS inset line ring vanished on the black pill\n and drew square corners. The pill's ring is cream, sits in the obsidian\n glass's 3px rim (offset 0), and follows the stadium (the pill's radius). */\n[data-vibe-menu] .vm-pill:focus-visible {\n outline: var(--stroke-focus) solid var(--vibes-cream);\n outline-offset: 0;\n}\n[data-vibe-menu] .vm-menu.has-card .vm-tab:not(.is-active) {\n opacity: var(--opacity-tab-inactive);\n}\n[data-vibe-menu] .vm-badge {\n position: absolute;\n top: -4px;\n right: 6px;\n min-width: 18px;\n height: 18px;\n padding: 0 5px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\n font: 700 11px/18px var(--font-display);\n text-align: center;\n}\n/* the bar sits against the pill: it runs half the glass under it */\n[data-vibe-menu] .vm-bar-anchor {\n position: relative;\n height: var(--size-bar);\n}\n[data-vibe-menu] .vm-bar-anchor .vm-strip {\n position: absolute;\n left: 0;\n bottom: 0;\n}\n[data-vibe-menu] .vm-bar-anchor .vm-glass {\n position: absolute;\n right: 0;\n bottom: 0;\n}\n/* phones: the bar spans the width; tabs sized to their content, icon above label */\n[data-vibe-menu] .vm-strip.is-phone {\n width: 100%;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab {\n width: auto;\n flex: 1 1 auto;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--space-2);\n min-width: 0;\n padding: 4px 2px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-circle {\n width: var(--size-icon-circle-phone);\n height: var(--size-icon-circle-phone);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab svg {\n width: 12px;\n height: 12px;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"home\"] {\n padding: 4px 2px 4px calc(2px + var(--size-home-extra) * 0.7);\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab[data-section=\"share\"] {\n padding-right: var(--size-bar-end);\n flex-grow: 1;\n}\n[data-vibe-menu] .vm-strip.is-phone .vm-tab-label {\n position: static;\n display: block;\n font-size: 9.6px;\n letter-spacing: 1px;\n padding: 0 0 0 1px;\n}\n\n/* ---------- VibesSwitch: the pill in its obsidian glass ---------- */\n[data-vibe-menu] .vm-glass {\n position: relative;\n width: calc(var(--size-pill-w) + 2 * var(--size-ring));\n height: calc(var(--size-pill-h) + 2 * var(--size-ring));\n border-radius: var(--radius-full);\n flex: none;\n background:\n linear-gradient(to right, transparent, var(--obsidian-highlight), transparent) top / 100% 1px no-repeat,\n linear-gradient(to bottom, var(--obsidian-highlight), transparent, var(--obsidian-edge)) left / 1px 100% no-repeat,\n var(--obsidian-fill);\n box-shadow: var(--obsidian-shadow);\n}\n[data-vibe-menu] .vm-pill {\n position: absolute;\n left: var(--size-ring);\n top: var(--size-ring);\n width: var(--size-pill-w);\n height: var(--size-pill-h);\n padding: 0;\n border: 0;\n border-radius: var(--radius-full);\n background: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-switch-art {\n width: 100%;\n height: 100%;\n display: block;\n}\n[data-vibe-menu] .vm-pill .vm-badge {\n top: -6px;\n right: 4px;\n}\n[data-vibe-menu] .vm-chiclet {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--section-code);\n /* Port change: bundle.css writes #111111 (ink); text on a section colour is\n menu-ink (Global Constraints), which --on-code resolves to in both themes. */\n color: var(--on-code);\n font: 700 11px/18px var(--font-display);\n letter-spacing: 0.06em;\n}\n\n/* ---------- MenuCard: the card, its band and the folder-tab join, drawn once ---------- */\n[data-vibe-menu] .vm-frame {\n position: relative;\n}\n[data-vibe-menu] .vm-frame .vm-card {\n position: absolute;\n left: 0;\n top: 0;\n background: var(--card-bg);\n color: var(--ink);\n overflow: hidden;\n border-radius: var(--radius-card) var(--radius-card) 0 0;\n}\n[data-vibe-menu] .vm-frame .vm-card .vm-card-body {\n padding-bottom: calc(var(--space-16) + var(--size-band));\n}\n[data-vibe-menu] .vm-outline {\n position: absolute;\n left: 0;\n top: 0;\n overflow: visible;\n pointer-events: none;\n}\n[data-vibe-menu] .vm-outline .vm-band,\n[data-vibe-menu] .vm-outline .vm-cover {\n fill: var(--accent);\n}\n[data-vibe-menu] .vm-outline .vm-edge {\n fill: none;\n stroke: var(--line);\n stroke-width: 2;\n stroke-linejoin: miter;\n}\n\n/* ---------- ActionPill: the card's one main action ---------- */\n[data-vibe-menu] .vm-ask {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-14) var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n background: var(--accent);\n color: var(--on-accent);\n font: 700 21px/1 var(--font-display);\n letter-spacing: -0.02em;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-ask.is-solo {\n margin-bottom: var(--space-14);\n}\n[data-vibe-menu] .vm-ask .vm-glyph {\n width: var(--size-glyph-cta);\n height: var(--size-glyph-cta);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-ask:hover .vm-glyph {\n transform: translateX(4px);\n}\n[data-vibe-menu] .vm-ask.is-phone {\n font-size: 18px;\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-sub:has(.vm-copy) > span {\n flex: 1;\n}\n\n/* ---------- Chip ---------- */\n[data-vibe-menu] .vm-chip {\n height: var(--size-chip);\n padding: 0 var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-chip);\n background: var(--accent);\n color: var(--on-accent);\n font-size: 11px;\n flex: none;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-chip.is-ghost {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chip.is-name {\n font: 700 14px/1 var(--font-display);\n letter-spacing: 0;\n text-transform: none;\n}\n[data-vibe-menu] .vm-chip.vm-copy {\n height: var(--size-copy);\n padding: 0 var(--space-14);\n border-radius: var(--radius-copy);\n flex-shrink: 0;\n align-self: center;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-suggestions {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-6);\n}\n/* Port change (smoke F9): codegen writes long chips, so a chip wraps inside\n the card (DS \"text that can outgrow its track wraps\") instead of running\n past its edge; a one-line chip keeps the 28px chip height. */\n[data-vibe-menu] .vm-suggest {\n min-height: var(--size-chip);\n max-width: 100%;\n min-width: 0;\n padding: var(--space-2) var(--space-12);\n text-align: left;\n overflow-wrap: anywhere;\n border: var(--stroke-mini) solid var(--suggest-border);\n border-radius: var(--radius-chip);\n background: none;\n color: var(--ink);\n font: 400 13px/20px var(--font-display);\n cursor: pointer;\n}\n[data-vibe-menu] .vm-suggest:hover,\n[data-vibe-menu] .vm-suggest.is-hover {\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-picks {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n\n/* ---------- Composer: the logo pill's shape ---------- */\n[data-vibe-menu] .vm-composer {\n display: flex;\n align-items: stretch;\n min-height: var(--size-composer);\n margin-bottom: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n background: var(--card-bg);\n}\n[data-vibe-menu] .vm-composer:focus-within,\n[data-vibe-menu] .vm-composer.is-focus {\n box-shadow: 0 0 0 3px var(--accent);\n}\n[data-vibe-menu] .vm-composer textarea {\n flex: 1;\n min-width: 0;\n align-self: center;\n margin: 0 var(--space-12) 0 2px;\n padding: 0;\n resize: none;\n border: 0;\n outline: 0;\n background: transparent;\n color: var(--ink);\n font: 700 18px/1.2 var(--font-display);\n letter-spacing: -0.02em;\n field-sizing: content;\n max-height: 2.4em;\n}\n[data-vibe-menu] .vm-composer textarea::placeholder {\n color: var(--placeholder);\n}\n[data-vibe-menu] .vm-composer .vm-attach {\n order: -1;\n width: var(--size-copy);\n height: var(--size-copy);\n margin-left: var(--space-10);\n align-self: center;\n border-radius: 50%;\n display: grid;\n place-items: center;\n flex: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer .vm-attach:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-composer .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-cap {\n flex: none;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 var(--space-24) 0 20px;\n border-left: var(--stroke-rule) solid var(--line-card);\n background: var(--section-code);\n color: var(--on-code);\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n white-space: nowrap;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-cap:hover {\n background: color-mix(in oklch, var(--section-code), var(--menu-ink) 10%);\n}\n[data-vibe-menu] .vm-composer.is-building .vm-cap[data-send],\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-stop] {\n display: none;\n}\n[data-vibe-menu] .vm-composer.is-building:has(textarea:not(:placeholder-shown)) .vm-cap[data-send] {\n display: flex;\n}\n[data-vibe-menu] .vm-queue-note {\n display: none;\n margin: -10px 0 12px 18px;\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-composer:has(textarea:not(:placeholder-shown)) + .vm-queue-note {\n display: block;\n}\n[data-vibe-menu] .vm-composer.is-phone textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-attach {\n margin-left: 4px;\n width: 28px;\n}\n[data-vibe-menu] .vm-composer.is-phone .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n}\n\n/* ---------- Row: the bar's tab grammar inside the card ---------- */\n[data-vibe-menu] .vm-group {\n border-top: var(--stroke-rule) solid var(--line-card);\n margin: 0 calc(-1 * var(--space-16));\n}\n[data-vibe-menu] .vm-group.is-flush {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: 100%;\n height: var(--size-row);\n padding: 0 var(--space-16);\n}\n[data-vibe-menu] .vm-row.is-compact {\n height: var(--size-row-compact);\n}\n[data-vibe-menu] .vm-row + .vm-row {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-row .vm-label {\n flex: 1;\n}\n[data-vibe-menu] .vm-dot {\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border-radius: 50%;\n background: var(--ink);\n color: var(--card-bg);\n display: grid;\n place-items: center;\n flex: none;\n}\n[data-vibe-menu] button.vm-row:hover .vm-dot:not(.vm-app),\n[data-vibe-menu] .vm-row.is-hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-row.is-quiet .vm-dot {\n background: transparent;\n color: var(--ink);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] {\n opacity: 0.35;\n cursor: default;\n}\n[data-vibe-menu] .vm-row[aria-disabled=\"true\"] .vm-dot {\n background: var(--ink) !important;\n color: var(--card-bg) !important;\n}\n[data-vibe-menu] .vm-app,\n[data-vibe-menu] .vm-initial {\n font: 700 12px/1 var(--font-tab);\n box-shadow: inset 0 0 0 2px var(--line-card);\n}\n[data-vibe-menu] .vm-app {\n background: var(--app);\n color: var(--menu-ink);\n}\n[data-vibe-menu] .vm-initial {\n background: transparent;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-chev {\n display: grid;\n color: var(--muted);\n transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n[data-vibe-menu] .vm-chev.is-open {\n transform: rotate(90deg);\n}\n[data-vibe-menu] .vm-count {\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.08em;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-count.is-handle {\n max-width: 45%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n letter-spacing: 0.02em;\n}\n[data-vibe-menu] .vm-switch {\n position: relative;\n width: var(--size-switch-w);\n height: 20px;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-switch);\n flex: none;\n}\n[data-vibe-menu] .vm-switch::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--ink);\n}\n[data-vibe-menu] .vm-switch.is-on {\n background: var(--accent);\n}\n[data-vibe-menu] .vm-switch.is-on::after {\n left: 18px;\n}\n\n/* ---------- BackRow and DoneButton: a drill-in's frame ---------- */\n[data-vibe-menu] .vm-back {\n display: flex;\n align-items: center;\n gap: var(--space-12);\n width: calc(100% + 2 * var(--space-16));\n height: var(--size-row-compact);\n margin: 0 calc(-1 * var(--space-16));\n padding: 0 var(--space-16);\n border-top: var(--stroke-rule) solid var(--line-card);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* A drill that replaces the whole card body (Share, Account) sits on the card's\n top edge, which the outline already draws: no rule, and it takes the body's\n top padding so no empty band shows above it (cards-hero.css .card-title + .h-back). */\n[data-vibe-menu] .vm-back.is-top {\n margin-top: calc(-1 * var(--space-14));\n border-top: 0;\n}\n[data-vibe-menu] .vm-back .vm-label {\n flex: none;\n}\n[data-vibe-menu] .vm-back-name {\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font: 400 16px/1.1 var(--font-display);\n color: var(--muted);\n}\n[data-vibe-menu] .vm-back:hover .vm-dot,\n[data-vibe-menu] .vm-back.is-hover .vm-dot {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-drill {\n padding-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-sec + .vm-drill-sec {\n margin-top: var(--space-14);\n}\n[data-vibe-menu] .vm-drill-line {\n margin: 0 0 var(--space-14);\n font: 700 18px/1.25 var(--font-display);\n letter-spacing: -0.01em;\n}\n[data-vibe-menu] .vm-done {\n display: block;\n width: 100%;\n height: var(--size-row-compact);\n margin-top: var(--space-16);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-done);\n background: var(--accent);\n color: var(--on-accent);\n text-align: center;\n font: 700 14px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n cursor: pointer;\n}\n[data-vibe-menu] .vm-textbtn {\n display: block;\n width: 100%;\n height: 40px;\n margin-top: var(--space-4);\n text-align: center;\n font: 700 12px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-textbtn:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-faq {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-12);\n width: 100%;\n padding: var(--space-12) 0;\n font: 400 16px/1.3 var(--font-display);\n}\n[data-vibe-menu] .vm-faq + .vm-faq {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n\n/* ---------- MomentLine: the current moment ---------- */\n[data-vibe-menu] .vm-moments {\n display: flex;\n flex-direction: column;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment {\n margin: 0;\n font: 400 16px/1.3 var(--font-display);\n color: var(--ink);\n}\n[data-vibe-menu] .vm-moment.is-pinned {\n padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-moment-text {\n margin: 0 0 var(--space-10);\n}\n[data-vibe-menu] .vm-moment-actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6);\n}\n[data-vibe-menu] .vm-moment-hint {\n font-size: 12px;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-progress,\n[data-vibe-menu] .vm-moment.is-summary {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n padding: 0 var(--space-2);\n}\n[data-vibe-menu] .vm-moment.is-summary {\n color: var(--muted);\n}\n[data-vibe-menu] .vm-moment.is-expander {\n width: 100%;\n gap: var(--space-8);\n}\n[data-vibe-menu] .vm-moment.is-expander:hover {\n color: var(--ink);\n}\n/* The live line's link (the first build's real address, #6451 S9c): pointer\n events back on, since the layer takes no hits of its own. */\n[data-vibe-menu] .vm-moment-link {\n display: inline-block;\n margin: 0 var(--space-2);\n font: 400 14px/1.3 var(--font-display);\n color: var(--ink);\n text-decoration: underline;\n text-underline-offset: 3px;\n overflow-wrap: anywhere;\n pointer-events: auto;\n}\n[data-vibe-menu] .vm-live .vm-chev {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-log-clip {\n overflow: hidden;\n}\n/* Port addition (RULINGS R1): the log clip is always rendered (RECONCILE \u00A75c),\n so the base stylesheet owns its shut and open states. The shell's per-frame\n tween (T11) writes an inline height, which overrides these during motion.\n C's VIBE_MENU_SHELL_CSS does not repeat them. */\n[data-vibe-menu] .vm-log-clip[data-open=\"false\"] {\n height: 0;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"] {\n height: auto;\n /* Known adjustment (plan header): room for .vm-log's own 160px cap plus its\n 8px margin-top and two hairline borders, so the clip never scrolls on top\n of the log. */\n max-height: calc(var(--size-log-max, 160px) + var(--space-8) + 2 * var(--stroke-hairline));\n overflow: auto;\n /* Smoke F15: the shell's height tween makes the clip overflow for a moment;\n .vm-log scrolls itself, so the clip never shows a bar. */\n scrollbar-width: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"]::-webkit-scrollbar {\n display: none;\n}\n[data-vibe-menu] .vm-log {\n max-height: var(--size-log-max);\n overflow-y: auto;\n overscroll-behavior: contain;\n display: flex;\n flex-direction: column;\n gap: var(--space-6);\n margin-top: var(--space-8);\n padding: var(--space-10) 4px var(--space-10) var(--space-24);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n font-size: 13.5px;\n line-height: 1.35;\n}\n[data-vibe-menu] .vm-log-line {\n margin: 0;\n}\n[data-vibe-menu] .vm-log-line:first-child {\n margin-top: auto;\n}\n[data-vibe-menu] .vm-log-line b {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: var(--muted);\n margin-right: 4px;\n}\n\n/* ---------- AccessToggle: Restricted | Public and its line ---------- */\n[data-vibe-menu] .vm-access {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-access button {\n flex: 1;\n height: var(--size-bar);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-10);\n text-align: center;\n font: 700 24px/1 var(--font-display);\n letter-spacing: -0.02em;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-access button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-access button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-access button:not(.is-active):hover {\n background: color-mix(in srgb, var(--accent) 20%, transparent);\n}\n/* Settings still loading (preflight ruling P14): dimmed and inert. */\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] {\n opacity: var(--opacity-row-disabled);\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button {\n cursor: default;\n}\n[data-vibe-menu] .vm-access[aria-disabled=\"true\"] button:not(.is-active):hover {\n background: transparent;\n}\n[data-vibe-menu] .vm-access button .vm-busy {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-access-line {\n display: flex;\n align-items: center;\n gap: var(--space-10);\n min-height: var(--size-access-line);\n margin: var(--space-10) 0 var(--space-12);\n padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-access-line);\n background: var(--share-tint);\n font-size: 16.5px;\n line-height: 1.25;\n}\n[data-vibe-menu] .vm-access-line > span {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-access-line .vm-glyph {\n width: 16px;\n height: 16px;\n}\n[data-vibe-menu] .vm-publish {\n display: flex;\n align-items: center;\n gap: var(--space-8);\n padding: 5px 5px 5px var(--space-10);\n border: var(--stroke-rule) solid var(--line-card);\n border-left: var(--size-band) solid var(--accent);\n border-radius: var(--radius-moment);\n}\n[data-vibe-menu] .vm-publish b {\n font: 700 11px/1 var(--font-tab);\n letter-spacing: 0.1em;\n text-transform: uppercase;\n}\n[data-vibe-menu] .vm-publish span {\n flex: 1;\n min-width: 0;\n font-size: 13px;\n line-height: 1.25;\n color: var(--muted);\n}\n\n/* ---------- GrantControls ---------- */\n[data-vibe-menu] .vm-seg {\n display: flex;\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-full);\n overflow: hidden;\n}\n[data-vibe-menu] .vm-seg button {\n flex: 1;\n height: var(--size-segment);\n text-align: center;\n font-size: 11px;\n}\n[data-vibe-menu] .vm-seg button + button {\n border-left: var(--stroke-rule) solid var(--line-card);\n}\n[data-vibe-menu] .vm-seg button.is-active {\n background: var(--accent);\n color: var(--on-accent);\n}\n[data-vibe-menu] .vm-seg.is-mini {\n margin: 0;\n border-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-seg.is-mini button {\n flex: none;\n height: var(--size-segment-mini);\n padding: 0 var(--space-8);\n font-size: 10px;\n}\n[data-vibe-menu] .vm-seg.is-mini button + button {\n border-left-width: var(--stroke-mini);\n}\n[data-vibe-menu] .vm-grants {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-6) var(--space-12);\n}\n[data-vibe-menu] .vm-grant-ctl {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n[data-vibe-menu] .vm-grant-name {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.12em;\n text-transform: uppercase;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-grant-fixed {\n font: 700 10px/1 var(--font-tab);\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--ink);\n}\n\n/* ---------- MemberRow ---------- */\n[data-vibe-menu] .vm-input {\n width: 100%;\n height: var(--size-input);\n margin-bottom: var(--space-14);\n padding: 0 var(--space-18);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-input);\n background: transparent;\n color: var(--ink);\n font: inherit;\n}\n[data-vibe-menu] .vm-members-head {\n margin-top: 0;\n padding: 2px 0 var(--space-8);\n}\n[data-vibe-menu] .vm-members-head + .vm-input {\n height: 40px;\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-person {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n padding: var(--space-6) 0;\n}\n[data-vibe-menu] .vm-person + .vm-person {\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-person .vm-label {\n flex: 1;\n min-width: 0;\n}\n[data-vibe-menu] .vm-request {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-8) var(--space-12);\n margin-bottom: 2px;\n padding: var(--space-10) var(--space-12);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: var(--radius-card);\n background: var(--share-tint-strong);\n}\n[data-vibe-menu] .vm-request-top {\n flex: 1 0 auto;\n}\n[data-vibe-menu] .vm-request-actions {\n display: flex;\n gap: var(--space-6);\n margin-left: auto;\n}\n[data-vibe-menu] .vm-who-block > .vm-row {\n width: calc(100% + 2 * var(--space-16));\n margin: 2px calc(-1 * var(--space-16)) 0;\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request-top {\n flex-basis: 100%;\n}\n[data-vibe-menu] .vm-narrow .vm-person .vm-grants,\n[data-vibe-menu] .vm-narrow .vm-request .vm-grants {\n column-gap: var(--space-10);\n}\n/* stacking, as the prototype: card < bar < outline < glass and pill */\n[data-vibe-menu] .vm-frame .vm-card {\n z-index: 1;\n}\n[data-vibe-menu] .vm-frame .vm-strip {\n z-index: 2;\n}\n[data-vibe-menu] .vm-frame .vm-outline {\n z-index: 3;\n}\n[data-vibe-menu] .vm-frame .vm-glass {\n z-index: 4;\n}\n[data-vibe-menu] .vm-refresh {\n display: grid;\n place-items: center;\n width: var(--size-icon-circle);\n height: var(--size-icon-circle);\n border: var(--stroke-rule) solid var(--line-card);\n border-radius: 50%;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-refresh:hover {\n background: var(--accent);\n color: var(--on-accent);\n}\n\n/* ---------- port additions: not in bundle.css ---------- */\n/* Rows and the action pill can be links (Home's rows, the credits action). */\n[data-vibe-menu] :where(a.vm-row, a.vm-ask) {\n color: inherit;\n text-decoration: none;\n}\n[data-vibe-menu] a.vm-row:hover .vm-dot:not(.vm-app) {\n background: var(--accent);\n color: var(--on-accent);\n}\n/* A member's name drills into that member (spec \u00A78). */\n[data-vibe-menu] .vm-person button.vm-label {\n text-align: left;\n}\n[data-vibe-menu] .vm-chip[aria-disabled=\"true\"],\n[data-vibe-menu] .vm-cap:disabled,\n[data-vibe-menu] .vm-composer .vm-attach:disabled {\n opacity: var(--opacity-row-disabled);\n cursor: default;\n}\n/* Staged attachments above the composer: name chips, no emoji. */\n[data-vibe-menu] .vm-attachments {\n margin-bottom: var(--space-8);\n}\n[data-vibe-menu] .vm-attachments .vm-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n max-width: 220px;\n}\n[data-vibe-menu] .vm-attachments .vm-chip > span:last-child {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n[data-vibe-menu] .vm-attachments .vm-chip[data-status=\"error\"] {\n border-color: var(--section-account);\n}\n/* A suggestion's fast-path marks (RULINGS O4, production #2917 decorateChip).\n Siblings of .vm-suggest, since a button can't nest a button. The owner's\n toggle (FastPathToggle) is outline when not blessed, filled when blessed\n (aria-pressed); the badges are the marks every viewer sees. */\n[data-vibe-menu] .vm-suggest-item {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n min-width: 0;\n}\n[data-vibe-menu] .vm-suggest-item > * {\n flex: none;\n}\n[data-vibe-menu] .vm-suggest-item > .vm-suggest {\n flex: 0 1 auto;\n}\n[data-vibe-menu] .vm-suggest-shield {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n border-radius: var(--radius-full);\n background: none;\n color: var(--muted);\n}\n[data-vibe-menu] .vm-suggest-shield:hover {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] {\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-shield[aria-pressed=\"true\"] .vm-glyph {\n fill: currentColor;\n}\n/* The non-interactive marks every viewer sees (production ChipShieldBadge,\n ChipJumpBadge): a filled shield (\"stays in this app\", server-authoritative)\n or an arrow (\"opens another app\"). Never both on one chip. */\n[data-vibe-menu] .vm-suggest-badge {\n width: var(--size-chip);\n height: var(--size-chip);\n display: inline-grid;\n place-items: center;\n color: var(--ink);\n}\n[data-vibe-menu] .vm-suggest-badge.is-shield .vm-glyph {\n fill: currentColor;\n}\n[data-vibe-menu] .vm-suggest-badge.is-jump {\n color: var(--muted);\n}\n\n/* ---------- phones (cards-hero.css): the menu's width, not the viewport ---------- */\n@container vibe-menu (max-width: 480px) {\n [data-vibe-menu] .vm-ask {\n font-size: 18px;\n }\n /* the field keeps 16px (iOS zooms smaller fields); attach slims instead */\n [data-vibe-menu] .vm-composer textarea {\n margin-right: var(--space-6);\n font-size: 16px;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 4px;\n width: 28px;\n }\n [data-vibe-menu] .vm-cap {\n padding: 0 var(--space-18) 0 var(--space-14);\n }\n [data-vibe-menu] .vm-access button {\n font-size: 21px;\n }\n /* the access line keeps its sentence to two lines beside the chip */\n [data-vibe-menu] .vm-access-line {\n padding-left: 12px;\n gap: 8px;\n font-size: 15.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 10px;\n }\n /* Data and Code drop under the handle on one line (two on the narrowest) */\n [data-vibe-menu] .vm-person .vm-grants {\n flex-basis: 100%;\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request .vm-grants {\n column-gap: var(--space-10);\n }\n [data-vibe-menu] .vm-request-top {\n flex-basis: 100%;\n }\n [data-vibe-menu] .vm-input {\n font-size: 16px;\n }\n}\n@container vibe-menu (max-width: 359px) {\n [data-vibe-menu] .vm-access button {\n font-size: 19px;\n }\n /* the line drops its icon here: the enclosure already marks it */\n [data-vibe-menu] .vm-access-line > .vm-glyph {\n display: none;\n }\n [data-vibe-menu] .vm-access-line {\n margin: 8px 0 10px;\n font-size: 14.5px;\n }\n [data-vibe-menu] .vm-access-line .vm-chip.vm-copy {\n padding: 0 8px;\n }\n /* the cap and attach slim so the field keeps room (REMIX THIS stays one line) */\n [data-vibe-menu] .vm-cap {\n padding: 0 13px 0 10px;\n letter-spacing: 0.05em;\n }\n [data-vibe-menu] .vm-composer .vm-attach {\n margin-left: 3px;\n width: 24px;\n }\n /* 16px, not the prototype's 14px: no text field under 16px on phones (spec \u00A74.5) */\n [data-vibe-menu] .vm-composer textarea {\n margin: 0 4px 0 0;\n font-size: 16px;\n }\n [data-vibe-menu] .vm-chip.vm-copy {\n padding: 0 10px;\n letter-spacing: 0.06em;\n }\n}\n";
5
5
  export declare function VibeMenuStyles(): React.ReactElement;
package/components/vibe-menu/vibe-menu.styles.js CHANGED
@@ -12,6 +12,7 @@ export const VIBE_MENU_LIGHT_VARS = `
12
12
  --ink: #111111;
13
13
  --muted: #555555;
14
14
  --line: #111111;
15
+ --line-card: #111111;
15
16
  --line-hairline: #1111112e;
16
17
  --placeholder: var(--muted);
17
18
  --suggest-border: #11111173;
@@ -95,7 +96,7 @@ export const VIBE_MENU_DARK_VARS = `
95
96
  --card-bg: #1a1a1a;
96
97
  --ink: #e0e0e0;
97
98
  --muted: #a3a3a3;
98
- --line: #e0e0e0;
99
+ --line-card: #e0e0e0;
99
100
  --line-hairline: #e0e0e02e;
100
101
  --suggest-border: #e0e0e073;
101
102
  --swatch-selected: 0 0 0 2px #1a1a1a, 0 0 0 4px #e0e0e0;`;
@@ -252,7 +253,7 @@ export const VIBE_MENU_CSS = `
252
253
  width: 12px;
253
254
  height: 12px;
254
255
  border-radius: 50%;
255
- border: var(--stroke-rule) solid var(--line);
256
+ border: var(--stroke-rule) solid var(--line-card);
256
257
  border-top-color: transparent;
257
258
  flex: none;
258
259
  animation: vm-spin 0.9s linear infinite;
@@ -265,7 +266,7 @@ export const VIBE_MENU_CSS = `
265
266
  @media (prefers-reduced-motion: reduce) {
266
267
  [data-vibe-menu] .vm-busy {
267
268
  animation: none;
268
- border-top-color: var(--line);
269
+ border-top-color: var(--line-card);
269
270
  }
270
271
  }
271
272
 
@@ -518,7 +519,7 @@ export const VIBE_MENU_CSS = `
518
519
  gap: var(--space-12);
519
520
  width: 100%;
520
521
  padding: var(--space-14) var(--space-18);
521
- border: var(--stroke-rule) solid var(--line);
522
+ border: var(--stroke-rule) solid var(--line-card);
522
523
  border-radius: var(--radius-full);
523
524
  background: var(--accent);
524
525
  color: var(--on-accent);
@@ -553,7 +554,7 @@ export const VIBE_MENU_CSS = `
553
554
  [data-vibe-menu] .vm-chip {
554
555
  height: var(--size-chip);
555
556
  padding: 0 var(--space-12);
556
- border: var(--stroke-rule) solid var(--line);
557
+ border: var(--stroke-rule) solid var(--line-card);
557
558
  border-radius: var(--radius-chip);
558
559
  background: var(--accent);
559
560
  color: var(--on-accent);
@@ -602,7 +603,7 @@ export const VIBE_MENU_CSS = `
602
603
  }
603
604
  [data-vibe-menu] .vm-suggest:hover,
604
605
  [data-vibe-menu] .vm-suggest.is-hover {
605
- border-color: var(--line);
606
+ border-color: var(--line-card);
606
607
  background: color-mix(in srgb, var(--accent) 35%, transparent);
607
608
  }
608
609
  [data-vibe-menu] .vm-picks {
@@ -618,7 +619,7 @@ export const VIBE_MENU_CSS = `
618
619
  align-items: stretch;
619
620
  min-height: var(--size-composer);
620
621
  margin-bottom: var(--space-16);
621
- border: var(--stroke-rule) solid var(--line);
622
+ border: var(--stroke-rule) solid var(--line-card);
622
623
  border-radius: var(--radius-full);
623
624
  overflow: hidden;
624
625
  background: var(--card-bg);
@@ -671,7 +672,7 @@ export const VIBE_MENU_CSS = `
671
672
  align-items: center;
672
673
  justify-content: center;
673
674
  padding: 0 var(--space-24) 0 20px;
674
- border-left: var(--stroke-rule) solid var(--line);
675
+ border-left: var(--stroke-rule) solid var(--line-card);
675
676
  background: var(--section-code);
676
677
  color: var(--on-code);
677
678
  font: 700 14px/1 var(--font-tab);
@@ -713,7 +714,7 @@ export const VIBE_MENU_CSS = `
713
714
 
714
715
  /* ---------- Row: the bar's tab grammar inside the card ---------- */
715
716
  [data-vibe-menu] .vm-group {
716
- border-top: var(--stroke-rule) solid var(--line);
717
+ border-top: var(--stroke-rule) solid var(--line-card);
717
718
  margin: 0 calc(-1 * var(--space-16));
718
719
  }
719
720
  [data-vibe-menu] .vm-group.is-flush {
@@ -754,7 +755,7 @@ export const VIBE_MENU_CSS = `
754
755
  [data-vibe-menu] .vm-row.is-quiet .vm-dot {
755
756
  background: transparent;
756
757
  color: var(--ink);
757
- box-shadow: inset 0 0 0 2px var(--line);
758
+ box-shadow: inset 0 0 0 2px var(--line-card);
758
759
  }
759
760
  [data-vibe-menu] .vm-row[aria-disabled="true"] {
760
761
  opacity: 0.35;
@@ -767,7 +768,7 @@ export const VIBE_MENU_CSS = `
767
768
  [data-vibe-menu] .vm-app,
768
769
  [data-vibe-menu] .vm-initial {
769
770
  font: 700 12px/1 var(--font-tab);
770
- box-shadow: inset 0 0 0 2px var(--line);
771
+ box-shadow: inset 0 0 0 2px var(--line-card);
771
772
  }
772
773
  [data-vibe-menu] .vm-app {
773
774
  background: var(--app);
@@ -801,7 +802,7 @@ export const VIBE_MENU_CSS = `
801
802
  position: relative;
802
803
  width: var(--size-switch-w);
803
804
  height: 20px;
804
- border: var(--stroke-rule) solid var(--line);
805
+ border: var(--stroke-rule) solid var(--line-card);
805
806
  border-radius: var(--radius-switch);
806
807
  flex: none;
807
808
  }
@@ -831,7 +832,7 @@ export const VIBE_MENU_CSS = `
831
832
  height: var(--size-row-compact);
832
833
  margin: 0 calc(-1 * var(--space-16));
833
834
  padding: 0 var(--space-16);
834
- border-top: var(--stroke-rule) solid var(--line);
835
+ border-top: var(--stroke-rule) solid var(--line-card);
835
836
  border-bottom: var(--stroke-hairline) solid var(--line-hairline);
836
837
  }
837
838
  /* A drill that replaces the whole card body (Share, Account) sits on the card's
@@ -873,7 +874,7 @@ export const VIBE_MENU_CSS = `
873
874
  width: 100%;
874
875
  height: var(--size-row-compact);
875
876
  margin-top: var(--space-16);
876
- border: var(--stroke-rule) solid var(--line);
877
+ border: var(--stroke-rule) solid var(--line-card);
877
878
  border-radius: var(--radius-done);
878
879
  background: var(--accent);
879
880
  color: var(--on-accent);
@@ -923,7 +924,7 @@ export const VIBE_MENU_CSS = `
923
924
  }
924
925
  [data-vibe-menu] .vm-moment.is-pinned {
925
926
  padding: var(--space-10) var(--space-12) var(--space-12) var(--space-14);
926
- border: var(--stroke-rule) solid var(--line);
927
+ border: var(--stroke-rule) solid var(--line-card);
927
928
  border-left: var(--size-band) solid var(--accent);
928
929
  border-radius: var(--radius-moment);
929
930
  }
@@ -1028,7 +1029,7 @@ export const VIBE_MENU_CSS = `
1028
1029
  /* ---------- AccessToggle: Restricted | Public and its line ---------- */
1029
1030
  [data-vibe-menu] .vm-access {
1030
1031
  display: flex;
1031
- border: var(--stroke-rule) solid var(--line);
1032
+ border: var(--stroke-rule) solid var(--line-card);
1032
1033
  border-radius: var(--radius-full);
1033
1034
  overflow: hidden;
1034
1035
  }
@@ -1045,7 +1046,7 @@ export const VIBE_MENU_CSS = `
1045
1046
  color: var(--ink);
1046
1047
  }
1047
1048
  [data-vibe-menu] .vm-access button + button {
1048
- border-left: var(--stroke-rule) solid var(--line);
1049
+ border-left: var(--stroke-rule) solid var(--line-card);
1049
1050
  }
1050
1051
  [data-vibe-menu] .vm-access button.is-active {
1051
1052
  background: var(--accent);
@@ -1075,7 +1076,7 @@ export const VIBE_MENU_CSS = `
1075
1076
  min-height: var(--size-access-line);
1076
1077
  margin: var(--space-10) 0 var(--space-12);
1077
1078
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-14);
1078
- border: var(--stroke-rule) solid var(--line);
1079
+ border: var(--stroke-rule) solid var(--line-card);
1079
1080
  border-radius: var(--radius-access-line);
1080
1081
  background: var(--share-tint);
1081
1082
  font-size: 16.5px;
@@ -1094,7 +1095,7 @@ export const VIBE_MENU_CSS = `
1094
1095
  align-items: center;
1095
1096
  gap: var(--space-8);
1096
1097
  padding: 5px 5px 5px var(--space-10);
1097
- border: var(--stroke-rule) solid var(--line);
1098
+ border: var(--stroke-rule) solid var(--line-card);
1098
1099
  border-left: var(--size-band) solid var(--accent);
1099
1100
  border-radius: var(--radius-moment);
1100
1101
  }
@@ -1114,7 +1115,7 @@ export const VIBE_MENU_CSS = `
1114
1115
  /* ---------- GrantControls ---------- */
1115
1116
  [data-vibe-menu] .vm-seg {
1116
1117
  display: flex;
1117
- border: var(--stroke-rule) solid var(--line);
1118
+ border: var(--stroke-rule) solid var(--line-card);
1118
1119
  border-radius: var(--radius-full);
1119
1120
  overflow: hidden;
1120
1121
  }
@@ -1125,7 +1126,7 @@ export const VIBE_MENU_CSS = `
1125
1126
  font-size: 11px;
1126
1127
  }
1127
1128
  [data-vibe-menu] .vm-seg button + button {
1128
- border-left: var(--stroke-rule) solid var(--line);
1129
+ border-left: var(--stroke-rule) solid var(--line-card);
1129
1130
  }
1130
1131
  [data-vibe-menu] .vm-seg button.is-active {
1131
1132
  background: var(--accent);
@@ -1174,7 +1175,7 @@ export const VIBE_MENU_CSS = `
1174
1175
  height: var(--size-input);
1175
1176
  margin-bottom: var(--space-14);
1176
1177
  padding: 0 var(--space-18);
1177
- border: var(--stroke-rule) solid var(--line);
1178
+ border: var(--stroke-rule) solid var(--line-card);
1178
1179
  border-radius: var(--radius-input);
1179
1180
  background: transparent;
1180
1181
  color: var(--ink);
@@ -1209,7 +1210,7 @@ export const VIBE_MENU_CSS = `
1209
1210
  gap: var(--space-8) var(--space-12);
1210
1211
  margin-bottom: 2px;
1211
1212
  padding: var(--space-10) var(--space-12);
1212
- border: var(--stroke-rule) solid var(--line);
1213
+ border: var(--stroke-rule) solid var(--line-card);
1213
1214
  border-radius: var(--radius-card);
1214
1215
  background: var(--share-tint-strong);
1215
1216
  }
@@ -1252,7 +1253,7 @@ export const VIBE_MENU_CSS = `
1252
1253
  place-items: center;
1253
1254
  width: var(--size-icon-circle);
1254
1255
  height: var(--size-icon-circle);
1255
- border: var(--stroke-rule) solid var(--line);
1256
+ border: var(--stroke-rule) solid var(--line-card);
1256
1257
  border-radius: 50%;
1257
1258
  color: var(--ink);
1258
1259
  }
package/components/vibe-menu/vibe-menu.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA0FJ,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;2DAQwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqyCrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}
1
+ {"version":3,"file":"vibe-menu.styles.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/vibe-menu.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA2FJ,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;2DAQwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqyCrD,CAAC;AAGF,MAAM,UAAU,cAAc;IAC5B,OAAO,KAAK,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,uBAAuB,EAAE,EAAE,EAAE,EAAE,aAAa,CAAC,CAAC;AACtF,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vibes.diy/base",
3
- "version": "14.3.35",
3
+ "version": "14.3.36",
4
4
  "license": "Apache-2.0",
5
5
  "type": "module",
6
6
  "main": "./index.js",
@@ -10,9 +10,9 @@
10
10
  "dependencies": {
11
11
  "@adviser/cement": "~0.5.34",
12
12
  "@emotion/css": "~11.13.5",
13
- "@vibes.diy/use-vibes-types": "14.3.35",
14
- "@vibes.diy/vibe-runtime": "14.3.35",
15
- "@vibes.diy/vibe-types": "14.3.35",
13
+ "@vibes.diy/use-vibes-types": "14.3.36",
14
+ "@vibes.diy/vibe-runtime": "14.3.36",
15
+ "@vibes.diy/vibe-types": "14.3.36",
16
16
  "officeparser": "~8.0.0",
17
17
  "qrcode-generator": "~2.0.4",
18
18
  "react": "~19.2.8"