@vibes.diy/base 14.3.78 → 14.3.80
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/ImgGen.d.ts +3 -2
- package/components/ImgGen.js +18 -3
- package/components/ImgGen.js.map +1 -1
- package/components/OnboardingOverlay.d.ts +4 -4
- package/components/OnboardingOverlay.js +11 -37
- package/components/OnboardingOverlay.js.map +1 -1
- package/components/vibe-menu/cards/CodeCard.d.ts +1 -1
- package/components/vibe-menu/geometry.d.ts +1 -0
- package/components/vibe-menu/geometry.js +1 -0
- package/components/vibe-menu/geometry.js.map +1 -1
- package/components/vibe-menu/parts/SurveyStrip.d.ts +4 -2
- package/components/vibe-menu/parts/SurveyStrip.js +34 -16
- package/components/vibe-menu/parts/SurveyStrip.js.map +1 -1
- package/components/vibe-menu/shell/shell.styles.js +9 -3
- package/components/vibe-menu/shell/shell.styles.js.map +1 -1
- package/package.json +4 -4
package/components/ImgGen.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type ConfirmedMediaProbe, type Database } from "@vibes.diy/vibe-runtime";
|
|
3
3
|
import type { ImgGenInputImage, ImgGenRequestOptions, ImgGenResult } from "@vibes.diy/vibe-types";
|
|
4
4
|
import type { Result } from "@adviser/cement";
|
|
5
5
|
import { type UseFireproofHook } from "../hooks/img-gen/use-img-gen.js";
|
|
@@ -20,5 +20,6 @@ export interface ImgGenProps {
|
|
|
20
20
|
confirmedMediaProbe?: ConfirmedMediaProbe | null;
|
|
21
21
|
pictures?: PictureStore | null;
|
|
22
22
|
localFileUrl?: LocalFileUrl | null;
|
|
23
|
+
captureRender?: boolean;
|
|
23
24
|
}
|
|
24
|
-
export declare function ImgGen({ prompt, _id: propId, images, database, className, alt, style, showControls, model, imgGen, useFireproof, confirmedMediaProbe, pictures: picturesProp, localFileUrl, }: ImgGenProps): React.JSX.Element;
|
|
25
|
+
export declare function ImgGen({ prompt, _id: propId, images, database, className, alt, style, showControls, model, imgGen, useFireproof, confirmedMediaProbe, pictures: picturesProp, localFileUrl, captureRender: captureRenderProp, }: ImgGenProps): React.JSX.Element;
|
package/components/ImgGen.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import React, { useState, useCallback, useMemo } from "react";
|
|
2
|
+
import { getRegisteredVibeApi } from "@vibes.diy/vibe-runtime";
|
|
3
|
+
import { isCaptureRefused } from "@vibes.diy/vibe-types";
|
|
2
4
|
import { useImgGen } from "../hooks/img-gen/use-img-gen.js";
|
|
3
5
|
import { usePictureSrc } from "../hooks/img-gen/use-picture-src.js";
|
|
4
6
|
import { registeredPictureStore } from "../hooks/img-gen/local-pictures.js";
|
|
@@ -10,7 +12,7 @@ function promptToId(prompt) {
|
|
|
10
12
|
}
|
|
11
13
|
return `img-${(hash >>> 0).toString(36)}`;
|
|
12
14
|
}
|
|
13
|
-
export function ImgGen({ prompt, _id: propId, images, database, className, alt, style, showControls = true, model, imgGen, useFireproof, confirmedMediaProbe, pictures: picturesProp, localFileUrl, }) {
|
|
15
|
+
export function ImgGen({ prompt, _id: propId, images, database, className, alt, style, showControls = true, model, imgGen, useFireproof, confirmedMediaProbe, pictures: picturesProp, localFileUrl, captureRender: captureRenderProp, }) {
|
|
14
16
|
const pictures = picturesProp === undefined ? registeredPictureStore() : (picturesProp ?? undefined);
|
|
15
17
|
const inputImage = images?.[0];
|
|
16
18
|
const imageKey = inputImage
|
|
@@ -78,6 +80,12 @@ export function ImgGen({ prompt, _id: propId, images, database, className, alt,
|
|
|
78
80
|
if (!prompt && !stableId) {
|
|
79
81
|
return (React.createElement("div", { className: className, style: { padding: 20, textAlign: "center", color: "#888" } }, "No prompt provided"));
|
|
80
82
|
}
|
|
83
|
+
const captureRefused = isCaptureRefused(error);
|
|
84
|
+
const inCapture = captureRefused || (captureRenderProp ?? getRegisteredVibeApi()?.svc.vibeApp.captureRender === true);
|
|
85
|
+
if (captureRefused && !hasExistingImage) {
|
|
86
|
+
return (React.createElement("div", { className: className, "data-imggen-capture-placeholder": true, role: "img", "aria-label": alt ?? prompt ?? "", style: capturePlaceholderStyle },
|
|
87
|
+
React.createElement("div", { style: { fontSize: 14 } }, prompt)));
|
|
88
|
+
}
|
|
81
89
|
if (error && !hasExistingImage) {
|
|
82
90
|
return (React.createElement("div", { className: className, style: { padding: 20, textAlign: "center", color: "#e53e3e" } },
|
|
83
91
|
React.createElement("strong", null, "Error"),
|
|
@@ -123,7 +131,7 @@ export function ImgGen({ prompt, _id: propId, images, database, className, alt,
|
|
|
123
131
|
backgroundColor: "#0074d9",
|
|
124
132
|
transition: "width 0.5s ease-out",
|
|
125
133
|
} }))),
|
|
126
|
-
error && (React.createElement("div", { title: error.message, style: {
|
|
134
|
+
error && !captureRefused && (React.createElement("div", { title: error.message, style: {
|
|
127
135
|
position: "absolute",
|
|
128
136
|
top: 10,
|
|
129
137
|
right: 10,
|
|
@@ -156,7 +164,7 @@ export function ImgGen({ prompt, _id: propId, images, database, className, alt,
|
|
|
156
164
|
"/",
|
|
157
165
|
versions.length),
|
|
158
166
|
React.createElement("button", { onClick: handleNext, disabled: currentVersion >= versions.length - 1, style: btnStyle, title: "Next version" }, "\u203A"))),
|
|
159
|
-
React.createElement("button", { onClick: handleTapGeneration, disabled: loading, style: btnStyle, title: "Regenerate" }, "\u21BB")))));
|
|
167
|
+
inCapture === false && (React.createElement("button", { onClick: handleTapGeneration, disabled: loading, style: btnStyle, title: "Regenerate" }, "\u21BB"))))));
|
|
160
168
|
}
|
|
161
169
|
const btnStyle = {
|
|
162
170
|
background: "rgba(0,0,0,0.6)",
|
|
@@ -168,6 +176,13 @@ const btnStyle = {
|
|
|
168
176
|
cursor: "pointer",
|
|
169
177
|
lineHeight: 1,
|
|
170
178
|
};
|
|
179
|
+
const capturePlaceholderStyle = {
|
|
180
|
+
padding: 20,
|
|
181
|
+
textAlign: "center",
|
|
182
|
+
color: "#888",
|
|
183
|
+
background: "rgba(128, 128, 128, 0.08)",
|
|
184
|
+
borderRadius: 8,
|
|
185
|
+
};
|
|
171
186
|
const playgroundBtnStyle = {
|
|
172
187
|
...btnStyle,
|
|
173
188
|
background: "#111",
|
package/components/ImgGen.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImgGen.js","sourceRoot":"","sources":["../../jsr/components/ImgGen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ImgGen.js","sourceRoot":"","sources":["../../jsr/components/ImgGen.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
declare const ALL_STEPS: readonly ["handle", "avatar"
|
|
2
|
+
declare const ALL_STEPS: readonly ["handle", "avatar"];
|
|
3
3
|
export type OnboardingStep = (typeof ALL_STEPS)[number];
|
|
4
|
-
export declare function onboardingSteps(includeHandleStep: boolean): readonly OnboardingStep[];
|
|
4
|
+
export declare function onboardingSteps(includeHandleStep: boolean, includeAvatarStep?: boolean): readonly OnboardingStep[];
|
|
5
5
|
export interface OnboardingOverlayProps {
|
|
6
6
|
readonly placeholder: string;
|
|
7
7
|
readonly wordSlugCandidates: readonly string[];
|
|
@@ -11,13 +11,13 @@ export interface OnboardingOverlayProps {
|
|
|
11
11
|
readonly busy?: boolean;
|
|
12
12
|
readonly onConfirmHandle: (handle: string) => Promise<boolean>;
|
|
13
13
|
readonly avatarSlot?: React.ReactNode;
|
|
14
|
-
readonly onSetSharingIntent: (intent: "private") => Promise<boolean>;
|
|
15
14
|
readonly appState?: "building" | "revealed" | "ready";
|
|
16
15
|
readonly onViewApp?: () => void;
|
|
17
16
|
readonly onFinish: () => void;
|
|
18
17
|
readonly onSkip: () => void;
|
|
19
18
|
readonly onStepShown?: (step: OnboardingStep) => void;
|
|
20
19
|
readonly includeHandleStep?: boolean;
|
|
20
|
+
readonly includeAvatarStep?: boolean;
|
|
21
21
|
}
|
|
22
|
-
export declare function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot,
|
|
22
|
+
export declare function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot, appState, onViewApp, onFinish, onSkip, onStepShown, includeHandleStep, includeAvatarStep, }: OnboardingOverlayProps): React.ReactElement;
|
|
23
23
|
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
2
|
import { HandleChooserPanel, OverlayCardShell, PanelButtons } from "./HandleChooser.js";
|
|
3
|
-
const ALL_STEPS = ["handle", "avatar"
|
|
4
|
-
export function onboardingSteps(includeHandleStep) {
|
|
5
|
-
return
|
|
3
|
+
const ALL_STEPS = ["handle", "avatar"];
|
|
4
|
+
export function onboardingSteps(includeHandleStep, includeAvatarStep = true) {
|
|
5
|
+
return ALL_STEPS.filter((s) => (s !== "handle" || includeHandleStep) && (s !== "avatar" || includeAvatarStep));
|
|
6
6
|
}
|
|
7
|
-
export function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot,
|
|
7
|
+
export function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSuggestions, onRefreshCandidates, refreshing, busy, onConfirmHandle, avatarSlot, appState, onViewApp, onFinish, onSkip, onStepShown, includeHandleStep = true, includeAvatarStep = true, }) {
|
|
8
8
|
const [stepIndex, setStepIndex] = useState(0);
|
|
9
|
-
const [steps] = useState(() => onboardingSteps(includeHandleStep));
|
|
9
|
+
const [steps, setSteps] = useState(() => onboardingSteps(includeHandleStep, includeAvatarStep));
|
|
10
10
|
const step = steps[stepIndex];
|
|
11
11
|
const advance = () => setStepIndex((i) => Math.min(i + 1, steps.length));
|
|
12
12
|
useEffect(() => {
|
|
@@ -23,11 +23,13 @@ export function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSugges
|
|
|
23
23
|
return;
|
|
24
24
|
}
|
|
25
25
|
return onConfirmHandle(sanitized).then((ok) => {
|
|
26
|
-
if (ok)
|
|
27
|
-
|
|
26
|
+
if (!ok)
|
|
27
|
+
return;
|
|
28
|
+
setSteps(onboardingSteps(includeHandleStep, true));
|
|
29
|
+
advance();
|
|
28
30
|
});
|
|
29
31
|
};
|
|
30
|
-
return (React.createElement(OverlayCardShell, { ariaLabel: "Set up your handle
|
|
32
|
+
return (React.createElement(OverlayCardShell, { ariaLabel: "Set up your handle and avatar", headerLeft: `Step ${Math.min(stepIndex + 1, steps.length)} of ${steps.length} · while your app builds`, dismissLabel: "Skip onboarding", onDismiss: onSkip },
|
|
31
33
|
(appState === "revealed" || appState === "ready") && (React.createElement("button", { type: "button", onClick: onViewApp ?? onFinish, style: {
|
|
32
34
|
width: "100%",
|
|
33
35
|
marginBottom: 12,
|
|
@@ -41,8 +43,7 @@ export function OnboardingOverlay({ placeholder, wordSlugCandidates, clerkSugges
|
|
|
41
43
|
fontSize: 13,
|
|
42
44
|
} }, appState === "ready" ? "Your app is ready — take a look →" : "Your app is taking shape — take a look →")),
|
|
43
45
|
step === "handle" && (React.createElement(HandleChooserPanel, { draftInitial: placeholder, inputPlaceholder: placeholder, subtitle: "This is the publisher name your apps are credited to \u2014 the jchris in jchris/todo-live. You can keep the one we picked, and add more handles later.", wordSlugCandidates: wordSlugCandidates, clerkSuggestions: clerkSuggestions, onRefreshCandidates: onRefreshCandidates, refreshing: refreshing, busy: busy, onConfirm: confirmHandle, onSkip: advance })),
|
|
44
|
-
step === "avatar" && React.createElement(AvatarStep, { avatarSlot: avatarSlot, busy: busy, onDone: advance, onSkip: advance })
|
|
45
|
-
step === "sharing" && (React.createElement(SharingStep, { busy: busy, onSetSharingIntent: onSetSharingIntent, onDone: onFinish, onSkip: onFinish }))));
|
|
46
|
+
step === "avatar" && React.createElement(AvatarStep, { avatarSlot: avatarSlot, busy: busy, onDone: advance, onSkip: advance })));
|
|
46
47
|
}
|
|
47
48
|
function AvatarStep({ avatarSlot, busy, onDone, onSkip, }) {
|
|
48
49
|
return (React.createElement("div", null,
|
|
@@ -51,31 +52,4 @@ function AvatarStep({ avatarSlot, busy, onDone, onSkip, }) {
|
|
|
51
52
|
React.createElement("div", { style: { marginBottom: 12 } }, avatarSlot),
|
|
52
53
|
React.createElement(PanelButtons, { primary: "Done", disabled: busy, onPrimary: onDone, onSkip: onSkip })));
|
|
53
54
|
}
|
|
54
|
-
function SharingStep({ busy, onSetSharingIntent, onDone, onSkip, }) {
|
|
55
|
-
const [choice, setChoice] = useState("followers");
|
|
56
|
-
const [saving, setSaving] = useState(false);
|
|
57
|
-
const disabled = busy || saving;
|
|
58
|
-
const done = async () => {
|
|
59
|
-
if (choice === "followers") {
|
|
60
|
-
onDone();
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
setSaving(true);
|
|
64
|
-
const ok = await onSetSharingIntent("private");
|
|
65
|
-
setSaving(false);
|
|
66
|
-
if (ok)
|
|
67
|
-
onDone();
|
|
68
|
-
};
|
|
69
|
-
return (React.createElement("div", null,
|
|
70
|
-
React.createElement("div", { style: { fontSize: 15, fontWeight: 700, marginBottom: 2 } }, "Choose how you share"),
|
|
71
|
-
React.createElement("div", { className: "text-light-secondary dark:text-dark-secondary", style: { fontSize: 12, marginBottom: 12 } }, "This controls in-app activity sharing, not app publishing or who may follow you."),
|
|
72
|
-
React.createElement("fieldset", { style: { border: 0, padding: 0, margin: "0 0 12px" } },
|
|
73
|
-
React.createElement("label", { style: { display: "flex", gap: 8, alignItems: "flex-start", marginBottom: 10, cursor: disabled ? "default" : "pointer" } },
|
|
74
|
-
React.createElement("input", { type: "radio", name: "onboarding-sharing", value: "followers", checked: choice === "followers", disabled: disabled, onChange: () => setChoice("followers") }),
|
|
75
|
-
React.createElement("span", { style: { fontSize: 13, fontWeight: 600 } }, "Followers can see your activity in apps")),
|
|
76
|
-
React.createElement("label", { style: { display: "flex", gap: 8, alignItems: "flex-start", cursor: disabled ? "default" : "pointer" } },
|
|
77
|
-
React.createElement("input", { type: "radio", name: "onboarding-sharing", value: "private", checked: choice === "private", disabled: disabled, onChange: () => setChoice("private") }),
|
|
78
|
-
React.createElement("span", { style: { fontSize: 13, fontWeight: 600 } }, "Keep everything private"))),
|
|
79
|
-
React.createElement(PanelButtons, { primary: saving ? "Saving…" : "Finish", disabled: disabled, onPrimary: () => void done(), onSkip: onSkip })));
|
|
80
|
-
}
|
|
81
55
|
//# sourceMappingURL=OnboardingOverlay.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OnboardingOverlay.js","sourceRoot":"","sources":["../../jsr/components/OnboardingOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"OnboardingOverlay.js","sourceRoot":"","sources":["../../jsr/components/OnboardingOverlay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ export declare const CODE_DRILL_TITLES: Readonly<{
|
|
|
6
6
|
readonly details: "App details";
|
|
7
7
|
readonly help: "Help";
|
|
8
8
|
}>;
|
|
9
|
-
export declare const CODE_CARD_CSS = "\n[data-vibe-menu] .vm-code .vm-moments { margin-bottom: var(--space-14); }\n[data-vibe-menu] .vm-code .vm-suggestions { margin-bottom: var(--space-14); }\n[data-vibe-menu] .vm-codemode { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }\n[data-vibe-menu] .vm-codemode[data-fill] { flex: 1 1 auto; }\n/* The pinned top (kicker, composer, moment) keeps to half the Code mode card\n (80cqh) and scrolls on its own past that, so on a short frame (phone\n landscape) a multi-line composer stays reachable and the tab strip stays in\n the card. At normal sizes it never reaches the cap: only the tab body scrolls. */\n[data-vibe-menu] .vm-codemode-top { flex: none; max-height: 40cqh; overflow-y: auto; overscroll-behavior: contain; }\n[data-vibe-menu] .vm-codemode .vm-composer,\n[data-vibe-menu] .vm-codemode .vm-moments { margin-bottom: 10px; }\n\n/* Its own container: the aside steps out when the strip itself is narrow, on any host. */\n[data-vibe-menu] .vm-survey { margin: 0 0 var(--space-14); container: vm-survey / inline-size; }\n/* Code mode's card is wide and its pinned top is capped: the strip keeps the card-sized tiles. */\n[data-vibe-menu] .vm-codemode .vm-survey { margin-bottom: 10px; max-width: 420px; }\n[data-vibe-menu] .vm-survey-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-title { font: 600 15px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-aside { font: 400 12px/1.3 var(--font-display); color: var(--muted); white-space: nowrap; }\n[data-vibe-menu] .vm-survey-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }\n/* Three readings keep the four-up tile size: the missing tile's column stays empty. */\n[data-vibe-menu] .vm-survey-strip[data-count=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: calc((100% - 24px) / 4 + 8px); }\n[data-vibe-menu] .vm-survey-tile { position: relative; padding: 0; aspect-ratio: 1; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-switch); overflow: hidden; background: var(--card-bg); cursor: pointer; }\n[data-vibe-menu] .vm-survey-tile[data-on=\"true\"] { outline: var(--stroke-focus) solid var(--accent); outline-offset: 2px; }\n[data-vibe-menu] .vm-survey-tile[aria-disabled=\"true\"] { cursor: default; }\n[data-vibe-menu] .vm-survey[data-picked] .vm-survey-tile:not([data-on=\"true\"]) { opacity: 0.35; }\n[data-vibe-menu] .vm-survey-art { display: block; width: 100%; height: 100%; object-fit: cover; }\n[data-vibe-menu] .vm-survey-
|
|
9
|
+
export declare const CODE_CARD_CSS = "\n[data-vibe-menu] .vm-code .vm-moments { margin-bottom: var(--space-14); }\n[data-vibe-menu] .vm-code .vm-suggestions { margin-bottom: var(--space-14); }\n[data-vibe-menu] .vm-codemode { display: flex; flex-direction: column; flex: 0 0 auto; min-height: 0; }\n[data-vibe-menu] .vm-codemode[data-fill] { flex: 1 1 auto; }\n/* The pinned top (kicker, composer, moment) keeps to half the Code mode card\n (80cqh) and scrolls on its own past that, so on a short frame (phone\n landscape) a multi-line composer stays reachable and the tab strip stays in\n the card. At normal sizes it never reaches the cap: only the tab body scrolls. */\n[data-vibe-menu] .vm-codemode-top { flex: none; max-height: 40cqh; overflow-y: auto; overscroll-behavior: contain; }\n[data-vibe-menu] .vm-codemode .vm-composer,\n[data-vibe-menu] .vm-codemode .vm-moments { margin-bottom: 10px; }\n\n/* Its own container: the aside steps out when the strip itself is narrow, on any host. */\n[data-vibe-menu] .vm-survey { margin: 0 0 var(--space-14); container: vm-survey / inline-size; }\n/* Code mode's card is wide and its pinned top is capped: the strip keeps the card-sized tiles. */\n[data-vibe-menu] .vm-codemode .vm-survey { margin-bottom: 10px; max-width: 420px; }\n[data-vibe-menu] .vm-survey-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-title { font: 600 15px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-aside { font: 400 12px/1.3 var(--font-display); color: var(--muted); white-space: nowrap; }\n[data-vibe-menu] .vm-survey-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }\n/* Three readings keep the four-up tile size: the missing tile's column stays empty. */\n[data-vibe-menu] .vm-survey-strip[data-count=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: calc((100% - 24px) / 4 + 8px); }\n[data-vibe-menu] .vm-survey-tile { position: relative; padding: 0; aspect-ratio: 1; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-switch); overflow: hidden; background: var(--card-bg); cursor: pointer; }\n[data-vibe-menu] .vm-survey-tile[data-on=\"true\"] { outline: var(--stroke-focus) solid var(--accent); outline-offset: 2px; }\n[data-vibe-menu] .vm-survey-tile[aria-disabled=\"true\"] { cursor: default; }\n[data-vibe-menu] .vm-survey[data-picked] .vm-survey-tile:not([data-on=\"true\"]) { opacity: 0.35; }\n[data-vibe-menu] .vm-survey-art { display: block; width: 100%; height: 100%; object-fit: cover; }\n[data-vibe-menu] .vm-survey-foot { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-10); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-text { flex: 1 1 auto; min-width: 0; }\n[data-vibe-menu] .vm-survey-label { font: 700 14px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-pitch { margin-top: var(--space-2); font: 400 13px/1.4 var(--font-display); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n[data-vibe-menu] .vm-survey-pick { flex: none; height: 36px; padding: 0 var(--space-16); border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: 700 14px/1 var(--font-display); cursor: pointer; white-space: nowrap; }\n[data-vibe-menu] .vm-survey-pick:disabled { opacity: 0.45; cursor: default; }\n@container vm-survey (max-width: 360px) { [data-vibe-menu] .vm-survey-aside { display: none; } }\n";
|
|
10
10
|
export interface CodeCardProps {
|
|
11
11
|
readonly viewer: ViewerSlice;
|
|
12
12
|
readonly code: CodeSlice;
|
|
@@ -15,6 +15,7 @@ export interface MenuGeometry {
|
|
|
15
15
|
readonly logMax: 160;
|
|
16
16
|
}
|
|
17
17
|
export declare const MENU_GEOMETRY: MenuGeometry;
|
|
18
|
+
export declare const MENU_TOP_RESERVE_VAR = "--vibe-menu-top-reserve";
|
|
18
19
|
export type MenuViewport = "desktop" | "phone";
|
|
19
20
|
export declare function menuViewportFor(widthPx: number): MenuViewport;
|
|
20
21
|
export declare function switchInsetPx(viewport: MenuViewport): number;
|
|
@@ -14,6 +14,7 @@ export const MENU_GEOMETRY = Object.freeze({
|
|
|
14
14
|
narrowMaxWidth: 359,
|
|
15
15
|
logMax: 160,
|
|
16
16
|
});
|
|
17
|
+
export const MENU_TOP_RESERVE_VAR = "--vibe-menu-top-reserve";
|
|
17
18
|
export function menuViewportFor(widthPx) {
|
|
18
19
|
return widthPx <= MENU_GEOMETRY.phoneMaxWidth ? "phone" : "desktop";
|
|
19
20
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/geometry.ts"],"names":[],"mappings":"AA+BA,MAAM,CAAC,MAAM,aAAa,GAAiB,MAAM,CAAC,MAAM,CAAC;IACvD,WAAW,EAAE,EAAE;IACf,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,EAAE;IACd,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;IACnB,MAAM,EAAE,GAAG;CACZ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"geometry.js","sourceRoot":"","sources":["../../../jsr/components/vibe-menu/geometry.ts"],"names":[],"mappings":"AA+BA,MAAM,CAAC,MAAM,aAAa,GAAiB,MAAM,CAAC,MAAM,CAAC;IACvD,WAAW,EAAE,EAAE;IACf,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,CAAC;IACP,IAAI,EAAE,EAAE;IACR,IAAI,EAAE,GAAG;IACT,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,EAAE;IACjB,IAAI,EAAE,CAAC;IACP,UAAU,EAAE,EAAE;IACd,aAAa,EAAE,GAAG;IAClB,cAAc,EAAE,GAAG;IACnB,MAAM,EAAE,GAAG;CACZ,CAAC,CAAC;AASH,MAAM,CAAC,MAAM,oBAAoB,GAAG,yBAAyB,CAAC;AAI9D,MAAM,UAAU,eAAe,CAAC,OAAe;IAC7C,OAAO,OAAO,IAAI,aAAa,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AACtE,CAAC;AAKD,MAAM,UAAU,aAAa,CAAC,QAAsB;IAClD,MAAM,IAAI,GAAG,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,CAAC;IACxF,OAAO,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AACnC,CAAC;AAGD,MAAM,UAAU,cAAc,CAAC,QAAsB;IACnD,MAAM,EAAE,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IACnC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,wCAAwC,EAAE,CAAC;AAC1F,CAAC"}
|
|
@@ -9,6 +9,7 @@ export interface CodeSurvey {
|
|
|
9
9
|
readonly faces: readonly SurveyFace[];
|
|
10
10
|
readonly picked?: number;
|
|
11
11
|
readonly onPick?: (index: number) => void;
|
|
12
|
+
readonly onShown?: (faces: number) => void;
|
|
12
13
|
}
|
|
13
14
|
export declare const SURVEY_COPY: Readonly<{
|
|
14
15
|
readonly choosing: "Want to steer the look?";
|
|
@@ -17,7 +18,8 @@ export declare const SURVEY_COPY: Readonly<{
|
|
|
17
18
|
readonly pick: "Build this one";
|
|
18
19
|
readonly region: "Steer the look";
|
|
19
20
|
}>;
|
|
20
|
-
export declare const SURVEY_STRIP_CSS = "\n/* Its own container: the aside steps out when the strip itself is narrow, on any host. */\n[data-vibe-menu] .vm-survey { margin: 0 0 var(--space-14); container: vm-survey / inline-size; }\n/* Code mode's card is wide and its pinned top is capped: the strip keeps the card-sized tiles. */\n[data-vibe-menu] .vm-codemode .vm-survey { margin-bottom: 10px; max-width: 420px; }\n[data-vibe-menu] .vm-survey-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-title { font: 600 15px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-aside { font: 400 12px/1.3 var(--font-display); color: var(--muted); white-space: nowrap; }\n[data-vibe-menu] .vm-survey-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }\n/* Three readings keep the four-up tile size: the missing tile's column stays empty. */\n[data-vibe-menu] .vm-survey-strip[data-count=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: calc((100% - 24px) / 4 + 8px); }\n[data-vibe-menu] .vm-survey-tile { position: relative; padding: 0; aspect-ratio: 1; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-switch); overflow: hidden; background: var(--card-bg); cursor: pointer; }\n[data-vibe-menu] .vm-survey-tile[data-on=\"true\"] { outline: var(--stroke-focus) solid var(--accent); outline-offset: 2px; }\n[data-vibe-menu] .vm-survey-tile[aria-disabled=\"true\"] { cursor: default; }\n[data-vibe-menu] .vm-survey[data-picked] .vm-survey-tile:not([data-on=\"true\"]) { opacity: 0.35; }\n[data-vibe-menu] .vm-survey-art { display: block; width: 100%; height: 100%; object-fit: cover; }\n[data-vibe-menu] .vm-survey-
|
|
21
|
+
export declare const SURVEY_STRIP_CSS = "\n/* Its own container: the aside steps out when the strip itself is narrow, on any host. */\n[data-vibe-menu] .vm-survey { margin: 0 0 var(--space-14); container: vm-survey / inline-size; }\n/* Code mode's card is wide and its pinned top is capped: the strip keeps the card-sized tiles. */\n[data-vibe-menu] .vm-codemode .vm-survey { margin-bottom: 10px; max-width: 420px; }\n[data-vibe-menu] .vm-survey-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-8); margin: 0 0 var(--space-8); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-title { font: 600 15px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-aside { font: 400 12px/1.3 var(--font-display); color: var(--muted); white-space: nowrap; }\n[data-vibe-menu] .vm-survey-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }\n/* Three readings keep the four-up tile size: the missing tile's column stays empty. */\n[data-vibe-menu] .vm-survey-strip[data-count=\"3\"] { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: calc((100% - 24px) / 4 + 8px); }\n[data-vibe-menu] .vm-survey-tile { position: relative; padding: 0; aspect-ratio: 1; border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-switch); overflow: hidden; background: var(--card-bg); cursor: pointer; }\n[data-vibe-menu] .vm-survey-tile[data-on=\"true\"] { outline: var(--stroke-focus) solid var(--accent); outline-offset: 2px; }\n[data-vibe-menu] .vm-survey-tile[aria-disabled=\"true\"] { cursor: default; }\n[data-vibe-menu] .vm-survey[data-picked] .vm-survey-tile:not([data-on=\"true\"]) { opacity: 0.35; }\n[data-vibe-menu] .vm-survey-art { display: block; width: 100%; height: 100%; object-fit: cover; }\n[data-vibe-menu] .vm-survey-foot { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-10); padding: 0 var(--space-2); }\n[data-vibe-menu] .vm-survey-text { flex: 1 1 auto; min-width: 0; }\n[data-vibe-menu] .vm-survey-label { font: 700 14px/1.3 var(--font-display); color: var(--ink); }\n[data-vibe-menu] .vm-survey-pitch { margin-top: var(--space-2); font: 400 13px/1.4 var(--font-display); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }\n[data-vibe-menu] .vm-survey-pick { flex: none; height: 36px; padding: 0 var(--space-16); border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: 700 14px/1 var(--font-display); cursor: pointer; white-space: nowrap; }\n[data-vibe-menu] .vm-survey-pick:disabled { opacity: 0.45; cursor: default; }\n@container vm-survey (max-width: 360px) { [data-vibe-menu] .vm-survey-aside { display: none; } }\n";
|
|
22
|
+
export declare function surveyMinLoaded(count: number): number;
|
|
21
23
|
export declare function SurveyStrip(props: {
|
|
22
24
|
readonly survey: CodeSurvey;
|
|
23
|
-
}): React.ReactElement;
|
|
25
|
+
}): React.ReactElement | null;
|
|
@@ -22,8 +22,6 @@ export const SURVEY_STRIP_CSS = `
|
|
|
22
22
|
[data-vibe-menu] .vm-survey-tile[aria-disabled="true"] { cursor: default; }
|
|
23
23
|
[data-vibe-menu] .vm-survey[data-picked] .vm-survey-tile:not([data-on="true"]) { opacity: 0.35; }
|
|
24
24
|
[data-vibe-menu] .vm-survey-art { display: block; width: 100%; height: 100%; object-fit: cover; }
|
|
25
|
-
[data-vibe-menu] .vm-survey-pending { width: 100%; height: 100%; background: linear-gradient(110deg, var(--line-hairline) 30%, color-mix(in srgb, var(--ink) 14%, transparent) 50%, var(--line-hairline) 70%); background-size: 200% 100%; animation: vm-survey-shimmer 1.4s linear infinite; }
|
|
26
|
-
@keyframes vm-survey-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
|
|
27
25
|
[data-vibe-menu] .vm-survey-foot { display: flex; align-items: center; gap: var(--space-12); margin-top: var(--space-10); padding: 0 var(--space-2); }
|
|
28
26
|
[data-vibe-menu] .vm-survey-text { flex: 1 1 auto; min-width: 0; }
|
|
29
27
|
[data-vibe-menu] .vm-survey-label { font: 700 14px/1.3 var(--font-display); color: var(--ink); }
|
|
@@ -31,27 +29,44 @@ export const SURVEY_STRIP_CSS = `
|
|
|
31
29
|
[data-vibe-menu] .vm-survey-pick { flex: none; height: 36px; padding: 0 var(--space-16); border: var(--stroke-rule) solid var(--line-card); border-radius: var(--radius-full); background: var(--accent); color: var(--on-accent); font: 700 14px/1 var(--font-display); cursor: pointer; white-space: nowrap; }
|
|
32
30
|
[data-vibe-menu] .vm-survey-pick:disabled { opacity: 0.45; cursor: default; }
|
|
33
31
|
@container vm-survey (max-width: 360px) { [data-vibe-menu] .vm-survey-aside { display: none; } }
|
|
34
|
-
@media (prefers-reduced-motion: reduce) { [data-vibe-menu] .vm-survey-pending { animation: none; } }
|
|
35
32
|
`;
|
|
36
|
-
function
|
|
37
|
-
return
|
|
33
|
+
export function surveyMinLoaded(count) {
|
|
34
|
+
return Math.min(count, Math.max(3, count - 1));
|
|
38
35
|
}
|
|
39
36
|
function SurveyStripBody(props) {
|
|
40
|
-
const { faces, picked, onPick } = props.survey;
|
|
41
|
-
const [
|
|
37
|
+
const { faces, picked, onPick, onShown } = props.survey;
|
|
38
|
+
const [loaded, setLoaded] = React.useState(() => new Set());
|
|
39
|
+
const [errored, setErrored] = React.useState(() => new Set());
|
|
40
|
+
const failed = new Set([...errored].filter((i) => !loaded.has(i)));
|
|
41
|
+
const [focus, setFocus] = React.useState(undefined);
|
|
42
|
+
const kept = faces.map((_, i) => i).filter((i) => !failed.has(i));
|
|
43
|
+
const settled = faces.every((_, i) => loaded.has(i) || failed.has(i));
|
|
44
|
+
const enough = kept.length >= surveyMinLoaded(faces.length) && (picked === undefined || !failed.has(picked));
|
|
45
|
+
const visible = settled && enough;
|
|
46
|
+
const onShownRef = React.useRef(onShown);
|
|
47
|
+
onShownRef.current = onShown;
|
|
48
|
+
React.useEffect(() => {
|
|
49
|
+
if (visible)
|
|
50
|
+
onShownRef.current?.(kept.length);
|
|
51
|
+
}, [visible, kept.length]);
|
|
52
|
+
if (!enough)
|
|
53
|
+
return null;
|
|
42
54
|
const chosen = picked !== undefined;
|
|
43
|
-
const shown = picked ?? focus;
|
|
55
|
+
const shown = picked ?? focus ?? kept[0] ?? 0;
|
|
44
56
|
const face = faces[shown];
|
|
45
|
-
const ready =
|
|
46
|
-
return (React.createElement("section", { className: "vm-survey", "data-testid": "survey-strip", "data-picked": chosen ? "" : undefined, "aria-label": SURVEY_COPY.region },
|
|
57
|
+
const ready = onPick !== undefined;
|
|
58
|
+
return (React.createElement("section", { className: "vm-survey", hidden: !visible, "data-testid": visible ? "survey-strip" : "survey-preload", "data-picked": chosen ? "" : undefined, "aria-label": SURVEY_COPY.region },
|
|
47
59
|
React.createElement("div", { className: "vm-survey-head" },
|
|
48
60
|
React.createElement("span", { className: "vm-survey-title" }, chosen ? SURVEY_COPY.picked : SURVEY_COPY.choosing),
|
|
49
61
|
chosen ? null : React.createElement("span", { className: "vm-survey-aside" }, SURVEY_COPY.aside)),
|
|
50
|
-
React.createElement("div", { className: "vm-survey-strip", role: "radiogroup", "aria-label": SURVEY_COPY.choosing, "data-count":
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
62
|
+
React.createElement("div", { className: "vm-survey-strip", role: "radiogroup", "aria-label": SURVEY_COPY.choosing, "data-count": kept.length }, kept.map((i) => {
|
|
63
|
+
const f = faces[i];
|
|
64
|
+
return (React.createElement("button", { key: i, type: "button", role: "radio", "aria-checked": shown === i, "aria-label": `${f.label}: ${f.pitch}`, "aria-disabled": chosen, className: "vm-survey-tile", "data-on": shown === i, onClick: () => {
|
|
65
|
+
if (!chosen)
|
|
66
|
+
setFocus(i);
|
|
67
|
+
} },
|
|
68
|
+
React.createElement("img", { className: "vm-survey-art", src: f.src, alt: "", draggable: false, onLoad: () => setLoaded((prev) => (prev.has(i) ? prev : new Set(prev).add(i))), onError: () => setErrored((prev) => (prev.has(i) ? prev : new Set(prev).add(i))) })));
|
|
69
|
+
})),
|
|
55
70
|
React.createElement("div", { className: "vm-survey-foot" },
|
|
56
71
|
React.createElement("div", { className: "vm-survey-text", "aria-live": "polite" },
|
|
57
72
|
React.createElement("div", { className: "vm-survey-label" }, face?.label),
|
|
@@ -59,6 +74,9 @@ function SurveyStripBody(props) {
|
|
|
59
74
|
chosen ? null : (React.createElement("button", { type: "button", className: "vm-survey-pick", disabled: !ready, onClick: () => onPick?.(shown) }, SURVEY_COPY.pick)))));
|
|
60
75
|
}
|
|
61
76
|
export function SurveyStrip(props) {
|
|
62
|
-
|
|
77
|
+
const srcs = props.survey.faces.map((f) => f.src);
|
|
78
|
+
if (srcs.length === 0 || srcs.some((src) => src === undefined))
|
|
79
|
+
return null;
|
|
80
|
+
return React.createElement(SurveyStripBody, { key: `${props.survey.id}\n${srcs.join("\n")}`, survey: props.survey });
|
|
63
81
|
}
|
|
64
82
|
//# sourceMappingURL=SurveyStrip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SurveyStrip.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/SurveyStrip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SurveyStrip.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/parts/SurveyStrip.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MENU_GEOMETRY } from "../geometry.js";
|
|
1
|
+
import { MENU_GEOMETRY, MENU_TOP_RESERVE_VAR } from "../geometry.js";
|
|
2
2
|
import { MOTION } from "../motion.js";
|
|
3
3
|
const G = MENU_GEOMETRY;
|
|
4
4
|
export const VIBE_MENU_SHELL_CSS = `
|
|
@@ -41,7 +41,13 @@ export const VIBE_MENU_SHELL_CSS = `
|
|
|
41
41
|
--vm-menu-open-w: calc(var(--vm-tab-w) * 4 + var(--vm-home-extra) + var(--vm-bar-end) + 2px);
|
|
42
42
|
/* The card's right edge stops where the pill artwork's flat top ends. */
|
|
43
43
|
--vm-card-w: calc(var(--vm-menu-open-w) + var(--vm-bar-end) - var(--vm-ring) - var(--vm-pill-flat-inset));
|
|
44
|
-
|
|
44
|
+
/* The tallest the card may be with its top at the host's top reserve
|
|
45
|
+
(MENU_TOP_RESERVE_VAR): the frame less the card's bottom offset
|
|
46
|
+
(edge + safe + bar) and the reserve. Unset, the fallback of -100cqh makes
|
|
47
|
+
it larger than the frame, so it never caps: the frame limit and Code
|
|
48
|
+
mode's 80cqh box are exactly what they were without a host reserve. */
|
|
49
|
+
--vm-below-reserve: calc(100cqh - var(--vm-edge) - var(--vm-safe-bottom) - var(--vm-bar-h) - var(${MENU_TOP_RESERVE_VAR}, -100cqh));
|
|
50
|
+
--vm-frame-limit: min(calc(100cqh - 2 * var(--vm-edge) - var(--vm-safe-bottom) - 80px), var(--vm-below-reserve));
|
|
45
51
|
--vm-open-ms: ${MOTION.openMs}ms;
|
|
46
52
|
--vm-close-ms: ${MOTION.closeMs}ms;
|
|
47
53
|
--vm-open-ease: ${MOTION.openEase};
|
|
@@ -282,7 +288,7 @@ export const VIBE_MENU_SHELL_CSS = `
|
|
|
282
288
|
/* Code mode: a tall box (80% of the frame) and, on desktop, a wide one that
|
|
283
289
|
grows leftwards; the sequencer tweens between the two boxes. */
|
|
284
290
|
.vm-layer .vm-menu[data-code-mode] .vm-card {
|
|
285
|
-
height: 80cqh;
|
|
291
|
+
height: min(80cqh, var(--vm-below-reserve));
|
|
286
292
|
max-height: none;
|
|
287
293
|
width: min(1200px, calc(100cqw - 2 * var(--vm-edge) - var(--vm-ring) - var(--vm-pill-flat-inset)));
|
|
288
294
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shell.styles.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/shell/shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"shell.styles.js","sourceRoot":"","sources":["../../../../jsr/components/vibe-menu/shell/shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACrE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAYtC,MAAM,CAAC,GAAG,aAAa,CAAC;AAExB,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;eAuBpB,CAAC,CAAC,WAAW;eACb,CAAC,CAAC,IAAI;iBACJ,CAAC,CAAC,KAAK;iBACP,CAAC,CAAC,KAAK;gBACR,CAAC,CAAC,IAAI;gBACN,CAAC,CAAC,IAAI;;qBAED,CAAC,CAAC,SAAS;eACjB,CAAC,CAAC,IAAI;0BACK,CAAC,CAAC,aAAa;;;;;;;;;;;;;qGAa4D,oBAAoB;;kBAEvG,MAAM,CAAC,MAAM;mBACZ,MAAM,CAAC,OAAO;oBACb,MAAM,CAAC,QAAQ;qBACd,MAAM,CAAC,SAAS;qBAChB,MAAM,CAAC,cAAc;oBACtB,MAAM,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAsRV,CAAC,CAAC,aAAa;;iBAEvB,CAAC,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAkDH,CAAC,CAAC,cAAc;;;;;;;;;;;;;;;;;;;;;CAqBxC,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.80",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./index.js",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"dependencies": {
|
|
11
11
|
"@adviser/cement": "~0.5.34",
|
|
12
12
|
"@emotion/css": "~11.13.5",
|
|
13
|
-
"@vibes.diy/use-vibes-types": "14.3.
|
|
14
|
-
"@vibes.diy/vibe-runtime": "14.3.
|
|
15
|
-
"@vibes.diy/vibe-types": "14.3.
|
|
13
|
+
"@vibes.diy/use-vibes-types": "14.3.80",
|
|
14
|
+
"@vibes.diy/vibe-runtime": "14.3.80",
|
|
15
|
+
"@vibes.diy/vibe-types": "14.3.80",
|
|
16
16
|
"arktype": "~2.2.6",
|
|
17
17
|
"officeparser": "~8.0.0",
|
|
18
18
|
"qrcode-generator": "~2.0.4",
|