@yewdiel21/motion-kit 0.0.0-stage → 0.9.0
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/NOTICE +38 -0
- package/README.md +80 -2
- package/bin/motion-kit.mjs +242 -0
- package/css.d.ts +2 -0
- package/dist/auto/index.d.ts +63 -0
- package/dist/auto/index.js +207 -0
- package/dist/auto/index.js.map +1 -0
- package/dist/chunk-2BQGFOA7.js +177 -0
- package/dist/chunk-2BQGFOA7.js.map +1 -0
- package/dist/chunk-34XYOXHG.js +2374 -0
- package/dist/chunk-34XYOXHG.js.map +1 -0
- package/dist/chunk-6OJAP6ZL.js +832 -0
- package/dist/chunk-6OJAP6ZL.js.map +1 -0
- package/dist/chunk-ABNRDDO7.js +28 -0
- package/dist/chunk-ABNRDDO7.js.map +1 -0
- package/dist/chunk-FS2HJVVY.js +3320 -0
- package/dist/chunk-FS2HJVVY.js.map +1 -0
- package/dist/chunk-J27KH2A2.js +157 -0
- package/dist/chunk-J27KH2A2.js.map +1 -0
- package/dist/chunk-KLY5BRRI.js +18 -0
- package/dist/chunk-KLY5BRRI.js.map +1 -0
- package/dist/chunk-Q4LVFNLN.js +1617 -0
- package/dist/chunk-Q4LVFNLN.js.map +1 -0
- package/dist/chunk-RFDIZYFX.js +304 -0
- package/dist/chunk-RFDIZYFX.js.map +1 -0
- package/dist/chunk-TGV27ZWM.js +17 -0
- package/dist/chunk-TGV27ZWM.js.map +1 -0
- package/dist/confetti-BSX1CLLV.d.ts +41 -0
- package/dist/css/components/chat-background.css +87 -0
- package/dist/css/components/chat.css +237 -0
- package/dist/css/components/cursor.css +178 -0
- package/dist/css/components/dialog.css +259 -0
- package/dist/css/components/island.css +301 -0
- package/dist/css/components/menu.css +105 -0
- package/dist/css/components/nav.css +1054 -0
- package/dist/css/components/steps.css +50 -0
- package/dist/css/components/theme-picker.css +115 -0
- package/dist/css/components/toast.css +115 -0
- package/dist/css/controls.css +950 -0
- package/dist/css/effects.css +587 -0
- package/dist/css/fonts.css +3 -0
- package/dist/css/themes/black-green.css +126 -0
- package/dist/css/themes/black.css +126 -0
- package/dist/css/themes/blue.css +126 -0
- package/dist/css/themes/brown.css +126 -0
- package/dist/css/themes/cold-blue.css +126 -0
- package/dist/css/themes/funny.css +126 -0
- package/dist/css/themes/gray.css +126 -0
- package/dist/css/themes/green.css +126 -0
- package/dist/css/themes/modern-1.css +126 -0
- package/dist/css/themes/neogreen.css +126 -0
- package/dist/css/themes/new.css +126 -0
- package/dist/css/themes/new2.css +126 -0
- package/dist/css/themes/oled.css +126 -0
- package/dist/css/themes/orange.css +126 -0
- package/dist/css/themes/pastel-pink.css +126 -0
- package/dist/css/themes/pink.css +126 -0
- package/dist/css/themes/purple.css +126 -0
- package/dist/css/themes/red.css +126 -0
- package/dist/css/themes/super-blue.css +126 -0
- package/dist/css/themes.css +2431 -0
- package/dist/css/tokens.css +452 -0
- package/dist/elements/index.d.ts +183 -0
- package/dist/elements/index.js +472 -0
- package/dist/elements/index.js.map +1 -0
- package/dist/engine-CUr9QijM.d.ts +46 -0
- package/dist/gl/index.d.ts +61 -0
- package/dist/gl/index.js +18 -0
- package/dist/gl/index.js.map +1 -0
- package/dist/index.css +5296 -0
- package/dist/index.d.ts +440 -0
- package/dist/index.js +390 -0
- package/dist/index.js.map +1 -0
- package/dist/react/index.d.ts +476 -0
- package/dist/react/index.js +969 -0
- package/dist/react/index.js.map +1 -0
- package/dist/reduced-BM4Ls0g5.d.ts +566 -0
- package/dist/reveal-WFUWDrei.d.ts +416 -0
- package/dist/store-Bqy_obnD.d.ts +195 -0
- package/dist/theme/generate.d.ts +18 -0
- package/dist/theme/generate.js +64 -0
- package/dist/theme/generate.js.map +1 -0
- package/dist/theme/index.d.ts +17 -0
- package/dist/theme/index.js +32 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme-BFMoCzi6.d.ts +158 -0
- package/dist/types-BkS_raL8.d.ts +7 -0
- package/package.json +114 -3
- package/registry.json +469 -0
- package/skills/motion-kit/SKILL.md +189 -0
- package/skills/motion-kit/reference/components.md +86 -0
- package/skills/motion-kit/reference/design.md +92 -0
- package/skills/motion-kit/reference/recipes.md +172 -0
- package/src/auto/auto-init.ts +151 -0
- package/src/auto/index.ts +3 -0
- package/src/auto/parse-options.ts +68 -0
- package/src/components/chat/README.md +90 -0
- package/src/components/chat/chat.css +236 -0
- package/src/components/chat/element.ts +98 -0
- package/src/components/chat/engine.ts +295 -0
- package/src/components/chat/react.tsx +196 -0
- package/src/components/chat-background/README.md +50 -0
- package/src/components/chat-background/audio.ts +56 -0
- package/src/components/chat-background/chat-background.css +86 -0
- package/src/components/chat-background/element.ts +31 -0
- package/src/components/chat-background/engine.ts +108 -0
- package/src/components/chat-background/react.tsx +36 -0
- package/src/components/cursor/README.md +53 -0
- package/src/components/cursor/cursor.css +177 -0
- package/src/components/cursor/element.ts +23 -0
- package/src/components/cursor/engine.ts +254 -0
- package/src/components/cursor/react.tsx +26 -0
- package/src/components/dialog/README.md +106 -0
- package/src/components/dialog/dialog.css +258 -0
- package/src/components/dialog/element.ts +118 -0
- package/src/components/dialog/engine.ts +432 -0
- package/src/components/dialog/react.tsx +200 -0
- package/src/components/icon.tsx +10 -0
- package/src/components/icons.ts +24 -0
- package/src/components/island/README.md +91 -0
- package/src/components/island/element.ts +45 -0
- package/src/components/island/engine.ts +200 -0
- package/src/components/island/island.css +300 -0
- package/src/components/island/react.tsx +115 -0
- package/src/components/menu/README.md +67 -0
- package/src/components/menu/element.ts +55 -0
- package/src/components/menu/engine.ts +142 -0
- package/src/components/menu/menu.css +104 -0
- package/src/components/menu/react.tsx +82 -0
- package/src/components/nav/README.md +85 -0
- package/src/components/nav/element.ts +39 -0
- package/src/components/nav/engine.ts +164 -0
- package/src/components/nav/nav.css +1053 -0
- package/src/components/nav/react.tsx +90 -0
- package/src/components/steps/README.md +70 -0
- package/src/components/steps/element.ts +43 -0
- package/src/components/steps/engine.ts +185 -0
- package/src/components/steps/react.tsx +91 -0
- package/src/components/steps/steps.css +49 -0
- package/src/components/theme-picker/README.md +57 -0
- package/src/components/theme-picker/element.ts +20 -0
- package/src/components/theme-picker/engine.ts +91 -0
- package/src/components/theme-picker/react.tsx +31 -0
- package/src/components/theme-picker/theme-picker.css +114 -0
- package/src/components/toast/README.md +60 -0
- package/src/components/toast/element.ts +25 -0
- package/src/components/toast/engine.ts +483 -0
- package/src/components/toast/react.tsx +22 -0
- package/src/components/toast/store.ts +122 -0
- package/src/components/toast/toast.css +114 -0
- package/src/core/channels.ts +165 -0
- package/src/core/curves.ts +35 -0
- package/src/core/frame.ts +12 -0
- package/src/core/gsap.ts +65 -0
- package/src/core/loop.ts +44 -0
- package/src/core/math.ts +9 -0
- package/src/core/physics-spring.ts +59 -0
- package/src/core/pointer.ts +63 -0
- package/src/core/reduced.ts +21 -0
- package/src/core/scope.ts +70 -0
- package/src/core/scroll-track.ts +106 -0
- package/src/core/split.ts +68 -0
- package/src/core/spring.ts +22 -0
- package/src/core/styles.ts +31 -0
- package/src/core/timing.ts +204 -0
- package/src/core/types.ts +20 -0
- package/src/core/visible.ts +19 -0
- package/src/css/base.css +142 -0
- package/src/css/controls/README.md +122 -0
- package/src/css/controls/burger.css +67 -0
- package/src/css/controls/button.css +226 -0
- package/src/css/controls/checkbox.css +53 -0
- package/src/css/controls/chip.css +85 -0
- package/src/css/controls/field.css +124 -0
- package/src/css/controls/glass.css +220 -0
- package/src/css/controls/icon.css +26 -0
- package/src/css/controls/segmented.css +60 -0
- package/src/css/controls/switch.css +72 -0
- package/src/css/default-theme.css +123 -0
- package/src/css/effects/README.md +134 -0
- package/src/css/effects/anim.css +224 -0
- package/src/css/effects/fade.css +15 -0
- package/src/css/effects/float.css +64 -0
- package/src/css/effects/frost.css +62 -0
- package/src/css/effects/grain.css +58 -0
- package/src/css/effects/loading.css +60 -0
- package/src/css/effects/success.css +22 -0
- package/src/css/effects/text.css +67 -0
- package/src/css/fonts.css +3 -0
- package/src/css/states.css +51 -0
- package/src/css/themes/black-green.css +126 -0
- package/src/css/themes/black.css +126 -0
- package/src/css/themes/blue.css +126 -0
- package/src/css/themes/brown.css +126 -0
- package/src/css/themes/cold-blue.css +126 -0
- package/src/css/themes/funny.css +126 -0
- package/src/css/themes/gray.css +126 -0
- package/src/css/themes/green.css +126 -0
- package/src/css/themes/modern-1.css +126 -0
- package/src/css/themes/neogreen.css +126 -0
- package/src/css/themes/new.css +126 -0
- package/src/css/themes/new2.css +126 -0
- package/src/css/themes/oled.css +126 -0
- package/src/css/themes/orange.css +126 -0
- package/src/css/themes/pastel-pink.css +126 -0
- package/src/css/themes/pink.css +126 -0
- package/src/css/themes/purple.css +126 -0
- package/src/css/themes/red.css +126 -0
- package/src/css/themes/super-blue.css +126 -0
- package/src/css/tokens.css +182 -0
- package/src/elements/base.ts +76 -0
- package/src/elements/index.ts +48 -0
- package/src/gl/index.ts +15 -0
- package/src/gl/liquid-blend/README.md +23 -0
- package/src/gl/liquid-blend/create-liquid-blend.ts +7 -0
- package/src/gl/liquid-blend/shader.ts +9 -0
- package/src/gl/matcap/README.md +23 -0
- package/src/gl/matcap/create-matcap.ts +7 -0
- package/src/gl/matcap/shader.ts +16 -0
- package/src/gl/particle-hero/README.md +41 -0
- package/src/gl/particle-hero/create-particle-hero.ts +544 -0
- package/src/gl/particle-hero/particle-hero.css +19 -0
- package/src/gl/particle-hero/shaders.ts +84 -0
- package/src/gl/shader-blur/README.md +23 -0
- package/src/gl/shader-blur/create-shader-blur.ts +7 -0
- package/src/gl/shader-blur/shader.ts +11 -0
- package/src/gl/shader-grain/README.md +23 -0
- package/src/gl/shader-grain/create-shader-grain.ts +7 -0
- package/src/gl/shader-grain/shader.ts +6 -0
- package/src/gl/shared/create-shader-effect.ts +186 -0
- package/src/gl/shared/shader.css +3 -0
- package/src/gl/shared/shaders.ts +30 -0
- package/src/index.ts +177 -0
- package/src/motion/anchor.ts +45 -0
- package/src/motion/chat.ts +97 -0
- package/src/motion/confetti.ts +130 -0
- package/src/motion/count.ts +95 -0
- package/src/motion/details.ts +70 -0
- package/src/motion/drag-dismiss.ts +231 -0
- package/src/motion/effects.ts +81 -0
- package/src/motion/entrances.ts +27 -0
- package/src/motion/floating.ts +389 -0
- package/src/motion/flow.ts +115 -0
- package/src/motion/indicator.ts +44 -0
- package/src/motion/layout.ts +39 -0
- package/src/motion/liquid.ts +227 -0
- package/src/motion/morph.ts +540 -0
- package/src/motion/reveal.ts +112 -0
- package/src/motion/sheet.ts +65 -0
- package/src/motion/surface.ts +108 -0
- package/src/react/animated-number.tsx +30 -0
- package/src/react/flip-group.tsx +44 -0
- package/src/react/frost.tsx +33 -0
- package/src/react/index.ts +80 -0
- package/src/react/slot-text.tsx +44 -0
- package/src/react/theme-provider.tsx +42 -0
- package/src/react/use-card-dock.ts +9 -0
- package/src/react/use-cascade.ts +9 -0
- package/src/react/use-contrast.ts +9 -0
- package/src/react/use-counter.ts +8 -0
- package/src/react/use-curved-carousel.ts +10 -0
- package/src/react/use-depth-grid.ts +9 -0
- package/src/react/use-details.ts +7 -0
- package/src/react/use-dock-pill.ts +10 -0
- package/src/react/use-drag-ruler.ts +10 -0
- package/src/react/use-fill-text.ts +9 -0
- package/src/react/use-fit-text.ts +8 -0
- package/src/react/use-flow.ts +8 -0
- package/src/react/use-frame-zoom.ts +9 -0
- package/src/react/use-infinite-reel.ts +8 -0
- package/src/react/use-letters.ts +9 -0
- package/src/react/use-liquid-blend.ts +8 -0
- package/src/react/use-marquee.ts +9 -0
- package/src/react/use-mask-text.ts +9 -0
- package/src/react/use-matcap.ts +8 -0
- package/src/react/use-parallax.ts +9 -0
- package/src/react/use-particle-hero.ts +9 -0
- package/src/react/use-pile.ts +8 -0
- package/src/react/use-pop.ts +8 -0
- package/src/react/use-radial-menu.ts +10 -0
- package/src/react/use-recipe.ts +38 -0
- package/src/react/use-reflow.ts +9 -0
- package/src/react/use-repel-bento.ts +8 -0
- package/src/react/use-reveal.ts +8 -0
- package/src/react/use-rotator.ts +10 -0
- package/src/react/use-shader-blur.ts +8 -0
- package/src/react/use-shader-grain.ts +8 -0
- package/src/react/use-slot-text.ts +17 -0
- package/src/react/use-snap-strip.ts +9 -0
- package/src/react/use-sortable.ts +14 -0
- package/src/react/use-spring-cards.ts +8 -0
- package/src/react/use-stretch-footer.ts +20 -0
- package/src/react/use-tabs.ts +10 -0
- package/src/react/use-text-roll.ts +9 -0
- package/src/react/use-ticket-menu.ts +15 -0
- package/src/react/use-words.ts +8 -0
- package/src/recipes/card-dock/README.md +36 -0
- package/src/recipes/card-dock/card-dock.css +178 -0
- package/src/recipes/card-dock/create-card-dock.ts +97 -0
- package/src/recipes/cascade/README.md +33 -0
- package/src/recipes/cascade/create-cascade.ts +111 -0
- package/src/recipes/contrast/README.md +29 -0
- package/src/recipes/contrast/create-contrast.ts +68 -0
- package/src/recipes/counter/README.md +42 -0
- package/src/recipes/counter/create-counter.ts +84 -0
- package/src/recipes/curved-carousel/README.md +50 -0
- package/src/recipes/curved-carousel/carousel-math.ts +20 -0
- package/src/recipes/curved-carousel/create-curved-carousel.ts +257 -0
- package/src/recipes/curved-carousel/curved-carousel.css +50 -0
- package/src/recipes/depth-grid/README.md +30 -0
- package/src/recipes/depth-grid/create-depth-grid.ts +120 -0
- package/src/recipes/details/README.md +31 -0
- package/src/recipes/details/create-details.ts +27 -0
- package/src/recipes/dock-pill/README.md +23 -0
- package/src/recipes/dock-pill/create-dock-pill.ts +68 -0
- package/src/recipes/dock-pill/dock-pill.css +5 -0
- package/src/recipes/drag-ruler/README.md +21 -0
- package/src/recipes/drag-ruler/create-drag-ruler.ts +95 -0
- package/src/recipes/drag-ruler/drag-ruler.css +16 -0
- package/src/recipes/fill-text/README.md +27 -0
- package/src/recipes/fill-text/create-fill-text.ts +93 -0
- package/src/recipes/fit-text/README.md +37 -0
- package/src/recipes/fit-text/create-fit-text.ts +55 -0
- package/src/recipes/fit-text/fit-text.css +6 -0
- package/src/recipes/flow/README.md +46 -0
- package/src/recipes/flow/create-flow.ts +55 -0
- package/src/recipes/frame-zoom/README.md +29 -0
- package/src/recipes/frame-zoom/create-frame-zoom.ts +91 -0
- package/src/recipes/infinite-reel/README.md +23 -0
- package/src/recipes/infinite-reel/create-infinite-reel.ts +140 -0
- package/src/recipes/infinite-reel/infinite-reel.css +8 -0
- package/src/recipes/letters/README.md +30 -0
- package/src/recipes/letters/create-letters.ts +113 -0
- package/src/recipes/marquee/README.md +32 -0
- package/src/recipes/marquee/create-marquee.ts +74 -0
- package/src/recipes/marquee/marquee.css +41 -0
- package/src/recipes/mask-text/README.md +39 -0
- package/src/recipes/mask-text/create-mask-text.ts +134 -0
- package/src/recipes/parallax/README.md +31 -0
- package/src/recipes/parallax/create-parallax.ts +74 -0
- package/src/recipes/pile/README.md +48 -0
- package/src/recipes/pile/create-pile.ts +50 -0
- package/src/recipes/pile/pile-math.ts +27 -0
- package/src/recipes/pile/pile.css +63 -0
- package/src/recipes/pill/README.md +30 -0
- package/src/recipes/pill/pill.css +48 -0
- package/src/recipes/pop/README.md +36 -0
- package/src/recipes/pop/create-pop.ts +52 -0
- package/src/recipes/radial-menu/README.md +44 -0
- package/src/recipes/radial-menu/create-radial-menu.ts +96 -0
- package/src/recipes/radial-menu/radial-menu.css +45 -0
- package/src/recipes/reflow/README.md +47 -0
- package/src/recipes/reflow/create-reflow.ts +49 -0
- package/src/recipes/repel-bento/README.md +21 -0
- package/src/recipes/repel-bento/create-repel-bento.ts +65 -0
- package/src/recipes/repel-bento/repel-bento.css +3 -0
- package/src/recipes/reveal/README.md +36 -0
- package/src/recipes/reveal/create-reveal.ts +48 -0
- package/src/recipes/rotator/README.md +21 -0
- package/src/recipes/rotator/create-rotator.ts +66 -0
- package/src/recipes/rotator/rotator.css +3 -0
- package/src/recipes/slot-text/README.md +44 -0
- package/src/recipes/slot-text/create-slot-text.ts +244 -0
- package/src/recipes/slot-text/slot-text.css +42 -0
- package/src/recipes/snap-strip/README.md +31 -0
- package/src/recipes/snap-strip/create-snap-strip.ts +133 -0
- package/src/recipes/snap-strip/snap-strip.css +23 -0
- package/src/recipes/sortable/README.md +88 -0
- package/src/recipes/sortable/create-sortable.ts +863 -0
- package/src/recipes/sortable/sortable.css +40 -0
- package/src/recipes/spring-cards/README.md +48 -0
- package/src/recipes/spring-cards/create-spring-cards.ts +140 -0
- package/src/recipes/spring-cards/spring-cards.css +23 -0
- package/src/recipes/stretch-footer/README.md +44 -0
- package/src/recipes/stretch-footer/create-stretch-footer.ts +69 -0
- package/src/recipes/stretch-footer/stretch-footer.css +28 -0
- package/src/recipes/tabs/README.md +39 -0
- package/src/recipes/tabs/create-tabs.ts +91 -0
- package/src/recipes/tabs/tabs.css +19 -0
- package/src/recipes/text-roll/README.md +35 -0
- package/src/recipes/text-roll/create-text-roll.ts +137 -0
- package/src/recipes/text-roll/text-roll.css +21 -0
- package/src/recipes/ticket-menu/README.md +24 -0
- package/src/recipes/ticket-menu/create-ticket-menu.ts +6 -0
- package/src/recipes/words/README.md +43 -0
- package/src/recipes/words/create-words.ts +114 -0
- package/src/theme/css-format.ts +32 -0
- package/src/theme/generate.ts +72 -0
- package/src/theme/index.ts +15 -0
- package/src/theme/presets.ts +79 -0
- package/src/theme/theme.ts +119 -0
|
@@ -0,0 +1,416 @@
|
|
|
1
|
+
import { I as Instance } from './types-BkS_raL8.js';
|
|
2
|
+
|
|
3
|
+
type DialogVariant = 'morph' | 'liquid' | 'sheet';
|
|
4
|
+
type DialogPlacement = 'center' | 'anchor' | 'side';
|
|
5
|
+
interface DialogLabels {
|
|
6
|
+
close?: string;
|
|
7
|
+
float?: string;
|
|
8
|
+
dock?: string;
|
|
9
|
+
}
|
|
10
|
+
interface DialogOptions {
|
|
11
|
+
/** morph (Stepbro, default), liquid (Stepbro), or sheet: rises from the bottom and pushes [data-mk-underlay] back (Dousan). */
|
|
12
|
+
variant?: DialogVariant;
|
|
13
|
+
placement?: DialogPlacement;
|
|
14
|
+
/** Tinted backdrop; false leaves it transparent (menus). */
|
|
15
|
+
backdrop?: boolean;
|
|
16
|
+
closeOnBackdrop?: boolean;
|
|
17
|
+
/** Drag (or wheel) down to dismiss. */
|
|
18
|
+
drag?: boolean;
|
|
19
|
+
/** A key turns on the floating window (desktop) and remembers its place. */
|
|
20
|
+
float?: string | false;
|
|
21
|
+
autoResize?: boolean;
|
|
22
|
+
/** `[data-mk-open="<id>"]` buttons open it: true uses the dialog's id; a string names another id; false: none. */
|
|
23
|
+
triggers?: boolean | string;
|
|
24
|
+
/** Modal (default) or a non-modal dialog. */
|
|
25
|
+
modal?: boolean;
|
|
26
|
+
labels?: DialogLabels;
|
|
27
|
+
/** Grow the content with the surface (default). Menus turn it off and cascade their items instead. */
|
|
28
|
+
animateContent?: boolean;
|
|
29
|
+
onOpen?: () => void;
|
|
30
|
+
/** After it closed, whatever closed it. */
|
|
31
|
+
onClose?: () => void;
|
|
32
|
+
}
|
|
33
|
+
interface DialogInstance extends Instance {
|
|
34
|
+
/** `origin`: the control it grows from; omitted, the focused control; null, none (scale-in). */
|
|
35
|
+
open(origin?: HTMLElement | null): void;
|
|
36
|
+
close(): void;
|
|
37
|
+
toggle(origin?: HTMLElement | null): void;
|
|
38
|
+
float(): void;
|
|
39
|
+
dock(): void;
|
|
40
|
+
readonly isOpen: boolean;
|
|
41
|
+
readonly isFloating: boolean;
|
|
42
|
+
readonly element: HTMLElement;
|
|
43
|
+
}
|
|
44
|
+
declare function createDialog(dialog: HTMLElement | null, options?: DialogOptions): DialogInstance;
|
|
45
|
+
|
|
46
|
+
interface MenuOptions extends Omit<DialogOptions, 'placement' | 'backdrop' | 'drag' | 'autoResize' | 'animateContent'> {
|
|
47
|
+
ticket?: boolean;
|
|
48
|
+
/** Close after an option is chosen (default). */
|
|
49
|
+
closeOnSelect?: boolean;
|
|
50
|
+
onSelect?: (value: string, item: HTMLElement) => void;
|
|
51
|
+
}
|
|
52
|
+
interface MenuInstance extends DialogInstance {
|
|
53
|
+
readonly items: HTMLElement[];
|
|
54
|
+
}
|
|
55
|
+
declare function createMenu(dialog: HTMLElement | null, options?: MenuOptions): MenuInstance;
|
|
56
|
+
|
|
57
|
+
/**
|
|
58
|
+
* Every Stepbro duration in one place (seconds, like GSAP, unless the name says
|
|
59
|
+
* ms). Recipes and components take their defaults from here, so a timing is
|
|
60
|
+
* changed once. Sources: Stepbro replication kit, tasks/especificacion-replicacion.json
|
|
61
|
+
* and money/replication-catalog.json.
|
|
62
|
+
*/
|
|
63
|
+
declare const TIMING: Readonly<{
|
|
64
|
+
flow: 0.5;
|
|
65
|
+
flowStagger: 0.05;
|
|
66
|
+
stepChange: 0.5;
|
|
67
|
+
reveal: Readonly<{
|
|
68
|
+
readonly fast: readonly [0.5, 0.25];
|
|
69
|
+
readonly normal: readonly [0.7, 0.35];
|
|
70
|
+
readonly slow: readonly [1.05, 0.5];
|
|
71
|
+
readonly slower: readonly [1.6, 0.75];
|
|
72
|
+
}>;
|
|
73
|
+
details: 0.32;
|
|
74
|
+
chevron: 0.25;
|
|
75
|
+
indicator: 0.45;
|
|
76
|
+
number: 0.6;
|
|
77
|
+
numberPricing: 0.7;
|
|
78
|
+
revealCounter: 0.9;
|
|
79
|
+
layoutTravel: 0.62;
|
|
80
|
+
/** New items in a reflow enter in this share of the travel time. */
|
|
81
|
+
layoutEnterFactor: 0.6;
|
|
82
|
+
menu: Readonly<{
|
|
83
|
+
duration: 0.35;
|
|
84
|
+
stagger: 0.04;
|
|
85
|
+
delay: 0.1;
|
|
86
|
+
}>;
|
|
87
|
+
palette: Readonly<{
|
|
88
|
+
duration: 0.1;
|
|
89
|
+
stagger: 0.01;
|
|
90
|
+
}>;
|
|
91
|
+
form: Readonly<{
|
|
92
|
+
duration: 0.35;
|
|
93
|
+
stagger: 0.04;
|
|
94
|
+
}>;
|
|
95
|
+
landing: Readonly<{
|
|
96
|
+
duration: 0.4;
|
|
97
|
+
stagger: 0.05;
|
|
98
|
+
delay: 0.15;
|
|
99
|
+
}>;
|
|
100
|
+
content: Readonly<{
|
|
101
|
+
duration: 0.6;
|
|
102
|
+
stagger: 0.06;
|
|
103
|
+
}>;
|
|
104
|
+
bubble: 0.7;
|
|
105
|
+
bubbleStagger: 0.06;
|
|
106
|
+
word: 0.25;
|
|
107
|
+
wordStagger: 0.05;
|
|
108
|
+
chatScroll: 0.35;
|
|
109
|
+
composer: 0.18;
|
|
110
|
+
slot: Readonly<{
|
|
111
|
+
durationMs: 300;
|
|
112
|
+
staggerMs: 45;
|
|
113
|
+
exitOffsetMs: 50;
|
|
114
|
+
colorFadeMs: 280;
|
|
115
|
+
maxTilt: 5;
|
|
116
|
+
minResizeMs: 140;
|
|
117
|
+
}>;
|
|
118
|
+
swatch: 0.5;
|
|
119
|
+
swatchLight: 3.5;
|
|
120
|
+
swatchBackground: 4.5;
|
|
121
|
+
/** ModalHost (modal-origin, modal-close-origin, modal-fallback, modal-auto-resize). */
|
|
122
|
+
dialog: Readonly<{
|
|
123
|
+
/** The surface travels from its opener. */
|
|
124
|
+
open: 0.7;
|
|
125
|
+
/** The opener's colour hands over to the surface's. */
|
|
126
|
+
surfaceColor: 0.3;
|
|
127
|
+
/** Back into the opener. */
|
|
128
|
+
close: 0.5;
|
|
129
|
+
/** While closing, the content heads for the opener on a 2 s path cut at `close`. */
|
|
130
|
+
contentReturn: 2;
|
|
131
|
+
originHide: 0.08;
|
|
132
|
+
originShow: 0.3;
|
|
133
|
+
originShowDelay: 0.2;
|
|
134
|
+
/** No opener on screen: scale .92 → 1. */
|
|
135
|
+
fallback: 0.35;
|
|
136
|
+
autoResize: 0.45;
|
|
137
|
+
/** Backdrop tint on the signature curve. */
|
|
138
|
+
backdrop: 0.5;
|
|
139
|
+
/** Items of a list that opens from its control. */
|
|
140
|
+
list: 0.25;
|
|
141
|
+
}>;
|
|
142
|
+
/** modal-liquid (spring channels; springs are stiffness/damping, not times). */
|
|
143
|
+
liquid: Readonly<{
|
|
144
|
+
size: 0.3;
|
|
145
|
+
radius: 0.7;
|
|
146
|
+
content: 0.3;
|
|
147
|
+
color: 0.4;
|
|
148
|
+
colorDelay: 0.15;
|
|
149
|
+
ghost: 0.25;
|
|
150
|
+
ghostDelay: 0.05;
|
|
151
|
+
closeSize: 0.25;
|
|
152
|
+
closeContent: 0.3;
|
|
153
|
+
originRestore: 0.3;
|
|
154
|
+
originRestoreDelay: 0.2;
|
|
155
|
+
safetyMs: 1100;
|
|
156
|
+
}>;
|
|
157
|
+
/** modal-drag: the spring back when a drag is not far enough. */
|
|
158
|
+
drag: Readonly<{
|
|
159
|
+
restore: 0.5;
|
|
160
|
+
radiusRestore: 0.3;
|
|
161
|
+
}>;
|
|
162
|
+
/** modal-float. */
|
|
163
|
+
float: Readonly<{
|
|
164
|
+
shadow: 0.45;
|
|
165
|
+
glideDecay: 0.18;
|
|
166
|
+
sizeSmoothing: 0.08;
|
|
167
|
+
}>;
|
|
168
|
+
/** chat-loader-delay, chat-confirmation-bar. */
|
|
169
|
+
chat: Readonly<{
|
|
170
|
+
pendingDelayMs: 500;
|
|
171
|
+
confirmWordStagger: 0.1;
|
|
172
|
+
}>;
|
|
173
|
+
/** onboarding-busy-background, step-change, onboarding-reveal-counter. */
|
|
174
|
+
onboarding: Readonly<{
|
|
175
|
+
busy: 0.8;
|
|
176
|
+
idle: 0.6;
|
|
177
|
+
step: 0.5;
|
|
178
|
+
counter: 0.9;
|
|
179
|
+
}>;
|
|
180
|
+
/** task-drag: lift, land (FA .62), crossfade (66 % of the land), neighbours shifting (FA .52). */
|
|
181
|
+
sortable: Readonly<{
|
|
182
|
+
lift: 0.18;
|
|
183
|
+
land: 0.42;
|
|
184
|
+
landFade: number;
|
|
185
|
+
shift: 0.62;
|
|
186
|
+
}>;
|
|
187
|
+
/** toast-deck, toast-morph, toast-character-reveal. */
|
|
188
|
+
toast: Readonly<{
|
|
189
|
+
relayout: 0.6;
|
|
190
|
+
expand: 0.55;
|
|
191
|
+
expandStagger: 0.06;
|
|
192
|
+
enter: 0.5;
|
|
193
|
+
exit: 0.3;
|
|
194
|
+
collapseDelayMs: 150;
|
|
195
|
+
morphSize: 0.32;
|
|
196
|
+
morphRadius: 0.7;
|
|
197
|
+
morphContent: 0.32;
|
|
198
|
+
morphColor: 0.4;
|
|
199
|
+
morphColorDelay: 0.15;
|
|
200
|
+
morphShadow: 0.6;
|
|
201
|
+
morphShadowDelay: 0.05;
|
|
202
|
+
safetyMs: 1100;
|
|
203
|
+
chars: 0.4;
|
|
204
|
+
charsDelay: 0.225;
|
|
205
|
+
charsStagger: 0.02;
|
|
206
|
+
}>;
|
|
207
|
+
/** Dousan's glass (CSS): surface/shadow transitions, ring and shine. */
|
|
208
|
+
glass: Readonly<{
|
|
209
|
+
hover: 0.4;
|
|
210
|
+
ring: 0.5;
|
|
211
|
+
}>;
|
|
212
|
+
/** Stepbro's utility animations (css/effects/anim.css), by name. */
|
|
213
|
+
effects: Readonly<{
|
|
214
|
+
out: 0.5;
|
|
215
|
+
'out-left': 0.5;
|
|
216
|
+
'out-bottom': 0.5;
|
|
217
|
+
collapse: 0.25;
|
|
218
|
+
highlight: 1;
|
|
219
|
+
shake: 0.5;
|
|
220
|
+
'shake-strong': 0.4;
|
|
221
|
+
fade: 0.3;
|
|
222
|
+
wipe: 0.7;
|
|
223
|
+
'progress-in': 1;
|
|
224
|
+
}>;
|
|
225
|
+
/** Dousan's success confetti, per 60 fps frame. */
|
|
226
|
+
confetti: Readonly<{
|
|
227
|
+
count: 45;
|
|
228
|
+
speed: readonly [2, 8];
|
|
229
|
+
lift: 2;
|
|
230
|
+
radius: readonly [3, 7];
|
|
231
|
+
decay: readonly [0.015, 0.03];
|
|
232
|
+
gravity: 0.15;
|
|
233
|
+
drag: 0.98;
|
|
234
|
+
spin: 2.5;
|
|
235
|
+
}>;
|
|
236
|
+
/** Dousan's project sheet. */
|
|
237
|
+
sheet: Readonly<{
|
|
238
|
+
open: 0.72;
|
|
239
|
+
close: 0.72;
|
|
240
|
+
underlayScale: 0.98;
|
|
241
|
+
underlayOpacity: 0.4;
|
|
242
|
+
}>;
|
|
243
|
+
/** Dousan's springs as Motion declares them: [stiffness, damping]. */
|
|
244
|
+
springs: Readonly<{
|
|
245
|
+
press: readonly [400, 10];
|
|
246
|
+
success: readonly [260, 18];
|
|
247
|
+
underlay: readonly [300, 30];
|
|
248
|
+
letters: readonly [300, 10];
|
|
249
|
+
cursorFollow: readonly [800, 35];
|
|
250
|
+
cursorAppear: readonly [500, 30];
|
|
251
|
+
bentoEnter: readonly [60, 15];
|
|
252
|
+
bentoRepel: readonly [300, 25];
|
|
253
|
+
dockPill: readonly [380, 30];
|
|
254
|
+
}>;
|
|
255
|
+
/** OFFFICE's masked type (Siena's case titles start at 120 %). */
|
|
256
|
+
maskText: Readonly<{
|
|
257
|
+
duration: 1.2;
|
|
258
|
+
delay: 0.1;
|
|
259
|
+
stagger: 0.02;
|
|
260
|
+
exitStagger: 0.002;
|
|
261
|
+
y: 100;
|
|
262
|
+
threshold: 0.8;
|
|
263
|
+
}>;
|
|
264
|
+
/** Siena's reveal group (rules, fades, rises). */
|
|
265
|
+
cascade: Readonly<{
|
|
266
|
+
duration: 1.2;
|
|
267
|
+
step: 0.03;
|
|
268
|
+
rise: 200;
|
|
269
|
+
threshold: 0.3;
|
|
270
|
+
}>;
|
|
271
|
+
/** Siena's slot title: each letter turns 8–14 times inside a 2 s expo.out envelope. */
|
|
272
|
+
textRoll: Readonly<{
|
|
273
|
+
duration: 2;
|
|
274
|
+
stagger: 0.04;
|
|
275
|
+
turns: readonly [8, 14];
|
|
276
|
+
interval: 6000;
|
|
277
|
+
quietMs: 1000;
|
|
278
|
+
}>;
|
|
279
|
+
/** Dousan's hero letters: scale on hover, pastel blink. */
|
|
280
|
+
letters: Readonly<{
|
|
281
|
+
scale: 1.3;
|
|
282
|
+
y: -5;
|
|
283
|
+
step: 0.03;
|
|
284
|
+
blink: 0.6;
|
|
285
|
+
blinkStart: 0.6;
|
|
286
|
+
blinkRepeatDelay: 0.1;
|
|
287
|
+
blinkDelays: readonly [0.1, 0.6, 0.2, 1, 0.4, 1.2, 0.15, 0.8, 0.3];
|
|
288
|
+
}>;
|
|
289
|
+
/** Siena's image parallax. */
|
|
290
|
+
parallax: Readonly<{
|
|
291
|
+
travel: 10;
|
|
292
|
+
scale: 1.2;
|
|
293
|
+
strongScale: 1.3;
|
|
294
|
+
lerp: 1;
|
|
295
|
+
}>;
|
|
296
|
+
/** Siena's About grid gathering from depth. */
|
|
297
|
+
depthGrid: Readonly<{
|
|
298
|
+
perspective: 600;
|
|
299
|
+
distance: 900;
|
|
300
|
+
depth: -3000;
|
|
301
|
+
rotate: -160;
|
|
302
|
+
opacity: 0.05;
|
|
303
|
+
scale: 0.4;
|
|
304
|
+
stagger: 0.15;
|
|
305
|
+
lerp: 1;
|
|
306
|
+
}>;
|
|
307
|
+
/** Siena's video mask: the frame and the picture inside scale in opposite directions. */
|
|
308
|
+
frameZoom: Readonly<{
|
|
309
|
+
outer: readonly [80, 20];
|
|
310
|
+
inner: readonly [130, 20];
|
|
311
|
+
phoneOuter: readonly [95, 5];
|
|
312
|
+
phoneInner: readonly [105, 5];
|
|
313
|
+
open: 1;
|
|
314
|
+
lerp: 1;
|
|
315
|
+
}>;
|
|
316
|
+
/** Siena's marquee: seconds per item, at most 14 counted. */
|
|
317
|
+
marquee: Readonly<{
|
|
318
|
+
perItem: 2;
|
|
319
|
+
maxItems: 14;
|
|
320
|
+
}>;
|
|
321
|
+
/** Dousan's glass chip and Siena's dot cursor. */
|
|
322
|
+
cursor: Readonly<{
|
|
323
|
+
gutter: 10;
|
|
324
|
+
circle: 96;
|
|
325
|
+
dotLerp: 0.2;
|
|
326
|
+
light: 180;
|
|
327
|
+
}>;
|
|
328
|
+
/** iyo.ai's floating navbar: enters from −300 % over 1.8 s; rows follow 0.15 s + 0.025 s each. */
|
|
329
|
+
island: Readonly<{
|
|
330
|
+
entrance: 1.8;
|
|
331
|
+
offset: -300;
|
|
332
|
+
delay: 0.15;
|
|
333
|
+
step: 0.025;
|
|
334
|
+
focus: 150;
|
|
335
|
+
}>;
|
|
336
|
+
/** iyo.ai's product dock: spread for 1.6 s on load; tablet range re-checked 250 ms after a resize. */
|
|
337
|
+
cardDock: Readonly<{
|
|
338
|
+
intro: 1600;
|
|
339
|
+
resizeDebounce: 250;
|
|
340
|
+
}>;
|
|
341
|
+
/** iyo.ai's phone cards: 5 s a card, 2 s wait after a touch, 0.5 s after it shows. */
|
|
342
|
+
snapStrip: Readonly<{
|
|
343
|
+
interval: 5000;
|
|
344
|
+
resume: 2000;
|
|
345
|
+
delay: 500;
|
|
346
|
+
}>;
|
|
347
|
+
/** iyo.ai's fill-text: letters from .2, 0.5 s each, 0.1 s apart, top 90 % → centre 40 %. */
|
|
348
|
+
fillText: Readonly<{
|
|
349
|
+
from: 0.2;
|
|
350
|
+
duration: 0.5;
|
|
351
|
+
stagger: 0.1;
|
|
352
|
+
start: "top 90%";
|
|
353
|
+
end: "center 40%";
|
|
354
|
+
}>;
|
|
355
|
+
/** iyo.ai's particle hero (adapted): fade in 1 s after 0.3 s, morph cycles, pointer push. */
|
|
356
|
+
particleHero: Readonly<{
|
|
357
|
+
fadeIn: 1;
|
|
358
|
+
fadeDelay: 0.3;
|
|
359
|
+
size: 128;
|
|
360
|
+
pointSize: 1.7;
|
|
361
|
+
maxDpr: 1.5;
|
|
362
|
+
stillSteps: 110;
|
|
363
|
+
}>;
|
|
364
|
+
ticketMenu: Readonly<{
|
|
365
|
+
open: 0.9;
|
|
366
|
+
content: 1.1;
|
|
367
|
+
stagger: 0.02;
|
|
368
|
+
from: 150;
|
|
369
|
+
}>;
|
|
370
|
+
infiniteReel: Readonly<{
|
|
371
|
+
friction: 0.95;
|
|
372
|
+
wheel: 0.05;
|
|
373
|
+
dragThreshold: 5;
|
|
374
|
+
}>;
|
|
375
|
+
repelBento: Readonly<{
|
|
376
|
+
offset: 0.6;
|
|
377
|
+
stagger: 0.006;
|
|
378
|
+
strength: 5000;
|
|
379
|
+
distance: 30;
|
|
380
|
+
breakpoint: 1024;
|
|
381
|
+
}>;
|
|
382
|
+
rotator: Readonly<{
|
|
383
|
+
interval: 8000;
|
|
384
|
+
duration: 0.25;
|
|
385
|
+
y: 5;
|
|
386
|
+
}>;
|
|
387
|
+
dragRuler: Readonly<{
|
|
388
|
+
min: 0;
|
|
389
|
+
max: 8;
|
|
390
|
+
step: 0.1;
|
|
391
|
+
pixelsPerUnit: 60;
|
|
392
|
+
}>;
|
|
393
|
+
}>;
|
|
394
|
+
|
|
395
|
+
type RevealSpeed = keyof typeof TIMING.reveal;
|
|
396
|
+
interface RevealOptions {
|
|
397
|
+
/** Element (its centre) or viewport point. Default: the last pointer position, else the centre. */
|
|
398
|
+
origin?: Element | {
|
|
399
|
+
x: number;
|
|
400
|
+
y: number;
|
|
401
|
+
} | null;
|
|
402
|
+
speed?: RevealSpeed;
|
|
403
|
+
delay?: number;
|
|
404
|
+
overshoot?: number;
|
|
405
|
+
/** Veil colour. Default: the first opaque background up the tree, else var(--mk-bg). */
|
|
406
|
+
fill?: string;
|
|
407
|
+
}
|
|
408
|
+
interface RevealHandle {
|
|
409
|
+
timeline: gsap.core.Timeline;
|
|
410
|
+
finished: Promise<void>;
|
|
411
|
+
/** Stop now and remove the veil. */
|
|
412
|
+
cancel(): void;
|
|
413
|
+
}
|
|
414
|
+
declare function revealFrom(target: HTMLElement, options?: RevealOptions): RevealHandle | null;
|
|
415
|
+
|
|
416
|
+
export { type DialogInstance as D, type MenuInstance as M, type RevealHandle as R, TIMING as T, type DialogLabels as a, type DialogOptions as b, type DialogPlacement as c, type DialogVariant as d, type MenuOptions as e, type RevealOptions as f, type RevealSpeed as g, createDialog as h, createMenu as i, revealFrom as r };
|
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
import { I as Instance } from './types-BkS_raL8.js';
|
|
2
|
+
import { Flip } from 'gsap/Flip';
|
|
3
|
+
import { R as RevealHandle } from './reveal-WFUWDrei.js';
|
|
4
|
+
|
|
5
|
+
interface ThemePickerOptions {
|
|
6
|
+
/** Theme ids to show, in order. Default: every theme Stepbro shows (or all with showHidden). */
|
|
7
|
+
themes?: string[];
|
|
8
|
+
showHidden?: boolean;
|
|
9
|
+
labels?: {
|
|
10
|
+
group?: string;
|
|
11
|
+
};
|
|
12
|
+
onChange?: (id: string) => void;
|
|
13
|
+
}
|
|
14
|
+
interface ThemePickerInstance extends Instance {
|
|
15
|
+
select(id: string): void;
|
|
16
|
+
}
|
|
17
|
+
declare function createThemePicker(root: HTMLElement | null, options?: ThemePickerOptions): ThemePickerInstance;
|
|
18
|
+
|
|
19
|
+
interface ToasterLabels {
|
|
20
|
+
dismiss?: string;
|
|
21
|
+
}
|
|
22
|
+
interface ToasterOptions {
|
|
23
|
+
labels?: ToasterLabels;
|
|
24
|
+
}
|
|
25
|
+
type ToasterInstance = Instance;
|
|
26
|
+
/** Render the toast list into `host` (a fixed layer at the top of the screen). */
|
|
27
|
+
declare function createToaster(host: HTMLElement | null, options?: ToasterOptions): ToasterInstance;
|
|
28
|
+
|
|
29
|
+
type ChatRole = 'user' | 'assistant' | 'system';
|
|
30
|
+
interface ChatLabels {
|
|
31
|
+
thinking?: string;
|
|
32
|
+
}
|
|
33
|
+
interface ChatOptions {
|
|
34
|
+
/** Animate the messages already there when the chat starts (default: no, history stays still). */
|
|
35
|
+
animateExisting?: boolean;
|
|
36
|
+
/** Clear the input after sending (default). */
|
|
37
|
+
clearOnSend?: boolean;
|
|
38
|
+
labels?: ChatLabels;
|
|
39
|
+
onSend?: (text: string) => void;
|
|
40
|
+
}
|
|
41
|
+
interface ChatInstance extends Instance {
|
|
42
|
+
/** Append a plain-text message (vanilla convenience); it enters on its own. */
|
|
43
|
+
add(role: ChatRole, text: string): HTMLElement;
|
|
44
|
+
/** Show the thinking placeholder after 500 ms (a fast answer never shows it). */
|
|
45
|
+
pending(): void;
|
|
46
|
+
/** Add the answer: it morphs out of the placeholder if that was showing, else it enters. */
|
|
47
|
+
reply(message: HTMLElement | string): HTMLElement;
|
|
48
|
+
/** A confirmation bar flows in and its words rise. */
|
|
49
|
+
confirm(bar: HTMLElement): void;
|
|
50
|
+
setRecording(on: boolean): void;
|
|
51
|
+
scrollToLatest(): void;
|
|
52
|
+
/** Mark a message as already shown (a framework animates it itself). */
|
|
53
|
+
adopt(message: Element): void;
|
|
54
|
+
readonly messages: HTMLElement;
|
|
55
|
+
}
|
|
56
|
+
/** data-flip-id of the thinking placeholder; a framework's own placeholder must carry it. */
|
|
57
|
+
declare const PENDING_ID = "mk-chat-pending";
|
|
58
|
+
/** The thinking placeholder's geometry, taken before the DOM changes (for frameworks). */
|
|
59
|
+
declare const capturePending: (placeholder: Element | null) => Flip.FlipState | null;
|
|
60
|
+
/** Morph a captured placeholder into the reply (after the DOM shows the reply). */
|
|
61
|
+
declare function morphPendingToReply(state: ReturnType<typeof Flip.getState> | null, reply: HTMLElement, scroller?: HTMLElement | null): gsap.core.Timeline | null;
|
|
62
|
+
/** A message bubble element (plain text). */
|
|
63
|
+
declare function chatMessage(role: ChatRole, text: string): HTMLDivElement;
|
|
64
|
+
declare function createChat(root: HTMLElement | null, options?: ChatOptions): ChatInstance;
|
|
65
|
+
|
|
66
|
+
declare const NAV_STYLES: readonly ["clasica", "bonita", "dock", "guapa", "tasks", "melon", "tunnel"];
|
|
67
|
+
type NavStyle = (typeof NAV_STYLES)[number];
|
|
68
|
+
interface NavOptions {
|
|
69
|
+
/** Default: the saved one (storageKey), else the mk-nav--<style> class in the markup, else 'bonita' (Money's default). */
|
|
70
|
+
style?: NavStyle;
|
|
71
|
+
/** The accent variant (Stepbro's variant-1): the current page in primary-container. */
|
|
72
|
+
accent?: boolean;
|
|
73
|
+
/** Reveal the shell from the first button when the nav starts (off by default). */
|
|
74
|
+
reveal?: boolean;
|
|
75
|
+
/** Remember the chosen style in localStorage under this key. */
|
|
76
|
+
storageKey?: string;
|
|
77
|
+
labels?: {
|
|
78
|
+
nav?: string;
|
|
79
|
+
};
|
|
80
|
+
onSelect?: (index: number, value: string | undefined, item: HTMLElement) => void;
|
|
81
|
+
}
|
|
82
|
+
interface NavInstance extends Instance {
|
|
83
|
+
/** Mark a page as current, by index or value (silent: no event). */
|
|
84
|
+
select(target: number | string): void;
|
|
85
|
+
setStyle(style: NavStyle): void;
|
|
86
|
+
setAccent(on: boolean): void;
|
|
87
|
+
readonly index: number;
|
|
88
|
+
readonly style: NavStyle;
|
|
89
|
+
readonly items: HTMLElement[];
|
|
90
|
+
}
|
|
91
|
+
interface NavigateDetail {
|
|
92
|
+
index: number;
|
|
93
|
+
value: string | undefined;
|
|
94
|
+
item: HTMLElement;
|
|
95
|
+
/** The click: call its preventDefault() to stop a link (single-page apps). */
|
|
96
|
+
originalEvent: MouseEvent;
|
|
97
|
+
}
|
|
98
|
+
/** Stepbro's nav entrance: the app shell is uncovered from the nav's first button. */
|
|
99
|
+
declare function revealShell(nav: HTMLElement): RevealHandle | null;
|
|
100
|
+
declare function createNav(root: HTMLElement | null, options?: NavOptions): NavInstance;
|
|
101
|
+
|
|
102
|
+
type CursorVariant = 'chip' | 'dot';
|
|
103
|
+
interface CursorOptions {
|
|
104
|
+
variant?: CursorVariant;
|
|
105
|
+
/** Where it works. chip: the document; dot: the host's parent. */
|
|
106
|
+
zone?: Element | null;
|
|
107
|
+
/** dot: the word when nothing under the pointer gives one. */
|
|
108
|
+
text?: string;
|
|
109
|
+
/** dot: arrows shown while pressed. */
|
|
110
|
+
arrows?: 'x' | 'y' | 'none';
|
|
111
|
+
}
|
|
112
|
+
interface CursorInstance extends Instance {
|
|
113
|
+
readonly visible: boolean;
|
|
114
|
+
readonly label: string;
|
|
115
|
+
readonly position: {
|
|
116
|
+
x: number;
|
|
117
|
+
y: number;
|
|
118
|
+
};
|
|
119
|
+
readonly tone: 'light' | 'dark';
|
|
120
|
+
/** One frame (dt = 1 at 60 Hz); the shared ticker calls it. */
|
|
121
|
+
update(dt?: number): void;
|
|
122
|
+
}
|
|
123
|
+
declare function createCursor(host: HTMLElement | null, options?: CursorOptions): CursorInstance;
|
|
124
|
+
|
|
125
|
+
interface IslandOptions {
|
|
126
|
+
/** Drop in from above on load (true), wait for ready() ('manual') or not at all. */
|
|
127
|
+
entrance?: boolean | 'manual';
|
|
128
|
+
/** Close when the page scrolls after a wheel or touch (iyo). */
|
|
129
|
+
closeOnScroll?: boolean;
|
|
130
|
+
/** Close when a link inside a panel is followed. */
|
|
131
|
+
closeOnNavigate?: boolean;
|
|
132
|
+
/** Focus the first control of the panel that opens. */
|
|
133
|
+
focusOnOpen?: boolean;
|
|
134
|
+
/** The open panel's name, or null when it closes. */
|
|
135
|
+
onChange?: (active: string | null) => void;
|
|
136
|
+
}
|
|
137
|
+
interface IslandInstance extends Instance {
|
|
138
|
+
open(name?: string): void;
|
|
139
|
+
close(returnFocus?: boolean): void;
|
|
140
|
+
toggle(name?: string): void;
|
|
141
|
+
/** Play the entrance (entrance: 'manual'). */
|
|
142
|
+
ready(): void;
|
|
143
|
+
readonly active: string | null;
|
|
144
|
+
}
|
|
145
|
+
declare function createIsland(root: HTMLElement | null, options?: IslandOptions): IslandInstance;
|
|
146
|
+
|
|
147
|
+
type ToastTone = 'success' | 'error' | 'info' | 'neutral';
|
|
148
|
+
interface ToastAction {
|
|
149
|
+
label: string;
|
|
150
|
+
onClick: () => void;
|
|
151
|
+
}
|
|
152
|
+
interface ToastOptions {
|
|
153
|
+
/** The control the toast grows out of. */
|
|
154
|
+
origin?: HTMLElement | null;
|
|
155
|
+
/** ms on screen; 0 keeps it until dismissed. */
|
|
156
|
+
duration?: number;
|
|
157
|
+
tone?: ToastTone;
|
|
158
|
+
action?: ToastAction;
|
|
159
|
+
/** Show the tone's icon (default). */
|
|
160
|
+
icon?: boolean;
|
|
161
|
+
}
|
|
162
|
+
interface ToastItem {
|
|
163
|
+
id: number;
|
|
164
|
+
message: string;
|
|
165
|
+
origin: HTMLElement | null;
|
|
166
|
+
duration: number;
|
|
167
|
+
tone: ToastTone;
|
|
168
|
+
action: ToastAction | null;
|
|
169
|
+
icon: boolean;
|
|
170
|
+
closing: boolean;
|
|
171
|
+
}
|
|
172
|
+
/** At most this many live toasts; older ones leave to make room. */
|
|
173
|
+
declare const TOAST_LIMIT = 5;
|
|
174
|
+
declare const getToasts: () => ToastItem[];
|
|
175
|
+
declare function subscribeToasts(listener: () => void): () => void;
|
|
176
|
+
declare function show(message: string, { origin, duration, tone, action, icon }?: ToastOptions): number;
|
|
177
|
+
/** Start the closing animation of a toast. */
|
|
178
|
+
declare function dismissToast(id: number): void;
|
|
179
|
+
/** Take a toast out of the list (after its exit animation). */
|
|
180
|
+
declare function removeToast(id: number): void;
|
|
181
|
+
/** Remove every toast at once (no animation). */
|
|
182
|
+
declare function clearToasts(): void;
|
|
183
|
+
/** Show a toast: `toast('Copiado', { origin: button })`. Returns its id. */
|
|
184
|
+
declare const toast: typeof show & {
|
|
185
|
+
dismiss: typeof dismissToast;
|
|
186
|
+
clear: typeof clearToasts;
|
|
187
|
+
};
|
|
188
|
+
declare const toastTimers: {
|
|
189
|
+
start(id: number, duration: number): void;
|
|
190
|
+
pause(id: number): void;
|
|
191
|
+
resume(id: number): void;
|
|
192
|
+
clear(id: number): void;
|
|
193
|
+
};
|
|
194
|
+
|
|
195
|
+
export { createIsland as A, createNav as B, type ChatInstance as C, createThemePicker as D, createToaster as E, dismissToast as F, getToasts as G, morphPendingToReply as H, type IslandInstance as I, removeToast as J, revealShell as K, subscribeToasts as L, toastTimers as M, type NavInstance as N, PENDING_ID as P, type ThemePickerInstance as T, type ToasterInstance as a, type ChatRole as b, type NavStyle as c, type CursorInstance as d, type ChatLabels as e, type ChatOptions as f, type CursorOptions as g, type CursorVariant as h, type IslandOptions as i, NAV_STYLES as j, type NavOptions as k, type NavigateDetail as l, TOAST_LIMIT as m, type ThemePickerOptions as n, type ToastAction as o, type ToastItem as p, type ToastOptions as q, type ToastTone as r, type ToasterLabels as s, toast as t, type ToasterOptions as u, capturePending as v, chatMessage as w, clearToasts as x, createChat as y, createCursor as z };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { T as ThemeState } from '../theme-BFMoCzi6.js';
|
|
2
|
+
import { ThemePalettes } from './index.js';
|
|
3
|
+
export { themeCss } from './index.js';
|
|
4
|
+
|
|
5
|
+
type ThemeVariant = 'tonal-spot' | 'vibrant' | 'expressive' | 'neutral' | 'content' | 'fidelity' | 'monochrome';
|
|
6
|
+
interface GenerateOptions {
|
|
7
|
+
variant?: ThemeVariant;
|
|
8
|
+
/** -1 (reduced) … 0 (standard) … 1 (high). */
|
|
9
|
+
contrast?: number;
|
|
10
|
+
}
|
|
11
|
+
declare function generateTheme(seed: string, { variant, contrast }?: GenerateOptions): ThemePalettes;
|
|
12
|
+
|
|
13
|
+
/** Generate a theme from `seed`, inject it as a <style>, register and select it. */
|
|
14
|
+
declare function applyTheme(seed: string, { id, ...options }?: GenerateOptions & {
|
|
15
|
+
id?: string;
|
|
16
|
+
}): ThemeState;
|
|
17
|
+
|
|
18
|
+
export { type GenerateOptions, type ThemeVariant, applyTheme, generateTheme };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import {
|
|
2
|
+
themeCss
|
|
3
|
+
} from "../chunk-ABNRDDO7.js";
|
|
4
|
+
import {
|
|
5
|
+
ROLES,
|
|
6
|
+
registerTheme,
|
|
7
|
+
setTheme
|
|
8
|
+
} from "../chunk-J27KH2A2.js";
|
|
9
|
+
import "../chunk-TGV27ZWM.js";
|
|
10
|
+
|
|
11
|
+
// src/theme/generate.ts
|
|
12
|
+
import {
|
|
13
|
+
Hct,
|
|
14
|
+
MaterialDynamicColors,
|
|
15
|
+
SchemeContent,
|
|
16
|
+
SchemeExpressive,
|
|
17
|
+
SchemeFidelity,
|
|
18
|
+
SchemeMonochrome,
|
|
19
|
+
SchemeNeutral,
|
|
20
|
+
SchemeTonalSpot,
|
|
21
|
+
SchemeVibrant,
|
|
22
|
+
argbFromHex,
|
|
23
|
+
hexFromArgb
|
|
24
|
+
} from "@material/material-color-utilities";
|
|
25
|
+
var SCHEMES = {
|
|
26
|
+
"tonal-spot": SchemeTonalSpot,
|
|
27
|
+
vibrant: SchemeVibrant,
|
|
28
|
+
expressive: SchemeExpressive,
|
|
29
|
+
neutral: SchemeNeutral,
|
|
30
|
+
content: SchemeContent,
|
|
31
|
+
fidelity: SchemeFidelity,
|
|
32
|
+
monochrome: SchemeMonochrome
|
|
33
|
+
};
|
|
34
|
+
var camel = (role) => role.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
|
|
35
|
+
function generateTheme(seed, { variant = "tonal-spot", contrast = 0 } = {}) {
|
|
36
|
+
if (!/^#?[0-9a-f]{6}$/i.test(seed)) throw new Error(`generateTheme: seed must be a #rrggbb colour (got "${seed}")`);
|
|
37
|
+
const Scheme = SCHEMES[variant];
|
|
38
|
+
if (!Scheme) throw new Error(`generateTheme: unknown variant "${variant}"`);
|
|
39
|
+
const source = Hct.fromInt(argbFromHex(seed.startsWith("#") ? seed : `#${seed}`));
|
|
40
|
+
const palette = (dark) => {
|
|
41
|
+
const scheme = new Scheme(source, dark, contrast);
|
|
42
|
+
const colors = MaterialDynamicColors;
|
|
43
|
+
return Object.fromEntries(ROLES.map((role) => [role, hexFromArgb(colors[camel(role)].getArgb(scheme))]));
|
|
44
|
+
};
|
|
45
|
+
return { light: palette(false), dark: palette(true) };
|
|
46
|
+
}
|
|
47
|
+
function applyTheme(seed, { id = "custom", ...options } = {}) {
|
|
48
|
+
const css = themeCss(id, generateTheme(seed, options));
|
|
49
|
+
let style = document.querySelector(`style[data-mk-theme-style="${id}"]`);
|
|
50
|
+
if (!style) {
|
|
51
|
+
style = document.createElement("style");
|
|
52
|
+
style.dataset.mkThemeStyle = id;
|
|
53
|
+
document.head.append(style);
|
|
54
|
+
}
|
|
55
|
+
style.textContent = css;
|
|
56
|
+
registerTheme(id);
|
|
57
|
+
return setTheme(id);
|
|
58
|
+
}
|
|
59
|
+
export {
|
|
60
|
+
applyTheme,
|
|
61
|
+
generateTheme,
|
|
62
|
+
themeCss
|
|
63
|
+
};
|
|
64
|
+
//# sourceMappingURL=generate.js.map
|