@vibes.diy/base 14.3.86 → 14.3.87
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/HandlePickerMenu.d.ts +6 -0
- package/components/HandlePickerMenu.js +1 -1
- package/components/HandlePickerMenu.js.map +1 -1
- package/components/VibesSwitch.js +1 -1
- package/components/VibesSwitch.js.map +1 -1
- package/components/VibesWindowFrame.d.ts +17 -0
- package/components/VibesWindowFrame.js +100 -0
- package/components/VibesWindowFrame.js.map +1 -0
- package/components/VibesWindowFrame.styles.d.ts +1 -0
- package/components/VibesWindowFrame.styles.js +446 -0
- package/components/VibesWindowFrame.styles.js.map +1 -0
- package/components/VibesWindowHeader.d.ts +19 -0
- package/components/VibesWindowHeader.js +23 -0
- package/components/VibesWindowHeader.js.map +1 -0
- package/components/index.d.ts +3 -0
- package/components/index.js +3 -0
- package/components/index.js.map +1 -1
- package/package.json +5 -5
|
@@ -26,3 +26,9 @@ export interface HandlePickerMenuProps {
|
|
|
26
26
|
}
|
|
27
27
|
export declare const sanitizeHandle: typeof toRFC2822_32ByteLength;
|
|
28
28
|
export declare function HandlePickerMenu({ handles, activeSlug, onSelect, onNewHandle, busy, placement, onResetToDefault, resetToDefaultLabel, onLogout, header, onSignIn, onChooseHandle, onSettings, onMyVibes, onMemberships, style, }: HandlePickerMenuProps): React.ReactElement;
|
|
29
|
+
export declare function NewHandleForm({ busy, onCancel, onCreate, onRandom, }: {
|
|
30
|
+
readonly busy?: boolean;
|
|
31
|
+
readonly onCancel: () => void;
|
|
32
|
+
readonly onCreate: (slug: string) => void;
|
|
33
|
+
readonly onRandom: () => void;
|
|
34
|
+
}): React.JSX.Element;
|
|
@@ -35,7 +35,7 @@ export function HandlePickerMenu({ handles, activeSlug, onSelect, onNewHandle, b
|
|
|
35
35
|
React.createElement("div", { style: { height: 1, background: "var(--color-light-decorative-00, #eee)", margin: "6px 0" } }),
|
|
36
36
|
React.createElement(HandleRow, { icon: React.createElement("span", { style: { fontSize: 14 } }, "\u238B"), label: "Log out", disabled: busy, onClick: onLogout })))));
|
|
37
37
|
}
|
|
38
|
-
function NewHandleForm({ busy, onCancel, onCreate, onRandom, }) {
|
|
38
|
+
export function NewHandleForm({ busy, onCancel, onCreate, onRandom, }) {
|
|
39
39
|
const [draft, setDraft] = useState("");
|
|
40
40
|
const sanitized = sanitizeHandle(draft);
|
|
41
41
|
const valid = sanitized.length > 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HandlePickerMenu.js","sourceRoot":"","sources":["../../jsr/components/HandlePickerMenu.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"HandlePickerMenu.js","sourceRoot":"","sources":["../../jsr/components/HandlePickerMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAmE/D,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC;AAErD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,UAAU,EACV,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,SAAS,GAAG,MAAM,EAClB,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,EACV,SAAS,EACT,aAAa,EACb,KAAK,GACiB;IAItB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,kBAAkB,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,kBAAkB,EAAE,CAAC;IACnG,OAAO,CACL,6BACE,IAAI,EAAC,MAAM,gBACA,WAAW,EACtB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,CAAC;YACR,KAAK,EAAE,GAAG;YACV,QAAQ,EAAE,oBAAoB;YAC9B,UAAU,EAAE,wCAAwC;YACpD,MAAM,EAAE,kDAAkD;YAC1D,YAAY,EAAE,EAAE;YAChB,SAAS,EAAE,8BAA8B;YACzC,OAAO,EAAE,CAAC;YACV,SAAS,EAAE,qBAAqB;YAChC,SAAS,EAAE,MAAM;YACjB,MAAM,EAAE,EAAE;YACV,GAAG,QAAQ;YACX,GAAG,KAAK;SACT,EACD,SAAS,EAAC,2CAA2C;QAEpD,MAAM;QACN,QAAQ,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,QAAQ,GAAI;QAC5D,cAAc,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAC,oBAAoB,EAAC,OAAO,EAAE,cAAc,GAAI;QACnF,UAAU,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,UAAU,GAAI;QACjE,SAAS,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAC,UAAU,EAAC,OAAO,EAAE,SAAS,GAAI;QAC/D,aAAa,IAAI,oBAAC,SAAS,IAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,aAAa,GAAI;QAC3E,6BAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,gBAEpG;QAMN,6BAAK,KAAK,EAAE,EAAE,SAAS,EAAE,gCAAgC,EAAE,SAAS,EAAE,MAAM,EAAE,IAC3E,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAClB,oBAAC,SAAS,IACR,GAAG,EAAE,CAAC,CAAC,IAAI,EACX,IAAI,EAAE,CAAC,CAAC,IAAI,EACZ,KAAK,EAAE,CAAC,CAAC,WAAW,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,EACpC,SAAS,EAAE,CAAC,CAAC,SAAS,EACtB,MAAM,EAAE,CAAC,CAAC,IAAI,KAAK,UAAU,EAC7B,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,GACjC,CACH,CAAC,CACE;QACL,gBAAgB,IAAI,CACnB,oBAAC,SAAS,IACR,IAAI,EAAE,8BAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAU,EAC7C,KAAK,EAAE,mBAAmB,IAAI,6BAA6B,EAC3D,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,gBAAgB,GACzB,CACH;QACD,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,wCAAwC,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI;QACnG,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,aAAa,IACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,EACvC,QAAQ,EAAE,GAAG,EAAE,CAAC,WAAW,EAAE,EAAE,GAC/B,CACH,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAChB,oBAAC,SAAS,IACR,IAAI,EAAE,8BAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAU,EAC7C,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,GAChC,CACH,CAAC,CAAC,CAAC,IAAI;QACP,QAAQ,IAAI,CACX;YACE,6BAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,EAAE,wCAAwC,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI;YACpG,oBAAC,SAAS,IAAC,IAAI,EAAE,8BAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAAU,EAAE,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,GAAI,CAC9G,CACJ,CACG,CACP,CAAC;AACJ,CAAC;AAMD,MAAM,UAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,GAMT;IACC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;IACnC,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,KAAK,IAAI,CAAC,IAAI;YAAE,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC1C,CAAC,CAAC;IACF,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE;QACpC,+BACE,SAAS,QACT,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,IAAI,EACd,WAAW,EAAC,aAAa,gBACd,iBAAiB,EAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,MAAM,EAAE,CAAC;gBACX,CAAC;qBAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;oBAC9B,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,QAAQ,EAAE,CAAC;gBACb,CAAC;YACH,CAAC,EACD,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,YAAY;gBACvB,OAAO,EAAE,SAAS;gBAClB,YAAY,EAAE,CAAC;gBACf,MAAM,EAAE,kDAAkD;gBAC1D,UAAU,EAAE,wCAAwC;gBACpD,OAAO,EAAE,MAAM;aAChB,GACD;QACF,6BACE,SAAS,EAAC,+CAA+C,eAC/C,QAAQ,EAClB,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,EAAE,IAE7D,KAAK,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,8BAA8B,CACrD;QACN,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE;YACrC,gCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,KAAK,IAAI,IAAI,EACxB,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,SAAS,EACnB,KAAK,EAAE;oBACL,IAAI,EAAE,CAAC;oBACP,OAAO,EAAE,SAAS;oBAClB,YAAY,EAAE,CAAC;oBACf,MAAM,EAAE,MAAM;oBACd,MAAM,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBAC9C,OAAO,EAAE,CAAC,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;oBACjC,UAAU,EAAE,SAAS;oBACrB,KAAK,EAAE,MAAM;oBACb,UAAU,EAAE,GAAG;iBAChB,aAGM;YACT,gCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAC,mDAAmD,EAC7D,KAAK,EAAE;oBACL,OAAO,EAAE,UAAU;oBACnB,YAAY,EAAE,CAAC;oBACf,MAAM,EAAE,kDAAkD;oBAC1D,UAAU,EAAE,aAAa;oBACzB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;oBACpC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;iBACxB,aAGM,CACL;QACN,gCACE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAC,+CAA+C,EACzD,KAAK,EAAE;gBACL,KAAK,EAAE,MAAM;gBACb,SAAS,EAAE,CAAC;gBACZ,OAAO,EAAE,CAAC;gBACV,YAAY,EAAE,CAAC;gBACf,MAAM,EAAE,MAAM;gBACd,UAAU,EAAE,aAAa;gBACzB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACpC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBACvB,QAAQ,EAAE,EAAE;aACb,oCAGM,CACL,CACP,CAAC;AACJ,CAAC;AAGD,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAO,GASR;IACC,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,kBACD,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACzC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,MAAM;YACb,SAAS,EAAE,MAAM;YACjB,OAAO,EAAE,SAAS;YAClB,YAAY,EAAE,CAAC;YACf,MAAM,EAAE,MAAM;YACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;YAC3B,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,wCAAwC,CAAC,CAAC,CAAC,aAAa;SAC9E,EACD,SAAS,EAAC,2CAA2C;QAErD,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,GAAI;QAC3D,8BAAM,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,IAChF,KAAK,CACD;QACN,MAAM,IAAI,CACT,mDAAkB,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,aAElC,CACR,CACM,CACV,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,IAAI,EACJ,SAAS,GAKV;IACC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,MAAM,CAAC,CAAC;IAChD,OAAO,CACL,mDAEE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE;YACT,MAAM,EAAE,EAAE;YACV,YAAY,EAAE,KAAK;YACnB,QAAQ,EAAE,QAAQ;YAClB,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa;YAC/C,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,QAAQ;YACpB,cAAc,EAAE,QAAQ;YACxB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YACnC,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,GAAG;YACf,UAAU,EAAE,CAAC;SACd,IAEA,SAAS,CAAC,CAAC,CAAC,CACX,6BAAK,GAAG,EAAE,SAAS,EAAE,GAAG,EAAC,EAAE,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAI,CAC7H,CAAC,CAAC,CAAC,CACF,CAAC,OAAO,IAAI,IAAI,CAAC,CAClB,CACI,CACR,CAAC;AACJ,CAAC"}
|
|
@@ -113,7 +113,7 @@ export function VibesSwitch({ size = 24, className, style, isActive, onToggle, i
|
|
|
113
113
|
React.createElement("g", { transform: "translate(0,32)" },
|
|
114
114
|
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
115
|
React.createElement("path", { fill: switchColors.secondary, fillRule: "evenodd", clipRule: "evenodd", d: pillD, style: {
|
|
116
|
-
transition: "d 0.3s ease, transform 0.8s ease, fill 2s ease",
|
|
116
|
+
transition: "d var(--vibes-switch-slide, 0.3s ease), transform 0.8s ease, fill 2s ease",
|
|
117
117
|
transform: pillTransform,
|
|
118
118
|
} }),
|
|
119
119
|
React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VibesSwitch.js","sourceRoot":"","sources":["../../jsr/components/VibesSwitch.tsx"],"names":[],"mappings":"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
|
|
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;AAkCnE,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,EAAE,EACT,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,UAAU,CAAC,OAAO,EAC9B,aAAa,GACI;IACjB,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IAUjE,MAAM,QAAQ,GAAG,SAAS,KAAK,UAAU,CAAC,OAAO,CAAC;IAClD,MAAM,YAAY,GAAG,GAAG,SAAS,IAAI,aAAa,IAAI,EAAE,EAAE,CAAC;IAE3D,MAAM,aAAa,GAAG,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC;IAGzE,MAAM,MAAM,GAAG,CAAC,aAAa,CAAC;IAE9B,MAAM,iBAAiB,GAAG,CAAC,CAAqB,EAAE,EAAE;QAClD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,QAAQ,GAAG,CAAC,aAAa,CAAC;QAChC,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAC;QACrB,CAAC;QACD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,mlBAAmlB,CAAC;IAEtmB,MAAM,UAAU,GAAG,qlBAAqlB,CAAC;IAIzmB,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9C,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,KAAK,EAAC,4BAA4B,EAClC,MAAM,EAAE,IAAI,EAIZ,OAAO,EAAC,eAAe,EACvB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,iBAAiB,EAShC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE;QAaxC,iCACE,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAC1C,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,SAAS,EAQjB,WAAW,EAAC,IAAI,EAChB,aAAa,EAAC,OAAO,EACrB,UAAU,EAAE,GAAG,EAKf,aAAa,EAAC,MAAM,EACpB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,SAAS,EACrD,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,SAAS,EACpD,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,GAC5C;QACF;YAKE,gCAAQ,EAAE,EAAC,gBAAgB,EAAC,CAAC,EAAC,MAAM,EAAC,CAAC,EAAC,MAAM,EAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAC,MAAM;gBAKtE,sCAAc,IAAI,EAAC,cAAc,EAAC,aAAa,EAAC,OAAO,EAAC,UAAU,EAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAC,MAAM,EAAC,KAAK,GAAG;gBAC/F,2CAAmB,EAAE,EAAC,eAAe,EAAC,GAAG,EAAC,KAAK,EAAC,KAAK,EAAC,GAAG,EAAC,gBAAgB,EAAC,GAAG,EAAC,gBAAgB,EAAC,GAAG,GAAG,CAC/F;YACT,mCAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAkFP,CAAS,CACL;QAUP,2BAAG,SAAS,EAAC,iBAAiB;YAC5B,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,IAAI,EAAC,MAAM,EACX,CAAC,EAAC,+mBAA+mB,GACjnB;YACF,8BACE,IAAI,EAAE,YAAY,CAAC,SAAS,EAC5B,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAE,KAAK,EACR,KAAK,EAAE;oBAGL,UAAU,EAAE,2EAA2E;oBACvF,SAAS,EAAE,aAAa;iBACzB,GACD;YACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB;oBAC5B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS;oBAC5D,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,SAAS;iBAC7F,EACD,CAAC,EAAC,4qCAA4qC,GAC9qC;YACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB;oBAC5B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS;oBAC5D,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,SAAS;iBAC7F,EACD,CAAC,EAAC,+7BAA+7B,GACj8B;YACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB;oBAC5B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS;oBAC5D,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,SAAS;iBAC7F,EACD,CAAC,EAAC,q9BAAq9B,GACv9B;YACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB;oBAC5B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS;oBAC5D,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,SAAS;iBAC7F,EACD,CAAC,EAAC,srBAAsrB,GACxrB;YACF,8BACE,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,gBAAgB;oBAC5B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS;oBAC5D,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,uDAAuD,CAAC,CAAC,CAAC,SAAS;iBAC7F,EACD,CAAC,EAAC,+ZAA+Z,GACja;YACF,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,cAAc;oBAC1B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO;iBAC7D,EACD,CAAC,EAAC,2pBAA2pB,GAC7pB;YACF,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,cAAc;oBAC1B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO;iBAC7D,EACD,CAAC,EAAC,yoBAAyoB,GAC3oB;YACF,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,cAAc;oBAC1B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO;iBAC7D,EACD,CAAC,EAAC,iSAAiS,GACnS;YACF,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,cAAc;oBAC1B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO;iBAC7D,EACD,CAAC,EAAC,iLAAiL,GACnL;YACF,8BACE,SAAS,EAAC,qCAAqC,EAC/C,QAAQ,EAAC,SAAS,EAClB,QAAQ,EAAC,SAAS,EAClB,KAAK,EAAE;oBACL,UAAU,EAAE,cAAc;oBAC1B,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO;iBAC7D,EACD,CAAC,EAAC,8KAA8K,GAChL,CACA,CACA,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export interface VibesWindowFrameProps {
|
|
3
|
+
menuOpen: boolean;
|
|
4
|
+
onToggleMenu: () => void;
|
|
5
|
+
onCloseMenu: () => void;
|
|
6
|
+
onMenuIntent?: () => void;
|
|
7
|
+
menu: React.ReactNode;
|
|
8
|
+
menuLabel?: string;
|
|
9
|
+
scheme?: "light" | "dark";
|
|
10
|
+
ovalColor?: string;
|
|
11
|
+
ovalStatusKey?: string | number;
|
|
12
|
+
isTwinkling?: boolean;
|
|
13
|
+
panOffset?: number;
|
|
14
|
+
nativeShell?: boolean;
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
}
|
|
17
|
+
export declare function VibesWindowFrame({ menuOpen, onToggleMenu, onCloseMenu, onMenuIntent, menu, menuLabel, scheme, ovalColor, ovalStatusKey, isTwinkling, panOffset, nativeShell, children, }: VibesWindowFrameProps): React.JSX.Element;
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import React, { useEffect, useId, useRef, useState } from "react";
|
|
2
|
+
import { VibesWindowHeader, VibesWindowStyles } from "./VibesWindowHeader.js";
|
|
3
|
+
const CLOSE_MS = 500;
|
|
4
|
+
const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
|
|
5
|
+
function isShown(el) {
|
|
6
|
+
return el.getClientRects().length > 0;
|
|
7
|
+
}
|
|
8
|
+
function focusablesIn(root) {
|
|
9
|
+
return Array.from(root.querySelectorAll(FOCUSABLE)).filter((el) => isShown(el) && el.closest("[inert]") === null);
|
|
10
|
+
}
|
|
11
|
+
function layeredDialogOpen(menuPanel) {
|
|
12
|
+
return Array.from(document.querySelectorAll('[role="dialog"], [aria-modal="true"]')).some((el) => el !== menuPanel && !el.contains(menuPanel) && isShown(el));
|
|
13
|
+
}
|
|
14
|
+
export function VibesWindowFrame({ menuOpen, onToggleMenu, onCloseMenu, onMenuIntent, menu, menuLabel = "Menu", scheme, ovalColor, ovalStatusKey, isTwinkling, panOffset = 0, nativeShell = false, children, }) {
|
|
15
|
+
const menuId = useId();
|
|
16
|
+
const barRef = useRef(null);
|
|
17
|
+
const panelRef = useRef(null);
|
|
18
|
+
const returnFocusRef = useRef(null);
|
|
19
|
+
const [closing, setClosing] = useState(false);
|
|
20
|
+
const [prevOpen, setPrevOpen] = useState(menuOpen);
|
|
21
|
+
if (prevOpen !== menuOpen) {
|
|
22
|
+
setPrevOpen(menuOpen);
|
|
23
|
+
setClosing(!menuOpen);
|
|
24
|
+
}
|
|
25
|
+
const phase = menuOpen ? "open" : closing ? "closing" : "closed";
|
|
26
|
+
useEffect(() => {
|
|
27
|
+
if (!closing)
|
|
28
|
+
return;
|
|
29
|
+
const t = setTimeout(() => setClosing(false), CLOSE_MS);
|
|
30
|
+
return () => clearTimeout(t);
|
|
31
|
+
}, [closing]);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
const panel = panelRef.current;
|
|
34
|
+
if (panel === null)
|
|
35
|
+
return;
|
|
36
|
+
if (menuOpen) {
|
|
37
|
+
returnFocusRef.current = document.activeElement;
|
|
38
|
+
panel.focus({ preventScroll: true });
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const active = document.activeElement;
|
|
42
|
+
const focusWasInMenu = active === null || active === document.body || panel.contains(active);
|
|
43
|
+
if (returnFocusRef.current !== null && focusWasInMenu) {
|
|
44
|
+
const back = returnFocusRef.current instanceof HTMLElement ? returnFocusRef.current : barRef.current;
|
|
45
|
+
back?.focus({ preventScroll: true });
|
|
46
|
+
}
|
|
47
|
+
returnFocusRef.current = null;
|
|
48
|
+
}, [menuOpen]);
|
|
49
|
+
useEffect(() => {
|
|
50
|
+
if (!menuOpen)
|
|
51
|
+
return;
|
|
52
|
+
const root = document.documentElement;
|
|
53
|
+
root.setAttribute("data-vwin-menu-open", "");
|
|
54
|
+
return () => root.removeAttribute("data-vwin-menu-open");
|
|
55
|
+
}, [menuOpen]);
|
|
56
|
+
useEffect(() => {
|
|
57
|
+
if (!menuOpen)
|
|
58
|
+
return;
|
|
59
|
+
const onKey = (event) => {
|
|
60
|
+
const panel = panelRef.current;
|
|
61
|
+
if (panel === null || layeredDialogOpen(panel))
|
|
62
|
+
return;
|
|
63
|
+
if (event.key === "Escape") {
|
|
64
|
+
onCloseMenu();
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
if (event.key !== "Tab")
|
|
68
|
+
return;
|
|
69
|
+
const bar = barRef.current;
|
|
70
|
+
const cycle = [...(bar === null ? [] : [bar]), ...focusablesIn(panel)];
|
|
71
|
+
if (cycle.length === 0)
|
|
72
|
+
return;
|
|
73
|
+
event.preventDefault();
|
|
74
|
+
const active = document.activeElement;
|
|
75
|
+
const at = active === panel ? 0 : cycle.indexOf(active);
|
|
76
|
+
let next;
|
|
77
|
+
if (event.shiftKey)
|
|
78
|
+
next = active === panel ? 0 : at <= 0 ? cycle.length - 1 : at - 1;
|
|
79
|
+
else
|
|
80
|
+
next = at < 0 ? 0 : (at + 1) % cycle.length;
|
|
81
|
+
cycle[next].focus();
|
|
82
|
+
};
|
|
83
|
+
document.addEventListener("keydown", onKey);
|
|
84
|
+
return () => document.removeEventListener("keydown", onKey);
|
|
85
|
+
}, [menuOpen, onCloseMenu]);
|
|
86
|
+
const pan = panOffset > 0 ? { transform: `translateY(${panOffset}px)` } : undefined;
|
|
87
|
+
return (React.createElement("div", { className: "vwin-scope vwin-frame", "data-scheme": scheme, "data-menu-phase": phase, "data-shell": nativeShell ? "native" : undefined, style: panOffset > 0 ? { "--vwin-pan": `${panOffset}px` } : undefined, "data-testid": "window-frame" },
|
|
88
|
+
React.createElement(VibesWindowStyles, null),
|
|
89
|
+
React.createElement("div", { className: "vwin-panel", "data-testid": "window-panel" },
|
|
90
|
+
React.createElement("div", { className: "vwin-grid-area", "aria-hidden": "true" },
|
|
91
|
+
React.createElement("div", { className: "vwin-grid", "data-testid": "window-grid" })),
|
|
92
|
+
React.createElement("div", { className: "vwin-content", "data-testid": "window-content" }, children)),
|
|
93
|
+
React.createElement("div", { className: "vwin-chrome", "data-testid": "window-chrome", style: pan },
|
|
94
|
+
React.createElement("div", { className: "vwin-chrome-bar" },
|
|
95
|
+
React.createElement(VibesWindowHeader, { buttonRef: barRef, withStyles: false, onIntent: onMenuIntent, isOpen: menuOpen, onToggle: onToggleMenu, controlsId: menuId, scheme: scheme, ovalColor: ovalColor, ovalStatusKey: ovalStatusKey, isTwinkling: isTwinkling }))),
|
|
96
|
+
React.createElement("div", { className: "vwin-menu-layer", "data-testid": "window-menu-layer", inert: phase !== "open", style: pan },
|
|
97
|
+
React.createElement("div", { className: "vwin-overlay", "data-testid": "window-menu-overlay", onClick: onCloseMenu }),
|
|
98
|
+
React.createElement("div", { ref: panelRef, id: menuId, className: "vwin-menu-panel", role: "dialog", "aria-modal": "true", "aria-label": menuLabel, tabIndex: -1 }, menu))));
|
|
99
|
+
}
|
|
100
|
+
//# sourceMappingURL=VibesWindowFrame.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VibesWindowFrame.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowFrame.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const VIBES_WINDOW_CSS = "\n.vwin-scope {\n --vwin-frame: #000;\n --vwin-bar: #fefff1;\n --vwin-line: #2c2c22;\n --vwin-field: #cccdc8;\n --vwin-grid-line: rgba(255, 255, 255, 0.375);\n --vwin-red: #d92a1c;\n --vwin-gear-disc: #231f20;\n --vwin-cream: #fffff0;\n --vwin-edge: #231f20;\n --vwin-menu-bg: #fefff1;\n --vwin-menu-ink: #1a1a1a;\n --vwin-bar-height: 53px;\n /* The black border: 15px on the sides, top and bottom from 768px up (the\n designer comp, #6906). Phones go full bleed (Marcus, 2026-10-07: side\n borders made the page feel glitchy on a phone); the black stays only at\n the top, behind the bar's rounded corners. */\n --vwin-side: 15px;\n --vwin-top: 15px;\n --vwin-bottom: 15px;\n /* The bottom border never sits over the home indicator, except in the iOS\n app on a phone (see the phone tokens). */\n --vwin-bottom-floor: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n /* Display headings in the frame are set bold (Chris, 2026-10-07); getTitle\n reads this, so pages outside the frame keep the regular cut. */\n --vibes-home-title-weight: 700;\n}\n/* Phones (Chris, 2026-10-08): a few px of black round the sides and top, and\n a black foundation under the window, so the site sits popped out on top of\n a black base with all the active content above it. The window ends in\n rounded corners 16px above the foundation strip (see .vwin-frame::after);\n in mobile Safari that strip is the whole toolbar area, painted solid black,\n so the address bar floats on black. */\n@media (width < 768px) {\n .vwin-scope {\n --vwin-side: 4px;\n --vwin-top: 4px;\n --vwin-bottom: 16px;\n }\n /* The iOS app has no address bar to float: the bottom edge matches the\n sides (4px) and the window runs over the home-indicator area, its content\n padded to clear the indicator (Marcus, 2026-10-08). */\n .vwin-scope[data-shell=\"native\"] {\n --vwin-bottom: 4px;\n --vwin-bottom-floor: 0px;\n }\n .vwin-scope[data-shell=\"native\"] .vwin-content {\n padding-bottom: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n }\n}\n@media (prefers-color-scheme: dark) {\n .vwin-scope:not([data-scheme=\"light\"]) {\n --vwin-line: #83817d;\n --vwin-field: #2a2a2a;\n --vwin-grid-line: rgba(0, 0, 0, 0.275);\n --vwin-edge: #000;\n --vwin-menu-bg: #2a2a2a;\n --vwin-menu-ink: #e0e0e0;\n --vibes-home-title-ink: #fefff1;\n}\n}\n.vwin-scope[data-scheme=\"dark\"] {\n --vwin-line: #83817d;\n --vwin-field: #2a2a2a;\n --vwin-grid-line: rgba(0, 0, 0, 0.275);\n --vwin-edge: #000;\n --vwin-menu-bg: #2a2a2a;\n --vwin-menu-ink: #e0e0e0;\n --vibes-home-title-ink: #fefff1;\n}\n\n/* The page background is the frame's black. Safari paints the strips above\n and below the page (status bar, the room under its toolbar) from it or from\n the fixed black edges, so the site sits on black all round (Chris,\n 2026-10-08: the window resting on a solid black foundation). */\nhtml:has(.vwin-frame),\nbody:has(.vwin-frame) {\n background-color: #000;\n}\n/* An open menu holds the page still behind its overlay. */\nhtml[data-vwin-menu-open] {\n overflow: hidden;\n}\n\n/* The page scrolls on the DOCUMENT, not inside the panel. iOS 26 Safari only\n lets page content show through its floating glass address bar when the\n document scrolls; a frame whose content scrolled in an inner box got solid\n strips there instead. So the frame and panel are in flow, at least the large\n viewport tall (toolbar collapsed; 100vh where lvh is unknown), and nothing\n fixed or sticky touches the bottom edge while the menu is closed: Safari\n colours the strip under its toolbar from such an element (it took the\n panel's grey when the frame was pinned there). */\n.vwin-frame {\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n min-height: 100vh;\n min-height: 100lvh;\n /* The page ends --vwin-bottom above the bottom (15px from 768px up). Phones\n override the whole frame below (it is fixed there). */\n padding: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px))) var(--vwin-bottom)\n max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n background-color: var(--vwin-frame);\n}\n/* No z-index and no isolation on purpose: a page's own full-screen overlays\n (z-50 detail panels and modals) must still rise above the bar (40) and the\n menu (45), as they do outside the frame. */\n.vwin-panel {\n position: relative;\n flex: 1 0 auto;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n /* The fixed bar covers the panel's first 54px at rest; content starts under it. */\n padding-top: calc(var(--vwin-bar-height) + 1px);\n border-radius: 12px;\n overflow: clip;\n background-color: var(--vwin-field);\n}\n/* The black border, fixed over the page edges, so it shows on every side\n while the page scrolls under it: a rounded cut-out the size of the window,\n with black spread out from it. 15px all round from 768px up (the comp,\n #6906); on phones a 4px edge and the black foundation at the bottom (see the\n phone tokens). Above the menu (45) so the menu's ends tuck under the border;\n a page's own z-50 overlays still cover it. It holds still with the chrome\n through the iOS keyboard pan (--vwin-pan). */\n.vwin-frame::before {\n content: \"\";\n position: fixed;\n top: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px)));\n left: max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n right: max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px)));\n bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n border-radius: 12px;\n box-shadow: 0 0 0 100vmax var(--vwin-frame);\n transform: translateY(var(--vwin-pan, 0px));\n pointer-events: none;\n z-index: 46;\n}\n/* Phones: the black foundation strip, pinned to the bottom edge. A fixed\n element on that edge is what mobile Safari colours the strip under its\n floating toolbar from, so the whole toolbar area turns solid black and the\n address bar floats on it; the window's rounded bottom sits 16px above. In the\n iOS app (no toolbar) it is the home-indicator area. */\n@media (width < 768px) {\n .vwin-frame::after {\n content: \"\";\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n height: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n background-color: var(--vwin-frame);\n transform: translateY(var(--vwin-pan, 0px));\n pointer-events: none;\n z-index: 46;\n }\n}\n\n/* The grid: behind the content, the full height of the panel, whole cells\n only. It scrolls with the page (a fixed grid would touch the bottom edge). */\n.vwin-grid-area {\n position: absolute;\n top: calc(var(--vwin-bar-height) + 1px);\n left: 15px;\n right: 15px;\n bottom: 25px;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n pointer-events: none;\n z-index: 0;\n}\n.vwin-grid {\n flex: none;\n width: 100%;\n height: 100%;\n background-image:\n linear-gradient(to right, var(--vwin-grid-line) 1px, transparent 1px),\n linear-gradient(to bottom, var(--vwin-grid-line) 1px, transparent 1px);\n background-size: 32px 30px;\n background-position: 0 0;\n}\n@supports (width: round(down, 100px, 32px)) {\n .vwin-grid {\n width: calc(round(down, 100% - 1px, 32px) + 1px);\n height: calc(round(down, 100% - 1px, 30px) + 1px);\n }\n}\n/* Phones: the grid runs edge to edge inside the window. A plain strip of field\n beside a whole-cell grid read as a border down each side (Marcus,\n 2026-10-07). Cells start at the left edge, as the iOS launch screen tiles\n them, so the launch hands off to the same grid. */\n@media (width < 768px) {\n .vwin-grid-area {\n left: 0;\n right: 0;\n bottom: 0;\n }\n .vwin-grid {\n width: 100%;\n height: 100%;\n background-position: 0 0;\n }\n}\n\n/* The page, in normal flow under the bar and over the grid. Positioned (after\n the grid) so it paints above it, and so a page that fills the panel\n (absolute inset-0: the auth boot shell, the logged-out view) fills at least\n the viewport under the bar. */\n.vwin-content {\n position: relative;\n flex: 1 0 auto;\n /* The panel runs under the home indicator; the last content clears it. */\n padding-bottom: var(--vibes-safe-bottom, env(safe-area-inset-bottom, 0px));\n box-sizing: border-box;\n}\n\n/* Phones: the window is fixed and its content scrolls inside it, the grid\n holding still behind (the #6906 layout). Mobile Safari only paints the strip\n under its floating toolbar solid when the document itself does not scroll;\n then it takes the colour of the black foundation pinned to the bottom edge\n (.vwin-frame::after), and the window rests on black with the address bar\n floating on it (Chris, 2026-10-08). From 768px up the document scrolls. */\n@media (width < 768px) {\n html:has(.vwin-frame),\n body:has(.vwin-frame) {\n height: 100%;\n overflow: hidden;\n }\n .vwin-frame {\n position: fixed;\n inset: 0;\n min-height: 0;\n padding-bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));\n }\n .vwin-panel {\n flex: 1 1 auto;\n min-height: 0;\n }\n .vwin-content {\n position: absolute;\n top: calc(var(--vwin-bar-height) + 1px);\n left: 0;\n right: 0;\n bottom: 0;\n padding-bottom: 0;\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n }\n}\n\n/* The top chrome: a fixed black strip holding the bar. iOS 26 Safari colours\n the status-bar strip from the fixed element pinned to the top edge; pinned\n there itself, the bar turned it cream. The strip's black also shows in the\n bar's rounded top corners, as the frame's did. */\n.vwin-chrome {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 40;\n box-sizing: border-box;\n padding: max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px))) 0 max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n background-color: var(--vwin-frame);\n}\n.vwin-chrome-bar {\n position: relative;\n border-radius: 12px 12px 0 0;\n overflow: hidden;\n}\n\n/* The bar: one real button, so a tap anywhere on it toggles the menu. */\n.vwin-bar {\n position: relative;\n z-index: 40;\n box-sizing: content-box;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: var(--vwin-bar-height);\n margin: 0;\n padding: 0;\n border: 0;\n border-bottom: 1px solid var(--vwin-line);\n background-color: var(--vwin-bar);\n color: var(--vwin-cream);\n font: inherit;\n text-align: left;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n overflow: hidden;\n}\n.vwin-bar:focus-visible {\n outline: 3px solid var(--vwin-red);\n outline-offset: -3px;\n}\n.vwin-pill {\n display: flex;\n align-items: center;\n height: 100%;\n padding-left: 4px;\n}\n/* The pill's slide runs on the menu's clock (same 0.5s and closing curve), so\n pill and menu read as one physical piece. Opening, its spring is a touch\n softer than the menu's (1.25 vs 1.56): at the menu's full overshoot the\n cream shape poked past the pill's black outline. */\n.vwin-pill {\n --vibes-switch-slide: 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-pill,\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-pill {\n --vibes-switch-slide: 0.5s cubic-bezier(0.64, 0, 0.66, 0);\n}\n.vwin-pill svg {\n position: relative;\n /* The switch's viewBox carries headroom for its status ring; this centres the\n drawn logo (not the svg box) on the bar. */\n top: -8.5px;\n pointer-events: none;\n}\n.vwin-menu-button {\n display: flex;\n align-items: center;\n gap: 8px;\n height: var(--vwin-bar-height);\n padding: 0 16px 0 10px;\n background-color: var(--vwin-red);\n color: var(--vwin-cream);\n flex-shrink: 0;\n}\n.vwin-gear {\n display: flex;\n width: 35px;\n height: 35px;\n transform-origin: 50% 50%;\n}\n.vwin-menu-label {\n font-size: 14px;\n font-weight: bold;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n white-space: nowrap;\n text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);\n color: var(--vwin-cream);\n opacity: 1;\n}\n@media (hover: hover) {\n .vwin-bar:hover .vwin-gear {\n animation: vwin-wiggle 0.6s ease-in-out infinite;\n }\n}\n.vwin-bar:active .vwin-menu-button {\n animation: vwin-shake 0.3s ease-in-out;\n}\n@keyframes vwin-wiggle {\n 0%, 100% { transform: rotate(0deg); }\n 25% { transform: rotate(-5deg); }\n 75% { transform: rotate(5deg); }\n}\n@keyframes vwin-shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-3px); }\n 75% { transform: translateX(3px); }\n}\n\n/* The menu: an overlay under the bar and a panel sliding in from the right,\n fixed from under the bar to the viewport bottom (touching the bottom edge\n only while open is fine). The bar stays live above it, so the pill's own\n slide plays and a header tap closes the menu the same way it opened it. */\n.vwin-menu-layer {\n position: fixed;\n top: calc(max(var(--vwin-top), var(--vibes-safe-top, env(safe-area-inset-top, 0px))) + var(--vwin-bar-height) + 1px);\n left: max(var(--vwin-side), var(--vibes-safe-left, env(safe-area-inset-left, 0px)));\n right: max(var(--vwin-side), var(--vibes-safe-right, env(safe-area-inset-right, 0px)));\n bottom: var(--vwin-bottom);\n z-index: 45;\n overflow: hidden;\n}\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-menu-layer {\n visibility: hidden;\n pointer-events: none;\n}\n.vwin-overlay {\n position: absolute;\n inset: 0;\n background-color: rgba(0, 0, 0, 0.6);\n animation: vwin-fade-in 0.3s ease-out;\n}\n.vwin-menu-panel {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n width: 400px;\n max-width: 90%;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n background-color: var(--vwin-menu-bg);\n color: var(--vwin-menu-ink);\n border-top: 8px solid var(--vwin-edge);\n border-bottom: 8px solid var(--vwin-edge);\n box-shadow: -8px 0 0 0 var(--vwin-edge);\n animation: vwin-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n outline: none;\n overflow: hidden;\n}\n/* Focus lands on the panel itself when the menu opens (so the next Tab reaches\n the first row); that programmatic focus draws no ring. Rows and buttons\n inside keep their own focus-visible rings. */\n.vwin-menu-panel:focus,\n.vwin-menu-panel:focus-visible {\n outline: none;\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-overlay {\n animation: vwin-fade-out 0.3s ease-out forwards;\n}\n.vwin-frame[data-menu-phase=\"closing\"] .vwin-menu-panel {\n animation: vwin-slide-out 0.5s cubic-bezier(0.64, 0, 0.66, 0) forwards;\n}\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-overlay,\n.vwin-frame[data-menu-phase=\"closed\"] .vwin-menu-panel {\n animation: none;\n}\n@keyframes vwin-fade-in { from { opacity: 0; } to { opacity: 1; } }\n@keyframes vwin-fade-out { from { opacity: 1; } to { opacity: 0; } }\n@keyframes vwin-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }\n@keyframes vwin-slide-out { from { transform: translateX(0); } to { transform: translateX(calc(100% + 8px)); } }\n\n@media (prefers-reduced-motion: reduce) {\n .vwin-pill,\n .vwin-frame .vwin-pill {\n --vibes-switch-slide: 0s;\n }\n .vwin-bar:hover .vwin-gear,\n .vwin-bar:active .vwin-menu-button,\n .vwin-overlay,\n .vwin-menu-panel {\n animation: none !important;\n }\n /* No slide to wait out: a closing menu is simply gone. */\n .vwin-frame[data-menu-phase=\"closing\"] .vwin-menu-layer {\n visibility: hidden;\n }\n}\n";
|
|
@@ -0,0 +1,446 @@
|
|
|
1
|
+
import { SAFE_AREA_BOTTOM, SAFE_AREA_LEFT, SAFE_AREA_RIGHT, SAFE_AREA_TOP } from "../theme/safe-area.js";
|
|
2
|
+
const DARK_TOKENS = `
|
|
3
|
+
--vwin-line: #83817d;
|
|
4
|
+
--vwin-field: #2a2a2a;
|
|
5
|
+
--vwin-grid-line: rgba(0, 0, 0, 0.275);
|
|
6
|
+
--vwin-edge: #000;
|
|
7
|
+
--vwin-menu-bg: #2a2a2a;
|
|
8
|
+
--vwin-menu-ink: #e0e0e0;
|
|
9
|
+
--vibes-home-title-ink: #fefff1;
|
|
10
|
+
`;
|
|
11
|
+
export const VIBES_WINDOW_CSS = `
|
|
12
|
+
.vwin-scope {
|
|
13
|
+
--vwin-frame: #000;
|
|
14
|
+
--vwin-bar: #fefff1;
|
|
15
|
+
--vwin-line: #2c2c22;
|
|
16
|
+
--vwin-field: #cccdc8;
|
|
17
|
+
--vwin-grid-line: rgba(255, 255, 255, 0.375);
|
|
18
|
+
--vwin-red: #d92a1c;
|
|
19
|
+
--vwin-gear-disc: #231f20;
|
|
20
|
+
--vwin-cream: #fffff0;
|
|
21
|
+
--vwin-edge: #231f20;
|
|
22
|
+
--vwin-menu-bg: #fefff1;
|
|
23
|
+
--vwin-menu-ink: #1a1a1a;
|
|
24
|
+
--vwin-bar-height: 53px;
|
|
25
|
+
/* The black border: 15px on the sides, top and bottom from 768px up (the
|
|
26
|
+
designer comp, #6906). Phones go full bleed (Marcus, 2026-10-07: side
|
|
27
|
+
borders made the page feel glitchy on a phone); the black stays only at
|
|
28
|
+
the top, behind the bar's rounded corners. */
|
|
29
|
+
--vwin-side: 15px;
|
|
30
|
+
--vwin-top: 15px;
|
|
31
|
+
--vwin-bottom: 15px;
|
|
32
|
+
/* The bottom border never sits over the home indicator, except in the iOS
|
|
33
|
+
app on a phone (see the phone tokens). */
|
|
34
|
+
--vwin-bottom-floor: ${SAFE_AREA_BOTTOM};
|
|
35
|
+
/* Display headings in the frame are set bold (Chris, 2026-10-07); getTitle
|
|
36
|
+
reads this, so pages outside the frame keep the regular cut. */
|
|
37
|
+
--vibes-home-title-weight: 700;
|
|
38
|
+
}
|
|
39
|
+
/* Phones (Chris, 2026-10-08): a few px of black round the sides and top, and
|
|
40
|
+
a black foundation under the window, so the site sits popped out on top of
|
|
41
|
+
a black base with all the active content above it. The window ends in
|
|
42
|
+
rounded corners 16px above the foundation strip (see .vwin-frame::after);
|
|
43
|
+
in mobile Safari that strip is the whole toolbar area, painted solid black,
|
|
44
|
+
so the address bar floats on black. */
|
|
45
|
+
@media (width < 768px) {
|
|
46
|
+
.vwin-scope {
|
|
47
|
+
--vwin-side: 4px;
|
|
48
|
+
--vwin-top: 4px;
|
|
49
|
+
--vwin-bottom: 16px;
|
|
50
|
+
}
|
|
51
|
+
/* The iOS app has no address bar to float: the bottom edge matches the
|
|
52
|
+
sides (4px) and the window runs over the home-indicator area, its content
|
|
53
|
+
padded to clear the indicator (Marcus, 2026-10-08). */
|
|
54
|
+
.vwin-scope[data-shell="native"] {
|
|
55
|
+
--vwin-bottom: 4px;
|
|
56
|
+
--vwin-bottom-floor: 0px;
|
|
57
|
+
}
|
|
58
|
+
.vwin-scope[data-shell="native"] .vwin-content {
|
|
59
|
+
padding-bottom: ${SAFE_AREA_BOTTOM};
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
@media (prefers-color-scheme: dark) {
|
|
63
|
+
.vwin-scope:not([data-scheme="light"]) {${DARK_TOKENS}}
|
|
64
|
+
}
|
|
65
|
+
.vwin-scope[data-scheme="dark"] {${DARK_TOKENS}}
|
|
66
|
+
|
|
67
|
+
/* The page background is the frame's black. Safari paints the strips above
|
|
68
|
+
and below the page (status bar, the room under its toolbar) from it or from
|
|
69
|
+
the fixed black edges, so the site sits on black all round (Chris,
|
|
70
|
+
2026-10-08: the window resting on a solid black foundation). */
|
|
71
|
+
html:has(.vwin-frame),
|
|
72
|
+
body:has(.vwin-frame) {
|
|
73
|
+
background-color: #000;
|
|
74
|
+
}
|
|
75
|
+
/* An open menu holds the page still behind its overlay. */
|
|
76
|
+
html[data-vwin-menu-open] {
|
|
77
|
+
overflow: hidden;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/* The page scrolls on the DOCUMENT, not inside the panel. iOS 26 Safari only
|
|
81
|
+
lets page content show through its floating glass address bar when the
|
|
82
|
+
document scrolls; a frame whose content scrolled in an inner box got solid
|
|
83
|
+
strips there instead. So the frame and panel are in flow, at least the large
|
|
84
|
+
viewport tall (toolbar collapsed; 100vh where lvh is unknown), and nothing
|
|
85
|
+
fixed or sticky touches the bottom edge while the menu is closed: Safari
|
|
86
|
+
colours the strip under its toolbar from such an element (it took the
|
|
87
|
+
panel's grey when the frame was pinned there). */
|
|
88
|
+
.vwin-frame {
|
|
89
|
+
display: flex;
|
|
90
|
+
flex-direction: column;
|
|
91
|
+
box-sizing: border-box;
|
|
92
|
+
min-height: 100vh;
|
|
93
|
+
min-height: 100lvh;
|
|
94
|
+
/* The page ends --vwin-bottom above the bottom (15px from 768px up). Phones
|
|
95
|
+
override the whole frame below (it is fixed there). */
|
|
96
|
+
padding: max(var(--vwin-top), ${SAFE_AREA_TOP}) max(var(--vwin-side), ${SAFE_AREA_RIGHT}) var(--vwin-bottom)
|
|
97
|
+
max(var(--vwin-side), ${SAFE_AREA_LEFT});
|
|
98
|
+
background-color: var(--vwin-frame);
|
|
99
|
+
}
|
|
100
|
+
/* No z-index and no isolation on purpose: a page's own full-screen overlays
|
|
101
|
+
(z-50 detail panels and modals) must still rise above the bar (40) and the
|
|
102
|
+
menu (45), as they do outside the frame. */
|
|
103
|
+
.vwin-panel {
|
|
104
|
+
position: relative;
|
|
105
|
+
flex: 1 0 auto;
|
|
106
|
+
display: flex;
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
box-sizing: border-box;
|
|
109
|
+
/* The fixed bar covers the panel's first 54px at rest; content starts under it. */
|
|
110
|
+
padding-top: calc(var(--vwin-bar-height) + 1px);
|
|
111
|
+
border-radius: 12px;
|
|
112
|
+
overflow: clip;
|
|
113
|
+
background-color: var(--vwin-field);
|
|
114
|
+
}
|
|
115
|
+
/* The black border, fixed over the page edges, so it shows on every side
|
|
116
|
+
while the page scrolls under it: a rounded cut-out the size of the window,
|
|
117
|
+
with black spread out from it. 15px all round from 768px up (the comp,
|
|
118
|
+
#6906); on phones a 4px edge and the black foundation at the bottom (see the
|
|
119
|
+
phone tokens). Above the menu (45) so the menu's ends tuck under the border;
|
|
120
|
+
a page's own z-50 overlays still cover it. It holds still with the chrome
|
|
121
|
+
through the iOS keyboard pan (--vwin-pan). */
|
|
122
|
+
.vwin-frame::before {
|
|
123
|
+
content: "";
|
|
124
|
+
position: fixed;
|
|
125
|
+
top: max(var(--vwin-top), ${SAFE_AREA_TOP});
|
|
126
|
+
left: max(var(--vwin-side), ${SAFE_AREA_LEFT});
|
|
127
|
+
right: max(var(--vwin-side), ${SAFE_AREA_RIGHT});
|
|
128
|
+
bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));
|
|
129
|
+
border-radius: 12px;
|
|
130
|
+
box-shadow: 0 0 0 100vmax var(--vwin-frame);
|
|
131
|
+
transform: translateY(var(--vwin-pan, 0px));
|
|
132
|
+
pointer-events: none;
|
|
133
|
+
z-index: 46;
|
|
134
|
+
}
|
|
135
|
+
/* Phones: the black foundation strip, pinned to the bottom edge. A fixed
|
|
136
|
+
element on that edge is what mobile Safari colours the strip under its
|
|
137
|
+
floating toolbar from, so the whole toolbar area turns solid black and the
|
|
138
|
+
address bar floats on it; the window's rounded bottom sits 16px above. In the
|
|
139
|
+
iOS app (no toolbar) it is the home-indicator area. */
|
|
140
|
+
@media (width < 768px) {
|
|
141
|
+
.vwin-frame::after {
|
|
142
|
+
content: "";
|
|
143
|
+
position: fixed;
|
|
144
|
+
left: 0;
|
|
145
|
+
right: 0;
|
|
146
|
+
bottom: 0;
|
|
147
|
+
height: max(var(--vwin-bottom), var(--vwin-bottom-floor));
|
|
148
|
+
background-color: var(--vwin-frame);
|
|
149
|
+
transform: translateY(var(--vwin-pan, 0px));
|
|
150
|
+
pointer-events: none;
|
|
151
|
+
z-index: 46;
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/* The grid: behind the content, the full height of the panel, whole cells
|
|
156
|
+
only. It scrolls with the page (a fixed grid would touch the bottom edge). */
|
|
157
|
+
.vwin-grid-area {
|
|
158
|
+
position: absolute;
|
|
159
|
+
top: calc(var(--vwin-bar-height) + 1px);
|
|
160
|
+
left: 15px;
|
|
161
|
+
right: 15px;
|
|
162
|
+
bottom: 25px;
|
|
163
|
+
display: flex;
|
|
164
|
+
justify-content: center;
|
|
165
|
+
align-items: flex-start;
|
|
166
|
+
pointer-events: none;
|
|
167
|
+
z-index: 0;
|
|
168
|
+
}
|
|
169
|
+
.vwin-grid {
|
|
170
|
+
flex: none;
|
|
171
|
+
width: 100%;
|
|
172
|
+
height: 100%;
|
|
173
|
+
background-image:
|
|
174
|
+
linear-gradient(to right, var(--vwin-grid-line) 1px, transparent 1px),
|
|
175
|
+
linear-gradient(to bottom, var(--vwin-grid-line) 1px, transparent 1px);
|
|
176
|
+
background-size: 32px 30px;
|
|
177
|
+
background-position: 0 0;
|
|
178
|
+
}
|
|
179
|
+
@supports (width: round(down, 100px, 32px)) {
|
|
180
|
+
.vwin-grid {
|
|
181
|
+
width: calc(round(down, 100% - 1px, 32px) + 1px);
|
|
182
|
+
height: calc(round(down, 100% - 1px, 30px) + 1px);
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
/* Phones: the grid runs edge to edge inside the window. A plain strip of field
|
|
186
|
+
beside a whole-cell grid read as a border down each side (Marcus,
|
|
187
|
+
2026-10-07). Cells start at the left edge, as the iOS launch screen tiles
|
|
188
|
+
them, so the launch hands off to the same grid. */
|
|
189
|
+
@media (width < 768px) {
|
|
190
|
+
.vwin-grid-area {
|
|
191
|
+
left: 0;
|
|
192
|
+
right: 0;
|
|
193
|
+
bottom: 0;
|
|
194
|
+
}
|
|
195
|
+
.vwin-grid {
|
|
196
|
+
width: 100%;
|
|
197
|
+
height: 100%;
|
|
198
|
+
background-position: 0 0;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* The page, in normal flow under the bar and over the grid. Positioned (after
|
|
203
|
+
the grid) so it paints above it, and so a page that fills the panel
|
|
204
|
+
(absolute inset-0: the auth boot shell, the logged-out view) fills at least
|
|
205
|
+
the viewport under the bar. */
|
|
206
|
+
.vwin-content {
|
|
207
|
+
position: relative;
|
|
208
|
+
flex: 1 0 auto;
|
|
209
|
+
/* The panel runs under the home indicator; the last content clears it. */
|
|
210
|
+
padding-bottom: ${SAFE_AREA_BOTTOM};
|
|
211
|
+
box-sizing: border-box;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
/* Phones: the window is fixed and its content scrolls inside it, the grid
|
|
215
|
+
holding still behind (the #6906 layout). Mobile Safari only paints the strip
|
|
216
|
+
under its floating toolbar solid when the document itself does not scroll;
|
|
217
|
+
then it takes the colour of the black foundation pinned to the bottom edge
|
|
218
|
+
(.vwin-frame::after), and the window rests on black with the address bar
|
|
219
|
+
floating on it (Chris, 2026-10-08). From 768px up the document scrolls. */
|
|
220
|
+
@media (width < 768px) {
|
|
221
|
+
html:has(.vwin-frame),
|
|
222
|
+
body:has(.vwin-frame) {
|
|
223
|
+
height: 100%;
|
|
224
|
+
overflow: hidden;
|
|
225
|
+
}
|
|
226
|
+
.vwin-frame {
|
|
227
|
+
position: fixed;
|
|
228
|
+
inset: 0;
|
|
229
|
+
min-height: 0;
|
|
230
|
+
padding-bottom: max(var(--vwin-bottom), var(--vwin-bottom-floor));
|
|
231
|
+
}
|
|
232
|
+
.vwin-panel {
|
|
233
|
+
flex: 1 1 auto;
|
|
234
|
+
min-height: 0;
|
|
235
|
+
}
|
|
236
|
+
.vwin-content {
|
|
237
|
+
position: absolute;
|
|
238
|
+
top: calc(var(--vwin-bar-height) + 1px);
|
|
239
|
+
left: 0;
|
|
240
|
+
right: 0;
|
|
241
|
+
bottom: 0;
|
|
242
|
+
padding-bottom: 0;
|
|
243
|
+
overflow-x: hidden;
|
|
244
|
+
overflow-y: auto;
|
|
245
|
+
overscroll-behavior: contain;
|
|
246
|
+
-webkit-overflow-scrolling: touch;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* The top chrome: a fixed black strip holding the bar. iOS 26 Safari colours
|
|
251
|
+
the status-bar strip from the fixed element pinned to the top edge; pinned
|
|
252
|
+
there itself, the bar turned it cream. The strip's black also shows in the
|
|
253
|
+
bar's rounded top corners, as the frame's did. */
|
|
254
|
+
.vwin-chrome {
|
|
255
|
+
position: fixed;
|
|
256
|
+
top: 0;
|
|
257
|
+
left: 0;
|
|
258
|
+
right: 0;
|
|
259
|
+
z-index: 40;
|
|
260
|
+
box-sizing: border-box;
|
|
261
|
+
padding: max(var(--vwin-top), ${SAFE_AREA_TOP}) max(var(--vwin-side), ${SAFE_AREA_RIGHT}) 0 max(var(--vwin-side), ${SAFE_AREA_LEFT});
|
|
262
|
+
background-color: var(--vwin-frame);
|
|
263
|
+
}
|
|
264
|
+
.vwin-chrome-bar {
|
|
265
|
+
position: relative;
|
|
266
|
+
border-radius: 12px 12px 0 0;
|
|
267
|
+
overflow: hidden;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
/* The bar: one real button, so a tap anywhere on it toggles the menu. */
|
|
271
|
+
.vwin-bar {
|
|
272
|
+
position: relative;
|
|
273
|
+
z-index: 40;
|
|
274
|
+
box-sizing: content-box;
|
|
275
|
+
display: flex;
|
|
276
|
+
align-items: center;
|
|
277
|
+
justify-content: space-between;
|
|
278
|
+
width: 100%;
|
|
279
|
+
height: var(--vwin-bar-height);
|
|
280
|
+
margin: 0;
|
|
281
|
+
padding: 0;
|
|
282
|
+
border: 0;
|
|
283
|
+
border-bottom: 1px solid var(--vwin-line);
|
|
284
|
+
background-color: var(--vwin-bar);
|
|
285
|
+
color: var(--vwin-cream);
|
|
286
|
+
font: inherit;
|
|
287
|
+
text-align: left;
|
|
288
|
+
cursor: pointer;
|
|
289
|
+
-webkit-tap-highlight-color: transparent;
|
|
290
|
+
overflow: hidden;
|
|
291
|
+
}
|
|
292
|
+
.vwin-bar:focus-visible {
|
|
293
|
+
outline: 3px solid var(--vwin-red);
|
|
294
|
+
outline-offset: -3px;
|
|
295
|
+
}
|
|
296
|
+
.vwin-pill {
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
height: 100%;
|
|
300
|
+
padding-left: 4px;
|
|
301
|
+
}
|
|
302
|
+
/* The pill's slide runs on the menu's clock (same 0.5s and closing curve), so
|
|
303
|
+
pill and menu read as one physical piece. Opening, its spring is a touch
|
|
304
|
+
softer than the menu's (1.25 vs 1.56): at the menu's full overshoot the
|
|
305
|
+
cream shape poked past the pill's black outline. */
|
|
306
|
+
.vwin-pill {
|
|
307
|
+
--vibes-switch-slide: 0.5s cubic-bezier(0.34, 1.25, 0.64, 1);
|
|
308
|
+
}
|
|
309
|
+
.vwin-frame[data-menu-phase="closing"] .vwin-pill,
|
|
310
|
+
.vwin-frame[data-menu-phase="closed"] .vwin-pill {
|
|
311
|
+
--vibes-switch-slide: 0.5s cubic-bezier(0.64, 0, 0.66, 0);
|
|
312
|
+
}
|
|
313
|
+
.vwin-pill svg {
|
|
314
|
+
position: relative;
|
|
315
|
+
/* The switch's viewBox carries headroom for its status ring; this centres the
|
|
316
|
+
drawn logo (not the svg box) on the bar. */
|
|
317
|
+
top: -8.5px;
|
|
318
|
+
pointer-events: none;
|
|
319
|
+
}
|
|
320
|
+
.vwin-menu-button {
|
|
321
|
+
display: flex;
|
|
322
|
+
align-items: center;
|
|
323
|
+
gap: 8px;
|
|
324
|
+
height: var(--vwin-bar-height);
|
|
325
|
+
padding: 0 16px 0 10px;
|
|
326
|
+
background-color: var(--vwin-red);
|
|
327
|
+
color: var(--vwin-cream);
|
|
328
|
+
flex-shrink: 0;
|
|
329
|
+
}
|
|
330
|
+
.vwin-gear {
|
|
331
|
+
display: flex;
|
|
332
|
+
width: 35px;
|
|
333
|
+
height: 35px;
|
|
334
|
+
transform-origin: 50% 50%;
|
|
335
|
+
}
|
|
336
|
+
.vwin-menu-label {
|
|
337
|
+
font-size: 14px;
|
|
338
|
+
font-weight: bold;
|
|
339
|
+
letter-spacing: 1.5px;
|
|
340
|
+
text-transform: uppercase;
|
|
341
|
+
white-space: nowrap;
|
|
342
|
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
|
|
343
|
+
color: var(--vwin-cream);
|
|
344
|
+
opacity: 1;
|
|
345
|
+
}
|
|
346
|
+
@media (hover: hover) {
|
|
347
|
+
.vwin-bar:hover .vwin-gear {
|
|
348
|
+
animation: vwin-wiggle 0.6s ease-in-out infinite;
|
|
349
|
+
}
|
|
350
|
+
}
|
|
351
|
+
.vwin-bar:active .vwin-menu-button {
|
|
352
|
+
animation: vwin-shake 0.3s ease-in-out;
|
|
353
|
+
}
|
|
354
|
+
@keyframes vwin-wiggle {
|
|
355
|
+
0%, 100% { transform: rotate(0deg); }
|
|
356
|
+
25% { transform: rotate(-5deg); }
|
|
357
|
+
75% { transform: rotate(5deg); }
|
|
358
|
+
}
|
|
359
|
+
@keyframes vwin-shake {
|
|
360
|
+
0%, 100% { transform: translateX(0); }
|
|
361
|
+
25% { transform: translateX(-3px); }
|
|
362
|
+
75% { transform: translateX(3px); }
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
/* The menu: an overlay under the bar and a panel sliding in from the right,
|
|
366
|
+
fixed from under the bar to the viewport bottom (touching the bottom edge
|
|
367
|
+
only while open is fine). The bar stays live above it, so the pill's own
|
|
368
|
+
slide plays and a header tap closes the menu the same way it opened it. */
|
|
369
|
+
.vwin-menu-layer {
|
|
370
|
+
position: fixed;
|
|
371
|
+
top: calc(max(var(--vwin-top), ${SAFE_AREA_TOP}) + var(--vwin-bar-height) + 1px);
|
|
372
|
+
left: max(var(--vwin-side), ${SAFE_AREA_LEFT});
|
|
373
|
+
right: max(var(--vwin-side), ${SAFE_AREA_RIGHT});
|
|
374
|
+
bottom: var(--vwin-bottom);
|
|
375
|
+
z-index: 45;
|
|
376
|
+
overflow: hidden;
|
|
377
|
+
}
|
|
378
|
+
.vwin-frame[data-menu-phase="closed"] .vwin-menu-layer {
|
|
379
|
+
visibility: hidden;
|
|
380
|
+
pointer-events: none;
|
|
381
|
+
}
|
|
382
|
+
.vwin-overlay {
|
|
383
|
+
position: absolute;
|
|
384
|
+
inset: 0;
|
|
385
|
+
background-color: rgba(0, 0, 0, 0.6);
|
|
386
|
+
animation: vwin-fade-in 0.3s ease-out;
|
|
387
|
+
}
|
|
388
|
+
.vwin-menu-panel {
|
|
389
|
+
position: absolute;
|
|
390
|
+
top: 0;
|
|
391
|
+
right: 0;
|
|
392
|
+
bottom: 0;
|
|
393
|
+
width: 400px;
|
|
394
|
+
max-width: 90%;
|
|
395
|
+
display: flex;
|
|
396
|
+
flex-direction: column;
|
|
397
|
+
box-sizing: border-box;
|
|
398
|
+
background-color: var(--vwin-menu-bg);
|
|
399
|
+
color: var(--vwin-menu-ink);
|
|
400
|
+
border-top: 8px solid var(--vwin-edge);
|
|
401
|
+
border-bottom: 8px solid var(--vwin-edge);
|
|
402
|
+
box-shadow: -8px 0 0 0 var(--vwin-edge);
|
|
403
|
+
animation: vwin-slide-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
404
|
+
outline: none;
|
|
405
|
+
overflow: hidden;
|
|
406
|
+
}
|
|
407
|
+
/* Focus lands on the panel itself when the menu opens (so the next Tab reaches
|
|
408
|
+
the first row); that programmatic focus draws no ring. Rows and buttons
|
|
409
|
+
inside keep their own focus-visible rings. */
|
|
410
|
+
.vwin-menu-panel:focus,
|
|
411
|
+
.vwin-menu-panel:focus-visible {
|
|
412
|
+
outline: none;
|
|
413
|
+
}
|
|
414
|
+
.vwin-frame[data-menu-phase="closing"] .vwin-overlay {
|
|
415
|
+
animation: vwin-fade-out 0.3s ease-out forwards;
|
|
416
|
+
}
|
|
417
|
+
.vwin-frame[data-menu-phase="closing"] .vwin-menu-panel {
|
|
418
|
+
animation: vwin-slide-out 0.5s cubic-bezier(0.64, 0, 0.66, 0) forwards;
|
|
419
|
+
}
|
|
420
|
+
.vwin-frame[data-menu-phase="closed"] .vwin-overlay,
|
|
421
|
+
.vwin-frame[data-menu-phase="closed"] .vwin-menu-panel {
|
|
422
|
+
animation: none;
|
|
423
|
+
}
|
|
424
|
+
@keyframes vwin-fade-in { from { opacity: 0; } to { opacity: 1; } }
|
|
425
|
+
@keyframes vwin-fade-out { from { opacity: 1; } to { opacity: 0; } }
|
|
426
|
+
@keyframes vwin-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
|
|
427
|
+
@keyframes vwin-slide-out { from { transform: translateX(0); } to { transform: translateX(calc(100% + 8px)); } }
|
|
428
|
+
|
|
429
|
+
@media (prefers-reduced-motion: reduce) {
|
|
430
|
+
.vwin-pill,
|
|
431
|
+
.vwin-frame .vwin-pill {
|
|
432
|
+
--vibes-switch-slide: 0s;
|
|
433
|
+
}
|
|
434
|
+
.vwin-bar:hover .vwin-gear,
|
|
435
|
+
.vwin-bar:active .vwin-menu-button,
|
|
436
|
+
.vwin-overlay,
|
|
437
|
+
.vwin-menu-panel {
|
|
438
|
+
animation: none !important;
|
|
439
|
+
}
|
|
440
|
+
/* No slide to wait out: a closing menu is simply gone. */
|
|
441
|
+
.vwin-frame[data-menu-phase="closing"] .vwin-menu-layer {
|
|
442
|
+
visibility: hidden;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
`;
|
|
446
|
+
//# sourceMappingURL=VibesWindowFrame.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VibesWindowFrame.styles.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowFrame.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAgDzG,MAAM,WAAW,GAAG;;;;;;;;CAQnB,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;yBAuBP,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;sBAyBnB,gBAAgB;;;;4CAIM,WAAW;;mCAEpB,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCA+BZ,aAAa,2BAA2B,eAAe;4BAC7D,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;8BA4BZ,aAAa;gCACX,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAmF5B,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kCAmDF,aAAa,2BAA2B,eAAe,6BAA6B,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mCA8GjG,aAAa;gCAChB,cAAc;iCACb,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE/C,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export declare function VibesWindowStyles(): React.JSX.Element;
|
|
3
|
+
export declare function VibesWindowGear({ size }: {
|
|
4
|
+
size?: number;
|
|
5
|
+
}): React.JSX.Element;
|
|
6
|
+
export interface VibesWindowHeaderProps {
|
|
7
|
+
isOpen: boolean;
|
|
8
|
+
onToggle: () => void;
|
|
9
|
+
controlsId: string;
|
|
10
|
+
label?: string;
|
|
11
|
+
scheme?: "light" | "dark";
|
|
12
|
+
ovalColor?: string;
|
|
13
|
+
ovalStatusKey?: string | number;
|
|
14
|
+
isTwinkling?: boolean;
|
|
15
|
+
buttonRef?: React.Ref<HTMLButtonElement>;
|
|
16
|
+
withStyles?: boolean;
|
|
17
|
+
onIntent?: () => void;
|
|
18
|
+
}
|
|
19
|
+
export declare function VibesWindowHeader({ isOpen, onToggle, controlsId, label, scheme, ovalColor, ovalStatusKey, isTwinkling, buttonRef, withStyles, onIntent, }: VibesWindowHeaderProps): React.JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { VibesSwitch } from "./VibesSwitch.js";
|
|
3
|
+
import { VIBES_WINDOW_CSS } from "./VibesWindowFrame.styles.js";
|
|
4
|
+
export function VibesWindowStyles() {
|
|
5
|
+
return React.createElement("style", null, VIBES_WINDOW_CSS);
|
|
6
|
+
}
|
|
7
|
+
export function VibesWindowGear({ size = 35 }) {
|
|
8
|
+
return (React.createElement("svg", { width: size, height: size, viewBox: "0 0 44 44", fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" },
|
|
9
|
+
React.createElement("circle", { cx: "22", cy: "22", r: "22", fill: "var(--vwin-gear-disc, #231f20)" }),
|
|
10
|
+
React.createElement("path", { fill: "var(--vwin-cream, #fffff0)", d: "M21.894 26.925C22.816 26.925 23.656 26.699 24.418 26.246C25.176 25.797 25.785 25.187 26.242 24.422C26.695 23.66 26.926 22.816 26.926 21.894C26.926 20.972 26.695 20.129 26.242 19.363C25.785 18.601 25.176 17.992 24.418 17.543C23.656 17.09 22.816 16.863 21.894 16.863C20.965 16.863 20.117 17.09 19.359 17.543C18.598 17.992 17.992 18.601 17.543 19.363C17.09 20.129 16.867 20.972 16.867 21.894C16.867 22.816 17.09 23.66 17.543 24.422C17.992 25.187 18.598 25.797 19.359 26.246C20.117 26.699 20.965 26.925 21.894 26.925ZM20.582 36.785C20.215 36.785 19.902 36.683 19.648 36.48C19.398 36.273 19.226 35.988 19.129 35.617L18.3911 32.48C18.1131 32.386 17.844 32.285 17.578 32.183C17.312 32.078 17.059 31.968 16.82 31.855L14.0861 33.535C13.7731 33.726 13.4531 33.804 13.1251 33.777C12.7971 33.75 12.5041 33.609 12.2501 33.351L10.426 31.527C10.168 31.269 10.023 30.972 9.992 30.629C9.957 30.285 10.043 29.965 10.254 29.66L11.9221 26.937C11.8051 26.691 11.6951 26.441 11.5941 26.183C11.4881 25.925 11.398 25.672 11.32 25.414L8.16003 24.66C7.78903 24.574 7.50405 24.406 7.30505 24.152C7.10505 23.902 7.00403 23.59 7.00403 23.218V20.64C7.00403 20.281 7.10505 19.972 7.30505 19.722C7.50405 19.468 7.78903 19.301 8.16003 19.215L11.293 18.461C11.379 18.164 11.4761 17.89 11.5861 17.633C11.6951 17.379 11.7971 17.136 11.8911 16.906L10.223 14.144C10.023 13.828 9.93706 13.511 9.96106 13.187C9.98406 12.867 10.129 12.5739 10.394 12.3199L12.2501 10.48C12.5041 10.222 12.789 10.078 13.101 10.039C13.418 10 13.73 10.078 14.043 10.269L16.809 11.976C17.043 11.855 17.301 11.738 17.57 11.629C17.84 11.519 18.1131 11.4179 18.3911 11.3199L19.129 8.172C19.226 7.812 19.398 7.52695 19.648 7.31995C19.902 7.10895 20.215 7.00397 20.582 7.00397H23.207C23.578 7.00397 23.8871 7.10895 24.1411 7.31995C24.3911 7.52695 24.559 7.812 24.644 8.172L25.387 11.351C25.68 11.445 25.9571 11.5429 26.2191 11.6479C26.4801 11.7539 26.726 11.867 26.953 11.992L29.746 10.269C30.051 10.078 30.3551 10.008 30.6641 10.054C30.9731 10.101 31.262 10.242 31.527 10.48L33.394 12.3199C33.66 12.5739 33.801 12.867 33.82 13.187C33.84 13.511 33.754 13.828 33.566 14.144L31.8831 16.906C31.9761 17.136 32.082 17.379 32.191 17.633C32.297 17.89 32.402 18.164 32.496 18.461L35.629 19.215C35.992 19.301 36.273 19.468 36.476 19.722C36.683 19.972 36.785 20.281 36.785 20.64V23.218C36.785 23.59 36.683 23.902 36.476 24.152C36.273 24.406 35.992 24.574 35.629 24.66L32.4691 25.414C32.3831 25.672 32.289 25.925 32.191 26.183C32.09 26.441 31.976 26.691 31.855 26.937L33.535 29.66C33.746 29.965 33.832 30.285 33.801 30.629C33.766 30.972 33.621 31.269 33.367 31.527L31.527 33.351C31.269 33.609 30.976 33.75 30.652 33.777C30.324 33.804 30.008 33.726 29.703 33.535L26.953 31.855C26.715 31.968 26.465 32.078 26.199 32.183C25.933 32.285 25.66 32.386 25.387 32.48L24.644 35.617C24.559 35.988 24.3911 36.273 24.1411 36.48C23.8871 36.683 23.578 36.785 23.207 36.785H20.582Z" })));
|
|
11
|
+
}
|
|
12
|
+
export function VibesWindowHeader({ isOpen, onToggle, controlsId, label = "MENU", scheme, ovalColor, ovalStatusKey, isTwinkling, buttonRef, withStyles = true, onIntent, }) {
|
|
13
|
+
return (React.createElement(React.Fragment, null,
|
|
14
|
+
withStyles && React.createElement(VibesWindowStyles, null),
|
|
15
|
+
React.createElement("button", { ref: buttonRef, type: "button", className: "vwin-scope vwin-bar", "data-scheme": scheme, "data-testid": "window-bar", "aria-expanded": isOpen, "aria-controls": controlsId, onClick: onToggle, onPointerEnter: onIntent, onPointerDown: onIntent, onFocus: onIntent },
|
|
16
|
+
React.createElement("span", { className: "vwin-pill", "data-window-pill": true, "aria-hidden": "true" },
|
|
17
|
+
React.createElement(VibesSwitch, { size: 54, isActive: isOpen, ovalColor: ovalColor, ovalStatusKey: ovalStatusKey, isTwinkling: isTwinkling, style: { pointerEvents: "none" } })),
|
|
18
|
+
React.createElement("span", { className: "vwin-menu-button" },
|
|
19
|
+
React.createElement("span", { className: "vwin-gear" },
|
|
20
|
+
React.createElement(VibesWindowGear, null)),
|
|
21
|
+
React.createElement("span", { className: "vwin-menu-label" }, label)))));
|
|
22
|
+
}
|
|
23
|
+
//# sourceMappingURL=VibesWindowHeader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VibesWindowHeader.js","sourceRoot":"","sources":["../../jsr/components/VibesWindowHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAQhE,MAAM,UAAU,iBAAiB;IAC/B,OAAO,mCAAQ,gBAAgB,CAAS,CAAC;AAC3C,CAAC;AAID,MAAM,UAAU,eAAe,CAAC,EAAE,IAAI,GAAG,EAAE,EAAqB;IAC9D,OAAO,CACL,6BAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,iBAAa,MAAM;QACnH,gCAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,gCAAgC,GAAG;QACvE,8BACE,IAAI,EAAC,4BAA4B,EACjC,CAAC,EAAC,w0FAAw0F,GAC10F,CACE,CACP,CAAC;AACJ,CAAC;AAkCD,MAAM,UAAU,iBAAiB,CAAC,EAChC,MAAM,EACN,QAAQ,EACR,UAAU,EACV,KAAK,GAAG,MAAM,EACd,MAAM,EACN,SAAS,EACT,aAAa,EACb,WAAW,EACX,SAAS,EACT,UAAU,GAAG,IAAI,EACjB,QAAQ,GACe;IACvB,OAAO,CACL;QACG,UAAU,IAAI,oBAAC,iBAAiB,OAAG;QACpC,gCACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qBAAqB,iBAClB,MAAM,iBACP,YAAY,mBACT,MAAM,mBACN,UAAU,EACzB,OAAO,EAAE,QAAQ,EACjB,cAAc,EAAE,QAAQ,EACxB,aAAa,EAAE,QAAQ,EACvB,OAAO,EAAE,QAAQ;YAEjB,8BAAM,SAAS,EAAC,WAAW,2CAA8B,MAAM;gBAC7D,oBAAC,WAAW,IACV,IAAI,EAAE,EAAE,EACR,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,GAChC,CACG;YACP,8BAAM,SAAS,EAAC,kBAAkB;gBAChC,8BAAM,SAAS,EAAC,WAAW;oBACzB,oBAAC,eAAe,OAAG,CACd;gBACP,8BAAM,SAAS,EAAC,iBAAiB,IAAE,KAAK,CAAQ,CAC3C,CACA,CACR,CACJ,CAAC;AACJ,CAAC"}
|
package/components/index.d.ts
CHANGED
|
@@ -35,3 +35,6 @@ export * from "./editor-tabs.js";
|
|
|
35
35
|
export * from "./ShareLinkView.js";
|
|
36
36
|
export * from "./PublishBanner.js";
|
|
37
37
|
export * from "./vibe-menu/index.js";
|
|
38
|
+
export * from "./VibesWindowFrame.styles.js";
|
|
39
|
+
export * from "./VibesWindowHeader.js";
|
|
40
|
+
export * from "./VibesWindowFrame.js";
|
package/components/index.js
CHANGED
|
@@ -35,4 +35,7 @@ export * from "./editor-tabs.js";
|
|
|
35
35
|
export * from "./ShareLinkView.js";
|
|
36
36
|
export * from "./PublishBanner.js";
|
|
37
37
|
export * from "./vibe-menu/index.js";
|
|
38
|
+
export * from "./VibesWindowFrame.styles.js";
|
|
39
|
+
export * from "./VibesWindowHeader.js";
|
|
40
|
+
export * from "./VibesWindowFrame.js";
|
|
38
41
|
//# sourceMappingURL=index.js.map
|
package/components/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,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.87",
|
|
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.87",
|
|
14
|
+
"@vibes.diy/use-vibes-types": "14.3.87",
|
|
15
|
+
"@vibes.diy/vibe-runtime": "14.3.87",
|
|
16
|
+
"@vibes.diy/vibe-types": "14.3.87",
|
|
17
17
|
"arktype": "~2.2.6",
|
|
18
18
|
"officeparser": "~8.0.0",
|
|
19
19
|
"qrcode-generator": "~2.0.4",
|