@vibes.diy/base 14.3.194 → 14.3.196
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/attachments/use-attachments.d.ts +2 -0
- package/attachments/use-attachments.js +38 -32
- package/attachments/use-attachments.js.map +1 -1
- package/components/AttachmentRow.d.ts +4 -2
- package/components/AttachmentRow.js +9 -2
- package/components/AttachmentRow.js.map +1 -1
- package/components/HomeBuildChips.d.ts +1 -0
- package/components/HomeBuildChips.js +3 -2
- package/components/HomeBuildChips.js.map +1 -1
- package/components/StyleControls.d.ts +10 -22
- package/components/StyleControls.js +30 -168
- package/components/StyleControls.js.map +1 -1
- package/components/homeBuildDockCopy.d.ts +2 -0
- package/components/homeBuildDockCopy.js +2 -0
- package/components/homeBuildDockCopy.js.map +1 -1
- package/components/vibe-menu/cards/AccountCard.js +3 -1
- package/components/vibe-menu/cards/AccountCard.js.map +1 -1
- package/components/vibe-menu/copy.d.ts +2 -0
- package/components/vibe-menu/copy.js +2 -0
- package/components/vibe-menu/copy.js.map +1 -1
- package/components/vibe-menu/parts/Composer.d.ts +1 -1
- package/components/vibe-menu/parts/Composer.js +3 -0
- package/components/vibe-menu/parts/Composer.js.map +1 -1
- package/components/vibe-menu/vibe-menu.styles.d.ts +1 -1
- package/components/vibe-menu/vibe-menu.styles.js +8 -0
- package/components/vibe-menu/vibe-menu.styles.js.map +1 -1
- package/package.json +5 -5
|
@@ -16,5 +16,7 @@ export interface UseAttachments {
|
|
|
16
16
|
readonly stage: (payloads: readonly PromptAttachment[]) => void;
|
|
17
17
|
readonly readyAttachments: readonly PromptAttachment[];
|
|
18
18
|
readonly busy: boolean;
|
|
19
|
+
readonly leftOut: number;
|
|
19
20
|
}
|
|
21
|
+
export declare function leftOutSentence(leftOut: number): string | undefined;
|
|
20
22
|
export declare function useAttachments(): UseAttachments;
|
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
import { useCallback, useMemo, useRef, useState } from "react";
|
|
2
2
|
import { MAX_ATTACHMENTS } from "./attachment-types.js";
|
|
3
3
|
import { processAttachment } from "./process-attachment.js";
|
|
4
|
+
export function leftOutSentence(leftOut) {
|
|
5
|
+
if (leftOut > 0) {
|
|
6
|
+
return leftOut === 1
|
|
7
|
+
? `The first ${MAX_ATTACHMENTS} are in. Send the last one with your next message.`
|
|
8
|
+
: `The first ${MAX_ATTACHMENTS} are in. Send the other ${leftOut} with your next message.`;
|
|
9
|
+
}
|
|
10
|
+
return undefined;
|
|
11
|
+
}
|
|
4
12
|
let chipSeq = 0;
|
|
5
13
|
export function useAttachments() {
|
|
6
14
|
const [attachments, setAttachments] = useState([]);
|
|
@@ -9,26 +17,22 @@ export function useAttachments() {
|
|
|
9
17
|
attachmentsRef.current = next;
|
|
10
18
|
setAttachments(next);
|
|
11
19
|
}, []);
|
|
20
|
+
const [leftOut, setLeftOut] = useState(0);
|
|
12
21
|
const add = useCallback((files) => {
|
|
13
22
|
const incoming = [...files];
|
|
14
23
|
if (incoming.length === 0)
|
|
15
24
|
return;
|
|
16
|
-
const room = MAX_ATTACHMENTS - attachmentsRef.current.filter((a) => a.status !== "error").length;
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
kind: "unknown",
|
|
25
|
-
error: `Max ${MAX_ATTACHMENTS} files per prompt`,
|
|
26
|
-
};
|
|
27
|
-
}
|
|
28
|
-
return { id, name: file.name, status: "processing", kind: file.type.startsWith("image/") ? "image" : "text" };
|
|
29
|
-
});
|
|
25
|
+
const room = Math.max(0, MAX_ATTACHMENTS - attachmentsRef.current.filter((a) => a.status !== "error").length);
|
|
26
|
+
const admitted = incoming.slice(0, room);
|
|
27
|
+
const chips = admitted.map((file) => ({
|
|
28
|
+
id: `att-${++chipSeq}`,
|
|
29
|
+
name: file.name,
|
|
30
|
+
status: "processing",
|
|
31
|
+
kind: file.type.startsWith("image/") ? "image" : "text",
|
|
32
|
+
}));
|
|
30
33
|
commit([...attachmentsRef.current, ...chips]);
|
|
31
|
-
incoming.
|
|
34
|
+
setLeftOut(incoming.length - admitted.length);
|
|
35
|
+
admitted.forEach((file, i) => {
|
|
32
36
|
const id = chips[i].id;
|
|
33
37
|
void processAttachment(file).then((r) => {
|
|
34
38
|
commit(attachmentsRef.current.map((a) => a.id !== id
|
|
@@ -39,29 +43,31 @@ export function useAttachments() {
|
|
|
39
43
|
});
|
|
40
44
|
});
|
|
41
45
|
}, [commit]);
|
|
42
|
-
const remove = useCallback((id) =>
|
|
43
|
-
|
|
46
|
+
const remove = useCallback((id) => {
|
|
47
|
+
commit(attachmentsRef.current.filter((a) => a.id !== id));
|
|
48
|
+
setLeftOut(0);
|
|
49
|
+
}, [commit]);
|
|
50
|
+
const clear = useCallback(() => {
|
|
51
|
+
commit([]);
|
|
52
|
+
setLeftOut(0);
|
|
53
|
+
}, [commit]);
|
|
44
54
|
const stage = useCallback((payloads) => {
|
|
45
55
|
if (payloads.length === 0)
|
|
46
56
|
return;
|
|
47
|
-
const room = MAX_ATTACHMENTS - attachmentsRef.current.filter((a) => a.status !== "error").length;
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
error: `Max ${MAX_ATTACHMENTS} files per prompt`,
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
return { id, name: payload.name, status: "ready", kind: payload.kind, payload };
|
|
60
|
-
});
|
|
57
|
+
const room = Math.max(0, MAX_ATTACHMENTS - attachmentsRef.current.filter((a) => a.status !== "error").length);
|
|
58
|
+
const admitted = payloads.slice(0, room);
|
|
59
|
+
const chips = admitted.map((payload) => ({
|
|
60
|
+
id: `att-${++chipSeq}`,
|
|
61
|
+
name: payload.name,
|
|
62
|
+
status: "ready",
|
|
63
|
+
kind: payload.kind,
|
|
64
|
+
payload,
|
|
65
|
+
}));
|
|
61
66
|
commit([...attachmentsRef.current, ...chips]);
|
|
67
|
+
setLeftOut(payloads.length - admitted.length);
|
|
62
68
|
}, [commit]);
|
|
63
69
|
const readyAttachments = useMemo(() => attachments.filter((a) => a.status === "ready" && a.payload !== undefined).map((a) => a.payload), [attachments]);
|
|
64
70
|
const busy = attachments.some((a) => a.status === "processing");
|
|
65
|
-
return { attachments, add, remove, clear, stage, readyAttachments, busy };
|
|
71
|
+
return { attachments, add, remove, clear, stage, readyAttachments, busy, leftOut };
|
|
66
72
|
}
|
|
67
73
|
//# sourceMappingURL=use-attachments.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-attachments.js","sourceRoot":"","sources":["../../jsr/attachments/use-attachments.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAyB,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"use-attachments.js","sourceRoot":"","sources":["../../jsr/attachments/use-attachments.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type
|
|
2
|
+
import { type AttachmentChip } from "../attachments/use-attachments.js";
|
|
3
3
|
export declare function AttachmentButton({ onFiles, onBeforeSelect, disabled, className, }: {
|
|
4
4
|
readonly onFiles: (files: File[]) => void;
|
|
5
5
|
readonly onBeforeSelect?: () => boolean;
|
|
6
6
|
readonly disabled?: boolean;
|
|
7
7
|
readonly className?: string;
|
|
8
8
|
}): React.JSX.Element;
|
|
9
|
-
export declare function AttachmentChips({ chips, onRemove, }: {
|
|
9
|
+
export declare function AttachmentChips({ chips, onRemove, leftOut, noteStyle, }: {
|
|
10
10
|
readonly chips: readonly AttachmentChip[];
|
|
11
11
|
readonly onRemove: (id: string) => void;
|
|
12
|
+
readonly leftOut?: number;
|
|
13
|
+
readonly noteStyle?: React.CSSProperties;
|
|
12
14
|
}): React.JSX.Element | null;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useRef } from "react";
|
|
2
2
|
import { ATTACHMENT_ACCEPT } from "../attachments/attachment-types.js";
|
|
3
|
+
import { leftOutSentence } from "../attachments/use-attachments.js";
|
|
3
4
|
import { PaperclipIcon } from "./icons/PaperclipIcon.js";
|
|
4
5
|
export function AttachmentButton({ onFiles, onBeforeSelect, disabled, className, }) {
|
|
5
6
|
const inputRef = useRef(null);
|
|
@@ -23,9 +24,15 @@ export function AttachmentButton({ onFiles, onBeforeSelect, disabled, className,
|
|
|
23
24
|
} },
|
|
24
25
|
React.createElement(PaperclipIcon, { width: 16, height: 16 }))));
|
|
25
26
|
}
|
|
26
|
-
export function AttachmentChips({ chips, onRemove, }) {
|
|
27
|
-
|
|
27
|
+
export function AttachmentChips({ chips, onRemove, leftOut, noteStyle, }) {
|
|
28
|
+
const note = leftOutSentence(leftOut ?? 0);
|
|
29
|
+
if (chips.length === 0 && note === undefined)
|
|
28
30
|
return null;
|
|
31
|
+
return (React.createElement(React.Fragment, null,
|
|
32
|
+
chips.length > 0 ? React.createElement(ChipList, { chips: chips, onRemove: onRemove }) : null,
|
|
33
|
+
note !== undefined ? (React.createElement("p", { "aria-live": "polite", "data-testid": "attachment-left-out", style: noteStyle ?? { fontSize: 12, opacity: 0.75, margin: "6px 2px 0" } }, note)) : null));
|
|
34
|
+
}
|
|
35
|
+
function ChipList({ chips, onRemove }) {
|
|
29
36
|
return (React.createElement("div", { "aria-live": "polite", style: { display: "flex", flexWrap: "wrap", gap: 6, marginTop: 8 }, "data-testid": "attachment-chips" }, chips.map((chip) => (React.createElement("span", { key: chip.id, "data-status": chip.status, title: chip.error, className: chip.status === "error"
|
|
30
37
|
? "border border-red-400 text-red-600 dark:text-red-400"
|
|
31
38
|
: "border border-light-decorative-01 dark:border-dark-decorative-01 text-light-primary dark:text-dark-primary", style: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AttachmentRow.js","sourceRoot":"","sources":["../../jsr/components/AttachmentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;
|
|
1
|
+
{"version":3,"file":"AttachmentRow.js","sourceRoot":"","sources":["../../jsr/components/AttachmentRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,eAAe,EAAuB,MAAM,mCAAmC,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AAGzD,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,EACd,QAAQ,EACR,SAAS,GAaV;IACC,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAChD,OAAO,CACL;QACE,+BACE,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,QAAQ,QACR,MAAM,EAAE,iBAAiB,EACzB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC;gBAC1C,CAAC,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE,CAAC;YACtB,CAAC,GACD;QACF,gCACE,IAAI,EAAC,QAAQ,gBACF,cAAc,EACzB,KAAK,EAAC,cAAc,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;gBACZ,IAAI,cAAc,EAAE,EAAE,KAAK,KAAK;oBAAE,OAAO;gBACzC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;YAC5B,CAAC,EAID,SAAS,EACP,SAAS,IAAI,qGAAqG,EAEpH,KAAK,EAAE;gBACL,UAAU,EAAE,MAAM;gBAClB,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;gBACxC,OAAO,EAAE,CAAC;gBACV,OAAO,EAAE,MAAM;gBACf,UAAU,EAAE,QAAQ;gBACpB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aAC5B;YAED,oBAAC,aAAa,IAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,GAAI,CACjC,CACR,CACJ,CAAC;AACJ,CAAC;AAID,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,GAQV;IACC,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC;IAC3C,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,IAAI,CAAC;IAC1D,OAAO,CACL;QACG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAC,CAAC,IAAI;QAExE,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACpB,wCACY,QAAQ,iBACN,qBAAqB,EACjC,KAAK,EAAE,SAAS,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,IAEvE,IAAI,CACH,CACL,CAAC,CAAC,CAAC,IAAI,CACP,CACJ,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0F;IAC3H,OAAO,CACL,0CAAe,QAAQ,EAAC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,iBAAc,kBAAkB,IACvH,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,8BACE,GAAG,EAAE,IAAI,CAAC,EAAE,iBACC,IAAI,CAAC,MAAM,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EACP,IAAI,CAAC,MAAM,KAAK,OAAO;YACrB,CAAC,CAAC,sDAAsD;YACxD,CAAC,CAAC,4GAA4G,EAElH,KAAK,EAAE;YACL,OAAO,EAAE,aAAa;YACtB,UAAU,EAAE,QAAQ;YACpB,GAAG,EAAE,CAAC;YACN,YAAY,EAAE,CAAC;YACf,OAAO,EAAE,SAAS;YAClB,QAAQ,EAAE,EAAE;YACZ,QAAQ,EAAE,GAAG;SACd;QAED,qDAAmB,IAAI,CAAC,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAQ;QACnG,8BAAM,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAG,IAAI,CAAC,IAAI,CAAQ;QACtG,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,kCAAO,IAAI,CAAC,KAAK,CAAQ;QACrD,gCACE,IAAI,EAAC,QAAQ,gBACD,UAAU,IAAI,CAAC,IAAI,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,aAGpF,CACJ,CACR,CAAC,CACE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -5,6 +5,7 @@ export type HomeBuildChipStatus = "starting" | "planning" | "building" | "queued
|
|
|
5
5
|
export interface HomeBuildChip {
|
|
6
6
|
readonly id: string;
|
|
7
7
|
readonly title: string;
|
|
8
|
+
readonly titleIsPrompt?: boolean;
|
|
8
9
|
readonly status: HomeBuildChipStatus;
|
|
9
10
|
readonly dismissible?: boolean;
|
|
10
11
|
}
|
|
@@ -146,13 +146,14 @@ export function HomeBuildChips(props) {
|
|
|
146
146
|
const identity = paint[index % paint.length];
|
|
147
147
|
const chipStyle = { "--hbc-color": identity.color, "--hbc-flag-ink": identity.ink };
|
|
148
148
|
const label = HOME_BUILD_CHIP_LABELS[item.status];
|
|
149
|
+
const name = item.titleIsPrompt === true ? HOME_BUILD_DOCK_COPY.untitledChipName : item.title;
|
|
149
150
|
return (React.createElement("div", { key: item.id, className: "home-build-chip-slot" },
|
|
150
151
|
React.createElement("button", { ref: (button) => {
|
|
151
152
|
if (button === null)
|
|
152
153
|
buttons.current.delete(item.id);
|
|
153
154
|
else
|
|
154
155
|
buttons.current.set(item.id, button);
|
|
155
|
-
}, type: "button", className: "home-build-chip", "data-status": item.status, "data-live": LIVE_STATUSES.includes(item.status), style: chipStyle, "aria-label": item.status === "ready" ? HOME_BUILD_DOCK_COPY.readyChipName(
|
|
156
|
+
}, type: "button", className: "home-build-chip", "data-status": item.status, "data-live": LIVE_STATUSES.includes(item.status), style: chipStyle, "aria-label": item.status === "ready" ? HOME_BUILD_DOCK_COPY.readyChipName(name) : `${name}: ${label}`, onClick: () => props.onOpen(item.id) },
|
|
156
157
|
React.createElement("img", { src: `/lane-faces/vibes-face-${identity.face}.svg`, alt: "" }),
|
|
157
158
|
React.createElement("span", { className: "home-build-chip-copy" },
|
|
158
159
|
React.createElement("span", { className: "home-build-chip-title" },
|
|
@@ -160,7 +161,7 @@ export function HomeBuildChips(props) {
|
|
|
160
161
|
React.createElement("span", { className: "home-build-chip-status" },
|
|
161
162
|
React.createElement("span", { className: "home-build-chip-dot", "aria-hidden": "true" }),
|
|
162
163
|
item.status === "ready" ? (React.createElement("span", { className: "home-build-chip-cue", "data-testid": "home-build-chip-cue" }, HOME_BUILD_DOCK_COPY.readyCue)) : (label)))),
|
|
163
|
-
props.onDismiss !== undefined && item.dismissible !== false && (React.createElement("button", { type: "button", className: "home-build-chip-dismiss", "aria-label":
|
|
164
|
+
props.onDismiss !== undefined && item.dismissible !== false && (React.createElement("button", { type: "button", className: "home-build-chip-dismiss", "aria-label": HOME_BUILD_DOCK_COPY.hideChipName(item.titleIsPrompt === true ? undefined : item.title), onClick: () => props.onDismiss?.(item.id) }, "\u00D7"))));
|
|
164
165
|
}),
|
|
165
166
|
props.items.length < 4 && (React.createElement("div", { className: "home-build-chip-slot" },
|
|
166
167
|
React.createElement("button", { type: "button", className: "home-build-chip home-build-chip-new", onClick: props.onAnotherIdea },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HomeBuildChips.js","sourceRoot":"","sources":["../../jsr/components/HomeBuildChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAA4B,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"HomeBuildChips.js","sourceRoot":"","sources":["../../jsr/components/HomeBuildChips.tsx"],"names":[],"mappings":"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"}
|
|
@@ -16,23 +16,6 @@ export interface FontOptionView {
|
|
|
16
16
|
readonly label: string;
|
|
17
17
|
readonly mono?: boolean;
|
|
18
18
|
}
|
|
19
|
-
export interface OrnamentPadView {
|
|
20
|
-
readonly x: number;
|
|
21
|
-
readonly y: number;
|
|
22
|
-
}
|
|
23
|
-
export interface OrnamentTokenView {
|
|
24
|
-
readonly token: string;
|
|
25
|
-
readonly label: string;
|
|
26
|
-
readonly value: string;
|
|
27
|
-
readonly derived: string;
|
|
28
|
-
readonly pinned: boolean;
|
|
29
|
-
readonly steps?: readonly string[];
|
|
30
|
-
readonly stepIndex?: number;
|
|
31
|
-
}
|
|
32
|
-
export interface OrnamentSnapLineView {
|
|
33
|
-
readonly y: number;
|
|
34
|
-
readonly label: string;
|
|
35
|
-
}
|
|
36
19
|
export interface StyleSaveView {
|
|
37
20
|
readonly status: "idle" | "saving" | "saved" | "error";
|
|
38
21
|
readonly onRetry?: () => void;
|
|
@@ -61,13 +44,18 @@ export interface StyleControlsProps {
|
|
|
61
44
|
readonly fonts: readonly FontOptionView[];
|
|
62
45
|
readonly selectedFont: string;
|
|
63
46
|
readonly onSelectFont: (slug: string) => void;
|
|
64
|
-
readonly pad: OrnamentPadView;
|
|
65
|
-
readonly onPad: (pad: OrnamentPadView) => void;
|
|
66
|
-
readonly ornamentTokens: readonly OrnamentTokenView[];
|
|
67
|
-
readonly onTogglePinToken: (token: string) => void;
|
|
68
|
-
readonly snapLines: readonly OrnamentSnapLineView[];
|
|
69
47
|
readonly save?: StyleSaveView;
|
|
70
48
|
readonly publish?: StylePublishView;
|
|
49
|
+
readonly look?: LookSelectorView;
|
|
50
|
+
}
|
|
51
|
+
export interface LookSelectorView {
|
|
52
|
+
readonly options: readonly {
|
|
53
|
+
readonly id: string;
|
|
54
|
+
readonly label: string;
|
|
55
|
+
}[];
|
|
56
|
+
readonly selected: string;
|
|
57
|
+
readonly onSelect: (id: string) => void;
|
|
58
|
+
readonly onShuffle: () => void;
|
|
71
59
|
}
|
|
72
60
|
export declare function movedByControl(index: number, pinned: readonly [boolean, boolean, boolean]): number[];
|
|
73
61
|
export declare function movedByRoomDial(index: number): number[];
|
|
@@ -35,45 +35,14 @@ export function movedByRoomDial(index) {
|
|
|
35
35
|
function movesFor(index, pinned, room) {
|
|
36
36
|
return room ? movedByRoomDial(index) : movedByControl(index, pinned);
|
|
37
37
|
}
|
|
38
|
-
function
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
function movesCaption(moved0) {
|
|
44
|
-
const moved = moved0.map((i) => i + 1);
|
|
45
|
-
return moved.length === 1 ? `moves ${moved[0]} only` : `moves ${moved.join(" · ")}`;
|
|
46
|
-
}
|
|
47
|
-
function PinIcon({ pinned }) {
|
|
48
|
-
return (React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: 13, height: 13, fill: pinned ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block" } },
|
|
49
|
-
React.createElement("path", { d: "M12 17v5" }),
|
|
50
|
-
React.createElement("path", { d: "M9 3h6l-1 6 3 3v2H7v-2l3-3z" })));
|
|
51
|
-
}
|
|
52
|
-
function ChainLink({ broken }) {
|
|
53
|
-
const title = broken ? "Chain broken — the next control is pinned" : "The next control follows this one";
|
|
54
|
-
return (React.createElement("div", { title: title, "aria-hidden": "true", className: "flex shrink-0 flex-col items-center justify-center self-center text-gray-400 dark:text-gray-500", style: { width: 14 } },
|
|
55
|
-
React.createElement("span", { style: { fontSize: 10, lineHeight: 1 } }, broken ? "⊘" : "▸"),
|
|
56
|
-
React.createElement("div", { style: {
|
|
57
|
-
width: 12,
|
|
58
|
-
height: 0,
|
|
59
|
-
borderTopWidth: 2,
|
|
60
|
-
borderTopStyle: broken ? "dashed" : "solid",
|
|
61
|
-
borderTopColor: "currentColor",
|
|
62
|
-
opacity: broken ? 0.45 : 1,
|
|
63
|
-
} })));
|
|
38
|
+
function LockIcon({ locked }) {
|
|
39
|
+
return (React.createElement("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", width: 14, height: 14, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", style: { display: "block" } },
|
|
40
|
+
React.createElement("rect", { x: "5", y: "11", width: "14", height: "10", rx: "2", fill: locked ? "currentColor" : "none" }),
|
|
41
|
+
React.createElement("path", { d: locked ? "M8 11V7a4 4 0 0 1 8 0v4" : "M8 11V7a4 4 0 0 1 7.5-2" })));
|
|
64
42
|
}
|
|
65
43
|
function HueControlCard({ index, view, pinned, labels, room, onHue, onTogglePin, active, onActive, }) {
|
|
66
44
|
const isSource = index === 0;
|
|
67
45
|
const label = labels[index];
|
|
68
|
-
const state = room
|
|
69
|
-
? isSource
|
|
70
|
-
? "Source"
|
|
71
|
-
: nudgeCaption(view.nudge)
|
|
72
|
-
: isSource
|
|
73
|
-
? "Source"
|
|
74
|
-
: view.pinned
|
|
75
|
-
? "Pinned"
|
|
76
|
-
: `Follows ${index}`;
|
|
77
46
|
const willMove = active.includes(index);
|
|
78
47
|
const moved = movesFor(index, pinned, room);
|
|
79
48
|
const hasPin = room ? isSource : !isSource;
|
|
@@ -84,7 +53,6 @@ function HueControlCard({ index, view, pinned, labels, room, onHue, onTogglePin,
|
|
|
84
53
|
: view.pinned
|
|
85
54
|
? `Unpin ${label} so it follows control ${index} again`
|
|
86
55
|
: `Pin ${label} so control ${index} stops moving it`;
|
|
87
|
-
const pinText = room ? (view.pinned ? "Gap pinned" : "Pin gap") : view.pinned ? "Pinned" : "Pin";
|
|
88
56
|
return (React.createElement("div", { "data-testid": `hue-control-${index + 1}`, onMouseEnter: () => onActive(moved), onMouseLeave: () => onActive([]), onFocus: () => onActive(moved), onBlur: () => onActive([]), className: "flex flex-col items-center gap-1 rounded-md border p-1.5 text-center transition-colors " +
|
|
89
57
|
(willMove
|
|
90
58
|
? "border-blue-400 bg-blue-50/60 dark:border-blue-500 dark:bg-blue-900/20"
|
|
@@ -96,21 +64,16 @@ function HueControlCard({ index, view, pinned, labels, room, onHue, onTogglePin,
|
|
|
96
64
|
background: `var(--style-hue-card, color-mix(in srgb, ${view.hex} 22%, var(--style-hue-ground)))`,
|
|
97
65
|
} },
|
|
98
66
|
React.createElement("input", { type: "color", "aria-label": `${label} hue`, value: view.hex, onChange: (e) => onHue(index, e.target.value), className: "h-8 w-full max-w-[3rem] shrink-0 cursor-pointer rounded border border-gray-300 bg-transparent p-0 dark:border-gray-600" }),
|
|
99
|
-
React.createElement("span", { className: "w-full
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
(view.pinned
|
|
110
|
-
? "bg-blue-600 text-white hover:bg-blue-700"
|
|
111
|
-
: "text-gray-500 hover:bg-gray-200 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100") },
|
|
112
|
-
React.createElement(PinIcon, { pinned: view.pinned }),
|
|
113
|
-
pinText))));
|
|
67
|
+
React.createElement("span", { className: "flex w-full min-w-0 items-center justify-center gap-1" },
|
|
68
|
+
React.createElement("span", { className: "truncate text-xs font-medium text-gray-800 dark:text-gray-100" },
|
|
69
|
+
index + 1,
|
|
70
|
+
". ",
|
|
71
|
+
label),
|
|
72
|
+
hasPin ? (React.createElement("button", { type: "button", "aria-pressed": view.pinned, "aria-label": pinTitle, title: pinTitle, onClick: () => onTogglePin(index), className: "flex shrink-0 items-center rounded p-0.5 transition-colors " +
|
|
73
|
+
(view.pinned
|
|
74
|
+
? "text-gray-900 dark:text-gray-100"
|
|
75
|
+
: "text-gray-400 hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-200") },
|
|
76
|
+
React.createElement(LockIcon, { locked: view.pinned }))) : null)));
|
|
114
77
|
}
|
|
115
78
|
const SAVE_COPY = {
|
|
116
79
|
idle: "",
|
|
@@ -132,90 +95,6 @@ function SaveIndicator({ save }) {
|
|
|
132
95
|
SAVE_COPY[save.status],
|
|
133
96
|
save.status === "error" && save.onRetry !== undefined ? (React.createElement("button", { type: "button", onClick: save.onRetry, className: "rounded px-1 underline underline-offset-2 hover:bg-red-50 dark:hover:bg-red-900/30" }, "Retry")) : null));
|
|
134
97
|
}
|
|
135
|
-
const PAD_SIZE = 152;
|
|
136
|
-
function padFromPointer(rect, clientX, clientY) {
|
|
137
|
-
const clamp = (v) => Math.max(-1, Math.min(1, v));
|
|
138
|
-
return {
|
|
139
|
-
x: clamp(((clientX - rect.left) / rect.width) * 2 - 1),
|
|
140
|
-
y: clamp(((clientY - rect.top) / rect.height) * 2 - 1),
|
|
141
|
-
};
|
|
142
|
-
}
|
|
143
|
-
function pct(value) {
|
|
144
|
-
return `${((value + 1) / 2) * 100}%`;
|
|
145
|
-
}
|
|
146
|
-
const KEY_STEP = 0.05;
|
|
147
|
-
function OrnamentPad({ pad, onPad }) {
|
|
148
|
-
const ref = React.useRef(null);
|
|
149
|
-
const [dragging, setDragging] = React.useState(false);
|
|
150
|
-
const moveTo = React.useCallback((clientX, clientY) => {
|
|
151
|
-
const el = ref.current;
|
|
152
|
-
if (el === null)
|
|
153
|
-
return;
|
|
154
|
-
onPad(padFromPointer(el.getBoundingClientRect(), clientX, clientY));
|
|
155
|
-
}, [onPad]);
|
|
156
|
-
const onKeyDown = (e) => {
|
|
157
|
-
const step = e.shiftKey ? KEY_STEP * 4 : KEY_STEP;
|
|
158
|
-
const clamp = (v) => Math.max(-1, Math.min(1, Math.round(v * 1000) / 1000));
|
|
159
|
-
if (e.key === "ArrowLeft")
|
|
160
|
-
onPad({ x: clamp(pad.x - step), y: pad.y });
|
|
161
|
-
else if (e.key === "ArrowRight")
|
|
162
|
-
onPad({ x: clamp(pad.x + step), y: pad.y });
|
|
163
|
-
else if (e.key === "ArrowUp")
|
|
164
|
-
onPad({ x: pad.x, y: clamp(pad.y - step) });
|
|
165
|
-
else if (e.key === "ArrowDown")
|
|
166
|
-
onPad({ x: pad.x, y: clamp(pad.y + step) });
|
|
167
|
-
else if (e.key === "Home")
|
|
168
|
-
onPad({ x: 0, y: 0 });
|
|
169
|
-
else
|
|
170
|
-
return;
|
|
171
|
-
e.preventDefault();
|
|
172
|
-
};
|
|
173
|
-
return (React.createElement("div", { className: "flex flex-col items-center gap-1" },
|
|
174
|
-
React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Formal"),
|
|
175
|
-
React.createElement("div", { className: "flex items-center gap-2" },
|
|
176
|
-
React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Loose"),
|
|
177
|
-
React.createElement("div", { ref: ref, "data-testid": "ornament-pad", role: "application", tabIndex: 0, "aria-label": `Spacing pad. Horizontal: loose to tight. Vertical: formal to informal. Position ${pad.x.toFixed(2)}, ${pad.y.toFixed(2)}. Arrow keys to move, Home to centre.`, onKeyDown: onKeyDown, onPointerDown: (e) => {
|
|
178
|
-
e.currentTarget.setPointerCapture(e.pointerId);
|
|
179
|
-
setDragging(true);
|
|
180
|
-
moveTo(e.clientX, e.clientY);
|
|
181
|
-
}, onPointerMove: (e) => {
|
|
182
|
-
if (dragging === true)
|
|
183
|
-
moveTo(e.clientX, e.clientY);
|
|
184
|
-
}, onPointerUp: (e) => {
|
|
185
|
-
e.currentTarget.releasePointerCapture(e.pointerId);
|
|
186
|
-
setDragging(false);
|
|
187
|
-
}, className: "relative cursor-crosshair touch-none rounded-md border border-gray-300 bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-gray-600 dark:bg-gray-800", style: { width: PAD_SIZE, height: PAD_SIZE } },
|
|
188
|
-
React.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 top-1/2 border-t border-dashed border-gray-300 dark:border-gray-600" }),
|
|
189
|
-
React.createElement("div", { "aria-hidden": "true", className: "absolute inset-y-0 left-1/2 border-l border-dashed border-gray-300 dark:border-gray-600" }),
|
|
190
|
-
React.createElement("div", { "aria-hidden": "true", "data-testid": "ornament-quarter-horizontal", className: "style-pad-quarter-horizontal" }),
|
|
191
|
-
React.createElement("div", { "aria-hidden": "true", "data-testid": "ornament-quarter-vertical", className: "style-pad-quarter-vertical" }),
|
|
192
|
-
React.createElement("div", { "aria-hidden": "true", "data-testid": "ornament-pad-dot", className: "absolute h-3.5 w-3.5 rounded-full border-2 border-white bg-blue-600 shadow dark:border-gray-900", style: { left: pct(pad.x), top: pct(pad.y), transform: "translate(-50%, -50%)" } })),
|
|
193
|
-
React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Tight")),
|
|
194
|
-
React.createElement("span", { className: "text-xs text-gray-500 dark:text-gray-400" }, "Informal")));
|
|
195
|
-
}
|
|
196
|
-
function StepLadder({ steps, index }) {
|
|
197
|
-
return (React.createElement("span", { className: "flex items-center gap-1", title: steps.join(" · ") },
|
|
198
|
-
steps.map((step, i) => (React.createElement("span", { key: step, "aria-hidden": "true", className: "h-1.5 w-1.5 rounded-full " + (i === index ? "bg-blue-600 dark:bg-blue-400" : "bg-gray-300 dark:bg-gray-600") }))),
|
|
199
|
-
React.createElement("span", { className: "text-gray-600 dark:text-gray-300" }, index === undefined ? "custom" : `${steps[index]} (${index + 1}/${steps.length})`)));
|
|
200
|
-
}
|
|
201
|
-
function OrnamentTokenRow({ view, onTogglePin, }) {
|
|
202
|
-
const pinTitle = view.pinned
|
|
203
|
-
? `Unpin ${view.label} so it follows the pad again`
|
|
204
|
-
: `Pin ${view.label} at ${view.value} so the pad stops moving it`;
|
|
205
|
-
return (React.createElement("div", { "data-testid": `ornament-token-${view.token}`, className: "flex items-center justify-between gap-2 py-1 text-xs" },
|
|
206
|
-
React.createElement("span", { className: "w-28 shrink-0 text-gray-600 dark:text-gray-300" }, view.label),
|
|
207
|
-
React.createElement("span", { className: "min-w-0 flex-1 truncate font-mono text-[11px] text-gray-700 dark:text-gray-200", title: view.value }, view.steps === undefined ? view.value : null),
|
|
208
|
-
view.steps === undefined ? null : React.createElement(StepLadder, { steps: view.steps, index: view.stepIndex }),
|
|
209
|
-
React.createElement("button", { type: "button", "aria-pressed": view.pinned, "aria-label": pinTitle, title: pinTitle, onClick: () => onTogglePin(view.token), className: "flex shrink-0 items-center gap-1 rounded px-1.5 py-0.5 text-[11px] transition-colors " +
|
|
210
|
-
(view.pinned
|
|
211
|
-
? "bg-blue-600 text-white hover:bg-blue-700"
|
|
212
|
-
: "text-gray-500 hover:bg-gray-200 hover:text-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-100") },
|
|
213
|
-
React.createElement(PinIcon, { pinned: view.pinned }),
|
|
214
|
-
view.pinned ? "Pinned" : "Pin")));
|
|
215
|
-
}
|
|
216
|
-
function pinnedCount(views) {
|
|
217
|
-
return views.filter((v) => v.pinned === true).length;
|
|
218
|
-
}
|
|
219
98
|
function Section({ label, aside, children, }) {
|
|
220
99
|
return (React.createElement("section", { className: "flex flex-col gap-2" },
|
|
221
100
|
React.createElement("div", { className: "flex min-h-[16px] items-center justify-between gap-2" },
|
|
@@ -254,13 +133,6 @@ const STYLE_CONTROLS_CSS = `
|
|
|
254
133
|
.style-controls [data-testid^="hue-control-"]:focus-within { outline:2px solid #60a5fa; outline-offset:-2px; }
|
|
255
134
|
.style-controls [data-testid^="hue-control-"] input:focus-visible, .style-controls [data-testid^="hue-control-"] button:focus-visible { outline:none; }
|
|
256
135
|
.style-controls [data-testid^="hue-control-"] input { height:26px; }
|
|
257
|
-
.style-controls [data-testid^="hue-control-"] button, .style-controls [data-testid^="hue-control-"] > span[aria-hidden="true"] { min-height:28px; height:28px; }
|
|
258
|
-
.style-controls [data-testid="ornament-pad"] { background:transparent; border:1px solid #78899b; }
|
|
259
|
-
.style-controls [data-testid="ornament-pad"] > div:nth-child(1) { border-top:2px dashed var(--style-axis); }
|
|
260
|
-
.style-controls [data-testid="ornament-pad"] > div:nth-child(2) { border-left:2px dashed var(--style-axis); }
|
|
261
|
-
.style-controls .style-pad-quarter-horizontal { position:absolute; inset:25% 0; border-block:1px dashed var(--style-guide); pointer-events:none; }
|
|
262
|
-
.style-controls .style-pad-quarter-vertical { position:absolute; inset:0 25%; border-inline:1px dashed var(--style-guide); pointer-events:none; }
|
|
263
|
-
.style-controls [data-testid="ornament-pad-dot"] { z-index:1; border-color:white; }
|
|
264
136
|
@media (prefers-color-scheme: dark) {
|
|
265
137
|
.style-controls { --style-hue-ground:#202b39; --style-holder:rgba(63,84,109,.38); --style-holder-border:rgba(149,174,202,.32); --style-color-ground:rgba(20,28,39,.25); --style-axis:#c3d1e0; --style-guide:#788ba1; color:#e5e7eb; }
|
|
266
138
|
.style-controls .style-published { color:#c3dfce; background:rgba(40,65,52,.65); border-color:#526f5e; }
|
|
@@ -283,20 +155,23 @@ const STYLE_CONTROLS_MENU_CSS = `
|
|
|
283
155
|
[data-vibe-menu] .style-controls .style-published { background: transparent; color: var(--ink); border-color: var(--line); }
|
|
284
156
|
[data-vibe-menu] .style-controls .style-revert-action { border: 0; background: transparent; text-decoration: none; font: 700 12px/1 var(--font-tab); letter-spacing: 0.1em; color: var(--muted); }
|
|
285
157
|
[data-vibe-menu] .style-controls .style-revert-action:not(:disabled):hover { color: var(--ink); }
|
|
286
|
-
[data-vibe-menu] .style-controls
|
|
287
|
-
[data-vibe-menu] .style-controls [data-testid="style-selector-holder"] button[aria-pressed] { min-height: 32px; padding: 0 var(--space-12) 0 var(--space-6); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-chip); background: transparent; color: var(--ink); }
|
|
158
|
+
[data-vibe-menu] .style-controls [data-testid="style-selector-holder"] button:is([aria-pressed], [data-look-shuffle]) { min-height: 32px; padding: 0 var(--space-12) 0 var(--space-6); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-chip); background: transparent; color: var(--ink); }
|
|
288
159
|
[data-vibe-menu] .style-controls [data-testid="style-selector-holder"] button[aria-pressed="true"] { background: var(--ink); color: var(--card-bg); }
|
|
289
160
|
[data-vibe-menu] .style-controls .style-font-picker select { min-height: var(--size-input); border: var(--stroke-rule) solid var(--line); border-radius: var(--radius-input); background: transparent; color: var(--ink); padding: 0 var(--space-12); font-size: 14px; }
|
|
290
|
-
[data-vibe-menu] .style-controls [data-testid="hue-cascade"], [data-vibe-menu] .style-controls [data-testid="ornament-pad"], [data-vibe-menu] .style-controls details { border: var(--stroke-hairline) solid var(--line-hairline); background: transparent; }
|
|
291
161
|
[data-vibe-menu] .style-controls [data-testid^="hue-control-"]:focus-within { outline-color: var(--line); }
|
|
292
|
-
[data-vibe-menu] .style-controls
|
|
293
|
-
[data-vibe-menu] .style-controls
|
|
294
|
-
[data-vibe-menu] .style-controls button[aria-pressed="false"]:is([aria-label^="Pin"]) { color: var(--muted); background: transparent; }
|
|
295
|
-
[data-vibe-menu] .style-controls [data-testid="ornament-pad-dot"] { background: var(--ink); border-color: var(--card-bg); }
|
|
296
|
-
[data-vibe-menu] .style-controls [data-testid^="ornament-token-"] span { color: var(--ink); }
|
|
297
|
-
[data-vibe-menu] .style-controls [data-testid^="ornament-token-"] span.rounded-full { background: var(--line-hairline); }
|
|
298
|
-
[data-vibe-menu] .style-controls [data-testid^="ornament-token-"] span.rounded-full.bg-blue-600 { background: var(--ink); }
|
|
162
|
+
[data-vibe-menu] .style-controls [data-testid^="hue-control-"] button[aria-pressed="true"] { color: var(--ink); background: transparent; }
|
|
163
|
+
[data-vibe-menu] .style-controls [data-testid^="hue-control-"] button[aria-pressed="false"] { color: var(--muted); background: transparent; }
|
|
299
164
|
`;
|
|
165
|
+
const CHIP_CLASS = "flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition-colors ";
|
|
166
|
+
const CHIP_ON = "border-blue-500 bg-blue-50 text-blue-900 dark:bg-blue-900/30 dark:text-blue-100";
|
|
167
|
+
const CHIP_OFF = "border-gray-200 text-gray-700 hover:border-gray-400 dark:border-gray-700 dark:text-gray-200";
|
|
168
|
+
function LookRow({ look }) {
|
|
169
|
+
return (React.createElement(Section, { label: "Look" },
|
|
170
|
+
React.createElement("div", { className: "flex flex-wrap gap-2", "data-testid": "look-package-row" },
|
|
171
|
+
look.options.map((o) => (React.createElement("button", { key: o.id, type: "button", "aria-pressed": look.selected === o.id, onClick: () => look.onSelect(o.id), className: CHIP_CLASS + (look.selected === o.id ? CHIP_ON : CHIP_OFF) }, o.label))),
|
|
172
|
+
React.createElement("button", { type: "button", "data-look-shuffle": "", "aria-label": "Random look and room", title: "Random look and room", onClick: look.onShuffle, className: CHIP_CLASS + CHIP_OFF },
|
|
173
|
+
React.createElement("span", { "aria-hidden": "true" }, "\uD83C\uDFB2")))));
|
|
174
|
+
}
|
|
300
175
|
export function StyleControls(props) {
|
|
301
176
|
const [active, setActive] = React.useState([]);
|
|
302
177
|
const pinned = [false, props.hues[1].pinned, props.hues[2].pinned];
|
|
@@ -306,6 +181,7 @@ export function StyleControls(props) {
|
|
|
306
181
|
React.createElement("style", null, STYLE_CONTROLS_CSS + STYLE_CONTROLS_MENU_CSS),
|
|
307
182
|
props.publish === undefined ? null : React.createElement(PublishBar, { publish: props.publish }),
|
|
308
183
|
React.createElement("div", { className: "style-selector-holder", "data-testid": "style-selector-holder" },
|
|
184
|
+
props.look === undefined ? null : React.createElement(LookRow, { look: props.look }),
|
|
309
185
|
React.createElement(Section, { label: "Presets", aside: props.save === undefined ? undefined : React.createElement(SaveIndicator, { save: props.save }) },
|
|
310
186
|
React.createElement("div", { className: "flex flex-wrap gap-2" }, props.presets.map((p) => (React.createElement("button", { key: p.slug, type: "button", "aria-pressed": props.selectedPreset === p.slug, onClick: () => props.onSelectPreset(p.slug), className: "flex items-center gap-2 rounded-md border px-2 py-1.5 text-xs transition-colors " +
|
|
311
187
|
(props.selectedPreset === p.slug
|
|
@@ -321,23 +197,9 @@ export function StyleControls(props) {
|
|
|
321
197
|
font.label,
|
|
322
198
|
font.mono === true ? " ⌨" : "")))))),
|
|
323
199
|
React.createElement(Section, { label: "Color" },
|
|
324
|
-
React.createElement("div", { "data-testid": "hue-cascade", className: "flex flex-row items-stretch", style: { display: "flex", flexDirection: "row", alignItems: "stretch" } },
|
|
200
|
+
React.createElement("div", { "data-testid": "hue-cascade", className: "flex flex-row items-stretch gap-1", style: { display: "flex", flexDirection: "row", alignItems: "stretch" } },
|
|
325
201
|
React.createElement(HueControlCard, { index: 0, view: props.hues[0], pinned: pinned, labels: labels, room: room, onHue: props.onHue, onTogglePin: props.onTogglePin, active: active, onActive: setActive }),
|
|
326
|
-
React.createElement(ChainLink, { broken: !room && props.hues[1].pinned }),
|
|
327
202
|
React.createElement(HueControlCard, { index: 1, view: props.hues[1], pinned: pinned, labels: labels, room: room, onHue: props.onHue, onTogglePin: props.onTogglePin, active: active, onActive: setActive }),
|
|
328
|
-
React.createElement(
|
|
329
|
-
React.createElement(HueControlCard, { index: 2, view: props.hues[2], pinned: pinned, labels: labels, room: room, onHue: props.onHue, onTogglePin: props.onTogglePin, active: active, onActive: setActive }))),
|
|
330
|
-
React.createElement(Section, { label: "Spacing" },
|
|
331
|
-
React.createElement(OrnamentPad, { pad: props.pad, onPad: props.onPad }),
|
|
332
|
-
React.createElement("details", { className: "rounded-md border border-gray-200 dark:border-gray-700" },
|
|
333
|
-
React.createElement("summary", { className: "cursor-pointer px-2 py-1.5 text-xs text-gray-600 dark:text-gray-300" },
|
|
334
|
-
"Individual controls (",
|
|
335
|
-
props.ornamentTokens.length,
|
|
336
|
-
") \u2014 ",
|
|
337
|
-
pinnedCount(props.ornamentTokens),
|
|
338
|
-
" pinned"),
|
|
339
|
-
React.createElement("div", { className: "border-t border-gray-200 px-2 pb-2 dark:border-gray-700" },
|
|
340
|
-
React.createElement("p", { className: "py-2 text-[11px] text-gray-500 dark:text-gray-400" }, "Everything here follows the pad. Pin one to freeze it where it is \u2014 the pad keeps driving the rest."),
|
|
341
|
-
props.ornamentTokens.map((view) => (React.createElement(OrnamentTokenRow, { key: view.token, view: view, onTogglePin: props.onTogglePinToken }))))))));
|
|
203
|
+
React.createElement(HueControlCard, { index: 2, view: props.hues[2], pinned: pinned, labels: labels, room: room, onHue: props.onHue, onTogglePin: props.onTogglePin, active: active, onActive: setActive })))));
|
|
342
204
|
}
|
|
343
205
|
//# sourceMappingURL=StyleControls.js.map
|