@vibes.diy/base 14.3.127 → 14.3.129
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.
- package/components/VibesSwitch.d.ts +2 -1
- package/components/VibesSwitch.js +92 -52
- package/components/VibesSwitch.js.map +1 -1
- package/components/vibe-menu/parts/VibesSwitchGlass.d.ts +3 -0
- package/components/vibe-menu/parts/VibesSwitchGlass.js +15 -2
- package/components/vibe-menu/parts/VibesSwitchGlass.js.map +1 -1
- package/components/vibe-menu/shell/VibeMenuShell.js +1 -1
- package/components/vibe-menu/shell/VibeMenuShell.js.map +1 -1
- package/components/vibe-menu/vibe-menu.styles.d.ts +1 -1
- package/components/vibe-menu/vibe-menu.styles.js +17 -0
- package/components/vibe-menu/vibe-menu.styles.js.map +1 -1
- package/package.json +5 -5
|
@@ -9,5 +9,6 @@ export interface VibesSwitchProps {
|
|
|
9
9
|
ovalColor?: string;
|
|
10
10
|
ovalStatusKey?: string | number;
|
|
11
11
|
statusRing?: boolean;
|
|
12
|
+
knobTravel?: number;
|
|
12
13
|
}
|
|
13
|
-
export declare function VibesSwitch({ size, className, style, isActive, onToggle, isTwinkling, ovalColor, ovalStatusKey, statusRing, }: VibesSwitchProps): React.JSX.Element;
|
|
14
|
+
export declare function VibesSwitch({ size, className, style, isActive, onToggle, isTwinkling, ovalColor, ovalStatusKey, statusRing, knobTravel, }: VibesSwitchProps): React.JSX.Element;
|
|
@@ -1,6 +1,74 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { switchColors, ovalColors } from "./VibesSwitch.styles.js";
|
|
3
|
-
|
|
3
|
+
const PATH_NUMBER = /-?\d*\.?\d+/g;
|
|
4
|
+
function mixPath(from, to, t) {
|
|
5
|
+
const toNumbers = to.match(PATH_NUMBER) ?? [];
|
|
6
|
+
let i = 0;
|
|
7
|
+
return from.replace(PATH_NUMBER, (n) => {
|
|
8
|
+
const a = Number(n);
|
|
9
|
+
const b = Number(toNumbers[i]);
|
|
10
|
+
i += 1;
|
|
11
|
+
return ` ${Math.round((a + (b - a) * t) * 1000) / 1000}`;
|
|
12
|
+
});
|
|
13
|
+
}
|
|
14
|
+
const LETTERS = [
|
|
15
|
+
{
|
|
16
|
+
word: "vibes",
|
|
17
|
+
fillSeconds: 0.5,
|
|
18
|
+
d: "M181.891,205.861c0-5.043-0.001-10.086,0-15.129 c0.001-5.046,1.679-7.539,6.606-7.695c9.292-0.294,18.653-1.051,27.888,0.707c7.614,1.449,11.523,5.954,11.902,13.446 c0.066,1.312-0.313,2.752-0.857,3.966c-1.401,3.123-1.399,6.266-0.673,9.507c0.301,1.342,0.443,2.723,0.787,4.053 c1.274,4.925-1.78,10.114-6.085,11.937c-3.111,1.318-6.561,2.327-9.909,2.497c-7.303,0.37-14.639,0.136-21.96,0.101 c-1.165-0.005-2.345-0.181-3.488-0.422c-2.657-0.56-4.162-2.962-4.197-6.801C181.854,216.639,181.891,211.25,181.891,205.861z M204.442,192.385c-2.757,0-5.514,0-8.271,0c-3.695,0-5.151,1.669-4.712,5.403c0.369,3.14,1.05,3.735,4.225,3.737 c5.024,0.004,10.05,0.109,15.07-0.014c2.028-0.05,4.167-0.27,6.04-0.98c3.182-1.207,3.639-4.256,1.008-6.455 c-1.073-0.896-2.659-1.509-4.06-1.618C210.659,192.22,207.544,192.385,204.442,192.385z M204.334,211.104c0,0.045,0,0.091,0,0.137 c-3.101,0-6.203-0.055-9.302,0.037c-0.823,0.024-2.257,0.373-2.344,0.794c-0.447,2.154-0.959,4.444-0.639,6.563 c0.276,1.822,2.447,1.451,3.882,1.441c5.989-0.042,11.98-0.118,17.961-0.385c1.416-0.063,2.859-0.79,4.176-1.441 c1.79-0.886,1.833-2.475,1.029-4.046c-1.166-2.276-3.297-3.024-5.677-3.081C210.394,211.049,207.363,211.104,204.334,211.104z",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
word: "vibes",
|
|
22
|
+
fillSeconds: 0.8,
|
|
23
|
+
d: "M291.409,229.748c-3.621-0.394-7.838-0.587-11.94-1.379 c-3.577-0.69-6.343-2.991-8.213-6.163c-1.763-2.99-0.301-5.6,3.139-5.292c2.287,0.205,4.512,1.129,6.758,1.755 c6.281,1.751,12.643,1.892,19.053,0.951c0.667-0.098,1.31-0.416,1.941-0.686c1.502-0.644,2.55-1.682,2.581-3.415 c0.031-1.74-1.195-2.749-2.579-3.132c-2.298-0.637-4.688-1.021-7.065-1.273c-5.062-0.536-10.252-0.401-15.187-1.475 c-9.677-2.105-11.678-10.53-10.101-16.009c1.62-5.625,5.911-8.92,11.318-9.73c8.388-1.257,16.925-1.491,25.279,0.654 c3.702,0.951,6.615,3.072,7.883,6.931c0.918,2.792-0.332,4.6-3.268,4.357c-1.684-0.139-3.367-0.676-4.974-1.248 c-6.711-2.387-13.572-2.897-20.569-1.783c-1.001,0.159-2.146,0.414-2.875,1.034c-0.901,0.766-2.016,1.981-1.98,2.964 c0.041,1.128,0.995,2.733,1.991,3.206c1.81,0.857,3.925,1.279,5.948,1.441c5.152,0.41,10.356,0.296,15.479,0.905 c7.98,0.949,13.779,9.833,11.241,17.125c-1.959,5.628-6.44,8.489-12.143,9.322C299.455,229.344,295.715,229.419,291.409,229.748z",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
word: "vibes",
|
|
27
|
+
fillSeconds: 1.2,
|
|
28
|
+
d: "M235.786,208.14c0-6.905-0.01-13.809,0.004-20.714 c0.007-3.474,0.948-4.428,4.415-3.758c6.62,1.279,13.232,2.651,19.759,4.331c1.7,0.438,3.404,1.896,4.515,3.341 c1.777,2.31,0.433,5.367-2.463,5.745c-1.86,0.243-3.819-0.138-5.717-0.368c-2.183-0.264-4.339-0.783-6.525-0.976 c-1.572-0.138-3.065,0.375-3.8,1.959c-0.76,1.638-0.319,3.329,0.942,4.34c1.619,1.296,3.522,2.327,5.447,3.128 c2.146,0.894,4.539,1.207,6.66,2.145c1.446,0.64,2.982,1.687,3.786,2.981c0.689,1.11,0.928,3.094,0.378,4.202 c-0.492,0.991-2.32,1.795-3.579,1.825c-2.238,0.052-4.483-0.652-6.741-0.832c-1.614-0.127-3.333-0.203-4.865,0.212 c-2.574,0.699-3.225,3.013-1.719,5.218c1.396,2.044,3.431,3.141,5.757,3.761c2.791,0.744,5.637,1.315,8.373,2.222 c3.19,1.058,4.791,3.496,4.801,6.723c0.011,3.365-1.759,5.021-5.138,4.424c-4.402-0.778-8.759-1.81-13.134-2.735 c-2.357-0.499-4.718-0.981-7.069-1.511c-3.263-0.737-4.132-1.805-4.141-5.154c-0.019-6.836-0.006-13.672-0.006-20.508 C235.747,208.141,235.766,208.14,235.786,208.14z",
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
word: "vibes",
|
|
32
|
+
fillSeconds: 0.6,
|
|
33
|
+
d: "M135.138,229.842c-2.941-0.084-5.296-1.462-6.684-3.9 c-1.827-3.21-3.328-6.618-4.81-10.011c-3.55-8.128-7.021-16.291-10.486-24.455c-0.48-1.132-0.902-2.329-1.087-3.536 c-0.417-2.72,1.238-4.585,3.938-4.119c1.591,0.275,3.569,0.98,4.45,2.173c2.226,3.015,4.175,6.299,5.784,9.69 c2.208,4.654,3.898,9.552,6.032,14.244c0.628,1.379,2.009,2.416,3.045,3.609c0.892-1.159,2.042-2.201,2.63-3.498 c2.697-5.953,5.22-11.985,7.841-17.974c1.423-3.252,3.089-6.418,6.532-7.905c1.238-0.535,3.012-0.712,4.184-0.214 c0.81,0.344,1.377,2.126,1.385,3.271c0.009,1.458-0.479,2.997-1.059,4.371c-4.227,10.013-8.504,20.005-12.833,29.974 c-0.79,1.819-1.762,3.589-2.875,5.229C139.73,228.848,137.671,229.894,135.138,229.842z",
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
word: "vibes",
|
|
37
|
+
fillSeconds: 1.3,
|
|
38
|
+
d: "M164.636,206.263c0-6.691,0.054-13.383-0.036-20.073 c-0.024-1.851,0.716-2.67,2.449-2.81c0.274-0.022,0.549-0.054,0.823-0.076c5.488-0.445,6.091,0.105,6.091,5.562 c0,12.348,0,24.695,0,37.043c0,2.887-0.354,3.405-3.222,3.618c-1.628,0.121-3.338-0.001-4.91-0.408 c-0.593-0.153-1.265-1.408-1.278-2.171c-0.096-5.584-0.034-11.172-0.022-16.759c0.002-1.308,0-2.617,0-3.926 C164.566,206.263,164.601,206.263,164.636,206.263z",
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
word: "diy",
|
|
42
|
+
fillSeconds: 1,
|
|
43
|
+
className: "vibes-switch-diy vibes-switch-diy-1",
|
|
44
|
+
d: "M388.313,210.147c0-6.356,0.034-12.713-0.023-19.069 c-0.015-1.61,0.359-2.472,2.19-2.346c2.887,0.198,5.809,0.045,8.671,0.398c4.396,0.542,8.019,4.294,8.144,8.904 c0.223,8.142,0.265,16.304-0.074,24.439c-0.248,5.945-4.552,9.662-10.491,9.831c-1.999,0.057-4.003-0.081-6.006-0.09 c-1.746-0.008-2.439-0.853-2.428-2.584C388.34,223.136,388.313,216.642,388.313,210.147z M393.418,210.324c-0.037,0-0.075,0-0.114,0 c0,4.55-0.038,9.101,0.015,13.65c0.031,2.688,0.926,3.439,3.56,3.239c3.273-0.248,5.493-2.511,5.534-6.04 c0.082-7.099,0.054-14.2-0.033-21.299c-0.041-3.268-1.739-5.241-4.87-6.092c-2.68-0.728-4.025,0.161-4.07,2.896 C393.364,201.226,393.418,205.775,393.418,210.324z",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
word: "diy",
|
|
48
|
+
fillSeconds: 1,
|
|
49
|
+
className: "vibes-switch-diy vibes-switch-diy-2",
|
|
50
|
+
d: "M478.079,200.8c0.674-1.566,1.121-2.53,1.506-3.519 c0.673-1.73,1.252-3.5,1.981-5.205c0.315-0.737,0.766-1.654,1.407-1.961c1.094-0.523,2.388-0.63,3.598-0.912 c0.205,1.142,0.798,2.381,0.537,3.404c-0.606,2.388-1.448,4.756-2.507,6.984c-3.981,8.389-4.352,17.254-3.78,26.282 c0.091,1.438,0.031,2.899-0.105,4.335c-0.14,1.473-0.989,2.428-2.542,2.497c-1.514,0.067-2.311-0.903-2.54-2.23 c-0.232-1.348-0.394-2.754-0.277-4.108c0.94-10.972-1.116-21.38-5.626-31.375c-0.586-1.298-0.899-2.762-1.093-4.183 c-0.233-1.712,0.825-2.592,2.379-1.843c1.164,0.561,2.345,1.55,2.973,2.657c1.078,1.897,1.712,4.043,2.568,6.07 C476.918,198.547,477.37,199.361,478.079,200.8z",
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
word: "diy",
|
|
54
|
+
fillSeconds: 1,
|
|
55
|
+
className: "vibes-switch-diy vibes-switch-diy-3",
|
|
56
|
+
d: "M440.516,210.627c0,6.281,0.007,12.563-0.004,18.844 c-0.004,2.067-0.805,3.038-2.531,3.015c-1.877-0.025-2.365-1.136-2.359-2.876c0.046-12.631,0.019-25.263,0.029-37.895 c0.002-2.592,0.525-3.205,2.419-3.148c1.856,0.057,2.479,1.03,2.466,2.803C440.484,197.788,440.515,204.208,440.516,210.627z",
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
word: "diy",
|
|
60
|
+
fillSeconds: 1,
|
|
61
|
+
className: "vibes-switch-diy vibes-switch-diy-4",
|
|
62
|
+
d: "M416.875,210.721c0.068-3.305,1.849-5.306,4.727-5.309 c2.765-0.003,4.924,2.404,4.816,5.371c-0.106,2.956-2.355,5.212-5.12,5.138C418.626,215.849,416.813,213.718,416.875,210.721z",
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
word: "diy",
|
|
66
|
+
fillSeconds: 1,
|
|
67
|
+
className: "vibes-switch-diy vibes-switch-diy-5",
|
|
68
|
+
d: "M449.933,210.636c0.102-3.331,1.886-5.279,4.778-5.22 c2.67,0.055,4.829,2.432,4.762,5.243c-0.073,3.021-2.404,5.36-5.242,5.261C451.606,215.829,449.84,213.657,449.933,210.636z",
|
|
69
|
+
},
|
|
70
|
+
];
|
|
71
|
+
export function VibesSwitch({ size = 24, className, style, isActive, onToggle, isTwinkling = false, ovalColor = ovalColors.neutral, ovalStatusKey, statusRing = true, knobTravel, }) {
|
|
4
72
|
const [internalActive, setInternalActive] = React.useState(true);
|
|
5
73
|
const showOval = ovalColor !== ovalColors.neutral;
|
|
6
74
|
const ovalTraceKey = `${ovalColor}|${ovalStatusKey ?? ""}`;
|
|
@@ -19,8 +87,19 @@ export function VibesSwitch({ size = 24, className, style, isActive, onToggle, i
|
|
|
19
87
|
};
|
|
20
88
|
const originalD = `M426.866,285.985c-7.999-0.416-19.597-0.733-31.141-1.687 c-15.692-1.297-28.809-8.481-40.105-19.104c-12.77-12.008-20.478-26.828-22.714-44.177c-3.048-23.644,3.384-44.558,19.646-62.143 c9.174-9.92,20.248-17.25,33.444-20.363c7.786-1.837,15.944-2.399,23.973-2.828c9.988-0.535,20.023-0.666,30.021-0.371 c10.191,0.301,20.433,0.806,30.521,2.175c12.493,1.696,23.132,7.919,32.552,16.091c14.221,12.337,22.777,27.953,25.184,46.594 c2.822,21.859-2.605,41.617-16.777,58.695c-9.494,11.441-21.349,19.648-35.722,23.502c-6.656,1.785-13.724,2.278-20.647,2.77 C446.914,285.721,438.682,285.667,426.866,285.985z`;
|
|
21
89
|
const stretchedD = `M165.866,285.985c-7.999-0.416-19.597-0.733-31.141-1.687 c-15.692-1.297-28.809-8.481-40.105-19.104c-12.77-12.008-20.478-26.828-22.714-44.177c-3.048-23.644,3.384-44.558,19.646-62.143 c9.174-9.92,20.248-17.25,33.444-20.363c7.786-1.837,15.944-2.399,23.973-2.828c9.988-0.535,111.023-0.666,121.021-0.371 c10.191,0.301,20.433,0.806,30.521,2.175c12.493,1.696,23.132,7.919,32.552,16.091c14.221,12.337,22.777,27.953,25.184,46.594 c2.822,21.859-2.605,41.617-16.777,58.695c-9.494,11.441-21.349,19.648-35.722,23.502c-6.656,1.785-13.724,2.278-20.647,2.77 C276.914,285.721,177.682,285.667,165.866,285.985z`;
|
|
22
|
-
const
|
|
23
|
-
const
|
|
90
|
+
const travel = knobTravel === undefined ? (active ? 1 : 0) : Math.min(1, Math.max(0, knobTravel));
|
|
91
|
+
const pillD = travel >= 1 ? stretchedD : travel <= 0 ? originalD : mixPath(originalD, stretchedD, travel);
|
|
92
|
+
const pillTransform = travel >= 1 ? "translateX(3px) " : travel <= 0 ? "none" : `translateX(${3 * travel}px)`;
|
|
93
|
+
const knobMotion = {
|
|
94
|
+
transition: "d var(--vibes-switch-slide, 0.3s ease), transform 0.8s ease, fill 2s ease",
|
|
95
|
+
transform: pillTransform,
|
|
96
|
+
};
|
|
97
|
+
const knobClipId = `vibes-switch-knob-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
|
98
|
+
function letterTwinkle(letter) {
|
|
99
|
+
if (letter.word !== "vibes" || isTwinkling === false)
|
|
100
|
+
return undefined;
|
|
101
|
+
return `vibes-switch-letter-twinkle ${letter.fillSeconds}s ease-in-out infinite`;
|
|
102
|
+
}
|
|
24
103
|
return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: size, viewBox: "18 58 564 282", fill: "currentColor", className: className, onPointerDown: handlePointerDown, style: { overflow: "visible", ...style } },
|
|
25
104
|
statusRing && (React.createElement("ellipse", { key: showOval ? ovalTraceKey : "ring-idle", cx: "300", cy: "242", rx: "272", ry: "128", fill: "none", stroke: ovalColor, strokeWidth: "28", strokeLinecap: "round", pathLength: 100, pointerEvents: "none", filter: showOval ? "url(#vibes-oval-ink)" : undefined, className: showOval ? "vibes-oval-trace" : undefined, style: showOval ? undefined : { opacity: 0 } })),
|
|
26
105
|
React.createElement("defs", null,
|
|
@@ -112,54 +191,15 @@ export function VibesSwitch({ size = 24, className, style, isActive, onToggle, i
|
|
|
112
191
|
`)),
|
|
113
192
|
React.createElement("g", { transform: "translate(0,32)" },
|
|
114
193
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", fill: "#000", d: "M293.353,298.09c-41.038,0-82.078,0.125-123.115-0.077 c-11.993-0.06-24.011-0.701-35.964-1.703c-15.871-1.331-29.73-7.937-41.948-17.946c-16.769-13.736-27.207-31.417-30.983-52.7 c-4.424-24.93,1.404-47.685,16.506-67.913c11.502-15.407,26.564-26.1,45.258-30.884c7.615-1.949,15.631-2.91,23.501-3.165 c20.08-0.652,40.179-0.853,60.271-0.879c69.503-0.094,139.007-0.106,208.51,0.02c14.765,0.026,29.583,0.097,44.28,1.313 c36.984,3.059,61.78,23.095,74.653,57.301c17.011,45.199-8.414,96.835-54.29,111.864c-7.919,2.595-16.165,3.721-24.434,3.871 c-25.614,0.467-51.234,0.742-76.853,0.867C350.282,298.197,321.817,298.09,293.353,298.09z" }),
|
|
115
|
-
React.createElement("path", { fill: switchColors.secondary, fillRule: "evenodd", clipRule: "evenodd", d: pillD, style:
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
transition: "fill 0.8s ease",
|
|
126
|
-
fill: active ? switchColors.primary : switchColors.secondary,
|
|
127
|
-
animation: isTwinkling ? "vibes-switch-letter-twinkle 0.8s ease-in-out infinite" : undefined,
|
|
128
|
-
}, d: "M291.409,229.748c-3.621-0.394-7.838-0.587-11.94-1.379 c-3.577-0.69-6.343-2.991-8.213-6.163c-1.763-2.99-0.301-5.6,3.139-5.292c2.287,0.205,4.512,1.129,6.758,1.755 c6.281,1.751,12.643,1.892,19.053,0.951c0.667-0.098,1.31-0.416,1.941-0.686c1.502-0.644,2.55-1.682,2.581-3.415 c0.031-1.74-1.195-2.749-2.579-3.132c-2.298-0.637-4.688-1.021-7.065-1.273c-5.062-0.536-10.252-0.401-15.187-1.475 c-9.677-2.105-11.678-10.53-10.101-16.009c1.62-5.625,5.911-8.92,11.318-9.73c8.388-1.257,16.925-1.491,25.279,0.654 c3.702,0.951,6.615,3.072,7.883,6.931c0.918,2.792-0.332,4.6-3.268,4.357c-1.684-0.139-3.367-0.676-4.974-1.248 c-6.711-2.387-13.572-2.897-20.569-1.783c-1.001,0.159-2.146,0.414-2.875,1.034c-0.901,0.766-2.016,1.981-1.98,2.964 c0.041,1.128,0.995,2.733,1.991,3.206c1.81,0.857,3.925,1.279,5.948,1.441c5.152,0.41,10.356,0.296,15.479,0.905 c7.98,0.949,13.779,9.833,11.241,17.125c-1.959,5.628-6.44,8.489-12.143,9.322C299.455,229.344,295.715,229.419,291.409,229.748z" }),
|
|
129
|
-
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
130
|
-
transition: "fill 1.2s ease",
|
|
131
|
-
fill: active ? switchColors.primary : switchColors.secondary,
|
|
132
|
-
animation: isTwinkling ? "vibes-switch-letter-twinkle 1.2s ease-in-out infinite" : undefined,
|
|
133
|
-
}, d: "M235.786,208.14c0-6.905-0.01-13.809,0.004-20.714 c0.007-3.474,0.948-4.428,4.415-3.758c6.62,1.279,13.232,2.651,19.759,4.331c1.7,0.438,3.404,1.896,4.515,3.341 c1.777,2.31,0.433,5.367-2.463,5.745c-1.86,0.243-3.819-0.138-5.717-0.368c-2.183-0.264-4.339-0.783-6.525-0.976 c-1.572-0.138-3.065,0.375-3.8,1.959c-0.76,1.638-0.319,3.329,0.942,4.34c1.619,1.296,3.522,2.327,5.447,3.128 c2.146,0.894,4.539,1.207,6.66,2.145c1.446,0.64,2.982,1.687,3.786,2.981c0.689,1.11,0.928,3.094,0.378,4.202 c-0.492,0.991-2.32,1.795-3.579,1.825c-2.238,0.052-4.483-0.652-6.741-0.832c-1.614-0.127-3.333-0.203-4.865,0.212 c-2.574,0.699-3.225,3.013-1.719,5.218c1.396,2.044,3.431,3.141,5.757,3.761c2.791,0.744,5.637,1.315,8.373,2.222 c3.19,1.058,4.791,3.496,4.801,6.723c0.011,3.365-1.759,5.021-5.138,4.424c-4.402-0.778-8.759-1.81-13.134-2.735 c-2.357-0.499-4.718-0.981-7.069-1.511c-3.263-0.737-4.132-1.805-4.141-5.154c-0.019-6.836-0.006-13.672-0.006-20.508 C235.747,208.141,235.766,208.14,235.786,208.14z" }),
|
|
134
|
-
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
135
|
-
transition: "fill 0.6s ease",
|
|
136
|
-
fill: active ? switchColors.primary : switchColors.secondary,
|
|
137
|
-
animation: isTwinkling ? "vibes-switch-letter-twinkle 0.6s ease-in-out infinite" : undefined,
|
|
138
|
-
}, d: "M135.138,229.842c-2.941-0.084-5.296-1.462-6.684-3.9 c-1.827-3.21-3.328-6.618-4.81-10.011c-3.55-8.128-7.021-16.291-10.486-24.455c-0.48-1.132-0.902-2.329-1.087-3.536 c-0.417-2.72,1.238-4.585,3.938-4.119c1.591,0.275,3.569,0.98,4.45,2.173c2.226,3.015,4.175,6.299,5.784,9.69 c2.208,4.654,3.898,9.552,6.032,14.244c0.628,1.379,2.009,2.416,3.045,3.609c0.892-1.159,2.042-2.201,2.63-3.498 c2.697-5.953,5.22-11.985,7.841-17.974c1.423-3.252,3.089-6.418,6.532-7.905c1.238-0.535,3.012-0.712,4.184-0.214 c0.81,0.344,1.377,2.126,1.385,3.271c0.009,1.458-0.479,2.997-1.059,4.371c-4.227,10.013-8.504,20.005-12.833,29.974 c-0.79,1.819-1.762,3.589-2.875,5.229C139.73,228.848,137.671,229.894,135.138,229.842z" }),
|
|
139
|
-
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
140
|
-
transition: "fill 1.3s ease",
|
|
141
|
-
fill: active ? switchColors.primary : switchColors.secondary,
|
|
142
|
-
animation: isTwinkling ? "vibes-switch-letter-twinkle 1.3s ease-in-out infinite" : undefined,
|
|
143
|
-
}, d: "M164.636,206.263c0-6.691,0.054-13.383-0.036-20.073 c-0.024-1.851,0.716-2.67,2.449-2.81c0.274-0.022,0.549-0.054,0.823-0.076c5.488-0.445,6.091,0.105,6.091,5.562 c0,12.348,0,24.695,0,37.043c0,2.887-0.354,3.405-3.222,3.618c-1.628,0.121-3.338-0.001-4.91-0.408 c-0.593-0.153-1.265-1.408-1.278-2.171c-0.096-5.584-0.034-11.172-0.022-16.759c0.002-1.308,0-2.617,0-3.926 C164.566,206.263,164.601,206.263,164.636,206.263z" }),
|
|
144
|
-
React.createElement("path", { className: "vibes-switch-diy vibes-switch-diy-1", fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
145
|
-
transition: "fill 1s ease",
|
|
146
|
-
fill: active ? switchColors.secondary : switchColors.primary,
|
|
147
|
-
}, d: "M388.313,210.147c0-6.356,0.034-12.713-0.023-19.069 c-0.015-1.61,0.359-2.472,2.19-2.346c2.887,0.198,5.809,0.045,8.671,0.398c4.396,0.542,8.019,4.294,8.144,8.904 c0.223,8.142,0.265,16.304-0.074,24.439c-0.248,5.945-4.552,9.662-10.491,9.831c-1.999,0.057-4.003-0.081-6.006-0.09 c-1.746-0.008-2.439-0.853-2.428-2.584C388.34,223.136,388.313,216.642,388.313,210.147z M393.418,210.324c-0.037,0-0.075,0-0.114,0 c0,4.55-0.038,9.101,0.015,13.65c0.031,2.688,0.926,3.439,3.56,3.239c3.273-0.248,5.493-2.511,5.534-6.04 c0.082-7.099,0.054-14.2-0.033-21.299c-0.041-3.268-1.739-5.241-4.87-6.092c-2.68-0.728-4.025,0.161-4.07,2.896 C393.364,201.226,393.418,205.775,393.418,210.324z" }),
|
|
148
|
-
React.createElement("path", { className: "vibes-switch-diy vibes-switch-diy-2", fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
149
|
-
transition: "fill 1s ease",
|
|
150
|
-
fill: active ? switchColors.secondary : switchColors.primary,
|
|
151
|
-
}, d: "M478.079,200.8c0.674-1.566,1.121-2.53,1.506-3.519 c0.673-1.73,1.252-3.5,1.981-5.205c0.315-0.737,0.766-1.654,1.407-1.961c1.094-0.523,2.388-0.63,3.598-0.912 c0.205,1.142,0.798,2.381,0.537,3.404c-0.606,2.388-1.448,4.756-2.507,6.984c-3.981,8.389-4.352,17.254-3.78,26.282 c0.091,1.438,0.031,2.899-0.105,4.335c-0.14,1.473-0.989,2.428-2.542,2.497c-1.514,0.067-2.311-0.903-2.54-2.23 c-0.232-1.348-0.394-2.754-0.277-4.108c0.94-10.972-1.116-21.38-5.626-31.375c-0.586-1.298-0.899-2.762-1.093-4.183 c-0.233-1.712,0.825-2.592,2.379-1.843c1.164,0.561,2.345,1.55,2.973,2.657c1.078,1.897,1.712,4.043,2.568,6.07 C476.918,198.547,477.37,199.361,478.079,200.8z" }),
|
|
152
|
-
React.createElement("path", { className: "vibes-switch-diy vibes-switch-diy-3", fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
153
|
-
transition: "fill 1s ease",
|
|
154
|
-
fill: active ? switchColors.secondary : switchColors.primary,
|
|
155
|
-
}, d: "M440.516,210.627c0,6.281,0.007,12.563-0.004,18.844 c-0.004,2.067-0.805,3.038-2.531,3.015c-1.877-0.025-2.365-1.136-2.359-2.876c0.046-12.631,0.019-25.263,0.029-37.895 c0.002-2.592,0.525-3.205,2.419-3.148c1.856,0.057,2.479,1.03,2.466,2.803C440.484,197.788,440.515,204.208,440.516,210.627z" }),
|
|
156
|
-
React.createElement("path", { className: "vibes-switch-diy vibes-switch-diy-4", fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
157
|
-
transition: "fill 1s ease",
|
|
158
|
-
fill: active ? switchColors.secondary : switchColors.primary,
|
|
159
|
-
}, d: "M416.875,210.721c0.068-3.305,1.849-5.306,4.727-5.309 c2.765-0.003,4.924,2.404,4.816,5.371c-0.106,2.956-2.355,5.212-5.12,5.138C418.626,215.849,416.813,213.718,416.875,210.721z" }),
|
|
160
|
-
React.createElement("path", { className: "vibes-switch-diy vibes-switch-diy-5", fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
161
|
-
transition: "fill 1s ease",
|
|
162
|
-
fill: active ? switchColors.secondary : switchColors.primary,
|
|
163
|
-
}, d: "M449.933,210.636c0.102-3.331,1.886-5.279,4.778-5.22 c2.67,0.055,4.829,2.432,4.762,5.243c-0.073,3.021-2.404,5.36-5.242,5.261C451.606,215.829,449.84,213.657,449.933,210.636z" }))));
|
|
194
|
+
React.createElement("path", { fill: switchColors.secondary, fillRule: "evenodd", clipRule: "evenodd", d: pillD, style: knobMotion }),
|
|
195
|
+
knobTravel === undefined ? (LETTERS.map((letter, i) => (React.createElement("path", { key: i, className: letter.className, fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
196
|
+
transition: `fill ${letter.fillSeconds}s ease`,
|
|
197
|
+
fill: (letter.word === "vibes") === active ? switchColors.primary : switchColors.secondary,
|
|
198
|
+
animation: letterTwinkle(letter),
|
|
199
|
+
}, d: letter.d })))) : (React.createElement(React.Fragment, null,
|
|
200
|
+
LETTERS.map((letter, i) => (React.createElement("path", { key: i, className: letter.className, fillRule: "evenodd", clipRule: "evenodd", style: { fill: switchColors.secondary, animation: letterTwinkle(letter) }, d: letter.d }))),
|
|
201
|
+
React.createElement("clipPath", { id: knobClipId, "data-knob-clip": "" },
|
|
202
|
+
React.createElement("path", { d: pillD, style: knobMotion })),
|
|
203
|
+
React.createElement("g", { clipPath: `url(#${knobClipId})`, "data-on-knob": "" }, LETTERS.map((letter, i) => (React.createElement("path", { key: i, className: letter.className, fillRule: "evenodd", clipRule: "evenodd", style: { fill: switchColors.primary, animation: letterTwinkle(letter) }, d: letter.d })))))))));
|
|
164
204
|
}
|
|
165
205
|
//# sourceMappingURL=VibesSwitch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VibesSwitch.js","sourceRoot":"","sources":["../../jsr/components/VibesSwitch.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"VibesSwitch.js","sourceRoot":"","sources":["../../jsr/components/VibesSwitch.tsx"],"names":[],"mappings":"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"}
|
|
@@ -19,6 +19,7 @@ export interface VibesSwitchGlassProps {
|
|
|
19
19
|
readonly closedStatus: ReactNode;
|
|
20
20
|
readonly twinkling: boolean;
|
|
21
21
|
readonly pillRef?: Ref<HTMLButtonElement>;
|
|
22
|
+
readonly reducedMotion?: boolean;
|
|
22
23
|
}
|
|
23
24
|
export interface SwitchPress {
|
|
24
25
|
readonly stage: "held" | "released" | "latched";
|
|
@@ -29,4 +30,6 @@ export declare function pressedArt(press: SwitchPress | null, input: {
|
|
|
29
30
|
readonly barOpen: boolean;
|
|
30
31
|
}): boolean | null;
|
|
31
32
|
export declare const CLICK_WAIT_MS = 350;
|
|
33
|
+
export declare const HELD_TRAVEL = 0.75;
|
|
34
|
+
export declare function pressTravel(stage: SwitchPress["stage"] | null, reducedMotion: boolean): number;
|
|
32
35
|
export declare function VibesSwitchGlass(props: VibesSwitchGlassProps): React.ReactElement;
|
|
@@ -64,6 +64,17 @@ export function pressedArt(press, input) {
|
|
|
64
64
|
return target;
|
|
65
65
|
}
|
|
66
66
|
export const CLICK_WAIT_MS = 350;
|
|
67
|
+
export const HELD_TRAVEL = 0.75;
|
|
68
|
+
function prefersReducedMotion() {
|
|
69
|
+
return typeof globalThis.matchMedia === "function" && globalThis.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
|
70
|
+
}
|
|
71
|
+
export function pressTravel(stage, reducedMotion) {
|
|
72
|
+
if (stage === null)
|
|
73
|
+
return 0;
|
|
74
|
+
if (stage === "held" && reducedMotion === false)
|
|
75
|
+
return HELD_TRAVEL;
|
|
76
|
+
return 1;
|
|
77
|
+
}
|
|
67
78
|
function insideBox(el, x, y) {
|
|
68
79
|
const box = el.getBoundingClientRect();
|
|
69
80
|
return x >= box.left && x <= box.right && y >= box.top && y <= box.bottom;
|
|
@@ -76,6 +87,8 @@ export function VibesSwitchGlass(props) {
|
|
|
76
87
|
setPress(null);
|
|
77
88
|
}, [press, preview]);
|
|
78
89
|
const artOpen = preview ?? props.barOpen;
|
|
90
|
+
const travel = pressTravel(preview === null || press === null ? null : press.stage, props.reducedMotion ?? prefersReducedMotion());
|
|
91
|
+
const knobTravel = preview === null ? (props.barOpen ? 1 : 0) : preview ? travel : 1 - travel;
|
|
79
92
|
const releaseTimer = useRef(null);
|
|
80
93
|
const clearReleaseTimer = () => {
|
|
81
94
|
if (releaseTimer.current !== null)
|
|
@@ -110,7 +123,7 @@ export function VibesSwitchGlass(props) {
|
|
|
110
123
|
open: props.open,
|
|
111
124
|
pendingRequests: props.pendingRequests,
|
|
112
125
|
saveAskDot: props.saveAskDot === true,
|
|
113
|
-
}), "aria-expanded": props.open, "data-art": artOpen ? "open" : "closed", "data-pressed": preview === null ? undefined : "", onPointerDown: (e) => {
|
|
126
|
+
}), "aria-expanded": props.open, "data-art": artOpen ? "open" : "closed", "data-pressed": preview === null ? undefined : "", "data-progress": String(travel), onPointerDown: (e) => {
|
|
114
127
|
if (e.isPrimary === false || e.button !== 0)
|
|
115
128
|
return;
|
|
116
129
|
clearReleaseTimer();
|
|
@@ -153,7 +166,7 @@ export function VibesSwitchGlass(props) {
|
|
|
153
166
|
setPress((p) => (p !== null && p.stage !== "latched" ? { stage: "latched", from: p.from } : p));
|
|
154
167
|
props.onToggle();
|
|
155
168
|
} },
|
|
156
|
-
React.createElement(VibesSwitch, { size: ART.size, className: "vm-switch-svg", style: { position: "absolute", left: ART.left, top: ART.top, pointerEvents: "none" }, isActive: artOpen === false, isTwinkling: props.twinkling })),
|
|
169
|
+
React.createElement(VibesSwitch, { size: ART.size, className: "vm-switch-svg", style: { position: "absolute", left: ART.left, top: ART.top, pointerEvents: "none" }, isActive: artOpen === false, knobTravel: knobTravel, isTwinkling: props.twinkling })),
|
|
157
170
|
React.createElement("div", { className: "vm-beside" },
|
|
158
171
|
React.createElement(ClosedStatusLine, { content: props.closedStatus }))));
|
|
159
172
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VibesSwitchGlass.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/VibesSwitchGlass.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAMnD,MAAM,cAAc,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC;AACrD,MAAM,cAAc,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC;AAW7E,MAAM,UAAU,kBAAkB,CAAC,GAAwD;IACzF,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7F,OAAO;QACL,IAAI,EAAE,cAAc,CAAC,MAAM,GAAG,KAAK;QACnC,IAAI,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,cAAc,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK;QACpG,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,GAAG,KAAK;KACtG,CAAC;AACJ,CAAC;AAED,MAAM,GAAG,GAAG,kBAAkB,CAAC,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,KAAK,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"VibesSwitchGlass.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/VibesSwitchGlass.tsx"],"names":[],"mappings":"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"}
|
|
@@ -135,7 +135,7 @@ export function VibeMenuShell(props) {
|
|
|
135
135
|
React.createElement("rect", { ref: refs.band, className: "vm-band" }),
|
|
136
136
|
React.createElement("rect", { ref: refs.cover, className: "vm-cover" }),
|
|
137
137
|
React.createElement("path", { ref: refs.edge, className: "vm-edge" })),
|
|
138
|
-
React.createElement(VibesSwitchGlass, { open: collapsed === false, barOpen: shown.bar, onToggle: () => dispatch({ type: "PILL_TAP" }), pendingRequests: props.badges.pendingRequests, saveAskDot: props.badges.saveAsk === true, closedStatus: collapsed ? props.closedStatus : null, twinkling: props.switchActivity.twinkling, pillRef: pillRef }),
|
|
138
|
+
React.createElement(VibesSwitchGlass, { open: collapsed === false, barOpen: shown.bar, onToggle: () => dispatch({ type: "PILL_TAP" }), pendingRequests: props.badges.pendingRequests, saveAskDot: props.badges.saveAsk === true, closedStatus: collapsed ? props.closedStatus : null, twinkling: props.switchActivity.twinkling, pillRef: pillRef, reducedMotion: props.reducedMotion }),
|
|
139
139
|
React.createElement(StatusChipRow, { chips: floatingChips, place: "floating", onHide: collapsed ? props.onHideChip : undefined }),
|
|
140
140
|
React.createElement(SectionStrip, { activeSection: shown.section, pressedSection: state.phase === "card" ? state.section : null, tabbable: collapsed === false, pendingRequests: props.badges.pendingRequests, saveAskDot: props.badges.saveAsk === true, onTab: (section) => dispatch({ type: "ITEM_TAP", section }), stripRef: stripRef, slideRef: refs.slide, registerTab: (section, el) => {
|
|
141
141
|
refs.tabs.current[section] = el;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VibeMenuShell.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/shell/VibeMenuShell.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"VibeMenuShell.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/shell/VibeMenuShell.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
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 --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\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-log-peek: 60px;\n --size-code-mode-max-w: 1200px;\n --opacity-tab-inactive: 0.73;\n --opacity-row-disabled: 0.35;";
|
|
3
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 --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\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 --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\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-log-peek: 60px;\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 --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\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 --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\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/* ---------- 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 /* #7329: the bar under the switch belongs to no tab's box. */\n padding-right: var(--size-bar-end);\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/* #7329: Share's box ends where the switch begins; its colour runs on under\n the pill as a child painted beyond the box. */\n[data-vibe-menu] .vm-tab-run {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 100%;\n width: var(--size-bar-end);\n background: inherit;\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 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/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\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/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\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[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* A pressed chip holds the row while its answer is on the way (a lookup, a\n fork): it stays lit, and the row takes no second press. */\n[data-vibe-menu] .vm-suggest:disabled {\n cursor: default;\n}\n[data-vibe-menu] .vm-suggest:disabled:not([aria-busy=\"true\"]) {\n opacity: 0.5;\n}\n/* The pressed one is disabled too (the row takes no second press), so it\n must outrank the app's global button:disabled dim (theme/global-styles.ts). */\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n opacity: 1;\n}\n/* The same hold on the inline links at the end of the chat: the pressed link\n keeps its lit underline, the others read as disabled (dimmed above). */\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest[aria-busy=\"true\"] {\n text-decoration-color: currentColor;\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n same row and the same order as the others. It wears the lit state the others\n take on hover, a full-ink outline and a filled star before the label, so it\n reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n flex: none;\n fill: currentColor;\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/* Rewrite mode (the settings tab's sharing rewrite): no attach button, so the\n field takes the attach's inset; a dim red X cap sits left of the action cap. */\n[data-vibe-menu] .vm-composer.is-rewrite {\n position: relative;\n}\n[data-vibe-menu] .vm-composer.is-rewrite textarea {\n margin-left: var(--space-24);\n}\n[data-vibe-menu] .vm-cap[data-cancel] {\n padding: 0 var(--space-16);\n background: var(--cancel-cap);\n color: var(--on-cancel-cap);\n}\n[data-vibe-menu] .vm-cap[data-cancel]:hover {\n background: color-mix(in oklch, var(--cancel-cap), var(--on-cancel-cap) 12%);\n}\n[data-vibe-menu] .vm-rewrite-shimmer {\n position: absolute;\n left: var(--space-24);\n top: 50%;\n width: 28%;\n height: var(--space-12);\n margin-top: calc(var(--space-12) / -2);\n border-radius: var(--radius-full);\n background: var(--placeholder);\n opacity: 0.3;\n pointer-events: none;\n animation: vm-rewrite-shimmer 1.4s ease-in-out infinite;\n}\n@keyframes vm-rewrite-shimmer {\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-rewrite-shimmer {\n animation: none;\n }\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/* The peek (owner 2026-10-16): a send opens the fold about two lines high, the\n person's own words its last visible line, before the composer has cleared.\n The triangle stays folded; the peek is an invite (a tap, a wheel or a swipe in\n it opens the full log, MomentLine). Its column is bottom-aligned so the\n overflow falls off the top, and its inner scrollers cap at the same height\n so their bottom pin shows the newest line. Never part of the open\n [data-history] flex chain below. */\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] {\n height: auto;\n max-height: var(--size-log-peek);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n cursor: pointer;\n -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] > * {\n flex: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-log,\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-agent-history {\n max-height: var(--size-log-peek);\n overflow-y: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-suggestions {\n display: none;\n}\n/* The fold over the full chat (slots.agentLog): the history caps and scrolls\n itself (AgentLogHistory's compact box), so the clip drops the flat log's cap. */\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"][data-history] {\n max-height: none;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-history {\n margin-top: var(--space-8);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* One scroller: the tab-row card with the full chat open. The history's own\n cap (AgentLogHistory's compact box) knows nothing of what else the card\n holds, and the first build's request headline can take a third of it: the\n card then overflowed and scrolled too, the composer slid under the row, and\n the chat's end was out of reach. Here the card is a column whose fold gives\n up exactly what the card lacks, so the history scrolls and the card never\n does. Everything else in the card keeps its own height. */\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) {\n display: flex;\n flex-direction: column;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history])::before {\n flex: none;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) .vm-card-body,\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-moments:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history],\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history {\n display: flex;\n flex-direction: column;\n flex: 0 1 auto;\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history > * {\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-moments),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-log-clip) {\n flex-shrink: 0;\n}\n[data-vibe-menu] .vm-agent-history-tail {\n padding: var(--space-10) 4px var(--space-14) var(--space-24);\n}\n/* Suggestions at the end of the chat: wrapped inline links, not chips. */\n[data-vibe-menu] .vm-suggestions.is-inline {\n gap: var(--space-6) var(--space-14);\n margin-bottom: 0;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest {\n min-height: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n background: none;\n text-decoration: underline;\n text-decoration-color: var(--suggest-border);\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest:hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-gold {\n background: none;\n text-decoration-color: currentColor;\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-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";
|
|
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 --cancel-cap: #f3d6d2;\n --on-cancel-cap: #9c2318;\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-log-peek: 60px;\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 --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\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 --cancel-cap: #4a2420;\n --on-cancel-cap: #f1b5ad;\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/* ---------- 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 /* #7329: the bar under the switch belongs to no tab's box. */\n padding-right: var(--size-bar-end);\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/* #7329: Share's box ends where the switch begins; its colour runs on under\n the pill as a child painted beyond the box. */\n[data-vibe-menu] .vm-tab-run {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 100%;\n width: var(--size-bar-end);\n background: inherit;\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 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/* A held press slides the knob 3/4 of the way and waits (owner 2026-10-16).\n An overshooting spring would carry it past 3/4, so the held leg eases out\n with no overshoot; the release finishes on the host's own curve. */\n[data-vibe-menu] .vm-pill[data-progress=\"0.75\"] {\n --vibes-switch-slide: 0.4s cubic-bezier(0.22, 1, 0.36, 1);\n}\n/* Reduced motion: the switch jumps between poses. Its paths carry inline\n transitions (the knob's d and 3px nudge, the letters' fills and on-knob clip), so\n only an !important rule here stops every leg, not just the d slide. */\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-pill {\n --vibes-switch-slide: 0s;\n }\n [data-vibe-menu] .vm-pill svg path {\n transition: none !important;\n }\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/* #7079: the guest maker's save-time ask: a dot, not a count. */\n[data-vibe-menu] .vm-badge.is-dot {\n min-width: 10px;\n width: 10px;\n height: 10px;\n padding: 0;\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/* #4291. The chiclet's shape, so the two read as one row \u2014 but in the badge\n colour (the identity lane) so elevation never looks like a publish state. */\n[data-vibe-menu] .vm-admin-badge {\n display: inline-block;\n padding: 2px 8px;\n border-radius: var(--radius-full);\n background: var(--badge);\n color: var(--on-badge);\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[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n/* A pressed chip holds the row while its answer is on the way (a lookup, a\n fork): it stays lit, and the row takes no second press. */\n[data-vibe-menu] .vm-suggest:disabled {\n cursor: default;\n}\n[data-vibe-menu] .vm-suggest:disabled:not([aria-busy=\"true\"]) {\n opacity: 0.5;\n}\n/* The pressed one is disabled too (the row takes no second press), so it\n must outrank the app's global button:disabled dim (theme/global-styles.ts). */\n[data-vibe-menu] .vm-suggest[aria-busy=\"true\"] {\n opacity: 1;\n}\n/* The same hold on the inline links at the end of the chat: the pressed link\n keeps its lit underline, the others read as disabled (dimmed above). */\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest[aria-busy=\"true\"] {\n text-decoration-color: currentColor;\n}\n/* The gold option (#6768): the one capability the agent offered, a chip in the\n same row and the same order as the others. It wears the lit state the others\n take on hover, a full-ink outline and a filled star before the label, so it\n reads as the offer without a second colour on the card. */\n[data-vibe-menu] .vm-suggest.is-gold {\n display: inline-flex;\n align-items: center;\n gap: var(--space-6);\n border-color: var(--line-card);\n background: color-mix(in srgb, var(--accent) 35%, transparent);\n}\n[data-vibe-menu] .vm-suggest.is-gold .vm-glyph {\n flex: none;\n fill: currentColor;\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/* Rewrite mode (the settings tab's sharing rewrite): no attach button, so the\n field takes the attach's inset; a dim red X cap sits left of the action cap. */\n[data-vibe-menu] .vm-composer.is-rewrite {\n position: relative;\n}\n[data-vibe-menu] .vm-composer.is-rewrite textarea {\n margin-left: var(--space-24);\n}\n[data-vibe-menu] .vm-cap[data-cancel] {\n padding: 0 var(--space-16);\n background: var(--cancel-cap);\n color: var(--on-cancel-cap);\n}\n[data-vibe-menu] .vm-cap[data-cancel]:hover {\n background: color-mix(in oklch, var(--cancel-cap), var(--on-cancel-cap) 12%);\n}\n[data-vibe-menu] .vm-rewrite-shimmer {\n position: absolute;\n left: var(--space-24);\n top: 50%;\n width: 28%;\n height: var(--space-12);\n margin-top: calc(var(--space-12) / -2);\n border-radius: var(--radius-full);\n background: var(--placeholder);\n opacity: 0.3;\n pointer-events: none;\n animation: vm-rewrite-shimmer 1.4s ease-in-out infinite;\n}\n@keyframes vm-rewrite-shimmer {\n 50% {\n opacity: 0.12;\n }\n}\n@media (prefers-reduced-motion: reduce) {\n [data-vibe-menu] .vm-rewrite-shimmer {\n animation: none;\n }\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/* The peek (owner 2026-10-16): a send opens the fold about two lines high, the\n person's own words its last visible line, before the composer has cleared.\n The triangle stays folded; the peek is an invite (a tap, a wheel or a swipe in\n it opens the full log, MomentLine). Its column is bottom-aligned so the\n overflow falls off the top, and its inner scrollers cap at the same height\n so their bottom pin shows the newest line. Never part of the open\n [data-history] flex chain below. */\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] {\n height: auto;\n max-height: var(--size-log-peek);\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n cursor: pointer;\n -webkit-mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n mask-image: linear-gradient(to bottom, transparent, var(--ink) 14px);\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] > * {\n flex: none;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-log,\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-agent-history {\n max-height: var(--size-log-peek);\n overflow-y: hidden;\n}\n[data-vibe-menu] .vm-log-clip[data-open=\"peek\"] .vm-suggestions {\n display: none;\n}\n/* The fold over the full chat (slots.agentLog): the history caps and scrolls\n itself (AgentLogHistory's compact box), so the clip drops the flat log's cap. */\n[data-vibe-menu] .vm-log-clip[data-open=\"true\"][data-history] {\n max-height: none;\n overflow: hidden;\n}\n[data-vibe-menu] .vm-log-history {\n margin-top: var(--space-8);\n border-top: var(--stroke-hairline) solid var(--line-hairline);\n border-bottom: var(--stroke-hairline) solid var(--line-hairline);\n}\n/* One scroller: the tab-row card with the full chat open. The history's own\n cap (AgentLogHistory's compact box) knows nothing of what else the card\n holds, and the first build's request headline can take a third of it: the\n card then overflowed and scrolled too, the composer slid under the row, and\n the chat's end was out of reach. Here the card is a column whose fold gives\n up exactly what the card lacks, so the history scrolls and the card never\n does. Everything else in the card keeps its own height. */\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) {\n display: flex;\n flex-direction: column;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history])::before {\n flex: none;\n}\n[data-vibe-menu] .vm-card:has(.vm-ctab .vm-log-clip[data-open=\"true\"][data-history]) .vm-card-body,\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-moments:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]),\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history],\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history {\n display: flex;\n flex-direction: column;\n flex: 0 1 auto;\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab .vm-log-clip[data-open=\"true\"][data-history] .vm-log-history > * {\n min-height: 0;\n}\n[data-vibe-menu] .vm-ctab:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-moments),\n[data-vibe-menu] .vm-ctab .vm-live:has(.vm-log-clip[data-open=\"true\"][data-history]) > :not(.vm-log-clip) {\n flex-shrink: 0;\n}\n[data-vibe-menu] .vm-agent-history-tail {\n padding: var(--space-10) 4px var(--space-14) var(--space-24);\n}\n/* Suggestions at the end of the chat: wrapped inline links, not chips. */\n[data-vibe-menu] .vm-suggestions.is-inline {\n gap: var(--space-6) var(--space-14);\n margin-bottom: 0;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest {\n min-height: 0;\n padding: 0;\n border: none;\n border-radius: 0;\n background: none;\n text-decoration: underline;\n text-decoration-color: var(--suggest-border);\n text-decoration-thickness: 1px;\n text-underline-offset: 3px;\n}\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest:hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-hover,\n[data-vibe-menu] .vm-suggestions.is-inline .vm-suggest.is-gold {\n background: none;\n text-decoration-color: currentColor;\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-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;
|
|
@@ -446,6 +446,23 @@ export const VIBE_MENU_CSS = `
|
|
|
446
446
|
background: none;
|
|
447
447
|
cursor: pointer;
|
|
448
448
|
}
|
|
449
|
+
/* A held press slides the knob 3/4 of the way and waits (owner 2026-10-16).
|
|
450
|
+
An overshooting spring would carry it past 3/4, so the held leg eases out
|
|
451
|
+
with no overshoot; the release finishes on the host's own curve. */
|
|
452
|
+
[data-vibe-menu] .vm-pill[data-progress="0.75"] {
|
|
453
|
+
--vibes-switch-slide: 0.4s cubic-bezier(0.22, 1, 0.36, 1);
|
|
454
|
+
}
|
|
455
|
+
/* Reduced motion: the switch jumps between poses. Its paths carry inline
|
|
456
|
+
transitions (the knob's d and 3px nudge, the letters' fills and on-knob clip), so
|
|
457
|
+
only an !important rule here stops every leg, not just the d slide. */
|
|
458
|
+
@media (prefers-reduced-motion: reduce) {
|
|
459
|
+
[data-vibe-menu] .vm-pill {
|
|
460
|
+
--vibes-switch-slide: 0s;
|
|
461
|
+
}
|
|
462
|
+
[data-vibe-menu] .vm-pill svg path {
|
|
463
|
+
transition: none !important;
|
|
464
|
+
}
|
|
465
|
+
}
|
|
449
466
|
[data-vibe-menu] .vm-switch-art {
|
|
450
467
|
width: 100%;
|
|
451
468
|
height: 100%;
|
|
@@ -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;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiC5C,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Ff,WAAW;;;gCAGA,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;2DAUwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB
|
|
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;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAiC5C,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA2Ff,WAAW;;;gCAGA,CAAC;AAEjC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;2DAUwB,CAAC;AAE5D,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;6BAKA,oBAAoB;;;;+BAIlB,mBAAmB;;;;mCAIf,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA89CrD,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.
|
|
3
|
+
"version": "14.3.129",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@adviser/cement": "~0.5.34",
|
|
12
12
|
"@emotion/css": "~11.13.5",
|
|
13
|
-
"@vibes.diy/api-types": "14.3.
|
|
14
|
-
"@vibes.diy/use-vibes-types": "14.3.
|
|
15
|
-
"@vibes.diy/vibe-runtime": "14.3.
|
|
16
|
-
"@vibes.diy/vibe-types": "14.3.
|
|
13
|
+
"@vibes.diy/api-types": "14.3.129",
|
|
14
|
+
"@vibes.diy/use-vibes-types": "14.3.129",
|
|
15
|
+
"@vibes.diy/vibe-runtime": "14.3.129",
|
|
16
|
+
"@vibes.diy/vibe-types": "14.3.129",
|
|
17
17
|
"arktype": "~2.2.6",
|
|
18
18
|
"officeparser": "~8.1.1",
|
|
19
19
|
"qrcode-generator": "~2.0.4",
|