@zyncat/ui 0.10.0 → 0.12.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/README.md +135 -40
- package/dist/alert.css +126 -121
- package/dist/alert.js +12 -14
- package/dist/alert.js.map +1 -1
- package/dist/avatar-group.js.map +1 -1
- package/dist/avatar.css +179 -174
- package/dist/avatar.js.map +1 -1
- package/dist/badge.css +166 -160
- package/dist/badge.js +1 -1
- package/dist/button.css +272 -246
- package/dist/button.js +1 -1
- package/dist/checkbox.css +158 -153
- package/dist/checkbox.js +2 -2
- package/dist/{chunk-UXONUUPI.js → chunk-227ZW4V7.js} +40 -32
- package/dist/chunk-227ZW4V7.js.map +1 -0
- package/dist/{chunk-2ERBBFZS.js → chunk-3MPF7FZV.js} +2 -2
- package/dist/chunk-3MPF7FZV.js.map +1 -0
- package/dist/{chunk-OMHQ4U4J.js → chunk-43M6GQ4Q.js} +86 -79
- package/dist/chunk-43M6GQ4Q.js.map +1 -0
- package/dist/{chunk-7SZCJ7WI.js → chunk-45R4Z5XN.js} +3 -3
- package/dist/chunk-45R4Z5XN.js.map +1 -0
- package/dist/{chunk-I4XQ4PV2.js → chunk-4BSHB7R3.js} +9 -7
- package/dist/chunk-4BSHB7R3.js.map +1 -0
- package/dist/{chunk-YGGCQNNU.js → chunk-4C5RZXBT.js} +33 -34
- package/dist/chunk-4C5RZXBT.js.map +1 -0
- package/dist/{chunk-2QWJ6FAX.js → chunk-5PZ43DCG.js} +31 -15
- package/dist/chunk-5PZ43DCG.js.map +1 -0
- package/dist/{chunk-S5ZTZANS.js → chunk-7IZJERGA.js} +35 -12
- package/dist/chunk-7IZJERGA.js.map +1 -0
- package/dist/{chunk-ZCOUPPTI.js → chunk-A5WTZACK.js} +22 -12
- package/dist/chunk-A5WTZACK.js.map +1 -0
- package/dist/{chunk-64UU4LGU.js → chunk-AADAJL7D.js} +3 -3
- package/dist/{chunk-64UU4LGU.js.map → chunk-AADAJL7D.js.map} +1 -1
- package/dist/{chunk-FTOAUJL5.js → chunk-CF4QHO4N.js} +21 -11
- package/dist/chunk-CF4QHO4N.js.map +1 -0
- package/dist/{chunk-WM5J5TDI.js → chunk-CNWTIMIP.js} +13 -17
- package/dist/chunk-CNWTIMIP.js.map +1 -0
- package/dist/{chunk-356HZMT4.js → chunk-DDRSMHN4.js} +31 -22
- package/dist/chunk-DDRSMHN4.js.map +1 -0
- package/dist/{chunk-VTJTGVZZ.js → chunk-DMX2F6B4.js} +2 -2
- package/dist/chunk-DMX2F6B4.js.map +1 -0
- package/dist/{chunk-3SBCBYB7.js → chunk-EAI4POPB.js} +2 -2
- package/dist/{chunk-3SBCBYB7.js.map → chunk-EAI4POPB.js.map} +1 -1
- package/dist/{chunk-Y7AJQVWJ.js → chunk-EF6RPXU7.js} +17 -15
- package/dist/chunk-EF6RPXU7.js.map +1 -0
- package/dist/{chunk-K5X2GCXU.js → chunk-FONOS5RN.js} +14 -15
- package/dist/chunk-FONOS5RN.js.map +1 -0
- package/dist/{chunk-PMECHR3A.js → chunk-FQEHSKEI.js} +2 -2
- package/dist/chunk-FQEHSKEI.js.map +1 -0
- package/dist/chunk-HDSFWZ7L.js +12 -0
- package/dist/chunk-HDSFWZ7L.js.map +1 -0
- package/dist/{chunk-2F5PITAO.js → chunk-HY5MPISE.js} +2 -2
- package/dist/chunk-HY5MPISE.js.map +1 -0
- package/dist/{chunk-QDK66S4G.js → chunk-I45AU6KH.js} +3 -3
- package/dist/chunk-I45AU6KH.js.map +1 -0
- package/dist/{chunk-YGCVWGUG.js → chunk-IJS7TPGV.js} +153 -46
- package/dist/chunk-IJS7TPGV.js.map +1 -0
- package/dist/{chunk-62P3KD57.js → chunk-IUQAUBVM.js} +18 -11
- package/dist/chunk-IUQAUBVM.js.map +1 -0
- package/dist/chunk-JY6A2ZJZ.js +44 -0
- package/dist/chunk-JY6A2ZJZ.js.map +1 -0
- package/dist/{chunk-XWUWYSCT.js → chunk-M43IOM5C.js} +20 -10
- package/dist/chunk-M43IOM5C.js.map +1 -0
- package/dist/{chunk-S7B34VGN.js → chunk-OWNMRMPN.js} +3 -3
- package/dist/{chunk-S7B34VGN.js.map → chunk-OWNMRMPN.js.map} +1 -1
- package/dist/chunk-RFRE4WKX.js +22 -0
- package/dist/chunk-RFRE4WKX.js.map +1 -0
- package/dist/{chunk-NNXJCLTV.js → chunk-RJFGWJ4W.js} +2 -2
- package/dist/chunk-RJFGWJ4W.js.map +1 -0
- package/dist/{chunk-NEF5XAHG.js → chunk-TUTXXC3W.js} +4 -4
- package/dist/chunk-TUTXXC3W.js.map +1 -0
- package/dist/chunk-TVYH4AN7.js +70 -0
- package/dist/chunk-TVYH4AN7.js.map +1 -0
- package/dist/{chunk-RCONNA7I.js → chunk-VAXCXZ53.js} +34 -22
- package/dist/chunk-VAXCXZ53.js.map +1 -0
- package/dist/chunk-XNIYSAMJ.js +52 -0
- package/dist/chunk-XNIYSAMJ.js.map +1 -0
- package/dist/{chunk-CONSWNIV.js → chunk-Y2YA7QRF.js} +6 -6
- package/dist/chunk-Y2YA7QRF.js.map +1 -0
- package/dist/cli.js +1809 -0
- package/dist/collapse.css +70 -61
- package/dist/collapse.js +2 -2
- package/dist/confetti.css +45 -0
- package/dist/confetti.js +540 -0
- package/dist/confetti.js.map +1 -0
- package/dist/count-badge.js +3 -3
- package/dist/count-badge.js.map +1 -1
- package/dist/date-field.js +24 -19
- package/dist/date-field.js.map +1 -1
- package/dist/date-picker.css +563 -559
- package/dist/date-range-field.js +58 -41
- package/dist/date-range-field.js.map +1 -1
- package/dist/datetime-field.js +24 -19
- package/dist/datetime-field.js.map +1 -1
- package/dist/dialog.css +176 -172
- package/dist/dialog.js +30 -19
- package/dist/dialog.js.map +1 -1
- package/dist/digit-strip.css +65 -0
- package/dist/dropdown.css +65 -0
- package/dist/dropdown.js +350 -0
- package/dist/dropdown.js.map +1 -0
- package/dist/emoji-picker.js +713 -0
- package/dist/emoji-picker.js.map +1 -0
- package/dist/facebook-feed.css +880 -0
- package/dist/facebook-feed.js +697 -0
- package/dist/facebook-feed.js.map +1 -0
- package/dist/flow-field.css +49 -0
- package/dist/flow-field.js +269 -0
- package/dist/flow-field.js.map +1 -0
- package/dist/glide.js +3 -3
- package/dist/icon.css +34 -30
- package/dist/input.css +296 -318
- package/dist/instagram-feed.css +378 -0
- package/dist/instagram-feed.js +272 -0
- package/dist/instagram-feed.js.map +1 -0
- package/dist/lens.css +119 -0
- package/dist/lens.js +307 -0
- package/dist/lens.js.map +1 -0
- package/dist/mcp.js +379 -184
- package/dist/menu-surface.css +127 -0
- package/dist/modal.css +11 -7
- package/dist/modal.js +24 -17
- package/dist/modal.js.map +1 -1
- package/dist/morphing-text.css +84 -0
- package/dist/morphing-text.js +256 -0
- package/dist/morphing-text.js.map +1 -0
- package/dist/motion-devtools.css +237 -233
- package/dist/motion-devtools.js +7 -6
- package/dist/motion-devtools.js.map +1 -1
- package/dist/motion-tokens.js +1 -1
- package/dist/multi-select.js +20 -17
- package/dist/multi-select.js.map +1 -1
- package/dist/number-field.js +11 -7
- package/dist/number-field.js.map +1 -1
- package/dist/odometer.css +58 -59
- package/dist/odometer.js +109 -0
- package/dist/odometer.js.map +1 -0
- package/dist/otp-field.js.map +1 -1
- package/dist/overlay.css +24 -20
- package/dist/pagination.css +42 -38
- package/dist/pagination.js +6 -12
- package/dist/pagination.js.map +1 -1
- package/dist/popover.css +69 -65
- package/dist/popover.js +12 -10
- package/dist/radio-group.css +275 -276
- package/dist/radio-group.js +70 -95
- package/dist/radio-group.js.map +1 -1
- package/dist/select.css +291 -386
- package/dist/select.js +18 -15
- package/dist/select.js.map +1 -1
- package/dist/sheet.css +47 -23
- package/dist/sheet.js +11 -10
- package/dist/status-badge.js +3 -3
- package/dist/status-badge.js.map +1 -1
- package/dist/styles.css +221 -0
- package/dist/support-rail.css +421 -0
- package/dist/support-rail.js +243 -0
- package/dist/support-rail.js.map +1 -0
- package/dist/table.css +333 -323
- package/dist/table.js +32 -21
- package/dist/table.js.map +1 -1
- package/dist/tabs.css +163 -156
- package/dist/tabs.js +26 -20
- package/dist/tabs.js.map +1 -1
- package/dist/tag.css +209 -231
- package/dist/tag.js +11 -10
- package/dist/tag.js.map +1 -1
- package/dist/text-field.js +7 -67
- package/dist/text-field.js.map +1 -1
- package/dist/textarea.css +205 -211
- package/dist/textarea.js +12 -12
- package/dist/textarea.js.map +1 -1
- package/dist/theme.js +69 -0
- package/dist/theme.js.map +1 -0
- package/dist/tiktok.css +662 -0
- package/dist/tiktok.js +494 -0
- package/dist/tiktok.js.map +1 -0
- package/dist/time-field.js +6 -6
- package/dist/time-field.js.map +1 -1
- package/dist/toast.css +237 -233
- package/dist/toast.js +43 -47
- package/dist/toast.js.map +1 -1
- package/dist/toggle-tag.js +1 -1
- package/dist/toggle-tag.js.map +1 -1
- package/dist/toggle.css +139 -135
- package/dist/toggle.js.map +1 -1
- package/dist/tooltip.css +79 -78
- package/dist/tooltip.js +50 -60
- package/dist/tooltip.js.map +1 -1
- package/dist/trigger.css +13 -0
- package/dist/{alert.d.ts → types/components/composites/alert/Alert.d.ts} +13 -15
- package/dist/{date-field.d.ts → types/components/composites/date-picker/DateField.d.ts} +4 -10
- package/dist/types/components/composites/date-picker/DateRangeField.d.ts +21 -0
- package/dist/{datetime-field.d.ts → types/components/composites/date-picker/DateTimeField.d.ts} +4 -10
- package/dist/{time-field.d.ts → types/components/composites/date-picker/TimeField.d.ts} +5 -11
- package/dist/types/components/composites/date-picker/calendar-panel.d.ts +16 -0
- package/dist/types/components/composites/date-picker/date-utils.d.ts +12 -0
- package/dist/types/components/composites/date-picker/field-shell.d.ts +46 -0
- package/dist/types/components/composites/date-picker/range-panel.d.ts +24 -0
- package/dist/types/components/composites/date-picker/time-core.d.ts +14 -0
- package/dist/types/components/composites/date-picker/use-day-focus.d.ts +2 -0
- package/dist/{dialog.d.ts → types/components/composites/dialog/Dialog.d.ts} +10 -11
- package/dist/types/components/composites/dropdown/Dropdown.d.ts +37 -0
- package/dist/types/components/composites/dropdown/menu-panel.d.ts +7 -0
- package/dist/types/components/composites/dropdown/types.d.ts +71 -0
- package/dist/types/components/composites/emoji-picker/EmojiPickerPanel.d.ts +45 -0
- package/dist/types/components/composites/emoji-picker/category-icons.d.ts +9 -0
- package/dist/types/components/composites/emoji-picker/data.d.ts +33 -0
- package/dist/types/components/composites/emoji-picker/dom.d.ts +19 -0
- package/dist/types/components/composites/emoji-picker/getEmojiUrl.d.ts +2 -0
- package/dist/types/components/composites/emoji-picker/navigation.d.ts +7 -0
- package/dist/types/components/composites/emoji-picker/picker.d.ts +20 -0
- package/dist/types/components/composites/emoji-picker/react/category-bar.d.ts +6 -0
- package/dist/types/components/composites/emoji-picker/react/useEmojiPicker.d.ts +50 -0
- package/dist/types/components/composites/emoji-picker/scaffold.d.ts +8 -0
- package/dist/types/components/composites/emoji-picker/search.d.ts +1 -0
- package/dist/types/components/composites/emoji-picker/types.d.ts +13 -0
- package/dist/{modal.d.ts → types/components/composites/modal/Modal.d.ts} +10 -11
- package/dist/{pagination.d.ts → types/components/composites/pagination/Pagination.d.ts} +5 -8
- package/dist/{popover.d.ts → types/components/composites/popover/Popover.d.ts} +11 -14
- package/dist/{multi-select.d.ts → types/components/composites/select/MultiSelect.d.ts} +12 -11
- package/dist/{select.d.ts → types/components/composites/select/Select.d.ts} +16 -14
- package/dist/types/components/composites/select/core/index.d.ts +4 -0
- package/dist/types/components/composites/select/core/menu.d.ts +13 -0
- package/dist/types/components/composites/select/core/panel.d.ts +18 -0
- package/dist/types/components/composites/select/core/trigger.d.ts +16 -0
- package/dist/{types-SGMShK7R.d.ts → types/components/composites/select/core/types.d.ts} +13 -6
- package/dist/types/components/composites/select/core/use-listbox.d.ts +42 -0
- package/dist/{sheet.d.ts → types/components/composites/sheet/Sheet.d.ts} +10 -11
- package/dist/types/components/composites/sheet/use-sheet-drag.d.ts +13 -0
- package/dist/{table.d.ts → types/components/composites/table/Table.d.ts} +12 -12
- package/dist/{tabs.d.ts → types/components/composites/tabs/Tabs.d.ts} +13 -13
- package/dist/types/components/composites/toast/Toast.d.ts +10 -0
- package/dist/{toast-store.d.ts → types/components/composites/toast/toast-store.d.ts} +12 -14
- package/dist/{tooltip.d.ts → types/components/composites/tooltip/Tooltip.d.ts} +6 -10
- package/dist/types/components/composites/tooltip/tooltip-host.d.ts +1 -0
- package/dist/types/components/composites/tooltip/tooltip-store.d.ts +29 -0
- package/dist/types/components/compound/support-rail/SupportRail.d.ts +41 -0
- package/dist/types/components/dev/MotionDevtools.d.ts +24 -0
- package/dist/types/components/dev/slowmo-engine.d.ts +27 -0
- package/dist/types/components/expressive/confetti/Confetti.d.ts +43 -0
- package/dist/types/components/expressive/facebook-feed/FacebookFeed.d.ts +73 -0
- package/dist/types/components/expressive/facebook-feed/chrome.d.ts +30 -0
- package/dist/types/components/expressive/facebook-feed/icons.d.ts +21 -0
- package/dist/types/components/expressive/facebook-feed/post.d.ts +25 -0
- package/dist/types/components/expressive/facebook-feed/reel.d.ts +26 -0
- package/dist/types/components/expressive/facebook-feed/story.d.ts +20 -0
- package/dist/types/components/expressive/flow-field/FlowField.d.ts +23 -0
- package/dist/types/components/expressive/instagram-feed/InstagramFeed.d.ts +59 -0
- package/dist/types/components/expressive/lens/Lens.d.ts +23 -0
- package/dist/types/components/expressive/morphing-text/MorphingText.d.ts +21 -0
- package/dist/types/components/expressive/odometer/Odometer.d.ts +21 -0
- package/dist/types/components/expressive/tiktok/TikTok.d.ts +85 -0
- package/dist/types/components/expressive/tiktok/glyphs.d.ts +40 -0
- package/dist/types/components/expressive/typing-lines/TypingLines.d.ts +25 -0
- package/dist/types/components/expressive/weight-field/WeightField.d.ts +19 -0
- package/dist/types/components/expressive/youtube/YouTube.d.ts +73 -0
- package/dist/types/components/expressive/youtube/format.d.ts +2 -0
- package/dist/types/components/expressive/youtube/glyphs.d.ts +16 -0
- package/dist/types/components/expressive/youtube/media.d.ts +8 -0
- package/dist/types/components/expressive/youtube/post.d.ts +19 -0
- package/dist/types/components/expressive/youtube/short.d.ts +18 -0
- package/dist/types/components/expressive/youtube/video.d.ts +14 -0
- package/dist/types/components/internal/collection/collection.d.ts +19 -0
- package/dist/types/components/internal/glass/glint.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-controllable.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-media-query.d.ts +1 -0
- package/dist/types/components/internal/hooks/use-scroll-edges.d.ts +10 -0
- package/dist/types/components/internal/hooks/use-typeahead.d.ts +5 -0
- package/dist/types/components/internal/icon/Icon.d.ts +33 -0
- package/dist/types/components/internal/icon/IconSlot.d.ts +7 -0
- package/dist/types/components/internal/menu/menu-row.d.ts +11 -0
- package/dist/types/components/internal/overlay/focus.d.ts +8 -0
- package/dist/types/components/internal/overlay/layer.d.ts +38 -0
- package/dist/types/components/internal/overlay/modal.d.ts +18 -0
- package/dist/types/components/internal/overlay/position.d.ts +14 -0
- package/dist/types/components/internal/support/types.d.ts +15 -0
- package/dist/types/components/internal/utils/activation.d.ts +23 -0
- package/dist/types/components/internal/utils/cx.d.ts +1 -0
- package/dist/types/components/internal/utils/token-px.d.ts +1 -0
- package/dist/{avatar.d.ts → types/components/primitives/avatar/Avatar.d.ts} +10 -12
- package/dist/{avatar-group.d.ts → types/components/primitives/avatar/AvatarGroup.d.ts} +7 -9
- package/dist/{badge.d.ts → types/components/primitives/badge/Badge.d.ts} +8 -10
- package/dist/types/components/primitives/badge/CountBadge.d.ts +8 -0
- package/dist/types/components/primitives/badge/StatusBadge.d.ts +15 -0
- package/dist/types/components/primitives/badge/digit-strip.d.ts +5 -0
- package/dist/{button.d.ts → types/components/primitives/button/Button.d.ts} +6 -8
- package/dist/{checkbox.d.ts → types/components/primitives/checkbox/Checkbox.d.ts} +6 -8
- package/dist/types/components/primitives/checkbox/check-glyph.d.ts +6 -0
- package/dist/{collapse.d.ts → types/components/primitives/collapse/Collapse.d.ts} +12 -13
- package/dist/types/components/primitives/collapse/collapse.typecheck.d.ts +2 -0
- package/dist/{number-field.d.ts → types/components/primitives/input/NumberField.d.ts} +7 -9
- package/dist/{otp-field.d.ts → types/components/primitives/input/OtpField.d.ts} +6 -8
- package/dist/{text-field.d.ts → types/components/primitives/input/TextField.d.ts} +7 -9
- package/dist/types/components/primitives/input/field-chrome.d.ts +45 -0
- package/dist/{radio-group.d.ts → types/components/primitives/radio-group/RadioGroup.d.ts} +8 -10
- package/dist/{tag.d.ts → types/components/primitives/tag/Tag.d.ts} +9 -12
- package/dist/{toggle-tag.d.ts → types/components/primitives/tag/ToggleTag.d.ts} +7 -8
- package/dist/{textarea.d.ts → types/components/primitives/textarea/Textarea.d.ts} +7 -9
- package/dist/{toggle.d.ts → types/components/primitives/toggle/Toggle.d.ts} +6 -8
- package/dist/{dom-props-C0jrllBw.d.ts → types/dom-props.d.ts} +1 -3
- package/dist/types/engine/animate.d.ts +30 -0
- package/dist/types/engine/drag.d.ts +17 -0
- package/dist/types/engine/ease.d.ts +15 -0
- package/dist/types/engine/flip.d.ts +18 -0
- package/dist/types/engine/index.d.ts +4 -0
- package/dist/types/engine/loop.d.ts +9 -0
- package/dist/types/motion/element.d.ts +17 -0
- package/dist/types/motion/flip.d.ts +4 -0
- package/dist/types/motion/glide.d.ts +11 -0
- package/dist/types/motion/motion-timing.d.ts +16 -0
- package/dist/types/motion/presence-context.d.ts +11 -0
- package/dist/types/motion/presence.d.ts +12 -0
- package/dist/types/motion/presets.d.ts +6 -0
- package/dist/{timing-7JA_zQHP.d.ts → types/motion/timing.d.ts} +9 -9
- package/dist/types/motion/use-motion.d.ts +17 -0
- package/dist/types/tokens/component-styles.generated.d.ts +262 -0
- package/dist/{motion-scale-Canq4stZ.d.ts → types/tokens/motion-scale.d.ts} +4 -4
- package/dist/{motion-tokens.d.ts → types/tokens/motion-tokens.d.ts} +9 -9
- package/dist/types/tokens/theme-tokens.generated.d.ts +1249 -0
- package/dist/types/tokens/theme.d.ts +12 -0
- package/dist/typing-lines.css +92 -0
- package/dist/typing-lines.js +139 -0
- package/dist/typing-lines.js.map +1 -0
- package/dist/weight-field.css +84 -0
- package/dist/weight-field.js +17 -0
- package/dist/weight-field.js.map +1 -0
- package/dist/youtube.css +611 -0
- package/dist/youtube.js +814 -0
- package/dist/youtube.js.map +1 -0
- package/package.json +155 -49
- package/skills/zyncat-ui/SKILL.md +95 -0
- package/skills/zyncat-ui/references/components.md +85 -0
- package/skills/zyncat-ui/references/recipes.md +171 -0
- package/skills/zyncat-ui/references/theming.md +83 -0
- package/src/components/composites/alert/Alert.tsx +13 -11
- package/src/components/composites/alert/Alert.usage.md +15 -0
- package/src/components/composites/alert/alert.css +126 -121
- package/src/components/composites/date-picker/DateField.tsx +7 -2
- package/src/components/composites/date-picker/DateField.usage.md +10 -0
- package/src/components/composites/date-picker/DateRangeField.tsx +18 -16
- package/src/components/composites/date-picker/DateRangeField.usage.md +10 -0
- package/src/components/composites/date-picker/DateTimeField.tsx +10 -5
- package/src/components/composites/date-picker/DateTimeField.usage.md +12 -0
- package/src/components/composites/date-picker/TimeField.tsx +3 -1
- package/src/components/composites/date-picker/TimeField.usage.md +12 -0
- package/src/components/composites/date-picker/calendar-panel.tsx +15 -10
- package/src/components/composites/date-picker/date-picker.css +563 -559
- package/src/components/composites/date-picker/field-shell.tsx +9 -3
- package/src/components/composites/date-picker/range-panel.tsx +23 -8
- package/src/components/composites/date-picker/time-core.tsx +2 -0
- package/src/components/composites/dialog/Dialog.tsx +30 -15
- package/src/components/composites/dialog/Dialog.usage.md +17 -0
- package/src/components/composites/dialog/dialog.css +176 -172
- package/src/components/composites/dropdown/Dropdown.tsx +184 -0
- package/src/components/composites/dropdown/Dropdown.usage.md +19 -0
- package/src/components/composites/dropdown/dropdown.css +65 -0
- package/src/components/composites/dropdown/menu-panel.tsx +255 -0
- package/src/components/composites/dropdown/types.ts +95 -0
- package/src/components/composites/emoji-picker/EmojiPickerPanel.tsx +153 -0
- package/src/components/composites/emoji-picker/EmojiPickerPanel.usage.md +26 -0
- package/src/components/composites/emoji-picker/category-icons.ts +29 -0
- package/src/components/composites/emoji-picker/data.ts +83 -0
- package/src/components/composites/emoji-picker/dom.ts +79 -0
- package/src/components/composites/emoji-picker/getEmojiUrl.ts +17 -0
- package/src/components/composites/emoji-picker/navigation.ts +86 -0
- package/src/components/composites/emoji-picker/picker.ts +169 -0
- package/src/components/composites/emoji-picker/react/category-bar.tsx +77 -0
- package/src/components/composites/emoji-picker/react/useEmojiPicker.ts +139 -0
- package/src/components/composites/emoji-picker/scaffold.ts +74 -0
- package/src/components/composites/emoji-picker/search.ts +79 -0
- package/src/components/composites/emoji-picker/styles.css +221 -0
- package/src/components/composites/emoji-picker/types.ts +14 -0
- package/src/components/composites/modal/Modal.tsx +24 -13
- package/src/components/composites/modal/Modal.usage.md +24 -0
- package/src/components/composites/modal/modal.css +11 -7
- package/src/components/composites/pagination/Pagination.tsx +6 -11
- package/src/components/composites/pagination/Pagination.usage.md +12 -0
- package/src/components/composites/pagination/pagination.css +42 -38
- package/src/components/composites/popover/Popover.tsx +22 -7
- package/src/components/composites/popover/Popover.usage.md +15 -0
- package/src/components/composites/popover/popover.css +69 -65
- package/src/components/composites/select/MultiSelect.tsx +13 -5
- package/src/components/composites/select/MultiSelect.usage.md +12 -0
- package/src/components/composites/select/Select.tsx +23 -7
- package/src/components/composites/select/Select.usage.md +20 -0
- package/src/components/composites/select/core/index.ts +1 -1
- package/src/components/composites/select/core/menu.tsx +8 -6
- package/src/components/composites/select/core/panel.tsx +25 -26
- package/src/components/composites/select/core/trigger.tsx +36 -24
- package/src/components/composites/select/core/types.ts +17 -15
- package/src/components/composites/select/core/use-listbox.ts +22 -21
- package/src/components/composites/select/select.css +291 -386
- package/src/components/composites/sheet/Sheet.tsx +28 -18
- package/src/components/composites/sheet/Sheet.usage.md +15 -0
- package/src/components/composites/sheet/sheet.css +47 -23
- package/src/components/composites/sheet/use-sheet-drag.ts +19 -15
- package/src/components/composites/table/Table.tsx +17 -6
- package/src/components/composites/table/Table.usage.md +19 -0
- package/src/components/composites/table/table.css +333 -323
- package/src/components/composites/tabs/Tabs.tsx +31 -23
- package/src/components/composites/tabs/Tabs.usage.md +13 -0
- package/src/components/composites/tabs/tabs.css +163 -156
- package/src/components/composites/toast/Toast.tsx +48 -51
- package/src/components/composites/toast/Toast.usage.md +23 -0
- package/src/components/composites/toast/toast-store.usage.md +16 -0
- package/src/components/composites/toast/toast.css +237 -233
- package/src/components/composites/tooltip/Tooltip.tsx +13 -8
- package/src/components/composites/tooltip/Tooltip.usage.md +14 -0
- package/src/components/composites/tooltip/tooltip-host.tsx +29 -61
- package/src/components/composites/tooltip/tooltip-store.ts +10 -0
- package/src/components/composites/tooltip/tooltip.css +79 -78
- package/src/components/compound/support-rail/SupportRail.tsx +343 -0
- package/src/components/compound/support-rail/SupportRail.usage.md +18 -0
- package/src/components/compound/support-rail/support-rail.css +421 -0
- package/src/components/dev/MotionDevtools.tsx +3 -1
- package/src/components/dev/MotionDevtools.usage.md +16 -0
- package/src/components/dev/motion-devtools.css +237 -233
- package/src/components/expressive/confetti/Confetti.tsx +727 -0
- package/src/components/expressive/confetti/Confetti.usage.md +18 -0
- package/src/components/expressive/confetti/confetti.css +45 -0
- package/src/components/expressive/facebook-feed/FacebookFeed.tsx +200 -0
- package/src/components/expressive/facebook-feed/FacebookFeed.usage.md +18 -0
- package/src/components/expressive/facebook-feed/chrome.tsx +120 -0
- package/src/components/expressive/facebook-feed/facebook-feed.css +880 -0
- package/src/components/expressive/facebook-feed/icons.tsx +145 -0
- package/src/components/expressive/facebook-feed/post.tsx +213 -0
- package/src/components/expressive/facebook-feed/reel.tsx +199 -0
- package/src/components/expressive/facebook-feed/story.tsx +132 -0
- package/src/components/expressive/flow-field/FlowField.tsx +348 -0
- package/src/components/expressive/flow-field/FlowField.usage.md +19 -0
- package/src/components/expressive/flow-field/flow-field.css +49 -0
- package/src/components/expressive/instagram-feed/InstagramFeed.tsx +374 -0
- package/src/components/expressive/instagram-feed/InstagramFeed.usage.md +18 -0
- package/src/components/expressive/instagram-feed/instagram-feed.css +378 -0
- package/src/components/expressive/lens/Lens.tsx +415 -0
- package/src/components/expressive/lens/Lens.usage.md +20 -0
- package/src/components/expressive/lens/lens.css +119 -0
- package/src/components/expressive/morphing-text/MorphingText.tsx +328 -0
- package/src/components/expressive/morphing-text/MorphingText.usage.md +19 -0
- package/src/components/expressive/morphing-text/morphing-text.css +84 -0
- package/src/components/expressive/odometer/Odometer.tsx +158 -0
- package/src/components/expressive/odometer/Odometer.usage.md +17 -0
- package/src/components/expressive/odometer/odometer.css +61 -0
- package/src/components/expressive/tiktok/TikTok.tsx +542 -0
- package/src/components/expressive/tiktok/TikTok.usage.md +17 -0
- package/src/components/expressive/tiktok/glyphs.tsx +163 -0
- package/src/components/expressive/tiktok/tiktok.css +662 -0
- package/src/components/expressive/typing-lines/TypingLines.tsx +0 -0
- package/src/components/expressive/typing-lines/TypingLines.usage.md +17 -0
- package/src/components/expressive/typing-lines/typing-lines.css +92 -0
- package/src/components/expressive/weight-field/WeightField.tsx +41 -0
- package/src/components/expressive/weight-field/WeightField.usage.md +20 -0
- package/src/components/expressive/weight-field/weight-field.css +84 -0
- package/src/components/expressive/youtube/YouTube.tsx +192 -0
- package/src/components/expressive/youtube/YouTube.usage.md +18 -0
- package/src/components/expressive/youtube/format.ts +22 -0
- package/src/components/expressive/youtube/glyphs.tsx +235 -0
- package/src/components/expressive/youtube/media.tsx +18 -0
- package/src/components/expressive/youtube/post.tsx +282 -0
- package/src/components/expressive/youtube/short.tsx +212 -0
- package/src/components/expressive/youtube/video.tsx +75 -0
- package/src/components/expressive/youtube/youtube.css +611 -0
- package/src/components/internal/collection/collection.ts +44 -0
- package/src/components/internal/glass/glass.css +88 -84
- package/src/components/internal/hooks/use-media-query.ts +20 -0
- package/src/components/internal/hooks/use-typeahead.ts +28 -0
- package/src/components/internal/icon/Icon.tsx +2 -0
- package/src/components/internal/icon/IconSlot.tsx +2 -0
- package/src/components/internal/icon/icon.css +34 -30
- package/src/components/internal/menu/menu-row.tsx +34 -0
- package/src/components/internal/menu/menu-surface.css +127 -0
- package/src/components/internal/overlay/focus.ts +26 -10
- package/src/components/internal/overlay/layer.tsx +50 -19
- package/src/components/internal/overlay/modal.tsx +14 -12
- package/src/components/internal/overlay/overlay.css +24 -20
- package/src/components/internal/overlay/position.ts +19 -9
- package/src/components/internal/overlay/trigger.css +13 -0
- package/src/components/internal/support/types.ts +16 -0
- package/src/components/internal/utils/activation.ts +78 -0
- package/src/components/primitives/avatar/Avatar.tsx +2 -0
- package/src/components/primitives/avatar/Avatar.usage.md +12 -0
- package/src/components/primitives/avatar/AvatarGroup.tsx +3 -1
- package/src/components/primitives/avatar/AvatarGroup.usage.md +15 -0
- package/src/components/primitives/avatar/avatar.css +179 -174
- package/src/components/primitives/badge/Badge.tsx +3 -1
- package/src/components/primitives/badge/Badge.usage.md +14 -0
- package/src/components/primitives/badge/CountBadge.tsx +2 -2
- package/src/components/primitives/badge/CountBadge.usage.md +13 -0
- package/src/components/primitives/badge/StatusBadge.tsx +3 -1
- package/src/components/primitives/badge/StatusBadge.usage.md +14 -0
- package/src/components/primitives/badge/badge.css +166 -160
- package/src/components/primitives/badge/digit-strip.css +65 -0
- package/src/components/primitives/badge/{odometer.tsx → digit-strip.tsx} +3 -3
- package/src/components/primitives/button/Button.tsx +2 -0
- package/src/components/primitives/button/Button.usage.md +14 -0
- package/src/components/primitives/button/button.css +272 -246
- package/src/components/primitives/checkbox/Checkbox.tsx +3 -1
- package/src/components/primitives/checkbox/Checkbox.usage.md +12 -0
- package/src/components/primitives/checkbox/check-glyph.tsx +1 -0
- package/src/components/primitives/checkbox/checkbox.css +158 -153
- package/src/components/primitives/collapse/Collapse.tsx +3 -1
- package/src/components/primitives/collapse/Collapse.usage.md +17 -0
- package/src/components/primitives/collapse/collapse.css +70 -61
- package/src/components/primitives/collapse/collapse.typecheck.tsx +2 -0
- package/src/components/primitives/input/NumberField.tsx +18 -5
- package/src/components/primitives/input/NumberField.usage.md +12 -0
- package/src/components/primitives/input/OtpField.tsx +2 -0
- package/src/components/primitives/input/OtpField.usage.md +12 -0
- package/src/components/primitives/input/TextField.tsx +16 -4
- package/src/components/primitives/input/TextField.usage.md +13 -0
- package/src/components/primitives/input/field-chrome.tsx +11 -2
- package/src/components/primitives/input/input.css +296 -318
- package/src/components/primitives/radio-group/RadioGroup.tsx +20 -44
- package/src/components/primitives/radio-group/RadioGroup.usage.md +13 -0
- package/src/components/primitives/radio-group/radio-group.css +275 -276
- package/src/components/primitives/tag/Tag.tsx +10 -6
- package/src/components/primitives/tag/Tag.usage.md +14 -0
- package/src/components/primitives/tag/ToggleTag.tsx +4 -2
- package/src/components/primitives/tag/ToggleTag.usage.md +14 -0
- package/src/components/primitives/tag/tag.css +209 -231
- package/src/components/primitives/textarea/Textarea.tsx +17 -7
- package/src/components/primitives/textarea/Textarea.usage.md +12 -0
- package/src/components/primitives/textarea/textarea.css +205 -211
- package/src/components/primitives/toggle/Toggle.tsx +3 -1
- package/src/components/primitives/toggle/Toggle.usage.md +12 -0
- package/src/components/primitives/toggle/toggle.css +139 -135
- package/src/engine/animate.ts +40 -13
- package/src/engine/ease.ts +1 -0
- package/src/engine/flip.ts +32 -15
- package/src/engine/index.ts +2 -1
- package/src/engine/loop.ts +97 -0
- package/src/mcp/server.ts +315 -221
- package/src/motion/element.tsx +1 -0
- package/src/motion/flip.ts +29 -10
- package/src/motion/glide.tsx +11 -14
- package/src/motion/glide.usage.md +15 -0
- package/src/motion/motion-timing.ts +3 -3
- package/src/motion/presence.tsx +38 -21
- package/src/motion/presets.ts +13 -0
- package/src/motion/timing.ts +1 -0
- package/src/motion/use-motion.ts +16 -3
- package/src/styles.css +5 -0
- package/src/tokens/avatar.css +20 -16
- package/src/tokens/color.css +67 -56
- package/src/tokens/component-styles.generated.ts +270 -0
- package/src/tokens/elevation.css +28 -17
- package/src/tokens/fonts.css +1 -1
- package/src/tokens/glass.css +19 -15
- package/src/tokens/icons.css +8 -4
- package/src/tokens/layers.css +9 -4
- package/src/tokens/motion-scale.ts +4 -0
- package/src/tokens/motion-tokens.ts +42 -12
- package/src/tokens/motion-tokens.usage.md +16 -0
- package/src/tokens/motion.css +63 -45
- package/src/tokens/radius.css +12 -8
- package/src/tokens/semantic.css +62 -54
- package/src/tokens/spacing.css +25 -21
- package/src/tokens/theme-tokens.generated.ts +1278 -0
- package/src/tokens/theme.tsx +83 -0
- package/src/tokens/theme.usage.md +36 -0
- package/src/tokens/typography.css +53 -49
- package/dist/chunk-2ERBBFZS.js.map +0 -1
- package/dist/chunk-2F5PITAO.js.map +0 -1
- package/dist/chunk-2QWJ6FAX.js.map +0 -1
- package/dist/chunk-356HZMT4.js.map +0 -1
- package/dist/chunk-62P3KD57.js.map +0 -1
- package/dist/chunk-7SZCJ7WI.js.map +0 -1
- package/dist/chunk-CONSWNIV.js.map +0 -1
- package/dist/chunk-FTOAUJL5.js.map +0 -1
- package/dist/chunk-I4XQ4PV2.js.map +0 -1
- package/dist/chunk-K5X2GCXU.js.map +0 -1
- package/dist/chunk-NEF5XAHG.js.map +0 -1
- package/dist/chunk-NNXJCLTV.js.map +0 -1
- package/dist/chunk-OMHQ4U4J.js.map +0 -1
- package/dist/chunk-PMECHR3A.js.map +0 -1
- package/dist/chunk-QDK66S4G.js.map +0 -1
- package/dist/chunk-RCONNA7I.js.map +0 -1
- package/dist/chunk-S5ZTZANS.js.map +0 -1
- package/dist/chunk-UXONUUPI.js.map +0 -1
- package/dist/chunk-VTJTGVZZ.js.map +0 -1
- package/dist/chunk-WM5J5TDI.js.map +0 -1
- package/dist/chunk-XWUWYSCT.js.map +0 -1
- package/dist/chunk-Y7AJQVWJ.js.map +0 -1
- package/dist/chunk-YGCVWGUG.js.map +0 -1
- package/dist/chunk-YGGCQNNU.js.map +0 -1
- package/dist/chunk-ZCOUPPTI.js.map +0 -1
- package/dist/count-badge.d.ts +0 -13
- package/dist/date-range-field.d.ts +0 -33
- package/dist/field-chrome-CMPOQSLs.d.ts +0 -28
- package/dist/field-shell-Cuda-feL.d.ts +0 -24
- package/dist/glide.d.ts +0 -15
- package/dist/motion-devtools.d.ts +0 -51
- package/dist/status-badge.d.ts +0 -19
- package/dist/toast.d.ts +0 -12
- package/llms.txt +0 -220
- package/src/components/primitives/badge/odometer.css +0 -62
package/dist/motion-devtools.css
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
@layer zyncat.tokens, zyncat.components;
|
|
2
|
+
|
|
3
|
+
@layer zyncat.components {
|
|
4
|
+
/* MotionDevtools - a floating dev overlay, styled on-brand with the design system's own
|
|
2
5
|
surface tokens so the <Button>/<Checkbox>/<Collapse> it dogfoods render natively.
|
|
3
6
|
|
|
4
7
|
Collapsed it's a small pill (gauge + current factor); opening morphs it into the full panel.
|
|
@@ -12,254 +15,255 @@
|
|
|
12
15
|
A motion debugger must stay crisp while the app runs in slow-mo. Token fallbacks keep it
|
|
13
16
|
legible if dropped in without the base layer. */
|
|
14
17
|
|
|
15
|
-
.mdt {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
.mdt {
|
|
19
|
+
/* immune to the global slow-mo the engine applies to --duration-* */
|
|
20
|
+
--duration-fast: 140ms;
|
|
21
|
+
--duration-base: 200ms;
|
|
22
|
+
--duration-slow: 300ms;
|
|
23
|
+
--duration-slower: 450ms;
|
|
24
|
+
--duration-slowest: 900ms;
|
|
25
|
+
--duration-spin: 600ms;
|
|
26
|
+
--duration-pulse: 1600ms;
|
|
24
27
|
|
|
25
|
-
|
|
26
|
-
|
|
28
|
+
--mdt-offset: 16px;
|
|
29
|
+
--mdt-surface: color-mix(in oklab, var(--bg-surface, #fff) 88%, transparent);
|
|
27
30
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
31
|
+
position: fixed;
|
|
32
|
+
z-index: 2147483000; /* above every app layer, including tooltips */
|
|
33
|
+
display: flex;
|
|
34
|
+
color: var(--text-body, oklch(0.35 0.01 264));
|
|
35
|
+
font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
|
|
36
|
+
-webkit-font-smoothing: antialiased;
|
|
37
|
+
}
|
|
35
38
|
|
|
36
|
-
.mdt--top-left {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}
|
|
40
|
-
.mdt--top-right {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
}
|
|
44
|
-
.mdt--bottom-left {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
.mdt--bottom-right {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
39
|
+
.mdt--top-left {
|
|
40
|
+
top: var(--mdt-offset);
|
|
41
|
+
left: var(--mdt-offset);
|
|
42
|
+
}
|
|
43
|
+
.mdt--top-right {
|
|
44
|
+
top: var(--mdt-offset);
|
|
45
|
+
right: var(--mdt-offset);
|
|
46
|
+
}
|
|
47
|
+
.mdt--bottom-left {
|
|
48
|
+
bottom: var(--mdt-offset);
|
|
49
|
+
left: var(--mdt-offset);
|
|
50
|
+
}
|
|
51
|
+
.mdt--bottom-right {
|
|
52
|
+
bottom: var(--mdt-offset);
|
|
53
|
+
right: var(--mdt-offset);
|
|
54
|
+
}
|
|
52
55
|
|
|
53
|
-
/* ---------- card (pill when collapsed, panel when open) ---------- */
|
|
56
|
+
/* ---------- card (pill when collapsed, panel when open) ---------- */
|
|
54
57
|
|
|
55
|
-
.mdt__panel {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
.mdt__panel {
|
|
59
|
+
box-sizing: border-box;
|
|
60
|
+
/* Compact pill when collapsed; eases to the full panel width in step with the <Collapse>
|
|
58
61
|
body height below, so the whole thing morphs open and never teleports. */
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
.mdt__panel.is-open {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
}
|
|
62
|
+
width: 128px;
|
|
63
|
+
padding: 5px;
|
|
64
|
+
border: 1px solid var(--border-subtle, oklch(0.92 0.004 264));
|
|
65
|
+
border-radius: var(--radius-xl, 0.75rem);
|
|
66
|
+
background: var(--mdt-surface);
|
|
67
|
+
backdrop-filter: blur(16px) saturate(1.6);
|
|
68
|
+
-webkit-backdrop-filter: blur(16px) saturate(1.6);
|
|
69
|
+
box-shadow: var(--shadow-lg, 0 12px 28px oklch(0 0 0 / 0.1));
|
|
70
|
+
animation: mdt-in var(--duration-base) var(--ease-entrance, ease);
|
|
71
|
+
transition:
|
|
72
|
+
width var(--duration-slow) var(--ease-entrance, ease),
|
|
73
|
+
box-shadow var(--duration-slow) var(--ease-entrance, ease);
|
|
74
|
+
}
|
|
75
|
+
.mdt__panel.is-open {
|
|
76
|
+
width: 232px;
|
|
77
|
+
box-shadow: var(--shadow-xl, 0 24px 48px oklch(0 0 0 / 0.16));
|
|
78
|
+
}
|
|
76
79
|
|
|
77
|
-
@keyframes mdt-in {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
80
|
+
@keyframes mdt-in {
|
|
81
|
+
from {
|
|
82
|
+
opacity: 0;
|
|
83
|
+
transform: translateY(6px) scale(0.985);
|
|
84
|
+
}
|
|
81
85
|
}
|
|
82
|
-
}
|
|
83
86
|
|
|
84
|
-
/* ---------- pill / header (the toggle) ---------- */
|
|
87
|
+
/* ---------- pill / header (the toggle) ---------- */
|
|
85
88
|
|
|
86
|
-
.mdt__head {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
}
|
|
102
|
-
.mdt__head:hover {
|
|
103
|
-
|
|
104
|
-
}
|
|
105
|
-
.mdt__head:focus-visible {
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
}
|
|
89
|
+
.mdt__head {
|
|
90
|
+
appearance: none;
|
|
91
|
+
width: 100%;
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
gap: 0.5rem;
|
|
95
|
+
padding: 0.3125rem 0.4375rem;
|
|
96
|
+
border: 0;
|
|
97
|
+
border-radius: var(--radius-md, 0.375rem);
|
|
98
|
+
background: transparent;
|
|
99
|
+
color: inherit;
|
|
100
|
+
font: inherit;
|
|
101
|
+
text-align: left;
|
|
102
|
+
cursor: pointer;
|
|
103
|
+
transition: background var(--duration-fast) var(--ease-standard, ease);
|
|
104
|
+
}
|
|
105
|
+
.mdt__head:hover {
|
|
106
|
+
background: var(--neutral-wash, oklch(0.5 0.01 264 / 0.07));
|
|
107
|
+
}
|
|
108
|
+
.mdt__head:focus-visible {
|
|
109
|
+
outline: none;
|
|
110
|
+
box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
|
|
111
|
+
}
|
|
109
112
|
|
|
110
|
-
.mdt__glyph {
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
}
|
|
115
|
-
.mdt--active .mdt__glyph {
|
|
116
|
-
|
|
117
|
-
}
|
|
118
|
-
.mdt--paused .mdt__glyph {
|
|
119
|
-
|
|
120
|
-
}
|
|
121
|
-
.mdt__spacer {
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
.mdt__badge {
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
}
|
|
135
|
-
.mdt--active .mdt__badge {
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
}
|
|
139
|
-
.mdt--paused .mdt__badge {
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
.mdt__chevron {
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}
|
|
148
|
-
.mdt__chevron--open {
|
|
149
|
-
|
|
150
|
-
}
|
|
113
|
+
.mdt__glyph {
|
|
114
|
+
color: var(--text-subtle, oklch(0.6 0.01 264));
|
|
115
|
+
flex: none;
|
|
116
|
+
display: block;
|
|
117
|
+
}
|
|
118
|
+
.mdt--active .mdt__glyph {
|
|
119
|
+
color: var(--accent, oklch(0.62 0.12 185));
|
|
120
|
+
}
|
|
121
|
+
.mdt--paused .mdt__glyph {
|
|
122
|
+
color: var(--warning, oklch(0.72 0.13 75));
|
|
123
|
+
}
|
|
124
|
+
.mdt__spacer {
|
|
125
|
+
flex: 1;
|
|
126
|
+
}
|
|
127
|
+
.mdt__badge {
|
|
128
|
+
font-size: 0.75rem;
|
|
129
|
+
font-weight: 650;
|
|
130
|
+
font-variant-numeric: tabular-nums;
|
|
131
|
+
line-height: 1;
|
|
132
|
+
padding: 0.1875rem 0.4375rem;
|
|
133
|
+
border-radius: var(--radius-full, 999px);
|
|
134
|
+
color: var(--text-muted, oklch(0.55 0.01 264));
|
|
135
|
+
background: var(--neutral-wash, oklch(0.5 0.01 264 / 0.08));
|
|
136
|
+
white-space: nowrap;
|
|
137
|
+
}
|
|
138
|
+
.mdt--active .mdt__badge {
|
|
139
|
+
color: var(--text-on-accent, #fff);
|
|
140
|
+
background: var(--accent, oklch(0.62 0.12 185));
|
|
141
|
+
}
|
|
142
|
+
.mdt--paused .mdt__badge {
|
|
143
|
+
color: var(--text-on-accent, #fff);
|
|
144
|
+
background: var(--warning, oklch(0.72 0.13 75));
|
|
145
|
+
}
|
|
146
|
+
.mdt__chevron {
|
|
147
|
+
color: var(--text-subtle, oklch(0.6 0.01 264));
|
|
148
|
+
flex: none;
|
|
149
|
+
transition: transform var(--duration-base) var(--ease-standard, ease);
|
|
150
|
+
}
|
|
151
|
+
.mdt__chevron--open {
|
|
152
|
+
transform: rotate(180deg);
|
|
153
|
+
}
|
|
151
154
|
|
|
152
|
-
/* ---------- body (inside <Collapse>) ---------- */
|
|
155
|
+
/* ---------- body (inside <Collapse>) ---------- */
|
|
153
156
|
|
|
154
|
-
.mdt__body {
|
|
155
|
-
|
|
156
|
-
|
|
157
|
+
.mdt__body {
|
|
158
|
+
box-sizing: border-box;
|
|
159
|
+
/* Hold a stable layout width so controls don't reflow as the card animates open; the
|
|
157
160
|
collapsed pill is narrower, so this overflows and is clipped by <Collapse>'s overflow. */
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
}
|
|
161
|
+
width: 100%;
|
|
162
|
+
min-width: 208px;
|
|
163
|
+
display: flex;
|
|
164
|
+
flex-direction: column;
|
|
165
|
+
gap: 0.8125rem;
|
|
166
|
+
padding: 0.625rem 0.375rem 0.375rem;
|
|
167
|
+
}
|
|
165
168
|
|
|
166
|
-
.mdt__title {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
}
|
|
173
|
-
.mdt__readout {
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
}
|
|
179
|
-
.mdt__value {
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
}
|
|
186
|
-
.mdt__unit {
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
}
|
|
169
|
+
.mdt__title {
|
|
170
|
+
font-size: 0.6875rem;
|
|
171
|
+
font-weight: 650;
|
|
172
|
+
letter-spacing: 0.06em;
|
|
173
|
+
text-transform: uppercase;
|
|
174
|
+
color: var(--text-subtle, oklch(0.6 0.01 264));
|
|
175
|
+
}
|
|
176
|
+
.mdt__readout {
|
|
177
|
+
display: flex;
|
|
178
|
+
align-items: baseline;
|
|
179
|
+
gap: 0.375rem;
|
|
180
|
+
margin-top: -0.375rem;
|
|
181
|
+
}
|
|
182
|
+
.mdt__value {
|
|
183
|
+
font-size: 1.5rem;
|
|
184
|
+
font-weight: 700;
|
|
185
|
+
font-variant-numeric: tabular-nums;
|
|
186
|
+
line-height: 1;
|
|
187
|
+
color: var(--text-strong, oklch(0.25 0.01 264));
|
|
188
|
+
}
|
|
189
|
+
.mdt__unit {
|
|
190
|
+
font-size: 0.75rem;
|
|
191
|
+
color: var(--text-muted, oklch(0.55 0.01 264));
|
|
192
|
+
font-weight: 500;
|
|
193
|
+
}
|
|
191
194
|
|
|
192
|
-
.mdt__slider {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
}
|
|
207
|
-
.mdt__slider::-webkit-slider-thumb {
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
}
|
|
217
|
-
.mdt__slider::-moz-range-thumb {
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
}
|
|
225
|
-
.mdt__slider:focus-visible {
|
|
226
|
-
|
|
227
|
-
}
|
|
228
|
-
.mdt__slider:focus-visible::-webkit-slider-thumb {
|
|
229
|
-
|
|
230
|
-
}
|
|
231
|
-
.mdt__slider:focus-visible::-moz-range-thumb {
|
|
232
|
-
|
|
233
|
-
}
|
|
195
|
+
.mdt__slider {
|
|
196
|
+
-webkit-appearance: none;
|
|
197
|
+
appearance: none;
|
|
198
|
+
width: 100%;
|
|
199
|
+
height: 4px;
|
|
200
|
+
border-radius: 999px;
|
|
201
|
+
background: linear-gradient(
|
|
202
|
+
to right,
|
|
203
|
+
var(--accent, oklch(0.62 0.12 185)) 0%,
|
|
204
|
+
var(--accent, oklch(0.62 0.12 185)) var(--mdt-fill, 0%),
|
|
205
|
+
var(--bg-muted, oklch(0.93 0.004 264)) var(--mdt-fill, 0%)
|
|
206
|
+
);
|
|
207
|
+
cursor: pointer;
|
|
208
|
+
margin: 0;
|
|
209
|
+
}
|
|
210
|
+
.mdt__slider::-webkit-slider-thumb {
|
|
211
|
+
-webkit-appearance: none;
|
|
212
|
+
appearance: none;
|
|
213
|
+
width: 16px;
|
|
214
|
+
height: 16px;
|
|
215
|
+
border-radius: 50%;
|
|
216
|
+
background: var(--bg-surface, #fff);
|
|
217
|
+
border: 2px solid var(--accent, oklch(0.62 0.12 185));
|
|
218
|
+
box-shadow: var(--shadow-sm, 0 1px 2px oklch(0 0 0 / 0.15));
|
|
219
|
+
}
|
|
220
|
+
.mdt__slider::-moz-range-thumb {
|
|
221
|
+
width: 16px;
|
|
222
|
+
height: 16px;
|
|
223
|
+
border-radius: 50%;
|
|
224
|
+
background: var(--bg-surface, #fff);
|
|
225
|
+
border: 2px solid var(--accent, oklch(0.62 0.12 185));
|
|
226
|
+
box-shadow: var(--shadow-sm, 0 1px 2px oklch(0 0 0 / 0.15));
|
|
227
|
+
}
|
|
228
|
+
.mdt__slider:focus-visible {
|
|
229
|
+
outline: none;
|
|
230
|
+
}
|
|
231
|
+
.mdt__slider:focus-visible::-webkit-slider-thumb {
|
|
232
|
+
box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
|
|
233
|
+
}
|
|
234
|
+
.mdt__slider:focus-visible::-moz-range-thumb {
|
|
235
|
+
box-shadow: var(--ring-accent, 0 0 0 3px oklch(0.7 0.12 185 / 0.35));
|
|
236
|
+
}
|
|
234
237
|
|
|
235
|
-
/* preset chip grid + action row - children are DS <Button>s */
|
|
236
|
-
.mdt__chips {
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
}
|
|
241
|
-
.mdt__chips .btn {
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
}
|
|
245
|
-
.mdt__row {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
}
|
|
249
|
-
.mdt__row .btn {
|
|
250
|
-
|
|
251
|
-
}
|
|
238
|
+
/* preset chip grid + action row - children are DS <Button>s */
|
|
239
|
+
.mdt__chips {
|
|
240
|
+
display: grid;
|
|
241
|
+
grid-template-columns: repeat(5, 1fr);
|
|
242
|
+
gap: 0.25rem;
|
|
243
|
+
}
|
|
244
|
+
.mdt__chips .btn {
|
|
245
|
+
padding-inline: 0;
|
|
246
|
+
min-width: 0;
|
|
247
|
+
}
|
|
248
|
+
.mdt__row {
|
|
249
|
+
display: flex;
|
|
250
|
+
gap: 0.375rem;
|
|
251
|
+
}
|
|
252
|
+
.mdt__row .btn {
|
|
253
|
+
flex: 1;
|
|
254
|
+
}
|
|
252
255
|
|
|
253
|
-
.mdt__opt {
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
}
|
|
260
|
-
.mdt__hint {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
256
|
+
.mdt__opt {
|
|
257
|
+
border-top: 1px solid var(--border-subtle, oklch(0.92 0.004 264));
|
|
258
|
+
padding-top: 0.75rem;
|
|
259
|
+
display: flex;
|
|
260
|
+
flex-direction: column;
|
|
261
|
+
gap: 0.5rem;
|
|
262
|
+
}
|
|
263
|
+
.mdt__hint {
|
|
264
|
+
font-size: 0.6875rem;
|
|
265
|
+
line-height: 1.45;
|
|
266
|
+
color: var(--text-subtle, oklch(0.6 0.01 264));
|
|
267
|
+
margin: 0;
|
|
268
|
+
}
|
|
265
269
|
}
|
package/dist/motion-devtools.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
|
-
'use client';import { clock } from './chunk-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
import './chunk-
|
|
5
|
-
import
|
|
6
|
-
import './chunk-
|
|
1
|
+
'use client';import { clock } from './chunk-IJS7TPGV.js';
|
|
2
|
+
import './chunk-7IZJERGA.js';
|
|
3
|
+
import { Button } from './chunk-HY5MPISE.js';
|
|
4
|
+
import { Checkbox } from './chunk-I45AU6KH.js';
|
|
5
|
+
import './chunk-RJFGWJ4W.js';
|
|
6
|
+
import { Collapse } from './chunk-45R4Z5XN.js';
|
|
7
|
+
import './chunk-DMX2F6B4.js';
|
|
7
8
|
import { cx } from './chunk-QGNC7LH5.js';
|
|
8
9
|
import './motion-devtools.css';
|
|
9
10
|
import { useState, useEffect } from 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/dev/slowmo-engine.ts","../src/components/dev/MotionDevtools.tsx"],"names":["active"],"mappings":"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","file":"motion-devtools.js","sourcesContent":["import { clock } from '../../engine';\n\nexport interface SlowmoState {\n /** 1 = real time. >1 = that many times slower (4 = quarter speed). */\n factor: number;\n /** Freeze motion in place - useful for inspecting a transition mid-flight. */\n paused: boolean;\n}\n\nexport interface SlowmoOptions {\n /** Also scale setTimeout/setInterval so duration-coupled JS cleanups don't truncate\n * slowed CSS. Turn off if stretched app timers get in your way. @default true */\n scaleTimers: boolean;\n}\n\nconst CANONICAL: Record<string, number> = {\n '--duration-fast': 140,\n '--duration-base': 200,\n '--duration-slow': 300,\n '--duration-slower': 450,\n '--duration-slowest': 900,\n '--duration-spin': 600,\n '--duration-pulse': 1600,\n};\nconst DURATION_TOKENS = Object.keys(CANONICAL);\nconst COLLAPSED_MS = 4;\nconst FROZEN_MS = 600_000;\nconst MAX_TIMER_DELAY = 2 ** 30;\n\nconst clamp = (min: number, max: number, v: number) => (v < min ? min : v > max ? max : v);\nconst hasDOM = typeof document !== 'undefined' && typeof window !== 'undefined';\n\nconst state: SlowmoState = { factor: 1, paused: false };\nconst options: SlowmoOptions = { scaleTimers: true };\nconst listeners = new Set<(s: SlowmoState) => void>();\n\nlet active = false;\nlet baseMs: Record<string, number> = {};\n\ntype SetTimer = (handler: TimerHandler, timeout?: number, ...args: unknown[]) => number;\nlet origSetTimeout: SetTimer | null = null;\nlet origSetInterval: SetTimer | null = null;\n\ntype AnimateFn = (this: Element, ...args: unknown[]) => Animation;\nlet origAnimate: AnimateFn | null = null;\nconst trackedRates = new Map<Animation, number>();\n\nfunction readBaseMs(token: string): number {\n const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();\n const n = raw.endsWith('ms') ? parseFloat(raw) : raw.endsWith('s') ? parseFloat(raw) * 1000 : parseFloat(raw);\n if (isNaN(n) || n <= COLLAPSED_MS) return CANONICAL[token];\n return n;\n}\n\nfunction applyCssTokens() {\n const root = document.documentElement.style;\n for (const token of DURATION_TOKENS) {\n const ms = state.paused ? FROZEN_MS : baseMs[token] * state.factor;\n root.setProperty(token, `${ms}ms`);\n }\n}\n\nfunction clearCssTokens() {\n const root = document.documentElement.style;\n for (const token of DURATION_TOKENS) root.removeProperty(token);\n}\n\nfunction scaleDelay(delay?: number): number | undefined {\n if (typeof delay !== 'number' || !isFinite(delay)) return delay;\n return Math.min(delay * state.factor, MAX_TIMER_DELAY);\n}\n\nfunction patchTimers() {\n if (origSetTimeout) return;\n origSetTimeout = window.setTimeout as unknown as SetTimer;\n origSetInterval = window.setInterval as unknown as SetTimer;\n const nativeTimeout = origSetTimeout.bind(window);\n const nativeInterval = origSetInterval.bind(window);\n window.setTimeout = ((h: TimerHandler, t?: number, ...a: unknown[]) =>\n nativeTimeout(h, scaleDelay(t), ...a)) as typeof window.setTimeout;\n window.setInterval = ((h: TimerHandler, t?: number, ...a: unknown[]) =>\n nativeInterval(h, scaleDelay(t), ...a)) as typeof window.setInterval;\n}\n\nfunction restoreTimers() {\n if (origSetTimeout) window.setTimeout = origSetTimeout as typeof window.setTimeout;\n if (origSetInterval) window.setInterval = origSetInterval as typeof window.setInterval;\n origSetTimeout = origSetInterval = null;\n}\n\nfunction liveRate(): number {\n return state.paused ? 0 : 1 / state.factor;\n}\n\nfunction track(anim: Animation, original: number) {\n if (trackedRates.has(anim)) return;\n trackedRates.set(anim, original);\n const forget = () => trackedRates.delete(anim);\n anim.finished.then(forget).catch(forget);\n}\n\nfunction patchAnimate() {\n if (origAnimate) return;\n origAnimate = Element.prototype.animate as unknown as AnimateFn;\n const original = origAnimate;\n Element.prototype.animate = function (this: Element, ...args: unknown[]): Animation {\n const anim = original.apply(this, args);\n try {\n track(anim, anim.playbackRate);\n anim.playbackRate = liveRate();\n } catch {}\n return anim;\n } as typeof Element.prototype.animate;\n}\n\nfunction restoreAnimate() {\n if (origAnimate) Element.prototype.animate = origAnimate as typeof Element.prototype.animate;\n origAnimate = null;\n}\n\nfunction sweepExisting() {\n const rate = liveRate();\n for (const anim of document.getAnimations()) {\n try {\n track(anim, anim.playbackRate);\n anim.playbackRate = rate;\n } catch {}\n }\n}\n\nfunction applyTrackedRates() {\n const rate = liveRate();\n for (const anim of trackedRates.keys()) {\n try {\n anim.playbackRate = rate;\n } catch {}\n }\n}\n\nfunction restoreTrackedRates() {\n for (const [anim, original] of trackedRates) {\n try {\n anim.playbackRate = original;\n } catch {}\n }\n trackedRates.clear();\n}\n\nfunction applyEngineClock() {\n clock.scale = state.paused ? Infinity : state.factor;\n}\n\nfunction install() {\n active = true;\n baseMs = {};\n for (const token of DURATION_TOKENS) baseMs[token] = readBaseMs(token);\n applyCssTokens();\n applyEngineClock();\n if (options.scaleTimers) patchTimers();\n patchAnimate();\n sweepExisting();\n}\n\nfunction reconfigure() {\n applyCssTokens();\n applyEngineClock();\n applyTrackedRates();\n}\n\nfunction uninstall() {\n active = false;\n clearCssTokens();\n clock.scale = 1;\n restoreTimers();\n restoreAnimate();\n restoreTrackedRates();\n}\n\nfunction notify() {\n const snapshot = { ...state };\n for (const cb of listeners) cb(snapshot);\n}\n\nexport function shouldBeActive(factor: number, paused: boolean): boolean {\n return factor > 1 || paused;\n}\n\n/** Imperative control surface - drive slow-mo from a console, a hotkey, or the panel.\n * Safe to call during SSR (no-ops the DOM work, still tracks state for hydration). */\nexport const motionSlowmo = {\n /** Current state (a copy). */\n get(): SlowmoState {\n return { ...state };\n },\n\n /** Merge a partial state. factor is clamped to [1, 64]. */\n set(patch: Partial<SlowmoState>): void {\n if (typeof patch.factor === 'number') state.factor = clamp(1, 64, patch.factor);\n if (typeof patch.paused === 'boolean') state.paused = patch.paused;\n\n if (hasDOM) {\n const wantActive = shouldBeActive(state.factor, state.paused);\n if (!active && wantActive) install();\n else if (active && !wantActive) uninstall();\n else if (active) reconfigure();\n }\n notify();\n },\n\n /** Tune engine behaviour (e.g. stop scaling timers). Applies immediately if active. */\n configure(patch: Partial<SlowmoOptions>): void {\n if (typeof patch.scaleTimers === 'boolean' && patch.scaleTimers !== options.scaleTimers) {\n options.scaleTimers = patch.scaleTimers;\n if (active) options.scaleTimers ? patchTimers() : restoreTimers();\n }\n },\n\n /** Convenience: back to real time and unpaused. */\n reset(): void {\n this.set({ factor: 1, paused: false });\n },\n\n /** Subscribe to state changes; returns an unsubscribe fn. */\n subscribe(cb: (s: SlowmoState) => void): () => void {\n listeners.add(cb);\n return () => listeners.delete(cb);\n },\n};\n\nexport type MotionSlowmo = typeof motionSlowmo;\n","'use client';\n\nimport './motion-devtools.css';\nimport { useEffect, useState, type CSSProperties } from 'react';\nimport { createPortal } from 'react-dom';\nimport { Button } from '../primitives/button/Button';\nimport { Checkbox } from '../primitives/checkbox/Checkbox';\nimport { Collapse } from '../primitives/collapse/Collapse';\nimport { motionSlowmo, shouldBeActive, type SlowmoState } from './slowmo-engine';\nimport { cx } from '../internal/utils/cx';\n\nexport type MotionDevtoolsPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface MotionDevtoolsProps {\n /** Which corner of the viewport to pin to. @default 'bottom-right' */\n placement?: MotionDevtoolsPlacement;\n /** Distance from the viewport edges, in px. @default 16 */\n offset?: number;\n /** Quick-select slow-down factors (1 = real time). @default [1, 2, 4, 8, 16] */\n presets?: number[];\n /** Upper bound of the fine slider. @default 16 */\n maxFactor?: number;\n /** Slow-down factor to start at. @default 1 */\n defaultFactor?: number;\n /** Scale setTimeout/setInterval too, so duration-coupled JS cleanups don't truncate\n * slowed CSS. Exposed as a live toggle in the panel. @default true */\n scaleTimers?: boolean;\n /** Remember the chosen factor across reloads (localStorage). @default true */\n persist?: boolean;\n /** Start with the full panel open rather than collapsed to its header. @default false */\n defaultOpen?: boolean;\n}\n\nconst STORAGE_KEY = 'zyncat-ui:motion-devtools';\nconst fmt = (n: number) => (Number.isInteger(n) ? String(n) : n.toFixed(1));\n\nfunction GaugeGlyph() {\n return (\n <svg className=\"mdt__glyph\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path\n d=\"M12 4a8 8 0 0 1 8 8 8 8 0 0 1-.6 3\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M12 4a8 8 0 0 0-8 8 8 8 0 0 0 .6 3\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n opacity=\"0.35\"\n />\n <path d=\"M12 12l4-2.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.6\" fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport function MotionDevtools({\n placement = 'bottom-right',\n offset = 16,\n presets = [1, 2, 4, 8, 16],\n maxFactor = 16,\n defaultFactor = 1,\n scaleTimers = true,\n persist = true,\n defaultOpen = false,\n}: MotionDevtoolsProps) {\n const [mounted, setMounted] = useState(false);\n const [open, setOpen] = useState(defaultOpen);\n const [snap, setSnap] = useState<SlowmoState>(() => motionSlowmo.get());\n const [timers, setTimers] = useState(scaleTimers);\n\n useEffect(() => motionSlowmo.subscribe(setSnap), []);\n\n useEffect(() => {\n setMounted(true);\n let initial: Partial<SlowmoState> = { factor: defaultFactor, paused: false };\n if (persist) {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (raw) initial = { ...initial, ...JSON.parse(raw) };\n } catch {}\n }\n motionSlowmo.set(initial);\n if ((initial.factor ?? 1) > 1 || initial.paused) setOpen(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n motionSlowmo.configure({ scaleTimers: timers });\n }, [timers]);\n\n useEffect(() => {\n if (!persist) return;\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify({ factor: snap.factor, paused: snap.paused }));\n } catch {}\n }, [snap.factor, snap.paused, persist]);\n\n if (!mounted) return null;\n\n const active = shouldBeActive(snap.factor, snap.paused);\n const rootClass = cx('mdt', `mdt--${placement}`, active && 'mdt--active', snap.paused && 'mdt--paused');\n\n const setFactor = (factor: number) => motionSlowmo.set({ factor, paused: false });\n const fill = `${((Math.min(snap.factor, maxFactor) - 1) / Math.max(1, maxFactor - 1)) * 100}%`;\n const pillBadge = snap.factor === 1 ? '1×' : `${fmt(snap.factor)}×`;\n\n return createPortal(\n <div className={rootClass} style={{ '--mdt-offset': `${offset}px` } as CSSProperties}>\n <div className={'mdt__panel' + (open ? ' is-open' : '')} role=\"group\" aria-label=\"Motion devtools\">\n <button\n className=\"mdt__head\"\n onClick={() => setOpen((o) => !o)}\n aria-expanded={open}\n title=\"Motion devtools\"\n aria-label={open ? 'Collapse motion devtools' : 'Expand motion devtools'}\n >\n <GaugeGlyph />\n <span className=\"mdt__spacer\" />\n <span className=\"mdt__badge\">{pillBadge}</span>\n <svg\n className={'mdt__chevron' + (open ? ' mdt__chevron--open' : '')}\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n >\n <path d=\"M2.5 4.5 6 8l3.5-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n </svg>\n </button>\n\n <Collapse open={open} fade>\n <div className=\"mdt__body\">\n <span className=\"mdt__title\">Motion</span>\n <div className=\"mdt__readout\">\n <span className=\"mdt__value\">\n {snap.paused ? 'Paused' : snap.factor === 1 ? 'Normal' : `${fmt(snap.factor)}×`}\n </span>\n <span className=\"mdt__unit\">{snap.paused ? 'frozen' : snap.factor === 1 ? 'real-time' : 'slower'}</span>\n </div>\n\n <input\n className=\"mdt__slider\"\n type=\"range\"\n min={1}\n max={maxFactor}\n step={0.5}\n value={Math.min(snap.factor, maxFactor)}\n onChange={(e) => setFactor(Number(e.target.value))}\n style={{ '--mdt-fill': fill } as CSSProperties}\n aria-label=\"Slow-down factor\"\n />\n\n <div className=\"mdt__chips\">\n {presets.map((p) => (\n <Button\n key={p}\n size=\"sm\"\n variant={!snap.paused && snap.factor === p ? 'primary' : 'secondary'}\n onClick={() => setFactor(p)}\n >\n {p}×\n </Button>\n ))}\n </div>\n\n <div className=\"mdt__row\">\n <Button\n size=\"sm\"\n variant={snap.paused ? 'primary' : 'secondary'}\n onClick={() => motionSlowmo.set({ paused: !snap.paused })}\n >\n {snap.paused ? 'Resume' : 'Freeze'}\n </Button>\n <Button size=\"sm\" variant=\"ghost\" disabled={!active} onClick={() => motionSlowmo.reset()}>\n Reset\n </Button>\n </div>\n\n <div className=\"mdt__opt\">\n <Checkbox size=\"sm\" checked={timers} onChange={(e) => setTimers(e.target.checked)} label=\"Scale timers\" />\n <p className=\"mdt__hint\">\n Slows CSS, Motion & WAAPI together. Timer scaling keeps duration-based cleanups from cutting\n animations short.\n </p>\n </div>\n </div>\n </Collapse>\n </div>\n </div>,\n document.body,\n );\n}\n\nexport { motionSlowmo, type SlowmoState } from './slowmo-engine';\nexport default MotionDevtools;\n"]}
|
|
1
|
+
{"version":3,"sources":["../src/components/dev/slowmo-engine.ts","../src/components/dev/MotionDevtools.tsx"],"names":["active"],"mappings":"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","file":"motion-devtools.js","sourcesContent":["import { clock } from '../../engine';\n\nexport interface SlowmoState {\n /** 1 = real time. >1 = that many times slower (4 = quarter speed). */\n factor: number;\n /** Freeze motion in place - useful for inspecting a transition mid-flight. */\n paused: boolean;\n}\n\nexport interface SlowmoOptions {\n /** Also scale setTimeout/setInterval so duration-coupled JS cleanups don't truncate\n * slowed CSS. Turn off if stretched app timers get in your way. @default true */\n scaleTimers: boolean;\n}\n\nconst CANONICAL: Record<string, number> = {\n '--duration-fast': 140,\n '--duration-base': 200,\n '--duration-slow': 300,\n '--duration-slower': 450,\n '--duration-slowest': 900,\n '--duration-spin': 600,\n '--duration-pulse': 1600,\n};\nconst DURATION_TOKENS = Object.keys(CANONICAL);\nconst COLLAPSED_MS = 4;\nconst FROZEN_MS = 600_000;\nconst MAX_TIMER_DELAY = 2 ** 30;\n\nconst clamp = (min: number, max: number, v: number) => (v < min ? min : v > max ? max : v);\nconst hasDOM = typeof document !== 'undefined' && typeof window !== 'undefined';\n\nconst state: SlowmoState = { factor: 1, paused: false };\nconst options: SlowmoOptions = { scaleTimers: true };\nconst listeners = new Set<(s: SlowmoState) => void>();\n\nlet active = false;\nlet baseMs: Record<string, number> = {};\n\ntype SetTimer = (handler: TimerHandler, timeout?: number, ...args: unknown[]) => number;\nlet origSetTimeout: SetTimer | null = null;\nlet origSetInterval: SetTimer | null = null;\n\ntype AnimateFn = (this: Element, ...args: unknown[]) => Animation;\nlet origAnimate: AnimateFn | null = null;\nconst trackedRates = new Map<Animation, number>();\n\nfunction readBaseMs(token: string): number {\n const raw = getComputedStyle(document.documentElement).getPropertyValue(token).trim();\n const n = raw.endsWith('ms') ? parseFloat(raw) : raw.endsWith('s') ? parseFloat(raw) * 1000 : parseFloat(raw);\n if (isNaN(n) || n <= COLLAPSED_MS) return CANONICAL[token];\n return n;\n}\n\nfunction applyCssTokens() {\n const root = document.documentElement.style;\n for (const token of DURATION_TOKENS) {\n const ms = state.paused ? FROZEN_MS : baseMs[token] * state.factor;\n root.setProperty(token, `${ms}ms`);\n }\n}\n\nfunction clearCssTokens() {\n const root = document.documentElement.style;\n for (const token of DURATION_TOKENS) root.removeProperty(token);\n}\n\nfunction scaleDelay(delay?: number): number | undefined {\n if (typeof delay !== 'number' || !isFinite(delay)) return delay;\n return Math.min(delay * state.factor, MAX_TIMER_DELAY);\n}\n\nfunction patchTimers() {\n if (origSetTimeout) return;\n origSetTimeout = window.setTimeout as unknown as SetTimer;\n origSetInterval = window.setInterval as unknown as SetTimer;\n const nativeTimeout = origSetTimeout.bind(window);\n const nativeInterval = origSetInterval.bind(window);\n window.setTimeout = ((h: TimerHandler, t?: number, ...a: unknown[]) =>\n nativeTimeout(h, scaleDelay(t), ...a)) as typeof window.setTimeout;\n window.setInterval = ((h: TimerHandler, t?: number, ...a: unknown[]) =>\n nativeInterval(h, scaleDelay(t), ...a)) as typeof window.setInterval;\n}\n\nfunction restoreTimers() {\n if (origSetTimeout) window.setTimeout = origSetTimeout as typeof window.setTimeout;\n if (origSetInterval) window.setInterval = origSetInterval as typeof window.setInterval;\n origSetTimeout = origSetInterval = null;\n}\n\nfunction liveRate(): number {\n return state.paused ? 0 : 1 / state.factor;\n}\n\nfunction track(anim: Animation, original: number) {\n if (trackedRates.has(anim)) return;\n trackedRates.set(anim, original);\n const forget = () => trackedRates.delete(anim);\n anim.finished.then(forget).catch(forget);\n}\n\nfunction patchAnimate() {\n if (origAnimate) return;\n origAnimate = Element.prototype.animate as unknown as AnimateFn;\n const original = origAnimate;\n Element.prototype.animate = function (this: Element, ...args: unknown[]): Animation {\n const anim = original.apply(this, args);\n try {\n track(anim, anim.playbackRate);\n anim.playbackRate = liveRate();\n } catch {}\n return anim;\n } as typeof Element.prototype.animate;\n}\n\nfunction restoreAnimate() {\n if (origAnimate) Element.prototype.animate = origAnimate as typeof Element.prototype.animate;\n origAnimate = null;\n}\n\nfunction sweepExisting() {\n const rate = liveRate();\n for (const anim of document.getAnimations()) {\n try {\n track(anim, anim.playbackRate);\n anim.playbackRate = rate;\n } catch {}\n }\n}\n\nfunction applyTrackedRates() {\n const rate = liveRate();\n for (const anim of trackedRates.keys()) {\n try {\n anim.playbackRate = rate;\n } catch {}\n }\n}\n\nfunction restoreTrackedRates() {\n for (const [anim, original] of trackedRates) {\n try {\n anim.playbackRate = original;\n } catch {}\n }\n trackedRates.clear();\n}\n\nfunction applyEngineClock() {\n clock.scale = state.paused ? Infinity : state.factor;\n}\n\nfunction install() {\n active = true;\n baseMs = {};\n for (const token of DURATION_TOKENS) baseMs[token] = readBaseMs(token);\n applyCssTokens();\n applyEngineClock();\n if (options.scaleTimers) patchTimers();\n patchAnimate();\n sweepExisting();\n}\n\nfunction reconfigure() {\n applyCssTokens();\n applyEngineClock();\n applyTrackedRates();\n}\n\nfunction uninstall() {\n active = false;\n clearCssTokens();\n clock.scale = 1;\n restoreTimers();\n restoreAnimate();\n restoreTrackedRates();\n}\n\nfunction notify() {\n const snapshot = { ...state };\n for (const cb of listeners) cb(snapshot);\n}\n\nexport function shouldBeActive(factor: number, paused: boolean): boolean {\n return factor > 1 || paused;\n}\n\n/** Imperative control surface - drive slow-mo from a console, a hotkey, or the panel.\n * Safe to call during SSR (no-ops the DOM work, still tracks state for hydration). */\nexport const motionSlowmo = {\n /** Current state (a copy). */\n get(): SlowmoState {\n return { ...state };\n },\n\n /** Merge a partial state. factor is clamped to [1, 64]. */\n set(patch: Partial<SlowmoState>): void {\n if (typeof patch.factor === 'number') state.factor = clamp(1, 64, patch.factor);\n if (typeof patch.paused === 'boolean') state.paused = patch.paused;\n\n if (hasDOM) {\n const wantActive = shouldBeActive(state.factor, state.paused);\n if (!active && wantActive) install();\n else if (active && !wantActive) uninstall();\n else if (active) reconfigure();\n }\n notify();\n },\n\n /** Tune engine behaviour (e.g. stop scaling timers). Applies immediately if active. */\n configure(patch: Partial<SlowmoOptions>): void {\n if (typeof patch.scaleTimers === 'boolean' && patch.scaleTimers !== options.scaleTimers) {\n options.scaleTimers = patch.scaleTimers;\n if (active) options.scaleTimers ? patchTimers() : restoreTimers();\n }\n },\n\n /** Convenience: back to real time and unpaused. */\n reset(): void {\n this.set({ factor: 1, paused: false });\n },\n\n /** Subscribe to state changes; returns an unsubscribe fn. */\n subscribe(cb: (s: SlowmoState) => void): () => void {\n listeners.add(cb);\n return () => listeners.delete(cb);\n },\n};\n\nexport type MotionSlowmo = typeof motionSlowmo;\n","'use client';\n\nimport './motion-devtools.css';\n\nimport { useEffect, useState, type CSSProperties } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { cx } from '../internal/utils/cx';\nimport { Button } from '../primitives/button/Button';\nimport { Checkbox } from '../primitives/checkbox/Checkbox';\nimport { Collapse } from '../primitives/collapse/Collapse';\nimport { motionSlowmo, shouldBeActive, type SlowmoState } from './slowmo-engine';\n\nexport type MotionDevtoolsPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n\nexport interface MotionDevtoolsProps {\n /** Which corner of the viewport to pin to. @default 'bottom-right' */\n placement?: MotionDevtoolsPlacement;\n /** Distance from the viewport edges, in px. @default 16 */\n offset?: number;\n /** Quick-select slow-down factors (1 = real time). @default [1, 2, 4, 8, 16] */\n presets?: number[];\n /** Upper bound of the fine slider. @default 16 */\n maxFactor?: number;\n /** Slow-down factor to start at. @default 1 */\n defaultFactor?: number;\n /** Scale setTimeout/setInterval too, so duration-coupled JS cleanups don't truncate\n * slowed CSS. Exposed as a live toggle in the panel. @default true */\n scaleTimers?: boolean;\n /** Remember the chosen factor across reloads (localStorage). @default true */\n persist?: boolean;\n /** Start with the full panel open rather than collapsed to its header. @default false */\n defaultOpen?: boolean;\n}\n\nconst STORAGE_KEY = 'zyncat-ui:motion-devtools';\nconst fmt = (n: number) => (Number.isInteger(n) ? String(n) : n.toFixed(1));\n\nfunction GaugeGlyph() {\n return (\n <svg className=\"mdt__glyph\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path\n d=\"M12 4a8 8 0 0 1 8 8 8 8 0 0 1-.6 3\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n />\n <path\n d=\"M12 4a8 8 0 0 0-8 8 8 8 0 0 0 .6 3\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n opacity=\"0.35\"\n />\n <path d=\"M12 12l4-2.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.6\" fill=\"currentColor\" />\n </svg>\n );\n}\n\nexport function MotionDevtools({\n placement = 'bottom-right',\n offset = 16,\n presets = [1, 2, 4, 8, 16],\n maxFactor = 16,\n defaultFactor = 1,\n scaleTimers = true,\n persist = true,\n defaultOpen = false,\n}: MotionDevtoolsProps) {\n const [mounted, setMounted] = useState(false);\n const [open, setOpen] = useState(defaultOpen);\n const [snap, setSnap] = useState<SlowmoState>(() => motionSlowmo.get());\n const [timers, setTimers] = useState(scaleTimers);\n\n useEffect(() => motionSlowmo.subscribe(setSnap), []);\n\n useEffect(() => {\n setMounted(true);\n let initial: Partial<SlowmoState> = { factor: defaultFactor, paused: false };\n if (persist) {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (raw) initial = { ...initial, ...JSON.parse(raw) };\n } catch {}\n }\n motionSlowmo.set(initial);\n if ((initial.factor ?? 1) > 1 || initial.paused) setOpen(true);\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n motionSlowmo.configure({ scaleTimers: timers });\n }, [timers]);\n\n useEffect(() => {\n if (!persist) return;\n try {\n localStorage.setItem(STORAGE_KEY, JSON.stringify({ factor: snap.factor, paused: snap.paused }));\n } catch {}\n }, [snap.factor, snap.paused, persist]);\n\n if (!mounted) return null;\n\n const active = shouldBeActive(snap.factor, snap.paused);\n const rootClass = cx('mdt', `mdt--${placement}`, active && 'mdt--active', snap.paused && 'mdt--paused');\n\n const setFactor = (factor: number) => motionSlowmo.set({ factor, paused: false });\n const fill = `${((Math.min(snap.factor, maxFactor) - 1) / Math.max(1, maxFactor - 1)) * 100}%`;\n const pillBadge = snap.factor === 1 ? '1×' : `${fmt(snap.factor)}×`;\n\n return createPortal(\n <div className={rootClass} style={{ '--mdt-offset': `${offset}px` } as CSSProperties}>\n <div className={'mdt__panel' + (open ? ' is-open' : '')} role=\"group\" aria-label=\"Motion devtools\">\n <button\n className=\"mdt__head\"\n onClick={() => setOpen((o) => !o)}\n aria-expanded={open}\n title=\"Motion devtools\"\n aria-label={open ? 'Collapse motion devtools' : 'Expand motion devtools'}\n >\n <GaugeGlyph />\n <span className=\"mdt__spacer\" />\n <span className=\"mdt__badge\">{pillBadge}</span>\n <svg\n className={'mdt__chevron' + (open ? ' mdt__chevron--open' : '')}\n width=\"12\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n aria-hidden=\"true\"\n >\n <path d=\"M2.5 4.5 6 8l3.5-3.5\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" />\n </svg>\n </button>\n\n <Collapse open={open} fade>\n <div className=\"mdt__body\">\n <span className=\"mdt__title\">Motion</span>\n <div className=\"mdt__readout\">\n <span className=\"mdt__value\">\n {snap.paused ? 'Paused' : snap.factor === 1 ? 'Normal' : `${fmt(snap.factor)}×`}\n </span>\n <span className=\"mdt__unit\">{snap.paused ? 'frozen' : snap.factor === 1 ? 'real-time' : 'slower'}</span>\n </div>\n\n <input\n className=\"mdt__slider\"\n type=\"range\"\n min={1}\n max={maxFactor}\n step={0.5}\n value={Math.min(snap.factor, maxFactor)}\n onChange={(e) => setFactor(Number(e.target.value))}\n style={{ '--mdt-fill': fill } as CSSProperties}\n aria-label=\"Slow-down factor\"\n />\n\n <div className=\"mdt__chips\">\n {presets.map((p) => (\n <Button\n key={p}\n size=\"sm\"\n variant={!snap.paused && snap.factor === p ? 'primary' : 'secondary'}\n onClick={() => setFactor(p)}\n >\n {p}×\n </Button>\n ))}\n </div>\n\n <div className=\"mdt__row\">\n <Button\n size=\"sm\"\n variant={snap.paused ? 'primary' : 'secondary'}\n onClick={() => motionSlowmo.set({ paused: !snap.paused })}\n >\n {snap.paused ? 'Resume' : 'Freeze'}\n </Button>\n <Button size=\"sm\" variant=\"ghost\" disabled={!active} onClick={() => motionSlowmo.reset()}>\n Reset\n </Button>\n </div>\n\n <div className=\"mdt__opt\">\n <Checkbox size=\"sm\" checked={timers} onChange={(e) => setTimers(e.target.checked)} label=\"Scale timers\" />\n <p className=\"mdt__hint\">\n Slows CSS, Motion & WAAPI together. Timer scaling keeps duration-based cleanups from cutting\n animations short.\n </p>\n </div>\n </div>\n </Collapse>\n </div>\n </div>,\n document.body,\n );\n}\n\nexport { motionSlowmo, type SlowmoState } from './slowmo-engine';\nexport default MotionDevtools;\n"]}
|