@prestack/thread-ui 0.1.1 → 0.1.3
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/CHANGELOG.md +518 -0
- package/dist/ui/animations/anm_appear.d.ts +8 -8
- package/dist/ui/animations/anm_blur_in.d.ts +12 -12
- package/dist/ui/animations/anm_blur_out.d.ts +12 -12
- package/dist/ui/animations/anm_dismiss.d.ts +12 -12
- package/dist/ui/animations/anm_drop.d.ts +12 -12
- package/dist/ui/animations/anm_fall.d.ts +12 -12
- package/dist/ui/animations/anm_flash.d.ts +9 -9
- package/dist/ui/animations/anm_glow.d.ts +8 -8
- package/dist/ui/animations/anm_lift.d.ts +8 -8
- package/dist/ui/animations/anm_nudge.d.ts +8 -8
- package/dist/ui/animations/anm_pop_in.d.ts +16 -16
- package/dist/ui/animations/anm_pop_out.d.ts +16 -16
- package/dist/ui/animations/anm_press.d.ts +9 -9
- package/dist/ui/animations/anm_pulse.d.ts +10 -10
- package/dist/ui/animations/anm_rise.d.ts +12 -12
- package/dist/ui/animations/anm_shake.d.ts +11 -11
- package/dist/ui/animations/anm_slide_in_left.d.ts +12 -12
- package/dist/ui/animations/anm_slide_in_right.d.ts +12 -12
- package/dist/ui/animations/anm_slide_out_left.d.ts +12 -12
- package/dist/ui/animations/anm_slide_out_right.d.ts +12 -12
- package/dist/ui/animations/anm_spin.d.ts +8 -8
- package/dist/ui/animations/anm_swell.d.ts +8 -8
- package/dist/ui/animations/anm_wobble.d.ts +13 -13
- package/dist/ui/animations/anm_zoom_in.d.ts +12 -12
- package/dist/ui/animations/anm_zoom_out.d.ts +12 -12
- package/dist/ui/animations.d.ts +8 -8
- package/dist/ui/animations.js +4 -4
- package/dist/ui/animations.ts +1 -1
- package/dist/ui/attach.js +25 -80
- package/dist/ui/attach.ts +12 -69
- package/dist/ui/charts.d.ts +0 -3
- package/dist/ui/charts.js +3 -7
- package/dist/ui/charts.tsx +0 -4
- package/dist/ui/checked.d.ts +1 -1
- package/dist/ui/checked.ts +1 -1
- package/dist/ui/collector.js +1 -1
- package/dist/ui/collector.ts +1 -1
- package/dist/ui/compositions.d.ts +9 -3
- package/dist/ui/compositions.js +9 -158
- package/dist/ui/compositions.ts +6 -170
- package/dist/ui/content.js +4 -7
- package/dist/ui/content.tsx +4 -15
- package/dist/ui/controls.js +1 -1
- package/dist/ui/door.d.ts +1 -1
- package/dist/ui/elements/accordion.d.ts +2 -1
- package/dist/ui/elements/accordion.js +4 -4
- package/dist/ui/elements/accordion.tsx +2 -1
- package/dist/ui/elements/aspect-ratio.d.ts +2 -1
- package/dist/ui/elements/aspect-ratio.js +1 -1
- package/dist/ui/elements/aspect-ratio.tsx +2 -1
- package/dist/ui/elements/avatar.d.ts +2 -1
- package/dist/ui/elements/avatar.js +3 -3
- package/dist/ui/elements/avatar.tsx +2 -1
- package/dist/ui/elements/badge.d.ts +2 -1
- package/dist/ui/elements/badge.js +3 -3
- package/dist/ui/elements/badge.tsx +2 -1
- package/dist/ui/elements/bars.d.ts +2 -1
- package/dist/ui/elements/bars.js +5 -5
- package/dist/ui/elements/bars.tsx +2 -1
- package/dist/ui/elements/bars.works.js +3 -3
- package/dist/ui/elements/box.d.ts +2 -1
- package/dist/ui/elements/box.js +1 -1
- package/dist/ui/elements/box.tsx +2 -1
- package/dist/ui/elements/breadcrumb.d.ts +2 -1
- package/dist/ui/elements/breadcrumb.js +5 -5
- package/dist/ui/elements/breadcrumb.tsx +2 -1
- package/dist/ui/elements/breadcrumb.works.js +1 -1
- package/dist/ui/elements/button.d.ts +2 -1
- package/dist/ui/elements/button.js +3 -3
- package/dist/ui/elements/button.tsx +2 -1
- package/dist/ui/elements/button.works.js +2 -2
- package/dist/ui/elements/column.d.ts +2 -1
- package/dist/ui/elements/column.js +1 -1
- package/dist/ui/elements/column.tsx +2 -1
- package/dist/ui/elements/consent.d.ts +2 -1
- package/dist/ui/elements/consent.js +10 -10
- package/dist/ui/elements/consent.tsx +2 -1
- package/dist/ui/elements/consent.works.js +1 -1
- package/dist/ui/elements/donut.d.ts +2 -1
- package/dist/ui/elements/donut.js +4 -4
- package/dist/ui/elements/donut.tsx +2 -1
- package/dist/ui/elements/donut.works.js +2 -2
- package/dist/ui/elements/each.d.ts +2 -1
- package/dist/ui/elements/each.js +3 -3
- package/dist/ui/elements/each.tsx +2 -1
- package/dist/ui/elements/each.works.js +2 -2
- package/dist/ui/elements/empty.d.ts +2 -1
- package/dist/ui/elements/empty.js +2 -2
- package/dist/ui/elements/empty.tsx +2 -1
- package/dist/ui/elements/field.d.ts +2 -1
- package/dist/ui/elements/field.js +3 -3
- package/dist/ui/elements/field.tsx +2 -1
- package/dist/ui/elements/field.works.js +1 -1
- package/dist/ui/elements/funnel.d.ts +2 -1
- package/dist/ui/elements/funnel.js +5 -5
- package/dist/ui/elements/funnel.tsx +2 -1
- package/dist/ui/elements/funnel.works.js +3 -3
- package/dist/ui/elements/gauge.d.ts +2 -1
- package/dist/ui/elements/gauge.js +3 -3
- package/dist/ui/elements/gauge.tsx +2 -1
- package/dist/ui/elements/gauge.works.js +1 -1
- package/dist/ui/elements/glyph.d.ts +2 -1
- package/dist/ui/elements/glyph.js +3 -3
- package/dist/ui/elements/glyph.tsx +2 -1
- package/dist/ui/elements/glyph.works.js +1 -1
- package/dist/ui/elements/grid.d.ts +2 -1
- package/dist/ui/elements/grid.js +1 -1
- package/dist/ui/elements/grid.tsx +2 -1
- package/dist/ui/elements/heatmap.d.ts +2 -1
- package/dist/ui/elements/heatmap.js +5 -5
- package/dist/ui/elements/heatmap.tsx +2 -1
- package/dist/ui/elements/heatmap.works.js +1 -1
- package/dist/ui/elements/hit-box.d.ts +2 -1
- package/dist/ui/elements/hit-box.js +2 -2
- package/dist/ui/elements/hit-box.tsx +2 -1
- package/dist/ui/elements/hit-box.works.d.ts +2 -2
- package/dist/ui/elements/hit-box.works.js +5 -5
- package/dist/ui/elements/hit-box.works.tsx +2 -1
- package/dist/ui/elements/image.d.ts +2 -1
- package/dist/ui/elements/image.js +2 -2
- package/dist/ui/elements/image.tsx +2 -1
- package/dist/ui/elements/line-chart.d.ts +2 -1
- package/dist/ui/elements/line-chart.js +4 -4
- package/dist/ui/elements/line-chart.tsx +2 -1
- package/dist/ui/elements/line-chart.works.js +2 -2
- package/dist/ui/elements/link.d.ts +2 -1
- package/dist/ui/elements/link.js +3 -3
- package/dist/ui/elements/link.tsx +2 -1
- package/dist/ui/elements/link.works.js +1 -1
- package/dist/ui/elements/media.d.ts +2 -1
- package/dist/ui/elements/media.js +2 -2
- package/dist/ui/elements/media.tsx +2 -1
- package/dist/ui/elements/menu.d.ts +2 -1
- package/dist/ui/elements/menu.js +5 -5
- package/dist/ui/elements/menu.tsx +2 -1
- package/dist/ui/elements/menu.works.d.ts +2 -1
- package/dist/ui/elements/menu.works.js +5 -5
- package/dist/ui/elements/menu.works.tsx +2 -1
- package/dist/ui/elements/money.d.ts +3 -1
- package/dist/ui/elements/money.js +10 -5
- package/dist/ui/elements/money.tsx +12 -3
- package/dist/ui/elements/money.works.js +1 -1
- package/dist/ui/elements/pagination.d.ts +2 -1
- package/dist/ui/elements/pagination.js +5 -5
- package/dist/ui/elements/pagination.tsx +2 -1
- package/dist/ui/elements/progress.d.ts +2 -1
- package/dist/ui/elements/progress.js +3 -3
- package/dist/ui/elements/progress.tsx +2 -1
- package/dist/ui/elements/radio-group.d.ts +2 -1
- package/dist/ui/elements/radio-group.js +4 -4
- package/dist/ui/elements/radio-group.tsx +2 -1
- package/dist/ui/elements/radio-group.works.js +1 -1
- package/dist/ui/elements/row.d.ts +2 -1
- package/dist/ui/elements/row.js +1 -1
- package/dist/ui/elements/row.tsx +2 -1
- package/dist/ui/elements/scatter.d.ts +2 -1
- package/dist/ui/elements/scatter.js +3 -3
- package/dist/ui/elements/scatter.tsx +2 -1
- package/dist/ui/elements/scatter.works.js +1 -1
- package/dist/ui/elements/select.d.ts +2 -1
- package/dist/ui/elements/select.js +4 -4
- package/dist/ui/elements/select.tsx +2 -1
- package/dist/ui/elements/separator.d.ts +2 -1
- package/dist/ui/elements/separator.js +2 -2
- package/dist/ui/elements/separator.tsx +2 -1
- package/dist/ui/elements/skeleton.d.ts +2 -1
- package/dist/ui/elements/skeleton.js +2 -2
- package/dist/ui/elements/skeleton.tsx +2 -1
- package/dist/ui/elements/slider.d.ts +2 -1
- package/dist/ui/elements/slider.js +3 -3
- package/dist/ui/elements/slider.tsx +2 -1
- package/dist/ui/elements/sparkline.d.ts +2 -1
- package/dist/ui/elements/sparkline.js +3 -3
- package/dist/ui/elements/sparkline.tsx +2 -1
- package/dist/ui/elements/sparkline.works.js +1 -1
- package/dist/ui/elements/spinner.d.ts +2 -1
- package/dist/ui/elements/spinner.js +2 -2
- package/dist/ui/elements/spinner.tsx +2 -1
- package/dist/ui/elements/stack.d.ts +2 -1
- package/dist/ui/elements/stack.js +1 -1
- package/dist/ui/elements/stack.tsx +2 -1
- package/dist/ui/elements/stat.d.ts +2 -1
- package/dist/ui/elements/stat.js +3 -3
- package/dist/ui/elements/stat.tsx +2 -1
- package/dist/ui/elements/stat.works.js +1 -1
- package/dist/ui/elements/surface.d.ts +2 -1
- package/dist/ui/elements/surface.js +2 -2
- package/dist/ui/elements/surface.tsx +2 -1
- package/dist/ui/elements/surface.works.js +1 -1
- package/dist/ui/elements/table.d.ts +2 -1
- package/dist/ui/elements/table.js +4 -4
- package/dist/ui/elements/table.tsx +2 -1
- package/dist/ui/elements/table.works.js +1 -1
- package/dist/ui/elements/tabs.d.ts +2 -1
- package/dist/ui/elements/tabs.js +4 -4
- package/dist/ui/elements/tabs.tsx +2 -1
- package/dist/ui/elements/tabs.works.js +1 -1
- package/dist/ui/elements/text.d.ts +2 -1
- package/dist/ui/elements/text.js +2 -2
- package/dist/ui/elements/text.tsx +2 -1
- package/dist/ui/elements/textarea.d.ts +2 -1
- package/dist/ui/elements/textarea.js +4 -4
- package/dist/ui/elements/textarea.tsx +2 -1
- package/dist/ui/elements/time.d.ts +3 -1
- package/dist/ui/elements/time.js +7 -4
- package/dist/ui/elements/time.tsx +9 -2
- package/dist/ui/elements/time.works.d.ts +1 -0
- package/dist/ui/elements/time.works.js +7 -3
- package/dist/ui/elements/time.works.ts +6 -2
- package/dist/ui/elements/toggle.d.ts +2 -1
- package/dist/ui/elements/toggle.js +3 -3
- package/dist/ui/elements/toggle.tsx +2 -1
- package/dist/ui/elements/tooltip.d.ts +2 -1
- package/dist/ui/elements/tooltip.js +2 -2
- package/dist/ui/elements/tooltip.tsx +2 -1
- package/dist/ui/elements/tooltip.works.js +2 -2
- package/dist/ui/elements/value.d.ts +3 -1
- package/dist/ui/elements/value.js +10 -5
- package/dist/ui/elements/value.tsx +12 -3
- package/dist/ui/elements/value.works.js +1 -1
- package/dist/ui/elements.d.ts +15 -11
- package/dist/ui/elements.js +6 -6
- package/dist/ui/elements.ts +7 -7
- package/dist/ui/fonts.d.ts +1 -1
- package/dist/ui/fonts.js +1 -1
- package/dist/ui/generators/dev.d.ts +1 -2
- package/dist/ui/generators/dev.js +33 -37
- package/dist/ui/generators/dev.ts +30 -37
- package/dist/ui/generators/elements.d.ts +1 -0
- package/dist/ui/generators/elements.js +11 -9
- package/dist/ui/generators/elements.ts +12 -9
- package/dist/ui/generators/i18n.js +6 -23
- package/dist/ui/generators/i18n.ts +1 -18
- package/dist/ui/generators/icons.js +5 -14
- package/dist/ui/generators/icons.ts +1 -10
- package/dist/ui/generators/react.js +4 -5
- package/dist/ui/generators/react.ts +2 -3
- package/dist/ui/generators/routes.js +66 -51
- package/dist/ui/generators/routes.ts +67 -46
- package/dist/ui/generators/show.js +9 -6
- package/dist/ui/generators/show.ts +4 -2
- package/dist/ui/generators/styles.js +12 -16
- package/dist/ui/generators/styles.ts +1 -5
- package/dist/ui/generators/variants.js +3 -3
- package/dist/ui/generators/variants.ts +1 -1
- package/dist/ui/i18n/catalogs/en.js +1 -1
- package/dist/ui/i18n/format.js +1 -1
- package/dist/ui/i18n/translator.js +2 -2
- package/dist/ui/material.d.ts +11 -11
- package/dist/ui/material.js +1 -1
- package/dist/ui/materials/mat_bordered.d.ts +13 -13
- package/dist/ui/materials/mat_bordered.js +1 -1
- package/dist/ui/materials/mat_ceramic.d.ts +13 -13
- package/dist/ui/materials/mat_ceramic.js +1 -1
- package/dist/ui/materials/mat_clay.d.ts +13 -13
- package/dist/ui/materials/mat_clay.js +1 -1
- package/dist/ui/materials/mat_elevated.d.ts +13 -13
- package/dist/ui/materials/mat_elevated.js +1 -1
- package/dist/ui/materials/mat_flat.d.ts +25 -25
- package/dist/ui/materials/mat_flat.js +1 -1
- package/dist/ui/materials/mat_glass.d.ts +17 -17
- package/dist/ui/materials/mat_glass.js +1 -1
- package/dist/ui/materials/mat_lit.d.ts +13 -13
- package/dist/ui/materials/mat_lit.js +1 -1
- package/dist/ui/materials/mat_moulded.d.ts +9 -9
- package/dist/ui/materials/mat_moulded.js +1 -1
- package/dist/ui/materials.d.ts +30 -30
- package/dist/ui/materials.js +3 -3
- package/dist/ui/materials.ts +1 -1
- package/dist/ui/modes.d.ts +2 -2
- package/dist/ui/presented.js +5 -5
- package/dist/ui/provider.d.ts +3 -0
- package/dist/ui/provider.js +9 -10
- package/dist/ui/provider.tsx +7 -5
- package/dist/ui/screens.js +6 -6
- package/dist/ui/screens.ts +1 -1
- package/dist/ui/scroll-lock.js +1 -1
- package/dist/ui/series.js +1 -1
- package/dist/ui/styleguide.js +1 -1
- package/dist/ui/tokens.d.ts +2 -2
- package/dist/ui/tokens.js +3 -3
- package/dist/ui/tokens.ts +1 -1
- package/dist/ui/validators.js +1 -1
- package/dist/ui/variant.d.ts +37 -37
- package/dist/ui/variant.js +2 -2
- package/dist/ui/variants/var_avatar-round.d.ts +13 -13
- package/dist/ui/variants/var_avatar-round.js +1 -1
- package/dist/ui/variants/var_bubble-me.d.ts +12 -12
- package/dist/ui/variants/var_bubble-me.js +1 -1
- package/dist/ui/variants/var_bubble-them.d.ts +10 -10
- package/dist/ui/variants/var_bubble-them.js +1 -1
- package/dist/ui/variants/var_button-border.d.ts +61 -61
- package/dist/ui/variants/var_button-border.js +1 -1
- package/dist/ui/variants/var_button-cta.d.ts +61 -61
- package/dist/ui/variants/var_button-cta.js +1 -1
- package/dist/ui/variants/var_button-destructive-ghost.d.ts +59 -59
- package/dist/ui/variants/var_button-destructive-ghost.js +1 -1
- package/dist/ui/variants/var_button-destructive.d.ts +61 -61
- package/dist/ui/variants/var_button-destructive.js +1 -1
- package/dist/ui/variants/var_button-fill.d.ts +61 -61
- package/dist/ui/variants/var_button-fill.js +1 -1
- package/dist/ui/variants/var_button-ghost.d.ts +59 -59
- package/dist/ui/variants/var_button-ghost.js +1 -1
- package/dist/ui/variants/var_button-glass.d.ts +40 -40
- package/dist/ui/variants/var_button-glass.js +1 -1
- package/dist/ui/variants/var_button-normal.d.ts +61 -61
- package/dist/ui/variants/var_button-normal.js +1 -1
- package/dist/ui/variants/var_button-quiet.d.ts +63 -63
- package/dist/ui/variants/var_button-quiet.js +1 -1
- package/dist/ui/variants/var_card.d.ts +17 -17
- package/dist/ui/variants/var_card.js +1 -1
- package/dist/ui/variants/var_chip.d.ts +10 -10
- package/dist/ui/variants/var_chip.js +1 -1
- package/dist/ui/variants/var_choice.d.ts +15 -15
- package/dist/ui/variants/var_choice.js +1 -1
- package/dist/ui/variants/var_framed.d.ts +5 -5
- package/dist/ui/variants/var_framed.js +1 -1
- package/dist/ui/variants/var_glyph-plain.d.ts +7 -7
- package/dist/ui/variants/var_glyph-plain.js +1 -1
- package/dist/ui/variants/var_input.d.ts +30 -30
- package/dist/ui/variants/var_input.js +1 -1
- package/dist/ui/variants/var_link-inline.d.ts +17 -17
- package/dist/ui/variants/var_link-inline.js +1 -1
- package/dist/ui/variants/var_list-row.d.ts +22 -22
- package/dist/ui/variants/var_list-row.js +1 -1
- package/dist/ui/variants/var_rule.d.ts +5 -5
- package/dist/ui/variants/var_rule.js +1 -1
- package/dist/ui/variants/var_skeleton-block.d.ts +9 -9
- package/dist/ui/variants/var_skeleton-block.js +1 -1
- package/dist/ui/variants/var_spinner-turning.d.ts +9 -9
- package/dist/ui/variants/var_spinner-turning.js +1 -1
- package/dist/ui/variants/var_stat-tile.d.ts +10 -10
- package/dist/ui/variants/var_stat-tile.js +1 -1
- package/dist/ui/variants/var_tab-bar.d.ts +14 -14
- package/dist/ui/variants/var_tab-bar.js +1 -1
- package/dist/ui/variants/var_tap-target.d.ts +11 -11
- package/dist/ui/variants/var_tap-target.js +1 -1
- package/dist/ui/variants.d.ts +88 -88
- package/dist/ui/wrappers.d.ts +7 -6
- package/dist/ui/wrappers.js +16 -14
- package/dist/ui/wrappers.tsx +21 -18
- package/package.json +2 -2
package/dist/ui/variants.d.ts
CHANGED
|
@@ -1,174 +1,174 @@
|
|
|
1
1
|
export declare const VARIANTS: {
|
|
2
|
-
readonly id:
|
|
3
|
-
readonly at:
|
|
4
|
-
readonly files:
|
|
5
|
-
readonly describes:
|
|
2
|
+
readonly id: 'variant';
|
|
3
|
+
readonly at: 'thread/ui/variants.ts';
|
|
4
|
+
readonly files: 'ui/var_*.ts';
|
|
5
|
+
readonly describes: 'How a thing looks: a material plus the style guide values it names directly, never raw ones, and how that look changes under a state. It says nothing about type, because typography belongs to the role the wording states; what is left here is the look of the box and the colour of what sits in it. Each row names a file prefixed `var_`, and that file is the variant: what it looks like, what it looks like under a state, and which states it reacts to. The row states which elements accept it, and it is worn as the tag, so a variant `button-fill` is written `<Button.buttonFill>` and an element nothing declares is refused. A state is the set of signals holding at once, and two states that can both hold and both set one property must have their combination declared, or which one wins is an accident of file order. An app adds its own to this same list, and a row that goes missing breaks the build, because what the framework offers is not an app’s to withdraw.';
|
|
6
6
|
readonly version: 1;
|
|
7
7
|
readonly cites: readonly [{
|
|
8
|
-
readonly on:
|
|
9
|
-
readonly said:
|
|
8
|
+
readonly on: '2026-08-24';
|
|
9
|
+
readonly said: 'Variants define lots of things. Including how they look in different states. Including how they look in multiple states at once. (hover, pressed) is one variant that covers both hover and pressed, so they look the same when they are simultaneous. (hover) (pressed) (hover, pressed) however have different states for the three situations.';
|
|
10
10
|
}, {
|
|
11
|
-
readonly on:
|
|
12
|
-
readonly said:
|
|
11
|
+
readonly on: '2026-08-25';
|
|
12
|
+
readonly said: 'Variants basically say: This is how I look. These are the elements that accept me. These are my behaviours under different states. These are the states I can react to.';
|
|
13
13
|
}, {
|
|
14
|
-
readonly on:
|
|
15
|
-
readonly said:
|
|
14
|
+
readonly on: '2026-08-28';
|
|
15
|
+
readonly said: 'fonts.ts as SSOT for everything related to fonts and easy to change fonts throughout the app like tokens, like....the exact same reason for existing that tokens+styleguide have is the same reason we have fonts.ts';
|
|
16
16
|
}];
|
|
17
17
|
readonly declares: readonly [{
|
|
18
|
-
readonly id:
|
|
19
|
-
readonly section:
|
|
18
|
+
readonly id: 'card';
|
|
19
|
+
readonly section: 'surface';
|
|
20
20
|
readonly at: string;
|
|
21
21
|
readonly wears: readonly ["Accordion", "Bars", "Box", "Donut", "Empty", "Funnel", "Heatmap", "LineChart", "Media", "Menu", "Scatter", "Sparkline", "Surface", "Table", "Tooltip"];
|
|
22
|
-
readonly describes:
|
|
22
|
+
readonly describes: 'A surface holding other content, and the shape every unregistered variant falls back to.';
|
|
23
23
|
}, {
|
|
24
|
-
readonly id:
|
|
25
|
-
readonly section:
|
|
24
|
+
readonly id: 'list-row';
|
|
25
|
+
readonly section: 'surface';
|
|
26
26
|
readonly at: string;
|
|
27
27
|
readonly wears: readonly ["Box"];
|
|
28
|
-
readonly describes:
|
|
28
|
+
readonly describes: 'One row of a list — square, quiet, and separated by its neighbours rather than by a shadow.';
|
|
29
29
|
}, {
|
|
30
|
-
readonly id:
|
|
31
|
-
readonly section:
|
|
30
|
+
readonly id: 'framed';
|
|
31
|
+
readonly section: 'surface';
|
|
32
32
|
readonly at: string;
|
|
33
33
|
readonly wears: readonly ["Image", "Media", "AspectRatio"];
|
|
34
|
-
readonly describes:
|
|
34
|
+
readonly describes: 'A picture given the same corners as a panel, on a sunken ground so the gap before it loads is not a white hole.';
|
|
35
35
|
}, {
|
|
36
|
-
readonly id:
|
|
37
|
-
readonly section:
|
|
36
|
+
readonly id: 'bubble-them';
|
|
37
|
+
readonly section: 'surface';
|
|
38
38
|
readonly at: string;
|
|
39
39
|
readonly wears: readonly ["Box"];
|
|
40
|
-
readonly describes:
|
|
40
|
+
readonly describes: 'A message somebody else sent. The plain half of a conversation.';
|
|
41
41
|
}, {
|
|
42
|
-
readonly id:
|
|
43
|
-
readonly section:
|
|
42
|
+
readonly id: 'bubble-me';
|
|
43
|
+
readonly section: 'surface';
|
|
44
44
|
readonly at: string;
|
|
45
45
|
readonly wears: readonly ["Box"];
|
|
46
|
-
readonly describes:
|
|
46
|
+
readonly describes: 'A message the current person sent. Takes the accent, which is how a conversation reads as two voices without a second colour role.';
|
|
47
47
|
}, {
|
|
48
|
-
readonly id:
|
|
49
|
-
readonly section:
|
|
48
|
+
readonly id: 'button-fill';
|
|
49
|
+
readonly section: 'button';
|
|
50
50
|
readonly at: string;
|
|
51
51
|
readonly wears: readonly ["Button"];
|
|
52
|
-
readonly describes:
|
|
52
|
+
readonly describes: 'The one action a screen is asking for. The accent behind it, and the only button on a screen that should carry it.';
|
|
53
53
|
}, {
|
|
54
|
-
readonly id:
|
|
55
|
-
readonly section:
|
|
54
|
+
readonly id: 'button-normal';
|
|
55
|
+
readonly section: 'button';
|
|
56
56
|
readonly at: string;
|
|
57
57
|
readonly wears: readonly ["Button"];
|
|
58
|
-
readonly describes:
|
|
58
|
+
readonly describes: 'The ordinary button. A surface with a hairline round it — pressable, and asking for nothing in particular.';
|
|
59
59
|
}, {
|
|
60
|
-
readonly id:
|
|
61
|
-
readonly section:
|
|
60
|
+
readonly id: 'button-ghost';
|
|
61
|
+
readonly section: 'button';
|
|
62
62
|
readonly at: string;
|
|
63
63
|
readonly wears: readonly ["Button"];
|
|
64
|
-
readonly describes:
|
|
64
|
+
readonly describes: 'Wording that acts. No ground and no line until a pointer is over it, which is what keeps a row of them from reading as a wall of boxes.';
|
|
65
65
|
}, {
|
|
66
|
-
readonly id:
|
|
67
|
-
readonly section:
|
|
66
|
+
readonly id: 'button-border';
|
|
67
|
+
readonly section: 'button';
|
|
68
68
|
readonly at: string;
|
|
69
69
|
readonly wears: readonly ["Button"];
|
|
70
|
-
readonly describes:
|
|
70
|
+
readonly describes: 'An action offered beside a filled one. The accent as an edge rather than a ground, so the shape says pressable and the colour says not this one.';
|
|
71
71
|
}, {
|
|
72
|
-
readonly id:
|
|
73
|
-
readonly section:
|
|
72
|
+
readonly id: 'button-destructive';
|
|
73
|
+
readonly section: 'button';
|
|
74
74
|
readonly at: string;
|
|
75
75
|
readonly wears: readonly ["Button"];
|
|
76
|
-
readonly describes:
|
|
76
|
+
readonly describes: 'Something that cannot be undone. The same shape as the asking button, in the colour reserved for consequence.';
|
|
77
77
|
}, {
|
|
78
|
-
readonly id:
|
|
79
|
-
readonly section:
|
|
78
|
+
readonly id: 'button-destructive-ghost';
|
|
79
|
+
readonly section: 'button';
|
|
80
80
|
readonly at: string;
|
|
81
81
|
readonly wears: readonly ["Button"];
|
|
82
|
-
readonly describes:
|
|
82
|
+
readonly describes: 'A destructive action that is not the point of the screen — delete, sitting quietly at the end of a menu. Carries the negative as ink and gains a ground only under a pointer.';
|
|
83
83
|
}, {
|
|
84
|
-
readonly id:
|
|
85
|
-
readonly section:
|
|
84
|
+
readonly id: 'button-cta';
|
|
85
|
+
readonly section: 'button';
|
|
86
86
|
readonly at: string;
|
|
87
87
|
readonly wears: readonly ["Button"];
|
|
88
|
-
readonly describes:
|
|
88
|
+
readonly describes: 'The one thing a landing screen exists to get pressed. Taller than every other button and set in running type rather than label type, which is what makes it read from across the page.';
|
|
89
89
|
}, {
|
|
90
|
-
readonly id:
|
|
91
|
-
readonly section:
|
|
90
|
+
readonly id: 'button-quiet';
|
|
91
|
+
readonly section: 'button';
|
|
92
92
|
readonly at: string;
|
|
93
93
|
readonly wears: readonly ["Button"];
|
|
94
|
-
readonly describes:
|
|
94
|
+
readonly describes: 'An action that is available and is not being suggested — cancel, skip, dismiss. Ink that supports rather than states, and a smaller symbol beside it.';
|
|
95
95
|
}, {
|
|
96
|
-
readonly id:
|
|
97
|
-
readonly section:
|
|
96
|
+
readonly id: 'button-glass';
|
|
97
|
+
readonly section: 'button';
|
|
98
98
|
readonly at: string;
|
|
99
99
|
readonly wears: readonly ["Button"];
|
|
100
|
-
readonly describes:
|
|
100
|
+
readonly describes: 'A button over a picture or a video, where a solid fill would hide what it is sitting on. What is behind shows through, softened.';
|
|
101
101
|
}, {
|
|
102
|
-
readonly id:
|
|
103
|
-
readonly section:
|
|
102
|
+
readonly id: 'input';
|
|
103
|
+
readonly section: 'entry';
|
|
104
104
|
readonly at: string;
|
|
105
105
|
readonly wears: readonly ["Field", "Select", "Slider", "Textarea", "Toggle"];
|
|
106
|
-
readonly describes:
|
|
106
|
+
readonly describes: 'Anything a person types into. Tighter vertical room than a surface, so the text baseline sits where a label expects it.';
|
|
107
107
|
}, {
|
|
108
|
-
readonly id:
|
|
109
|
-
readonly section:
|
|
108
|
+
readonly id: 'choice';
|
|
109
|
+
readonly section: 'entry';
|
|
110
110
|
readonly at: string;
|
|
111
111
|
readonly wears: readonly ["RadioGroup"];
|
|
112
|
-
readonly describes:
|
|
112
|
+
readonly describes: 'A set of options laid out to be chosen between. A group is not a control — it cannot be focused or invalid itself, only the radios inside it can — so it takes arrangement and a ground and states nothing it cannot be in.';
|
|
113
113
|
}, {
|
|
114
|
-
readonly id:
|
|
115
|
-
readonly section:
|
|
114
|
+
readonly id: 'tab-bar';
|
|
115
|
+
readonly section: 'navigation';
|
|
116
116
|
readonly at: string;
|
|
117
117
|
readonly wears: readonly ["Breadcrumb", "Pagination", "Tabs"];
|
|
118
|
-
readonly describes:
|
|
118
|
+
readonly describes: 'The strip of destinations along one edge. Rounder and less padded than a surface, because it holds pressable things rather than content.';
|
|
119
119
|
}, {
|
|
120
|
-
readonly id:
|
|
121
|
-
readonly section:
|
|
120
|
+
readonly id: 'link-inline';
|
|
121
|
+
readonly section: 'navigation';
|
|
122
122
|
readonly at: string;
|
|
123
123
|
readonly wears: readonly ["Link"];
|
|
124
|
-
readonly describes:
|
|
124
|
+
readonly describes: 'Wording that takes you somewhere. Carries the accent so it reads as reachable without an underline, and draws a real ring when a keyboard reaches it.';
|
|
125
125
|
}, {
|
|
126
|
-
readonly id:
|
|
127
|
-
readonly section:
|
|
126
|
+
readonly id: 'chip';
|
|
127
|
+
readonly section: 'marker';
|
|
128
128
|
readonly at: string;
|
|
129
129
|
readonly wears: readonly ["Badge"];
|
|
130
|
-
readonly describes:
|
|
130
|
+
readonly describes: 'A small token standing for a value. The tightest room in the set, and pill-shaped like the buttons.';
|
|
131
131
|
}, {
|
|
132
|
-
readonly id:
|
|
133
|
-
readonly section:
|
|
132
|
+
readonly id: 'glyph-plain';
|
|
133
|
+
readonly section: 'marker';
|
|
134
134
|
readonly at: string;
|
|
135
135
|
readonly wears: readonly ["Glyph"];
|
|
136
|
-
readonly describes:
|
|
136
|
+
readonly describes: 'A pictogram at the size most controls use, drawn in the ink of whatever it sits beside.';
|
|
137
137
|
}, {
|
|
138
|
-
readonly id:
|
|
139
|
-
readonly section:
|
|
138
|
+
readonly id: 'avatar-round';
|
|
139
|
+
readonly section: 'marker';
|
|
140
140
|
readonly at: string;
|
|
141
141
|
readonly wears: readonly ["Avatar"];
|
|
142
|
-
readonly describes:
|
|
142
|
+
readonly describes: 'A person, standing for themselves. Fully round, sunken so it reads as a well rather than a card, and sized to be recognised at a glance.';
|
|
143
143
|
}, {
|
|
144
|
-
readonly id:
|
|
145
|
-
readonly section:
|
|
144
|
+
readonly id: 'rule';
|
|
145
|
+
readonly section: 'marker';
|
|
146
146
|
readonly at: string;
|
|
147
147
|
readonly wears: readonly ["Separator"];
|
|
148
|
-
readonly describes:
|
|
148
|
+
readonly describes: 'The line between two things. The thinnest a screen can draw, in the colour that separates without asking to be seen.';
|
|
149
149
|
}, {
|
|
150
|
-
readonly id:
|
|
151
|
-
readonly section:
|
|
150
|
+
readonly id: 'skeleton-block';
|
|
151
|
+
readonly section: 'marker';
|
|
152
152
|
readonly at: string;
|
|
153
153
|
readonly wears: readonly ["Skeleton"];
|
|
154
|
-
readonly describes:
|
|
154
|
+
readonly describes: 'The shape of something that has not arrived. Sunken and breathing, which is what says waiting rather than empty.';
|
|
155
155
|
}, {
|
|
156
|
-
readonly id:
|
|
157
|
-
readonly section:
|
|
156
|
+
readonly id: 'spinner-turning';
|
|
157
|
+
readonly section: 'marker';
|
|
158
158
|
readonly at: string;
|
|
159
159
|
readonly wears: readonly ["Spinner"];
|
|
160
|
-
readonly describes:
|
|
160
|
+
readonly describes: 'Work with no measurable end. Turns without stopping, in the accent, so it reads as the app doing something rather than the app stuck.';
|
|
161
161
|
}, {
|
|
162
|
-
readonly id:
|
|
163
|
-
readonly section:
|
|
162
|
+
readonly id: 'stat-tile';
|
|
163
|
+
readonly section: 'figure';
|
|
164
164
|
readonly at: string;
|
|
165
165
|
readonly wears: readonly ["Gauge", "Progress", "Stat"];
|
|
166
|
-
readonly describes:
|
|
166
|
+
readonly describes: 'A single figure given room to be read at a glance, so its type role is the display one rather than body.';
|
|
167
167
|
}, {
|
|
168
|
-
readonly id:
|
|
169
|
-
readonly section:
|
|
168
|
+
readonly id: 'tap-target';
|
|
169
|
+
readonly section: 'gesture';
|
|
170
170
|
readonly at: string;
|
|
171
171
|
readonly wears: readonly ["HitBox"];
|
|
172
|
-
readonly describes:
|
|
172
|
+
readonly describes: 'Anything a finger acts on directly rather than through a control — the one variant a hit box wears. It is where a tap, a press and a carry are answered, because a hit box is the only thing that raises those and nothing accepted it before.';
|
|
173
173
|
}];
|
|
174
174
|
};
|
package/dist/ui/wrappers.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ReactNode } from 'react';
|
|
2
2
|
import type { Collector } from './collector.ts';
|
|
3
|
-
import type { ArrangementElement, VariantsFor, Wearing } from './checked.ts';
|
|
3
|
+
import type { ArrangementElement, Dispatching, VariantsFor, Wearing } from './checked.ts';
|
|
4
4
|
import { PRESENTATION_BEHAVIOUR, type Clock, type Presentation, type Surface, type Ticker } from './door.ts';
|
|
5
5
|
import { holds as declared } from './signals.ts';
|
|
6
6
|
declare module 'react' {
|
|
@@ -31,7 +31,7 @@ export interface UiConfig {
|
|
|
31
31
|
};
|
|
32
32
|
readonly collector?: Collector;
|
|
33
33
|
readonly platform?: string;
|
|
34
|
-
readonly dispatch?: (name:
|
|
34
|
+
readonly dispatch?: (name: keyof Dispatching, input?: Readonly<Record<string, unknown>>) => Promise<unknown>;
|
|
35
35
|
readonly navigateTo?: (screen: string) => void;
|
|
36
36
|
readonly actor?: {
|
|
37
37
|
readonly id: string | null;
|
|
@@ -53,7 +53,7 @@ export declare function useUi(): UiConfig;
|
|
|
53
53
|
export interface SurfaceRequest {
|
|
54
54
|
readonly className?: string;
|
|
55
55
|
readonly invokes?: {
|
|
56
|
-
readonly dispatch?:
|
|
56
|
+
readonly dispatch?: keyof Dispatching;
|
|
57
57
|
readonly input?: Readonly<Record<string, unknown>>;
|
|
58
58
|
readonly on?: 'press' | 'shown';
|
|
59
59
|
};
|
|
@@ -64,7 +64,7 @@ export interface SurfaceRequest {
|
|
|
64
64
|
}
|
|
65
65
|
export declare function useSurface(request?: SurfaceRequest): Surface;
|
|
66
66
|
export type Press = {
|
|
67
|
-
readonly dispatch:
|
|
67
|
+
readonly dispatch: keyof Dispatching;
|
|
68
68
|
readonly input?: Readonly<Record<string, unknown>>;
|
|
69
69
|
readonly navigateTo?: never;
|
|
70
70
|
readonly onPress?: never;
|
|
@@ -85,7 +85,7 @@ export type Press = {
|
|
|
85
85
|
readonly onPress?: never;
|
|
86
86
|
};
|
|
87
87
|
export declare function pressOf(props: {
|
|
88
|
-
readonly dispatch?:
|
|
88
|
+
readonly dispatch?: keyof Dispatching;
|
|
89
89
|
readonly input?: Readonly<Record<string, unknown>>;
|
|
90
90
|
readonly navigateTo?: string;
|
|
91
91
|
readonly onPress?: () => void;
|
|
@@ -94,11 +94,12 @@ export interface PressOrigin {
|
|
|
94
94
|
readonly element: string;
|
|
95
95
|
readonly name?: string;
|
|
96
96
|
}
|
|
97
|
+
export declare function pressing(ui: ReturnType<typeof useUi>, press: Press, origin?: PressOrigin): (() => void) | undefined;
|
|
97
98
|
export declare function usePress(press: Press, origin?: PressOrigin): (() => void) | undefined;
|
|
98
99
|
export declare function useVisibility(active: boolean): (node: HTMLElement | null) => void;
|
|
99
100
|
export interface ScreenOptions {
|
|
100
101
|
readonly as?: Presentation;
|
|
101
|
-
readonly views?: readonly
|
|
102
|
+
readonly views?: readonly (keyof Dispatching)[];
|
|
102
103
|
readonly unreachable?: boolean;
|
|
103
104
|
}
|
|
104
105
|
type Component<P> = (props: P) => ReactNode;
|
package/dist/ui/wrappers.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
4
|
-
import { PRESENTATION_BEHAVIOUR } from
|
|
5
|
-
import { selectorOf } from
|
|
6
|
-
import { Presented } from
|
|
7
|
-
import { useRenderLoopDetector } from
|
|
4
|
+
import { PRESENTATION_BEHAVIOUR } from './door.js';
|
|
5
|
+
import { selectorOf } from './signals.js';
|
|
6
|
+
import { Presented } from './presented.js';
|
|
7
|
+
import { useRenderLoopDetector } from './render-loop.js';
|
|
8
8
|
export const UiContext = createContext(null);
|
|
9
9
|
const MISSING = 'No UI context. Every element resolves its look, its text and its clock through the door, so it ' +
|
|
10
10
|
'must render inside <UiProvider>. An element rendering without one would silently have no theme ' +
|
|
@@ -121,8 +121,10 @@ const NO_DISPATCH = 'No dispatch. An operation runs one way here and that way is
|
|
|
121
121
|
'reads as a dead control and is a wiring gap.';
|
|
122
122
|
const NO_NAVIGATE = 'No navigateTo. Moving between screens is its own thing, supplied beside dispatch rather than through it, so a ' +
|
|
123
123
|
'thing that names a screen must render inside a <UiProvider> whose config supplies it.';
|
|
124
|
-
export function
|
|
125
|
-
const { collector, dispatch, navigateTo } =
|
|
124
|
+
export function pressing(ui, press, origin) {
|
|
125
|
+
const { collector, dispatch, navigateTo } = ui;
|
|
126
|
+
const asked = press.dispatch;
|
|
127
|
+
const carried = press.input;
|
|
126
128
|
const reported = (run) => {
|
|
127
129
|
if (collector === undefined || origin === undefined)
|
|
128
130
|
return run;
|
|
@@ -146,17 +148,18 @@ export function usePress(press, origin) {
|
|
|
146
148
|
navigateTo(where);
|
|
147
149
|
});
|
|
148
150
|
}
|
|
149
|
-
if (
|
|
150
|
-
const named = press.dispatch;
|
|
151
|
-
const input = press.input;
|
|
151
|
+
if (asked !== undefined) {
|
|
152
152
|
return reported(() => {
|
|
153
153
|
if (dispatch === undefined)
|
|
154
154
|
throw new Error(NO_DISPATCH);
|
|
155
|
-
void dispatch(
|
|
155
|
+
void dispatch(asked, carried);
|
|
156
156
|
});
|
|
157
157
|
}
|
|
158
158
|
return undefined;
|
|
159
159
|
}
|
|
160
|
+
export function usePress(press, origin) {
|
|
161
|
+
return pressing(useUi(), press, origin);
|
|
162
|
+
}
|
|
160
163
|
export function useVisibility(active) {
|
|
161
164
|
const { clock } = useUi();
|
|
162
165
|
return useMemo(() => {
|
|
@@ -214,13 +217,12 @@ function useViews(views) {
|
|
|
214
217
|
const [held, setHeld] = useState({});
|
|
215
218
|
const [wrong, setWrong] = useState(undefined);
|
|
216
219
|
useEffect(() => {
|
|
217
|
-
|
|
218
|
-
if (wanted.length === 0)
|
|
220
|
+
if (views.length === 0)
|
|
219
221
|
return undefined;
|
|
220
222
|
if (dispatch === undefined)
|
|
221
223
|
throw new Error(NO_DISPATCH);
|
|
222
224
|
let live = true;
|
|
223
|
-
void Promise.all(
|
|
225
|
+
void Promise.all(views.map(async (one) => [one, await dispatch(one)]))
|
|
224
226
|
.then((all) => {
|
|
225
227
|
if (live)
|
|
226
228
|
setHeld(Object.fromEntries(all));
|
|
@@ -235,7 +237,7 @@ function useViews(views) {
|
|
|
235
237
|
}, [named, dispatch]);
|
|
236
238
|
const all = useMemo(() => {
|
|
237
239
|
const found = {};
|
|
238
|
-
for (const one of
|
|
240
|
+
for (const one of views)
|
|
239
241
|
found[one] = held[one];
|
|
240
242
|
return found;
|
|
241
243
|
}, [named, held]);
|
package/dist/ui/wrappers.tsx
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { createContext, useContext, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
|
|
4
4
|
|
|
5
5
|
import type { Collector } from './collector.ts'
|
|
6
|
-
import type { ArrangementElement, VariantsFor, Wearing } from './checked.ts'
|
|
6
|
+
import type { ArrangementElement, Dispatching, VariantsFor, Wearing } from './checked.ts'
|
|
7
7
|
|
|
8
8
|
import { PRESENTATION_BEHAVIOUR, type Clock, type Presentation, type Surface, type Ticker } from './door.ts'
|
|
9
9
|
import { holds as declared, selectorOf } from './signals.ts'
|
|
@@ -43,7 +43,7 @@ export interface UiConfig {
|
|
|
43
43
|
|
|
44
44
|
readonly platform?: string
|
|
45
45
|
|
|
46
|
-
readonly dispatch?: (name:
|
|
46
|
+
readonly dispatch?: (name: keyof Dispatching, input?: Readonly<Record<string, unknown>>) => Promise<unknown>
|
|
47
47
|
|
|
48
48
|
readonly navigateTo?: (screen: string) => void
|
|
49
49
|
|
|
@@ -75,7 +75,7 @@ export interface SurfaceRequest {
|
|
|
75
75
|
|
|
76
76
|
readonly className?: string
|
|
77
77
|
|
|
78
|
-
readonly invokes?: { readonly dispatch?:
|
|
78
|
+
readonly invokes?: { readonly dispatch?: keyof Dispatching; readonly input?: Readonly<Record<string, unknown>>; readonly on?: 'press' | 'shown' }
|
|
79
79
|
|
|
80
80
|
readonly holds?: readonly ((typeof declared)[number]['id'] | (string & {}))[]
|
|
81
81
|
|
|
@@ -135,7 +135,7 @@ export function useSurface(request: SurfaceRequest = {}): Surface {
|
|
|
135
135
|
for (const [name, value] of Object.entries(request.measures ?? {})) measures[`--${name}`] = value
|
|
136
136
|
|
|
137
137
|
const asked = request.invokes
|
|
138
|
-
const named = asked?.dispatch
|
|
138
|
+
const named: keyof Dispatching | undefined = asked?.dispatch
|
|
139
139
|
const carried = asked?.input
|
|
140
140
|
const when = asked?.on ?? 'press'
|
|
141
141
|
|
|
@@ -180,13 +180,13 @@ export function useSurface(request: SurfaceRequest = {}): Surface {
|
|
|
180
180
|
}
|
|
181
181
|
|
|
182
182
|
export type Press =
|
|
183
|
-
| { readonly dispatch:
|
|
183
|
+
| { readonly dispatch: keyof Dispatching; readonly input?: Readonly<Record<string, unknown>>; readonly navigateTo?: never; readonly onPress?: never }
|
|
184
184
|
| { readonly navigateTo: string; readonly dispatch?: never; readonly input?: never; readonly onPress?: never }
|
|
185
185
|
| { readonly onPress: () => void; readonly dispatch?: never; readonly navigateTo?: never; readonly input?: never }
|
|
186
186
|
| { readonly dispatch?: never; readonly navigateTo?: never; readonly input?: never; readonly onPress?: never }
|
|
187
187
|
|
|
188
188
|
export function pressOf(props: {
|
|
189
|
-
readonly dispatch?:
|
|
189
|
+
readonly dispatch?: keyof Dispatching
|
|
190
190
|
readonly input?: Readonly<Record<string, unknown>>
|
|
191
191
|
readonly navigateTo?: string
|
|
192
192
|
readonly onPress?: () => void
|
|
@@ -213,8 +213,10 @@ const NO_NAVIGATE =
|
|
|
213
213
|
'No navigateTo. Moving between screens is its own thing, supplied beside dispatch rather than through it, so a ' +
|
|
214
214
|
'thing that names a screen must render inside a <UiProvider> whose config supplies it.'
|
|
215
215
|
|
|
216
|
-
export function
|
|
217
|
-
const { collector, dispatch, navigateTo } =
|
|
216
|
+
export function pressing(ui: ReturnType<typeof useUi>, press: Press, origin?: PressOrigin): (() => void) | undefined {
|
|
217
|
+
const { collector, dispatch, navigateTo } = ui
|
|
218
|
+
const asked: keyof Dispatching | undefined = press.dispatch
|
|
219
|
+
const carried = press.input
|
|
218
220
|
|
|
219
221
|
const reported = (run: () => void): (() => void) => {
|
|
220
222
|
if (collector === undefined || origin === undefined) return run
|
|
@@ -239,18 +241,20 @@ export function usePress(press: Press, origin?: PressOrigin): (() => void) | und
|
|
|
239
241
|
})
|
|
240
242
|
}
|
|
241
243
|
|
|
242
|
-
if (
|
|
243
|
-
const named = press.dispatch
|
|
244
|
-
const input = press.input
|
|
244
|
+
if (asked !== undefined) {
|
|
245
245
|
return reported(() => {
|
|
246
246
|
if (dispatch === undefined) throw new Error(NO_DISPATCH)
|
|
247
|
-
void dispatch(
|
|
247
|
+
void dispatch(asked, carried)
|
|
248
248
|
})
|
|
249
249
|
}
|
|
250
250
|
|
|
251
251
|
return undefined
|
|
252
252
|
}
|
|
253
253
|
|
|
254
|
+
export function usePress(press: Press, origin?: PressOrigin): (() => void) | undefined {
|
|
255
|
+
return pressing(useUi(), press, origin)
|
|
256
|
+
}
|
|
257
|
+
|
|
254
258
|
export function useVisibility(active: boolean): (node: HTMLElement | null) => void {
|
|
255
259
|
const { clock } = useUi()
|
|
256
260
|
return useMemo(() => {
|
|
@@ -267,7 +271,7 @@ export function useVisibility(active: boolean): (node: HTMLElement | null) => vo
|
|
|
267
271
|
|
|
268
272
|
export interface ScreenOptions {
|
|
269
273
|
readonly as?: Presentation
|
|
270
|
-
readonly views?: readonly
|
|
274
|
+
readonly views?: readonly (keyof Dispatching)[]
|
|
271
275
|
|
|
272
276
|
readonly unreachable?: boolean
|
|
273
277
|
}
|
|
@@ -359,18 +363,17 @@ export function useView<T>(id: string): T | undefined {
|
|
|
359
363
|
return held[id] as T | undefined
|
|
360
364
|
}
|
|
361
365
|
|
|
362
|
-
function useViews(views: readonly
|
|
366
|
+
function useViews(views: readonly (keyof Dispatching)[]): Readonly<Record<string, unknown>> {
|
|
363
367
|
const { dispatch } = useUi()
|
|
364
368
|
const named = views.join(' ')
|
|
365
369
|
const [held, setHeld] = useState<Readonly<Record<string, unknown>>>({})
|
|
366
370
|
const [wrong, setWrong] = useState<Error | undefined>(undefined)
|
|
367
371
|
|
|
368
372
|
useEffect(() => {
|
|
369
|
-
|
|
370
|
-
if (wanted.length === 0) return undefined
|
|
373
|
+
if (views.length === 0) return undefined
|
|
371
374
|
if (dispatch === undefined) throw new Error(NO_DISPATCH)
|
|
372
375
|
let live = true
|
|
373
|
-
void Promise.all(
|
|
376
|
+
void Promise.all(views.map(async (one: keyof Dispatching) => [one, await dispatch(one)] as const))
|
|
374
377
|
.then((all) => {
|
|
375
378
|
if (live) setHeld(Object.fromEntries(all))
|
|
376
379
|
})
|
|
@@ -384,7 +387,7 @@ function useViews(views: readonly string[]): Readonly<Record<string, unknown>> {
|
|
|
384
387
|
|
|
385
388
|
const all = useMemo(() => {
|
|
386
389
|
const found: Record<string, unknown> = {}
|
|
387
|
-
for (const one of
|
|
390
|
+
for (const one of views) found[one] = held[one]
|
|
388
391
|
return found
|
|
389
392
|
}, [named, held])
|
|
390
393
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@prestack/thread-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"files": [
|
|
6
6
|
"dist",
|
|
@@ -17,6 +17,6 @@
|
|
|
17
17
|
"react-dom": "^19.0.0",
|
|
18
18
|
"typescript": "^6.0.0",
|
|
19
19
|
"zod": "^4.5.4",
|
|
20
|
-
"@prestack/thread": "^0.1.
|
|
20
|
+
"@prestack/thread": "^0.1.5"
|
|
21
21
|
}
|
|
22
22
|
}
|