@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
|
@@ -63,6 +63,9 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
63
63
|
const invalid = (0, field_1.invalidOf)(props["aria-invalid"], field);
|
|
64
64
|
const node = React.useRef(null);
|
|
65
65
|
const [grown, setGrown] = React.useState(undefined);
|
|
66
|
+
// At its ceiling the field scrolls; below it, the content always fits, so a
|
|
67
|
+
// host may hide the scrollbar while an eased height catches up.
|
|
68
|
+
const [capped, setCapped] = React.useState(false);
|
|
66
69
|
// Both refs reach the same host: ours to measure it, and the caller's.
|
|
67
70
|
const hold = React.useCallback((el) => {
|
|
68
71
|
node.current = el;
|
|
@@ -83,6 +86,12 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
83
86
|
el.style.height = "auto";
|
|
84
87
|
const measured = el.scrollHeight;
|
|
85
88
|
el.style.height = held;
|
|
89
|
+
// Read once more at the height it had, so the change that follows starts
|
|
90
|
+
// from it: a host that eases `height` then animates from the last line, not
|
|
91
|
+
// from `auto`, which cannot be eased.
|
|
92
|
+
void el.offsetHeight;
|
|
93
|
+
const ceiling = parseFloat(getComputedStyle(el).maxHeight);
|
|
94
|
+
setCapped(Number.isFinite(ceiling) && measured > ceiling);
|
|
86
95
|
setGrown((h) => (h === measured ? h : measured));
|
|
87
96
|
}, [shown]);
|
|
88
97
|
return ((0, jsx_runtime_1.jsx)(gui_1.TextArea, { ref: hold, ...(0, slot_1.slot)("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...control_1.FIELD, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? control_1.FILL : null), width: "100%",
|
|
@@ -104,7 +113,7 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
104
113
|
// The value at the full ink, the hint at the placeholder token. gui's
|
|
105
114
|
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
106
115
|
// and a sample placeholder one rung apart.
|
|
107
|
-
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...props,
|
|
116
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...(capped ? { "data-capped": "" } : null), ...props,
|
|
108
117
|
// After the caller's props, so a passed `style` cannot silently disable
|
|
109
118
|
// growth. A fixed height is asked for with `height`.
|
|
110
119
|
style: { ...style, ...(grown ? { height: grown } : null) } }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAkB5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAEH,QAAA,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,WAAW,CAAA;AAkB5D;;;;;;;;;;;;;;;GAeG;AACH;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAC1F,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC,GAAG;IAC7D;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,uEAAuE;IACvE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAEH,QAAA,MAAM,QAAQ,wGAoGb,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
|
|
@@ -27,6 +27,9 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
27
27
|
const invalid = invalidOf(props["aria-invalid"], field);
|
|
28
28
|
const node = React.useRef(null);
|
|
29
29
|
const [grown, setGrown] = React.useState(undefined);
|
|
30
|
+
// At its ceiling the field scrolls; below it, the content always fits, so a
|
|
31
|
+
// host may hide the scrollbar while an eased height catches up.
|
|
32
|
+
const [capped, setCapped] = React.useState(false);
|
|
30
33
|
// Both refs reach the same host: ours to measure it, and the caller's.
|
|
31
34
|
const hold = React.useCallback((el) => {
|
|
32
35
|
node.current = el;
|
|
@@ -47,6 +50,12 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
47
50
|
el.style.height = "auto";
|
|
48
51
|
const measured = el.scrollHeight;
|
|
49
52
|
el.style.height = held;
|
|
53
|
+
// Read once more at the height it had, so the change that follows starts
|
|
54
|
+
// from it: a host that eases `height` then animates from the last line, not
|
|
55
|
+
// from `auto`, which cannot be eased.
|
|
56
|
+
void el.offsetHeight;
|
|
57
|
+
const ceiling = parseFloat(getComputedStyle(el).maxHeight);
|
|
58
|
+
setCapped(Number.isFinite(ceiling) && measured > ceiling);
|
|
50
59
|
setGrown((h) => (h === measured ? h : measured));
|
|
51
60
|
}, [shown]);
|
|
52
61
|
return (_jsx(TextArea, { ref: hold, ...slot("textarea"), rows: Math.max(rows ?? MIN_ROWS, uncontrolled ? typed : rowsOf(value)), value: value, defaultValue: defaultValue, onChangeText: uncontrolled ? (t) => setTyped(rowsOf(t)) : undefined, ...FIELD, ...(density === "compact" ? { bg: "$panel" } : null), ...(fill ? FILL : null), width: "100%",
|
|
@@ -68,7 +77,7 @@ const Textarea = /* @__PURE__ */ React.forwardRef(function Textarea({ rows, valu
|
|
|
68
77
|
// The value at the full ink, the hint at the placeholder token. gui's
|
|
69
78
|
// Input sub-theme draws its value at 80% grey, which left a typed value
|
|
70
79
|
// and a sample placeholder one rung apart.
|
|
71
|
-
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...props,
|
|
80
|
+
color: "$ink", placeholderTextColor: "$placeholderColor", fontSize: box.font, ...(dense ? { lineHeight: line } : null), opacity: props.disabled ? 0.5 : 1, ...(invalid ? { "aria-invalid": true } : null), ...(capped ? { "data-capped": "" } : null), ...props,
|
|
72
81
|
// After the caller's props, so a passed `style` cannot silently disable
|
|
73
82
|
// growth. A fixed height is asked for with `height`.
|
|
74
83
|
style: { ...style, ...(grown ? { height: grown } : null) } }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAkB,MAAM,WAAW,CAAA;AAC5D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,qCAAqC;AACrC,MAAM,QAAQ,GAAG,CAAC,CAAA;AAElB;;;;GAIG;AACH,MAAM,IAAI,GAA8B,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;AAE/E,MAAM,MAAM,GAAG,CAAC,CAAU,EAAE,EAAE,CAC5B,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAA;AAwClD,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,CAAC,UAAU,CAC/C,SAAS,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAG,KAAK,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG;IAClG,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IACzC,MAAM,GAAG,GAAG,GAAG,CAAC,QAAQ,CAAC,CAAA;IACzB,MAAM,IAAI,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3B,MAAM,KAAK,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,IAAI,CAAA;IACpD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAA;IACpE,MAAM,YAAY,GAAG,KAAK,KAAK,SAAS,CAAA;IACxC,MAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,CAAA;IAEvD,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAA6B,IAAI,CAAC,CAAA;IAC3D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqB,SAAS,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"textarea.js","sourceRoot":"","sources":["../../../src/backends/gui/textarea.tsx"],"names":[],"mappings":"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"}
|
package/dist/chat/Composer.cjs
CHANGED
|
@@ -6,24 +6,40 @@ exports.useUpload = useUpload;
|
|
|
6
6
|
exports.Composer = Composer;
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
/**
|
|
9
|
-
* Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio,
|
|
10
|
-
* room, a reply, a run being steered. A surface hands it
|
|
11
|
-
* nothing else; the field, the keys, the controls and
|
|
9
|
+
* Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio, the
|
|
10
|
+
* browser extension, a room, a reply, a run being steered. A surface hands it
|
|
11
|
+
* slots and defaults and nothing else; the field, the keys, the controls and
|
|
12
|
+
* their look are here once.
|
|
12
13
|
*
|
|
13
|
-
*
|
|
14
|
+
* ╭──────────────────────────────────────╮
|
|
14
15
|
* │ the field │
|
|
15
|
-
* │
|
|
16
|
-
*
|
|
17
|
-
*
|
|
16
|
+
* │ │
|
|
17
|
+
* │ + carried… children ✦ 🎙⌄ ◌ │ + menu, what the draft carries,
|
|
18
|
+
* ╰──────────────────────────────────────╯ commands, dictation, voice ⇄ send
|
|
19
|
+
* Project ⌄ chips… usage Model Effort Mode
|
|
20
|
+
*
|
|
21
|
+
* ONE SURFACE: a rounded rectangle a step above the ground it stands on
|
|
22
|
+
* (`--composer-ground`), one even 1px edge all the way round and nothing inset
|
|
23
|
+
* along its top. The edge brightens softly under a pointer and on focus. A
|
|
24
|
+
* conversation nothing keeps (`forgetful`) is the same frame with no ground, its
|
|
25
|
+
* edge dashed — the one cue, so nothing above the composer has to say it.
|
|
26
|
+
*
|
|
27
|
+
* ONE ROW of controls inside the frame's foot: ghosts on one centreline, one
|
|
28
|
+
* glyph size, their ink lifting under a pointer. The last place is voice mode
|
|
29
|
+
* while the draft is empty and send once it has words — send fades and grows in
|
|
30
|
+
* there, so the row never shifts as the draft fills.
|
|
31
|
+
*
|
|
32
|
+
* UNDER THE FRAME, one quiet line of words at the frame's text edge: where a
|
|
33
|
+
* run goes (the surface's pills) and its chips at the start; the host's usage,
|
|
34
|
+
* the model, the effort and the mode at the end. It wraps on a phone.
|
|
18
35
|
*
|
|
19
36
|
* Above the frame: the surface's `head`, the `/` or `@` list, and the `note`.
|
|
20
|
-
* Under it, one row: the surface's chips, then the model, the effort and the mode.
|
|
21
37
|
*
|
|
22
38
|
* THE PERSON'S SETTING (@hanzo/appearance `useComposing`, Settings →
|
|
23
39
|
* Appearance) decides which key sends and whether the chips, the model
|
|
24
40
|
* selector and the mode are drawn, everywhere at once. An axis they left on
|
|
25
|
-
* Auto takes the surface's `defaults
|
|
26
|
-
*
|
|
41
|
+
* Auto takes the surface's `defaults`; the model is drawn until they turn it
|
|
42
|
+
* off.
|
|
27
43
|
*
|
|
28
44
|
* Its paint is @hanzo/design's: `$` tokens and `--primary`, sized through
|
|
29
45
|
* `--density` (the round controls are @hanzo/composer's `Control`), so text
|
|
@@ -44,13 +60,12 @@ const gui_2 = require("../backends/gui/index.cjs");
|
|
|
44
60
|
const slot_1 = require("../backends/gui/slot.cjs");
|
|
45
61
|
const glass_1 = require("../glass.cjs");
|
|
46
62
|
const ChipSelect_1 = require("../product/ChipSelect.cjs");
|
|
47
|
-
const Dial_1 = require("./Dial.cjs");
|
|
48
63
|
const Dictation_1 = require("./Dictation.cjs");
|
|
49
64
|
const Mention_1 = require("./Mention.cjs");
|
|
50
65
|
const Palette_1 = require("./Palette.cjs");
|
|
51
66
|
const Plus_1 = require("./Plus.cjs");
|
|
52
67
|
const send_1 = require("./send.cjs");
|
|
53
|
-
const
|
|
68
|
+
const look_1 = require("./look.cjs");
|
|
54
69
|
const Status_1 = require("./Status.cjs");
|
|
55
70
|
const Tune_1 = require("./Tune.cjs");
|
|
56
71
|
/**
|
|
@@ -64,23 +79,47 @@ exports.MEASURE = 'var(--container-prose, 48rem)';
|
|
|
64
79
|
exports.GAP = 20;
|
|
65
80
|
/** The composer's width under a thread: the measure less its 0.75rem gutters, centred, so its edges are the text's. */
|
|
66
81
|
exports.measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${exports.MEASURE} - 1.5rem)`, mx: 'auto' };
|
|
67
|
-
/** The round controls' box, px, and a phone's, a thumb's width kept small so the frame
|
|
82
|
+
/** The round controls' box, px, and a phone's, a thumb's width kept small so the frame stays a slim bar: `+`, the mic, voice and send all take it, so they share one centreline. */
|
|
68
83
|
exports.ROUND = 32;
|
|
69
84
|
const TAP = 36;
|
|
70
|
-
/** The space between two things in a row
|
|
85
|
+
/** The space between two things in a row, px: one gap, so a row reads evenly set. */
|
|
71
86
|
const SPACE = 4;
|
|
72
|
-
/** The frame's corner, px
|
|
73
|
-
const CORNER =
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
87
|
+
/** The frame's corner, px. */
|
|
88
|
+
const CORNER = 16;
|
|
89
|
+
/** The frame's edge, px: one whole pixel, so it lands on the pixel grid at every ratio. */
|
|
90
|
+
const EDGE = 1;
|
|
91
|
+
/** How far the controls stand in from the frame's edge, px. */
|
|
92
|
+
const INSET = 6;
|
|
93
|
+
/** Where the words stand in from the frame's outer edge, px: the field's text, and the words of the row under it. */
|
|
94
|
+
const TEXT = 16;
|
|
95
|
+
/** A word's own gutter under the frame, px, so its ground under a pointer reaches past its letters. */
|
|
96
|
+
const GUTTER = 5;
|
|
97
|
+
/** The field at rest, px: two lines' room on a laptop, so the frame reads as a place to write; one on a phone. */
|
|
98
|
+
const REST = 52;
|
|
99
|
+
const REST_PHONE = 40;
|
|
100
|
+
/** How tall the field grows before it scrolls, px: ten lines on a laptop, six on a phone, where the keyboard has the rest. */
|
|
101
|
+
const CEILING = 240;
|
|
102
|
+
const CEILING_PHONE = 160;
|
|
77
103
|
/** The ink on a filled round: the accent's own foreground. */
|
|
78
104
|
const ON = 'var(--primary-foreground)';
|
|
79
|
-
/**
|
|
80
|
-
const
|
|
81
|
-
/** What the draft carries, as a chip: a filled tab after `+` on a laptop; on a phone a pill in a row of its own above the field, the pills' shape (round, a hairline, no fill) as tall as the controls, so the controls' row never wraps. */
|
|
82
|
-
const CARRIED = { height: 28, rounded: 8, bg: '$hover', paddingInlineStart: 8 };
|
|
105
|
+
/** What the draft carries, as a chip: a filled pill after `+` on a laptop; on a phone a pill in a row of its own above the field, round with a hairline and no fill, as tall as the controls, so the controls' row never wraps. */
|
|
106
|
+
const CARRIED = { height: 28, rounded: 999, bg: '$hover', paddingInlineStart: 10 };
|
|
83
107
|
const pill = (height) => ({ height, rounded: 999, borderWidth: 1, borderColor: '$borderColor', bg: 'transparent', paddingInlineStart: 12 });
|
|
108
|
+
/** One of the two layers in the row's last place: shown, it is there; hidden, it fades and shrinks to 0.9 and takes no press. */
|
|
109
|
+
const layer = (shown) => ({
|
|
110
|
+
position: 'absolute',
|
|
111
|
+
t: 0,
|
|
112
|
+
l: 0,
|
|
113
|
+
r: 0,
|
|
114
|
+
b: 0,
|
|
115
|
+
items: 'center',
|
|
116
|
+
justify: 'center',
|
|
117
|
+
transition: 'quickest',
|
|
118
|
+
opacity: shown ? 1 : 0,
|
|
119
|
+
scale: shown ? 1 : 0.9,
|
|
120
|
+
pointerEvents: shown ? 'auto' : 'none',
|
|
121
|
+
...(shown ? null : { 'aria-hidden': true }),
|
|
122
|
+
});
|
|
84
123
|
/**
|
|
85
124
|
* Under a coarse pointer @hanzo/design floors every button at `--tap-target`,
|
|
86
125
|
* 44px, with !important. The composer's controls are its secondary chrome — the
|
|
@@ -145,7 +184,7 @@ function useLift() {
|
|
|
145
184
|
}, []);
|
|
146
185
|
return lift;
|
|
147
186
|
}
|
|
148
|
-
function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, ready: readyProp, placeholder, label, rows = 1, maxHeight
|
|
187
|
+
function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, ready: readyProp, placeholder, label, rows = 1, maxHeight, field, hint, status, children, head, pills, carried, plus, slash, at, commands, chips, mind, effort, limits, onUpgrade, mode, voice, language = null, onLanguage, talk, starters, note, column = false, forgetful = false, narrow: narrowProp, defaults, ...props }) {
|
|
149
188
|
const { t } = (0, react_1.useI18n)();
|
|
150
189
|
const inheritedStatus = (0, Status_1.useComposerStatus)();
|
|
151
190
|
const media = (0, gui_1.useMedia)();
|
|
@@ -155,7 +194,7 @@ function Composer({ value, onChange, onSend, onStop, busy = false, disabled = fa
|
|
|
155
194
|
const chosen = (0, appearance_1.useComposing)();
|
|
156
195
|
const rule = chosen.send ?? defaults?.send ?? 'enter';
|
|
157
196
|
const showChips = chosen.chips ?? defaults?.chips ?? true;
|
|
158
|
-
const showModel = chosen.model ?? defaults?.model ??
|
|
197
|
+
const showModel = chosen.model ?? defaults?.model ?? true;
|
|
159
198
|
const showMode = chosen.mode ?? defaults?.mode ?? true;
|
|
160
199
|
const lit = readyProp ?? (0, send_1.ready)(value);
|
|
161
200
|
const live = busy ? Boolean(onStop) : lit && !disabled;
|
|
@@ -207,7 +246,9 @@ function Composer({ value, onChange, onSend, onStop, busy = false, disabled = fa
|
|
|
207
246
|
e.preventDefault?.();
|
|
208
247
|
submit();
|
|
209
248
|
};
|
|
210
|
-
const input = ((0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder ?? t(exports.ASK), disabled: disabled, borderWidth: 0, fontSize: 16, lineHeight: 24,
|
|
249
|
+
const input = ((0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder ?? t(exports.ASK), disabled: disabled, borderWidth: 0, fontSize: 16, lineHeight: 24,
|
|
250
|
+
// The text stands `TEXT` in from the frame's outer edge, where the words under the frame stand.
|
|
251
|
+
px: TEXT - EDGE - INSET, pt: 6, pb: 6, minH: narrow ? REST_PHONE : REST, maxH: maxHeight ?? (narrow ? CEILING_PHONE : CEILING), bg: "transparent", color: "$ink", placeholderTextColor: "$placeholderColor", "aria-label": label ?? placeholder ?? t(exports.ASK), ...field,
|
|
211
252
|
// After `field`: a caller's `onKeyDown` runs first and can claim the key,
|
|
212
253
|
// but cannot replace the send rule and the IME guard.
|
|
213
254
|
value: value, onChangeText: onChange, onKeyDown: (e) => {
|
|
@@ -215,19 +256,33 @@ function Composer({ value, onChange, onSend, onStop, busy = false, disabled = fa
|
|
|
215
256
|
if (!e?.defaultPrevented)
|
|
216
257
|
keyed(e);
|
|
217
258
|
} }));
|
|
218
|
-
|
|
259
|
+
// The row's last place: send (stop while a turn runs) once there is something
|
|
260
|
+
// to send, voice mode while the draft is empty. Both stand in one box, so the
|
|
261
|
+
// row never moves; the one that is not wanted fades and shrinks out.
|
|
262
|
+
const sending = busy || lit;
|
|
263
|
+
const send = ((0, jsx_runtime_1.jsx)(composer_1.Control, { type: "button", size: hit, fill: true, rounded: 999, ...(0, slot_1.slot)('composer-send'), "aria-label": t(busy ? 'Stop' : 'Send'), "aria-disabled": !live || undefined, tabIndex: sending ? 0 : -1, pressStyle: { scale: 0.92 }, focusVisibleStyle: look_1.RING, onClick: () => {
|
|
219
264
|
if (!live)
|
|
220
265
|
return;
|
|
221
266
|
if (busy)
|
|
222
267
|
onStop?.();
|
|
223
268
|
else
|
|
224
269
|
onSend();
|
|
225
|
-
}, children: busy ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size:
|
|
270
|
+
}, children: busy ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size: 12, color: ON, fill: ON }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: look_1.GLYPH, strokeWidth: 2, color: ON }) }));
|
|
271
|
+
const last = ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-last'), position: "relative", width: hit, height: hit, shrink: 0, children: [talk ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...layer(!sending), children: (0, jsx_runtime_1.jsx)(composer_1.Control, { asChild: true, size: hit, rounded: 999, ...look_1.GHOST, focusVisibleStyle: look_1.RING, children: (0, jsx_runtime_1.jsx)(voice_1.Voice, { voice: talk, disabled: disabled || sending, "data-slot": "composer-talk", says: { idle: t('Voice mode'), listening: t('In conversation — click to hang up'), speaking: t('Hanzo is speaking — talk to interrupt') }, children: () => (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AudioLines, { size: look_1.GLYPH, strokeWidth: look_1.STROKE, color: "currentColor" }) }) }) })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...layer(sending), children: send })] }));
|
|
226
272
|
const mention = listed && shelf && typed ? (0, jsx_runtime_1.jsx)(Mention_1.Mention, { shelf: shelf, rows: listed, index: row, onPick: pick, skills: typed.char === '/' }) : null;
|
|
227
273
|
const above = starters || head || note || mention ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer-head'), gap: "$1.5", children: [starters, head, mention, note ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('composer-note'), fontSize: 12, color: "$soft", text: "center", self: "center", children: note })) : null] })) : null;
|
|
228
|
-
const things = (carried ?? []).map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-carried'), items: "center", gap: 6, paddingInlineEnd: 4, maxW: 180, ...(narrow ? pill(hit) : CARRIED), children: [c.icon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, children: c.icon }) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "button", "aria-label": t('Remove {name}', { name: c.label }), onPress: c.onRemove, width: 20, height: 20, rounded:
|
|
274
|
+
const things = (carried ?? []).map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-carried'), items: "center", gap: 6, paddingInlineEnd: 4, maxW: 180, ...(narrow ? pill(hit) : CARRIED), children: [c.icon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, children: c.icon }) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "button", "aria-label": t('Remove {name}', { name: c.label }), onPress: c.onRemove, width: 20, height: 20, rounded: 999, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12, color: "$hint" }) })] }, c.id)));
|
|
229
275
|
const shown = showChips && chips?.length ? chips : null;
|
|
230
|
-
const
|
|
231
|
-
const
|
|
232
|
-
|
|
276
|
+
const usage = status === undefined ? inheritedStatus : status;
|
|
277
|
+
const tuned = (showModel && mind) || effort || (showMode && mode);
|
|
278
|
+
const word = narrow ? TAP : 28;
|
|
279
|
+
const under = pills || shown || usage || tuned ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-foot'), items: "center", gap: 2, flexWrap: "wrap", rowGap: 2, width: "100%",
|
|
280
|
+
// A word's letters stand where the field's do: TEXT in, less the word's own gutter.
|
|
281
|
+
px: TEXT - GUTTER, style: FLOOR, children: [pills ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-pills'), items: "center", gap: 2, flexWrap: "wrap", rowGap: 2, children: (0, jsx_runtime_1.jsx)(ChipSelect_1.Pills.Provider, { value: word, children: pills }) })) : null, shown ? (0, jsx_runtime_1.jsx)(Tune_1.Chips, { chips: shown }) : null, usage || tuned ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 2, marginInlineStart: "auto", shrink: 0, flexWrap: "wrap", children: [usage ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-status'), items: "center", children: usage })) : null, tuned ? ((0, jsx_runtime_1.jsx)(Tune_1.Tune, { mind: showModel ? mind : null, effort: effort, mode: showMode ? mode : null, onUpgrade: onUpgrade, limits: limits, disabled: disabled })) : null] })) : null] })) : null;
|
|
282
|
+
return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer-shell'), ...(column ? exports.measure : { width: '100%' }), gap: 8, ...(lift ? { mb: lift } : null), ...props, children: [above, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer'), width: "100%", rounded: CORNER, borderWidth: EDGE, ...(0, glass_1.glass)(2), p: INSET, gap: SPACE, cursor: "text", ...(forgetful ? { 'data-forgetful': '' } : null),
|
|
283
|
+
// A press on the frame's own ground is a press in the field: the whole surface is the target.
|
|
284
|
+
onPress: (e) => {
|
|
285
|
+
if (e?.target === e?.currentTarget)
|
|
286
|
+
e.currentTarget.querySelector('[data-slot="composer-field"]')?.focus();
|
|
287
|
+
}, style: FLOOR, children: [narrow && things.length ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-carry'), items: "center", gap: SPACE, flexWrap: "wrap", rowGap: SPACE, children: things })) : null, input, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: SPACE, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-start'), items: "center", gap: SPACE, flex: 1, minW: 0, flexWrap: "wrap", children: [plus ? (0, jsx_runtime_1.jsx)(Plus_1.Plus, { ...plus, size: hit, disabled: disabled || plus.disabled }) : null, narrow ? null : things, children] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-end'), items: "center", gap: SPACE, shrink: 0, children: [hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", numberOfLines: 1, paddingInlineEnd: 4, children: hint })) : null, commands?.length ? (0, jsx_runtime_1.jsx)(Palette_1.Palette, { commands: commands, open: palette, onOpenChange: setPalette, size: hit, disabled: disabled }) : null, voice ? (0, jsx_runtime_1.jsx)(Dictation_1.Dictation, { voice: voice, disabled: disabled, size: hit, language: language, ...(onLanguage ? { onLanguage } : {}) }) : null, last] })] })] }), under] }));
|
|
233
288
|
}
|
package/dist/chat/Composer.d.ts
CHANGED
|
@@ -1,22 +1,38 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio,
|
|
3
|
-
* room, a reply, a run being steered. A surface hands it
|
|
4
|
-
* nothing else; the field, the keys, the controls and
|
|
2
|
+
* Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio, the
|
|
3
|
+
* browser extension, a room, a reply, a run being steered. A surface hands it
|
|
4
|
+
* slots and defaults and nothing else; the field, the keys, the controls and
|
|
5
|
+
* their look are here once.
|
|
5
6
|
*
|
|
6
|
-
*
|
|
7
|
+
* ╭──────────────────────────────────────╮
|
|
7
8
|
* │ the field │
|
|
8
|
-
* │
|
|
9
|
-
*
|
|
10
|
-
*
|
|
9
|
+
* │ │
|
|
10
|
+
* │ + carried… children ✦ 🎙⌄ ◌ │ + menu, what the draft carries,
|
|
11
|
+
* ╰──────────────────────────────────────╯ commands, dictation, voice ⇄ send
|
|
12
|
+
* Project ⌄ chips… usage Model Effort Mode
|
|
13
|
+
*
|
|
14
|
+
* ONE SURFACE: a rounded rectangle a step above the ground it stands on
|
|
15
|
+
* (`--composer-ground`), one even 1px edge all the way round and nothing inset
|
|
16
|
+
* along its top. The edge brightens softly under a pointer and on focus. A
|
|
17
|
+
* conversation nothing keeps (`forgetful`) is the same frame with no ground, its
|
|
18
|
+
* edge dashed — the one cue, so nothing above the composer has to say it.
|
|
19
|
+
*
|
|
20
|
+
* ONE ROW of controls inside the frame's foot: ghosts on one centreline, one
|
|
21
|
+
* glyph size, their ink lifting under a pointer. The last place is voice mode
|
|
22
|
+
* while the draft is empty and send once it has words — send fades and grows in
|
|
23
|
+
* there, so the row never shifts as the draft fills.
|
|
24
|
+
*
|
|
25
|
+
* UNDER THE FRAME, one quiet line of words at the frame's text edge: where a
|
|
26
|
+
* run goes (the surface's pills) and its chips at the start; the host's usage,
|
|
27
|
+
* the model, the effort and the mode at the end. It wraps on a phone.
|
|
11
28
|
*
|
|
12
29
|
* Above the frame: the surface's `head`, the `/` or `@` list, and the `note`.
|
|
13
|
-
* Under it, one row: the surface's chips, then the model, the effort and the mode.
|
|
14
30
|
*
|
|
15
31
|
* THE PERSON'S SETTING (@hanzo/appearance `useComposing`, Settings →
|
|
16
32
|
* Appearance) decides which key sends and whether the chips, the model
|
|
17
33
|
* selector and the mode are drawn, everywhere at once. An axis they left on
|
|
18
|
-
* Auto takes the surface's `defaults
|
|
19
|
-
*
|
|
34
|
+
* Auto takes the surface's `defaults`; the model is drawn until they turn it
|
|
35
|
+
* off.
|
|
20
36
|
*
|
|
21
37
|
* Its paint is @hanzo/design's: `$` tokens and `--primary`, sized through
|
|
22
38
|
* `--density` (the round controls are @hanzo/composer's `Control`), so text
|
|
@@ -52,7 +68,7 @@ export declare const measure: {
|
|
|
52
68
|
readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
|
|
53
69
|
readonly mx: 'auto';
|
|
54
70
|
};
|
|
55
|
-
/** The round controls' box, px, and a phone's, a thumb's width kept small so the frame
|
|
71
|
+
/** The round controls' box, px, and a phone's, a thumb's width kept small so the frame stays a slim bar: `+`, the mic, voice and send all take it, so they share one centreline. */
|
|
56
72
|
export declare const ROUND = 32;
|
|
57
73
|
/** One thing the draft carries, after `+`: a file, a skill that is on. */
|
|
58
74
|
export interface Carried {
|
|
@@ -78,19 +94,19 @@ export interface ComposerProps extends Stack {
|
|
|
78
94
|
label?: string;
|
|
79
95
|
/** Row floor for the field. It grows with the draft from here. */
|
|
80
96
|
rows?: number;
|
|
81
|
-
/** Ceiling for that growth, px. Past it the field scrolls. */
|
|
97
|
+
/** Ceiling for that growth, px. Past it the field scrolls. Unset, ten lines on a laptop and six on a phone. */
|
|
82
98
|
maxHeight?: number;
|
|
83
99
|
/** The field's own props — a ref, a testid, a paste handler. */
|
|
84
100
|
field?: FieldProps;
|
|
85
101
|
/** A word at the end of the tool row, before the controls: a status. */
|
|
86
102
|
hint?: string;
|
|
87
|
-
/** Account usage and context
|
|
103
|
+
/** Account usage and context, a word under the frame; null hides a host-provided control. */
|
|
88
104
|
status?: ReactNode;
|
|
89
105
|
/** The tool row's start, after `+` and what the draft carries. */
|
|
90
106
|
children?: ReactNode;
|
|
91
107
|
/** Above the frame, at its width: what the draft is sent with, a banner. */
|
|
92
108
|
head?: ReactNode;
|
|
93
|
-
/**
|
|
109
|
+
/** Under the frame, at the row's start, as words: where a run goes, which repository, which branch. */
|
|
94
110
|
pills?: ReactNode;
|
|
95
111
|
/** What the draft carries, as chips after `+`. */
|
|
96
112
|
carried?: readonly Carried[];
|
|
@@ -118,7 +134,7 @@ export interface ComposerProps extends Stack {
|
|
|
118
134
|
/** The language dictation listens in, null for Auto, and how to change it. */
|
|
119
135
|
language?: string | null;
|
|
120
136
|
onLanguage?: (id: string | null) => void;
|
|
121
|
-
/** A spoken conversation (@hanzo/voice `useTalk`): the
|
|
137
|
+
/** A spoken conversation (@hanzo/voice `useTalk`): the row's last place while the draft is empty. */
|
|
122
138
|
talk?: Machine;
|
|
123
139
|
/** Above the frame, nearest it: the person's suggestions, at every width. */
|
|
124
140
|
starters?: ReactNode;
|
|
@@ -126,15 +142,15 @@ export interface ComposerProps extends Stack {
|
|
|
126
142
|
note?: ReactNode;
|
|
127
143
|
/** At the reading column's width (`measure`), centred: the composer under a thread, so its edges are the text's. Absent, the width of what holds it. */
|
|
128
144
|
column?: boolean;
|
|
129
|
-
/**
|
|
130
|
-
|
|
131
|
-
/** A phone: every control is 36px
|
|
145
|
+
/** A conversation nothing keeps (a private chat): the frame drops its ground and its drop and keeps its edge, dashed — the one cue, so nothing above the composer has to say it. */
|
|
146
|
+
forgetful?: boolean;
|
|
147
|
+
/** A phone: every control is 36px and every word under the frame as tall, each row evenly set. Absent, the viewport decides. */
|
|
132
148
|
narrow?: boolean;
|
|
133
149
|
/** This surface's answer where the person left an axis on Auto. */
|
|
134
150
|
defaults?: Composing;
|
|
135
151
|
}
|
|
136
152
|
/** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
|
|
137
153
|
export declare function useUpload(upload: (() => void) | undefined): void;
|
|
138
|
-
export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, ready: readyProp, placeholder, label, rows, maxHeight, field, hint, status, children, head, pills, carried, plus, slash, at, commands, chips, mind, effort, limits, onUpgrade, mode, voice, language, onLanguage, talk, starters, note, column,
|
|
154
|
+
export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, ready: readyProp, placeholder, label, rows, maxHeight, field, hint, status, children, head, pills, carried, plus, slash, at, commands, chips, mind, effort, limits, onUpgrade, mode, voice, language, onLanguage, talk, starters, note, column, forgetful, narrow: narrowProp, defaults, ...props }: ComposerProps): import("react").JSX.Element;
|
|
139
155
|
export {};
|
|
140
156
|
//# sourceMappingURL=Composer.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"AAEA
|
|
1
|
+
{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"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"}
|