@hanzo/ui 8.29.39 → 8.29.41
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/dist/backends/gui/textarea.cjs +10 -1
- package/dist/backends/gui/textarea.d.ts.map +1 -1
- package/dist/backends/gui/textarea.js +10 -1
- package/dist/backends/gui/textarea.js.map +1 -1
- package/dist/chat/Composer.cjs +87 -32
- package/dist/chat/Composer.d.ts +35 -19
- package/dist/chat/Composer.d.ts.map +1 -1
- package/dist/chat/Composer.js +87 -32
- package/dist/chat/Composer.js.map +1 -1
- package/dist/chat/Dictation.cjs +6 -6
- package/dist/chat/Dictation.d.ts +2 -4
- package/dist/chat/Dictation.d.ts.map +1 -1
- package/dist/chat/Dictation.js +6 -6
- package/dist/chat/Dictation.js.map +1 -1
- package/dist/chat/Palette.cjs +2 -1
- package/dist/chat/Palette.d.ts.map +1 -1
- package/dist/chat/Palette.js +2 -1
- package/dist/chat/Palette.js.map +1 -1
- package/dist/chat/Plus.cjs +2 -2
- package/dist/chat/Plus.js +2 -2
- package/dist/chat/Plus.js.map +1 -1
- package/dist/chat/Tune.cjs +31 -16
- package/dist/chat/Tune.d.ts +5 -3
- package/dist/chat/Tune.d.ts.map +1 -1
- package/dist/chat/Tune.js +32 -17
- package/dist/chat/Tune.js.map +1 -1
- package/dist/chat/look.cjs +28 -0
- package/dist/chat/look.d.ts +36 -0
- package/dist/chat/look.d.ts.map +1 -0
- package/dist/chat/look.js +26 -0
- package/dist/chat/look.js.map +1 -0
- package/dist/gallery.html +102 -38
- package/dist/glass.css +78 -13
- package/dist/marketing/Footer.cjs +1 -1
- package/dist/marketing/Footer.d.ts.map +1 -1
- package/dist/marketing/Footer.js +1 -1
- package/dist/marketing/Footer.js.map +1 -1
- package/dist/models/ModelPicker.cjs +2 -2
- package/dist/models/ModelPicker.d.ts +1 -1
- package/dist/models/ModelPicker.d.ts.map +1 -1
- package/dist/models/ModelPicker.js +2 -2
- package/dist/models/ModelPicker.js.map +1 -1
- package/dist/product/ChipSelect.cjs +9 -6
- package/dist/product/ChipSelect.d.ts +5 -4
- package/dist/product/ChipSelect.d.ts.map +1 -1
- package/dist/product/ChipSelect.js +9 -6
- package/dist/product/ChipSelect.js.map +1 -1
- package/dist/styles.css +99 -35
- package/dist/theme.css +78 -13
- package/package.json +1 -1
- package/dist/chat/Dial.cjs +0 -101
- package/dist/chat/Dial.d.ts +0 -13
- package/dist/chat/Dial.d.ts.map +0 -1
- package/dist/chat/Dial.js +0 -99
- package/dist/chat/Dial.js.map +0 -1
- package/dist/chat/ring.cjs +0 -9
- package/dist/chat/ring.d.ts +0 -11
- package/dist/chat/ring.d.ts.map +0 -1
- package/dist/chat/ring.js +0 -7
- package/dist/chat/ring.js.map +0 -1
package/dist/chat/Tune.cjs
CHANGED
|
@@ -7,7 +7,8 @@ exports.Tune = Tune;
|
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
/**
|
|
9
9
|
* The row under the composer's frame: the surface's chips at its start, and at
|
|
10
|
-
* its end the model, the effort
|
|
10
|
+
* its end the model, the effort and the mode — quiet words, each opening its
|
|
11
|
+
* choices, all three drawn alike so the row reads as one line.
|
|
11
12
|
*
|
|
12
13
|
* The model is `ModelPicker` in its quiet look — the one picker, here as a word
|
|
13
14
|
* in a row — and is drawn only where the person turned the model selector on
|
|
@@ -26,30 +27,44 @@ const react_2 = require("react");
|
|
|
26
27
|
const gui_2 = require("../backends/gui/index.cjs");
|
|
27
28
|
const catalog_1 = require("../models/catalog.cjs");
|
|
28
29
|
const ModelPicker_1 = require("../models/ModelPicker.cjs");
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
const look_1 = require("./look.cjs");
|
|
31
|
+
/**
|
|
32
|
+
* A word in the row under the frame: 14px, no edge and no fill until a pointer
|
|
33
|
+
* gives it the soft hover ground, eased. `dim` sets it in the muted ink — the
|
|
34
|
+
* effort, which qualifies the model beside it. A phone stands it as tall as the
|
|
35
|
+
* frame's controls. As a popover's trigger it IS the trigger, so the trigger's
|
|
36
|
+
* state lands on the button itself.
|
|
37
|
+
*/
|
|
38
|
+
const Word = (0, react_2.forwardRef)(function Word({ children, label, slotName, open, dim = false, disabled = false, ...trigger }, ref) {
|
|
39
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: ref, render: "button", "data-slot": slotName, ...trigger, "aria-label": label, "aria-expanded": open, "aria-disabled": disabled || undefined, items: "center", height: 28, px: 5, rounded: 8, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, bg: open ? '$hover' : 'transparent', hoverStyle: disabled ? undefined : { bg: '$hover' }, transition: "quickest", focusVisibleStyle: look_1.RING, "$max-sm": { height: 36 }, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: dim ? '$soft' : '$ink', numberOfLines: 1, children: children }) }));
|
|
40
|
+
});
|
|
33
41
|
/** A titled list of choices, a check on the one in force. */
|
|
34
42
|
function Choices({ title, items, value, onPick }) {
|
|
35
43
|
const { t } = (0, react_1.useI18n)();
|
|
36
44
|
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { role: 'listbox', "aria-label": title, gap: 2, "data-slot": "choices", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 13, color: "$hint", px: 10, pt: 6, pb: 4, children: title }), items.map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", role: "option", "aria-selected": c.id === value, "aria-disabled": c.off || undefined, onPress: () => !c.off && onPick(c.id), items: "flex-start", gap: 12, px: 10, py: 8, rounded: 8, width: "100%", cursor: c.off ? 'default' : 'pointer', opacity: c.off ? 0.5 : 1, hoverStyle: c.off ? undefined : { bg: '$hover' }, children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, items: "flex-start", gap: 2, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 14, color: "$ink", style: { textAlign: 'start' }, children: t(c.label) }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 13, color: "$hint", style: { textAlign: 'start' }, children: t(c.note) })] }), c.id === value ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, color: "var(--primary)", mt: 2, "aria-hidden": true }) : null] }, c.id)))] }));
|
|
37
45
|
}
|
|
38
46
|
/** A word in the row that opens a panel of choices. */
|
|
39
|
-
function Opens({ label, word, dim,
|
|
47
|
+
function Opens({ label, word, slotName, dim, disabled, children }) {
|
|
40
48
|
const [open, setOpen] = (0, react_2.useState)(false);
|
|
41
|
-
return ((0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { asChild: true, children:
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: open, onOpenChange: (o) => setOpen(disabled ? false : o), allowFlip: true, placement: "top-end", children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(Word, { label: label, slotName: slotName, open: open, dim: dim, disabled: disabled, children: word }) }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: children(() => setOpen(false)) })] }));
|
|
42
50
|
}
|
|
43
|
-
/** The surface's chips: one tap each, the one in force
|
|
51
|
+
/** The surface's chips, as words: one tap each, the one in force in the full ink. */
|
|
44
52
|
function Chips({ chips }) {
|
|
45
|
-
return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "composer-chips", items: "center", gap:
|
|
53
|
+
return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "composer-chips", items: "center", gap: 2, flexWrap: "wrap", rowGap: 2, minW: 0, shrink: 1, maxW: "100%", children: chips.map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "button", "data-slot": "composer-chip", "aria-pressed": c.on ?? undefined, onPress: c.onPress, items: "center", gap: 6, height: 28, px: 5, rounded: 8, bg: "transparent", cursor: "pointer", hoverStyle: { bg: '$hover' }, transition: "quickest", focusVisibleStyle: look_1.RING, "$max-sm": { height: 36 }, children: [c.icon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, "$max-sm": { display: 'none' }, children: c.icon }) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: c.on ? '$ink' : '$soft', numberOfLines: 1, children: c.label })] }, c.id))) }));
|
|
54
|
+
}
|
|
55
|
+
/** One of the surface's short lists, as a word that opens it. */
|
|
56
|
+
function Pick({ title, label, slotName, modes, dim, disabled }) {
|
|
57
|
+
const { t } = (0, react_1.useI18n)();
|
|
58
|
+
const now = modes.items.find((m) => m.id === modes.value) ?? modes.items[0];
|
|
59
|
+
if (!now)
|
|
60
|
+
return null;
|
|
61
|
+
return ((0, jsx_runtime_1.jsx)(Opens, { label: label(t(now.label)), word: t(now.label), slotName: slotName, dim: dim, disabled: disabled, children: (close) => ((0, jsx_runtime_1.jsx)(Choices, { title: title, items: modes.items, value: modes.value, onPick: (m) => {
|
|
62
|
+
modes.set(m);
|
|
63
|
+
close();
|
|
64
|
+
} })) }));
|
|
46
65
|
}
|
|
47
|
-
/** The row's end: the model where it is shown,
|
|
48
|
-
function Tune({ mind, mode, onUpgrade, limits, }) {
|
|
66
|
+
/** The row's end: the model where it is shown, the effort, and the mode. */
|
|
67
|
+
function Tune({ mind, effort, mode, onUpgrade, limits, disabled, }) {
|
|
49
68
|
const { t } = (0, react_1.useI18n)();
|
|
50
|
-
|
|
51
|
-
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-slot": "tune", items: "center", gap: 2, marginInlineStart: "auto", shrink: 0, children: [mind ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "mind", children: (0, jsx_runtime_1.jsx)(ModelPicker_1.ModelPicker, { quiet: true, size: "sm", name: t('Model'), describe: t('Model: {name}', { name: (0, catalog_1.modelName)(mind.models.find((m) => m.id === mind.model) ?? { id: mind.model }) }), models: mind.models, value: mind.model, onChange: mind.pick, loading: mind.loading, error: mind.error, limits: limits, granted: (id) => (0, catalog_1.grants)(mind.free, id, mind.models), ...(onUpgrade ? { onUpgrade } : {}) }) })) : null, mode && now ? ((0, jsx_runtime_1.jsx)(Opens, { label: t('Mode: {mode}', { mode: t(now.label) }), word: t(now.label), pill: true, children: (close) => ((0, jsx_runtime_1.jsx)(Choices, { title: t('Mode'), items: mode.items, value: mode.value, onPick: (m) => {
|
|
52
|
-
mode.set(m);
|
|
53
|
-
close();
|
|
54
|
-
} })) })) : null] }));
|
|
69
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-slot": "tune", items: "center", gap: 0, shrink: 0, flexWrap: "wrap", children: [mind ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "data-slot": "mind", children: (0, jsx_runtime_1.jsx)(ModelPicker_1.ModelPicker, { quiet: true, size: "sm", name: t('Model'), describe: t('Model: {name}', { name: (0, catalog_1.modelName)(mind.models.find((m) => m.id === mind.model) ?? { id: mind.model }) }), models: mind.models, value: mind.model, onChange: mind.pick, loading: mind.loading, error: mind.error, limits: limits, granted: (id) => (0, catalog_1.grants)(mind.free, id, mind.models), ...(onUpgrade ? { onUpgrade } : {}) }) })) : null, effort ? (0, jsx_runtime_1.jsx)(Pick, { title: t('Effort'), label: (level) => t('Effort: {level}', { level }), slotName: "effort", modes: effort, dim: true, disabled: disabled }) : null, mode ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { marginInlineStart: 12, children: (0, jsx_runtime_1.jsx)(Pick, { title: t('Mode'), label: (m) => t('Mode: {mode}', { mode: m }), slotName: "mode", modes: mode }) })) : null] }));
|
|
55
70
|
}
|
package/dist/chat/Tune.d.ts
CHANGED
|
@@ -35,15 +35,17 @@ export declare function Choices<T extends string>({ title, items, value, onPick
|
|
|
35
35
|
value: T;
|
|
36
36
|
onPick: (id: T) => void;
|
|
37
37
|
}): import("react").JSX.Element;
|
|
38
|
-
/** The surface's chips: one tap each, the one in force
|
|
38
|
+
/** The surface's chips, as words: one tap each, the one in force in the full ink. */
|
|
39
39
|
export declare function Chips({ chips }: {
|
|
40
40
|
chips: readonly Chip[];
|
|
41
41
|
}): import("react").JSX.Element;
|
|
42
|
-
/** The row's end: the model where it is shown,
|
|
43
|
-
export declare function Tune({ mind, mode, onUpgrade, limits, }: {
|
|
42
|
+
/** The row's end: the model where it is shown, the effort, and the mode. */
|
|
43
|
+
export declare function Tune({ mind, effort, mode, onUpgrade, limits, disabled, }: {
|
|
44
44
|
mind?: Mind | null;
|
|
45
|
+
effort?: Modes | null;
|
|
45
46
|
mode?: Modes | null;
|
|
46
47
|
onUpgrade?: (model: string) => void;
|
|
47
48
|
limits?: PauseSource | null;
|
|
49
|
+
disabled?: boolean;
|
|
48
50
|
}): import("react").JSX.Element;
|
|
49
51
|
//# sourceMappingURL=Tune.d.ts.map
|
package/dist/chat/Tune.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tune.d.ts","sourceRoot":"","sources":["../../src/chat/Tune.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Tune.d.ts","sourceRoot":"","sources":["../../src/chat/Tune.tsx"],"names":[],"mappings":"AAoBA,OAAO,EAAwB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAG5D,OAAO,EAAqB,KAAK,iBAAiB,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAEjC,gGAAgG;AAChG,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,iBAAiB,EAAE,CAAA;IAC3B,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,0DAA0D;IAC1D,IAAI,EAAE,MAAM,CAAA;IACZ,qFAAqF;IACrF,IAAI,EAAE,OAAO,CAAA;IACb,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3B;AAED,yGAAyG;AACzG,MAAM,WAAW,KAAK,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM;IAC9C,KAAK,EAAE,CAAC,CAAA;IACR,0FAA0F;IAC1F,GAAG,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAA;IAClB,KAAK,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAA;CACzB;AAED,0FAA0F;AAC1F,MAAM,WAAW,IAAI;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,EAAE,CAAC,EAAE,OAAO,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAwCD,6DAA6D;AAC7D,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,+BAuCxJ;AAmBD,qFAAqF;AACrF,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;CAAE,+BA+B1D;AAwBD,4EAA4E;AAC5E,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,MAAM,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACnB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BA+BA"}
|
package/dist/chat/Tune.js
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
/**
|
|
4
4
|
* The row under the composer's frame: the surface's chips at its start, and at
|
|
5
|
-
* its end the model, the effort
|
|
5
|
+
* its end the model, the effort and the mode — quiet words, each opening its
|
|
6
|
+
* choices, all three drawn alike so the row reads as one line.
|
|
6
7
|
*
|
|
7
8
|
* The model is `ModelPicker` in its quiet look — the one picker, here as a word
|
|
8
9
|
* in a row — and is drawn only where the person turned the model selector on
|
|
@@ -17,35 +18,49 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
17
18
|
import { SizableText, XStack, YStack } from '@hanzo/gui';
|
|
18
19
|
import { useI18n } from '@hanzo/i18n/react';
|
|
19
20
|
import { Check } from '@hanzogui/lucide-icons-2';
|
|
20
|
-
import { useState } from 'react';
|
|
21
|
+
import { forwardRef, useState } from 'react';
|
|
21
22
|
import { Popover, PopoverContent, PopoverTrigger } from '../backends/gui/index.js';
|
|
22
23
|
import { grants, modelName } from '../models/catalog.js';
|
|
23
24
|
import { ModelPicker } from '../models/ModelPicker.js';
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
import { RING } from './look.js';
|
|
26
|
+
/**
|
|
27
|
+
* A word in the row under the frame: 14px, no edge and no fill until a pointer
|
|
28
|
+
* gives it the soft hover ground, eased. `dim` sets it in the muted ink — the
|
|
29
|
+
* effort, which qualifies the model beside it. A phone stands it as tall as the
|
|
30
|
+
* frame's controls. As a popover's trigger it IS the trigger, so the trigger's
|
|
31
|
+
* state lands on the button itself.
|
|
32
|
+
*/
|
|
33
|
+
const Word = forwardRef(function Word({ children, label, slotName, open, dim = false, disabled = false, ...trigger }, ref) {
|
|
34
|
+
return (_jsx(XStack, { ref: ref, render: "button", "data-slot": slotName, ...trigger, "aria-label": label, "aria-expanded": open, "aria-disabled": disabled || undefined, items: "center", height: 28, px: 5, rounded: 8, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, bg: open ? '$hover' : 'transparent', hoverStyle: disabled ? undefined : { bg: '$hover' }, transition: "quickest", focusVisibleStyle: RING, "$max-sm": { height: 36 }, children: _jsx(SizableText, { size: "$3", color: dim ? '$soft' : '$ink', numberOfLines: 1, children: children }) }));
|
|
35
|
+
});
|
|
28
36
|
/** A titled list of choices, a check on the one in force. */
|
|
29
37
|
export function Choices({ title, items, value, onPick }) {
|
|
30
38
|
const { t } = useI18n();
|
|
31
39
|
return (_jsxs(YStack, { role: 'listbox', "aria-label": title, gap: 2, "data-slot": "choices", children: [_jsx(SizableText, { fontSize: 13, color: "$hint", px: 10, pt: 6, pb: 4, children: title }), items.map((c) => (_jsxs(XStack, { render: "button", role: "option", "aria-selected": c.id === value, "aria-disabled": c.off || undefined, onPress: () => !c.off && onPick(c.id), items: "flex-start", gap: 12, px: 10, py: 8, rounded: 8, width: "100%", cursor: c.off ? 'default' : 'pointer', opacity: c.off ? 0.5 : 1, hoverStyle: c.off ? undefined : { bg: '$hover' }, children: [_jsxs(YStack, { flex: 1, minW: 0, items: "flex-start", gap: 2, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", style: { textAlign: 'start' }, children: t(c.label) }), _jsx(SizableText, { fontSize: 13, color: "$hint", style: { textAlign: 'start' }, children: t(c.note) })] }), c.id === value ? _jsx(Check, { size: 16, color: "var(--primary)", mt: 2, "aria-hidden": true }) : null] }, c.id)))] }));
|
|
32
40
|
}
|
|
33
41
|
/** A word in the row that opens a panel of choices. */
|
|
34
|
-
function Opens({ label, word, dim,
|
|
42
|
+
function Opens({ label, word, slotName, dim, disabled, children }) {
|
|
35
43
|
const [open, setOpen] = useState(false);
|
|
36
|
-
return (_jsxs(Popover, { open: open, onOpenChange: setOpen, allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children:
|
|
44
|
+
return (_jsxs(Popover, { open: open, onOpenChange: (o) => setOpen(disabled ? false : o), allowFlip: true, placement: "top-end", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Word, { label: label, slotName: slotName, open: open, dim: dim, disabled: disabled, children: word }) }), _jsx(PopoverContent, { solid: true, p: 6, width: 288, maxW: "calc(100vw - 24px)", children: children(() => setOpen(false)) })] }));
|
|
37
45
|
}
|
|
38
|
-
/** The surface's chips: one tap each, the one in force
|
|
46
|
+
/** The surface's chips, as words: one tap each, the one in force in the full ink. */
|
|
39
47
|
export function Chips({ chips }) {
|
|
40
|
-
return (_jsx(XStack, { "data-slot": "composer-chips", items: "center", gap:
|
|
48
|
+
return (_jsx(XStack, { "data-slot": "composer-chips", items: "center", gap: 2, flexWrap: "wrap", rowGap: 2, minW: 0, shrink: 1, maxW: "100%", children: chips.map((c) => (_jsxs(XStack, { render: "button", "data-slot": "composer-chip", "aria-pressed": c.on ?? undefined, onPress: c.onPress, items: "center", gap: 6, height: 28, px: 5, rounded: 8, bg: "transparent", cursor: "pointer", hoverStyle: { bg: '$hover' }, transition: "quickest", focusVisibleStyle: RING, "$max-sm": { height: 36 }, children: [c.icon ? _jsx(XStack, { "aria-hidden": true, "$max-sm": { display: 'none' }, children: c.icon }) : null, _jsx(SizableText, { size: "$3", color: c.on ? '$ink' : '$soft', numberOfLines: 1, children: c.label })] }, c.id))) }));
|
|
49
|
+
}
|
|
50
|
+
/** One of the surface's short lists, as a word that opens it. */
|
|
51
|
+
function Pick({ title, label, slotName, modes, dim, disabled }) {
|
|
52
|
+
const { t } = useI18n();
|
|
53
|
+
const now = modes.items.find((m) => m.id === modes.value) ?? modes.items[0];
|
|
54
|
+
if (!now)
|
|
55
|
+
return null;
|
|
56
|
+
return (_jsx(Opens, { label: label(t(now.label)), word: t(now.label), slotName: slotName, dim: dim, disabled: disabled, children: (close) => (_jsx(Choices, { title: title, items: modes.items, value: modes.value, onPick: (m) => {
|
|
57
|
+
modes.set(m);
|
|
58
|
+
close();
|
|
59
|
+
} })) }));
|
|
41
60
|
}
|
|
42
|
-
/** The row's end: the model where it is shown,
|
|
43
|
-
export function Tune({ mind, mode, onUpgrade, limits, }) {
|
|
61
|
+
/** The row's end: the model where it is shown, the effort, and the mode. */
|
|
62
|
+
export function Tune({ mind, effort, mode, onUpgrade, limits, disabled, }) {
|
|
44
63
|
const { t } = useI18n();
|
|
45
|
-
|
|
46
|
-
return (_jsxs(XStack, { "data-slot": "tune", items: "center", gap: 2, marginInlineStart: "auto", shrink: 0, children: [mind ? (_jsx(XStack, { "data-slot": "mind", children: _jsx(ModelPicker, { quiet: true, size: "sm", name: t('Model'), describe: t('Model: {name}', { name: modelName(mind.models.find((m) => m.id === mind.model) ?? { id: mind.model }) }), models: mind.models, value: mind.model, onChange: mind.pick, loading: mind.loading, error: mind.error, limits: limits, granted: (id) => grants(mind.free, id, mind.models), ...(onUpgrade ? { onUpgrade } : {}) }) })) : null, mode && now ? (_jsx(Opens, { label: t('Mode: {mode}', { mode: t(now.label) }), word: t(now.label), pill: true, children: (close) => (_jsx(Choices, { title: t('Mode'), items: mode.items, value: mode.value, onPick: (m) => {
|
|
47
|
-
mode.set(m);
|
|
48
|
-
close();
|
|
49
|
-
} })) })) : null] }));
|
|
64
|
+
return (_jsxs(XStack, { "data-slot": "tune", items: "center", gap: 0, shrink: 0, flexWrap: "wrap", children: [mind ? (_jsx(XStack, { "data-slot": "mind", children: _jsx(ModelPicker, { quiet: true, size: "sm", name: t('Model'), describe: t('Model: {name}', { name: modelName(mind.models.find((m) => m.id === mind.model) ?? { id: mind.model }) }), models: mind.models, value: mind.model, onChange: mind.pick, loading: mind.loading, error: mind.error, limits: limits, granted: (id) => grants(mind.free, id, mind.models), ...(onUpgrade ? { onUpgrade } : {}) }) })) : null, effort ? _jsx(Pick, { title: t('Effort'), label: (level) => t('Effort: {level}', { level }), slotName: "effort", modes: effort, dim: true, disabled: disabled }) : null, mode ? (_jsx(XStack, { marginInlineStart: 12, children: _jsx(Pick, { title: t('Mode'), label: (m) => t('Mode: {mode}', { mode: m }), slotName: "mode", modes: mode }) })) : null] }));
|
|
50
65
|
}
|
|
51
66
|
//# sourceMappingURL=Tune.js.map
|
package/dist/chat/Tune.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tune.js","sourceRoot":"","sources":["../../src/chat/Tune.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ
|
|
1
|
+
{"version":3,"file":"Tune.js","sourceRoot":"","sources":["../../src/chat/Tune.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.STROKE = exports.GLYPH = exports.GHOST = exports.RING = void 0;
|
|
4
|
+
/**
|
|
5
|
+
* The look every composer control wears, from the tokens, in one place.
|
|
6
|
+
*
|
|
7
|
+
* RING: the focus ring, drawn on the focused control alone and only for the
|
|
8
|
+
* keyboard (`focus-visible`), the same width and colour on `+`, the mic, its
|
|
9
|
+
* chevron, voice, send, and the words under the frame.
|
|
10
|
+
*
|
|
11
|
+
* GHOST: a control with no ground of its own until it is pointed at. Its glyph
|
|
12
|
+
* is drawn in `currentColor`, so the ink is the control's: the secondary ink at
|
|
13
|
+
* rest, lifting to the full ink with a soft hover ground under a pointer. gui's
|
|
14
|
+
* `quickest` eases both (150ms, design's ease).
|
|
15
|
+
*
|
|
16
|
+
* GLYPH and STROKE: the one icon size and line weight in the frame's row, a
|
|
17
|
+
* whole pixel size so every lucide glyph draws crisp, at 1x and 2x alike.
|
|
18
|
+
*/
|
|
19
|
+
exports.RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
|
|
20
|
+
exports.GHOST = {
|
|
21
|
+
bg: 'transparent',
|
|
22
|
+
color: '$quiet',
|
|
23
|
+
hoverStyle: { bg: '$hover', color: '$ink' },
|
|
24
|
+
pressStyle: { bg: '$hover', color: '$ink' },
|
|
25
|
+
transition: 'quickest',
|
|
26
|
+
};
|
|
27
|
+
exports.GLYPH = 20;
|
|
28
|
+
exports.STROKE = 1.75;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The look every composer control wears, from the tokens, in one place.
|
|
3
|
+
*
|
|
4
|
+
* RING: the focus ring, drawn on the focused control alone and only for the
|
|
5
|
+
* keyboard (`focus-visible`), the same width and colour on `+`, the mic, its
|
|
6
|
+
* chevron, voice, send, and the words under the frame.
|
|
7
|
+
*
|
|
8
|
+
* GHOST: a control with no ground of its own until it is pointed at. Its glyph
|
|
9
|
+
* is drawn in `currentColor`, so the ink is the control's: the secondary ink at
|
|
10
|
+
* rest, lifting to the full ink with a soft hover ground under a pointer. gui's
|
|
11
|
+
* `quickest` eases both (150ms, design's ease).
|
|
12
|
+
*
|
|
13
|
+
* GLYPH and STROKE: the one icon size and line weight in the frame's row, a
|
|
14
|
+
* whole pixel size so every lucide glyph draws crisp, at 1x and 2x alike.
|
|
15
|
+
*/
|
|
16
|
+
export declare const RING: {
|
|
17
|
+
readonly outlineColor: '$outlineColor';
|
|
18
|
+
readonly outlineWidth: 2;
|
|
19
|
+
readonly outlineStyle: 'solid';
|
|
20
|
+
};
|
|
21
|
+
export declare const GHOST: {
|
|
22
|
+
readonly bg: 'transparent';
|
|
23
|
+
readonly color: '$quiet';
|
|
24
|
+
readonly hoverStyle: {
|
|
25
|
+
readonly bg: '$hover';
|
|
26
|
+
readonly color: '$ink';
|
|
27
|
+
};
|
|
28
|
+
readonly pressStyle: {
|
|
29
|
+
readonly bg: '$hover';
|
|
30
|
+
readonly color: '$ink';
|
|
31
|
+
};
|
|
32
|
+
readonly transition: 'quickest';
|
|
33
|
+
};
|
|
34
|
+
export declare const GLYPH = 20;
|
|
35
|
+
export declare const STROKE = 1.75;
|
|
36
|
+
//# sourceMappingURL=look.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"look.d.ts","sourceRoot":"","sources":["../../src/chat/look.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,IAAI;aAAK,YAAY,EAAE,eAAe;aAAE,YAAY,EAAE,CAAC;aAAE,YAAY,EAAE,OAAO;CAAW,CAAA;AAEtG,eAAO,MAAM,KAAK;aAChB,EAAE,EAAE,aAAa;aACjB,KAAK,EAAE,QAAQ;aACf,UAAU;iBAAI,EAAE,EAAE,QAAQ;iBAAE,KAAK,EAAE,MAAM;;aACzC,UAAU;iBAAI,EAAE,EAAE,QAAQ;iBAAE,KAAK,EAAE,MAAM;;aACzC,UAAU,EAAE,UAAU;CACd,CAAA;AAEV,eAAO,MAAM,KAAK,KAAK,CAAA;AAEvB,eAAO,MAAM,MAAM,OAAO,CAAA"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The look every composer control wears, from the tokens, in one place.
|
|
3
|
+
*
|
|
4
|
+
* RING: the focus ring, drawn on the focused control alone and only for the
|
|
5
|
+
* keyboard (`focus-visible`), the same width and colour on `+`, the mic, its
|
|
6
|
+
* chevron, voice, send, and the words under the frame.
|
|
7
|
+
*
|
|
8
|
+
* GHOST: a control with no ground of its own until it is pointed at. Its glyph
|
|
9
|
+
* is drawn in `currentColor`, so the ink is the control's: the secondary ink at
|
|
10
|
+
* rest, lifting to the full ink with a soft hover ground under a pointer. gui's
|
|
11
|
+
* `quickest` eases both (150ms, design's ease).
|
|
12
|
+
*
|
|
13
|
+
* GLYPH and STROKE: the one icon size and line weight in the frame's row, a
|
|
14
|
+
* whole pixel size so every lucide glyph draws crisp, at 1x and 2x alike.
|
|
15
|
+
*/
|
|
16
|
+
export const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
|
|
17
|
+
export const GHOST = {
|
|
18
|
+
bg: 'transparent',
|
|
19
|
+
color: '$quiet',
|
|
20
|
+
hoverStyle: { bg: '$hover', color: '$ink' },
|
|
21
|
+
pressStyle: { bg: '$hover', color: '$ink' },
|
|
22
|
+
transition: 'quickest',
|
|
23
|
+
};
|
|
24
|
+
export const GLYPH = 20;
|
|
25
|
+
export const STROKE = 1.75;
|
|
26
|
+
//# sourceMappingURL=look.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"look.js","sourceRoot":"","sources":["../../src/chat/look.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,CAAC,EAAE,YAAY,EAAE,OAAO,EAAW,CAAA;AAEtG,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,QAAQ;IACf,UAAU,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAC3C,UAAU,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE;IAC3C,UAAU,EAAE,UAAU;CACd,CAAA;AAEV,MAAM,CAAC,MAAM,KAAK,GAAG,EAAE,CAAA;AAEvB,MAAM,CAAC,MAAM,MAAM,GAAG,IAAI,CAAA"}
|