From dec5f8f1d2d4ba1744d42993da8c9281a1414cbb Mon Sep 17 00:00:00 2001 From: Mats Bosson Date: Sun, 29 Mar 2026 02:30:05 +0700 Subject: [PATCH] New Release / ST3 --- .claude/hooks/naglint.sh | 70 + .claude/settings.json | 2 + .gitignore | 6 + LICENSE | 21 + README.md | 107 + package.json | 12 + packages/core/package.json | 77 + packages/core/src/animations.css | 137 + .../components/accordion/accordion-item.ts | 82 + .../components/accordion/accordion.schema.ts | 3 + .../src/components/accordion/accordion.ts | 82 + .../core/src/components/accordion/index.ts | 8 + .../alert-dialog/alert-dialog.schema.ts | 3 + .../components/alert-dialog/alert-dialog.ts | 59 + .../core/src/components/alert-dialog/index.ts | 6 + .../core/src/components/alert/alert.schema.ts | 3 + packages/core/src/components/alert/alert.ts | 23 + packages/core/src/components/alert/index.ts | 6 + .../src/components/avatar/avatar.schema.ts | 3 + packages/core/src/components/avatar/avatar.ts | 38 + packages/core/src/components/avatar/index.ts | 6 + .../core/src/components/badge/badge.schema.ts | 3 + packages/core/src/components/badge/badge.ts | 17 + packages/core/src/components/badge/index.ts | 6 + .../components/breadcrumbs/breadcrumb-item.ts | 24 + .../breadcrumbs/breadcrumbs.schema.ts | 3 + .../src/components/breadcrumbs/breadcrumbs.ts | 11 + .../core/src/components/breadcrumbs/index.ts | 8 + .../src/components/button/button.schema.ts | 3 + packages/core/src/components/button/button.ts | 53 + packages/core/src/components/button/index.ts | 6 + .../components/calendar/calendar.schema.ts | 3 + .../core/src/components/calendar/calendar.ts | 93 + .../core/src/components/calendar/index.ts | 6 + .../core/src/components/card/card-content.ts | 6 + .../core/src/components/card/card-footer.ts | 6 + .../core/src/components/card/card-header.ts | 6 + .../core/src/components/card/card.schema.ts | 3 + packages/core/src/components/card/card.ts | 13 + packages/core/src/components/card/index.ts | 12 + .../components/checkbox/checkbox.schema.ts | 3 + .../core/src/components/checkbox/checkbox.ts | 62 + .../core/src/components/checkbox/index.ts | 6 + .../collapsible/collapsible.schema.ts | 3 + .../src/components/collapsible/collapsible.ts | 77 + .../core/src/components/collapsible/index.ts | 6 + .../components/combobox/combobox-option.ts | 18 + .../components/combobox/combobox.schema.ts | 3 + .../core/src/components/combobox/combobox.ts | 83 + .../core/src/components/combobox/index.ts | 8 + .../command-palette/command-palette-item.ts | 17 + .../command-palette/command-palette.schema.ts | 3 + .../command-palette/command-palette.ts | 79 + .../src/components/command-palette/index.ts | 8 + .../context-menu/context-menu-item.ts | 16 + .../context-menu/context-menu.schema.ts | 3 + .../components/context-menu/context-menu.ts | 63 + .../core/src/components/context-menu/index.ts | 8 + .../core/src/components/counter/counter.ts | 74 + packages/core/src/components/counter/index.ts | 6 + .../data-table/data-table.schema.ts | 3 + .../src/components/data-table/data-table.ts | 54 + .../core/src/components/data-table/index.ts | 6 + .../date-picker/date-picker.schema.ts | 3 + .../src/components/date-picker/date-picker.ts | 55 + .../core/src/components/date-picker/index.ts | 6 + .../src/components/dialog/dialog.schema.ts | 3 + packages/core/src/components/dialog/dialog.ts | 73 + packages/core/src/components/dialog/index.ts | 6 + .../src/components/drawer/drawer.schema.ts | 3 + packages/core/src/components/drawer/drawer.ts | 64 + packages/core/src/components/drawer/index.ts | 6 + .../dropdown-menu/dropdown-menu.schema.ts | 3 + .../components/dropdown-menu/dropdown-menu.ts | 79 + .../src/components/dropdown-menu/index.ts | 8 + .../src/components/dropdown-menu/menu-item.ts | 17 + .../core/src/components/form/form-field.ts | 56 + .../core/src/components/form/form.schema.ts | 3 + packages/core/src/components/form/form.ts | 93 + packages/core/src/components/form/index.ts | 8 + .../hover-card/hover-card.schema.ts | 3 + .../src/components/hover-card/hover-card.ts | 62 + .../core/src/components/hover-card/index.ts | 6 + .../core/src/components/image/image.schema.ts | 3 + packages/core/src/components/image/image.ts | 38 + packages/core/src/components/image/index.ts | 6 + packages/core/src/components/link/index.ts | 6 + .../core/src/components/link/link.schema.ts | 3 + packages/core/src/components/link/link.ts | 41 + packages/core/src/components/listbox/index.ts | 8 + .../src/components/listbox/listbox-option.ts | 20 + .../src/components/listbox/listbox.schema.ts | 3 + .../core/src/components/listbox/listbox.ts | 76 + .../src/components/loading-indicator/index.ts | 6 + .../loading-indicator/loading-indicator.ts | 35 + packages/core/src/components/meter/index.ts | 6 + .../core/src/components/meter/meter.schema.ts | 3 + packages/core/src/components/meter/meter.ts | 47 + .../src/components/navigation-menu/index.ts | 8 + .../navigation-menu/navigation-menu-item.ts | 50 + .../navigation-menu/navigation-menu.schema.ts | 3 + .../navigation-menu/navigation-menu.ts | 13 + .../core/src/components/number-field/index.ts | 6 + .../number-field/number-field.schema.ts | 3 + .../components/number-field/number-field.ts | 91 + .../core/src/components/pagination/index.ts | 8 + .../components/pagination/pagination-item.ts | 41 + .../pagination/pagination.schema.ts | 3 + .../src/components/pagination/pagination.ts | 61 + .../core/src/components/parallax/index.ts | 6 + .../core/src/components/parallax/parallax.ts | 39 + packages/core/src/components/popover/index.ts | 6 + .../src/components/popover/popover.schema.ts | 3 + .../core/src/components/popover/popover.ts | 81 + .../core/src/components/progress/index.ts | 6 + .../components/progress/progress.schema.ts | 3 + .../core/src/components/progress/progress.ts | 42 + .../core/src/components/radio-group/index.ts | 8 + .../radio-group/radio-group.schema.ts | 3 + .../src/components/radio-group/radio-group.ts | 56 + .../src/components/radio-group/radio-item.ts | 62 + packages/core/src/components/reveal/index.ts | 6 + packages/core/src/components/reveal/reveal.ts | 57 + packages/core/src/components/select/index.ts | 8 + .../src/components/select/select-option.ts | 68 + .../src/components/select/select.schema.ts | 3 + packages/core/src/components/select/select.ts | 185 + .../core/src/components/separator/index.ts | 6 + .../components/separator/separator.schema.ts | 3 + .../src/components/separator/separator.ts | 19 + .../core/src/components/skeleton/index.ts | 6 + .../components/skeleton/skeleton.schema.ts | 3 + .../core/src/components/skeleton/skeleton.ts | 19 + packages/core/src/components/slider/index.ts | 6 + .../src/components/slider/slider.schema.ts | 3 + packages/core/src/components/slider/slider.ts | 71 + packages/core/src/components/stagger/index.ts | 6 + .../core/src/components/stagger/stagger.ts | 35 + packages/core/src/components/switch/index.ts | 6 + .../src/components/switch/switch.schema.ts | 3 + packages/core/src/components/switch/switch.ts | 61 + packages/core/src/components/tabs/index.ts | 10 + .../core/src/components/tabs/tab-panel.ts | 15 + packages/core/src/components/tabs/tab.ts | 75 + .../core/src/components/tabs/tabs.schema.ts | 3 + packages/core/src/components/tabs/tabs.ts | 85 + .../core/src/components/tags-input/index.ts | 6 + .../tags-input/tags-input.schema.ts | 22 + .../src/components/tags-input/tags-input.ts | 116 + .../core/src/components/text-field/index.ts | 6 + .../text-field/text-field.schema.ts | 3 + .../src/components/text-field/text-field.ts | 71 + packages/core/src/components/toast/index.ts | 6 + .../core/src/components/toast/toast.schema.ts | 3 + packages/core/src/components/toast/toast.ts | 98 + .../core/src/components/toggle-group/index.ts | 8 + .../toggle-group/toggle-group-item.ts | 59 + .../toggle-group/toggle-group.schema.ts | 3 + .../components/toggle-group/toggle-group.ts | 57 + packages/core/src/components/toggle/index.ts | 6 + .../src/components/toggle/toggle.schema.ts | 3 + packages/core/src/components/toggle/toggle.ts | 47 + packages/core/src/components/tooltip/index.ts | 6 + .../src/components/tooltip/tooltip.schema.ts | 3 + .../core/src/components/tooltip/tooltip.ts | 58 + .../core/src/components/typewriter/index.ts | 6 + .../src/components/typewriter/typewriter.ts | 63 + .../core/src/components/virtual-list/index.ts | 6 + .../virtual-list/virtual-list.schema.ts | 3 + .../components/virtual-list/virtual-list.ts | 66 + packages/core/src/components/wizard/index.ts | 8 + .../core/src/components/wizard/wizard-step.ts | 17 + .../src/components/wizard/wizard.schema.ts | 3 + packages/core/src/components/wizard/wizard.ts | 73 + packages/core/src/router.ts | 46 + packages/core/src/schema.ts | 10 + packages/core/src/shared/aria.ts | 18 + packages/core/src/shared/helpers.ts | 33 + packages/core/src/shared/keyboard.ts | 38 + packages/core/src/signals.ts | 26 + packages/core/src/theme.css | 283 ++ packages/core/tests/accordion.test.ts | 51 + packages/core/tests/button.test.ts | 43 + packages/core/tests/checkbox.test.ts | 47 + packages/core/tests/collapsible.test.ts | 98 + packages/core/tests/dialog.test.ts | 36 + packages/core/tests/form.test.ts | 61 + packages/core/tests/helpers.test.ts | 65 + packages/core/tests/helpers.ts | 69 + packages/core/tests/pagination.test.ts | 56 + packages/core/tests/progress.test.ts | 47 + packages/core/tests/radio-group.test.ts | 47 + packages/core/tests/select.test.ts | 49 + packages/core/tests/switch.test.ts | 49 + packages/core/tests/tabs.test.ts | 53 + packages/core/tests/text-field.test.ts | 52 + packages/core/tests/toggle.test.ts | 47 + packages/core/tsconfig.json | 11 + packages/core/tsdown.config.ts | 16 + packages/core/vitest.config.ts | 8 + packages/mcp/package.json | 19 + packages/mcp/src/component-info.ts | 16 + packages/mcp/src/data/data.ts | 43 + packages/mcp/src/data/feedback.ts | 47 + packages/mcp/src/data/inputs.ts | 95 + packages/mcp/src/data/layout.ts | 66 + packages/mcp/src/data/navigation.ts | 44 + packages/mcp/src/data/overlays.ts | 70 + packages/mcp/src/index.ts | 49 + packages/mcp/src/registry.ts | 33 + packages/mcp/src/tools/compose.ts | 35 + packages/mcp/src/tools/discover.ts | 13 + packages/mcp/src/tools/inspect.ts | 19 + packages/mcp/src/tools/validate.ts | 60 + packages/mcp/tsconfig.json | 8 + packages/showcase/index.html | 422 ++ packages/showcase/package.json | 16 + packages/showcase/style.css | 1807 ++++++++ pnpm-lock.yaml | 3680 +++++++++++++++++ pnpm-workspace.yaml | 2 + tsconfig.base.json | 17 + 221 files changed, 12613 insertions(+) create mode 100755 .claude/hooks/naglint.sh create mode 100644 .claude/settings.json create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 package.json create mode 100644 packages/core/package.json create mode 100644 packages/core/src/animations.css create mode 100644 packages/core/src/components/accordion/accordion-item.ts create mode 100644 packages/core/src/components/accordion/accordion.schema.ts create mode 100644 packages/core/src/components/accordion/accordion.ts create mode 100644 packages/core/src/components/accordion/index.ts create mode 100644 packages/core/src/components/alert-dialog/alert-dialog.schema.ts create mode 100644 packages/core/src/components/alert-dialog/alert-dialog.ts create mode 100644 packages/core/src/components/alert-dialog/index.ts create mode 100644 packages/core/src/components/alert/alert.schema.ts create mode 100644 packages/core/src/components/alert/alert.ts create mode 100644 packages/core/src/components/alert/index.ts create mode 100644 packages/core/src/components/avatar/avatar.schema.ts create mode 100644 packages/core/src/components/avatar/avatar.ts create mode 100644 packages/core/src/components/avatar/index.ts create mode 100644 packages/core/src/components/badge/badge.schema.ts create mode 100644 packages/core/src/components/badge/badge.ts create mode 100644 packages/core/src/components/badge/index.ts create mode 100644 packages/core/src/components/breadcrumbs/breadcrumb-item.ts create mode 100644 packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts create mode 100644 packages/core/src/components/breadcrumbs/breadcrumbs.ts create mode 100644 packages/core/src/components/breadcrumbs/index.ts create mode 100644 packages/core/src/components/button/button.schema.ts create mode 100644 packages/core/src/components/button/button.ts create mode 100644 packages/core/src/components/button/index.ts create mode 100644 packages/core/src/components/calendar/calendar.schema.ts create mode 100644 packages/core/src/components/calendar/calendar.ts create mode 100644 packages/core/src/components/calendar/index.ts create mode 100644 packages/core/src/components/card/card-content.ts create mode 100644 packages/core/src/components/card/card-footer.ts create mode 100644 packages/core/src/components/card/card-header.ts create mode 100644 packages/core/src/components/card/card.schema.ts create mode 100644 packages/core/src/components/card/card.ts create mode 100644 packages/core/src/components/card/index.ts create mode 100644 packages/core/src/components/checkbox/checkbox.schema.ts create mode 100644 packages/core/src/components/checkbox/checkbox.ts create mode 100644 packages/core/src/components/checkbox/index.ts create mode 100644 packages/core/src/components/collapsible/collapsible.schema.ts create mode 100644 packages/core/src/components/collapsible/collapsible.ts create mode 100644 packages/core/src/components/collapsible/index.ts create mode 100644 packages/core/src/components/combobox/combobox-option.ts create mode 100644 packages/core/src/components/combobox/combobox.schema.ts create mode 100644 packages/core/src/components/combobox/combobox.ts create mode 100644 packages/core/src/components/combobox/index.ts create mode 100644 packages/core/src/components/command-palette/command-palette-item.ts create mode 100644 packages/core/src/components/command-palette/command-palette.schema.ts create mode 100644 packages/core/src/components/command-palette/command-palette.ts create mode 100644 packages/core/src/components/command-palette/index.ts create mode 100644 packages/core/src/components/context-menu/context-menu-item.ts create mode 100644 packages/core/src/components/context-menu/context-menu.schema.ts create mode 100644 packages/core/src/components/context-menu/context-menu.ts create mode 100644 packages/core/src/components/context-menu/index.ts create mode 100644 packages/core/src/components/counter/counter.ts create mode 100644 packages/core/src/components/counter/index.ts create mode 100644 packages/core/src/components/data-table/data-table.schema.ts create mode 100644 packages/core/src/components/data-table/data-table.ts create mode 100644 packages/core/src/components/data-table/index.ts create mode 100644 packages/core/src/components/date-picker/date-picker.schema.ts create mode 100644 packages/core/src/components/date-picker/date-picker.ts create mode 100644 packages/core/src/components/date-picker/index.ts create mode 100644 packages/core/src/components/dialog/dialog.schema.ts create mode 100644 packages/core/src/components/dialog/dialog.ts create mode 100644 packages/core/src/components/dialog/index.ts create mode 100644 packages/core/src/components/drawer/drawer.schema.ts create mode 100644 packages/core/src/components/drawer/drawer.ts create mode 100644 packages/core/src/components/drawer/index.ts create mode 100644 packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts create mode 100644 packages/core/src/components/dropdown-menu/dropdown-menu.ts create mode 100644 packages/core/src/components/dropdown-menu/index.ts create mode 100644 packages/core/src/components/dropdown-menu/menu-item.ts create mode 100644 packages/core/src/components/form/form-field.ts create mode 100644 packages/core/src/components/form/form.schema.ts create mode 100644 packages/core/src/components/form/form.ts create mode 100644 packages/core/src/components/form/index.ts create mode 100644 packages/core/src/components/hover-card/hover-card.schema.ts create mode 100644 packages/core/src/components/hover-card/hover-card.ts create mode 100644 packages/core/src/components/hover-card/index.ts create mode 100644 packages/core/src/components/image/image.schema.ts create mode 100644 packages/core/src/components/image/image.ts create mode 100644 packages/core/src/components/image/index.ts create mode 100644 packages/core/src/components/link/index.ts create mode 100644 packages/core/src/components/link/link.schema.ts create mode 100644 packages/core/src/components/link/link.ts create mode 100644 packages/core/src/components/listbox/index.ts create mode 100644 packages/core/src/components/listbox/listbox-option.ts create mode 100644 packages/core/src/components/listbox/listbox.schema.ts create mode 100644 packages/core/src/components/listbox/listbox.ts create mode 100644 packages/core/src/components/loading-indicator/index.ts create mode 100644 packages/core/src/components/loading-indicator/loading-indicator.ts create mode 100644 packages/core/src/components/meter/index.ts create mode 100644 packages/core/src/components/meter/meter.schema.ts create mode 100644 packages/core/src/components/meter/meter.ts create mode 100644 packages/core/src/components/navigation-menu/index.ts create mode 100644 packages/core/src/components/navigation-menu/navigation-menu-item.ts create mode 100644 packages/core/src/components/navigation-menu/navigation-menu.schema.ts create mode 100644 packages/core/src/components/navigation-menu/navigation-menu.ts create mode 100644 packages/core/src/components/number-field/index.ts create mode 100644 packages/core/src/components/number-field/number-field.schema.ts create mode 100644 packages/core/src/components/number-field/number-field.ts create mode 100644 packages/core/src/components/pagination/index.ts create mode 100644 packages/core/src/components/pagination/pagination-item.ts create mode 100644 packages/core/src/components/pagination/pagination.schema.ts create mode 100644 packages/core/src/components/pagination/pagination.ts create mode 100644 packages/core/src/components/parallax/index.ts create mode 100644 packages/core/src/components/parallax/parallax.ts create mode 100644 packages/core/src/components/popover/index.ts create mode 100644 packages/core/src/components/popover/popover.schema.ts create mode 100644 packages/core/src/components/popover/popover.ts create mode 100644 packages/core/src/components/progress/index.ts create mode 100644 packages/core/src/components/progress/progress.schema.ts create mode 100644 packages/core/src/components/progress/progress.ts create mode 100644 packages/core/src/components/radio-group/index.ts create mode 100644 packages/core/src/components/radio-group/radio-group.schema.ts create mode 100644 packages/core/src/components/radio-group/radio-group.ts create mode 100644 packages/core/src/components/radio-group/radio-item.ts create mode 100644 packages/core/src/components/reveal/index.ts create mode 100644 packages/core/src/components/reveal/reveal.ts create mode 100644 packages/core/src/components/select/index.ts create mode 100644 packages/core/src/components/select/select-option.ts create mode 100644 packages/core/src/components/select/select.schema.ts create mode 100644 packages/core/src/components/select/select.ts create mode 100644 packages/core/src/components/separator/index.ts create mode 100644 packages/core/src/components/separator/separator.schema.ts create mode 100644 packages/core/src/components/separator/separator.ts create mode 100644 packages/core/src/components/skeleton/index.ts create mode 100644 packages/core/src/components/skeleton/skeleton.schema.ts create mode 100644 packages/core/src/components/skeleton/skeleton.ts create mode 100644 packages/core/src/components/slider/index.ts create mode 100644 packages/core/src/components/slider/slider.schema.ts create mode 100644 packages/core/src/components/slider/slider.ts create mode 100644 packages/core/src/components/stagger/index.ts create mode 100644 packages/core/src/components/stagger/stagger.ts create mode 100644 packages/core/src/components/switch/index.ts create mode 100644 packages/core/src/components/switch/switch.schema.ts create mode 100644 packages/core/src/components/switch/switch.ts create mode 100644 packages/core/src/components/tabs/index.ts create mode 100644 packages/core/src/components/tabs/tab-panel.ts create mode 100644 packages/core/src/components/tabs/tab.ts create mode 100644 packages/core/src/components/tabs/tabs.schema.ts create mode 100644 packages/core/src/components/tabs/tabs.ts create mode 100644 packages/core/src/components/tags-input/index.ts create mode 100644 packages/core/src/components/tags-input/tags-input.schema.ts create mode 100644 packages/core/src/components/tags-input/tags-input.ts create mode 100644 packages/core/src/components/text-field/index.ts create mode 100644 packages/core/src/components/text-field/text-field.schema.ts create mode 100644 packages/core/src/components/text-field/text-field.ts create mode 100644 packages/core/src/components/toast/index.ts create mode 100644 packages/core/src/components/toast/toast.schema.ts create mode 100644 packages/core/src/components/toast/toast.ts create mode 100644 packages/core/src/components/toggle-group/index.ts create mode 100644 packages/core/src/components/toggle-group/toggle-group-item.ts create mode 100644 packages/core/src/components/toggle-group/toggle-group.schema.ts create mode 100644 packages/core/src/components/toggle-group/toggle-group.ts create mode 100644 packages/core/src/components/toggle/index.ts create mode 100644 packages/core/src/components/toggle/toggle.schema.ts create mode 100644 packages/core/src/components/toggle/toggle.ts create mode 100644 packages/core/src/components/tooltip/index.ts create mode 100644 packages/core/src/components/tooltip/tooltip.schema.ts create mode 100644 packages/core/src/components/tooltip/tooltip.ts create mode 100644 packages/core/src/components/typewriter/index.ts create mode 100644 packages/core/src/components/typewriter/typewriter.ts create mode 100644 packages/core/src/components/virtual-list/index.ts create mode 100644 packages/core/src/components/virtual-list/virtual-list.schema.ts create mode 100644 packages/core/src/components/virtual-list/virtual-list.ts create mode 100644 packages/core/src/components/wizard/index.ts create mode 100644 packages/core/src/components/wizard/wizard-step.ts create mode 100644 packages/core/src/components/wizard/wizard.schema.ts create mode 100644 packages/core/src/components/wizard/wizard.ts create mode 100644 packages/core/src/router.ts create mode 100644 packages/core/src/schema.ts create mode 100644 packages/core/src/shared/aria.ts create mode 100644 packages/core/src/shared/helpers.ts create mode 100644 packages/core/src/shared/keyboard.ts create mode 100644 packages/core/src/signals.ts create mode 100644 packages/core/src/theme.css create mode 100644 packages/core/tests/accordion.test.ts create mode 100644 packages/core/tests/button.test.ts create mode 100644 packages/core/tests/checkbox.test.ts create mode 100644 packages/core/tests/collapsible.test.ts create mode 100644 packages/core/tests/dialog.test.ts create mode 100644 packages/core/tests/form.test.ts create mode 100644 packages/core/tests/helpers.test.ts create mode 100644 packages/core/tests/helpers.ts create mode 100644 packages/core/tests/pagination.test.ts create mode 100644 packages/core/tests/progress.test.ts create mode 100644 packages/core/tests/radio-group.test.ts create mode 100644 packages/core/tests/select.test.ts create mode 100644 packages/core/tests/switch.test.ts create mode 100644 packages/core/tests/tabs.test.ts create mode 100644 packages/core/tests/text-field.test.ts create mode 100644 packages/core/tests/toggle.test.ts create mode 100644 packages/core/tsconfig.json create mode 100644 packages/core/tsdown.config.ts create mode 100644 packages/core/vitest.config.ts create mode 100644 packages/mcp/package.json create mode 100644 packages/mcp/src/component-info.ts create mode 100644 packages/mcp/src/data/data.ts create mode 100644 packages/mcp/src/data/feedback.ts create mode 100644 packages/mcp/src/data/inputs.ts create mode 100644 packages/mcp/src/data/layout.ts create mode 100644 packages/mcp/src/data/navigation.ts create mode 100644 packages/mcp/src/data/overlays.ts create mode 100644 packages/mcp/src/index.ts create mode 100644 packages/mcp/src/registry.ts create mode 100644 packages/mcp/src/tools/compose.ts create mode 100644 packages/mcp/src/tools/discover.ts create mode 100644 packages/mcp/src/tools/inspect.ts create mode 100644 packages/mcp/src/tools/validate.ts create mode 100644 packages/mcp/tsconfig.json create mode 100644 packages/showcase/index.html create mode 100644 packages/showcase/package.json create mode 100644 packages/showcase/style.css create mode 100644 pnpm-lock.yaml create mode 100644 pnpm-workspace.yaml create mode 100644 tsconfig.base.json diff --git a/.claude/hooks/naglint.sh b/.claude/hooks/naglint.sh new file mode 100755 index 0000000..3871d37 --- /dev/null +++ b/.claude/hooks/naglint.sh @@ -0,0 +1,70 @@ +#!/bin/bash +# NagLint PostToolUse hook — runs after Write/Edit on source files + +NAG=/Users/matsbosson/Documents/StayThree/NagLint/target/release/nag + +INPUT=$(cat -) +FILE=$(echo "$INPUT" | python3 -c " +import sys, json +d = json.load(sys.stdin) +print(d.get('tool_input', {}).get('file_path', '')) +" 2>/dev/null) + +if [ -z "$FILE" ]; then + echo "{}" + exit 0 +fi + +case "$FILE" in + *.ts|*.tsx|*.js|*.jsx|*.mjs|*.cjs|*.mts|*.cts|*.rs) ;; + *) echo "{}"; exit 0 ;; +esac + +if [ ! -f "$FILE" ]; then + echo "{}" + exit 0 +fi + +RAW=$("$NAG" "$FILE" --agent-json 2>/dev/null) + +if [ "$RAW" = "{}" ] || [ -z "$RAW" ]; then + echo "{}" + exit 0 +fi + +# For .tsx/.jsx files: filter out AI-08 (logic density) — JSX is declarative +case "$FILE" in + *.tsx|*.jsx) + FILTERED=$(echo "$RAW" | python3 -c " +import sys, json + +raw = sys.stdin.read().strip() +try: + d = json.loads(raw) +except Exception: + print(raw) + sys.exit(0) + +if d.get('decision') != 'block': + print(raw) + sys.exit(0) + +reason = d.get('reason', '') +filtered_lines = [l for l in reason.splitlines() if '[AI-08]' not in l] +filtered_reason = '\n'.join(filtered_lines).strip() + +if not filtered_reason: + print('{}') +else: + d['reason'] = filtered_reason + ctx = d.get('hookSpecificOutput', {}).get('additionalContext', '') + ctx_lines = [l for l in ctx.splitlines() if '[AI-08]' not in l] + d['hookSpecificOutput']['additionalContext'] = '\n'.join(ctx_lines) + print(json.dumps(d)) +" 2>/dev/null) + echo "${FILTERED:-$RAW}" + ;; + *) + echo "$RAW" + ;; +esac diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 0000000..2c63c08 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,2 @@ +{ +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c43cd57 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules/ +dist/ +.tsdown/ +coverage/ +*.tsbuildinfo +.superpowers/ diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..619011b --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2026 StayThree + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..054fdce --- /dev/null +++ b/README.md @@ -0,0 +1,107 @@ +# PettyUI + +51 headless Web Components. Zero dependencies. ~5KB gzipped. + +Built on browser-native APIs — Popover, ``, Navigation API, View Transitions. No framework required. Works everywhere. + +## Install + +```bash +npm install pettyui +``` + +## Usage + +Import what you need. Each component registers itself as a Custom Element. + +```html + + + + + +

Hello

+

This is a native dialog with ARIA linking, focus trap, and Escape — all from the browser.

+ + + +``` + +## Components + +**Inputs** — Button, TextField, NumberField, Checkbox, Switch, RadioGroup, Slider, Toggle, ToggleGroup, Select, Combobox, Listbox, TagsInput, Form, DatePicker + +**Navigation** — Link, Breadcrumbs, Tabs, Accordion, Collapsible, Pagination, NavigationMenu, Wizard + +**Overlays** — Dialog, AlertDialog, Drawer, Popover, Tooltip, HoverCard, DropdownMenu, ContextMenu, CommandPalette + +**Feedback** — Alert, Toast, Progress, Meter, LoadingIndicator + +**Layout** — Avatar, Badge, Card, Image, Separator, Skeleton + +**Data** — Calendar, DataTable, VirtualList + +**Animation** — Typewriter, Counter, Stagger, Reveal, Parallax + +## Why + +- **Zero runtime** — 500-byte signals core. No virtual DOM, no framework overhead. +- **Browser-native** — Popover API for overlays, `` for modals, Navigation API for routing. No polyfills. +- **No Shadow DOM** — Style with plain CSS, Tailwind, or anything. No `::part()` needed. +- **AI-native** — Zod schemas for every component. MCP tools for agent integration. +- **Works everywhere** — React, Vue, Svelte, Astro, plain HTML. It's just Custom Elements. + +## Styling + +PettyUI is headless. Components use `data-state` and `data-part` attributes for styling hooks. + +```css +petty-tab[data-state="active"] { + border-bottom: 2px solid blue; +} + +petty-switch[data-state="on"] [data-part="thumb"] { + transform: translateX(18px); +} +``` + +Optional default theme and animations: + +```js +import "pettyui/theme"; +import "pettyui/animations"; +``` + +## Signals + +Built-in reactivity in ~30 lines (~500 bytes): + +```js +import { signal, effect } from "pettyui/signals"; + +const count = signal(0); +effect(() => console.log(count.get())); +count.set(1); // logs 1 +``` + +## Router + +SPA routing with the Navigation API (~15 lines): + +```js +import { initRouter } from "pettyui/router"; +initRouter(); +``` + +```html +About +
+``` + +## License + +MIT diff --git a/package.json b/package.json new file mode 100644 index 0000000..7305dc5 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "pettyui-monorepo", + "private": true, + "scripts": { + "build": "pnpm -r build", + "test": "pnpm -r test", + "typecheck": "pnpm -r typecheck" + }, + "devDependencies": { + "typescript": "^6.0.2" + } +} diff --git a/packages/core/package.json b/packages/core/package.json new file mode 100644 index 0000000..375c446 --- /dev/null +++ b/packages/core/package.json @@ -0,0 +1,77 @@ +{ + "name": "pettyui", + "version": "2.0.0-alpha.0", + "description": "Zero-dependency headless Web Components built on browser standards. AI-native.", + "type": "module", + "exports": { + "./signals": "./src/signals.ts", + "./router": "./src/router.ts", + "./theme": "./src/theme.css", + "./animations": "./src/animations.css", + "./counter": "./src/components/counter/index.ts", + "./accordion": "./src/components/accordion/index.ts", + "./alert": "./src/components/alert/index.ts", + "./alert-dialog": "./src/components/alert-dialog/index.ts", + "./avatar": "./src/components/avatar/index.ts", + "./badge": "./src/components/badge/index.ts", + "./breadcrumbs": "./src/components/breadcrumbs/index.ts", + "./button": "./src/components/button/index.ts", + "./calendar": "./src/components/calendar/index.ts", + "./card": "./src/components/card/index.ts", + "./checkbox": "./src/components/checkbox/index.ts", + "./collapsible": "./src/components/collapsible/index.ts", + "./combobox": "./src/components/combobox/index.ts", + "./command-palette": "./src/components/command-palette/index.ts", + "./context-menu": "./src/components/context-menu/index.ts", + "./data-table": "./src/components/data-table/index.ts", + "./date-picker": "./src/components/date-picker/index.ts", + "./dialog": "./src/components/dialog/index.ts", + "./drawer": "./src/components/drawer/index.ts", + "./dropdown-menu": "./src/components/dropdown-menu/index.ts", + "./form": "./src/components/form/index.ts", + "./hover-card": "./src/components/hover-card/index.ts", + "./image": "./src/components/image/index.ts", + "./link": "./src/components/link/index.ts", + "./loading-indicator": "./src/components/loading-indicator/index.ts", + "./listbox": "./src/components/listbox/index.ts", + "./meter": "./src/components/meter/index.ts", + "./navigation-menu": "./src/components/navigation-menu/index.ts", + "./number-field": "./src/components/number-field/index.ts", + "./pagination": "./src/components/pagination/index.ts", + "./popover": "./src/components/popover/index.ts", + "./progress": "./src/components/progress/index.ts", + "./radio-group": "./src/components/radio-group/index.ts", + "./select": "./src/components/select/index.ts", + "./separator": "./src/components/separator/index.ts", + "./skeleton": "./src/components/skeleton/index.ts", + "./slider": "./src/components/slider/index.ts", + "./switch": "./src/components/switch/index.ts", + "./tabs": "./src/components/tabs/index.ts", + "./text-field": "./src/components/text-field/index.ts", + "./toast": "./src/components/toast/index.ts", + "./toggle": "./src/components/toggle/index.ts", + "./toggle-group": "./src/components/toggle-group/index.ts", + "./tooltip": "./src/components/tooltip/index.ts", + "./virtual-list": "./src/components/virtual-list/index.ts", + "./tags-input": "./src/components/tags-input/index.ts", + "./typewriter": "./src/components/typewriter/index.ts", + "./stagger": "./src/components/stagger/index.ts", + "./reveal": "./src/components/reveal/index.ts", + "./parallax": "./src/components/parallax/index.ts", + "./wizard": "./src/components/wizard/index.ts" + }, + "scripts": { + "build": "tsdown", + "test": "vitest run", + "test:watch": "vitest", + "typecheck": "tsc --noEmit" + }, + "dependencies": { + "zod": "^4.3.6" + }, + "devDependencies": { + "tsdown": "^0.21.7", + "typescript": "^6.0.2", + "vitest": "^4.1.2" + } +} diff --git a/packages/core/src/animations.css b/packages/core/src/animations.css new file mode 100644 index 0000000..0c2a2b8 --- /dev/null +++ b/packages/core/src/animations.css @@ -0,0 +1,137 @@ +/* PettyUI Animations — stagger, reveal, and transition CSS */ + +.petty-stagger-hidden { opacity: 0; } + +.petty-stagger-fade-up { + animation: pettyFadeUp 0.5s ease both; +} +.petty-stagger-fade-down { + animation: pettyFadeDown 0.5s ease both; +} +.petty-stagger-fade-left { + animation: pettyFadeLeft 0.5s ease both; +} +.petty-stagger-fade-right { + animation: pettyFadeRight 0.5s ease both; +} +.petty-stagger-scale { + animation: pettyScale 0.5s ease both; +} +.petty-stagger-blur { + animation: pettyBlur 0.6s ease both; +} + +.petty-reveal-hidden { opacity: 0; } + +.petty-reveal-fade-up { + animation: pettyFadeUp 0.6s ease both; +} +.petty-reveal-fade-down { + animation: pettyFadeDown 0.6s ease both; +} +.petty-reveal-fade-left { + animation: pettyFadeLeft 0.6s ease both; +} +.petty-reveal-fade-right { + animation: pettyFadeRight 0.6s ease both; +} +.petty-reveal-scale { + animation: pettyScale 0.6s ease both; +} +.petty-reveal-blur { + animation: pettyBlur 0.7s ease both; +} + +petty-typewriter.petty-typewriter-cursor::after { + content: "|"; + animation: pettyCursorBlink 0.8s step-end infinite; +} +petty-typewriter[data-state="done"].petty-typewriter-cursor::after { + animation: pettyCursorBlink 0.8s step-end 3; +} + +petty-counter { font-variant-numeric: tabular-nums; } + +@keyframes pettyFadeUp { + from { opacity: 0; transform: translateY(20px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes pettyFadeDown { + from { opacity: 0; transform: translateY(-20px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes pettyFadeLeft { + from { opacity: 0; transform: translateX(20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes pettyFadeRight { + from { opacity: 0; transform: translateX(-20px); } + to { opacity: 1; transform: translateX(0); } +} +@keyframes pettyScale { + from { opacity: 0; transform: scale(0.9); } + to { opacity: 1; transform: scale(1); } +} +@keyframes pettyBlur { + from { opacity: 0; filter: blur(8px); transform: translateY(10px); } + to { opacity: 1; filter: blur(0); transform: translateY(0); } +} +@keyframes pettyCursorBlink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +dialog[open] { + animation: pettyDialogIn 0.2s ease; +} +@keyframes pettyDialogIn { + from { opacity: 0; transform: translateY(8px) scale(0.98); } + to { opacity: 1; transform: translateY(0) scale(1); } +} + +[popover]:popover-open { + animation: pettyPopoverIn 0.15s ease; +} +@keyframes pettyPopoverIn { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } +} + +[data-part="toast"] { + animation: pettySlideIn 0.3s ease; +} +@keyframes pettySlideIn { + from { opacity: 0; transform: translateX(100%); } + to { opacity: 1; transform: translateX(0); } +} + +petty-loading-indicator { display: inline-flex; align-items: center; justify-content: center; position: relative; } +petty-loading-indicator [data-part="container"] { display: flex; align-items: center; justify-content: center; position: relative; } + +petty-loading-indicator [data-part="indicator"] { + border-radius: 50%; + border: 3px solid rgba(54, 192, 241, 0.12); + border-top-color: #36c0f1; + border-right-color: rgba(54, 192, 241, 0.4); + animation: pettyLoadSpin 1.1s linear infinite, pettyLoadPulse 2.2s ease-in-out infinite; +} + +petty-loading-indicator [data-part="container"]::before { + content: ""; + position: absolute; + inset: -2px; + border-radius: 50%; + border: 2px solid transparent; + border-bottom-color: rgba(54, 192, 241, 0.2); + border-left-color: rgba(54, 192, 241, 0.1); + animation: pettyLoadSpin 2.4s linear infinite reverse; +} + +@keyframes pettyLoadSpin { + to { rotate: 360deg; } +} + +@keyframes pettyLoadPulse { + 0%, 100% { box-shadow: 0 0 8px rgba(54, 192, 241, 0.15); } + 50% { box-shadow: 0 0 20px rgba(54, 192, 241, 0.35); } +} diff --git a/packages/core/src/components/accordion/accordion-item.ts b/packages/core/src/components/accordion/accordion-item.ts new file mode 100644 index 0000000..e9f3e4b --- /dev/null +++ b/packages/core/src/components/accordion/accordion-item.ts @@ -0,0 +1,82 @@ +/** + * PettyAccordionItem — wraps a single `
` element within a PettyAccordion. + * + * Usage: + * ```html + * + *
+ * Section 1 + *
Content 1
+ *
+ * + * ``` + * + * Manages data-state ("open" | "closed") and disabled behaviour on the + * underlying `
` and `` elements. + */ +export class PettyAccordionItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + /** The `
` element nested directly inside this item. */ + get detailsElement(): HTMLDetailsElement | null { + return this.querySelector("details"); + } + + /** Whether the item's details element is currently open. */ + get isOpen(): boolean { + return this.detailsElement?.open ?? false; + } + + /** The value attribute, falling back to summary text content. */ + get value(): string { + const explicit = this.getAttribute("value"); + if (explicit !== null) return explicit; + return this.querySelector("summary")?.textContent?.trim() ?? ""; + } + + /** @internal */ + connectedCallback(): void { + this.#syncState(); + this.#applyDisabled(); + const details = this.detailsElement; + if (details) { + details.addEventListener("toggle", this.#handleToggle); + } + } + + /** @internal */ + disconnectedCallback(): void { + const details = this.detailsElement; + details?.removeEventListener("toggle", this.#handleToggle); + } + + /** @internal */ + attributeChangedCallback(name: string): void { + if (name === "disabled") this.#applyDisabled(); + } + + #handleToggle = (): void => { + this.#syncState(); + }; + + #syncState(): void { + const details = this.detailsElement; + const state = details?.open ? "open" : "closed"; + this.setAttribute("data-state", state); + const summary = details?.querySelector("summary"); + if (summary) summary.setAttribute("aria-expanded", String(details?.open ?? false)); + } + + #applyDisabled(): void { + const disabled = this.hasAttribute("disabled"); + const summary = this.detailsElement?.querySelector("summary"); + if (!summary) return; + if (disabled) { + summary.setAttribute("aria-disabled", "true"); + summary.setAttribute("tabindex", "-1"); + } else { + summary.removeAttribute("aria-disabled"); + summary.removeAttribute("tabindex"); + } + } +} diff --git a/packages/core/src/components/accordion/accordion.schema.ts b/packages/core/src/components/accordion/accordion.schema.ts new file mode 100644 index 0000000..e8e9526 --- /dev/null +++ b/packages/core/src/components/accordion/accordion.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-accordion", description: "Headless accordion built on native
elements with single/multiple mode", tier: 1, attributes: [{ name: "type", type: "string", default: "single", description: "Accordion mode: single closes others on open, multiple allows many open" }], parts: [{ name: "content", element: "div", description: "Content area inside each details element" }], events: [{ name: "petty-change", detail: "{ value: string[] }", description: "Fires when open items change, detail contains array of open values" }], example: `
Section 1
Content 1
` }; diff --git a/packages/core/src/components/accordion/accordion.ts b/packages/core/src/components/accordion/accordion.ts new file mode 100644 index 0000000..c8d8b0c --- /dev/null +++ b/packages/core/src/components/accordion/accordion.ts @@ -0,0 +1,82 @@ +import { emit, listen } from "../../shared/helpers"; + +/** + * PettyAccordion — headless accordion built on native `
` elements. + * + * Usage: + * ```html + * + * + *
+ * Section 1 + *
Content 1
+ *
+ * + * + *
+ * Section 2 + *
Content 2
+ *
+ * + * + * ``` + * + * The browser handles: open/close toggle, keyboard navigation within summary. + * This element adds: single/multiple mode, petty-change event with open values. + */ +export class PettyAccordion extends HTMLElement { + static observedAttributes = ["type"]; + + /** The accordion mode: "single" closes others on open, "multiple" allows many open. */ + get type(): "single" | "multiple" { + const val = this.getAttribute("type"); + return val === "multiple" ? "multiple" : "single"; + } + + /** @internal */ + connectedCallback(): void { + this.addEventListener("toggle", this.#handleToggle, true); + } + + /** @internal */ + disconnectedCallback(): void { + this.removeEventListener("toggle", this.#handleToggle, true); + } + + #handleToggle = (event: Event): void => { + const target = event.target; + if (!(target instanceof HTMLDetailsElement)) return; + + if (this.type === "single" && target.open) { + this.#closeOthers(target); + } + + this.#dispatchChange(); + }; + + #closeOthers(opened: HTMLDetailsElement): void { + const items = this.querySelectorAll("details"); + items.forEach((details) => { + if (details !== opened && details.open) { + details.open = false; + } + }); + } + + #dispatchChange(): void { + const openValues = this.#collectOpenValues(); + emit(this, "change", { value: openValues }); + } + + #collectOpenValues(): string[] { + const items = this.querySelectorAll("petty-accordion-item"); + const values: string[] = []; + items.forEach((item) => { + const details = item.querySelector("details"); + if (!details?.open) return; + const val = item.getAttribute("value") ?? item.querySelector("summary")?.textContent?.trim() ?? ""; + if (val) values.push(val); + }); + return values; + } +} diff --git a/packages/core/src/components/accordion/index.ts b/packages/core/src/components/accordion/index.ts new file mode 100644 index 0000000..53b2216 --- /dev/null +++ b/packages/core/src/components/accordion/index.ts @@ -0,0 +1,8 @@ +import { PettyAccordion } from "./accordion"; +import { PettyAccordionItem } from "./accordion-item"; +export { PettyAccordion, PettyAccordionItem }; + +if (!customElements.get("petty-accordion")) { + customElements.define("petty-accordion", PettyAccordion); + customElements.define("petty-accordion-item", PettyAccordionItem); +} diff --git a/packages/core/src/components/alert-dialog/alert-dialog.schema.ts b/packages/core/src/components/alert-dialog/alert-dialog.schema.ts new file mode 100644 index 0000000..03516f5 --- /dev/null +++ b/packages/core/src/components/alert-dialog/alert-dialog.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-alert-dialog", description: "Confirmation dialog with role=alertdialog on native dialog element", tier: 3, attributes: [], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when dialog closes, detail contains the return value" }], example: `

Confirm

Are you sure?

` }; diff --git a/packages/core/src/components/alert-dialog/alert-dialog.ts b/packages/core/src/components/alert-dialog/alert-dialog.ts new file mode 100644 index 0000000..1749a4c --- /dev/null +++ b/packages/core/src/components/alert-dialog/alert-dialog.ts @@ -0,0 +1,59 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyAlertDialog — confirmation dialog with role="alertdialog" on native dialog. */ +export class PettyAlertDialog extends HTMLElement { + #cleanup: (() => void) | null = null; + + get dialogElement(): HTMLDialogElement | null { + return this.querySelector("dialog"); + } + + get isOpen(): boolean { + return this.dialogElement?.open ?? false; + } + + /** Opens the alert dialog as a modal. */ + open(): void { + const dlg = this.dialogElement; + if (dlg && !dlg.open) dlg.showModal(); + } + + /** Closes the alert dialog with an optional return value. */ + close(returnValue?: string): void { + const dlg = this.dialogElement; + if (dlg?.open) dlg.close(returnValue); + } + + connectedCallback(): void { + const dlg = this.dialogElement; + if (!dlg) return; + dlg.setAttribute("role", "alertdialog"); + dlg.setAttribute("aria-modal", "true"); + this.#linkAria(dlg); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + } + + #handleClose = (): void => { + const dlg = this.dialogElement; + emit(this, "close", { value: dlg?.returnValue ?? "" }); + }; + + #linkAria(dlg: HTMLDialogElement): void { + const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); + if (heading) { + if (!heading.id) heading.id = uniqueId("petty-adlg-title"); + dlg.setAttribute("aria-labelledby", heading.id); + } + const desc = dlg.querySelector("p"); + if (desc) { + if (!desc.id) desc.id = uniqueId("petty-adlg-desc"); + dlg.setAttribute("aria-describedby", desc.id); + } + } +} diff --git a/packages/core/src/components/alert-dialog/index.ts b/packages/core/src/components/alert-dialog/index.ts new file mode 100644 index 0000000..991ab69 --- /dev/null +++ b/packages/core/src/components/alert-dialog/index.ts @@ -0,0 +1,6 @@ +import { PettyAlertDialog } from "./alert-dialog"; +export { PettyAlertDialog }; + +if (!customElements.get("petty-alert-dialog")) { + customElements.define("petty-alert-dialog", PettyAlertDialog); +} diff --git a/packages/core/src/components/alert/alert.schema.ts b/packages/core/src/components/alert/alert.schema.ts new file mode 100644 index 0000000..24b2b91 --- /dev/null +++ b/packages/core/src/components/alert/alert.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-alert", description: "Inline status message with variant-driven ARIA role", tier: 1, attributes: [{ name: "variant", type: "string", default: "default", description: "Alert variant: default, error, warning, success, info. Error/warning sets role=alert" }], parts: [], events: [], example: `

Something went wrong.

` }; diff --git a/packages/core/src/components/alert/alert.ts b/packages/core/src/components/alert/alert.ts new file mode 100644 index 0000000..7e215dd --- /dev/null +++ b/packages/core/src/components/alert/alert.ts @@ -0,0 +1,23 @@ +/** PettyAlert — inline status message with variant-driven ARIA role. */ +export class PettyAlert extends HTMLElement { + static observedAttributes = ["variant"]; + + get variant(): string { + return this.getAttribute("variant") ?? "default"; + } + + connectedCallback(): void { + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const v = this.variant; + this.dataset.variant = v; + const isUrgent = v === "error" || v === "warning"; + this.setAttribute("role", isUrgent ? "alert" : "status"); + } +} diff --git a/packages/core/src/components/alert/index.ts b/packages/core/src/components/alert/index.ts new file mode 100644 index 0000000..53aeb2c --- /dev/null +++ b/packages/core/src/components/alert/index.ts @@ -0,0 +1,6 @@ +import { PettyAlert } from "./alert"; +export { PettyAlert }; + +if (!customElements.get("petty-alert")) { + customElements.define("petty-alert", PettyAlert); +} diff --git a/packages/core/src/components/avatar/avatar.schema.ts b/packages/core/src/components/avatar/avatar.schema.ts new file mode 100644 index 0000000..4ac0c2d --- /dev/null +++ b/packages/core/src/components/avatar/avatar.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-avatar", description: "Image with automatic fallback display on load error", tier: 3, attributes: [], parts: [{ name: "fallback", element: "span", description: "Fallback content shown when image fails to load" }], events: [], example: `UserAB` }; diff --git a/packages/core/src/components/avatar/avatar.ts b/packages/core/src/components/avatar/avatar.ts new file mode 100644 index 0000000..83811f9 --- /dev/null +++ b/packages/core/src/components/avatar/avatar.ts @@ -0,0 +1,38 @@ +/** PettyAvatar — image with automatic fallback on load error. */ +export class PettyAvatar extends HTMLElement { + connectedCallback(): void { + this.dataset.state = "loading"; + const img = this.querySelector("img"); + if (!img) { this.#showFallback(); return; } + img.addEventListener("load", this.#onLoad); + img.addEventListener("error", this.#onError); + if (img.complete && img.naturalWidth > 0) this.#onLoad(); + else if (img.complete) this.#onError(); + } + + disconnectedCallback(): void { + const img = this.querySelector("img"); + img?.removeEventListener("load", this.#onLoad); + img?.removeEventListener("error", this.#onError); + } + + #onLoad = (): void => { + this.dataset.state = "loaded"; + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = ""; + if (fallback) fallback.style.display = "none"; + }; + + #onError = (): void => { + this.dataset.state = "error"; + this.#showFallback(); + }; + + #showFallback(): void { + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = "none"; + if (fallback) fallback.style.display = ""; + } +} diff --git a/packages/core/src/components/avatar/index.ts b/packages/core/src/components/avatar/index.ts new file mode 100644 index 0000000..67c504c --- /dev/null +++ b/packages/core/src/components/avatar/index.ts @@ -0,0 +1,6 @@ +import { PettyAvatar } from "./avatar"; +export { PettyAvatar }; + +if (!customElements.get("petty-avatar")) { + customElements.define("petty-avatar", PettyAvatar); +} diff --git a/packages/core/src/components/badge/badge.schema.ts b/packages/core/src/components/badge/badge.schema.ts new file mode 100644 index 0000000..cfb769b --- /dev/null +++ b/packages/core/src/components/badge/badge.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-badge", description: "Display-only status indicator with variant support", tier: 3, attributes: [{ name: "variant", type: "string", default: "default", description: "Visual variant for styling" }], parts: [{ name: "badge", element: "span", description: "The badge element itself (set automatically)" }], events: [], example: `Active` }; diff --git a/packages/core/src/components/badge/badge.ts b/packages/core/src/components/badge/badge.ts new file mode 100644 index 0000000..63eeda2 --- /dev/null +++ b/packages/core/src/components/badge/badge.ts @@ -0,0 +1,17 @@ +/** PettyBadge — display-only status indicator with variant support. */ +export class PettyBadge extends HTMLElement { + static observedAttributes = ["variant"]; + + get variant(): string { + return this.getAttribute("variant") ?? "default"; + } + + connectedCallback(): void { + this.dataset.variant = this.variant; + this.dataset.part = "badge"; + } + + attributeChangedCallback(): void { + this.dataset.variant = this.variant; + } +} diff --git a/packages/core/src/components/badge/index.ts b/packages/core/src/components/badge/index.ts new file mode 100644 index 0000000..8cff55e --- /dev/null +++ b/packages/core/src/components/badge/index.ts @@ -0,0 +1,6 @@ +import { PettyBadge } from "./badge"; +export { PettyBadge }; + +if (!customElements.get("petty-badge")) { + customElements.define("petty-badge", PettyBadge); +} diff --git a/packages/core/src/components/breadcrumbs/breadcrumb-item.ts b/packages/core/src/components/breadcrumbs/breadcrumb-item.ts new file mode 100644 index 0000000..814cf79 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumb-item.ts @@ -0,0 +1,24 @@ +/** PettyBreadcrumbItem — single breadcrumb with current-page detection. */ +export class PettyBreadcrumbItem extends HTMLElement { + static observedAttributes = ["current"]; + + connectedCallback(): void { + this.dataset.part = "item"; + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const isCurrent = this.hasAttribute("current"); + const target = this.querySelector("a") ?? this; + if (isCurrent) { + target.setAttribute("aria-current", "page"); + } else { + target.removeAttribute("aria-current"); + } + this.dataset.state = isCurrent ? "current" : "default"; + } +} diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts b/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts new file mode 100644 index 0000000..eae828b --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumbs.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-breadcrumbs", description: "Navigation breadcrumb trail with ARIA landmarks", tier: 3, attributes: [], parts: [{ name: "item", element: "li", description: "Individual breadcrumb item (on petty-breadcrumb-item)" }], events: [], example: `
    HomeDocs
` }; diff --git a/packages/core/src/components/breadcrumbs/breadcrumbs.ts b/packages/core/src/components/breadcrumbs/breadcrumbs.ts new file mode 100644 index 0000000..385ecf3 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/breadcrumbs.ts @@ -0,0 +1,11 @@ +/** PettyBreadcrumbs — navigation breadcrumb trail with ARIA landmarks. */ +export class PettyBreadcrumbs extends HTMLElement { + connectedCallback(): void { + if (!this.querySelector("nav")) { + this.setAttribute("role", "navigation"); + } + this.setAttribute("aria-label", this.getAttribute("aria-label") ?? "Breadcrumb"); + const list = this.querySelector("ol, ul"); + if (list) list.setAttribute("role", "list"); + } +} diff --git a/packages/core/src/components/breadcrumbs/index.ts b/packages/core/src/components/breadcrumbs/index.ts new file mode 100644 index 0000000..bc28246 --- /dev/null +++ b/packages/core/src/components/breadcrumbs/index.ts @@ -0,0 +1,8 @@ +import { PettyBreadcrumbs } from "./breadcrumbs"; +import { PettyBreadcrumbItem } from "./breadcrumb-item"; +export { PettyBreadcrumbs, PettyBreadcrumbItem }; + +if (!customElements.get("petty-breadcrumbs")) { + customElements.define("petty-breadcrumbs", PettyBreadcrumbs); + customElements.define("petty-breadcrumb-item", PettyBreadcrumbItem); +} diff --git a/packages/core/src/components/button/button.schema.ts b/packages/core/src/components/button/button.schema.ts new file mode 100644 index 0000000..acaa7a7 --- /dev/null +++ b/packages/core/src/components/button/button.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-button", description: "Headless button wrapper with loading and disabled states", tier: 3, attributes: [{ name: "disabled", type: "boolean", description: "Disables the button" }, { name: "loading", type: "boolean", description: "Shows loading state, disables interaction" }], parts: [], events: [], example: `` }; diff --git a/packages/core/src/components/button/button.ts b/packages/core/src/components/button/button.ts new file mode 100644 index 0000000..0a4d986 --- /dev/null +++ b/packages/core/src/components/button/button.ts @@ -0,0 +1,53 @@ +/** + * PettyButton — headless button wrapper with loading and disabled states. + * + * Usage: + * ```html + * + * + * + * ``` + */ +export class PettyButton extends HTMLElement { + static observedAttributes = ["disabled", "loading"]; + + /** The child `
` }; diff --git a/packages/core/src/components/calendar/calendar.ts b/packages/core/src/components/calendar/calendar.ts new file mode 100644 index 0000000..4e75788 --- /dev/null +++ b/packages/core/src/components/calendar/calendar.ts @@ -0,0 +1,93 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyCalendar — month grid with day selection and month navigation. */ +export class PettyCalendar extends HTMLElement { + static observedAttributes = ["value", "min", "max"]; + + readonly #month = signal(new Date().getMonth()); + readonly #year = signal(new Date().getFullYear()); + readonly #selected = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#selected.get(); } + set value(v: string) { this.#selected.set(v); } + + connectedCallback(): void { + const init = this.getAttribute("value") ?? ""; + if (init) { this.#selected.set(init); this.#parseMonth(init); } + this.#stopEffect = effect(() => this.#render()); + this.querySelector("[data-part=prev-month]")?.addEventListener("click", this.#onPrev); + this.querySelector("[data-part=next-month]")?.addEventListener("click", this.#onNext); + this.addEventListener("click", this.#onDayClick); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.querySelector("[data-part=prev-month]")?.removeEventListener("click", this.#onPrev); + this.querySelector("[data-part=next-month]")?.removeEventListener("click", this.#onNext); + this.removeEventListener("click", this.#onDayClick); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next) { this.#selected.set(next); this.#parseMonth(next); } + } + + #parseMonth(dateStr: string): void { + const d = new Date(dateStr); + if (!Number.isNaN(d.getTime())) { this.#month.set(d.getMonth()); this.#year.set(d.getFullYear()); } + } + + #onPrev = (): void => { + if (this.#month.get() === 0) { this.#month.set(11); this.#year.set(this.#year.get() - 1); } + else this.#month.set(this.#month.get() - 1); + }; + + #onNext = (): void => { + if (this.#month.get() === 11) { this.#month.set(0); this.#year.set(this.#year.get() + 1); } + else this.#month.set(this.#month.get() + 1); + }; + + #onDayClick = (e: Event): void => { + const btn = (e.target as HTMLElement).closest("[data-date]"); + if (!btn || btn.hasAttribute("data-disabled")) return; + const date = (btn as HTMLElement).dataset.date ?? ""; + this.#selected.set(date); + emit(this, "change", { value: date }); + }; + + #createDayCell(day: number, iso: string, sel: string, today: string): HTMLTableCellElement { + const td = document.createElement("td"); + const btn = document.createElement("button"); + btn.dataset.date = iso; + btn.dataset.part = "day"; + btn.setAttribute("role", "gridcell"); + btn.textContent = String(day); + if (iso === sel) btn.dataset.state = "selected"; + if (iso === today) btn.dataset.state = btn.dataset.state ? `${btn.dataset.state} today` : "today"; + td.appendChild(btn); + return td; + } + + #render(): void { + const m = this.#month.get(); + const y = this.#year.get(); + const sel = this.#selected.get(); + const title = this.querySelector("[data-part=title]"); + if (title) title.textContent = `${new Date(y, m).toLocaleString("default", { month: "long" })} ${y}`; + const body = this.querySelector("[data-part=body]"); + if (!body) return; + const today = new Date().toISOString().slice(0, 10); + const firstDay = new Date(y, m, 1).getDay(); + const daysInMonth = new Date(y, m + 1, 0).getDate(); + body.replaceChildren(); + let row = document.createElement("tr"); + for (let i = 0; i < firstDay; i++) row.appendChild(document.createElement("td")); + for (let d = 1; d <= daysInMonth; d++) { + const iso = `${y}-${String(m + 1).padStart(2, "0")}-${String(d).padStart(2, "0")}`; + row.appendChild(this.#createDayCell(d, iso, sel, today)); + if ((firstDay + d) % 7 === 0) { body.appendChild(row); row = document.createElement("tr"); } + } + if (row.children.length > 0) body.appendChild(row); + } +} diff --git a/packages/core/src/components/calendar/index.ts b/packages/core/src/components/calendar/index.ts new file mode 100644 index 0000000..ce1fb0a --- /dev/null +++ b/packages/core/src/components/calendar/index.ts @@ -0,0 +1,6 @@ +import { PettyCalendar } from "./calendar"; +export { PettyCalendar }; + +if (!customElements.get("petty-calendar")) { + customElements.define("petty-calendar", PettyCalendar); +} diff --git a/packages/core/src/components/card/card-content.ts b/packages/core/src/components/card/card-content.ts new file mode 100644 index 0000000..58a61a2 --- /dev/null +++ b/packages/core/src/components/card/card-content.ts @@ -0,0 +1,6 @@ +/** PettyCardContent — structural body section within a card. */ +export class PettyCardContent extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "content"; + } +} diff --git a/packages/core/src/components/card/card-footer.ts b/packages/core/src/components/card/card-footer.ts new file mode 100644 index 0000000..8db08f8 --- /dev/null +++ b/packages/core/src/components/card/card-footer.ts @@ -0,0 +1,6 @@ +/** PettyCardFooter — structural footer section within a card. */ +export class PettyCardFooter extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "footer"; + } +} diff --git a/packages/core/src/components/card/card-header.ts b/packages/core/src/components/card/card-header.ts new file mode 100644 index 0000000..4b17d2c --- /dev/null +++ b/packages/core/src/components/card/card-header.ts @@ -0,0 +1,6 @@ +/** PettyCardHeader — structural header section within a card. */ +export class PettyCardHeader extends HTMLElement { + connectedCallback(): void { + this.dataset.part = "header"; + } +} diff --git a/packages/core/src/components/card/card.schema.ts b/packages/core/src/components/card/card.schema.ts new file mode 100644 index 0000000..98cb318 --- /dev/null +++ b/packages/core/src/components/card/card.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-card", description: "Structural container with optional heading-based ARIA labelling", tier: 3, attributes: [], parts: [{ name: "header", element: "div", description: "Card header section (petty-card-header)" }, { name: "content", element: "div", description: "Card body section (petty-card-content)" }, { name: "footer", element: "div", description: "Card footer section (petty-card-footer)" }], events: [], example: `

Title

Body text

` }; diff --git a/packages/core/src/components/card/card.ts b/packages/core/src/components/card/card.ts new file mode 100644 index 0000000..a3d2b7d --- /dev/null +++ b/packages/core/src/components/card/card.ts @@ -0,0 +1,13 @@ +import { uniqueId } from "../../shared/aria"; + +/** PettyCard — structural container with optional heading-based labelling. */ +export class PettyCard extends HTMLElement { + connectedCallback(): void { + const heading = this.querySelector("h1, h2, h3, h4, h5, h6"); + if (heading) { + this.setAttribute("role", "article"); + if (!heading.id) heading.id = uniqueId("petty-card-title"); + this.setAttribute("aria-labelledby", heading.id); + } + } +} diff --git a/packages/core/src/components/card/index.ts b/packages/core/src/components/card/index.ts new file mode 100644 index 0000000..9bd4973 --- /dev/null +++ b/packages/core/src/components/card/index.ts @@ -0,0 +1,12 @@ +import { PettyCard } from "./card"; +import { PettyCardHeader } from "./card-header"; +import { PettyCardContent } from "./card-content"; +import { PettyCardFooter } from "./card-footer"; +export { PettyCard, PettyCardHeader, PettyCardContent, PettyCardFooter }; + +if (!customElements.get("petty-card")) { + customElements.define("petty-card", PettyCard); + customElements.define("petty-card-header", PettyCardHeader); + customElements.define("petty-card-content", PettyCardContent); + customElements.define("petty-card-footer", PettyCardFooter); +} diff --git a/packages/core/src/components/checkbox/checkbox.schema.ts b/packages/core/src/components/checkbox/checkbox.schema.ts new file mode 100644 index 0000000..2a69e8a --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-checkbox", description: "Tri-state checkbox with label wiring and change events", tier: 3, attributes: [{ name: "checked", type: "boolean", description: "Whether the checkbox is checked" }, { name: "indeterminate", type: "boolean", description: "Whether the checkbox is in indeterminate state" }, { name: "disabled", type: "boolean", description: "Disables the checkbox" }, { name: "name", type: "string", description: "Form field name" }, { name: "value", type: "string", default: "on", description: "Value submitted when checked" }], parts: [{ name: "control", element: "input", description: "The native checkbox input element" }, { name: "label", element: "label", description: "Label element auto-linked to the control" }], events: [{ name: "petty-change", detail: "{ checked: boolean, indeterminate: boolean }", description: "Fires when checked state changes" }], example: `` }; diff --git a/packages/core/src/components/checkbox/checkbox.ts b/packages/core/src/components/checkbox/checkbox.ts new file mode 100644 index 0000000..fac8d83 --- /dev/null +++ b/packages/core/src/components/checkbox/checkbox.ts @@ -0,0 +1,62 @@ +import { signal } from "../../signals"; +import { emit, listen, part, wireLabel } from "../../shared/helpers"; + +/** PettyCheckbox — tri-state checkbox with label wiring and change events. */ +export class PettyCheckbox extends HTMLElement { + static observedAttributes = ["checked", "indeterminate", "disabled", "name", "value"]; + + readonly #checked = signal(false); + readonly #indeterminate = signal(false); + #cleanup = (): void => {}; + + get checked(): boolean { return this.#checked.get(); } + set checked(v: boolean) { this.#checked.set(v); this.#sync(); } + + get indeterminate(): boolean { return this.#indeterminate.get(); } + set indeterminate(v: boolean) { this.#indeterminate.set(v); this.#sync(); } + + connectedCallback(): void { + const input = this.#input(); + if (!input) return; + if (this.hasAttribute("checked")) this.#checked.set(true); + if (this.hasAttribute("indeterminate")) this.#indeterminate.set(true); + wireLabel(input, part(this, "label"), "petty-cb"); + this.#sync(); + this.#cleanup = listen(input, [["change", this.#handleChange]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "checked") this.#checked.set(next !== null); + if (name === "indeterminate") this.#indeterminate.set(next !== null); + this.#sync(); + } + + #input(): HTMLInputElement | null { + return part(this, "control"); + } + + #sync(): void { + const input = this.#input(); + if (!input) return; + input.checked = this.#checked.get(); + input.indeterminate = this.#indeterminate.get(); + input.disabled = this.hasAttribute("disabled"); + if (this.hasAttribute("name")) input.name = this.getAttribute("name") ?? ""; + if (this.hasAttribute("value")) input.value = this.getAttribute("value") ?? "on"; + const state = this.#indeterminate.get() ? "indeterminate" : this.#checked.get() ? "checked" : "unchecked"; + this.dataset.state = state; + } + + #handleChange = (): void => { + const input = this.#input(); + if (!input) return; + this.#checked.set(input.checked); + this.#indeterminate.set(false); + this.#sync(); + emit(this, "change", { checked: input.checked, indeterminate: false }); + }; +} diff --git a/packages/core/src/components/checkbox/index.ts b/packages/core/src/components/checkbox/index.ts new file mode 100644 index 0000000..9557cba --- /dev/null +++ b/packages/core/src/components/checkbox/index.ts @@ -0,0 +1,6 @@ +import { PettyCheckbox } from "./checkbox"; +export { PettyCheckbox }; + +if (!customElements.get("petty-checkbox")) { + customElements.define("petty-checkbox", PettyCheckbox); +} diff --git a/packages/core/src/components/collapsible/collapsible.schema.ts b/packages/core/src/components/collapsible/collapsible.schema.ts new file mode 100644 index 0000000..db611d3 --- /dev/null +++ b/packages/core/src/components/collapsible/collapsible.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-collapsible", description: "Single disclosure wrapper on native details element", tier: 1, attributes: [{ name: "disabled", type: "boolean", description: "Prevents opening the collapsible" }], parts: [], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the collapsible opens or closes" }], example: `
Toggle
Hidden content
` }; diff --git a/packages/core/src/components/collapsible/collapsible.ts b/packages/core/src/components/collapsible/collapsible.ts new file mode 100644 index 0000000..79d6145 --- /dev/null +++ b/packages/core/src/components/collapsible/collapsible.ts @@ -0,0 +1,77 @@ +import { emit, listen } from "../../shared/helpers"; + +/** PettyCollapsible — single disclosure wrapper on native details element. */ +export class PettyCollapsible extends HTMLElement { + static observedAttributes = ["disabled"]; + + #cleanup = (): void => {}; + + get detailsElement(): HTMLDetailsElement | null { + return this.querySelector("details"); + } + + get isOpen(): boolean { + return this.detailsElement?.open ?? false; + } + + /** Opens the collapsible. */ + open(): void { + const d = this.detailsElement; + if (d && !this.hasAttribute("disabled")) d.open = true; + } + + /** Closes the collapsible. */ + close(): void { + const d = this.detailsElement; + if (d) d.open = false; + } + + /** Toggles the collapsible open/closed state. */ + toggle(): void { + if (this.isOpen) this.close(); + else this.open(); + } + + connectedCallback(): void { + const d = this.detailsElement; + if (!d) return; + this.#syncState(); + this.#applyDisabled(); + this.#cleanup = listen(d, [["toggle", this.#handleToggle]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.#applyDisabled(); + } + + #handleToggle = (): void => { + this.#syncState(); + emit(this, "toggle", { open: this.isOpen }); + }; + + #syncState(): void { + const d = this.detailsElement; + this.dataset.state = d?.open ? "open" : "closed"; + const summary = d?.querySelector("summary"); + if (summary) summary.setAttribute("aria-expanded", String(d?.open ?? false)); + } + + #applyDisabled(): void { + const disabled = this.hasAttribute("disabled"); + const summary = this.detailsElement?.querySelector("summary"); + if (!summary) return; + if (disabled) { + summary.setAttribute("aria-disabled", "true"); + summary.addEventListener("click", this.#preventToggle); + } else { + summary.removeAttribute("aria-disabled"); + summary.removeEventListener("click", this.#preventToggle); + } + } + + #preventToggle = (e: Event): void => { e.preventDefault(); }; +} diff --git a/packages/core/src/components/collapsible/index.ts b/packages/core/src/components/collapsible/index.ts new file mode 100644 index 0000000..fd0dfd4 --- /dev/null +++ b/packages/core/src/components/collapsible/index.ts @@ -0,0 +1,6 @@ +import { PettyCollapsible } from "./collapsible"; +export { PettyCollapsible }; + +if (!customElements.get("petty-collapsible")) { + customElements.define("petty-collapsible", PettyCollapsible); +} diff --git a/packages/core/src/components/combobox/combobox-option.ts b/packages/core/src/components/combobox/combobox-option.ts new file mode 100644 index 0000000..e19998d --- /dev/null +++ b/packages/core/src/components/combobox/combobox-option.ts @@ -0,0 +1,18 @@ +/** PettyComboboxOption — single option within a combobox listbox. */ +export class PettyComboboxOption extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + this.setAttribute("aria-selected", "false"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } +} diff --git a/packages/core/src/components/combobox/combobox.schema.ts b/packages/core/src/components/combobox/combobox.schema.ts new file mode 100644 index 0000000..16609e1 --- /dev/null +++ b/packages/core/src/components/combobox/combobox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-combobox", description: "Searchable select with popover listbox and keyboard navigation", tier: 2, attributes: [{ name: "value", type: "string", description: "Currently selected value" }, { name: "placeholder", type: "string", description: "Placeholder text for the input" }, { name: "disabled", type: "boolean", description: "Disables the combobox" }], parts: [{ name: "input", element: "input", description: "Text input for search filtering" }, { name: "listbox", element: "div", description: "Popover container for options" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when an option is selected" }], example: `
One
` }; diff --git a/packages/core/src/components/combobox/combobox.ts b/packages/core/src/components/combobox/combobox.ts new file mode 100644 index 0000000..a532453 --- /dev/null +++ b/packages/core/src/components/combobox/combobox.ts @@ -0,0 +1,83 @@ +import { uniqueId } from "../../shared/aria"; +import { emit } from "../../shared/helpers"; + +/** PettyCombobox — searchable select with popover listbox and keyboard nav. */ +export class PettyCombobox extends HTMLElement { + static observedAttributes = ["value", "placeholder", "disabled"]; + + #highlightIndex = -1; + + connectedCallback(): void { + const input = this.#input(); + const lb = this.#listbox(); + if (!input || !lb) return; + if (!lb.id) lb.id = uniqueId("petty-combo-lb"); + input.setAttribute("aria-controls", lb.id); + input.setAttribute("aria-expanded", "false"); + input.setAttribute("aria-autocomplete", "list"); + input.addEventListener("input", this.#onInput); + input.addEventListener("keydown", this.#onKeydown); + lb.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("input", this.#onInput); + this.#input()?.removeEventListener("keydown", this.#onKeydown); + this.#listbox()?.removeEventListener("click", this.#onClick); + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + #listbox(): HTMLElement | null { return this.querySelector("[data-part=listbox]"); } + + #options(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-combobox-option:not([disabled]):not([hidden])")); + } + + #onInput = (): void => { + const input = this.#input(); + const lb = this.#listbox(); + if (!input || !lb) return; + const query = input.value.toLowerCase(); + const all = this.querySelectorAll("petty-combobox-option"); + for (const opt of all) { + const match = (opt.textContent ?? "").toLowerCase().includes(query); + opt.toggleAttribute("hidden", !match); + } + if (!lb.matches(":popover-open")) lb.showPopover(); + input.setAttribute("aria-expanded", "true"); + this.#highlightIndex = -1; + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#options(); + if (e.key === "ArrowDown") { e.preventDefault(); this.#highlight(Math.min(this.#highlightIndex + 1, items.length - 1), items); } + else if (e.key === "ArrowUp") { e.preventDefault(); this.#highlight(Math.max(this.#highlightIndex - 1, 0), items); } + else if (e.key === "Enter") { e.preventDefault(); this.#selectHighlighted(items); } + else if (e.key === "Escape") { this.#listbox()?.hidePopover(); this.#input()?.setAttribute("aria-expanded", "false"); } + }; + + #highlight(idx: number, items: HTMLElement[]): void { + for (const opt of items) opt.removeAttribute("data-highlighted"); + if (items[idx]) { items[idx].setAttribute("data-highlighted", ""); this.#input()?.setAttribute("aria-activedescendant", items[idx].id || ""); } + this.#highlightIndex = idx; + } + + #selectHighlighted(items: HTMLElement[]): void { + const opt = items[this.#highlightIndex]; + if (opt) this.#select(opt); + } + + #onClick = (e: MouseEvent): void => { + const opt = (e.target as HTMLElement).closest("petty-combobox-option"); + if (opt && !opt.hasAttribute("disabled")) this.#select(opt as HTMLElement); + }; + + #select(opt: HTMLElement): void { + const val = opt.getAttribute("value") ?? opt.textContent?.trim() ?? ""; + const input = this.#input(); + if (input) input.value = opt.textContent?.trim() ?? val; + this.#listbox()?.hidePopover(); + input?.setAttribute("aria-expanded", "false"); + emit(this, "change", { value: val }); + } +} diff --git a/packages/core/src/components/combobox/index.ts b/packages/core/src/components/combobox/index.ts new file mode 100644 index 0000000..42fda92 --- /dev/null +++ b/packages/core/src/components/combobox/index.ts @@ -0,0 +1,8 @@ +import { PettyCombobox } from "./combobox"; +import { PettyComboboxOption } from "./combobox-option"; +export { PettyCombobox, PettyComboboxOption }; + +if (!customElements.get("petty-combobox")) { + customElements.define("petty-combobox", PettyCombobox); + customElements.define("petty-combobox-option", PettyComboboxOption); +} diff --git a/packages/core/src/components/command-palette/command-palette-item.ts b/packages/core/src/components/command-palette/command-palette-item.ts new file mode 100644 index 0000000..0610c4f --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette-item.ts @@ -0,0 +1,17 @@ +/** PettyCommandPaletteItem — single command option within the palette. */ +export class PettyCommandPaletteItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } +} diff --git a/packages/core/src/components/command-palette/command-palette.schema.ts b/packages/core/src/components/command-palette/command-palette.schema.ts new file mode 100644 index 0000000..cf0fe10 --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-command-palette", description: "Search-driven command menu using native dialog, opened with Cmd+K", tier: 2, attributes: [], parts: [{ name: "search", element: "input", description: "Search input for filtering commands" }, { name: "list", element: "div", description: "Container for command items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a command item is selected" }], example: `
Save
` }; diff --git a/packages/core/src/components/command-palette/command-palette.ts b/packages/core/src/components/command-palette/command-palette.ts new file mode 100644 index 0000000..acdb430 --- /dev/null +++ b/packages/core/src/components/command-palette/command-palette.ts @@ -0,0 +1,79 @@ +import { emit } from "../../shared/helpers"; + +/** PettyCommandPalette — search-driven command menu using native dialog. */ +export class PettyCommandPalette extends HTMLElement { + #highlightIndex = -1; + + /** Opens the command palette dialog. */ + open(): void { + const dlg = this.querySelector("dialog"); + if (dlg && !dlg.open) { dlg.showModal(); this.#search()?.focus(); } + } + + /** Closes the command palette dialog. */ + close(): void { + const dlg = this.querySelector("dialog"); + if (dlg?.open) dlg.close(); + } + + connectedCallback(): void { + document.addEventListener("keydown", this.#onGlobalKey); + this.#search()?.addEventListener("input", this.#onSearch); + this.#list()?.addEventListener("click", this.#onClick); + this.#list()?.addEventListener("keydown", this.#onListKey); + } + + disconnectedCallback(): void { + document.removeEventListener("keydown", this.#onGlobalKey); + this.#search()?.removeEventListener("input", this.#onSearch); + this.#list()?.removeEventListener("click", this.#onClick); + this.#list()?.removeEventListener("keydown", this.#onListKey); + } + + #search(): HTMLInputElement | null { return this.querySelector("input[data-part=search]"); } + #list(): HTMLElement | null { return this.querySelector("[data-part=list]"); } + + #visibleItems(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-command-palette-item:not([hidden]):not([disabled])")); + } + + #onGlobalKey = (e: KeyboardEvent): void => { + if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); this.open(); } + }; + + #onSearch = (): void => { + const query = (this.#search()?.value ?? "").toLowerCase(); + const all = this.querySelectorAll("petty-command-palette-item"); + for (const item of all) { + const match = (item.textContent ?? "").toLowerCase().includes(query); + item.toggleAttribute("hidden", !match); + } + this.#highlightIndex = -1; + }; + + #onListKey = (e: Event): void => { + const ke = e as KeyboardEvent; + const items = this.#visibleItems(); + if (ke.key === "ArrowDown") { ke.preventDefault(); this.#highlight(Math.min(this.#highlightIndex + 1, items.length - 1), items); } + else if (ke.key === "ArrowUp") { ke.preventDefault(); this.#highlight(Math.max(this.#highlightIndex - 1, 0), items); } + else if (ke.key === "Enter") { ke.preventDefault(); this.#selectItem(items[this.#highlightIndex]); } + }; + + #highlight(idx: number, items: HTMLElement[]): void { + for (const item of items) item.removeAttribute("data-highlighted"); + if (items[idx]) { items[idx].setAttribute("data-highlighted", ""); items[idx].focus(); } + this.#highlightIndex = idx; + } + + #onClick = (e: Event): void => { + const target = (e.target as HTMLElement).closest("petty-command-palette-item"); + if (target && !target.hasAttribute("disabled")) this.#selectItem(target as HTMLElement); + }; + + #selectItem(item: HTMLElement | undefined): void { + if (!item) return; + const val = item.getAttribute("value") ?? item.textContent?.trim() ?? ""; + emit(this, "select", { value: val }); + this.close(); + } +} diff --git a/packages/core/src/components/command-palette/index.ts b/packages/core/src/components/command-palette/index.ts new file mode 100644 index 0000000..2e5a28c --- /dev/null +++ b/packages/core/src/components/command-palette/index.ts @@ -0,0 +1,8 @@ +import { PettyCommandPalette } from "./command-palette"; +import { PettyCommandPaletteItem } from "./command-palette-item"; +export { PettyCommandPalette, PettyCommandPaletteItem }; + +if (!customElements.get("petty-command-palette")) { + customElements.define("petty-command-palette", PettyCommandPalette); + customElements.define("petty-command-palette-item", PettyCommandPaletteItem); +} diff --git a/packages/core/src/components/context-menu/context-menu-item.ts b/packages/core/src/components/context-menu/context-menu-item.ts new file mode 100644 index 0000000..2637d7e --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu-item.ts @@ -0,0 +1,16 @@ +/** PettyContextMenuItem — single item within a context menu. */ +export class PettyContextMenuItem extends HTMLElement { + static observedAttributes = ["disabled"]; + + connectedCallback(): void { + this.setAttribute("role", "menuitem"); + this.setAttribute("tabindex", "-1"); + if (this.hasAttribute("disabled")) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.hasAttribute("disabled"))); + } + } +} diff --git a/packages/core/src/components/context-menu/context-menu.schema.ts b/packages/core/src/components/context-menu/context-menu.schema.ts new file mode 100644 index 0000000..4414925 --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-context-menu", description: "Right-click menu using Popover API with keyboard navigation", tier: 2, attributes: [], parts: [{ name: "trigger", element: "div", description: "Element that triggers the context menu on right-click" }, { name: "content", element: "div", description: "Popover container for menu items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a menu item is selected" }], example: `
Right-click here
Copy
` }; diff --git a/packages/core/src/components/context-menu/context-menu.ts b/packages/core/src/components/context-menu/context-menu.ts new file mode 100644 index 0000000..e868a8b --- /dev/null +++ b/packages/core/src/components/context-menu/context-menu.ts @@ -0,0 +1,63 @@ +import { emit } from "../../shared/helpers"; + +/** PettyContextMenu — right-click menu using Popover API with keyboard nav. */ +export class PettyContextMenu extends HTMLElement { + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.#content(); + if (!trigger || !content) return; + trigger.addEventListener("contextmenu", this.#onContext); + content.addEventListener("keydown", this.#onKeydown); + content.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.#content(); + trigger?.removeEventListener("contextmenu", this.#onContext); + content?.removeEventListener("keydown", this.#onKeydown); + content?.removeEventListener("click", this.#onClick); + } + + #content(): HTMLElement | null { return this.querySelector("[data-part=content]"); } + + #items(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-context-menu-item:not([disabled])")); + } + + #onContext = (e: Event): void => { + e.preventDefault(); + const me = e as MouseEvent; + const content = this.#content(); + if (!content) return; + content.style.setProperty("--petty-ctx-x", `${me.clientX}px`); + content.style.setProperty("--petty-ctx-y", `${me.clientY}px`); + content.showPopover(); + this.#items()[0]?.focus(); + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#items(); + const active = document.activeElement as HTMLElement; + const idx = items.indexOf(active); + if (e.key === "ArrowDown") { + e.preventDefault(); + items[(idx + 1) % items.length]?.focus(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + items[(idx - 1 + items.length) % items.length]?.focus(); + } else if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + active?.click(); + } else if (e.key === "Escape") { + this.#content()?.hidePopover(); + } + }; + + #onClick = (e: MouseEvent): void => { + const item = (e.target as HTMLElement).closest("petty-context-menu-item"); + if (!item || item.hasAttribute("disabled")) return; + emit(this, "select", { value: item.getAttribute("value") ?? item.textContent?.trim() ?? "" }); + this.#content()?.hidePopover(); + }; +} diff --git a/packages/core/src/components/context-menu/index.ts b/packages/core/src/components/context-menu/index.ts new file mode 100644 index 0000000..1725125 --- /dev/null +++ b/packages/core/src/components/context-menu/index.ts @@ -0,0 +1,8 @@ +import { PettyContextMenu } from "./context-menu"; +import { PettyContextMenuItem } from "./context-menu-item"; +export { PettyContextMenu, PettyContextMenuItem }; + +if (!customElements.get("petty-context-menu")) { + customElements.define("petty-context-menu", PettyContextMenu); + customElements.define("petty-context-menu-item", PettyContextMenuItem); +} diff --git a/packages/core/src/components/counter/counter.ts b/packages/core/src/components/counter/counter.ts new file mode 100644 index 0000000..0c15bdd --- /dev/null +++ b/packages/core/src/components/counter/counter.ts @@ -0,0 +1,74 @@ +import { emit } from "../../shared/helpers"; + +/** PettyCounter — animates a number from start to end with easing. */ +export class PettyCounter extends HTMLElement { + static observedAttributes = ["from", "to", "duration", "delay", "decimals", "prefix", "suffix"]; + + #frame: ReturnType | null = null; + #startTime = 0; + #timer: ReturnType | null = null; + + get from(): number { return Number(this.getAttribute("from") ?? 0); } + get to(): number { return Number(this.getAttribute("to") ?? 100); } + get duration(): number { return Number(this.getAttribute("duration") ?? 2000); } + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + get decimals(): number { return Number(this.getAttribute("decimals") ?? 0); } + get prefix(): string { return this.getAttribute("prefix") ?? ""; } + get suffix(): string { return this.getAttribute("suffix") ?? ""; } + + /** Starts the counter animation. */ + start(): void { + this.#startTime = performance.now(); + this.dataset.state = "counting"; + this.#animate(this.#startTime); + } + + /** Resets the counter to its initial value. */ + reset(): void { + this.#stop(); + this.#render(this.from); + this.dataset.state = "idle"; + } + + connectedCallback(): void { + this.#render(this.from); + this.dataset.state = "idle"; + if (this.delay > 0) { + this.#timer = setTimeout(() => this.start(), this.delay); + } else { + this.start(); + } + } + + disconnectedCallback(): void { + this.#stop(); + } + + #stop(): void { + if (this.#frame) { cancelAnimationFrame(this.#frame); this.#frame = null; } + if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; } + } + + #easeOut(t: number): number { + return 1 - (1 - t) ** 3; + } + + #animate = (now: number): void => { + const elapsed = now - this.#startTime; + const progress = Math.min(elapsed / this.duration, 1); + const eased = this.#easeOut(progress); + const current = this.from + (this.to - this.from) * eased; + this.#render(current); + if (progress < 1) { + this.#frame = requestAnimationFrame(this.#animate); + } else { + this.dataset.state = "done"; + emit(this, "complete", {}); + } + }; + + #render(value: number): void { + const formatted = value.toFixed(this.decimals); + this.textContent = `${this.prefix}${formatted}${this.suffix}`; + } +} diff --git a/packages/core/src/components/counter/index.ts b/packages/core/src/components/counter/index.ts new file mode 100644 index 0000000..77f7a0d --- /dev/null +++ b/packages/core/src/components/counter/index.ts @@ -0,0 +1,6 @@ +import { PettyCounter } from "./counter"; +export { PettyCounter }; + +if (!customElements.get("petty-counter")) { + customElements.define("petty-counter", PettyCounter); +} diff --git a/packages/core/src/components/data-table/data-table.schema.ts b/packages/core/src/components/data-table/data-table.schema.ts new file mode 100644 index 0000000..bae4bed --- /dev/null +++ b/packages/core/src/components/data-table/data-table.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-data-table", description: "Sortable table with click-to-sort column headers", tier: 3, attributes: [], parts: [{ name: "body", element: "tbody", description: "Table body containing sortable rows" }], events: [{ name: "petty-sort", detail: "{ column: string, direction: string }", description: "Fires when a column header is clicked, with column name and sort direction" }], example: `
NameAge
Alice30
` }; diff --git a/packages/core/src/components/data-table/data-table.ts b/packages/core/src/components/data-table/data-table.ts new file mode 100644 index 0000000..5dc44c0 --- /dev/null +++ b/packages/core/src/components/data-table/data-table.ts @@ -0,0 +1,54 @@ +import { emit } from "../../shared/helpers"; + +/** PettyDataTable — sortable table with click-to-sort column headers. */ +export class PettyDataTable extends HTMLElement { + connectedCallback(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) { + th.setAttribute("role", "columnheader"); + th.setAttribute("aria-sort", "none"); + th.style.cursor = "pointer"; + th.addEventListener("click", this.#onHeaderClick); + } + } + + disconnectedCallback(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) th.removeEventListener("click", this.#onHeaderClick); + } + + #onHeaderClick = (e: Event): void => { + const th = e.currentTarget as HTMLElement; + const column = th.dataset.sort ?? ""; + const current = th.getAttribute("aria-sort") ?? "none"; + const next = current === "ascending" ? "descending" : "ascending"; + this.#clearSorts(); + th.setAttribute("aria-sort", next); + th.dataset.state = next; + this.#sortBy(th, next === "ascending" ? 1 : -1); + emit(this, "sort", { column, direction: next }); + }; + + #clearSorts(): void { + const headers = this.querySelectorAll("th[data-sort]"); + for (const th of headers) { th.setAttribute("aria-sort", "none"); th.dataset.state = "none"; } + } + + #sortBy(th: HTMLElement, dir: number): void { + const tbody = this.querySelector("tbody[data-part=body]") ?? this.querySelector("tbody"); + if (!tbody) return; + const headerRow = th.parentElement; + if (!headerRow) return; + const colIdx = Array.from(headerRow.children).indexOf(th); + const rows = Array.from(tbody.querySelectorAll("tr")); + rows.sort((a, b) => { + const aText = a.children[colIdx]?.textContent?.trim() ?? ""; + const bText = b.children[colIdx]?.textContent?.trim() ?? ""; + const aNum = Number(aText); + const bNum = Number(bText); + if (!Number.isNaN(aNum) && !Number.isNaN(bNum)) return (aNum - bNum) * dir; + return aText.localeCompare(bText) * dir; + }); + for (const row of rows) tbody.appendChild(row); + } +} diff --git a/packages/core/src/components/data-table/index.ts b/packages/core/src/components/data-table/index.ts new file mode 100644 index 0000000..ad00ac0 --- /dev/null +++ b/packages/core/src/components/data-table/index.ts @@ -0,0 +1,6 @@ +import { PettyDataTable } from "./data-table"; +export { PettyDataTable }; + +if (!customElements.get("petty-data-table")) { + customElements.define("petty-data-table", PettyDataTable); +} diff --git a/packages/core/src/components/date-picker/date-picker.schema.ts b/packages/core/src/components/date-picker/date-picker.schema.ts new file mode 100644 index 0000000..729cc99 --- /dev/null +++ b/packages/core/src/components/date-picker/date-picker.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-date-picker", description: "Date input with calendar popover integration", tier: 2, attributes: [{ name: "value", type: "string", description: "Selected date in ISO format" }, { name: "min", type: "string", description: "Minimum selectable date" }, { name: "max", type: "string", description: "Maximum selectable date" }, { name: "disabled", type: "boolean", description: "Disables the date picker" }], parts: [{ name: "input", element: "input", description: "Text input for date entry" }, { name: "trigger", element: "button", description: "Button that opens the calendar popover" }, { name: "calendar", element: "div", description: "Popover container for the calendar" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when a date is selected from input or calendar" }], example: `
` }; diff --git a/packages/core/src/components/date-picker/date-picker.ts b/packages/core/src/components/date-picker/date-picker.ts new file mode 100644 index 0000000..c7315f4 --- /dev/null +++ b/packages/core/src/components/date-picker/date-picker.ts @@ -0,0 +1,55 @@ +import { emit } from "../../shared/helpers"; + +/** PettyDatePicker — date input with calendar popover integration. */ +export class PettyDatePicker extends HTMLElement { + static observedAttributes = ["value", "min", "max", "disabled"]; + + get value(): string { return this.#input()?.value ?? ""; } + set value(v: string) { const input = this.#input(); if (input) input.value = v; } + + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const input = this.#input(); + if (trigger) { + trigger.setAttribute("aria-haspopup", "dialog"); + trigger.setAttribute("aria-expanded", "false"); + } + input?.addEventListener("change", this.#onInputChange); + this.addEventListener("petty-change", this.#onCalendarSelect); + + const pop = this.querySelector("[data-part=calendar]"); + if (pop) pop.addEventListener("toggle", this.#onToggle as EventListener); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("change", this.#onInputChange); + this.removeEventListener("petty-change", this.#onCalendarSelect); + const pop = this.querySelector("[data-part=calendar]"); + pop?.removeEventListener("toggle", this.#onToggle as EventListener); + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + + #onToggle = (e: ToggleEvent): void => { + const trigger = this.querySelector("[data-part=trigger]"); + if (trigger) trigger.setAttribute("aria-expanded", String(e.newState === "open")); + }; + + #onInputChange = (): void => { + const val = this.#input()?.value ?? ""; + emit(this, "change", { value: val, source: "input" }); + }; + + #onCalendarSelect = (e: Event): void => { + const ce = e as CustomEvent; + if (ce.detail?.source === "input") return; + const val = ce.detail?.value; + if (!val) return; + e.stopPropagation(); + const input = this.#input(); + if (input) input.value = val; + const cal = this.querySelector("[data-part=calendar]"); + if (cal instanceof HTMLElement && "hidePopover" in cal) cal.hidePopover(); + emit(this, "change", { value: val }); + }; +} diff --git a/packages/core/src/components/date-picker/index.ts b/packages/core/src/components/date-picker/index.ts new file mode 100644 index 0000000..bc37d74 --- /dev/null +++ b/packages/core/src/components/date-picker/index.ts @@ -0,0 +1,6 @@ +import { PettyDatePicker } from "./date-picker"; +export { PettyDatePicker }; + +if (!customElements.get("petty-date-picker")) { + customElements.define("petty-date-picker", PettyDatePicker); +} diff --git a/packages/core/src/components/dialog/dialog.schema.ts b/packages/core/src/components/dialog/dialog.schema.ts new file mode 100644 index 0000000..ea516ec --- /dev/null +++ b/packages/core/src/components/dialog/dialog.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-dialog", description: "Headless dialog built on native with ARIA linking and close events", tier: 1, attributes: [], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when the dialog closes, detail contains return value" }], example: `

Title

Content

` }; diff --git a/packages/core/src/components/dialog/dialog.ts b/packages/core/src/components/dialog/dialog.ts new file mode 100644 index 0000000..cce0d16 --- /dev/null +++ b/packages/core/src/components/dialog/dialog.ts @@ -0,0 +1,73 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** + * PettyDialog — headless dialog custom element built on native ``. + * + * Usage: + * ```html + * + * + * + *

Title

+ *

Content

+ * + * + * + * ``` + * + * The browser handles: modal behavior, backdrop, focus trap, Escape, Invoker Commands. + * This element adds: ARIA linking, close event with return value, programmatic API. + */ +export class PettyDialog extends HTMLElement { + #cleanup: (() => void) | null = null; + + /** Finds the first `` child element. */ + get dialogElement(): HTMLDialogElement | null { + return this.querySelector("dialog"); + } + + /** Whether the dialog is currently open. */ + get isOpen(): boolean { + return this.dialogElement?.open ?? false; + } + + /** Opens the dialog as a modal. */ + open(): void { + const dlg = this.dialogElement; + if (dlg && !dlg.open) dlg.showModal(); + } + + /** Closes the dialog with an optional return value. */ + close(returnValue?: string): void { + const dlg = this.dialogElement; + if (dlg?.open) dlg.close(returnValue); + } + + /** @internal */ + connectedCallback(): void { + const dlg = this.dialogElement; + if (!dlg) return; + + this.#linkAria(dlg); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); + } + + /** @internal */ + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + } + + #handleClose = (): void => { + const dlg = this.dialogElement; + emit(this, "close", { value: dlg?.returnValue ?? "" }); + }; + + #linkAria(dlg: HTMLDialogElement): void { + const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); + if (!heading) return; + if (!heading.id) heading.id = uniqueId("petty-dlg-title"); + dlg.setAttribute("aria-labelledby", heading.id); + } +} diff --git a/packages/core/src/components/dialog/index.ts b/packages/core/src/components/dialog/index.ts new file mode 100644 index 0000000..8907c7c --- /dev/null +++ b/packages/core/src/components/dialog/index.ts @@ -0,0 +1,6 @@ +import { PettyDialog } from "./dialog"; +export { PettyDialog }; + +if (!customElements.get("petty-dialog")) { + customElements.define("petty-dialog", PettyDialog); +} diff --git a/packages/core/src/components/drawer/drawer.schema.ts b/packages/core/src/components/drawer/drawer.schema.ts new file mode 100644 index 0000000..6444416 --- /dev/null +++ b/packages/core/src/components/drawer/drawer.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-drawer", description: "Slide-in panel built on native dialog with side positioning", tier: 3, attributes: [{ name: "side", type: "string", default: "right", description: "Side the drawer slides from: left, right, top, bottom" }], parts: [], events: [{ name: "petty-close", detail: "{ value: string }", description: "Fires when the drawer closes, detail contains return value" }], example: `

Menu

` }; diff --git a/packages/core/src/components/drawer/drawer.ts b/packages/core/src/components/drawer/drawer.ts new file mode 100644 index 0000000..0b551c8 --- /dev/null +++ b/packages/core/src/components/drawer/drawer.ts @@ -0,0 +1,64 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyDrawer — slide-in panel built on native dialog with side positioning. */ +export class PettyDrawer extends HTMLElement { + static observedAttributes = ["side"]; + #cleanup: (() => void) | null = null; + + get dialogElement(): HTMLDialogElement | null { + return this.querySelector("dialog"); + } + + get isOpen(): boolean { + return this.dialogElement?.open ?? false; + } + + /** Opens the drawer as a modal. */ + open(): void { + const dlg = this.dialogElement; + if (dlg && !dlg.open) dlg.showModal(); + } + + /** Closes the drawer with an optional return value. */ + close(returnValue?: string): void { + const dlg = this.dialogElement; + if (dlg?.open) dlg.close(returnValue); + } + + connectedCallback(): void { + const dlg = this.dialogElement; + if (!dlg) return; + this.#syncSide(); + this.#linkAria(dlg); + this.#cleanup = listen(dlg, [["close", this.#handleClose]]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + } + + attributeChangedCallback(): void { + this.#syncSide(); + } + + #syncSide(): void { + const side = this.getAttribute("side") ?? "right"; + this.dataset.side = side; + const dlg = this.dialogElement; + if (dlg) dlg.dataset.side = side; + } + + #handleClose = (): void => { + const dlg = this.dialogElement; + emit(this, "close", { value: dlg?.returnValue ?? "" }); + }; + + #linkAria(dlg: HTMLDialogElement): void { + const heading = dlg.querySelector("h1, h2, h3, h4, h5, h6"); + if (!heading) return; + if (!heading.id) heading.id = uniqueId("petty-drawer-title"); + dlg.setAttribute("aria-labelledby", heading.id); + } +} diff --git a/packages/core/src/components/drawer/index.ts b/packages/core/src/components/drawer/index.ts new file mode 100644 index 0000000..efb4624 --- /dev/null +++ b/packages/core/src/components/drawer/index.ts @@ -0,0 +1,6 @@ +import { PettyDrawer } from "./drawer"; +export { PettyDrawer }; + +if (!customElements.get("petty-drawer")) { + customElements.define("petty-drawer", PettyDrawer); +} diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts b/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts new file mode 100644 index 0000000..3f48dd7 --- /dev/null +++ b/packages/core/src/components/dropdown-menu/dropdown-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-dropdown-menu", description: "Action menu built on the Popover API with keyboard navigation", tier: 2, attributes: [], parts: [{ name: "trigger", element: "button", description: "Button that opens the dropdown menu" }, { name: "content", element: "div", description: "Popover container for menu items" }], events: [{ name: "petty-select", detail: "{ value: string }", description: "Fires when a menu item is selected" }], example: `` }; diff --git a/packages/core/src/components/dropdown-menu/dropdown-menu.ts b/packages/core/src/components/dropdown-menu/dropdown-menu.ts new file mode 100644 index 0000000..325fec9 --- /dev/null +++ b/packages/core/src/components/dropdown-menu/dropdown-menu.ts @@ -0,0 +1,79 @@ +import { emit } from "../../shared/helpers"; + +/** PettyDropdownMenu — action menu built on the Popover API. */ +export class PettyDropdownMenu extends HTMLElement { + /** The trigger button element. */ + get triggerElement(): HTMLElement | null { + return this.querySelector("[data-part=trigger]"); + } + + /** The menu content element. */ + get contentElement(): HTMLElement | null { + return this.querySelector("[data-part=content]"); + } + + /** @internal */ + connectedCallback(): void { + const trigger = this.triggerElement; + const content = this.contentElement; + if (!trigger || !content) return; + + trigger.setAttribute("aria-haspopup", "menu"); + trigger.setAttribute("aria-expanded", "false"); + if (content.id) trigger.setAttribute("aria-controls", content.id); + + content.addEventListener("toggle", this.#handleToggle as EventListener); + content.addEventListener("keydown", this.#handleKeyDown); + content.addEventListener("click", this.#handleClick); + } + + /** @internal */ + disconnectedCallback(): void { + const content = this.contentElement; + content?.removeEventListener("toggle", this.#handleToggle as EventListener); + content?.removeEventListener("keydown", this.#handleKeyDown); + content?.removeEventListener("click", this.#handleClick); + } + + #handleToggle = (e: ToggleEvent): void => { + const open = e.newState === "open"; + this.triggerElement?.setAttribute("aria-expanded", String(open)); + if (open) this.#focusFirst(); + }; + + #handleKeyDown = (e: KeyboardEvent): void => { + const items = this.#getItems(); + const active = document.activeElement; + if (!(active instanceof HTMLElement)) return; + const idx = items.indexOf(active); + + if (e.key === "ArrowDown") { + e.preventDefault(); + const next = idx < items.length - 1 ? idx + 1 : 0; + items[next]?.focus(); + } else if (e.key === "ArrowUp") { + e.preventDefault(); + const prev = idx > 0 ? idx - 1 : items.length - 1; + items[prev]?.focus(); + } else if (e.key === "Enter" || e.key === " ") { + e.preventDefault(); + active.click(); + } + }; + + #handleClick = (e: MouseEvent): void => { + const item = (e.target as HTMLElement).closest("petty-menu-item"); + if (!item || item.hasAttribute("disabled")) return; + emit(this, "select", { value: item.textContent?.trim() ?? "" }); + this.contentElement?.hidePopover(); + }; + + #focusFirst(): void { + const first = this.#getItems()[0]; + if (first) first.focus(); + } + + #getItems(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-menu-item:not([disabled])")); + } +} diff --git a/packages/core/src/components/dropdown-menu/index.ts b/packages/core/src/components/dropdown-menu/index.ts new file mode 100644 index 0000000..135bf5b --- /dev/null +++ b/packages/core/src/components/dropdown-menu/index.ts @@ -0,0 +1,8 @@ +import { PettyDropdownMenu } from "./dropdown-menu"; +import { PettyMenuItem } from "./menu-item"; +export { PettyDropdownMenu, PettyMenuItem }; + +if (!customElements.get("petty-dropdown-menu")) { + customElements.define("petty-dropdown-menu", PettyDropdownMenu); + customElements.define("petty-menu-item", PettyMenuItem); +} diff --git a/packages/core/src/components/dropdown-menu/menu-item.ts b/packages/core/src/components/dropdown-menu/menu-item.ts new file mode 100644 index 0000000..06845c0 --- /dev/null +++ b/packages/core/src/components/dropdown-menu/menu-item.ts @@ -0,0 +1,17 @@ +/** PettyMenuItem — a single actionable item within a dropdown menu. */ +export class PettyMenuItem extends HTMLElement { + /** @internal */ + connectedCallback(): void { + this.setAttribute("role", "menuitem"); + this.setAttribute("tabindex", "-1"); + } + + static get observedAttributes(): string[] { return ["disabled"]; } + + /** @internal */ + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", this.hasAttribute("disabled") ? "true" : "false"); + } + } +} diff --git a/packages/core/src/components/form/form-field.ts b/packages/core/src/components/form/form-field.ts new file mode 100644 index 0000000..05dbe13 --- /dev/null +++ b/packages/core/src/components/form/form-field.ts @@ -0,0 +1,56 @@ +import { uniqueId } from "../../shared/aria"; + +/** + * PettyFormField — form field wrapper with label, control, and error linking. + * + * Usage: + * ```html + * + * + * + * + * + * ``` + * + * On connect, generates stable IDs and wires up aria-describedby, htmlFor, + * and the name attribute on the control. Call setError/clearError to manage + * inline validation state — or let petty-form do it automatically. + */ +export class PettyFormField extends HTMLElement { + static get observedAttributes(): string[] { return ["name"]; } + + /** @internal */ + connectedCallback(): void { + const name = this.getAttribute("name") ?? ""; + const controlId = uniqueId(`petty-field-${name}`); + const errorId = `${controlId}-error`; + + const label = this.querySelector("[data-part=label]"); + const control = this.querySelector("[data-part=control]"); + const error = this.querySelector("[data-part=error]"); + + if (control) { + control.id = controlId; + if (!control.getAttribute("name")) control.setAttribute("name", name); + control.setAttribute("aria-describedby", errorId); + } + if (label && control) (label as HTMLLabelElement).htmlFor = controlId; + if (error) error.id = errorId; + } + + /** Display an error message on this field. */ + setError(message: string): void { + const error = this.querySelector("[data-part=error]"); + const control = this.querySelector("[data-part=control]"); + if (error) error.textContent = message; + if (control) control.setAttribute("aria-invalid", "true"); + } + + /** Clear the error message on this field. */ + clearError(): void { + const error = this.querySelector("[data-part=error]"); + const control = this.querySelector("[data-part=control]"); + if (error) error.textContent = ""; + if (control) control.removeAttribute("aria-invalid"); + } +} diff --git a/packages/core/src/components/form/form.schema.ts b/packages/core/src/components/form/form.schema.ts new file mode 100644 index 0000000..90aa5f0 --- /dev/null +++ b/packages/core/src/components/form/form.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-form", description: "Form wrapper with Zod validation and accessible error display", tier: 3, attributes: [], parts: [], events: [{ name: "petty-submit", detail: "{ data: Record }", description: "Fires on valid form submission with form data" }, { name: "petty-invalid", detail: "{ errors: Array<{ path: Array, message: string }> }", description: "Fires when validation fails with error details" }], example: `
` }; diff --git a/packages/core/src/components/form/form.ts b/packages/core/src/components/form/form.ts new file mode 100644 index 0000000..d3ddbc6 --- /dev/null +++ b/packages/core/src/components/form/form.ts @@ -0,0 +1,93 @@ +import { emit } from "../../shared/helpers"; + +interface SchemaLike { + safeParse: (data: unknown) => { + success: boolean; + error?: { issues: Array<{ path: Array; message: string }> }; + }; +} + +/** + * PettyForm — form wrapper with Zod validation and accessible error display. + * + * Usage: + * ```html + * + *
+ * + * + * + * + * + * + *
+ * + * ``` + * + * Set a Zod schema via `el.setSchema(z.object({...}))`. Listens for + * form submit, runs validation, and distributes error messages to + * petty-form-field elements via data-part selectors. Dispatches + * "petty-submit" on success or "petty-invalid" on failure. + */ +export class PettyForm extends HTMLElement { + #schema: SchemaLike | null = null; + + /** Set a Zod schema for validation. */ + setSchema(schema: SchemaLike | null): void { + this.#schema = schema; + } + + /** @internal */ + connectedCallback(): void { + const form = this.querySelector("form"); + if (!form) return; + form.addEventListener("submit", this.#handleSubmit); + form.setAttribute("novalidate", ""); + } + + /** @internal */ + disconnectedCallback(): void { + const form = this.querySelector("form"); + form?.removeEventListener("submit", this.#handleSubmit); + } + + #handleSubmit = (e: Event): void => { + e.preventDefault(); + const form = e.target as HTMLFormElement; + const data = Object.fromEntries(new FormData(form)); + this.#clearErrors(); + + if (this.#schema) { + const result = this.#schema.safeParse(data); + if (!result.success) { + const issues = result.error?.issues ?? []; + this.#showErrors(issues); + emit(this, "invalid", { errors: issues }); + return; + } + } + + emit(this, "submit", { data }); + }; + + #clearErrors(): void { + for (const el of Array.from(this.querySelectorAll("[data-part=error]"))) { + el.textContent = ""; + } + for (const el of Array.from(this.querySelectorAll("[data-part=control]"))) { + el.removeAttribute("aria-invalid"); + } + } + + #showErrors(issues: Array<{ path: Array; message: string }>): void { + for (const issue of issues) { + const name = String(issue.path[0] ?? ""); + const field = this.querySelector(`petty-form-field[name="${name}"]`); + if (!field) continue; + const errorEl = field.querySelector("[data-part=error]"); + if (errorEl) errorEl.textContent = issue.message; + const control = field.querySelector("[data-part=control]"); + if (control) control.setAttribute("aria-invalid", "true"); + } + } +} diff --git a/packages/core/src/components/form/index.ts b/packages/core/src/components/form/index.ts new file mode 100644 index 0000000..1bdbbfd --- /dev/null +++ b/packages/core/src/components/form/index.ts @@ -0,0 +1,8 @@ +import { PettyForm } from "./form"; +import { PettyFormField } from "./form-field"; +export { PettyForm, PettyFormField }; + +if (!customElements.get("petty-form")) { + customElements.define("petty-form", PettyForm); + customElements.define("petty-form-field", PettyFormField); +} diff --git a/packages/core/src/components/hover-card/hover-card.schema.ts b/packages/core/src/components/hover-card/hover-card.schema.ts new file mode 100644 index 0000000..9200c23 --- /dev/null +++ b/packages/core/src/components/hover-card/hover-card.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-hover-card", description: "Rich hover preview using Popover API with configurable open/close delays", tier: 2, attributes: [{ name: "open-delay", type: "number", default: "300", description: "Delay in ms before showing the card" }, { name: "close-delay", type: "number", default: "200", description: "Delay in ms before hiding the card" }], parts: [{ name: "trigger", element: "a", description: "Element that triggers the hover card on mouse enter/focus" }, { name: "content", element: "div", description: "Popover container for the card content" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the hover card opens or closes" }], example: `@user
User details here
` }; diff --git a/packages/core/src/components/hover-card/hover-card.ts b/packages/core/src/components/hover-card/hover-card.ts new file mode 100644 index 0000000..2f051bd --- /dev/null +++ b/packages/core/src/components/hover-card/hover-card.ts @@ -0,0 +1,62 @@ +import { uniqueId } from "../../shared/aria"; +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyHoverCard — rich hover preview using Popover API with open/close delays. */ +export class PettyHoverCard extends HTMLElement { + static observedAttributes = ["open-delay", "close-delay"]; + + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + #cleanupTrigger: (() => void) | null = null; + #cleanupContent: (() => void) | null = null; + + connectedCallback(): void { + const trigger = part(this, "trigger"); + const content = part(this, "content"); + if (!trigger || !content) return; + if (!content.id) content.id = uniqueId("petty-hc"); + trigger.setAttribute("aria-describedby", content.id); + this.#cleanupTrigger = listen(trigger, [ + ["mouseenter", this.#onEnter], + ["mouseleave", this.#onLeave], + ["focus", this.#onEnter], + ["blur", this.#onLeave], + ]); + this.#cleanupContent = listen(content, [ + ["mouseenter", this.#onContentEnter], + ["mouseleave", this.#onLeave], + ]); + } + + disconnectedCallback(): void { + this.#clearTimers(); + this.#cleanupTrigger?.(); + this.#cleanupTrigger = null; + this.#cleanupContent?.(); + this.#cleanupContent = null; + } + + #openDelay(): number { return Number(this.getAttribute("open-delay") ?? 300); } + #closeDelay(): number { return Number(this.getAttribute("close-delay") ?? 200); } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #show(): void { + const content = part(this, "content"); + if (content && !content.matches(":popover-open")) content.showPopover(); + emit(this, "toggle", { open: true }); + } + + #hide(): void { + const content = part(this, "content"); + if (content && content.matches(":popover-open")) content.hidePopover(); + emit(this, "toggle", { open: false }); + } + + #onEnter = (): void => { this.#clearTimers(); this.#showTimer = setTimeout(() => this.#show(), this.#openDelay()); }; + #onLeave = (): void => { this.#clearTimers(); this.#hideTimer = setTimeout(() => this.#hide(), this.#closeDelay()); }; + #onContentEnter = (): void => { this.#clearTimers(); }; +} diff --git a/packages/core/src/components/hover-card/index.ts b/packages/core/src/components/hover-card/index.ts new file mode 100644 index 0000000..4d17fce --- /dev/null +++ b/packages/core/src/components/hover-card/index.ts @@ -0,0 +1,6 @@ +import { PettyHoverCard } from "./hover-card"; +export { PettyHoverCard }; + +if (!customElements.get("petty-hover-card")) { + customElements.define("petty-hover-card", PettyHoverCard); +} diff --git a/packages/core/src/components/image/image.schema.ts b/packages/core/src/components/image/image.schema.ts new file mode 100644 index 0000000..0bace39 --- /dev/null +++ b/packages/core/src/components/image/image.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-image", description: "Image element with fallback display on load failure", tier: 3, attributes: [], parts: [{ name: "fallback", element: "div", description: "Fallback content shown when image fails to load" }], events: [], example: `Photo
Image unavailable
` }; diff --git a/packages/core/src/components/image/image.ts b/packages/core/src/components/image/image.ts new file mode 100644 index 0000000..060622d --- /dev/null +++ b/packages/core/src/components/image/image.ts @@ -0,0 +1,38 @@ +/** PettyImage — image element with fallback display on load failure. */ +export class PettyImage extends HTMLElement { + connectedCallback(): void { + this.dataset.state = "loading"; + const img = this.querySelector("img"); + if (!img) { this.#showFallback(); return; } + img.addEventListener("load", this.#onLoad); + img.addEventListener("error", this.#onError); + if (img.complete && img.naturalWidth > 0) this.#onLoad(); + else if (img.complete) this.#onError(); + } + + disconnectedCallback(): void { + const img = this.querySelector("img"); + img?.removeEventListener("load", this.#onLoad); + img?.removeEventListener("error", this.#onError); + } + + #onLoad = (): void => { + this.dataset.state = "loaded"; + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = ""; + if (fallback) fallback.style.display = "none"; + }; + + #onError = (): void => { + this.dataset.state = "error"; + this.#showFallback(); + }; + + #showFallback(): void { + const img = this.querySelector("img"); + const fallback = this.querySelector("[data-part=fallback]") as HTMLElement | null; + if (img) img.style.display = "none"; + if (fallback) fallback.style.display = ""; + } +} diff --git a/packages/core/src/components/image/index.ts b/packages/core/src/components/image/index.ts new file mode 100644 index 0000000..68305b2 --- /dev/null +++ b/packages/core/src/components/image/index.ts @@ -0,0 +1,6 @@ +import { PettyImage } from "./image"; +export { PettyImage }; + +if (!customElements.get("petty-image")) { + customElements.define("petty-image", PettyImage); +} diff --git a/packages/core/src/components/link/index.ts b/packages/core/src/components/link/index.ts new file mode 100644 index 0000000..139f4af --- /dev/null +++ b/packages/core/src/components/link/index.ts @@ -0,0 +1,6 @@ +import { PettyLink } from "./link"; +export { PettyLink }; + +if (!customElements.get("petty-link")) { + customElements.define("petty-link", PettyLink); +} diff --git a/packages/core/src/components/link/link.schema.ts b/packages/core/src/components/link/link.schema.ts new file mode 100644 index 0000000..df7a5c6 --- /dev/null +++ b/packages/core/src/components/link/link.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-link", description: "Headless anchor wrapper with disabled and external link support", tier: 1, attributes: [{ name: "disabled", type: "boolean", description: "Disables the link and prevents navigation" }, { name: "external", type: "boolean", description: "Opens link in new tab with noopener noreferrer" }], parts: [], events: [], example: `Visit site` }; diff --git a/packages/core/src/components/link/link.ts b/packages/core/src/components/link/link.ts new file mode 100644 index 0000000..682d3cb --- /dev/null +++ b/packages/core/src/components/link/link.ts @@ -0,0 +1,41 @@ +/** PettyLink — headless anchor wrapper with disabled and external support. */ +export class PettyLink extends HTMLElement { + static observedAttributes = ["disabled", "external"]; + + get anchorElement(): HTMLAnchorElement | null { + return this.querySelector("a"); + } + + connectedCallback(): void { + this.#sync(); + this.addEventListener("click", this.#handleClick); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #sync(): void { + const a = this.anchorElement; + if (!a) return; + if (this.hasAttribute("external")) { + a.setAttribute("target", "_blank"); + a.setAttribute("rel", "noopener noreferrer"); + } + if (this.hasAttribute("disabled")) { + a.setAttribute("aria-disabled", "true"); + a.tabIndex = -1; + } else { + a.removeAttribute("aria-disabled"); + a.removeAttribute("tabindex"); + } + } + + #handleClick = (e: Event): void => { + if (this.hasAttribute("disabled")) e.preventDefault(); + }; +} diff --git a/packages/core/src/components/listbox/index.ts b/packages/core/src/components/listbox/index.ts new file mode 100644 index 0000000..891195d --- /dev/null +++ b/packages/core/src/components/listbox/index.ts @@ -0,0 +1,8 @@ +import { PettyListbox } from "./listbox"; +import { PettyListboxOption } from "./listbox-option"; +export { PettyListbox, PettyListboxOption }; + +if (!customElements.get("petty-listbox")) { + customElements.define("petty-listbox", PettyListbox); + customElements.define("petty-listbox-option", PettyListboxOption); +} diff --git a/packages/core/src/components/listbox/listbox-option.ts b/packages/core/src/components/listbox/listbox-option.ts new file mode 100644 index 0000000..af8feb1 --- /dev/null +++ b/packages/core/src/components/listbox/listbox-option.ts @@ -0,0 +1,20 @@ +/** PettyListboxOption — single option within a listbox. */ +export class PettyListboxOption extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? this.textContent?.trim() ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "option"); + this.setAttribute("tabindex", "-1"); + this.setAttribute("aria-selected", "false"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.disabled)); + } + } +} diff --git a/packages/core/src/components/listbox/listbox.schema.ts b/packages/core/src/components/listbox/listbox.schema.ts new file mode 100644 index 0000000..a8c4984 --- /dev/null +++ b/packages/core/src/components/listbox/listbox.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-listbox", description: "Inline selectable list with single or multiple selection and keyboard navigation", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently selected value (comma-separated for multiple)" }, { name: "default-value", type: "string", description: "Initial selected value" }, { name: "multiple", type: "boolean", description: "Allows selecting multiple options" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when selection changes" }], example: `AlphaBeta` }; diff --git a/packages/core/src/components/listbox/listbox.ts b/packages/core/src/components/listbox/listbox.ts new file mode 100644 index 0000000..a53c63b --- /dev/null +++ b/packages/core/src/components/listbox/listbox.ts @@ -0,0 +1,76 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyListbox — inline selectable list with single or multiple selection. */ +export class PettyListbox extends HTMLElement { + static observedAttributes = ["value", "default-value", "multiple"]; + + readonly #value = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#value.get(); } + set value(v: string) { this.#value.set(v); } + + get multiple(): boolean { return this.hasAttribute("multiple"); } + + /** Selects a value, toggling in multiple mode. */ + selectValue(v: string): void { + if (this.multiple) { + const current = this.#value.get().split(",").filter(Boolean); + const idx = current.indexOf(v); + if (idx >= 0) current.splice(idx, 1); + else current.push(v); + this.#value.set(current.join(",")); + } else { + this.#value.set(v); + } + emit(this, "change", { value: this.#value.get() }); + } + + connectedCallback(): void { + const init = initialValue(this); + if (init) this.#value.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + this.addEventListener("keydown", this.#onKeydown); + this.addEventListener("click", this.#onClick); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.removeEventListener("keydown", this.#onKeydown); + this.removeEventListener("click", this.#onClick); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(next); + } + + #options(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-listbox-option:not([disabled])")); + } + + #syncChildren(): void { + const selected = new Set(this.#value.get().split(",").filter(Boolean)); + const options = this.querySelectorAll("petty-listbox-option"); + for (const opt of options) { + const isSelected = selected.has(opt.getAttribute("value") ?? ""); + opt.dataset.state = isSelected ? "selected" : "unselected"; + opt.setAttribute("aria-selected", String(isSelected)); + } + } + + #onClick = (e: MouseEvent): void => { + const opt = (e.target as HTMLElement).closest("petty-listbox-option"); + if (!opt || opt.hasAttribute("disabled")) return; + this.selectValue(opt.getAttribute("value") ?? ""); + }; + + #onKeydown = (e: KeyboardEvent): void => { + const items = this.#options(); + const active = document.activeElement as HTMLElement; + const idx = items.indexOf(active); + if (e.key === "ArrowDown") { e.preventDefault(); items[(idx + 1) % items.length]?.focus(); } + else if (e.key === "ArrowUp") { e.preventDefault(); items[(idx - 1 + items.length) % items.length]?.focus(); } + else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); if (active) this.selectValue(active.getAttribute("value") ?? ""); } + }; +} diff --git a/packages/core/src/components/loading-indicator/index.ts b/packages/core/src/components/loading-indicator/index.ts new file mode 100644 index 0000000..1348cdb --- /dev/null +++ b/packages/core/src/components/loading-indicator/index.ts @@ -0,0 +1,6 @@ +import { PettyLoadingIndicator } from "./loading-indicator"; +export { PettyLoadingIndicator }; + +if (!customElements.get("petty-loading-indicator")) { + customElements.define("petty-loading-indicator", PettyLoadingIndicator); +} diff --git a/packages/core/src/components/loading-indicator/loading-indicator.ts b/packages/core/src/components/loading-indicator/loading-indicator.ts new file mode 100644 index 0000000..d615818 --- /dev/null +++ b/packages/core/src/components/loading-indicator/loading-indicator.ts @@ -0,0 +1,35 @@ +/** PettyLoadingIndicator — M3 Expressive shape-morphing loading animation. */ +export class PettyLoadingIndicator extends HTMLElement { + static observedAttributes = ["size", "contained"]; + + get size(): number { return Number(this.getAttribute("size") ?? 48); } + get contained(): boolean { return this.hasAttribute("contained"); } + + connectedCallback(): void { + this.setAttribute("role", "progressbar"); + this.setAttribute("aria-label", this.getAttribute("aria-label") ?? "Loading"); + this.#render(); + } + + attributeChangedCallback(): void { + this.#render(); + } + + #render(): void { + const px = `${this.size}px`; + const el = this.querySelector("[data-part=indicator]"); + if (el instanceof HTMLElement) { + el.style.width = px; + el.style.height = px; + return; + } + const container = document.createElement("div"); + container.dataset.part = "container"; + const indicator = document.createElement("div"); + indicator.dataset.part = "indicator"; + indicator.style.width = px; + indicator.style.height = px; + container.appendChild(indicator); + this.appendChild(container); + } +} diff --git a/packages/core/src/components/meter/index.ts b/packages/core/src/components/meter/index.ts new file mode 100644 index 0000000..1e32677 --- /dev/null +++ b/packages/core/src/components/meter/index.ts @@ -0,0 +1,6 @@ +import { PettyMeter } from "./meter"; +export { PettyMeter }; + +if (!customElements.get("petty-meter")) { + customElements.define("petty-meter", PettyMeter); +} diff --git a/packages/core/src/components/meter/meter.schema.ts b/packages/core/src/components/meter/meter.schema.ts new file mode 100644 index 0000000..c34fb86 --- /dev/null +++ b/packages/core/src/components/meter/meter.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-meter", description: "Value gauge with low/high/optimum state computation", tier: 3, attributes: [{ name: "value", type: "number", default: "0", description: "Current meter value" }, { name: "min", type: "number", default: "0", description: "Minimum value" }, { name: "max", type: "number", default: "100", description: "Maximum value" }, { name: "low", type: "number", description: "Low threshold value" }, { name: "high", type: "number", description: "High threshold value" }, { name: "optimum", type: "number", description: "Optimum value" }], parts: [{ name: "fill", element: "div", description: "Fill element sized via --petty-meter-value CSS custom property" }], events: [], example: `
` }; diff --git a/packages/core/src/components/meter/meter.ts b/packages/core/src/components/meter/meter.ts new file mode 100644 index 0000000..2badf5b --- /dev/null +++ b/packages/core/src/components/meter/meter.ts @@ -0,0 +1,47 @@ +/** PettyMeter — value gauge with low/high/optimum state computation. */ +export class PettyMeter extends HTMLElement { + static observedAttributes = ["value", "min", "max", "low", "high", "optimum"]; + + connectedCallback(): void { + this.setAttribute("role", "meter"); + this.#sync(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #num(attr: string, fallback: number): number { + const v = this.getAttribute(attr); + return v !== null ? Number(v) : fallback; + } + + #computeState(val: number, low: number, high: number, optimum: number): string { + if (val <= low) return "low"; + if (val >= high) return "high"; + if (Math.abs(val - optimum) <= (high - low) * 0.1) return "optimum"; + return "medium"; + } + + #updateFill(fraction: number): void { + const fill = this.querySelector("[data-part=fill]"); + if (fill instanceof HTMLElement) fill.style.setProperty("--petty-meter-value", String(fraction)); + } + + #sync(): void { + const val = this.#num("value", 0); + const min = this.#num("min", 0); + const max = this.#num("max", 100); + const low = this.#num("low", min); + const high = this.#num("high", max); + const optimum = this.#num("optimum", (low + high) / 2); + + this.setAttribute("aria-valuenow", String(val)); + this.setAttribute("aria-valuemin", String(min)); + this.setAttribute("aria-valuemax", String(max)); + this.dataset.state = this.#computeState(val, low, high, optimum); + + const range = max - min; + this.#updateFill(range > 0 ? (val - min) / range : 0); + } +} diff --git a/packages/core/src/components/navigation-menu/index.ts b/packages/core/src/components/navigation-menu/index.ts new file mode 100644 index 0000000..8802a9c --- /dev/null +++ b/packages/core/src/components/navigation-menu/index.ts @@ -0,0 +1,8 @@ +import { PettyNavigationMenu } from "./navigation-menu"; +import { PettyNavigationMenuItem } from "./navigation-menu-item"; +export { PettyNavigationMenu, PettyNavigationMenuItem }; + +if (!customElements.get("petty-navigation-menu")) { + customElements.define("petty-navigation-menu", PettyNavigationMenu); + customElements.define("petty-navigation-menu-item", PettyNavigationMenuItem); +} diff --git a/packages/core/src/components/navigation-menu/navigation-menu-item.ts b/packages/core/src/components/navigation-menu/navigation-menu-item.ts new file mode 100644 index 0000000..b34fa06 --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu-item.ts @@ -0,0 +1,50 @@ +/** PettyNavigationMenuItem — nav item with optional popover content on hover. */ +export class PettyNavigationMenuItem extends HTMLElement { + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + + connectedCallback(): void { + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.querySelector("[data-part=content]"); + if (!trigger || !content) return; + trigger.addEventListener("mouseenter", this.#onEnter); + trigger.addEventListener("mouseleave", this.#onLeave); + content.addEventListener("mouseenter", this.#onContentEnter); + content.addEventListener("mouseleave", this.#onLeave); + } + + disconnectedCallback(): void { + this.#clearTimers(); + const trigger = this.querySelector("[data-part=trigger]"); + const content = this.querySelector("[data-part=content]"); + trigger?.removeEventListener("mouseenter", this.#onEnter); + trigger?.removeEventListener("mouseleave", this.#onLeave); + content?.removeEventListener("mouseenter", this.#onContentEnter); + content?.removeEventListener("mouseleave", this.#onLeave); + } + + #content(): HTMLElement | null { return this.querySelector("[data-part=content]"); } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #onEnter = (): void => { + this.#clearTimers(); + this.#showTimer = setTimeout(() => { + const c = this.#content(); + if (c && !c.matches(":popover-open")) c.showPopover(); + }, 100); + }; + + #onLeave = (): void => { + this.#clearTimers(); + this.#hideTimer = setTimeout(() => { + const c = this.#content(); + if (c && c.matches(":popover-open")) c.hidePopover(); + }, 200); + }; + + #onContentEnter = (): void => { this.#clearTimers(); }; +} diff --git a/packages/core/src/components/navigation-menu/navigation-menu.schema.ts b/packages/core/src/components/navigation-menu/navigation-menu.schema.ts new file mode 100644 index 0000000..210cc5b --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-navigation-menu", description: "Horizontal nav with optional popover dropdowns on hover", tier: 3, attributes: [{ name: "orientation", type: "string", default: "horizontal", description: "Layout orientation: horizontal or vertical" }], parts: [{ name: "trigger", element: "button", description: "Nav item trigger that shows content on hover (on petty-navigation-menu-item)" }, { name: "content", element: "div", description: "Popover dropdown content (on petty-navigation-menu-item)" }], events: [], example: `` }; diff --git a/packages/core/src/components/navigation-menu/navigation-menu.ts b/packages/core/src/components/navigation-menu/navigation-menu.ts new file mode 100644 index 0000000..72a246c --- /dev/null +++ b/packages/core/src/components/navigation-menu/navigation-menu.ts @@ -0,0 +1,13 @@ +/** PettyNavigationMenu — horizontal nav with optional popover dropdowns. */ +export class PettyNavigationMenu extends HTMLElement { + static observedAttributes = ["orientation"]; + + connectedCallback(): void { + if (!this.querySelector("nav")) this.setAttribute("role", "navigation"); + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } + + attributeChangedCallback(): void { + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } +} diff --git a/packages/core/src/components/number-field/index.ts b/packages/core/src/components/number-field/index.ts new file mode 100644 index 0000000..eb0acd0 --- /dev/null +++ b/packages/core/src/components/number-field/index.ts @@ -0,0 +1,6 @@ +import { PettyNumberField } from "./number-field"; +export { PettyNumberField }; + +if (!customElements.get("petty-number-field")) { + customElements.define("petty-number-field", PettyNumberField); +} diff --git a/packages/core/src/components/number-field/number-field.schema.ts b/packages/core/src/components/number-field/number-field.schema.ts new file mode 100644 index 0000000..bb768bb --- /dev/null +++ b/packages/core/src/components/number-field/number-field.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-number-field", description: "Numeric input with increment/decrement buttons and value clamping", tier: 3, attributes: [{ name: "min", type: "number", description: "Minimum allowed value" }, { name: "max", type: "number", description: "Maximum allowed value" }, { name: "step", type: "number", default: "1", description: "Step increment/decrement amount" }, { name: "value", type: "number", description: "Current numeric value" }, { name: "disabled", type: "boolean", description: "Disables the field" }, { name: "name", type: "string", description: "Form field name" }], parts: [{ name: "control", element: "input", description: "The numeric input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "increment", element: "button", description: "Button to increase the value" }, { name: "decrement", element: "button", description: "Button to decrease the value" }], events: [{ name: "petty-change", detail: "{ value: number }", description: "Fires when the value changes" }], example: `` }; diff --git a/packages/core/src/components/number-field/number-field.ts b/packages/core/src/components/number-field/number-field.ts new file mode 100644 index 0000000..7318cab --- /dev/null +++ b/packages/core/src/components/number-field/number-field.ts @@ -0,0 +1,91 @@ +import { signal } from "../../signals"; +import { emit } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettyNumberField — numeric input with increment/decrement buttons and clamping. */ +export class PettyNumberField extends HTMLElement { + static observedAttributes = ["min", "max", "step", "value", "disabled", "name"]; + + readonly #value = signal(0); + + get value(): number { return this.#value.get(); } + set value(v: number) { this.#applyValue(v); } + + connectedCallback(): void { + const input = this.#input(); + const init = this.getAttribute("value"); + if (init !== null) this.#value.set(Number(init)); + this.#syncInput(); + this.#wireLabel(); + + input?.addEventListener("input", this.#onInput); + input?.addEventListener("keydown", this.#onKeydown); + this.querySelector("[data-part=increment]")?.addEventListener("click", this.#onIncrement); + this.querySelector("[data-part=decrement]")?.addEventListener("click", this.#onDecrement); + } + + disconnectedCallback(): void { + const input = this.#input(); + input?.removeEventListener("input", this.#onInput); + input?.removeEventListener("keydown", this.#onKeydown); + this.querySelector("[data-part=increment]")?.removeEventListener("click", this.#onIncrement); + this.querySelector("[data-part=decrement]")?.removeEventListener("click", this.#onDecrement); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(Number(next)); + this.#syncInput(); + } + + #input(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #wireLabel(): void { + const input = this.#input(); + const label = this.querySelector("[data-part=label]"); + if (input && label) { + if (!input.id) input.id = uniqueId("petty-nf"); + (label as HTMLLabelElement).htmlFor = input.id; + } + } + + #clamp(v: number): number { + const min = Number(this.getAttribute("min") ?? -Infinity); + const max = Number(this.getAttribute("max") ?? Infinity); + return Math.min(Math.max(v, min), max); + } + + #step(): number { + return Number(this.getAttribute("step") ?? 1); + } + + #applyValue(v: number): void { + const clamped = this.#clamp(v); + this.#value.set(clamped); + this.#syncInput(); + emit(this, "change", { value: clamped }); + } + + #syncInput(): void { + const input = this.#input(); + if (!input) return; + input.value = String(this.#value.get()); + input.disabled = this.hasAttribute("disabled"); + if (this.hasAttribute("name")) input.name = this.getAttribute("name") ?? ""; + } + + #onInput = (): void => { + const raw = Number(this.#input()?.value ?? 0); + if (!Number.isNaN(raw)) this.#applyValue(raw); + }; + + #onKeydown = (e: KeyboardEvent): void => { + if (e.key === "ArrowUp") { e.preventDefault(); this.#applyValue(this.#value.get() + this.#step()); } + if (e.key === "ArrowDown") { e.preventDefault(); this.#applyValue(this.#value.get() - this.#step()); } + }; + + #onIncrement = (): void => { if (!this.hasAttribute("disabled")) this.#applyValue(this.#value.get() + this.#step()); }; + #onDecrement = (): void => { if (!this.hasAttribute("disabled")) this.#applyValue(this.#value.get() - this.#step()); }; + +} diff --git a/packages/core/src/components/pagination/index.ts b/packages/core/src/components/pagination/index.ts new file mode 100644 index 0000000..f1c5c4b --- /dev/null +++ b/packages/core/src/components/pagination/index.ts @@ -0,0 +1,8 @@ +import { PettyPagination } from "./pagination"; +import { PettyPaginationItem } from "./pagination-item"; +export { PettyPagination, PettyPaginationItem }; + +if (!customElements.get("petty-pagination")) { + customElements.define("petty-pagination", PettyPagination); + customElements.define("petty-pagination-item", PettyPaginationItem); +} diff --git a/packages/core/src/components/pagination/pagination-item.ts b/packages/core/src/components/pagination/pagination-item.ts new file mode 100644 index 0000000..eaafe37 --- /dev/null +++ b/packages/core/src/components/pagination/pagination-item.ts @@ -0,0 +1,41 @@ +/** PettyPaginationItem — single page button within a pagination component. */ +export class PettyPaginationItem extends HTMLElement { + static observedAttributes = ["value", "type", "disabled"]; + + connectedCallback(): void { + this.setAttribute("role", "button"); + this.setAttribute("tabindex", "0"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", String(this.hasAttribute("disabled"))); + } + } + + #pagination(): { goToPage(n: number): void; currentPage: number } | null { + return this.closest("petty-pagination") as { goToPage(n: number): void; currentPage: number } | null; + } + + #activate(): void { + if (this.hasAttribute("disabled")) return; + const pag = this.#pagination(); + if (!pag) return; + const type = this.getAttribute("type"); + if (type === "prev") pag.goToPage(pag.currentPage - 1); + else if (type === "next") pag.goToPage(pag.currentPage + 1); + else pag.goToPage(Number(this.getAttribute("value") ?? 1)); + } + + #handleClick = (): void => { this.#activate(); }; + #handleKeydown = (e: KeyboardEvent): void => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); this.#activate(); } + }; +} diff --git a/packages/core/src/components/pagination/pagination.schema.ts b/packages/core/src/components/pagination/pagination.schema.ts new file mode 100644 index 0000000..34d6f73 --- /dev/null +++ b/packages/core/src/components/pagination/pagination.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-pagination", description: "Page navigation with prev/next and numbered page items", tier: 3, attributes: [{ name: "total", type: "number", description: "Total number of items" }, { name: "page-size", type: "number", default: "10", description: "Items per page" }, { name: "current-page", type: "number", default: "1", description: "Current active page number" }], parts: [], events: [{ name: "petty-change", detail: "{ page: number }", description: "Fires when the current page changes" }], example: `Prev12Next` }; diff --git a/packages/core/src/components/pagination/pagination.ts b/packages/core/src/components/pagination/pagination.ts new file mode 100644 index 0000000..1e73021 --- /dev/null +++ b/packages/core/src/components/pagination/pagination.ts @@ -0,0 +1,61 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyPagination — page navigation with prev/next and numbered items. */ +export class PettyPagination extends HTMLElement { + static observedAttributes = ["total", "page-size", "current-page"]; + + readonly #page = signal(1); + #stopEffect: (() => void) | null = null; + + get totalPages(): number { + const total = Number(this.getAttribute("total") ?? 0); + const size = Number(this.getAttribute("page-size") ?? 10); + return Math.max(1, Math.ceil(total / size)); + } + + get currentPage(): number { return this.#page.get(); } + set currentPage(v: number) { this.goToPage(v); } + + /** Navigates to a specific page, clamped to valid range. */ + goToPage(n: number): void { + const clamped = Math.min(Math.max(1, n), this.totalPages); + if (this.#page.get() === clamped) return; + this.#page.set(clamped); + emit(this, "change", { page: clamped }); + } + + connectedCallback(): void { + const init = Number(this.getAttribute("current-page") ?? 1); + this.#page.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "current-page" && next !== null) this.#page.set(Number(next)); + } + + #syncChildren(): void { + const page = this.#page.get(); + const total = this.totalPages; + const items = this.querySelectorAll("petty-pagination-item"); + for (const item of items) { + const type = item.getAttribute("type"); + const val = Number(item.getAttribute("value") ?? 0); + if (type === "prev") { + item.toggleAttribute("disabled", page <= 1); + } else if (type === "next") { + item.toggleAttribute("disabled", page >= total); + } else { + const isActive = val === page; + item.dataset.state = isActive ? "active" : "inactive"; + if (isActive) item.setAttribute("aria-current", "page"); + else item.removeAttribute("aria-current"); + } + } + } +} diff --git a/packages/core/src/components/parallax/index.ts b/packages/core/src/components/parallax/index.ts new file mode 100644 index 0000000..68f80a6 --- /dev/null +++ b/packages/core/src/components/parallax/index.ts @@ -0,0 +1,6 @@ +import { PettyParallax } from "./parallax"; +export { PettyParallax }; + +if (!customElements.get("petty-parallax")) { + customElements.define("petty-parallax", PettyParallax); +} diff --git a/packages/core/src/components/parallax/parallax.ts b/packages/core/src/components/parallax/parallax.ts new file mode 100644 index 0000000..bfc28f0 --- /dev/null +++ b/packages/core/src/components/parallax/parallax.ts @@ -0,0 +1,39 @@ +/** PettyParallax — creates depth effect by translating element based on scroll position. */ +export class PettyParallax extends HTMLElement { + static observedAttributes = ["speed", "direction"]; + + #frame: ReturnType | null = null; + + get speed(): number { return Number(this.getAttribute("speed") ?? 0.5); } + get direction(): string { return this.getAttribute("direction") ?? "up"; } + + connectedCallback(): void { + this.style.willChange = "transform"; + window.addEventListener("scroll", this.#onScroll, { passive: true }); + this.#update(); + } + + disconnectedCallback(): void { + window.removeEventListener("scroll", this.#onScroll); + if (this.#frame) cancelAnimationFrame(this.#frame); + } + + #onScroll = (): void => { + if (this.#frame) return; + this.#frame = requestAnimationFrame(() => { + this.#update(); + this.#frame = null; + }); + }; + + #update(): void { + const rect = this.getBoundingClientRect(); + const viewH = window.innerHeight; + const center = rect.top + rect.height / 2; + const offset = (center - viewH / 2) * this.speed; + const dir = this.direction; + const x = dir === "left" ? -offset : dir === "right" ? offset : 0; + const y = dir === "up" ? -offset : dir === "down" ? offset : dir === "left" || dir === "right" ? 0 : -offset; + this.style.transform = `translate3d(${x}px, ${y}px, 0)`; + } +} diff --git a/packages/core/src/components/popover/index.ts b/packages/core/src/components/popover/index.ts new file mode 100644 index 0000000..163a200 --- /dev/null +++ b/packages/core/src/components/popover/index.ts @@ -0,0 +1,6 @@ +import { PettyPopover } from "./popover"; +export { PettyPopover }; + +if (!customElements.get("petty-popover")) { + customElements.define("petty-popover", PettyPopover); +} diff --git a/packages/core/src/components/popover/popover.schema.ts b/packages/core/src/components/popover/popover.schema.ts new file mode 100644 index 0000000..a83b545 --- /dev/null +++ b/packages/core/src/components/popover/popover.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-popover", description: "Headless popover built on the native Popover API with ARIA linking", tier: 2, attributes: [], parts: [{ name: "content", element: "div", description: "The popover content element (must have popover attribute)" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the popover opens or closes" }], example: `

Popover content

` }; diff --git a/packages/core/src/components/popover/popover.ts b/packages/core/src/components/popover/popover.ts new file mode 100644 index 0000000..636f13d --- /dev/null +++ b/packages/core/src/components/popover/popover.ts @@ -0,0 +1,81 @@ +import { emit, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** + * PettyPopover — headless popover custom element built on the native Popover API. + * + * Usage: + * ```html + * + * + *
+ *

Popover content

+ *
+ * + * ``` + * + * The browser handles: open/close, light dismiss, Escape, top-layer. + * This element adds: ARIA linking (trigger aria-controls + aria-expanded), + * toggle event forwarding as petty-toggle CustomEvent. + */ +export class PettyPopover extends HTMLElement { + /** Finds the first child element that has the `popover` attribute. */ + get popoverElement(): HTMLElement | null { + return this.querySelector("[popover]"); + } + + /** Finds the first `
AppleBanana
` }; diff --git a/packages/core/src/components/select/select.ts b/packages/core/src/components/select/select.ts new file mode 100644 index 0000000..4377c67 --- /dev/null +++ b/packages/core/src/components/select/select.ts @@ -0,0 +1,185 @@ +import { signal } from "../../signals"; +import { part, emit, initialValue, listen } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** + * PettySelect — headless select custom element built on the native Popover API. + * + * Usage: + * ```html + * + * + *
+ * Apple + * Banana + *
+ * + * + * ``` + * + * The browser handles: open/close, light dismiss, Escape, top-layer. + * This element adds: value state, keyboard navigation, ARIA, hidden input sync. + */ +export class PettySelect extends HTMLElement { + static observedAttributes = ["value", "default-value", "placeholder"] as const; + + readonly #value = signal(""); + #highlightIndex = -1; + + /** The currently selected value. */ + get value(): string { + return this.#value.get(); + } + + /** Whether the listbox popover is currently open. */ + get isOpen(): boolean { + const lb = this.#listbox(); + return lb ? lb.matches(":popover-open") : false; + } + + /** Opens the listbox popover programmatically. */ + open(): void { + const lb = this.#listbox(); + if (lb && !this.isOpen) lb.showPopover(); + } + + /** Closes the listbox popover programmatically. */ + close(): void { + const lb = this.#listbox(); + if (lb && this.isOpen) lb.hidePopover(); + } + + /** @internal */ + connectedCallback(): void { + const trigger = this.#trigger(); + const lb = this.#listbox(); + if (!lb) return; + + if (!lb.id) lb.id = uniqueId("petty-select-lb"); + if (trigger) { + trigger.setAttribute("aria-haspopup", "listbox"); + trigger.setAttribute("aria-expanded", "false"); + trigger.setAttribute("aria-controls", lb.id); + } + + const init = initialValue(this); + if (init) this.#applyValue(init, false); + + lb.addEventListener("toggle", this.#onToggle); + lb.addEventListener("keydown", this.#onKeydown); + lb.addEventListener("click", this.#onOptionClick); + } + + /** @internal */ + disconnectedCallback(): void { + const lb = this.#listbox(); + lb?.removeEventListener("toggle", this.#onToggle); + lb?.removeEventListener("keydown", this.#onKeydown); + lb?.removeEventListener("click", this.#onOptionClick); + } + + /** @internal */ + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#applyValue(next, false); + } + + #trigger(): HTMLButtonElement | null { + return this.querySelector("button[data-part='trigger']"); + } + + #listbox(): HTMLElement | null { + return this.querySelector("[data-part='listbox']"); + } + + #options(): NodeListOf { + return this.querySelectorAll("petty-select-option:not([disabled])"); + } + + #hiddenInput(): HTMLInputElement | null { + return this.querySelector("input[type='hidden']"); + } + + #applyValue(val: string, dispatch: boolean): void { + this.#value.set(val); + const trigger = this.#trigger(); + const input = this.#hiddenInput(); + const options = this.#options(); + + let label = this.getAttribute("placeholder") ?? ""; + options.forEach((opt) => { + const isSelected = opt.getAttribute("value") === val; + opt.setAttribute("aria-selected", String(isSelected)); + if (isSelected) label = opt.textContent?.trim() ?? val; + }); + + if (trigger) trigger.textContent = label || val; + if (input) input.value = val; + + if (dispatch) { + emit(this, "change", { value: val }); + } + } + + #setHighlight(index: number): void { + const options = Array.from(this.#options()); + options.forEach((opt, i) => { + if (i === index) { + opt.setAttribute("data-highlighted", ""); + opt.setAttribute("id", opt.id || `petty-opt-${i}`); + this.#listbox()?.setAttribute("aria-activedescendant", opt.id); + } else { + opt.removeAttribute("data-highlighted"); + } + }); + this.#highlightIndex = index; + } + + #onToggle = (event: Event): void => { + const toggleEvent = event as ToggleEvent; + const open = toggleEvent.newState === "open"; + const trigger = this.#trigger(); + if (trigger) trigger.setAttribute("aria-expanded", String(open)); + if (open) { + const options = Array.from(this.#options()); + const selectedIdx = options.findIndex( + (opt) => opt.getAttribute("value") === this.#value.get(), + ); + this.#setHighlight(selectedIdx >= 0 ? selectedIdx : 0); + this.#listbox()?.focus(); + } else { + this.#highlightIndex = -1; + this.#listbox()?.removeAttribute("aria-activedescendant"); + } + }; + + #onKeydown = (event: KeyboardEvent): void => { + const options = Array.from(this.#options()); + const len = options.length; + if (len === 0) return; + + if (event.key === "ArrowDown") { + event.preventDefault(); + this.#setHighlight((this.#highlightIndex + 1) % len); + } else if (event.key === "ArrowUp") { + event.preventDefault(); + this.#setHighlight((this.#highlightIndex - 1 + len) % len); + } else if (event.key === "Enter") { + event.preventDefault(); + const opt = options[this.#highlightIndex]; + if (opt) this.#selectOption(opt); + } else if (event.key === "Escape") { + this.close(); + } + }; + + #onOptionClick = (event: Event): void => { + const target = (event.target as Element).closest("petty-select-option"); + if (target && !target.hasAttribute("disabled")) this.#selectOption(target as HTMLElement); + }; + + #selectOption(opt: HTMLElement): void { + const val = opt.getAttribute("value") ?? opt.textContent?.trim() ?? ""; + this.#applyValue(val, true); + this.close(); + } +} diff --git a/packages/core/src/components/separator/index.ts b/packages/core/src/components/separator/index.ts new file mode 100644 index 0000000..f4f632b --- /dev/null +++ b/packages/core/src/components/separator/index.ts @@ -0,0 +1,6 @@ +import { PettySeparator } from "./separator"; +export { PettySeparator }; + +if (!customElements.get("petty-separator")) { + customElements.define("petty-separator", PettySeparator); +} diff --git a/packages/core/src/components/separator/separator.schema.ts b/packages/core/src/components/separator/separator.schema.ts new file mode 100644 index 0000000..d10a11b --- /dev/null +++ b/packages/core/src/components/separator/separator.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-separator", description: "Accessible divider with configurable orientation", tier: 1, attributes: [{ name: "orientation", type: "string", default: "horizontal", description: "Divider orientation: horizontal or vertical" }], parts: [], events: [], example: `` }; diff --git a/packages/core/src/components/separator/separator.ts b/packages/core/src/components/separator/separator.ts new file mode 100644 index 0000000..3a094ac --- /dev/null +++ b/packages/core/src/components/separator/separator.ts @@ -0,0 +1,19 @@ +/** PettySeparator — accessible divider with configurable orientation. */ +export class PettySeparator extends HTMLElement { + static observedAttributes = ["orientation"]; + + connectedCallback(): void { + this.setAttribute("role", "separator"); + this.#syncOrientation(); + } + + attributeChangedCallback(): void { + this.#syncOrientation(); + } + + #syncOrientation(): void { + const orientation = this.getAttribute("orientation") ?? "horizontal"; + this.setAttribute("aria-orientation", orientation); + this.dataset.orientation = orientation; + } +} diff --git a/packages/core/src/components/skeleton/index.ts b/packages/core/src/components/skeleton/index.ts new file mode 100644 index 0000000..368e766 --- /dev/null +++ b/packages/core/src/components/skeleton/index.ts @@ -0,0 +1,6 @@ +import { PettySkeleton } from "./skeleton"; +export { PettySkeleton }; + +if (!customElements.get("petty-skeleton")) { + customElements.define("petty-skeleton", PettySkeleton); +} diff --git a/packages/core/src/components/skeleton/skeleton.schema.ts b/packages/core/src/components/skeleton/skeleton.schema.ts new file mode 100644 index 0000000..e1055d7 --- /dev/null +++ b/packages/core/src/components/skeleton/skeleton.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-skeleton", description: "Loading placeholder with aria-busy and loaded state transitions", tier: 3, attributes: [{ name: "loaded", type: "boolean", description: "When set, transitions from loading to loaded state" }], parts: [], events: [], example: `Loading content...` }; diff --git a/packages/core/src/components/skeleton/skeleton.ts b/packages/core/src/components/skeleton/skeleton.ts new file mode 100644 index 0000000..e9c8fb6 --- /dev/null +++ b/packages/core/src/components/skeleton/skeleton.ts @@ -0,0 +1,19 @@ +/** PettySkeleton — loading placeholder with aria-busy and loaded state transitions. */ +export class PettySkeleton extends HTMLElement { + static observedAttributes = ["loaded"]; + + get loaded(): boolean { return this.hasAttribute("loaded"); } + + connectedCallback(): void { + this.setAttribute("role", "status"); + this.setAttribute("aria-label", "Loading"); + this.setAttribute("aria-busy", "true"); + this.dataset.state = "loading"; + } + + attributeChangedCallback(): void { + const done = this.loaded; + this.setAttribute("aria-busy", String(!done)); + this.dataset.state = done ? "loaded" : "loading"; + } +} diff --git a/packages/core/src/components/slider/index.ts b/packages/core/src/components/slider/index.ts new file mode 100644 index 0000000..eacd644 --- /dev/null +++ b/packages/core/src/components/slider/index.ts @@ -0,0 +1,6 @@ +import { PettySlider } from "./slider"; +export { PettySlider }; + +if (!customElements.get("petty-slider")) { + customElements.define("petty-slider", PettySlider); +} diff --git a/packages/core/src/components/slider/slider.schema.ts b/packages/core/src/components/slider/slider.schema.ts new file mode 100644 index 0000000..070a6f1 --- /dev/null +++ b/packages/core/src/components/slider/slider.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-slider", description: "Range input wrapper with label, output display, and change events", tier: 3, attributes: [{ name: "min", type: "number", description: "Minimum slider value" }, { name: "max", type: "number", description: "Maximum slider value" }, { name: "step", type: "number", description: "Step increment" }, { name: "value", type: "number", description: "Current slider value" }, { name: "disabled", type: "boolean", description: "Disables the slider" }, { name: "name", type: "string", description: "Form field name" }, { name: "orientation", type: "string", default: "horizontal", description: "Slider orientation: horizontal or vertical" }], parts: [{ name: "control", element: "input", description: "The range input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "output", element: "output", description: "Displays the current numeric value" }], events: [{ name: "petty-change", detail: "{ value: number }", description: "Fires when the slider value changes" }], example: `` }; diff --git a/packages/core/src/components/slider/slider.ts b/packages/core/src/components/slider/slider.ts new file mode 100644 index 0000000..31f08d9 --- /dev/null +++ b/packages/core/src/components/slider/slider.ts @@ -0,0 +1,71 @@ +import { emit } from "../../shared/helpers"; +import { uniqueId } from "../../shared/aria"; + +/** PettySlider — range input wrapper with label, output, and change events. */ +export class PettySlider extends HTMLElement { + static observedAttributes = ["min", "max", "step", "value", "disabled", "name", "orientation"]; + + get value(): number { + return Number(this.#input()?.value ?? 0); + } + + set value(v: number) { + const input = this.#input(); + if (input) { input.value = String(v); this.#syncOutput(); } + } + + connectedCallback(): void { + const input = this.#input(); + if (!input) return; + this.#syncAttrs(); + this.#wireLabel(); + this.#syncOutput(); + input.addEventListener("input", this.#handleInput); + } + + disconnectedCallback(): void { + this.#input()?.removeEventListener("input", this.#handleInput); + } + + attributeChangedCallback(): void { + this.#syncAttrs(); + this.#syncOutput(); + } + + #input(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #wireLabel(): void { + const input = this.#input(); + const label = this.querySelector("[data-part=label]"); + if (input && label) { + if (!input.id) input.id = uniqueId("petty-slider"); + (label as HTMLLabelElement).htmlFor = input.id; + } + } + + #syncAttrs(): void { + const input = this.#input(); + if (!input) return; + for (const attr of ["min", "max", "step", "name"]) { + const val = this.getAttribute(attr); + if (val !== null) input.setAttribute(attr, val); + } + const v = this.getAttribute("value"); + if (v !== null) input.value = v; + input.disabled = this.hasAttribute("disabled"); + this.dataset.orientation = this.getAttribute("orientation") ?? "horizontal"; + } + + #syncOutput(): void { + const output = this.querySelector("[data-part=output]"); + if (output) output.textContent = String(this.value); + } + + #handleInput = (): void => { + this.#syncOutput(); + emit(this, "change", { value: this.value }); + }; + +} diff --git a/packages/core/src/components/stagger/index.ts b/packages/core/src/components/stagger/index.ts new file mode 100644 index 0000000..feba48b --- /dev/null +++ b/packages/core/src/components/stagger/index.ts @@ -0,0 +1,6 @@ +import { PettyStagger } from "./stagger"; +export { PettyStagger }; + +if (!customElements.get("petty-stagger")) { + customElements.define("petty-stagger", PettyStagger); +} diff --git a/packages/core/src/components/stagger/stagger.ts b/packages/core/src/components/stagger/stagger.ts new file mode 100644 index 0000000..e982dca --- /dev/null +++ b/packages/core/src/components/stagger/stagger.ts @@ -0,0 +1,35 @@ +import { emit } from "../../shared/helpers"; + +/** PettyStagger — animates children in sequence with configurable delay between each. */ +export class PettyStagger extends HTMLElement { + static observedAttributes = ["delay", "stagger", "animation"]; + + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + get stagger(): number { return Number(this.getAttribute("stagger") ?? 100); } + get animation(): string { return this.getAttribute("animation") ?? "fade-up"; } + + /** Triggers the stagger animation on all children. */ + start(): void { + const children = Array.from(this.children) as HTMLElement[]; + children.forEach((child, i) => { + child.style.animationDelay = `${this.delay + i * this.stagger}ms`; + child.classList.remove("petty-stagger-hidden"); + child.classList.add(`petty-stagger-${this.animation}`); + }); + this.dataset.state = "animating"; + const totalDuration = this.delay + children.length * this.stagger + 600; + setTimeout(() => { + this.dataset.state = "done"; + emit(this, "complete", {}); + }, totalDuration); + } + + connectedCallback(): void { + const children = Array.from(this.children) as HTMLElement[]; + for (const child of children) { + child.classList.add("petty-stagger-hidden"); + } + this.dataset.state = "idle"; + requestAnimationFrame(() => this.start()); + } +} diff --git a/packages/core/src/components/switch/index.ts b/packages/core/src/components/switch/index.ts new file mode 100644 index 0000000..38ba762 --- /dev/null +++ b/packages/core/src/components/switch/index.ts @@ -0,0 +1,6 @@ +import { PettySwitch } from "./switch"; +export { PettySwitch }; + +if (!customElements.get("petty-switch")) { + customElements.define("petty-switch", PettySwitch); +} diff --git a/packages/core/src/components/switch/switch.schema.ts b/packages/core/src/components/switch/switch.schema.ts new file mode 100644 index 0000000..2809d2c --- /dev/null +++ b/packages/core/src/components/switch/switch.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-switch", description: "On/off toggle built on a button with role=switch", tier: 3, attributes: [{ name: "checked", type: "boolean", description: "Whether the switch is on" }, { name: "disabled", type: "boolean", description: "Disables the switch" }, { name: "name", type: "string", description: "Form field name" }], parts: [{ name: "control", element: "button", description: "The toggle button with role=switch" }, { name: "label", element: "span", description: "Label linked via aria-labelledby" }], events: [{ name: "petty-change", detail: "{ checked: boolean }", description: "Fires when the switch is toggled" }], example: `Dark mode` }; diff --git a/packages/core/src/components/switch/switch.ts b/packages/core/src/components/switch/switch.ts new file mode 100644 index 0000000..882a782 --- /dev/null +++ b/packages/core/src/components/switch/switch.ts @@ -0,0 +1,61 @@ +import { signal } from "../../signals"; +import { emit, listen, part, wireLabel } from "../../shared/helpers"; + +/** PettySwitch — on/off toggle built on a button with role="switch". */ +export class PettySwitch extends HTMLElement { + static observedAttributes = ["checked", "disabled", "name"]; + + readonly #checked = signal(false); + #cleanup = (): void => {}; + + get checked(): boolean { return this.#checked.get(); } + set checked(v: boolean) { this.#checked.set(v); this.#sync(); } + + connectedCallback(): void { + const btn = this.#button(); + if (!btn) return; + if (this.hasAttribute("checked")) this.#checked.set(true); + btn.setAttribute("role", "switch"); + wireLabel(btn, part(this, "label"), "petty-sw"); + this.#sync(); + this.#cleanup = listen(btn, [ + ["click", this.#handleClick], + ["keydown", this.#handleKeydown], + ]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "checked") this.#checked.set(next !== null); + this.#sync(); + } + + #button(): HTMLButtonElement | null { + return part(this, "control"); + } + + #sync(): void { + const btn = this.#button(); + if (!btn) return; + const on = this.#checked.get(); + btn.setAttribute("aria-checked", String(on)); + btn.disabled = this.hasAttribute("disabled"); + this.dataset.state = on ? "on" : "off"; + } + + #toggle(): void { + if (this.hasAttribute("disabled")) return; + this.#checked.set(!this.#checked.get()); + this.#sync(); + emit(this, "change", { checked: this.#checked.get() }); + } + + #handleClick = (): void => { this.#toggle(); }; + #handleKeydown = (e: Event): void => { + const ke = e as KeyboardEvent; + if (ke.key === " " || ke.key === "Enter") { ke.preventDefault(); this.#toggle(); } + }; +} diff --git a/packages/core/src/components/tabs/index.ts b/packages/core/src/components/tabs/index.ts new file mode 100644 index 0000000..9a59739 --- /dev/null +++ b/packages/core/src/components/tabs/index.ts @@ -0,0 +1,10 @@ +import { PettyTabs } from "./tabs"; +import { PettyTab } from "./tab"; +import { PettyTabPanel } from "./tab-panel"; +export { PettyTabs, PettyTab, PettyTabPanel }; + +if (!customElements.get("petty-tabs")) { + customElements.define("petty-tabs", PettyTabs); + customElements.define("petty-tab", PettyTab); + customElements.define("petty-tab-panel", PettyTabPanel); +} diff --git a/packages/core/src/components/tabs/tab-panel.ts b/packages/core/src/components/tabs/tab-panel.ts new file mode 100644 index 0000000..fcf3d83 --- /dev/null +++ b/packages/core/src/components/tabs/tab-panel.ts @@ -0,0 +1,15 @@ +/** PettyTabPanel — tab content panel managed by a parent petty-tabs element. */ +export class PettyTabPanel extends HTMLElement { + static observedAttributes = ["value"]; + + /** The value identifying this panel, matched against petty-tab. */ + get value(): string { + return this.getAttribute("value") ?? ""; + } + + /** @internal */ + connectedCallback(): void { + this.setAttribute("role", "tabpanel"); + if (!this.dataset.state) this.setAttribute("hidden", ""); + } +} diff --git a/packages/core/src/components/tabs/tab.ts b/packages/core/src/components/tabs/tab.ts new file mode 100644 index 0000000..25b3ad0 --- /dev/null +++ b/packages/core/src/components/tabs/tab.ts @@ -0,0 +1,75 @@ +/** + * PettyTab — individual tab button within a petty-tabs component. + * + * Sets role="tab", manages tabIndex, and delegates activation to the + * nearest petty-tabs ancestor via selectTab(). Supports ArrowLeft/Right + * keyboard navigation between sibling petty-tab elements. + */ +export class PettyTab extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + /** The value identifying this tab, matched against petty-tab-panel. */ + get value(): string { + return this.getAttribute("value") ?? ""; + } + + /** Whether this tab is disabled. */ + get disabled(): boolean { + return this.hasAttribute("disabled"); + } + + /** @internal */ + connectedCallback(): void { + this.setAttribute("role", "tab"); + this.setAttribute("tabindex", "-1"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + /** @internal */ + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + /** @internal */ + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "disabled") { + this.setAttribute("aria-disabled", next !== null ? "true" : "false"); + } + } + + #handleClick = (): void => { + if (this.disabled) return; + const tabs = this.#siblingTabs(); + const host = this.#host(); + if (host) host.selectTab(this.value); + const active = tabs.find(t => t.value === this.value); + active?.focus(); + }; + + #handleKeydown = (e: KeyboardEvent): void => { + if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return; + const tabs = this.#siblingTabs().filter(t => !t.disabled); + const idx = tabs.indexOf(this); + if (idx === -1) return; + const nextIdx = e.key === "ArrowRight" + ? (idx + 1) % tabs.length + : (idx - 1 + tabs.length) % tabs.length; + const next = tabs[nextIdx]; + if (!next) return; + const host = this.#host(); + if (host) host.selectTab(next.value); + next.focus(); + }; + + #siblingTabs(): PettyTab[] { + const list = this.closest("[role=tablist]") ?? this.closest("petty-tabs"); + if (!list) return []; + return Array.from(list.querySelectorAll("petty-tab")); + } + + #host(): { selectTab(v: string): void } | null { + return this.closest("petty-tabs") as { selectTab(v: string): void } | null; + } +} diff --git a/packages/core/src/components/tabs/tabs.schema.ts b/packages/core/src/components/tabs/tabs.schema.ts new file mode 100644 index 0000000..d14ce4d --- /dev/null +++ b/packages/core/src/components/tabs/tabs.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-tabs", description: "Headless tabbed interface with reactive tab/panel management", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently active tab value" }, { name: "default-value", type: "string", description: "Initial active tab value" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active tab changes" }], example: `
Tab 1Tab 2
Content 1Content 2` }; diff --git a/packages/core/src/components/tabs/tabs.ts b/packages/core/src/components/tabs/tabs.ts new file mode 100644 index 0000000..d72a9f6 --- /dev/null +++ b/packages/core/src/components/tabs/tabs.ts @@ -0,0 +1,85 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** + * PettyTabs — headless tabbed interface custom element. + * + * Usage: + * ```html + * + *
+ * Tab 1 + * Tab 2 + *
+ * Content 1 + * Content 2 + * + * ``` + * + * Manages active-tab state via a reactive signal and syncs data-state, + * aria-selected, and hidden attributes to child petty-tab / petty-tab-panel + * elements. Dispatches "petty-change" when the active tab changes. + */ +export class PettyTabs extends HTMLElement { + static observedAttributes = ["value", "default-value"]; + + readonly #active = signal(""); + #stopEffect: (() => void) | null = null; + + /** The currently active tab value. */ + get value(): string { + return this.#active.get(); + } + + /** Set the active tab programmatically. */ + set value(v: string) { + this.#active.set(v); + } + + /** Activates a tab by value and fires "petty-change". */ + selectTab(v: string): void { + if (this.#active.get() === v) return; + this.#active.set(v); + emit(this, "change", { value: v }); + } + + /** @internal */ + connectedCallback(): void { + const initial = this.getAttribute("default-value") ?? ""; + this.#active.set(initial); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + /** @internal */ + disconnectedCallback(): void { + this.#stopEffect = null; + } + + /** @internal */ + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#active.set(next); + } + + #syncChildren(): void { + const active = this.#active.get(); + const tabs = this.querySelectorAll("petty-tab"); + const panels = this.querySelectorAll("petty-tab-panel"); + + for (const tab of tabs) { + const isActive = tab.getAttribute("value") === active; + tab.dataset.state = isActive ? "active" : "inactive"; + tab.setAttribute("aria-selected", String(isActive)); + tab.setAttribute("tabindex", isActive ? "0" : "-1"); + } + + for (const panel of panels) { + const isActive = panel.getAttribute("value") === active; + panel.dataset.state = isActive ? "active" : "inactive"; + if (isActive) { + panel.removeAttribute("hidden"); + } else { + panel.setAttribute("hidden", ""); + } + } + } +} diff --git a/packages/core/src/components/tags-input/index.ts b/packages/core/src/components/tags-input/index.ts new file mode 100644 index 0000000..6888938 --- /dev/null +++ b/packages/core/src/components/tags-input/index.ts @@ -0,0 +1,6 @@ +import { PettyTagsInput } from "./tags-input"; +export { PettyTagsInput }; + +if (!customElements.get("petty-tags-input")) { + customElements.define("petty-tags-input", PettyTagsInput); +} diff --git a/packages/core/src/components/tags-input/tags-input.schema.ts b/packages/core/src/components/tags-input/tags-input.schema.ts new file mode 100644 index 0000000..64d84dd --- /dev/null +++ b/packages/core/src/components/tags-input/tags-input.schema.ts @@ -0,0 +1,22 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { + tag: "petty-tags-input", + description: "Multi-value text input for tags, emails, or labels with add/remove and keyboard support", + tier: 3, + attributes: [ + { name: "value", type: "string", description: "Comma-separated initial tags" }, + { name: "max", type: "number", description: "Maximum number of tags allowed" }, + { name: "disabled", type: "boolean", description: "Disables adding and removing tags" }, + { name: "name", type: "string", description: "Form field name for the hidden input" }, + ], + parts: [ + { name: "tags", element: "div", description: "Container for rendered tag elements" }, + { name: "tag", element: "span", description: "Individual tag with data-value attribute" }, + { name: "tag-remove", element: "button", description: "Remove button within each tag" }, + { name: "input", element: "input", description: "Text input for typing new tags" }, + { name: "hidden", element: "input", description: "Hidden input synced with comma-separated values" }, + ], + events: [{ name: "petty-change", detail: "{ value: string[] }", description: "Fires when tags are added or removed" }], + example: `\n
\n \n \n`, +}; diff --git a/packages/core/src/components/tags-input/tags-input.ts b/packages/core/src/components/tags-input/tags-input.ts new file mode 100644 index 0000000..fa136ec --- /dev/null +++ b/packages/core/src/components/tags-input/tags-input.ts @@ -0,0 +1,116 @@ +import { signal, effect } from "../../signals"; +import { emit } from "../../shared/helpers"; + +/** PettyTagsInput — multi-value text input for tags, emails, or tokens. */ +export class PettyTagsInput extends HTMLElement { + static observedAttributes = ["value", "max", "disabled", "name"]; + + readonly #tags = signal([]); + #stopEffect: (() => void) | null = null; + + get value(): string[] { return [...this.#tags.get()]; } + set value(v: string[]) { this.#tags.set([...v]); } + + /** Adds a tag if not duplicate and under max limit. */ + addTag(tag: string): boolean { + const trimmed = tag.trim(); + if (!trimmed) return false; + const current = this.#tags.get(); + if (current.includes(trimmed)) return false; + const max = this.getAttribute("max"); + if (max && current.length >= Number(max)) return false; + this.#tags.set([...current, trimmed]); + this.#dispatch(); + return true; + } + + /** Removes a tag by value. */ + removeTag(tag: string): void { + const current = this.#tags.get(); + const idx = current.indexOf(tag); + if (idx === -1) return; + const next = [...current]; + next.splice(idx, 1); + this.#tags.set(next); + this.#dispatch(); + } + + /** Clears all tags. */ + clear(): void { + this.#tags.set([]); + this.#dispatch(); + } + + connectedCallback(): void { + const init = this.getAttribute("value"); + if (init) this.#tags.set(init.split(",").map(s => s.trim()).filter(Boolean)); + this.#stopEffect = effect(() => this.#render()); + this.#input()?.addEventListener("keydown", this.#onKeydown); + this.addEventListener("click", this.#onTagRemove); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + this.#input()?.removeEventListener("keydown", this.#onKeydown); + this.removeEventListener("click", this.#onTagRemove); + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) { + this.#tags.set(next.split(",").map(s => s.trim()).filter(Boolean)); + } + } + + #input(): HTMLInputElement | null { return this.querySelector("input[data-part=input]"); } + + #dispatch(): void { + this.#syncHidden(); + emit(this, "change", { value: this.#tags.get() }); + } + + #syncHidden(): void { + const hidden = this.querySelector("input[data-part=hidden]"); + if (hidden instanceof HTMLInputElement) hidden.value = this.#tags.get().join(","); + } + + #onKeydown = (e: KeyboardEvent): void => { + if (this.hasAttribute("disabled")) return; + const input = this.#input(); + if (!input) return; + if (e.key === "Enter" || e.key === ",") { + e.preventDefault(); + if (this.addTag(input.value)) input.value = ""; + } else if (e.key === "Backspace" && input.value === "") { + const tags = this.#tags.get(); + const last = tags[tags.length - 1]; + if (last) this.removeTag(last); + } + }; + + #onTagRemove = (e: Event): void => { + const btn = (e.target as HTMLElement).closest("[data-part=tag-remove]"); + if (!btn) return; + const tag = btn.closest("[data-part=tag]"); + if (tag instanceof HTMLElement) this.removeTag(tag.dataset.value ?? ""); + }; + + #render(): void { + const tags = this.#tags.get(); + const container = this.querySelector("[data-part=tags]"); + if (!container) return; + container.replaceChildren(); + for (const tag of tags) { + const el = document.createElement("span"); + el.dataset.part = "tag"; + el.dataset.value = tag; + el.textContent = tag; + const btn = document.createElement("button"); + btn.dataset.part = "tag-remove"; + btn.setAttribute("aria-label", `Remove ${tag}`); + btn.textContent = "×"; + btn.type = "button"; + el.appendChild(btn); + container.appendChild(el); + } + } +} diff --git a/packages/core/src/components/text-field/index.ts b/packages/core/src/components/text-field/index.ts new file mode 100644 index 0000000..9c666ee --- /dev/null +++ b/packages/core/src/components/text-field/index.ts @@ -0,0 +1,6 @@ +import { PettyTextField } from "./text-field"; +export { PettyTextField }; + +if (!customElements.get("petty-text-field")) { + customElements.define("petty-text-field", PettyTextField); +} diff --git a/packages/core/src/components/text-field/text-field.schema.ts b/packages/core/src/components/text-field/text-field.schema.ts new file mode 100644 index 0000000..5d5bfdc --- /dev/null +++ b/packages/core/src/components/text-field/text-field.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-text-field", description: "Labeled text input with description, error wiring, and change events", tier: 3, attributes: [{ name: "name", type: "string", description: "Form field name" }, { name: "disabled", type: "boolean", description: "Disables the input" }, { name: "required", type: "boolean", description: "Marks the field as required" }], parts: [{ name: "control", element: "input", description: "The text input element" }, { name: "label", element: "label", description: "Label auto-linked to the input" }, { name: "description", element: "span", description: "Help text linked via aria-describedby" }, { name: "error", element: "span", description: "Error message linked via aria-describedby" }], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires on input change" }], example: `Your email address` }; diff --git a/packages/core/src/components/text-field/text-field.ts b/packages/core/src/components/text-field/text-field.ts new file mode 100644 index 0000000..173c141 --- /dev/null +++ b/packages/core/src/components/text-field/text-field.ts @@ -0,0 +1,71 @@ +import { uniqueId } from "../../shared/aria"; +import { emit } from "../../shared/helpers"; + +/** PettyTextField — labeled text input with description and error wiring. */ +export class PettyTextField extends HTMLElement { + static observedAttributes = ["name", "disabled", "required"]; + + connectedCallback(): void { + const name = this.getAttribute("name") ?? ""; + const controlId = uniqueId(`petty-tf-${name}`); + const errorId = `${controlId}-error`; + const descId = `${controlId}-desc`; + + const label = this.querySelector("[data-part=label]"); + const control = this.#control(); + const desc = this.querySelector("[data-part=description]"); + const error = this.querySelector("[data-part=error]"); + + if (control) { + control.id = controlId; + if (!control.getAttribute("name")) control.setAttribute("name", name); + const describedBy = [desc ? descId : "", error ? errorId : ""].filter(Boolean).join(" "); + if (describedBy) control.setAttribute("aria-describedby", describedBy); + } + if (label && control) (label as HTMLLabelElement).htmlFor = controlId; + if (desc) desc.id = descId; + if (error) error.id = errorId; + + this.#syncAttrs(); + control?.addEventListener("input", this.#handleInput); + } + + disconnectedCallback(): void { + this.#control()?.removeEventListener("input", this.#handleInput); + } + + attributeChangedCallback(): void { + this.#syncAttrs(); + } + + /** Display an error message on this field. */ + setError(message: string): void { + const error = this.querySelector("[data-part=error]"); + const control = this.#control(); + if (error) error.textContent = message; + if (control) control.setAttribute("aria-invalid", "true"); + } + + /** Clear the error message on this field. */ + clearError(): void { + const error = this.querySelector("[data-part=error]"); + const control = this.#control(); + if (error) error.textContent = ""; + if (control) control.removeAttribute("aria-invalid"); + } + + #control(): HTMLInputElement | null { + return this.querySelector("input[data-part=control]"); + } + + #syncAttrs(): void { + const control = this.#control(); + if (!control) return; + control.disabled = this.hasAttribute("disabled"); + control.required = this.hasAttribute("required"); + } + + #handleInput = (): void => { + emit(this, "change", { value: this.#control()?.value ?? "" }); + }; +} diff --git a/packages/core/src/components/toast/index.ts b/packages/core/src/components/toast/index.ts new file mode 100644 index 0000000..2972056 --- /dev/null +++ b/packages/core/src/components/toast/index.ts @@ -0,0 +1,6 @@ +import { toast, PettyToastRegion } from "./toast"; +export { toast, PettyToastRegion }; + +if (!customElements.get("petty-toast-region")) { + customElements.define("petty-toast-region", PettyToastRegion); +} diff --git a/packages/core/src/components/toast/toast.schema.ts b/packages/core/src/components/toast/toast.schema.ts new file mode 100644 index 0000000..72cec21 --- /dev/null +++ b/packages/core/src/components/toast/toast.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toast-region", description: "Container that renders active toast notifications with auto-dismiss", tier: 3, attributes: [{ name: "position", type: "string", description: "Position of the toast region on screen" }], parts: [{ name: "toast", element: "div", description: "Individual toast container" }, { name: "toast-title", element: "div", description: "Toast title text" }, { name: "toast-description", element: "div", description: "Toast description text" }, { name: "toast-close", element: "button", description: "Dismiss button for the toast" }], events: [], example: `` }; diff --git a/packages/core/src/components/toast/toast.ts b/packages/core/src/components/toast/toast.ts new file mode 100644 index 0000000..c0f1ad3 --- /dev/null +++ b/packages/core/src/components/toast/toast.ts @@ -0,0 +1,98 @@ +import { signal, effect } from "../../signals"; + +interface ToastData { + id: string; + title: string; + type: string; + description: string; + duration: number; +} + +const toasts = signal([]); +let nextId = 0; + +/** Creates a toast notification. Returns the toast ID. */ +export function toast(title: string, options?: { type?: string; description?: string; duration?: number }): string { + const id = `petty-toast-${nextId++}`; + const entry: ToastData = { + id, + title, + type: options?.type ?? "default", + description: options?.description ?? "", + duration: options?.duration ?? 5000, + }; + toasts.set([...toasts.get(), entry]); + setTimeout(() => { toast.dismiss(id); }, entry.duration); + return id; +} + +/** Creates a success toast. */ +toast.success = (title: string, options?: { description?: string; duration?: number }): string => + toast(title, { ...options, type: "success" }); + +/** Creates an error toast. */ +toast.error = (title: string, options?: { description?: string; duration?: number }): string => + toast(title, { ...options, type: "error" }); + +/** Dismisses a toast by ID. */ +toast.dismiss = (id: string): void => { + toasts.set(toasts.get().filter((t) => t.id !== id)); +}; + +/** PettyToastRegion — container that renders active toast notifications. */ +export class PettyToastRegion extends HTMLElement { + static get observedAttributes(): string[] { return ["position"]; } + + /** @internal */ + connectedCallback(): void { + this.setAttribute("role", "region"); + this.setAttribute("aria-live", "polite"); + this.setAttribute("aria-label", "Notifications"); + effect(() => { this.#render(toasts.get()); }); + } + + #createToastElement(item: ToastData): HTMLElement { + const el = document.createElement("div"); + el.dataset.toastId = item.id; + el.dataset.type = item.type; + el.setAttribute("role", "status"); + el.dataset.part = "toast"; + + const title = document.createElement("div"); + title.dataset.part = "toast-title"; + title.textContent = item.title; + el.appendChild(title); + + if (item.description) { + const desc = document.createElement("div"); + desc.dataset.part = "toast-description"; + desc.textContent = item.description; + el.appendChild(desc); + } + + const close = document.createElement("button"); + close.dataset.part = "toast-close"; + close.textContent = "×"; + close.setAttribute("aria-label", "Dismiss"); + close.addEventListener("click", () => { toast.dismiss(item.id); }); + el.appendChild(close); + + return el; + } + + #render(items: ToastData[]): void { + const existing = new Map(); + for (const child of Array.from(this.children)) { + const el = child as HTMLElement; + const id = el.dataset.toastId; + if (id) existing.set(id, el); + } + + for (const item of items) { + if (existing.has(item.id)) { existing.delete(item.id); continue; } + this.appendChild(this.#createToastElement(item)); + } + + for (const el of existing.values()) el.remove(); + } +} diff --git a/packages/core/src/components/toggle-group/index.ts b/packages/core/src/components/toggle-group/index.ts new file mode 100644 index 0000000..4b8a461 --- /dev/null +++ b/packages/core/src/components/toggle-group/index.ts @@ -0,0 +1,8 @@ +import { PettyToggleGroup } from "./toggle-group"; +import { PettyToggleGroupItem } from "./toggle-group-item"; +export { PettyToggleGroup, PettyToggleGroupItem }; + +if (!customElements.get("petty-toggle-group")) { + customElements.define("petty-toggle-group", PettyToggleGroup); + customElements.define("petty-toggle-group-item", PettyToggleGroupItem); +} diff --git a/packages/core/src/components/toggle-group/toggle-group-item.ts b/packages/core/src/components/toggle-group/toggle-group-item.ts new file mode 100644 index 0000000..594d9cc --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group-item.ts @@ -0,0 +1,59 @@ +import { wrapIndex } from "../../shared/keyboard"; + +/** PettyToggleGroupItem — single item within a toggle group. */ +export class PettyToggleGroupItem extends HTMLElement { + static observedAttributes = ["value", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? ""; } + get disabled(): boolean { return this.hasAttribute("disabled"); } + + connectedCallback(): void { + this.setAttribute("role", "button"); + this.setAttribute("tabindex", "0"); + if (this.disabled) this.setAttribute("aria-disabled", "true"); + this.addEventListener("click", this.#handleClick); + this.addEventListener("keydown", this.#handleKeydown); + } + + disconnectedCallback(): void { + this.removeEventListener("click", this.#handleClick); + this.removeEventListener("keydown", this.#handleKeydown); + } + + attributeChangedCallback(name: string): void { + if (name === "disabled") this.setAttribute("aria-disabled", String(this.disabled)); + } + + #group(): { toggleValue(v: string): void } | null { + return this.closest("petty-toggle-group") as { toggleValue(v: string): void } | null; + } + + #siblings(): PettyToggleGroupItem[] { + const group = this.closest("petty-toggle-group"); + if (!group) return []; + return Array.from(group.querySelectorAll("petty-toggle-group-item:not([disabled])")); + } + + #handleClick = (): void => { + if (this.disabled) return; + this.#group()?.toggleValue(this.value); + }; + + #handleKeydown = (e: KeyboardEvent): void => { + if (e.key === " " || e.key === "Enter") { + e.preventDefault(); + this.#handleClick(); + return; + } + const isHorizontal = this.closest("petty-toggle-group")?.getAttribute("orientation") !== "vertical"; + const prev = isHorizontal ? "ArrowLeft" : "ArrowUp"; + const next = isHorizontal ? "ArrowRight" : "ArrowDown"; + if (e.key !== prev && e.key !== next) return; + e.preventDefault(); + const items = this.#siblings(); + const idx = items.indexOf(this); + if (idx === -1) return; + const delta = e.key === next ? 1 : -1; + items[wrapIndex(idx, delta, items.length)]?.focus(); + }; +} diff --git a/packages/core/src/components/toggle-group/toggle-group.schema.ts b/packages/core/src/components/toggle-group/toggle-group.schema.ts new file mode 100644 index 0000000..e315881 --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toggle-group", description: "Single or multi-selection toggle group with keyboard navigation", tier: 3, attributes: [{ name: "type", type: "string", default: "single", description: "Selection mode: single or multiple" }, { name: "value", type: "string", description: "Active value (comma-separated for multiple)" }, { name: "default-value", type: "string", description: "Initial active value" }, { name: "orientation", type: "string", default: "horizontal", description: "Layout orientation: horizontal or vertical" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active toggle value changes" }], example: `LeftCenterRight` }; diff --git a/packages/core/src/components/toggle-group/toggle-group.ts b/packages/core/src/components/toggle-group/toggle-group.ts new file mode 100644 index 0000000..02c2be6 --- /dev/null +++ b/packages/core/src/components/toggle-group/toggle-group.ts @@ -0,0 +1,57 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyToggleGroup — single or multi-selection toggle group with keyboard nav. */ +export class PettyToggleGroup extends HTMLElement { + static observedAttributes = ["type", "value", "default-value", "orientation"]; + + readonly #value = signal(""); + #stopEffect: (() => void) | null = null; + + get type(): "single" | "multiple" { + return this.getAttribute("type") === "multiple" ? "multiple" : "single"; + } + + get value(): string { return this.#value.get(); } + set value(v: string) { this.#value.set(v); } + + /** Toggles a value: for single mode replaces, for multiple mode adds/removes. */ + toggleValue(v: string): void { + if (this.type === "single") { + this.#value.set(v); + } else { + const current = this.#value.get().split(",").filter(Boolean); + const idx = current.indexOf(v); + if (idx >= 0) current.splice(idx, 1); + else current.push(v); + this.#value.set(current.join(",")); + } + emit(this, "change", { value: this.#value.get() }); + } + + connectedCallback(): void { + this.setAttribute("role", "group"); + const init = initialValue(this); + if (init) this.#value.set(init); + this.#stopEffect = effect(() => this.#syncChildren()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#value.set(next); + } + + #syncChildren(): void { + const active = this.#value.get(); + const activeSet = new Set(active.split(",").filter(Boolean)); + const items = this.querySelectorAll("petty-toggle-group-item"); + for (const item of items) { + const isOn = activeSet.has(item.getAttribute("value") ?? ""); + item.dataset.state = isOn ? "on" : "off"; + item.setAttribute("aria-pressed", String(isOn)); + } + } +} diff --git a/packages/core/src/components/toggle/index.ts b/packages/core/src/components/toggle/index.ts new file mode 100644 index 0000000..ed2413f --- /dev/null +++ b/packages/core/src/components/toggle/index.ts @@ -0,0 +1,6 @@ +import { PettyToggle } from "./toggle"; +export { PettyToggle }; + +if (!customElements.get("petty-toggle")) { + customElements.define("petty-toggle", PettyToggle); +} diff --git a/packages/core/src/components/toggle/toggle.schema.ts b/packages/core/src/components/toggle/toggle.schema.ts new file mode 100644 index 0000000..784bead --- /dev/null +++ b/packages/core/src/components/toggle/toggle.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-toggle", description: "Pressed/unpressed toggle button with aria-pressed", tier: 3, attributes: [{ name: "pressed", type: "boolean", description: "Whether the toggle is in pressed state" }, { name: "disabled", type: "boolean", description: "Disables the toggle" }], parts: [{ name: "control", element: "button", description: "The toggle button element" }], events: [{ name: "petty-change", detail: "{ pressed: boolean }", description: "Fires when the toggle state changes" }], example: `` }; diff --git a/packages/core/src/components/toggle/toggle.ts b/packages/core/src/components/toggle/toggle.ts new file mode 100644 index 0000000..a655be1 --- /dev/null +++ b/packages/core/src/components/toggle/toggle.ts @@ -0,0 +1,47 @@ +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyToggle — pressed/unpressed toggle button with aria-pressed. */ +export class PettyToggle extends HTMLElement { + static observedAttributes = ["pressed", "disabled"]; + + #cleanup = (): void => {}; + + get pressed(): boolean { return this.hasAttribute("pressed"); } + set pressed(v: boolean) { + if (v) this.setAttribute("pressed", ""); + else this.removeAttribute("pressed"); + } + + connectedCallback(): void { + const btn = this.#button(); + if (!btn) return; + this.#sync(); + this.#cleanup = listen(btn, [["click", this.#handleClick]]); + } + + disconnectedCallback(): void { + this.#cleanup(); + } + + attributeChangedCallback(): void { + this.#sync(); + } + + #button(): HTMLButtonElement | null { + return part(this, "control"); + } + + #sync(): void { + const btn = this.#button(); + if (!btn) return; + btn.setAttribute("aria-pressed", String(this.pressed)); + btn.disabled = this.hasAttribute("disabled"); + this.dataset.state = this.pressed ? "on" : "off"; + } + + #handleClick = (): void => { + if (this.hasAttribute("disabled")) return; + this.pressed = !this.pressed; + emit(this, "change", { pressed: this.pressed }); + }; +} diff --git a/packages/core/src/components/tooltip/index.ts b/packages/core/src/components/tooltip/index.ts new file mode 100644 index 0000000..f8c3467 --- /dev/null +++ b/packages/core/src/components/tooltip/index.ts @@ -0,0 +1,6 @@ +import { PettyTooltip } from "./tooltip"; +export { PettyTooltip }; + +if (!customElements.get("petty-tooltip")) { + customElements.define("petty-tooltip", PettyTooltip); +} diff --git a/packages/core/src/components/tooltip/tooltip.schema.ts b/packages/core/src/components/tooltip/tooltip.schema.ts new file mode 100644 index 0000000..fe96251 --- /dev/null +++ b/packages/core/src/components/tooltip/tooltip.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-tooltip", description: "Hover/focus label using Popover API with configurable delay and ARIA linking", tier: 2, attributes: [{ name: "delay", type: "number", default: "200", description: "Delay in ms before showing the tooltip" }], parts: [{ name: "trigger", element: "button", description: "Element that triggers the tooltip on hover/focus" }, { name: "content", element: "div", description: "Popover tooltip content linked via aria-describedby" }], events: [{ name: "petty-toggle", detail: "{ open: boolean }", description: "Fires when the tooltip opens or closes" }], example: `
Tooltip text
` }; diff --git a/packages/core/src/components/tooltip/tooltip.ts b/packages/core/src/components/tooltip/tooltip.ts new file mode 100644 index 0000000..97bb815 --- /dev/null +++ b/packages/core/src/components/tooltip/tooltip.ts @@ -0,0 +1,58 @@ +import { uniqueId } from "../../shared/aria"; +import { emit, listen, part } from "../../shared/helpers"; + +/** PettyTooltip — hover/focus label using Popover API with delay and ARIA linking. */ +export class PettyTooltip extends HTMLElement { + static observedAttributes = ["delay"]; + + #showTimer: ReturnType | null = null; + #hideTimer: ReturnType | null = null; + #cleanup: (() => void) | null = null; + + connectedCallback(): void { + const trigger = part(this, "trigger"); + const content = part(this, "content"); + if (!trigger || !content) return; + if (!content.id) content.id = uniqueId("petty-tooltip"); + trigger.setAttribute("aria-describedby", content.id); + this.#cleanup = listen(trigger, [ + ["mouseenter", this.#onEnter], + ["mouseleave", this.#onLeave], + ["focus", this.#onEnter], + ["blur", this.#onLeave], + ]); + } + + disconnectedCallback(): void { + this.#cleanup?.(); + this.#cleanup = null; + this.#clearTimers(); + } + + #delay(): number { + return Number(this.getAttribute("delay") ?? 200); + } + + #clearTimers(): void { + if (this.#showTimer) { clearTimeout(this.#showTimer); this.#showTimer = null; } + if (this.#hideTimer) { clearTimeout(this.#hideTimer); this.#hideTimer = null; } + } + + #onEnter = (): void => { + this.#clearTimers(); + this.#showTimer = setTimeout(() => { + const content = part(this, "content"); + if (content && !content.matches(":popover-open")) content.showPopover(); + emit(this, "toggle", { open: true }); + }, this.#delay()); + }; + + #onLeave = (): void => { + this.#clearTimers(); + this.#hideTimer = setTimeout(() => { + const content = part(this, "content"); + if (content && content.matches(":popover-open")) content.hidePopover(); + emit(this, "toggle", { open: false }); + }, 100); + }; +} diff --git a/packages/core/src/components/typewriter/index.ts b/packages/core/src/components/typewriter/index.ts new file mode 100644 index 0000000..2460cb2 --- /dev/null +++ b/packages/core/src/components/typewriter/index.ts @@ -0,0 +1,6 @@ +import { PettyTypewriter } from "./typewriter"; +export { PettyTypewriter }; + +if (!customElements.get("petty-typewriter")) { + customElements.define("petty-typewriter", PettyTypewriter); +} diff --git a/packages/core/src/components/typewriter/typewriter.ts b/packages/core/src/components/typewriter/typewriter.ts new file mode 100644 index 0000000..414bade --- /dev/null +++ b/packages/core/src/components/typewriter/typewriter.ts @@ -0,0 +1,63 @@ +import { emit } from "../../shared/helpers"; + +/** PettyTypewriter — reveals text character by character with configurable speed. */ +export class PettyTypewriter extends HTMLElement { + static observedAttributes = ["speed", "delay", "cursor"]; + + #text = ""; + #index = 0; + #timer: ReturnType | null = null; + + get speed(): number { return Number(this.getAttribute("speed") ?? 50); } + get delay(): number { return Number(this.getAttribute("delay") ?? 0); } + + /** Starts the typewriter animation from the beginning. */ + start(): void { + this.#index = 0; + this.#tick(); + } + + /** Resets to empty and stops animation. */ + reset(): void { + this.#stop(); + this.#index = 0; + this.#updateDisplay(); + } + + connectedCallback(): void { + this.#text = this.textContent?.trim() ?? ""; + this.textContent = ""; + this.dataset.state = "idle"; + if (this.hasAttribute("cursor")) this.classList.add("petty-typewriter-cursor"); + const startDelay = this.delay; + if (startDelay > 0) { + this.#timer = setTimeout(() => this.start(), startDelay); + } else { + this.start(); + } + } + + disconnectedCallback(): void { + this.#stop(); + } + + #stop(): void { + if (this.#timer) { clearTimeout(this.#timer); this.#timer = null; } + } + + #tick(): void { + this.dataset.state = "typing"; + if (this.#index <= this.#text.length) { + this.#updateDisplay(); + this.#index++; + this.#timer = setTimeout(() => this.#tick(), this.speed); + } else { + this.dataset.state = "done"; + emit(this, "complete", {}); + } + } + + #updateDisplay(): void { + this.textContent = this.#text.slice(0, this.#index); + } +} diff --git a/packages/core/src/components/virtual-list/index.ts b/packages/core/src/components/virtual-list/index.ts new file mode 100644 index 0000000..a49b086 --- /dev/null +++ b/packages/core/src/components/virtual-list/index.ts @@ -0,0 +1,6 @@ +import { PettyVirtualList } from "./virtual-list"; +export { PettyVirtualList }; + +if (!customElements.get("petty-virtual-list")) { + customElements.define("petty-virtual-list", PettyVirtualList); +} diff --git a/packages/core/src/components/virtual-list/virtual-list.schema.ts b/packages/core/src/components/virtual-list/virtual-list.schema.ts new file mode 100644 index 0000000..f209da1 --- /dev/null +++ b/packages/core/src/components/virtual-list/virtual-list.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-virtual-list", description: "Windowed scroll rendering only visible items plus overscan for performance", tier: 3, attributes: [{ name: "item-height", type: "number", default: "40", description: "Fixed height in pixels for each item row" }, { name: "overscan", type: "number", default: "5", description: "Number of extra items to render above and below the visible area" }], parts: [], events: [{ name: "petty-scroll", detail: "{ startIndex: number, endIndex: number }", description: "Fires on scroll with the range of currently rendered item indices" }], example: `` }; diff --git a/packages/core/src/components/virtual-list/virtual-list.ts b/packages/core/src/components/virtual-list/virtual-list.ts new file mode 100644 index 0000000..7725abf --- /dev/null +++ b/packages/core/src/components/virtual-list/virtual-list.ts @@ -0,0 +1,66 @@ +import { emit } from "../../shared/helpers"; + +/** PettyVirtualList — windowed scroll rendering only visible items plus overscan. */ +export class PettyVirtualList extends HTMLElement { + static observedAttributes = ["item-height", "overscan"]; + + #items: unknown[] = []; + #renderFn: ((item: unknown, index: number) => HTMLElement) | null = null; + #spacer: HTMLDivElement | null = null; + #viewport: HTMLDivElement | null = null; + + /** Sets the data items and render function, then triggers a render. */ + setItems(items: unknown[], renderItem: (item: unknown, index: number) => HTMLElement): void { + this.#items = items; + this.#renderFn = renderItem; + this.#update(); + } + + connectedCallback(): void { + this.setAttribute("role", "list"); + this.style.overflow = "auto"; + this.style.position = "relative"; + this.#spacer = document.createElement("div"); + this.#spacer.style.position = "relative"; + this.appendChild(this.#spacer); + this.#viewport = document.createElement("div"); + const vpStyle = this.#viewport.style; + vpStyle.position = "absolute"; + vpStyle.top = "0"; + vpStyle.left = "0"; + vpStyle.right = "0"; + this.appendChild(this.#viewport); + this.addEventListener("scroll", this.#onScroll); + } + + disconnectedCallback(): void { + this.removeEventListener("scroll", this.#onScroll); + } + + #itemHeight(): number { return Number(this.getAttribute("item-height") ?? 40); } + #overscan(): number { return Number(this.getAttribute("overscan") ?? 5); } + + #onScroll = (): void => { this.#update(); }; + + #update(): void { + const spacer = this.#spacer; + const viewport = this.#viewport; + if (!spacer || !viewport || !this.#renderFn) return; + const ih = this.#itemHeight(); + const total = this.#items.length; + spacer.style.height = `${total * ih}px`; + const overscan = this.#overscan(); + const startIdx = Math.max(0, Math.floor(this.scrollTop / ih) - overscan); + const endIdx = Math.min(total, Math.ceil((this.scrollTop + this.clientHeight) / ih) + overscan); + viewport.style.top = `${startIdx * ih}px`; + const fragment = document.createDocumentFragment(); + for (let i = startIdx; i < endIdx; i++) { + const el = this.#renderFn(this.#items[i], i); + el.setAttribute("role", "listitem"); + el.style.height = `${ih}px`; + fragment.appendChild(el); + } + viewport.replaceChildren(fragment); + emit(this, "scroll", { startIndex: startIdx, endIndex: endIdx }); + } +} diff --git a/packages/core/src/components/wizard/index.ts b/packages/core/src/components/wizard/index.ts new file mode 100644 index 0000000..11d031a --- /dev/null +++ b/packages/core/src/components/wizard/index.ts @@ -0,0 +1,8 @@ +import { PettyWizard } from "./wizard"; +import { PettyWizardStep } from "./wizard-step"; +export { PettyWizard, PettyWizardStep }; + +if (!customElements.get("petty-wizard")) { + customElements.define("petty-wizard", PettyWizard); + customElements.define("petty-wizard-step", PettyWizardStep); +} diff --git a/packages/core/src/components/wizard/wizard-step.ts b/packages/core/src/components/wizard/wizard-step.ts new file mode 100644 index 0000000..421d13f --- /dev/null +++ b/packages/core/src/components/wizard/wizard-step.ts @@ -0,0 +1,17 @@ +/** PettyWizardStep — single step within a wizard flow. */ +export class PettyWizardStep extends HTMLElement { + static observedAttributes = ["value", "label", "disabled"]; + + get value(): string { return this.getAttribute("value") ?? ""; } + get label(): string { return this.getAttribute("label") ?? ""; } + + connectedCallback(): void { + this.setAttribute("role", "tabpanel"); + if (this.label) this.setAttribute("aria-label", this.label); + this.setAttribute("hidden", ""); + } + + attributeChangedCallback(name: string): void { + if (name === "label" && this.label) this.setAttribute("aria-label", this.label); + } +} diff --git a/packages/core/src/components/wizard/wizard.schema.ts b/packages/core/src/components/wizard/wizard.schema.ts new file mode 100644 index 0000000..7d1e1c2 --- /dev/null +++ b/packages/core/src/components/wizard/wizard.schema.ts @@ -0,0 +1,3 @@ +import type { ComponentMeta } from "../../schema"; + +export const schema: ComponentMeta = { tag: "petty-wizard", description: "Multi-step flow with navigation between sequential steps", tier: 3, attributes: [{ name: "value", type: "string", description: "Currently active step value" }, { name: "default-value", type: "string", description: "Initial active step value" }], parts: [], events: [{ name: "petty-change", detail: "{ value: string }", description: "Fires when the active step changes" }], example: `Step 1 contentStep 2 content` }; diff --git a/packages/core/src/components/wizard/wizard.ts b/packages/core/src/components/wizard/wizard.ts new file mode 100644 index 0000000..2055578 --- /dev/null +++ b/packages/core/src/components/wizard/wizard.ts @@ -0,0 +1,73 @@ +import { signal, effect } from "../../signals"; +import { emit, initialValue } from "../../shared/helpers"; + +/** PettyWizard — multi-step flow with navigation between steps. */ +export class PettyWizard extends HTMLElement { + static observedAttributes = ["value", "default-value"]; + + readonly #current = signal(""); + #stopEffect: (() => void) | null = null; + + get value(): string { return this.#current.get(); } + set value(v: string) { this.#current.set(v); } + + /** Navigates to the next step. */ + next(): void { + const steps = this.#steps(); + const idx = steps.findIndex(s => s.getAttribute("value") === this.#current.get()); + const nextStep = steps[idx + 1]; + if (idx < steps.length - 1 && nextStep) this.#goTo(nextStep.getAttribute("value") ?? ""); + } + + /** Navigates to the previous step. */ + prev(): void { + const steps = this.#steps(); + const idx = steps.findIndex(s => s.getAttribute("value") === this.#current.get()); + const prevStep = steps[idx - 1]; + if (idx > 0 && prevStep) this.#goTo(prevStep.getAttribute("value") ?? ""); + } + + /** Navigates to a specific step by value. */ + goTo(v: string): void { this.#goTo(v); } + + connectedCallback(): void { + const init = initialValue(this); + if (init) this.#current.set(init); + else { + const first = this.#steps()[0]; + if (first) this.#current.set(first.getAttribute("value") ?? ""); + } + this.#stopEffect = effect(() => this.#syncSteps()); + } + + disconnectedCallback(): void { + this.#stopEffect = null; + } + + attributeChangedCallback(name: string, _old: string | null, next: string | null): void { + if (name === "value" && next !== null) this.#current.set(next); + } + + #steps(): HTMLElement[] { + return Array.from(this.querySelectorAll("petty-wizard-step")); + } + + #goTo(v: string): void { + this.#current.set(v); + emit(this, "change", { value: v }); + } + + #syncSteps(): void { + const active = this.#current.get(); + const steps = this.#steps(); + let foundActive = false; + for (const step of steps) { + const val = step.getAttribute("value") ?? ""; + const isActive = val === active; + if (isActive) foundActive = true; + step.dataset.state = isActive ? "active" : foundActive ? "upcoming" : "complete"; + if (isActive) step.removeAttribute("hidden"); + else step.setAttribute("hidden", ""); + } + } +} diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts new file mode 100644 index 0000000..48892b6 --- /dev/null +++ b/packages/core/src/router.ts @@ -0,0 +1,46 @@ +/** Options for configuring the PettyUI SPA router. */ +export interface RouterOptions { + /** CSS selector for the outlet element where page content is swapped. */ + outlet?: string; + /** Header sent with partial requests so the server can return fragments. */ + partialHeader?: string; +} + +/** Safely replaces an element's children with parsed HTML from a trusted same-origin response. */ +function replaceChildren(outlet: Element, html: string): void { + const parser = new DOMParser(); + const doc = parser.parseFromString(html, "text/html"); + outlet.replaceChildren(...Array.from(doc.body.childNodes)); +} + +/** Swaps outlet content, using View Transitions if available. */ +function swapContent(outlet: Element, html: string): void { + if (document.startViewTransition) { + document.startViewTransition(() => replaceChildren(outlet, html)); + } else { + replaceChildren(outlet, html); + } +} + +/** Initializes SPA routing using the Navigation API and View Transitions. */ +export function initRouter(options?: RouterOptions): void { + const selector = options?.outlet ?? "[data-petty-outlet]"; + const header = options?.partialHeader ?? "X-Partial"; + + navigation.addEventListener("navigate", (event: NavigateEvent) => { + const url = new URL(event.destination.url); + if (url.origin !== location.origin) return; + if (event.hashChange) return; + if (event.downloadRequest) return; + + event.intercept({ + async handler() { + const res = await fetch(url.pathname + url.search, { headers: { [header]: "true" } }); + const html = await res.text(); + const outlet = document.querySelector(selector); + if (!outlet) return; + swapContent(outlet, html); + }, + }); + }); +} diff --git a/packages/core/src/schema.ts b/packages/core/src/schema.ts new file mode 100644 index 0000000..3aa94fe --- /dev/null +++ b/packages/core/src/schema.ts @@ -0,0 +1,10 @@ +import { z } from "zod/v4"; + +const strLit = (...vals: string[]) => vals.length === 1 ? z.literal(vals[0]!) : z.union(vals.map(v => z.literal(v)) as [z.ZodLiteral, z.ZodLiteral, ...z.ZodLiteral[]]); + +export const attributeSchema = z.object({ name: z.string(), type: strLit("string", "boolean", "number"), default: z.string().optional(), description: z.string() }); +export const partSchema = z.object({ name: z.string(), element: z.string(), description: z.string() }); +export const eventSchema = z.object({ name: z.string(), detail: z.string(), description: z.string() }); +export const componentSchema = z.object({ tag: z.string(), description: z.string(), tier: z.union([z.literal(1), z.literal(2), z.literal(3)]), attributes: z.array(attributeSchema), parts: z.array(partSchema), events: z.array(eventSchema), example: z.string() }); + +export type ComponentMeta = z.infer; diff --git a/packages/core/src/shared/aria.ts b/packages/core/src/shared/aria.ts new file mode 100644 index 0000000..a9f76a1 --- /dev/null +++ b/packages/core/src/shared/aria.ts @@ -0,0 +1,18 @@ +let counter = 0; + +/** Generates a unique ID with the given prefix. */ +export function uniqueId(prefix: string): string { + return `${prefix}-${counter++}`; +} + +/** Links an element to a label element via aria-labelledby. */ +export function linkLabel(element: HTMLElement, labelElement: HTMLElement): void { + if (!labelElement.id) labelElement.id = uniqueId("petty-label"); + element.setAttribute("aria-labelledby", labelElement.id); +} + +/** Links an element to a description element via aria-describedby. */ +export function linkDescription(element: HTMLElement, descElement: HTMLElement): void { + if (!descElement.id) descElement.id = uniqueId("petty-desc"); + element.setAttribute("aria-describedby", descElement.id); +} diff --git a/packages/core/src/shared/helpers.ts b/packages/core/src/shared/helpers.ts new file mode 100644 index 0000000..e5940d1 --- /dev/null +++ b/packages/core/src/shared/helpers.ts @@ -0,0 +1,33 @@ +/** Queries a child element by data-part attribute. */ +export function part(host: HTMLElement, name: string): T | null { + return host.querySelector(`[data-part="${name}"]`); +} + +/** Dispatches a bubbling petty-prefixed CustomEvent. */ +export function emit(host: HTMLElement, name: string, detail: Record): void { + host.dispatchEvent(new CustomEvent(`petty-${name}`, { bubbles: true, detail })); +} + +/** Reads default-value or value attribute, returning empty string if neither set. */ +export function initialValue(host: HTMLElement): string { + return host.getAttribute("default-value") ?? host.getAttribute("value") ?? ""; +} + +/** Attaches event listeners and returns a cleanup function that removes them all. */ +export function listen( + el: EventTarget | null, + pairs: Array<[string, EventListenerOrEventListenerObject]>, +): () => void { + if (!el) return () => {}; + for (const [evt, fn] of pairs) el.addEventListener(evt, fn); + return () => { for (const [evt, fn] of pairs) el.removeEventListener(evt, fn); }; +} + +/** Wires a label element's htmlFor to a control's id, generating an id if needed. */ +export function wireLabel(control: HTMLElement, label: HTMLElement | null, prefix: string): void { + if (!label) return; + if (!control.id) control.id = `${prefix}-${wireLabel.n++}`; + if ("htmlFor" in label) (label as HTMLLabelElement).htmlFor = control.id; + else label.setAttribute("aria-labelledby", control.id); +} +wireLabel.n = 0; diff --git a/packages/core/src/shared/keyboard.ts b/packages/core/src/shared/keyboard.ts new file mode 100644 index 0000000..f1d3140 --- /dev/null +++ b/packages/core/src/shared/keyboard.ts @@ -0,0 +1,38 @@ +/** Wraps an index circularly within a range. */ +export function wrapIndex(current: number, delta: number, length: number): number { + return ((current + delta) % length + length) % length; +} + +/** Moves focus between items on Arrow/Home/End keys. */ +export function handleArrowNav( + e: KeyboardEvent, + items: HTMLElement[], + opts?: { orientation?: "horizontal" | "vertical"; loop?: boolean }, +): void { + const len = items.length; + if (len === 0) return; + + const orientation = opts?.orientation ?? "horizontal"; + const loop = opts?.loop ?? true; + const prev = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp"; + const next = orientation === "horizontal" ? "ArrowRight" : "ArrowDown"; + + let idx = items.indexOf(document.activeElement as HTMLElement); + if (idx === -1) idx = 0; + + if (e.key === next) { + e.preventDefault(); + const target = loop ? wrapIndex(idx, 1, len) : Math.min(idx + 1, len - 1); + items[target]?.focus(); + } else if (e.key === prev) { + e.preventDefault(); + const target = loop ? wrapIndex(idx, -1, len) : Math.max(idx - 1, 0); + items[target]?.focus(); + } else if (e.key === "Home") { + e.preventDefault(); + items[0]?.focus(); + } else if (e.key === "End") { + e.preventDefault(); + items[len - 1]?.focus(); + } +} diff --git a/packages/core/src/signals.ts b/packages/core/src/signals.ts new file mode 100644 index 0000000..4448dde --- /dev/null +++ b/packages/core/src/signals.ts @@ -0,0 +1,26 @@ +/** Current effect being tracked for automatic dependency subscription. */ +let current: (() => void) | null = null; + +/** Reactive signal that notifies subscribers when its value changes. */ +export interface Signal { + /** Read the current value. Auto-subscribes the active effect. */ + get(): T; + /** Write a new value. Notifies all subscribed effects. */ + set(value: T): void; +} + +/** Creates a reactive signal with an initial value. */ +export function signal(initial: T): Signal { + const subs = new Set<() => void>(); + let value = initial; + const get = (): T => { if (current) subs.add(current); return value; }; + const set = (v: T): void => { if (v === value) return; value = v; for (const fn of subs) fn(); }; + return { get, set }; +} + +/** Runs a function and re-runs it whenever its signal dependencies change. */ +export function effect(fn: () => void): () => void { + const run = (): void => { const prev = current; current = run; fn(); current = prev; }; + run(); + return run; +} diff --git a/packages/core/src/theme.css b/packages/core/src/theme.css new file mode 100644 index 0000000..593ae95 --- /dev/null +++ b/packages/core/src/theme.css @@ -0,0 +1,283 @@ +/* PettyUI default theme — import once, style everything via custom properties. */ + +:root { + --petty-primary: #2563eb; + --petty-primary-hover: #1d4ed8; + --petty-danger: #dc2626; + --petty-success: #16a34a; + --petty-surface: #ffffff; + --petty-surface-raised: #f9fafb; + --petty-border: #e5e7eb; + --petty-border-focus: #2563eb; + --petty-text: #111827; + --petty-text-muted: #6b7280; + --petty-radius: 0.375rem; + --petty-radius-lg: 0.5rem; + --petty-shadow: 0 4px 16px rgba(0 0 0 / 0.12); + --petty-shadow-sm: 0 1px 4px rgba(0 0 0 / 0.08); + --petty-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; + --petty-duration: 150ms; +} + +*, *::before, *::after { box-sizing: border-box; } + +petty-dialog, +petty-select, +petty-tabs, +petty-accordion, +petty-dropdown-menu, +petty-popover, +petty-toast-region, +petty-form, +petty-form-field { display: contents; font-family: var(--petty-font); } + +/* ── Dialog ─────────────────────────────────────────────────────────────── */ + +dialog { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius-lg); + box-shadow: var(--petty-shadow); + color: var(--petty-text); + max-width: min(90vw, 32rem); + padding: 1.5rem; + width: 100%; +} + +dialog::backdrop { + background: rgba(0 0 0 / 0.4); + backdrop-filter: blur(2px); +} + +/* ── Select ─────────────────────────────────────────────────────────────── */ + +[data-part="trigger"] { + align-items: center; + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius); + color: var(--petty-text); + cursor: pointer; + display: inline-flex; + font-family: inherit; + font-size: 0.875rem; + gap: 0.5rem; + padding: 0.5rem 0.75rem; + transition: border-color var(--petty-duration); +} + +[data-part="trigger"]:hover { border-color: var(--petty-primary); } +[data-part="trigger"]:focus-visible { outline: 2px solid var(--petty-border-focus); outline-offset: 2px; } + +[data-part="listbox"] { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius-lg); + box-shadow: var(--petty-shadow); + min-width: 10rem; + overflow: hidden; + padding: 0.25rem; +} + +petty-select-option { + border-radius: calc(var(--petty-radius) - 2px); + color: var(--petty-text); + cursor: pointer; + display: block; + font-size: 0.875rem; + padding: 0.5rem 0.75rem; + transition: background var(--petty-duration); +} + +petty-select-option[data-highlighted], +petty-select-option:hover { background: var(--petty-surface-raised); } +petty-select-option[aria-selected="true"] { color: var(--petty-primary); font-weight: 500; } +petty-select-option[disabled] { color: var(--petty-text-muted); cursor: not-allowed; opacity: 0.5; } + +/* ── Tabs ───────────────────────────────────────────────────────────────── */ + +[role="tablist"] { + border-bottom: 1px solid var(--petty-border); + display: flex; + gap: 0.125rem; +} + +petty-tab { + background: transparent; + border: none; + border-bottom: 2px solid transparent; + color: var(--petty-text-muted); + cursor: pointer; + display: inline-block; + font-family: inherit; + font-size: 0.875rem; + font-weight: 500; + margin-bottom: -1px; + padding: 0.625rem 1rem; + transition: color var(--petty-duration), border-color var(--petty-duration); +} + +petty-tab[data-state="active"] { border-bottom-color: var(--petty-primary); color: var(--petty-primary); } +petty-tab:focus-visible { outline: 2px solid var(--petty-border-focus); outline-offset: -2px; } + +petty-tab-panel { display: block; padding: 1rem 0; } +petty-tab-panel[hidden] { display: none; } + +/* ── Accordion ──────────────────────────────────────────────────────────── */ + +petty-accordion { display: flex; flex-direction: column; } + +petty-accordion-item { + border-bottom: 1px solid var(--petty-border); + display: block; +} + +petty-accordion-item details > summary { + color: var(--petty-text); + cursor: pointer; + font-size: 0.9375rem; + font-weight: 500; + list-style: none; + padding: 1rem 0; + transition: color var(--petty-duration); + user-select: none; +} + +petty-accordion-item details > summary::-webkit-details-marker { display: none; } +petty-accordion-item details[open] > summary { color: var(--petty-primary); } +petty-accordion-item details > summary:focus-visible { outline: 2px solid var(--petty-border-focus); outline-offset: 2px; } + +petty-accordion-item [data-part="content"] { + color: var(--petty-text-muted); + font-size: 0.875rem; + line-height: 1.6; + padding-bottom: 1rem; +} + +/* ── Dropdown Menu ──────────────────────────────────────────────────────── */ + +[data-part="content"][popover] { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius-lg); + box-shadow: var(--petty-shadow); + min-width: 10rem; + padding: 0.25rem; +} + +petty-menu-item { + border-radius: calc(var(--petty-radius) - 2px); + color: var(--petty-text); + cursor: pointer; + display: block; + font-size: 0.875rem; + padding: 0.5rem 0.75rem; + transition: background var(--petty-duration); +} + +petty-menu-item:hover, +petty-menu-item:focus-visible { background: var(--petty-surface-raised); outline: none; } +petty-menu-item[disabled] { color: var(--petty-text-muted); cursor: not-allowed; opacity: 0.5; } + +/* ── Popover ────────────────────────────────────────────────────────────── */ + +[popover][data-part="content"] { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius-lg); + box-shadow: var(--petty-shadow); + color: var(--petty-text); + font-size: 0.875rem; + max-width: 20rem; + padding: 0.75rem 1rem; +} + +/* ── Toast ──────────────────────────────────────────────────────────────── */ + +petty-toast-region { + bottom: 1.5rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + max-width: 24rem; + pointer-events: none; + position: fixed; + right: 1.5rem; + width: 100%; + z-index: 9999; +} + +[data-part="toast"] { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-left: 4px solid var(--petty-text-muted); + border-radius: var(--petty-radius-lg); + box-shadow: var(--petty-shadow); + display: grid; + gap: 0.25rem; + grid-template-columns: 1fr auto; + padding: 0.875rem 1rem; + pointer-events: auto; +} + +[data-part="toast"][data-type="success"] { border-left-color: var(--petty-success); } +[data-part="toast"][data-type="error"] { border-left-color: var(--petty-danger); } + +[data-part="toast-title"] { font-size: 0.875rem; font-weight: 500; } +[data-part="toast-description"] { color: var(--petty-text-muted); font-size: 0.8125rem; } + +[data-part="toast-close"] { + align-self: start; + background: none; + border: none; + color: var(--petty-text-muted); + cursor: pointer; + font-size: 1rem; + line-height: 1; + padding: 0.125rem 0.25rem; +} + +[data-part="toast-close"]:hover { color: var(--petty-text); } + +/* ── Form fields ────────────────────────────────────────────────────────── */ + +petty-form-field { + display: flex; + flex-direction: column; + gap: 0.375rem; +} + +[data-part="label"] { + color: var(--petty-text); + font-size: 0.875rem; + font-weight: 500; +} + +[data-part="control"] { + background: var(--petty-surface); + border: 1px solid var(--petty-border); + border-radius: var(--petty-radius); + color: var(--petty-text); + font-family: inherit; + font-size: 0.875rem; + padding: 0.5rem 0.75rem; + transition: border-color var(--petty-duration), box-shadow var(--petty-duration); + width: 100%; +} + +[data-part="control"]:focus { + border-color: var(--petty-border-focus); + box-shadow: 0 0 0 3px rgba(37 99 235 / 0.15); + outline: none; +} + +[data-part="control"][aria-invalid="true"] { + border-color: var(--petty-danger); + box-shadow: 0 0 0 3px rgba(220 38 38 / 0.12); +} + +[data-part="error"] { + color: var(--petty-danger); + font-size: 0.8125rem; + min-height: 1.25rem; +} diff --git a/packages/core/tests/accordion.test.ts b/packages/core/tests/accordion.test.ts new file mode 100644 index 0000000..fd4e711 --- /dev/null +++ b/packages/core/tests/accordion.test.ts @@ -0,0 +1,51 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import "../src/components/accordion/index"; +import { h } from "./helpers"; + +describe("petty-accordion", () => { + let el: HTMLElement; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-accordion"); + const itemA = h("petty-accordion-item", { value: "a" }, + h("details", {}, + h("summary", {}, "Section A"), + h("div", { "data-part": "content" }, "Content A"), + ), + ); + const itemB = h("petty-accordion-item", { value: "b" }, + h("details", {}, + h("summary", {}, "Section B"), + h("div", { "data-part": "content" }, "Content B"), + ), + ); + el.appendChild(itemA); + el.appendChild(itemB); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-accordion")).toBeDefined(); + expect(customElements.get("petty-accordion-item")).toBeDefined(); + }); + + it("defaults to single type", () => { + expect((el as HTMLElement & { type: string }).type).toBe("single"); + }); + + it("accordion-item sets data-state closed on connect", () => { + const item = el.querySelector("petty-accordion-item")!; + expect(item.getAttribute("data-state")).toBe("closed"); + }); + + it("accordion-item sets aria-expanded false on summary", () => { + const summary = el.querySelector("summary")!; + expect(summary.getAttribute("aria-expanded")).toBe("false"); + }); + + it("supports multiple type attribute", () => { + el.setAttribute("type", "multiple"); + expect((el as HTMLElement & { type: string }).type).toBe("multiple"); + }); +}); diff --git a/packages/core/tests/button.test.ts b/packages/core/tests/button.test.ts new file mode 100644 index 0000000..2f103d8 --- /dev/null +++ b/packages/core/tests/button.test.ts @@ -0,0 +1,43 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import "../src/components/button/index"; +import { h } from "./helpers"; + +describe("petty-button", () => { + let el: HTMLElement; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-button"); + el.appendChild(h("button", {}, "Click")); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-button")).toBeDefined(); + }); + + it("syncs disabled state to child button", () => { + el.setAttribute("disabled", ""); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(true); + expect(btn.getAttribute("aria-disabled")).toBe("true"); + expect(el.dataset.state).toBe("disabled"); + }); + + it("syncs loading state to child button", () => { + el.setAttribute("loading", ""); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(true); + expect(btn.getAttribute("aria-busy")).toBe("true"); + expect(el.dataset.state).toBe("loading"); + }); + + it("clears loading and disabled state", () => { + el.setAttribute("loading", ""); + el.removeAttribute("loading"); + const btn = el.querySelector("button")!; + expect(btn.disabled).toBe(false); + expect(btn.getAttribute("aria-busy")).toBeNull(); + expect(el.dataset.state).toBe("idle"); + }); +}); diff --git a/packages/core/tests/checkbox.test.ts b/packages/core/tests/checkbox.test.ts new file mode 100644 index 0000000..6c03679 --- /dev/null +++ b/packages/core/tests/checkbox.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyCheckbox } from "../src/components/checkbox/index"; +import { h } from "./helpers"; + +describe("petty-checkbox", () => { + let el: PettyCheckbox; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-checkbox") as PettyCheckbox; + const input = h("input", { type: "checkbox", "data-part": "control" }); + const label = h("label", { "data-part": "label" }, "Accept"); + el.appendChild(input); + el.appendChild(label); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-checkbox")).toBe(PettyCheckbox); + }); + + it("defaults to unchecked state", () => { + expect(el.checked).toBe(false); + expect(el.dataset.state).toBe("unchecked"); + }); + + it("sets checked state via property", () => { + el.checked = true; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.checked).toBe(true); + expect(el.dataset.state).toBe("checked"); + }); + + it("sets indeterminate state", () => { + el.indeterminate = true; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.indeterminate).toBe(true); + expect(el.dataset.state).toBe("indeterminate"); + }); + + it("wires label htmlFor to input id", () => { + const input = el.querySelector("input") as HTMLInputElement; + const label = el.querySelector("label") as HTMLLabelElement; + expect(input.id).not.toBe(""); + expect(label.htmlFor).toBe(input.id); + }); +}); diff --git a/packages/core/tests/collapsible.test.ts b/packages/core/tests/collapsible.test.ts new file mode 100644 index 0000000..f7e31e5 --- /dev/null +++ b/packages/core/tests/collapsible.test.ts @@ -0,0 +1,98 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyCollapsible } from "../src/components/collapsible/index"; +import { PettyProgress } from "../src/components/progress/index"; +import "../src/components/alert/index"; +describe("petty-collapsible", () => { + let el: PettyCollapsible; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-collapsible") as PettyCollapsible; + const d = document.createElement("details"); + const s = document.createElement("summary"); + s.textContent = "Toggle"; + const c = document.createElement("div"); + c.setAttribute("data-part", "content"); + c.textContent = "Content"; + d.appendChild(s); + d.appendChild(c); + el.appendChild(d); + document.body.appendChild(el); + }); + it("registers and defaults to closed", () => { + expect(customElements.get("petty-collapsible")).toBe(PettyCollapsible); + expect(el.isOpen).toBe(false); + }); + it("open/close/toggle lifecycle", () => { + el.open(); + expect(el.detailsElement!.open).toBe(true); + el.close(); + expect(el.detailsElement!.open).toBe(false); + el.toggle(); + expect(el.detailsElement!.open).toBe(true); + }); + it("blocks open when disabled", () => { + el.setAttribute("disabled", ""); + el.open(); + expect(el.detailsElement!.open).toBe(false); + el.removeAttribute("disabled"); + el.open(); + expect(el.detailsElement!.open).toBe(true); + }); +}); +describe("petty-alert", () => { + let el: HTMLElement; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-alert"); + el.appendChild(document.createTextNode("msg")); + document.body.appendChild(el); + }); + it("defaults to status role", () => { + expect(el.getAttribute("role")).toBe("status"); + }); + it("error and warning get alert role", () => { + el.setAttribute("variant", "error"); + expect(el.getAttribute("role")).toBe("alert"); + el.setAttribute("variant", "warning"); + expect(el.getAttribute("role")).toBe("alert"); + }); + it("info gets status role then reverts on removal", () => { + el.setAttribute("variant", "info"); + expect(el.getAttribute("role")).toBe("status"); + el.removeAttribute("variant"); + expect(el.getAttribute("role")).toBe("status"); + }); +}); +describe("petty-progress", () => { + let el: PettyProgress; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-progress") as PettyProgress; + const fill = document.createElement("div"); + fill.setAttribute("data-part", "fill"); + const label = document.createElement("span"); + label.setAttribute("data-part", "label"); + el.appendChild(fill); + el.appendChild(label); + document.body.appendChild(el); + }); + it("sets progressbar ARIA", () => { + expect(el.getAttribute("role")).toBe("progressbar"); + expect(el.getAttribute("aria-valuemin")).toBe("0"); + }); + it("tracks value and max", () => { + el.setAttribute("value", "50"); + el.setAttribute("max", "200"); + expect(el.value).toBe(50); + expect(el.dataset.state).toBe("loading"); + }); + it("complete state at max", () => { + el.setAttribute("value", "100"); + expect(el.dataset.state).toBe("complete"); + }); + it("returns to indeterminate when value removed", () => { + el.setAttribute("value", "50"); + el.removeAttribute("value"); + expect(el.dataset.state).toBe("indeterminate"); + }); +}); diff --git a/packages/core/tests/dialog.test.ts b/packages/core/tests/dialog.test.ts new file mode 100644 index 0000000..d9fa0bc --- /dev/null +++ b/packages/core/tests/dialog.test.ts @@ -0,0 +1,36 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyDialog } from "../src/components/dialog/index"; +import { h } from "./helpers"; + +describe("petty-dialog", () => { + let el: PettyDialog; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-dialog") as PettyDialog; + const heading = h("h2", {}, "Title"); + const dlg = document.createElement("dialog"); + dlg.appendChild(heading); + el.appendChild(dlg); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-dialog")).toBe(PettyDialog); + }); + + it("links aria-labelledby to heading", () => { + const dlg = el.querySelector("dialog")!; + const heading = el.querySelector("h2")!; + expect(heading.id).not.toBe(""); + expect(dlg.getAttribute("aria-labelledby")).toBe(heading.id); + }); + + it("exposes isOpen as false by default", () => { + expect(el.isOpen).toBe(false); + }); + + it("returns dialogElement", () => { + expect(el.dialogElement).toBeInstanceOf(HTMLDialogElement); + }); +}); diff --git a/packages/core/tests/form.test.ts b/packages/core/tests/form.test.ts new file mode 100644 index 0000000..a330020 --- /dev/null +++ b/packages/core/tests/form.test.ts @@ -0,0 +1,61 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyForm } from "../src/components/form/index"; +import { h } from "./helpers"; + +describe("petty-form", () => { + let el: PettyForm; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-form") as PettyForm; + const label = h("label", { "data-part": "label" }, "Email"); + const input = h("input", { "data-part": "control", type: "email", name: "email" }); + const error = h("span", { "data-part": "error" }); + const field = h("petty-form-field", { name: "email" }, label, input, error); + const submit = h("button", { type: "submit" }, "Submit"); + const form = h("form", {}, field, submit); + el.appendChild(form); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-form")).toBe(PettyForm); + expect(customElements.get("petty-form-field")).toBeDefined(); + }); + + it("sets novalidate on the form", () => { + const form = el.querySelector("form")!; + expect(form.hasAttribute("novalidate")).toBe(true); + }); + + it("dispatches petty-submit with form data when no schema set", () => { + let detail: { data: Record } | null = null; + el.addEventListener("petty-submit", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + const input = el.querySelector("input") as HTMLInputElement; + input.value = "test@example.com"; + const form = el.querySelector("form")!; + form.dispatchEvent(new Event("submit", { cancelable: true })); + expect(detail!.data.email).toBe("test@example.com"); + }); + + it("dispatches petty-invalid on schema failure and shows error", () => { + const mockSchema = { + safeParse: () => ({ + success: false, + error: { issues: [{ path: ["email"], message: "Invalid email" }] }, + }), + }; + el.setSchema(mockSchema); + let detail: { errors: Array<{ path: Array; message: string }> } | null = null; + el.addEventListener("petty-invalid", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + const form = el.querySelector("form")!; + form.dispatchEvent(new Event("submit", { cancelable: true })); + expect(detail!.errors[0].message).toBe("Invalid email"); + expect(el.querySelector("[data-part=error]")!.textContent).toBe("Invalid email"); + expect(el.querySelector("[data-part=control]")!.getAttribute("aria-invalid")).toBe("true"); + }); +}); diff --git a/packages/core/tests/helpers.test.ts b/packages/core/tests/helpers.test.ts new file mode 100644 index 0000000..4118327 --- /dev/null +++ b/packages/core/tests/helpers.test.ts @@ -0,0 +1,65 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { part, emit, initialValue, listen, wireLabel } from "../src/shared/helpers"; + +describe("shared helpers", () => { + beforeEach(() => { document.body.replaceChildren(); }); + + it("part() finds child by data-part attribute", () => { + const host = document.createElement("div"); + const child = document.createElement("input"); + child.dataset.part = "control"; + host.appendChild(child); + expect(part(host, "control")).toBe(child); + expect(part(host, "missing")).toBeNull(); + }); + + it("emit() dispatches a bubbling petty-prefixed event", () => { + const el = document.createElement("div"); + document.body.appendChild(el); + let received: { value: unknown } | null = null; + document.body.addEventListener("petty-change", (e) => { received = (e as CustomEvent).detail; }); + emit(el, "change", { value: "test" }); + expect(received).toEqual({ value: "test" }); + }); + + it("initialValue() reads default-value then value then empty", () => { + const el = document.createElement("div"); + expect(initialValue(el)).toBe(""); + el.setAttribute("value", "v"); + expect(initialValue(el)).toBe("v"); + el.setAttribute("default-value", "dv"); + expect(initialValue(el)).toBe("dv"); + }); + + it("listen() attaches and cleanup removes listeners", () => { + const el = document.createElement("button"); + let count = 0; + const handler = () => { count++; }; + const cleanup = listen(el, [["click", handler]]); + el.click(); + expect(count).toBe(1); + cleanup(); + el.click(); + expect(count).toBe(1); + }); + + it("listen() returns noop for null element", () => { + const cleanup = listen(null, [["click", () => {}]]); + expect(typeof cleanup).toBe("function"); + cleanup(); + }); + + it("wireLabel() connects label htmlFor to control id", () => { + const control = document.createElement("input"); + const label = document.createElement("label"); + wireLabel(control, label, "test"); + expect(control.id).toMatch(/^test-/); + expect(label.htmlFor).toBe(control.id); + }); + + it("wireLabel() does nothing with null label", () => { + const control = document.createElement("input"); + wireLabel(control, null, "test"); + expect(control.id).toBe(""); + }); +}); diff --git a/packages/core/tests/helpers.ts b/packages/core/tests/helpers.ts new file mode 100644 index 0000000..fa5ee1c --- /dev/null +++ b/packages/core/tests/helpers.ts @@ -0,0 +1,69 @@ +/** + * Creates an element with optional attributes and children. + * Avoids innerHTML to satisfy SEC-12. + */ +export function h( + tag: string, + attrs?: Record, + ...children: Array +): HTMLElement { + const el = document.createElement(tag); + if (attrs) { + for (const [key, val] of Object.entries(attrs)) { + el.setAttribute(key, val); + } + } + for (const child of children) { + if (typeof child === "string") { + el.appendChild(document.createTextNode(child)); + } else { + el.appendChild(child); + } + } + return el; +} + +/** Clears the body and appends an element, returning it typed as T. */ +export function mount(el: T): T { + document.body.textContent = ""; + document.body.appendChild(el); + return el; +} + +/** Creates and mounts a petty-collapsible with a details/summary structure. */ +export function createCollapsible(): HTMLElement { + const el = document.createElement("petty-collapsible"); + const d = document.createElement("details"); + d.appendChild(h("summary", {}, "Toggle")); + d.appendChild(h("div", { "data-part": "content" }, "Content")); + el.appendChild(d); + return mount(el); +} + +/** Creates and mounts a petty-alert with text content. */ +export function createAlert(text = "msg"): HTMLElement { + const el = document.createElement("petty-alert"); + el.appendChild(document.createTextNode(text)); + return mount(el); +} + +/** Creates and mounts a petty-progress with fill and label parts. */ +export function createProgress(): HTMLElement { + const el = document.createElement("petty-progress"); + el.appendChild(h("div", { "data-part": "fill" })); + el.appendChild(h("span", { "data-part": "label" })); + return mount(el); +} + +/** Creates and mounts a petty-pagination with prev/next and numbered items. */ +export function createPagination(total = "50", pageSize = "10"): HTMLElement { + const el = document.createElement("petty-pagination"); + el.setAttribute("total", total); + el.setAttribute("page-size", pageSize); + el.appendChild(h("petty-pagination-item", { type: "prev" }, "Prev")); + el.appendChild(h("petty-pagination-item", { value: "1" }, "1")); + el.appendChild(h("petty-pagination-item", { value: "2" }, "2")); + el.appendChild(h("petty-pagination-item", { value: "3" }, "3")); + el.appendChild(h("petty-pagination-item", { type: "next" }, "Next")); + return mount(el); +} diff --git a/packages/core/tests/pagination.test.ts b/packages/core/tests/pagination.test.ts new file mode 100644 index 0000000..575f8fd --- /dev/null +++ b/packages/core/tests/pagination.test.ts @@ -0,0 +1,56 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyPagination } from "../src/components/pagination/index"; +import { h } from "./helpers"; + +describe("petty-pagination", () => { + let el: PettyPagination; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-pagination") as PettyPagination; + el.setAttribute("total", "50"); + el.setAttribute("page-size", "10"); + el.appendChild(h("petty-pagination-item", { type: "prev" }, "Prev")); + el.appendChild(h("petty-pagination-item", { value: "1" }, "1")); + el.appendChild(h("petty-pagination-item", { value: "2" }, "2")); + el.appendChild(h("petty-pagination-item", { value: "3" }, "3")); + el.appendChild(h("petty-pagination-item", { type: "next" }, "Next")); + document.body.appendChild(el); + }); + + it("registers and calculates totalPages", () => { + expect(customElements.get("petty-pagination")).toBe(PettyPagination); + expect(el.totalPages).toBe(5); + expect(el.currentPage).toBe(1); + }); + + it("marks page 1 as active with aria-current", () => { + const item1 = el.querySelector("[value='1']")!; + expect(item1.getAttribute("data-state")).toBe("active"); + expect(item1.getAttribute("aria-current")).toBe("page"); + }); + + it("disables prev on first page", () => { + expect(el.querySelector("[type=prev]")!.hasAttribute("disabled")).toBe(true); + }); + + it("clamps goToPage to valid range", () => { + el.goToPage(0); + expect(el.currentPage).toBe(1); + el.goToPage(999); + expect(el.currentPage).toBe(5); + }); + + it("fires petty-change on goToPage", () => { + let detail: { page: number } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { detail = e.detail; }) as EventListener); + el.goToPage(3); + expect(detail).toEqual({ page: 3 }); + expect(el.currentPage).toBe(3); + }); + + it("disables next on last page", () => { + el.goToPage(5); + expect(el.querySelector("[type=next]")!.hasAttribute("disabled")).toBe(true); + }); +}); diff --git a/packages/core/tests/progress.test.ts b/packages/core/tests/progress.test.ts new file mode 100644 index 0000000..3e476cc --- /dev/null +++ b/packages/core/tests/progress.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyProgress } from "../src/components/progress/index"; +describe("petty-progress", () => { + let el: PettyProgress; + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-progress") as PettyProgress; + const fill = document.createElement("div"); + fill.setAttribute("data-part", "fill"); + const label = document.createElement("span"); + label.setAttribute("data-part", "label"); + el.appendChild(fill); + el.appendChild(label); + document.body.appendChild(el); + }); + it("registers as petty-progress", () => { + expect(customElements.get("petty-progress")).toBe(PettyProgress); + }); + it("sets progressbar ARIA on connect", () => { + expect(el.getAttribute("role")).toBe("progressbar"); + expect(el.getAttribute("aria-valuemin")).toBe("0"); + expect(el.getAttribute("aria-valuemax")).toBe("100"); + }); + it("is indeterminate without value", () => { + expect(el.value).toBeNull(); + expect(el.dataset.state).toBe("indeterminate"); + expect(el.hasAttribute("aria-valuenow")).toBe(false); + }); + it("tracks value and max attributes", () => { + el.setAttribute("value", "50"); + el.setAttribute("max", "200"); + expect(el.value).toBe(50); + expect(el.max).toBe(200); + expect(el.getAttribute("aria-valuenow")).toBe("50"); + expect(el.dataset.state).toBe("loading"); + }); + it("sets complete state at max", () => { + el.setAttribute("value", "100"); + expect(el.dataset.state).toBe("complete"); + }); + it("returns to indeterminate when value removed", () => { + el.setAttribute("value", "50"); + el.removeAttribute("value"); + expect(el.dataset.state).toBe("indeterminate"); + expect(el.hasAttribute("aria-valuenow")).toBe(false); + }); +}); diff --git a/packages/core/tests/radio-group.test.ts b/packages/core/tests/radio-group.test.ts new file mode 100644 index 0000000..3061f68 --- /dev/null +++ b/packages/core/tests/radio-group.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyRadioGroup } from "../src/components/radio-group/index"; +import { h } from "./helpers"; + +describe("petty-radio-group", () => { + let el: PettyRadioGroup; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-radio-group") as PettyRadioGroup; + el.setAttribute("default-value", "a"); + el.appendChild(h("petty-radio-item", { value: "a" }, "Option A")); + el.appendChild(h("petty-radio-item", { value: "b" }, "Option B")); + el.appendChild(h("petty-radio-item", { value: "c" }, "Option C")); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-radio-group")).toBe(PettyRadioGroup); + expect(customElements.get("petty-radio-item")).toBeDefined(); + }); + + it("sets role radiogroup on connect", () => { + expect(el.getAttribute("role")).toBe("radiogroup"); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("a"); + }); + + it("syncs aria-checked on radio items", () => { + const itemA = el.querySelector("[value=a]")!; + const itemB = el.querySelector("[value=b]")!; + expect(itemA.getAttribute("aria-checked")).toBe("true"); + expect(itemB.getAttribute("aria-checked")).toBe("false"); + }); + + it("fires petty-change on selectValue", () => { + let detail: { value: string } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.selectValue("b"); + expect(detail).toEqual({ value: "b" }); + expect(el.value).toBe("b"); + }); +}); diff --git a/packages/core/tests/select.test.ts b/packages/core/tests/select.test.ts new file mode 100644 index 0000000..85cc98d --- /dev/null +++ b/packages/core/tests/select.test.ts @@ -0,0 +1,49 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettySelect } from "../src/components/select/index"; +import { h } from "./helpers"; + +describe("petty-select", () => { + let el: PettySelect; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-select") as PettySelect; + el.setAttribute("default-value", "apple"); + const trigger = h("button", { "data-part": "trigger" }, "Pick a fruit"); + const opt1 = h("petty-select-option", { value: "apple" }, "Apple"); + const opt2 = h("petty-select-option", { value: "banana" }, "Banana"); + const listbox = h("div", { id: "fruit-list", popover: "", "data-part": "listbox", role: "listbox" }, opt1, opt2); + const hidden = h("input", { type: "hidden", name: "fruit" }); + el.appendChild(trigger); + el.appendChild(listbox); + el.appendChild(hidden); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-select")).toBe(PettySelect); + expect(customElements.get("petty-select-option")).toBeDefined(); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("apple"); + }); + + it("sets aria-haspopup on trigger", () => { + const trigger = el.querySelector("[data-part=trigger]")!; + expect(trigger.getAttribute("aria-haspopup")).toBe("listbox"); + expect(trigger.getAttribute("aria-expanded")).toBe("false"); + }); + + it("syncs hidden input value", () => { + const input = el.querySelector("input[type=hidden]") as HTMLInputElement; + expect(input.value).toBe("apple"); + }); + + it("marks selected option with aria-selected true", () => { + const apple = el.querySelector("[value=apple]")!; + const banana = el.querySelector("[value=banana]")!; + expect(apple.getAttribute("aria-selected")).toBe("true"); + expect(banana.getAttribute("aria-selected")).toBe("false"); + }); +}); diff --git a/packages/core/tests/switch.test.ts b/packages/core/tests/switch.test.ts new file mode 100644 index 0000000..b32a7cf --- /dev/null +++ b/packages/core/tests/switch.test.ts @@ -0,0 +1,49 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettySwitch } from "../src/components/switch/index"; +import { h } from "./helpers"; + +describe("petty-switch", () => { + let el: PettySwitch; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-switch") as PettySwitch; + const btn = h("button", { "data-part": "control", type: "button" }, "Toggle"); + const label = h("span", { "data-part": "label" }, "Dark mode"); + el.appendChild(btn); + el.appendChild(label); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-switch")).toBe(PettySwitch); + }); + + it("sets role switch on button", () => { + const btn = el.querySelector("button")!; + expect(btn.getAttribute("role")).toBe("switch"); + }); + + it("defaults to off state with aria-checked false", () => { + expect(el.checked).toBe(false); + expect(el.dataset.state).toBe("off"); + expect(el.querySelector("button")!.getAttribute("aria-checked")).toBe("false"); + }); + + it("toggles on click and fires petty-change", () => { + let detail: { checked: boolean } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.querySelector("button")!.click(); + expect(el.checked).toBe(true); + expect(el.dataset.state).toBe("on"); + expect(detail).toEqual({ checked: true }); + }); + + it("does not toggle when disabled", () => { + el.setAttribute("disabled", ""); + el.querySelector("button")!.click(); + expect(el.checked).toBe(false); + }); +}); diff --git a/packages/core/tests/tabs.test.ts b/packages/core/tests/tabs.test.ts new file mode 100644 index 0000000..a8f6bce --- /dev/null +++ b/packages/core/tests/tabs.test.ts @@ -0,0 +1,53 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyTabs } from "../src/components/tabs/index"; +import { h } from "./helpers"; + +describe("petty-tabs", () => { + let el: PettyTabs; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-tabs") as PettyTabs; + el.setAttribute("default-value", "one"); + const tab1 = h("petty-tab", { value: "one" }, "Tab 1"); + const tab2 = h("petty-tab", { value: "two" }, "Tab 2"); + const tablist = h("div", { role: "tablist" }, tab1, tab2); + const panel1 = h("petty-tab-panel", { value: "one" }, "Content 1"); + const panel2 = h("petty-tab-panel", { value: "two" }, "Content 2"); + el.appendChild(tablist); + el.appendChild(panel1); + el.appendChild(panel2); + document.body.appendChild(el); + }); + + it("registers the custom elements", () => { + expect(customElements.get("petty-tabs")).toBe(PettyTabs); + }); + + it("initializes with default-value", () => { + expect(el.value).toBe("one"); + }); + + it("sets data-state and aria-selected on active tab", () => { + const tab1 = el.querySelector("petty-tab[value='one']")!; + const tab2 = el.querySelector("petty-tab[value='two']")!; + expect(tab1.getAttribute("data-state")).toBe("active"); + expect(tab1.getAttribute("aria-selected")).toBe("true"); + expect(tab2.getAttribute("data-state")).toBe("inactive"); + }); + + it("hides inactive panels", () => { + const panel2 = el.querySelector("petty-tab-panel[value='two']")!; + expect(panel2.hasAttribute("hidden")).toBe(true); + }); + + it("fires petty-change on selectTab", () => { + let detail: { value: string } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.selectTab("two"); + expect(detail).toEqual({ value: "two" }); + expect(el.value).toBe("two"); + }); +}); diff --git a/packages/core/tests/text-field.test.ts b/packages/core/tests/text-field.test.ts new file mode 100644 index 0000000..fa7bb9f --- /dev/null +++ b/packages/core/tests/text-field.test.ts @@ -0,0 +1,52 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyTextField } from "../src/components/text-field/index"; +import { h } from "./helpers"; + +describe("petty-text-field", () => { + let el: PettyTextField; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-text-field") as PettyTextField; + el.setAttribute("name", "email"); + el.appendChild(h("label", { "data-part": "label" }, "Email")); + el.appendChild(h("input", { "data-part": "control", type: "email" })); + el.appendChild(h("span", { "data-part": "description" }, "Enter your email")); + el.appendChild(h("span", { "data-part": "error" })); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-text-field")).toBe(PettyTextField); + }); + + it("wires label htmlFor to control id", () => { + const label = el.querySelector("label") as HTMLLabelElement; + const input = el.querySelector("input") as HTMLInputElement; + expect(input.id).not.toBe(""); + expect(label.htmlFor).toBe(input.id); + }); + + it("sets aria-describedby on control", () => { + const input = el.querySelector("input") as HTMLInputElement; + const describedBy = input.getAttribute("aria-describedby")!; + expect(describedBy.length).toBeGreaterThan(0); + }); + + it("setError marks control as aria-invalid", () => { + el.setError("Required field"); + const input = el.querySelector("input") as HTMLInputElement; + const error = el.querySelector("[data-part=error]")!; + expect(input.getAttribute("aria-invalid")).toBe("true"); + expect(error.textContent).toBe("Required field"); + }); + + it("clearError removes invalid state", () => { + el.setError("Required"); + el.clearError(); + const input = el.querySelector("input") as HTMLInputElement; + const error = el.querySelector("[data-part=error]")!; + expect(input.hasAttribute("aria-invalid")).toBe(false); + expect(error.textContent).toBe(""); + }); +}); diff --git a/packages/core/tests/toggle.test.ts b/packages/core/tests/toggle.test.ts new file mode 100644 index 0000000..5ef65ab --- /dev/null +++ b/packages/core/tests/toggle.test.ts @@ -0,0 +1,47 @@ +import { describe, it, expect, beforeEach } from "vitest"; +import { PettyToggle } from "../src/components/toggle/index"; +import { h } from "./helpers"; + +describe("petty-toggle", () => { + let el: PettyToggle; + + beforeEach(() => { + document.body.textContent = ""; + el = document.createElement("petty-toggle") as PettyToggle; + el.appendChild(h("button", { "data-part": "control", type: "button" }, "Bold")); + document.body.appendChild(el); + }); + + it("registers the custom element", () => { + expect(customElements.get("petty-toggle")).toBe(PettyToggle); + }); + + it("defaults to unpressed with aria-pressed false", () => { + expect(el.pressed).toBe(false); + expect(el.dataset.state).toBe("off"); + expect(el.querySelector("button")!.getAttribute("aria-pressed")).toBe("false"); + }); + + it("sets pressed via property", () => { + el.pressed = true; + expect(el.hasAttribute("pressed")).toBe(true); + expect(el.querySelector("button")!.getAttribute("aria-pressed")).toBe("true"); + expect(el.dataset.state).toBe("on"); + }); + + it("toggles on click and fires petty-change", () => { + let detail: { pressed: boolean } | null = null; + el.addEventListener("petty-change", ((e: CustomEvent) => { + detail = e.detail; + }) as EventListener); + el.querySelector("button")!.click(); + expect(el.pressed).toBe(true); + expect(detail).toEqual({ pressed: true }); + }); + + it("does not toggle when disabled", () => { + el.setAttribute("disabled", ""); + el.querySelector("button")!.click(); + expect(el.pressed).toBe(false); + }); +}); diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json new file mode 100644 index 0000000..2836b08 --- /dev/null +++ b/packages/core/tsconfig.json @@ -0,0 +1,11 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist", + "baseUrl": ".", + "lib": ["ES2020", "DOM", "DOM.Iterable"] + }, + "include": ["src"], + "exclude": ["node_modules", "dist", "tests"] +} diff --git a/packages/core/tsdown.config.ts b/packages/core/tsdown.config.ts new file mode 100644 index 0000000..285964f --- /dev/null +++ b/packages/core/tsdown.config.ts @@ -0,0 +1,16 @@ +import { defineConfig } from "tsdown"; + +const components = [ + "accordion", "alert", "alert-dialog", "avatar", "badge", "breadcrumbs", "button", + "calendar", "card", "checkbox", "collapsible", "combobox", "command-palette", + "context-menu", "data-table", "date-picker", "dialog", "drawer", "dropdown-menu", + "form", "hover-card", "image", "link", "listbox", "meter", "navigation-menu", + "number-field", "pagination", "popover", "progress", "radio-group", "select", + "separator", "skeleton", "slider", "switch", "tabs", "text-field", "toast", + "tags-input", "toggle", "toggle-group", "tooltip", "virtual-list", "wizard", +]; + +const entry: Record = { signals: "src/signals.ts", router: "src/router.ts" }; +for (const c of components) entry[`${c}/index`] = `src/components/${c}/index.ts`; + +export default defineConfig({ entry, format: ["esm", "cjs"], dts: true, clean: true, sourcemap: true, external: ["zod", "zod/v4"] }); diff --git a/packages/core/vitest.config.ts b/packages/core/vitest.config.ts new file mode 100644 index 0000000..d806e23 --- /dev/null +++ b/packages/core/vitest.config.ts @@ -0,0 +1,8 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + environment: "jsdom", + include: ["tests/**/*.test.ts"], + }, +}); diff --git a/packages/mcp/package.json b/packages/mcp/package.json new file mode 100644 index 0000000..0db7b0f --- /dev/null +++ b/packages/mcp/package.json @@ -0,0 +1,19 @@ +{ + "name": "@pettyui/mcp", + "version": "2.0.0-alpha.0", + "type": "module", + "main": "dist/index.js", + "scripts": { + "build": "tsdown", + "start": "node dist/index.js" + }, + "dependencies": { + "@modelcontextprotocol/sdk": "^1.0.0", + "pettyui": "workspace:*", + "zod": "^4.3.6" + }, + "devDependencies": { + "tsdown": "^0.21.7", + "typescript": "^6.0.2" + } +} diff --git a/packages/mcp/src/component-info.ts b/packages/mcp/src/component-info.ts new file mode 100644 index 0000000..4ab8f37 --- /dev/null +++ b/packages/mcp/src/component-info.ts @@ -0,0 +1,16 @@ +/** Full metadata for a PettyUI web component, used by MCP tools to describe, compose, and validate. */ +export interface ComponentInfo { + tag: string; + description: string; + tier: 1 | 2 | 3; + category: "inputs" | "layout" | "navigation" | "overlays" | "feedback" | "data"; + attributes: Array<{ name: string; type: string; description: string; default?: string }>; + parts: Array<{ name: string; element: string; description: string }>; + events: Array<{ name: string; detail: string; description: string }>; + example: string; +} + +/** Creates a ComponentInfo with defaults for empty arrays. */ +export function defineComponent(info: ComponentInfo): ComponentInfo { + return info; +} diff --git a/packages/mcp/src/data/data.ts b/packages/mcp/src/data/data.ts new file mode 100644 index 0000000..34a0983 --- /dev/null +++ b/packages/mcp/src/data/data.ts @@ -0,0 +1,43 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function data(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "data", attributes, parts, events, example }; +} + +/** All data-category component definitions for the MCP registry. */ +export const dataComponents: ComponentInfo[] = [ + data("petty-data-table", "Sortable table with click-to-sort column headers", 2, + [], + [part("body", "tbody", "Table body containing sortable rows")], + [evt("petty-sort", "{ column: string, direction: string }", "Fires when a column sort changes")], + "\n \n \n \n \n \n \n \n \n
NameAge
Alice30
\n"), + data("petty-calendar", "Month grid with day selection and month navigation", 2, + [attr("value", "string", "Selected date in ISO format"), attr("min", "string", "Earliest selectable date"), attr("max", "string", "Latest selectable date")], + [part("title", "span", "Month/year heading"), part("body", "tbody", "Day grid body"), part("prev-month", "button", "Previous month nav"), part("next-month", "button", "Next month nav"), part("day", "button", "Individual day cell")], + [evt("petty-change", "{ value: string }", "Fires when a day is selected")], + "\n \n \n \n
\n"), + data("petty-virtual-list", "Windowed scroll rendering only visible items plus overscan", 3, + [attr("item-height", "string", "Height of each item in px", "40"), attr("overscan", "string", "Extra items rendered above/below viewport", "5")], + [], + [evt("petty-scroll", "{ startIndex: number, endIndex: number }", "Fires on scroll with visible range")], + ""), +]; diff --git a/packages/mcp/src/data/feedback.ts b/packages/mcp/src/data/feedback.ts new file mode 100644 index 0000000..9c5fdee --- /dev/null +++ b/packages/mcp/src/data/feedback.ts @@ -0,0 +1,47 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function feedback(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "feedback", attributes, parts, events, example }; +} + +/** All feedback-category component definitions for the MCP registry. */ +export const feedbackComponents: ComponentInfo[] = [ + feedback("petty-alert", "Inline status message with variant-driven ARIA role", 1, + [attr("variant", "string", "Visual variant: default, error, warning, success, info", "default")], + [], [], + "\n

Something went wrong.

\n"), + feedback("petty-progress", "Accessible progress bar with indeterminate state support", 1, + [attr("value", "string", "Current progress value (omit for indeterminate)"), attr("max", "string", "Maximum value", "100")], + [part("fill", "div", "Fill bar, receives --petty-progress CSS var"), part("label", "span", "Percentage text label")], + [], + "\n
\n 60%\n"), + feedback("petty-meter", "Value gauge with low/high/optimum state computation", 2, + [attr("value", "string", "Current value"), attr("min", "string", "Minimum", "0"), attr("max", "string", "Maximum", "100"), attr("low", "string", "Low threshold"), attr("high", "string", "High threshold"), attr("optimum", "string", "Optimal value")], + [part("fill", "div", "Fill bar, receives --petty-meter-value CSS var")], + [], + "\n
\n"), + feedback("petty-toast-region", "Container that renders active toast notifications", 2, + [attr("position", "string", "Screen position for toasts")], + [part("toast", "div", "Individual toast element"), part("toast-title", "div", "Toast title"), part("toast-description", "div", "Toast description"), part("toast-close", "button", "Dismiss button")], + [], + ""), +]; diff --git a/packages/mcp/src/data/inputs.ts b/packages/mcp/src/data/inputs.ts new file mode 100644 index 0000000..41a767b --- /dev/null +++ b/packages/mcp/src/data/inputs.ts @@ -0,0 +1,95 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function input(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "inputs", attributes, parts, events, example }; +} + +const change = (detail: string, desc: string) => evt("petty-change", detail, desc); + +/** All input-category component definitions for the MCP registry. */ +export const inputComponents: ComponentInfo[] = [ + input("petty-button", "Headless button wrapper with loading and disabled states", 1, + [attr("disabled", "boolean", "Disables the button"), attr("loading", "boolean", "Shows loading state, disables interaction")], + [part("button", "button", "The native button element")], [], + "\n \n"), + input("petty-checkbox", "Tri-state checkbox with label wiring and change events", 1, + [attr("checked", "boolean", "Whether checked"), attr("indeterminate", "boolean", "Indeterminate state"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name"), attr("value", "string", "Form value", "on")], + [part("control", "input[type=checkbox]", "The native checkbox"), part("label", "label", "Label wired to checkbox")], + [change("{ checked: boolean, indeterminate: boolean }", "Fires on check change")], + "\n \n \n"), + input("petty-switch", "On/off toggle built on a button with role=switch", 1, + [attr("checked", "boolean", "Whether on"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name")], + [part("control", "button", "Button with role=switch"), part("label", "span", "Label via aria-labelledby")], + [change("{ checked: boolean }", "Fires on toggle")], + "\n Dark mode\n \n"), + input("petty-radio-group", "Mutually exclusive selection group with keyboard navigation", 1, + [attr("name", "string", "Form name"), attr("value", "string", "Selected value"), attr("default-value", "string", "Initial value"), attr("orientation", "string", "Layout orientation", "vertical")], + [], [change("{ value: string }", "Fires on selection change")], + "\n Option A\n Option B\n"), + input("petty-text-field", "Labeled text input with description and error wiring", 1, + [attr("name", "string", "Form name"), attr("disabled", "boolean", "Disables input"), attr("required", "boolean", "Marks required")], + [part("label", "label", "Label wired via htmlFor"), part("control", "input", "The text input"), part("description", "span", "Help text"), part("error", "span", "Error message")], + [change("{ value: string }", "Fires on input")], + "\n \n \n Your email\n \n"), + input("petty-select", "Headless select built on Popover API with keyboard nav", 1, + [attr("value", "string", "Selected value"), attr("default-value", "string", "Initial value"), attr("placeholder", "string", "Trigger placeholder")], + [part("trigger", "button", "Opens the listbox popover"), part("listbox", "div[popover]", "Popover with role=listbox")], + [change("{ value: string }", "Fires on selection change")], + "\n \n
\n A\n
\n"), + input("petty-toggle", "Pressed/unpressed toggle button with aria-pressed", 1, + [attr("pressed", "boolean", "Whether pressed"), attr("disabled", "boolean", "Disables toggle")], + [part("control", "button", "The toggle button")], + [change("{ pressed: boolean }", "Fires on press change")], + "\n \n"), + input("petty-slider", "Range input wrapper with label, output, and change events", 2, + [attr("min", "string", "Minimum"), attr("max", "string", "Maximum"), attr("step", "string", "Step"), attr("value", "string", "Current value"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name"), attr("orientation", "string", "Orientation", "horizontal")], + [part("control", "input[type=range]", "Range input"), part("label", "label", "Label"), part("output", "span", "Value display")], + [change("{ value: number }", "Fires on change")], + "\n \n \n 50\n"), + input("petty-number-field", "Numeric input with increment/decrement and clamping", 2, + [attr("min", "string", "Minimum"), attr("max", "string", "Maximum"), attr("step", "string", "Step", "1"), attr("value", "string", "Current value"), attr("disabled", "boolean", "Disables"), attr("name", "string", "Form name")], + [part("control", "input", "Numeric input"), part("label", "label", "Label"), part("increment", "button", "Increment"), part("decrement", "button", "Decrement")], + [change("{ value: number }", "Fires on change")], + "\n \n \n \n \n"), + input("petty-combobox", "Searchable select with popover listbox and keyboard nav", 2, + [attr("value", "string", "Selected value"), attr("placeholder", "string", "Placeholder"), attr("disabled", "boolean", "Disables")], + [part("input", "input", "Search input"), part("listbox", "div[popover]", "Popover listbox")], + [change("{ value: string }", "Fires on select")], + "\n \n
\n A\n
\n"), + input("petty-listbox", "Inline selectable list with single or multiple selection", 2, + [attr("value", "string", "Selected value(s)"), attr("default-value", "string", "Initial value"), attr("multiple", "boolean", "Multi-select mode")], + [], [change("{ value: string }", "Fires on selection change")], + "\n Alpha\n Beta\n"), + input("petty-toggle-group", "Single or multi-selection toggle group", 2, + [attr("type", "string", "Mode: single|multiple", "single"), attr("value", "string", "Selected value(s)"), attr("default-value", "string", "Initial value"), attr("orientation", "string", "Orientation")], + [], [change("{ value: string }", "Fires on change")], + "\n Left\n Right\n"), + input("petty-date-picker", "Date input with calendar popover integration", 2, + [attr("value", "string", "ISO date"), attr("min", "string", "Earliest date"), attr("max", "string", "Latest date"), attr("disabled", "boolean", "Disables")], + [part("input", "input", "Date text input"), part("trigger", "button", "Calendar toggle"), part("calendar", "div[popover]", "Calendar popover")], + [change("{ value: string }", "Fires on date select")], + "\n \n \n
\n"), + input("petty-form", "Form wrapper with Zod validation and accessible error display", 1, + [], [], + [evt("petty-submit", "{ data: Record }", "Fires on valid submit"), evt("petty-invalid", "{ errors: Array<{ path, message }> }", "Fires on validation failure")], + "\n
\n \n \n \n \n \n \n
\n"), +]; diff --git a/packages/mcp/src/data/layout.ts b/packages/mcp/src/data/layout.ts new file mode 100644 index 0000000..cc2a71c --- /dev/null +++ b/packages/mcp/src/data/layout.ts @@ -0,0 +1,66 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function layout(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "layout", attributes, parts, events, example }; +} + +/** All layout-category component definitions for the MCP registry. */ +export const layoutComponents: ComponentInfo[] = [ + layout("petty-tabs", "Headless tabbed interface with reactive tab/panel sync", 1, + [attr("value", "string", "Active tab value"), attr("default-value", "string", "Initial active tab")], + [], [evt("petty-change", "{ value: string }", "Fires when active tab changes")], + "\n
\n Tab 1\n Tab 2\n
\n Content 1\n Content 2\n"), + layout("petty-accordion", "Headless accordion built on native details elements", 1, + [attr("type", "string", "Mode: single closes others, multiple allows many", "single")], + [part("content", "div", "Accordion item content area")], + [evt("petty-change", "{ value: string[] }", "Fires with array of open item values")], + "\n \n
\n Section 1\n
Content 1
\n
\n \n"), + layout("petty-collapsible", "Single disclosure wrapper on native details element", 1, + [attr("disabled", "boolean", "Prevents open/close interaction")], + [], [evt("petty-toggle", "{ open: boolean }", "Fires on open/close toggle")], + "\n
\n Toggle\n
Hidden content
\n
\n"), + layout("petty-card", "Structural container with optional heading-based labelling", 2, + [], [], [], + "\n

Card Title

\n

Card content goes here.

\n"), + layout("petty-separator", "Accessible divider with configurable orientation", 2, + [attr("orientation", "string", "Visual orientation", "horizontal")], + [], [], + ""), + layout("petty-skeleton", "Loading placeholder with aria-busy and loaded state transitions", 2, + [attr("loaded", "boolean", "Switches from loading to loaded state")], + [], [], + "\n
\n"), + layout("petty-badge", "Display-only status indicator with variant support", 2, + [attr("variant", "string", "Visual variant", "default")], + [], [], + "Active"), + layout("petty-avatar", "Image with automatic fallback on load error", 2, + [], [part("fallback", "span", "Fallback content shown on image error")], [], + "\n \"User\"\n JD\n"), + layout("petty-image", "Image element with fallback display on load failure", 3, + [], [part("fallback", "span", "Fallback shown on error")], [], + "\n \"Photo\"\n No image\n"), + layout("petty-wizard", "Multi-step flow with navigation between steps", 2, + [attr("value", "string", "Active step value"), attr("default-value", "string", "Initial step")], + [], [evt("petty-change", "{ value: string }", "Fires when step changes")], + "\n Step 1 content\n Step 2 content\n"), +]; diff --git a/packages/mcp/src/data/navigation.ts b/packages/mcp/src/data/navigation.ts new file mode 100644 index 0000000..f0ec4ff --- /dev/null +++ b/packages/mcp/src/data/navigation.ts @@ -0,0 +1,44 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function nav(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "navigation", attributes, parts, events, example }; +} + +/** All navigation-category component definitions for the MCP registry. */ +export const navigationComponents: ComponentInfo[] = [ + nav("petty-breadcrumbs", "Navigation breadcrumb trail with ARIA landmarks", 2, + [], [], [], + "\n
    \n
  1. Home
    2. \n
  2. Docs
    3. \n
  3. Current
    4. \n
\n"), + nav("petty-pagination", "Page navigation with prev/next and numbered items", 1, + [attr("total", "string", "Total number of items"), attr("page-size", "string", "Items per page", "10"), attr("current-page", "string", "Active page number", "1")], + [], + [evt("petty-change", "{ page: number }", "Fires when page changes")], + "\n Prev\n 1\n 2\n Next\n"), + nav("petty-navigation-menu", "Horizontal nav with optional popover dropdowns", 2, + [attr("orientation", "string", "Layout orientation", "horizontal")], + [], [], + "\n \n"), + nav("petty-link", "Headless anchor wrapper with disabled and external support", 2, + [attr("disabled", "boolean", "Prevents navigation"), attr("external", "boolean", "Opens in new tab with noopener")], + [], [], + "\n External Link\n"), +]; diff --git a/packages/mcp/src/data/overlays.ts b/packages/mcp/src/data/overlays.ts new file mode 100644 index 0000000..f2ad0e9 --- /dev/null +++ b/packages/mcp/src/data/overlays.ts @@ -0,0 +1,70 @@ +import type { ComponentInfo } from "../component-info.js"; + +type Tier = 1 | 2 | 3; +type Attr = ComponentInfo["attributes"][number]; +type Part = ComponentInfo["parts"][number]; +type Evt = ComponentInfo["events"][number]; + +function attr(name: string, type: string, description: string, def?: string): Attr { + const a: Attr = { name, type, description }; + if (def !== undefined) a.default = def; + return a; +} + +function part(name: string, element: string, description: string): Part { + return { name, element, description }; +} + +function evt(name: string, detail: string, description: string): Evt { + return { name, detail, description }; +} + +function overlay(tag: string, description: string, tier: Tier, attributes: Attr[], parts: Part[], events: Evt[], example: string): ComponentInfo { + return { tag, description, tier, category: "overlays", attributes, parts, events, example }; +} + +/** All overlay-category component definitions for the MCP registry. */ +export const overlayComponents: ComponentInfo[] = [ + overlay("petty-dialog", "Headless dialog on native dialog element with ARIA linking", 1, + [], [], + [evt("petty-close", "{ value: string }", "Fires when dialog closes with return value")], + "\n \n \n

Title

\n

Content

\n \n \n"), + overlay("petty-alert-dialog", "Confirmation dialog with role=alertdialog on native dialog", 1, + [], [], + [evt("petty-close", "{ value: string }", "Fires when closed with return value")], + "\n \n \n

Confirm

\n

Are you sure?

\n \n \n \n"), + overlay("petty-popover", "Headless popover on native Popover API with ARIA linking", 1, + [], [], + [evt("petty-toggle", "{ open: boolean }", "Fires on open/close")], + "\n \n
\n

Popover content

\n
\n"), + overlay("petty-drawer", "Slide-in panel built on native dialog with side positioning", 2, + [attr("side", "string", "Slide-in direction", "right")], + [], + [evt("petty-close", "{ value: string }", "Fires when drawer closes")], + "\n \n \n

Drawer Title

\n

Drawer content

\n \n"), + overlay("petty-tooltip", "Hover/focus label using Popover API with delay and ARIA linking", 2, + [attr("delay", "string", "Show delay in ms", "200")], + [part("trigger", "span", "Element that triggers tooltip"), part("content", "div[popover]", "Tooltip content popover")], + [evt("petty-toggle", "{ open: boolean }", "Fires on show/hide")], + "\n Hover me\n
Tooltip text
\n"), + overlay("petty-hover-card", "Rich hover preview using Popover API with open/close delays", 3, + [attr("open-delay", "string", "Delay before showing in ms", "300"), attr("close-delay", "string", "Delay before hiding in ms", "200")], + [part("trigger", "span", "Hover trigger element"), part("content", "div[popover]", "Card content popover")], + [evt("petty-toggle", "{ open: boolean }", "Fires on show/hide")], + "\n Hover for preview\n
\n

Rich preview content

\n
\n"), + overlay("petty-dropdown-menu", "Action menu built on the Popover API", 1, + [], + [part("trigger", "button", "Menu trigger button"), part("content", "div[popover]", "Menu content popover")], + [evt("petty-select", "{ value: string }", "Fires when a menu item is selected")], + "\n \n
\n Edit\n Delete\n
\n"), + overlay("petty-context-menu", "Right-click menu using Popover API with keyboard nav", 2, + [], + [part("trigger", "div", "Right-click target area"), part("content", "div[popover]", "Context menu popover")], + [evt("petty-select", "{ value: string }", "Fires when an item is selected")], + "\n
Right-click here
\n
\n Copy\n Paste\n
\n"), + overlay("petty-command-palette", "Search-driven command menu using native dialog", 2, + [], + [part("search", "input", "Search input field"), part("list", "div", "Command items container")], + [evt("petty-select", "{ value: string }", "Fires when a command is selected")], + "\n \n \n
\n Save\n
\n \n"), +]; diff --git a/packages/mcp/src/index.ts b/packages/mcp/src/index.ts new file mode 100644 index 0000000..a3d63bb --- /dev/null +++ b/packages/mcp/src/index.ts @@ -0,0 +1,49 @@ +import { Server } from "@modelcontextprotocol/sdk/server/index.js"; +import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js"; +import { CallToolRequestSchema, ListToolsRequestSchema } from "@modelcontextprotocol/sdk/types.js"; +import { discoverInput, handleDiscover } from "./tools/discover.js"; +import { inspectInput, handleInspect } from "./tools/inspect.js"; +import { composeInput, handleCompose } from "./tools/compose.js"; +import { validateInput, handleValidate } from "./tools/validate.js"; + +const TOOLS = [ + { name: "pettyui_discover", description: "List available PettyUI components, optionally filtered by category", inputSchema: JSON.parse(JSON.stringify(discoverInput.shape)) }, + { name: "pettyui_inspect", description: "Get full details for a PettyUI component by tag name", inputSchema: JSON.parse(JSON.stringify(inspectInput.shape)) }, + { name: "pettyui_compose", description: "Generate valid HTML for a PettyUI component with attributes and content", inputSchema: JSON.parse(JSON.stringify(composeInput.shape)) }, + { name: "pettyui_validate", description: "Validate HTML against a PettyUI component schema", inputSchema: JSON.parse(JSON.stringify(validateInput.shape)) }, +]; + +type Handler = (args: Record) => unknown; +const handlers: Record = { + pettyui_discover: (args) => handleDiscover(discoverInput.parse(args)), + pettyui_inspect: (args) => handleInspect(inspectInput.parse(args)), + pettyui_compose: (args) => handleCompose(composeInput.parse(args)), + pettyui_validate: (args) => handleValidate(validateInput.parse(args)), +}; + +/** Dispatches a tool call by name to its handler function. */ +function dispatchTool(name: string, args: Record): unknown { + const handler = handlers[name]; + if (!handler) throw new Error(`Unknown tool: ${name}`); + return handler(args); +} + +/** Creates and configures the PettyUI MCP server instance. */ +export function createServer(): Server { + const server = new Server({ name: "pettyui", version: "2.0.0-alpha.0" }, { capabilities: { tools: {} } }); + server.setRequestHandler(ListToolsRequestSchema, () => ({ tools: TOOLS })); + server.setRequestHandler(CallToolRequestSchema, (request) => { + const result = dispatchTool(request.params.name, (request.params.arguments ?? {}) as Record); + return { content: [{ type: "text" as const, text: JSON.stringify(result, null, 2) }] }; + }); + return server; +} + +/** Starts the MCP server on stdio transport. */ +export async function main(): Promise { + const server = createServer(); + const transport = new StdioServerTransport(); + await server.connect(transport); +} + +main(); diff --git a/packages/mcp/src/registry.ts b/packages/mcp/src/registry.ts new file mode 100644 index 0000000..ea7912b --- /dev/null +++ b/packages/mcp/src/registry.ts @@ -0,0 +1,33 @@ +import type { ComponentInfo } from "./component-info.js"; +import { inputComponents } from "./data/inputs.js"; +import { layoutComponents } from "./data/layout.js"; +import { overlayComponents } from "./data/overlays.js"; +import { feedbackComponents } from "./data/feedback.js"; +import { navigationComponents } from "./data/navigation.js"; +import { dataComponents } from "./data/data.js"; + +const registry = new Map(); +const allSources = [inputComponents, layoutComponents, overlayComponents, feedbackComponents, navigationComponents, dataComponents]; +for (const source of allSources) { + for (const component of source) { registry.set(component.tag, component); } +} + +/** Returns all registered components. */ +export function getAllComponents(): ComponentInfo[] { + return Array.from(registry.values()); +} + +/** Finds a component by its tag name, or returns undefined. */ +export function getComponent(tag: string): ComponentInfo | undefined { + return registry.get(tag); +} + +/** Returns all components matching the given category. */ +export function getComponentsByCategory(category: string): ComponentInfo[] { + return getAllComponents().filter((c) => c.category === category); +} + +/** Returns the set of all known tag names. */ +export function getTagNames(): Set { + return new Set(registry.keys()); +} diff --git a/packages/mcp/src/tools/compose.ts b/packages/mcp/src/tools/compose.ts new file mode 100644 index 0000000..1144478 --- /dev/null +++ b/packages/mcp/src/tools/compose.ts @@ -0,0 +1,35 @@ +import { z } from "zod"; +import { getComponent } from "../registry.js"; + +/** Zod schema for the compose tool input. */ +export const composeInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), + attributes: z.record(z.string(), z.string()).optional().describe("Attribute key-value pairs to set"), + content: z.string().optional().describe("Inner HTML content to place inside the component"), +}); + +function buildAttrString(attrs: Record): string { + const pairs: string[] = []; + for (const [key, val] of Object.entries(attrs)) { + if (val === "" || val === "true") pairs.push(key); + else pairs.push(`${key}="${val}"`); + } + return pairs.length > 0 ? " " + pairs.join(" ") : ""; +} + +function indentLines(text: string, spaces: number): string { + const pad = " ".repeat(spaces); + return text.split("\n").map((line) => (line.trim() ? pad + line : line)).join("\n"); +} + +/** Generates valid HTML for a PettyUI component with attributes and content. */ +export function handleCompose(input: z.infer): { html: string } | { error: string } { + const info = getComponent(input.tag); + if (!info) return { error: `Unknown component: ${input.tag}` }; + const attrStr = input.attributes ? buildAttrString(input.attributes) : ""; + const inner = input.content ?? indentLines(info.example.split("\n").slice(1, -1).join("\n"), 0).trim(); + const openTag = `<${info.tag}${attrStr}>`; + const closeTag = ``; + if (!inner) return { html: `${openTag}${closeTag}` }; + return { html: `${openTag}\n${indentLines(inner, 2)}\n${closeTag}` }; +} diff --git a/packages/mcp/src/tools/discover.ts b/packages/mcp/src/tools/discover.ts new file mode 100644 index 0000000..91a14eb --- /dev/null +++ b/packages/mcp/src/tools/discover.ts @@ -0,0 +1,13 @@ +import { z } from "zod"; +import { getAllComponents, getComponentsByCategory } from "../registry.js"; + +/** Zod schema for the discover tool input. */ +export const discoverInput = z.object({ + category: z.string().optional().describe("Filter: inputs, layout, navigation, overlays, feedback, data"), +}); + +/** Lists available PettyUI components, optionally filtered by category. */ +export function handleDiscover(input: z.infer): { tag: string; description: string; tier: number; category: string }[] { + const source = input.category ? getComponentsByCategory(input.category) : getAllComponents(); + return source.map((c) => ({ tag: c.tag, description: c.description, tier: c.tier, category: c.category })); +} diff --git a/packages/mcp/src/tools/inspect.ts b/packages/mcp/src/tools/inspect.ts new file mode 100644 index 0000000..849a52b --- /dev/null +++ b/packages/mcp/src/tools/inspect.ts @@ -0,0 +1,19 @@ +import { z } from "zod"; +import { getComponent, getTagNames } from "../registry.js"; +import type { ComponentInfo } from "../component-info.js"; + +/** Zod schema for the inspect tool input. */ +export const inspectInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), +}); + +/** Returns full component details or an error for unknown tags, with suggestions for near-misses. */ +export function handleInspect(input: z.infer): ComponentInfo | { error: string; suggestions?: string[] } { + const info = getComponent(input.tag); + if (info) return info; + const allTags = Array.from(getTagNames()); + const needle = input.tag.toLowerCase(); + const suggestions = allTags.filter((t) => t.includes(needle) || needle.includes(t.replace("petty-", ""))); + if (suggestions.length > 0) return { error: `Unknown component: ${input.tag}`, suggestions }; + return { error: `Unknown component: ${input.tag}. Use pettyui_discover to list all available components.` }; +} diff --git a/packages/mcp/src/tools/validate.ts b/packages/mcp/src/tools/validate.ts new file mode 100644 index 0000000..89d28fe --- /dev/null +++ b/packages/mcp/src/tools/validate.ts @@ -0,0 +1,60 @@ +import { z } from "zod"; +import { getComponent } from "../registry.js"; +import type { ComponentInfo } from "../component-info.js"; + +/** Zod schema for the validate tool input. */ +export const validateInput = z.object({ + tag: z.string().describe("The component tag name, e.g. petty-button"), + html: z.string().describe("The HTML string to validate against the component schema"), +}); + +function checkAttributes(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + const attrPattern = /\s([a-z][a-z0-9-]*)(?:=|[\s>])/g; + const foundAttrs = new Set(); + let match = attrPattern.exec(html); + while (match !== null) { + const name = match[1]; + if (name) foundAttrs.add(name); + match = attrPattern.exec(html); + } + const knownAttrs = new Set(info.attributes.map((a) => a.name)); + const reserved = new Set(["id", "class", "style", "slot", "data-part", "data-state", "role", "aria-label", "aria-labelledby", "aria-describedby", "hidden", "tabindex", "popover", "popovertarget", "commandfor", "command", "type", "name", "value", "placeholder", "href", "src", "alt", "for", "disabled", "checked", "required"]); + for (const found of foundAttrs) { + if (!knownAttrs.has(found) && !reserved.has(found) && !found.startsWith("aria-") && !found.startsWith("data-")) { + errors.push(`Unknown attribute "${found}" on <${info.tag}>`); + } + } + return errors; +} + +function checkParts(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + for (const part of info.parts) { + const partPattern = `data-part="${part.name}"`; + if (!html.includes(partPattern) && !html.includes(`data-part='${part.name}'`)) { + errors.push(`Missing required part "${part.name}" (${part.element}) — add data-part="${part.name}"`); + } + } + return errors; +} + +function checkNesting(html: string, info: ComponentInfo): string[] { + const errors: string[] = []; + if (!html.includes(`<${info.tag}`) || !html.includes(``)) { + errors.push(`HTML must contain a <${info.tag}> element with a closing tag`); + } + return errors; +} + +/** Validates HTML against a PettyUI component schema, checking parts, attributes, and nesting. */ +export function handleValidate(input: z.infer): { valid: boolean; errors: string[] } { + const info = getComponent(input.tag); + if (!info) return { valid: false, errors: [`Unknown component: ${input.tag}`] }; + const errors = [ + ...checkNesting(input.html, info), + ...checkParts(input.html, info), + ...checkAttributes(input.html, info), + ]; + return { valid: errors.length === 0, errors }; +} diff --git a/packages/mcp/tsconfig.json b/packages/mcp/tsconfig.json new file mode 100644 index 0000000..5285d28 --- /dev/null +++ b/packages/mcp/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../tsconfig.base.json", + "compilerOptions": { + "rootDir": "src", + "outDir": "dist" + }, + "include": ["src"] +} diff --git a/packages/showcase/index.html b/packages/showcase/index.html new file mode 100644 index 0000000..7e7972b --- /dev/null +++ b/packages/showcase/index.html @@ -0,0 +1,422 @@ + + + + + + + PettyUI — Component Showcase + + + + + + + + +
+ +
+

PettyUI

+

45 headless Web Components. Zero dependencies. Browser-native APIs. The smallest UI library that does everything.

+
+ components + + dependencies + + ~ runtime +
+
+ +
+

Why PettyUI

+
+
+
Browser-Native
+
Popover API, native Dialog, Navigation API, Invoker Commands. No polyfills.
+
+
+
Zero Runtime
+
500-byte signals. No virtual DOM, no framework. Just Custom Elements.
+
+
+
AI-Native
+
Zod schemas for every prop. MCP tools for agent integration.
+
+
+
+ +
+ +
+

Inputs & Forms

 +

Form primitives with built-in ARIA, keyboard navigation, and event handling.

 +
+ +
+

Button

+
+ + + + +
+

<petty-button>

+
+ +
+

Text Field

+ + + + We will never share your email. + + +

<petty-text-field>

+
+ +
+

Checkbox & Switch

+
+ + + + + + + + + + + + Dark mode + +
+

<petty-checkbox> <petty-switch>

+
+ +
+

Radio Group

+ + Small + Medium + Large + +

<petty-radio-group>

+
+ +
+

Toggle & Toggle Group

+
+
+ + +
+ + Left + Center + Right + +
+

<petty-toggle> <petty-toggle-group>

+
+ +
+

Number Field & Slider

+ + + + + + + + + + 65 + +

<petty-number-field> <petty-slider>

+
+ +
+

Select

+ + +
+ TypeScript + Rust + Go + Python +
+ +

<petty-select>

+
+ +
+

Tags Input

+ + + + + +

<petty-tags-input>

+
+ +
+
+ +
+

Navigation

 +

Tab bars, accordions, breadcrumbs, and pagination — all keyboard-accessible.

 +
+ +
+

Tabs

+ +
+ Overview + Features + API +
+ PettyUI is a headless component library built on vanilla Web Components. No framework required. + Zero dependencies, Popover API, native dialog, Invoker Commands, Navigation API, View Transitions. + Every component is a Custom Element. Import and use anywhere: React, Vue, Svelte, or plain HTML. + +

<petty-tabs>

+
+ +
+

Accordion

+ + +
Installation

npm install pettyui — zero peer dependencies.

+ + +
Usage

Import the component, write HTML. That is it.

+ + +
Styling

No Shadow DOM. Style with plain CSS, Tailwind, or anything.

+ + +

<petty-accordion>

+
+ +
+

Breadcrumbs & Pagination

+ +
    + Home + Components + Button +
+ + + + + +

<petty-breadcrumbs> <petty-pagination>

+
+ +
+
+ +
+

Overlays

 +

Dialogs, popovers, tooltips, and drawers — powered by native browser APIs.

 +
+ +
+

Dialog & Alert Dialog

+
+ + +
+

<petty-dialog> <petty-alert-dialog>

+
+ +
+

Popover & Tooltip

+
+ + +
This uses the native Popover API. Click outside to dismiss.
+ + + Hover me +
Native tooltip via Popover API
+ +
+

<petty-popover> <petty-tooltip>

+
+ +
+

Dropdown Menu

+ + + + +

<petty-dropdown-menu>

+
+ +
+
+ +
+

Feedback & Display

 +

Status indicators, progress bars, alerts, badges, and notifications.

 +
+ +
+

Alert

+
+
Deployed successfully
Your changes are live and visible to all users.
 +
Build failed
Check the CI logs for error details.
 +
Rate limit approaching
You have used 90% of your API quota this month.
 +
+

<petty-alert>

+
+ +
+

Progress & Meter

+
+
+
Upload progress72%
+
+
+
+
CPU usage35%
+
+
+
+
Memory85%
+
+
+
+
+
Loading indicator
+
+ + + + +
+
+

<petty-progress> <petty-meter> <petty-loading-indicator>

+
+ +
+

Badge & Avatar

+
+
+ Default + Active + Offline + Pending +
+
+ MB + JD + AK +
+
+

<petty-badge> <petty-avatar>

+
+ +
+

Toast

+
+ + +
+

<petty-toast-region>

+
+ +
+

Skeleton & Card

+ +

Loading content

 + + + + + + + + + +

<petty-card> <petty-skeleton>

+
+ + + +
+
+ +
+ +

PettyUI v2 — 45 Web Components, 0 dependencies, built on browser standards.

+
+ +
//ST3
+ +
+ + + +

Welcome to PettyUI

+

This dialog uses the native dialog element. Focus trap, backdrop, and Escape key work out of the box.

+ + + + + +

Delete project?

+

This action cannot be undone. All data will be permanently removed.

+
+ + +
+ + + + + diff --git a/packages/showcase/package.json b/packages/showcase/package.json new file mode 100644 index 0000000..c16d13e --- /dev/null +++ b/packages/showcase/package.json @@ -0,0 +1,16 @@ +{ + "name": "@pettyui/showcase", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build" + }, + "dependencies": { + "pettyui": "workspace:*" + }, + "devDependencies": { + "vite": "^6.3.5" + } +} diff --git a/packages/showcase/style.css b/packages/showcase/style.css new file mode 100644 index 0000000..5789ef7 --- /dev/null +++ b/packages/showcase/style.css @@ -0,0 +1,1807 @@ +/* ============================================================ + PettyUI Showcase — Premium Dark SaaS Theme + ============================================================ */ + +/* --- Design Tokens --- */ +:root { + /* ── Gray palette (Slate) ── */ + --gray-1: #f4f6f9; + --gray-2: #f1f5f9; + --gray-3: #e2e8f0; + --gray-4: #cbd5e1; + --gray-5: #94a3b8; + --gray-6: #64748b; + --gray-7: #475569; + --gray-8: #334155; + --gray-9: #1e293b; + --gray-10: #0f172a; + + /* ── Accent palette (Aperture Blue) ── */ + --accent-1: #edf9fe; + --accent-2: #d4f1fd; + --accent-3: #a8e3fb; + --accent-4: #6dcef5; + --accent-5: #36c0f1; + --accent-6: #1fa8d8; + --accent-7: #1890ba; + --accent-8: #14769a; + --accent-contrast: #ffffff; + + /* ── Semantic colors ── */ + --color-bg: var(--gray-1); + --color-surface: #ffffff; + --color-surface-raised: var(--gray-2); + --color-surface-sunken: var(--gray-3); + --color-border: var(--gray-3); + --color-border-strong: var(--gray-4); + --color-text: var(--gray-10); + --color-text-secondary: var(--gray-6); + --color-text-tertiary: var(--gray-5); + --color-accent: var(--accent-5); + --color-accent-hover: var(--accent-6); + --color-accent-subtle: var(--accent-1); + --color-accent-muted: rgba(54, 192, 241, 0.08); + --color-danger: #dc2626; + --color-danger-subtle: #fef2f2; + --color-warning: #d97706; + --color-warning-subtle: #fffbeb; + --color-success: #16a34a; + --color-success-subtle: #f0fdf4; + + /* ── Typography ── */ + --font-sans: "Geist", -apple-system, system-ui, sans-serif; + --font-mono: "Geist Mono", ui-monospace, monospace; + --text-xs: 0.75rem; + --text-sm: 0.8125rem; + --text-base: 0.875rem; + --text-lg: 1rem; + --text-xl: 1.125rem; + --text-2xl: 1.5rem; + --text-3xl: 1.875rem; + --text-4xl: 2.25rem; + --text-hero: clamp(3rem, 8vw, 5rem); + --weight-normal: 400; + --weight-medium: 500; + --weight-semibold: 600; + --weight-bold: 700; + --leading-tight: 1.15; + --leading-normal: 1.5; + --leading-relaxed: 1.7; + + /* ── Spacing (4px base) ── */ + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.25rem; + --space-6: 1.5rem; + --space-8: 2rem; + --space-10: 2.5rem; + --space-12: 3rem; + --space-16: 4rem; + --space-20: 5rem; + --space-24: 6rem; + + /* ── Radius ── */ + --radius-xs: 4px; + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-xl: 16px; + --radius-pill: 999px; + + /* ── Elevation ── */ + --elevation-0: none; + --elevation-1: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04); + --elevation-2: 0 2px 4px rgba(0,0,0,0.05), 0 2px 8px rgba(0,0,0,0.04); + --elevation-3: 0 4px 8px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); + --elevation-4: 0 8px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); + + /* ── State layers ── */ + --state-hover: rgba(0, 0, 0, 0.04); + --state-focus: rgba(0, 0, 0, 0.06); + --state-pressed: rgba(0, 0, 0, 0.08); + + /* ── Motion (M3 Expressive) ── */ + --ease-standard: cubic-bezier(0.2, 0, 0, 1); + --ease-expressive: cubic-bezier(0.34, 1.56, 0.64, 1); + --ease-effects: cubic-bezier(0.4, 0, 0.2, 1); + --duration-fast: 150ms; + --duration-normal: 250ms; + --duration-emphasis: 400ms; + + /* ── Legacy aliases (used in component styles) ── */ + --c-bg: var(--color-bg); + --c-surface: var(--color-surface); + --c-surface-solid: var(--color-surface); + --c-surface-2: var(--color-surface-raised); + --c-surface-3: var(--color-surface-sunken); + --c-border: var(--color-border); + --c-border-2: var(--color-border-strong); + --c-green: var(--color-accent); + --c-green-dim: var(--color-accent-hover); + --c-green-glow: var(--color-accent-muted); + --c-green-glow-md: rgba(37, 99, 235, 0.12); + --c-pink: var(--color-danger); + --c-yellow: var(--color-warning); + --c-blue: var(--color-accent); + --c-text: var(--color-text); + --c-text-2: var(--color-text-secondary); + --c-text-3: var(--color-text-tertiary); + --c-font: var(--font-sans); + --c-mono: var(--font-mono); +} + +/* --- Reset --- */ +*, *::before, *::after { + box-sizing: border-box; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + background: var(--color-bg); + background-image: linear-gradient(135deg, rgba(54, 192, 241, 0.03) 0%, transparent 40%, rgba(54, 192, 241, 0.02) 100%); + background-attachment: fixed; + color: var(--color-text); + font-family: var(--font-sans); + font-weight: var(--weight-normal); + font-size: 15px; + line-height: 1.6; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + overflow-x: hidden; +} + +/* --- Accessibility: Skip Nav --- */ +.skip-link { + position: absolute; + top: -100px; + left: 1rem; + background: var(--c-green); + color: #fff; + padding: 8px 16px; + border-radius: var(--radius-sm); + font-size: 0.8125rem; + font-weight: 600; + z-index: 10000; + text-decoration: none; +} + +.skip-link:focus { + top: 1rem; +} + +/* --- Screen Reader Only --- */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* --- Page Container --- */ +.page { + max-width: 1200px; + margin: 0 auto; + padding: 0 clamp(1.5rem, 5vw, 3rem) 8rem; +} + +/* ============================================================ + HERO + ============================================================ */ +.hero { + min-height: 85vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + position: relative; + padding: 8rem 0 6rem; +} + +.hero::before { + content: ""; + position: absolute; + top: 10%; + left: 50%; + width: 800px; + height: 500px; + transform: translateX(-50%); + background: radial-gradient(ellipse at center, rgba(54, 192, 241, 0.07) 0%, transparent 65%); + pointer-events: none; + filter: blur(80px); +} + +.hero-pill { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: var(--color-accent-subtle); + border: 1px solid var(--accent-3); + border-radius: var(--radius-pill); + padding: 6px 16px; + font-family: var(--font-sans); + font-size: var(--text-sm); + font-weight: var(--weight-medium); + color: var(--color-accent); + letter-spacing: 0.01em; + margin-bottom: var(--space-8); + position: relative; +} + +.hero-pill .pill-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--color-accent); +} + +.hero h1 { + font-family: var(--font-sans); + font-size: clamp(3.5rem, 10vw, 6rem); + font-weight: var(--weight-bold); + letter-spacing: -0.045em; + line-height: 1; + position: relative; + color: var(--color-text); +} + +.hero-sub { + color: var(--color-text-secondary); + font-family: var(--font-sans); + font-size: clamp(1rem, 1.8vw, 1.125rem); + font-weight: var(--weight-normal); + line-height: var(--leading-relaxed); + margin-top: var(--space-5); + max-width: 48ch; + position: relative; +} + + +/* Stats row */ +.hero-stats { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + margin-top: var(--space-8); +} + +.hero-stat { + font-size: var(--text-base); + color: var(--color-text-secondary); +} + +.hero-stat petty-counter { + font-weight: var(--weight-bold); + font-variant-numeric: tabular-nums; + color: var(--color-text); +} + +.hero-stat-dot { + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--color-border-strong); +} + +/* Custom element display */ +petty-typewriter { + display: inline; +} + +petty-reveal { + display: block; +} + +petty-counter { + font-variant-numeric: tabular-nums; +} + +/* ============================================================ + VALUE PROPS + ============================================================ */ +.value-props { + margin-top: 0; + padding: var(--space-16) 0; + border-top: 1px solid var(--color-border); +} + +.value-list { + display: flex; + gap: var(--space-12); + margin: 0; +} + +.value-item { + flex: 1; +} + +.value-item dt { + font-size: var(--text-lg); + font-weight: var(--weight-semibold); + color: var(--color-text); + margin-bottom: var(--space-2); +} + +.value-item dd { + margin: 0; + font-size: var(--text-base); + color: var(--color-text-secondary); + line-height: var(--leading-relaxed); +} + +/* ============================================================ + SECTIONS + ============================================================ */ + +/* Separator between major areas */ +.section-separator { + position: relative; + height: 1px; + margin: 0; +} + +.section-separator::before { + content: ""; + position: absolute; + left: 50%; + top: 0; + transform: translateX(-50%); + width: 100%; + max-width: 600px; + height: 1px; + background: linear-gradient( + 90deg, + transparent 0%, + var(--c-border-2) 30%, + var(--c-border-2) 70%, + transparent 100% + ); +} + +/* Ambient gradient between sections */ +.section-glow { + position: relative; +} + +.section-glow::before { + content: ""; + position: absolute; + top: -200px; + left: 50%; + width: 700px; + height: 400px; + transform: translateX(-50%); + background: radial-gradient( + ellipse at center, + rgba(34, 197, 94, 0.03) 0%, + transparent 70% + ); + pointer-events: none; + filter: blur(80px); +} + +.section { + margin-top: 96px; + position: relative; +} + +.section-title { + font-family: var(--font-sans); + font-size: clamp(1.75rem, 4vw, 2.5rem); + font-weight: var(--weight-bold); + letter-spacing: -0.035em; + line-height: var(--leading-tight); + color: var(--color-text); +} + +.section-desc { + font-family: var(--font-sans); + font-size: var(--text-lg); + font-weight: var(--weight-normal); + color: var(--color-text-secondary); + margin-top: var(--space-3); + max-width: 50ch; + margin-bottom: 40px; + max-width: 48ch; + line-height: 1.6; +} + +/* ============================================================ + CARD GRID + ============================================================ */ +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); + gap: var(--space-6); +} + +.demo-card { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.6); + border-radius: var(--radius-lg); + padding: var(--space-8); + box-shadow: var(--elevation-2), 0 0 0 1px rgba(0, 0, 0, 0.03); +} + +.demo-card h3 { + font-family: var(--font-sans); + font-size: var(--text-lg); + font-weight: var(--weight-semibold); + color: var(--color-text); + margin-bottom: var(--space-5); + padding-bottom: var(--space-4); + border-bottom: 1px solid var(--color-border); +} + +.demo-card .tag-name { + font-family: var(--font-mono); + font-size: var(--text-xs); + font-weight: var(--weight-normal); + color: var(--color-text-tertiary); + margin-top: var(--space-6); +} + +.demo-area { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.demo-row { + display: flex; + align-items: center; + gap: var(--space-3); + flex-wrap: wrap; +} + +.demo-row-loose { + display: flex; + align-items: center; + gap: var(--space-4); + flex-wrap: wrap; +} + +.demo-row-spacious { + display: flex; + align-items: flex-end; + gap: var(--space-6); + flex-wrap: wrap; +} + +.wide { + grid-column: 1 / -1; +} + +.muted-sm { + color: var(--c-text-3); + font-size: 0.75rem; +} + +/* ============================================================ + FOOTER + ============================================================ */ +.footer-section { + text-align: center; + padding-top: 48px; + margin-top: 128px; +} + +.footer-text { + margin-top: 24px; + font-size: 0.8125rem; + color: var(--c-text-3); +} + +.st3-sig { + text-align: right; + padding: 48px 0 16px; + font-family: var(--c-mono); + font-size: 0.5625rem; + color: var(--c-text-3); + letter-spacing: 0.2em; + opacity: 0.3; +} + +/* ============================================================ + COMPONENT STYLES: Buttons + ============================================================ */ +petty-button button { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + border-radius: var(--radius-pill); + color: var(--color-text); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 24px; + line-height: 1.25; + height: 40px; + transition: background var(--duration-normal) var(--ease-effects), border-color var(--duration-fast), box-shadow var(--duration-normal) var(--ease-effects); +} + +petty-button button:hover { + background: var(--color-surface-raised); + box-shadow: var(--elevation-1); +} + +petty-button button:disabled, petty-button[disabled] button { + opacity: 0.38; + cursor: not-allowed; +} + +petty-button[data-state="loading"] button { + opacity: 0.38; + cursor: wait; +} + +petty-button button.primary { + background: var(--color-accent); + border-color: var(--color-accent); + color: var(--accent-contrast); + font-weight: var(--weight-medium); + box-shadow: var(--elevation-1); +} + +petty-button button.primary:hover { + background: var(--color-accent-hover); + border-color: var(--color-accent-hover); + box-shadow: var(--elevation-2); +} + +.btn-outline { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + color: var(--color-text); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 24px; + height: 40px; + border-radius: var(--radius-pill); + transition: background var(--duration-normal) var(--ease-effects), box-shadow var(--duration-normal); +} + +.btn-outline:hover { + background: var(--color-surface-raised); + box-shadow: var(--elevation-1); +} + +.hint-text { + cursor: help; + border-bottom: 1px dashed var(--c-text-3); + color: var(--c-text-2); + font-size: 0.875rem; + padding-bottom: 2px; +} + +/* ============================================================ + COMPONENT STYLES: Badge & Avatar + ============================================================ */ +petty-badge { + display: inline-flex; + align-items: center; + font-family: var(--c-mono); + font-size: 0.6875rem; + height: 32px; + font-weight: 500; + padding: 3px 12px; + border-radius: var(--radius-md); + border: 1px solid var(--c-border-2); + background: var(--c-surface-2); + color: var(--c-text-2); +} + +petty-badge[data-variant="success"] { + border-color: rgba(34, 197, 94, 0.3); + color: var(--c-green); + background: var(--c-green-glow); +} + +petty-badge[data-variant="error"] { + border-color: rgba(244, 63, 94, 0.3); + color: var(--c-pink); + background: rgba(244, 63, 94, 0.08); +} + +petty-badge[data-variant="warning"] { + border-color: rgba(234, 179, 8, 0.3); + color: var(--c-yellow); + background: rgba(234, 179, 8, 0.08); +} + +petty-avatar { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + background: var(--c-surface-3); + color: var(--c-text-2); + font-family: var(--c-font); + font-size: 0.75rem; + font-weight: 600; +} + +petty-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +/* ============================================================ + COMPONENT STYLES: Separator + ============================================================ */ +petty-separator { + display: block; + height: 1px; + background: var(--c-border); + margin: 12px 0; +} + +/* ============================================================ + COMPONENT STYLES: Skeleton & Card + ============================================================ */ +petty-skeleton { + display: block; + height: 0.75rem; + border-radius: var(--radius-sm); + background: linear-gradient( + 90deg, + var(--gray-3) 0%, + var(--gray-2) 40%, + var(--gray-3) 80% + ); + background-size: 300% 100%; + animation: shimmer 1.8s ease-in-out infinite; +} + +@keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.skeleton-stack { + display: flex; + flex-direction: column; + gap: 8px; +} + +.skel-80 { + width: 80%; + height: 10px; + border-radius: 4px; +} + +.skel-60 { + width: 60%; + height: 10px; + border-radius: 4px; +} + +.skel-70 { + width: 70%; + height: 10px; + border-radius: 4px; +} + +.skel-btn { + width: 5rem; + height: 1.75rem; + border-radius: var(--radius-sm); +} + +petty-card { + display: block; + border: 1px solid var(--c-border); + border-radius: var(--radius-lg); + background: var(--c-surface); + overflow: hidden; +} + +petty-card-header { + display: block; + padding: 20px 20px 0; +} + +petty-card-header h4 { + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 600; +} + +petty-card-content { + display: flex; + flex-direction: column; + gap: 8px; + padding: 12px 20px; + color: var(--c-text-2); + font-size: 0.8125rem; +} + +petty-card-footer { + display: flex; + gap: 8px; + padding: 0 20px 20px; +} + +/* ============================================================ + COMPONENT STYLES: Text Field + ============================================================ */ +petty-text-field { + display: flex; + flex-direction: column; + gap: 6px; +} + +petty-text-field [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); +} + +petty-text-field input[data-part="control"] { + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + color: var(--c-text); + font-family: var(--c-font); + font-size: 0.8125rem; + padding: 16px; + height: 56px; + outline: none; + transition: border-color var(--duration-fast) var(--ease-effects), box-shadow var(--duration-fast) var(--ease-effects); +} + +petty-text-field input:focus { + border-color: var(--c-green); + border-width: 2px; + padding: 15px; + box-shadow: 0 0 0 2px var(--c-green-glow); +} + +petty-text-field [data-part="error"] { + color: var(--c-pink); + font-size: 0.75rem; + min-height: 0.875rem; +} + +petty-text-field [data-part="description"] { + color: var(--c-text-3); + font-size: 0.75rem; +} + +/* ============================================================ + COMPONENT STYLES: Checkbox & Switch + ============================================================ */ +petty-checkbox { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + min-height: 48px; +} + +petty-checkbox input[data-part="control"] { + appearance: none; + width: 18px; + height: 18px; + border: 1.5px solid var(--c-border-2); + border-radius: 2px; + background: var(--c-bg); + cursor: pointer; + transition: background var(--duration-fast) var(--ease-effects), border-color var(--duration-fast) var(--ease-effects), transform var(--duration-normal) var(--ease-expressive); +} + +petty-checkbox input:checked { + background: var(--color-accent); + border-color: var(--color-accent); + background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E"); + background-size: 12px; + background-position: center; + background-repeat: no-repeat; + transform: scale(1.1); +} + +petty-checkbox input:not(:checked) { + transform: scale(1); +} + +petty-checkbox [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); + cursor: pointer; +} + +petty-switch { + display: inline-flex; + align-items: center; + gap: 12px; + min-height: 48px; +} + +petty-switch button[data-part="control"] { + position: relative; + width: 52px; + height: 32px; + border-radius: 16px; + border: none; + background: var(--c-surface-3); + cursor: pointer; + transition: background var(--duration-normal) var(--ease-effects); + padding: 0; +} + +petty-switch[data-state="on"] button[data-part="control"] { + background: var(--c-green); +} + +petty-switch [data-part="thumb"] { + display: block; + width: 16px; + height: 16px; + border-radius: 50%; + background: white; + position: absolute; + top: 8px; + left: 6px; + transition: transform var(--duration-normal) var(--ease-expressive), width var(--duration-normal) var(--ease-expressive), height var(--duration-normal) var(--ease-expressive), top var(--duration-normal) var(--ease-expressive); + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); +} + +petty-switch[data-state="on"] [data-part="thumb"] { + width: 24px; + height: 24px; + top: 4px; + transform: translateX(22px); +} + +petty-switch [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); +} + +/* ============================================================ + COMPONENT STYLES: Radio Group + ============================================================ */ +petty-radio-group { + display: flex; + flex-direction: column; + gap: 6px; +} + +petty-radio-item { + display: inline-flex; + align-items: center; + gap: 8px; + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + color: var(--c-text-2); + padding: 4px 0; + min-height: 48px; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-radio-item[data-state="checked"] { + color: var(--c-text); +} + +petty-radio-item::before { + content: ""; + width: 20px; + height: 20px; + border-radius: 50%; + border: 1.5px solid var(--c-border-2); + background: var(--c-bg); + transition: border-color var(--duration-fast) var(--ease-effects), border-width var(--duration-normal) var(--ease-expressive); + flex-shrink: 0; +} + +petty-radio-item[data-state="checked"]::before { + border-color: var(--c-green); + border-width: 5px; +} + +/* ============================================================ + COMPONENT STYLES: Toggle & Toggle Group + ============================================================ */ +petty-toggle button[data-part="control"] { + background: var(--color-surface); + border: 1px solid var(--color-border-strong); + border-radius: var(--radius-pill); + color: var(--color-text-secondary); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 20px; + height: 40px; + transition: all var(--duration-normal) var(--ease-effects); +} + +petty-toggle[data-state="on"] button[data-part="control"] { + background: var(--color-accent-subtle); + border-color: var(--color-accent); + color: var(--color-accent); +} + +petty-toggle-group { + display: inline-flex; + border-radius: var(--radius-pill); + overflow: hidden; + border: 1px solid var(--color-border-strong); +} + +petty-toggle-group-item { + background: var(--color-surface); + border: none; + border-right: 1px solid var(--color-border); + color: var(--color-text-secondary); + cursor: pointer; + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-medium); + padding: 10px 20px; + height: 40px; + flex: 1; + text-align: center; + transition: all var(--duration-fast) var(--ease-effects); +} + +petty-toggle-group-item:last-child { + border-right: none; +} + +petty-toggle-group-item[data-state="on"] { + background: var(--color-accent); + color: var(--accent-contrast); +} + +/* ============================================================ + COMPONENT STYLES: Slider & Number Field + ============================================================ */ +petty-slider { + display: flex; + flex-direction: column; + gap: 8px; +} + +petty-slider [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); +} + +petty-slider input[type="range"] { + -webkit-appearance: none; + appearance: none; + width: 100%; + height: 6px; + background: var(--color-surface-sunken); + border-radius: var(--radius-pill); + outline: none; +} + +petty-slider input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: var(--color-accent); + cursor: pointer; + box-shadow: var(--elevation-2); + transition: transform var(--duration-normal) var(--ease-expressive); +} + +petty-slider input[type="range"]::-webkit-slider-thumb:hover { + transform: scale(1.15); +} + +petty-slider input[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); +} + +petty-slider [data-part="output"] { + font-family: var(--c-mono); + font-size: 0.8125rem; + color: var(--c-text-2); + align-self: flex-end; +} + +petty-number-field { + display: inline-flex; + align-items: center; +} + +petty-number-field [data-part="label"] { + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + color: var(--c-text-2); + margin-right: 12px; +} + +petty-number-field button { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.875rem; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-number-field button:hover { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-number-field [data-part="decrement"] { + border-radius: var(--radius-sm) 0 0 var(--radius-sm); +} + +petty-number-field [data-part="increment"] { + border-radius: 0 var(--radius-sm) var(--radius-sm) 0; +} + +petty-number-field input[data-part="control"] { + -moz-appearance: textfield; + appearance: textfield; + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-left: none; + border-right: none; + color: var(--c-text); + font-family: var(--c-mono); + font-size: 0.8125rem; + text-align: center; + width: 48px; + height: 32px; + outline: none; +} + +petty-number-field input::-webkit-inner-spin-button, +petty-number-field input::-webkit-outer-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* ============================================================ + COMPONENT STYLES: Tags Input + ============================================================ */ +petty-tags-input { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 6px; + background: var(--c-bg); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + padding: 6px 10px; + transition: border-color var(--duration-fast) var(--ease-effects), box-shadow var(--duration-fast) var(--ease-effects); +} + +petty-tags-input:focus-within { + border-color: var(--c-green); + box-shadow: 0 0 0 3px var(--c-green-glow); +} + +petty-tags-input [data-part="tags"] { + display: contents; +} + +petty-tags-input [data-part="tag"] { + display: inline-flex; + align-items: center; + gap: 4px; + background: var(--c-green-glow); + border: 1px solid rgba(34, 197, 94, 0.2); + border-radius: 4px; + color: var(--c-green); + font-family: var(--c-mono); + font-size: 0.75rem; + font-weight: 500; + padding: 2px 8px; +} + +petty-tags-input [data-part="tag-remove"] { + background: none; + border: none; + color: var(--c-green-dim); + cursor: pointer; + font-size: 0.75rem; + padding: 0; + line-height: 1; +} + +petty-tags-input [data-part="tag-remove"]:hover { + color: var(--c-pink); +} + +petty-tags-input input[data-part="input"] { + background: transparent; + border: none; + color: var(--c-text); + font-family: var(--c-font); + font-size: 0.8125rem; + flex: 1; + min-width: 80px; + outline: none; + padding: 4px 0; +} + +petty-tags-input input[data-part="input"]::placeholder { + color: var(--c-text-3); +} + +/* ============================================================ + COMPONENT STYLES: Select + ============================================================ */ +petty-select { + display: inline-block; +} + +petty-select [data-part="trigger"] { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-sm); + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + padding: 8px 12px; + min-width: 150px; + text-align: left; + anchor-name: --petty-select-anchor; + transition: border-color var(--duration-fast) var(--ease-effects); +} + +petty-select [data-part="trigger"]:hover { + border-color: var(--c-text-3); +} + +petty-select [data-part="listbox"] { + background: var(--c-surface-2); + border: 1px solid var(--c-border-2); + border-radius: var(--radius-md); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1); + min-width: 150px; + padding: 4px; + margin: 0; + position-anchor: --petty-select-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 4px; +} + +petty-select-option { + display: block; + border-radius: var(--radius-xs); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.8125rem; + padding: 8px 10px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-select-option:hover, +petty-select-option[data-highlighted] { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-select-option[aria-selected="true"] { + color: var(--c-green); +} + +/* ============================================================ + COMPONENT STYLES: Tabs + ============================================================ */ +[role="tablist"] { + display: flex; + border-bottom: 1px solid var(--c-border); + gap: 0; +} + +petty-tab { + background: none; + border: none; + border-bottom: 3px solid transparent; + color: var(--c-text-3); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + margin-bottom: -1px; + padding: 12px 16px; + height: 48px; + display: inline-flex; + align-items: center; + transition: color var(--duration-fast) var(--ease-effects), border-color var(--duration-fast) var(--ease-effects); +} + +petty-tab:hover { + color: var(--c-text-2); +} + +petty-tab[data-state="active"] { + color: var(--c-text); + border-bottom-color: var(--c-green); +} + +petty-tab-panel { + display: block; + padding: 20px 0; + color: var(--c-text-2); + font-size: 0.875rem; + line-height: 1.7; +} + +petty-tab-panel[hidden] { + display: none; +} + +/* ============================================================ + COMPONENT STYLES: Accordion + ============================================================ */ +petty-accordion { + display: flex; + flex-direction: column; +} + +petty-accordion-item { + display: block; + border-bottom: 1px solid var(--c-border); +} + +petty-accordion-item summary { + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 500; + list-style: none; + padding: 16px 0; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-accordion-item summary::-webkit-details-marker { + display: none; +} + +petty-accordion-item details[open] summary { + color: var(--c-text); +} + +petty-accordion-item [data-part="content"] { + color: var(--c-text-3); + font-size: 0.875rem; + padding-bottom: 16px; + line-height: 1.7; +} + +/* ============================================================ + COMPONENT STYLES: Breadcrumbs & Pagination + ============================================================ */ +petty-breadcrumbs { + display: flex; + align-items: center; +} + +petty-breadcrumbs ol { + display: flex; + align-items: center; + list-style: none; + padding: 0; + margin: 0; +} + +petty-breadcrumb-item { + display: inline-flex; + align-items: center; + font-size: 0.8125rem; +} + +petty-breadcrumb-item::after { + content: "/"; + color: var(--c-text-3); + margin: 0 8px; +} + +petty-breadcrumb-item:last-child::after { + display: none; +} + +petty-breadcrumb-item a { + color: var(--c-text-3); + text-decoration: none; + transition: color var(--duration-fast) var(--ease-effects); +} + +petty-breadcrumb-item a:hover { + color: var(--c-text); +} + +petty-breadcrumb-item[data-state="current"] { + color: var(--c-text); + font-weight: 500; +} + +petty-pagination nav { + display: flex; + align-items: center; + gap: 4px; +} + +petty-pagination-item { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 32px; + height: 32px; + border-radius: var(--radius-sm); + background: var(--c-surface-2); + border: 1px solid var(--c-border); + color: var(--c-text-3); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.8125rem; + font-weight: 500; + padding: 0 8px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-pagination-item:hover { + background: var(--c-surface-3); + color: var(--c-text); +} + +petty-pagination-item[data-state="active"] { + background: var(--c-text); + color: var(--c-bg); + border-color: var(--c-text); +} + +petty-pagination-item[disabled] { + opacity: 0.38; + cursor: not-allowed; +} + +/* ============================================================ + COMPONENT STYLES: Dialog + ============================================================ */ +dialog { + background: rgba(255, 255, 255, 0.88); + backdrop-filter: blur(20px) saturate(1.2); + -webkit-backdrop-filter: blur(20px) saturate(1.2); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: 28px; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04); + color: var(--color-text); + max-width: min(90vw, 28rem); + padding: var(--space-8); + margin: auto; + inset: 0; + position: fixed; +} + +dialog::backdrop { + background: rgba(15, 23, 42, 0.4); + backdrop-filter: blur(6px); +} + +dialog h2 { + font-family: var(--c-font); + font-size: 1.125rem; + font-weight: 600; + margin-bottom: 8px; +} + +dialog p { + color: var(--c-text-2); + font-size: 0.875rem; + margin-bottom: 24px; + line-height: 1.7; +} + +/* ============================================================ + COMPONENT STYLES: Popover & Tooltip + ============================================================ */ +[popover] { + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(16px) saturate(1.2); + -webkit-backdrop-filter: blur(16px) saturate(1.2); + border: 1px solid rgba(255, 255, 255, 0.5); + border-radius: var(--radius-lg); + box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04); + color: var(--color-text); + font-size: var(--text-base); + padding: var(--space-4) var(--space-5); + margin: 0; +} + +petty-popover { + display: inline-block; +} + +petty-popover button[popovertarget] { + anchor-name: --popover-anchor; +} + +petty-popover [popover] { + position-anchor: --popover-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 6px; +} + +petty-tooltip { + display: inline-block; +} + +petty-tooltip [data-part="trigger"] { + anchor-name: --tooltip-anchor; +} + +petty-tooltip [data-part="content"] { + background: var(--c-text); + color: var(--c-bg); + font-size: 0.75rem; + font-weight: 500; + padding: 6px 12px; + border: none; + border-radius: var(--radius-xs); + position-anchor: --tooltip-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(center); + translate: -50% 0; + margin-top: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +/* ============================================================ + COMPONENT STYLES: Dropdown Menu + ============================================================ */ +petty-dropdown-menu { + display: inline-block; +} + +petty-dropdown-menu [data-part="trigger"] { + anchor-name: --menu-anchor; +} + +petty-dropdown-menu [data-part="content"] { + min-width: 10rem; + padding: 4px; + border-radius: 4px; + position-anchor: --menu-anchor; + inset: unset; + top: anchor(bottom); + left: anchor(left); + margin-top: 4px; +} + +petty-menu-item { + display: block; + border-radius: var(--radius-xs); + color: var(--c-text-2); + cursor: pointer; + font-size: 0.8125rem; + padding: 8px 10px; + transition: background var(--duration-fast) var(--ease-effects), color var(--duration-fast) var(--ease-effects); +} + +petty-menu-item:hover, +petty-menu-item:focus { + background: var(--c-surface-3); + color: var(--c-text); + outline: none; +} + +petty-menu-item[disabled] { + color: var(--c-text-3); + opacity: 0.38; + cursor: not-allowed; +} + +petty-menu-item[disabled]:hover { + background: transparent; + color: var(--c-text-3); +} + +/* ============================================================ + COMPONENT STYLES: Alert + ============================================================ */ +petty-alert { + display: flex; + align-items: flex-start; + gap: var(--space-3); + padding: var(--space-4) var(--space-5); + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background: var(--color-surface); + font-size: var(--text-base); +} + +petty-alert[data-variant="success"] { + border-color: #bbf7d0; + background: var(--color-success-subtle); +} + +petty-alert[data-variant="error"] { + border-color: #fecaca; + background: var(--color-danger-subtle); +} + +petty-alert[data-variant="warning"] { + border-color: #fde68a; + background: var(--color-warning-subtle); +} + +.alert-icon { + flex-shrink: 0; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875rem; + margin-top: 1px; +} + +petty-alert[data-variant="success"] .alert-icon { color: var(--color-success); } +petty-alert[data-variant="error"] .alert-icon { color: var(--color-danger); } +petty-alert[data-variant="warning"] .alert-icon { color: var(--color-warning); } + +petty-alert [data-part="title"] { + font-weight: var(--weight-semibold); + font-size: var(--text-base); + margin-bottom: var(--space-1); + color: var(--color-text); +} + +petty-alert [data-part="description"] { + color: var(--color-text-secondary); + font-size: var(--text-sm); + line-height: var(--leading-relaxed); +} + +/* ============================================================ + COMPONENT STYLES: Progress & Meter + ============================================================ */ +petty-progress { display: block; } +petty-meter { display: block; } + +.progress-field { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.progress-header { + display: flex; + justify-content: space-between; + font-size: var(--text-sm); + color: var(--color-text); + font-weight: var(--weight-medium); +} + +.progress-header .meter-low { color: var(--color-success); } +.progress-header .meter-high { color: var(--color-danger); } + +petty-progress [data-part="track"], +petty-meter [data-part="track"] { + height: 10px; + background: var(--color-surface-sunken); + border-radius: var(--radius-pill); + overflow: hidden; + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06); +} + +petty-progress [data-part="fill"] { + height: 100%; + background: var(--color-accent); + border-radius: var(--radius-pill); + width: calc(var(--petty-progress, 0) * 100%); + transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); + box-shadow: 0 0 8px rgba(54, 192, 241, 0.3); +} + +petty-progress [data-part="label"] { display: none; } + +petty-meter [data-part="fill"] { + height: 100%; + border-radius: var(--radius-pill); + width: calc(var(--petty-meter-value, 0) * 100%); + transition: width 0.6s var(--ease-standard); +} + +petty-meter [data-part="fill"] { + transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); +} + +petty-meter[data-state="low"] [data-part="fill"] { background: var(--color-danger); box-shadow: 0 0 8px rgba(220, 38, 38, 0.3); } +petty-meter[data-state="medium"] [data-part="fill"] { background: var(--color-warning); box-shadow: 0 0 8px rgba(217, 119, 6, 0.3); } +petty-meter[data-state="high"] [data-part="fill"] { background: var(--color-success); box-shadow: 0 0 8px rgba(22, 163, 74, 0.3); } +petty-meter[data-state="optimum"] [data-part="fill"] { background: var(--color-accent); box-shadow: 0 0 8px rgba(54, 192, 241, 0.3); } + +/* ============================================================ + COMPONENT STYLES: Toast + ============================================================ */ +petty-toast-region { + position: fixed; + bottom: 24px; + right: 24px; + display: flex; + flex-direction: column; + gap: 8px; + max-width: 22rem; + width: 100%; + z-index: 9997; + pointer-events: none; +} + +[data-part="toast"] { + background: var(--color-surface); + color: var(--color-text); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 16px 32px rgba(0, 0, 0, 0.06); + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-1); + padding: 16px; + pointer-events: auto; + animation: toastIn 0.4s var(--ease-expressive); +} + +[data-part="toast"][data-type="success"] { + background: var(--color-success-subtle); + border-color: #bbf7d0; +} + +[data-part="toast"][data-type="error"] { + background: var(--color-danger-subtle); + border-color: #fecaca; +} + +[data-part="toast-title"] { + font-family: var(--font-sans); + font-size: var(--text-base); + font-weight: var(--weight-semibold); + line-height: 1.4; +} + +[data-part="toast"][data-type="success"] [data-part="toast-title"] { color: var(--color-success); } +[data-part="toast"][data-type="error"] [data-part="toast-title"] { color: var(--color-danger); } + +[data-part="toast-description"] { + color: var(--color-text-secondary); + font-size: var(--text-sm); + line-height: 1.5; + grid-column: 1; +} + +[data-part="toast-close"] { + background: none; + border: none; + color: var(--color-text-tertiary); + cursor: pointer; + font-size: 1rem; + padding: 4px; + line-height: 1; + grid-row: 1; + grid-column: 2; + align-self: start; + transition: color var(--duration-fast); +} + +[data-part="toast-close"]:hover { + color: var(--color-text); +} + +@keyframes toastIn { + from { + transform: translateY(100%) scale(0.9); + opacity: 0; + } + to { + transform: translateY(0) scale(1); + opacity: 1; + } +} + +/* ============================================================ + COMPONENT STYLES: Link & Collapsible + ============================================================ */ +petty-link a { + color: var(--c-green); + text-decoration: none; + font-size: 0.875rem; + transition: opacity var(--duration-fast) var(--ease-effects); +} + +petty-link a:hover { + opacity: 0.8; +} + +petty-collapsible summary { + color: var(--c-text-2); + cursor: pointer; + font-family: var(--c-font); + font-size: 0.875rem; + font-weight: 500; + list-style: none; + padding: 8px 0; +} + +petty-collapsible summary::-webkit-details-marker { + display: none; +} + +petty-collapsible [data-part="content"] { + color: var(--c-text-3); + font-size: 0.875rem; + padding: 8px 0; + line-height: 1.7; +} + +/* ============================================================ + RESPONSIVE + ============================================================ */ +@media (max-width: 768px) { + .hero-stats { + flex-wrap: wrap; + } + + .grid { + grid-template-columns: 1fr; + } + + .value-list { + flex-direction: column; + gap: var(--space-8); + } + + .section { + margin-top: 64px; + } + + .footer-section { + margin-top: 80px; + } + + .hero { + min-height: 70vh; + padding: 6rem 0 4rem; + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml new file mode 100644 index 0000000..f45fc29 --- /dev/null +++ b/pnpm-lock.yaml @@ -0,0 +1,3680 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + devDependencies: + '@biomejs/biome': + specifier: ^1.9.0 + version: 1.9.4 + '@typescript-eslint/parser': + specifier: ^8.0.0 + version: 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2) + eslint: + specifier: ^9.0.0 + version: 9.39.4(jiti@2.6.1) + eslint-plugin-solid: + specifier: ^0.14.0 + version: 0.14.5(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2) + typescript: + specifier: ^6.0.2 + version: 6.0.2 + zod: + specifier: ^4.3.6 + version: 4.3.6 + + packages/core: + dependencies: + zod: + specifier: ^4.3.6 + version: 4.3.6 + devDependencies: + tsdown: + specifier: ^0.21.7 + version: 0.21.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(typescript@6.0.2) + typescript: + specifier: ^6.0.2 + version: 6.0.2 + vitest: + specifier: ^4.1.2 + version: 4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) + + packages/mcp: + dependencies: + '@modelcontextprotocol/sdk': + specifier: ^1.0.0 + version: 1.28.0(zod@4.3.6) + pettyui: + specifier: workspace:* + version: link:../core + zod: + specifier: ^4.3.6 + version: 4.3.6 + devDependencies: + tsdown: + specifier: ^0.21.7 + version: 0.21.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(typescript@6.0.2) + typescript: + specifier: ^6.0.2 + version: 6.0.2 + + packages/showcase: + dependencies: + pettyui: + specifier: workspace:* + version: link:../core + devDependencies: + vite: + specifier: ^6.3.5 + version: 6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0) + +packages: + + '@asamuzakjp/css-color@3.2.0': + resolution: {integrity: sha512-K1A6z8tS3XsmCMM86xoWdn7Fkdn9m6RSVtocUrJYIwZnFVkng/PvkEoWtOWmP+Scc6saYWHWZYbndEEXxl24jw==} + + '@babel/generator@8.0.0-rc.3': + resolution: {integrity: sha512-em37/13/nR320G4jab/nIIHZgc2Wz2y/D39lxnTyxB4/D/omPQncl/lSdlnJY1OhQcRGugTSIF2l/69o31C9dA==} + engines: {node: ^20.19.0 || >=22.12.0} + + '@babel/helper-string-parser@8.0.0-rc.3': + resolution: {integrity: sha512-AmwWFx1m8G/a5cXkxLxTiWl+YEoWuoFLUCwqMlNuWO1tqAYITQAbCRPUkyBHv1VOFgfjVOqEj6L3u15J5ZCzTA==} + engines: {node: ^20.19.0 || >=22.12.0} + + '@babel/helper-validator-identifier@8.0.0-rc.3': + resolution: {integrity: sha512-8AWCJ2VJJyDFlGBep5GpaaQ9AAaE/FjAcrqI7jyssYhtL7WGV0DOKpJsQqM037xDbpRLHXsY8TwU7zDma7coOw==} + engines: {node: ^20.19.0 || >=22.12.0} + + '@babel/parser@8.0.0-rc.3': + resolution: {integrity: sha512-B20dvP3MfNc/XS5KKCHy/oyWl5IA6Cn9YjXRdDlCjNmUFrjvLXMNUfQq/QUy9fnG2gYkKKcrto2YaF9B32ToOQ==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + + '@babel/types@8.0.0-rc.3': + resolution: {integrity: sha512-mOm5ZrYmphGfqVWoH5YYMTITb3cDXsFgmvFlvkvWDMsR9X8RFnt7a0Wb6yNIdoFsiMO9WjYLq+U/FMtqIYAF8Q==} + engines: {node: ^20.19.0 || >=22.12.0} + + '@biomejs/biome@1.9.4': + resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==} + engines: {node: '>=14.21.3'} + hasBin: true + + '@biomejs/cli-darwin-arm64@1.9.4': + resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [darwin] + + '@biomejs/cli-darwin-x64@1.9.4': + resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [darwin] + + '@biomejs/cli-linux-arm64-musl@1.9.4': + resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@biomejs/cli-linux-arm64@1.9.4': + resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@biomejs/cli-linux-x64-musl@1.9.4': + resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + libc: [musl] + + '@biomejs/cli-linux-x64@1.9.4': + resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@biomejs/cli-win32-arm64@1.9.4': + resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [win32] + + '@biomejs/cli-win32-x64@1.9.4': + resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [win32] + + '@csstools/color-helpers@5.1.0': + resolution: {integrity: sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==} + engines: {node: '>=18'} + + '@csstools/css-calc@2.1.4': + resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-color-parser@3.1.0': + resolution: {integrity: sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} + engines: {node: '>=18'} + peerDependencies: + '@csstools/css-tokenizer': ^3.0.4 + + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} + engines: {node: '>=18'} + + '@emnapi/core@1.9.1': + resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==} + + '@emnapi/runtime@1.9.1': + resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==} + + '@emnapi/wasi-threads@1.2.0': + resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==} + + '@esbuild/aix-ppc64@0.25.12': + resolution: {integrity: sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [aix] + + '@esbuild/android-arm64@0.25.12': + resolution: {integrity: sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [android] + + '@esbuild/android-arm@0.25.12': + resolution: {integrity: sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==} + engines: {node: '>=18'} + cpu: [arm] + os: [android] + + '@esbuild/android-x64@0.25.12': + resolution: {integrity: sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==} + engines: {node: '>=18'} + cpu: [x64] + os: [android] + + '@esbuild/darwin-arm64@0.25.12': + resolution: {integrity: sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [darwin] + + '@esbuild/darwin-x64@0.25.12': + resolution: {integrity: sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==} + engines: {node: '>=18'} + cpu: [x64] + os: [darwin] + + '@esbuild/freebsd-arm64@0.25.12': + resolution: {integrity: sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [freebsd] + + '@esbuild/freebsd-x64@0.25.12': + resolution: {integrity: sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [freebsd] + + '@esbuild/linux-arm64@0.25.12': + resolution: {integrity: sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==} + engines: {node: '>=18'} + cpu: [arm64] + os: [linux] + + '@esbuild/linux-arm@0.25.12': + resolution: {integrity: sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==} + engines: {node: '>=18'} + cpu: [arm] + os: [linux] + + '@esbuild/linux-ia32@0.25.12': + resolution: {integrity: sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==} + engines: {node: '>=18'} + cpu: [ia32] + os: [linux] + + '@esbuild/linux-loong64@0.25.12': + resolution: {integrity: sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==} + engines: {node: '>=18'} + cpu: [loong64] + os: [linux] + + '@esbuild/linux-mips64el@0.25.12': + resolution: {integrity: sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==} + engines: {node: '>=18'} + cpu: [mips64el] + os: [linux] + + '@esbuild/linux-ppc64@0.25.12': + resolution: {integrity: sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==} + engines: {node: '>=18'} + cpu: [ppc64] + os: [linux] + + '@esbuild/linux-riscv64@0.25.12': + resolution: {integrity: sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==} + engines: {node: '>=18'} + cpu: [riscv64] + os: [linux] + + '@esbuild/linux-s390x@0.25.12': + resolution: {integrity: sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==} + engines: {node: '>=18'} + cpu: [s390x] + os: [linux] + + '@esbuild/linux-x64@0.25.12': + resolution: {integrity: sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==} + engines: {node: '>=18'} + cpu: [x64] + os: [linux] + + '@esbuild/netbsd-arm64@0.25.12': + resolution: {integrity: sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [netbsd] + + '@esbuild/netbsd-x64@0.25.12': + resolution: {integrity: sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==} + engines: {node: '>=18'} + cpu: [x64] + os: [netbsd] + + '@esbuild/openbsd-arm64@0.25.12': + resolution: {integrity: sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openbsd] + + '@esbuild/openbsd-x64@0.25.12': + resolution: {integrity: sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==} + engines: {node: '>=18'} + cpu: [x64] + os: [openbsd] + + '@esbuild/openharmony-arm64@0.25.12': + resolution: {integrity: sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [openharmony] + + '@esbuild/sunos-x64@0.25.12': + resolution: {integrity: sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==} + engines: {node: '>=18'} + cpu: [x64] + os: [sunos] + + '@esbuild/win32-arm64@0.25.12': + resolution: {integrity: sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==} + engines: {node: '>=18'} + cpu: [arm64] + os: [win32] + + '@esbuild/win32-ia32@0.25.12': + resolution: {integrity: sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==} + engines: {node: '>=18'} + cpu: [ia32] + os: [win32] + + '@esbuild/win32-x64@0.25.12': + resolution: {integrity: sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==} + engines: {node: '>=18'} + cpu: [x64] + os: [win32] + + '@eslint-community/eslint-utils@4.9.1': + resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 + + '@eslint-community/regexpp@4.12.2': + resolution: {integrity: sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==} + engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} + + '@eslint/config-array@0.21.2': + resolution: {integrity: sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/config-helpers@0.4.2': + resolution: {integrity: sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/core@0.17.0': + resolution: {integrity: sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/eslintrc@3.3.5': + resolution: {integrity: sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/js@9.39.4': + resolution: {integrity: sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/object-schema@2.1.7': + resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@eslint/plugin-kit@0.4.1': + resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@hono/node-server@1.19.11': + resolution: {integrity: sha512-dr8/3zEaB+p0D2n/IUrlPF1HZm586qgJNXK1a9fhg/PzdtkK7Ksd5l312tJX2yBuALqDYBlG20QEbayqPyxn+g==} + engines: {node: '>=18.14.1'} + peerDependencies: + hono: ^4 + + '@humanfs/core@0.19.1': + resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==} + engines: {node: '>=18.18.0'} + + '@humanfs/node@0.16.7': + resolution: {integrity: sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==} + engines: {node: '>=18.18.0'} + + '@humanwhocodes/module-importer@1.0.1': + resolution: {integrity: sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==} + engines: {node: '>=12.22'} + + '@humanwhocodes/retry@0.4.3': + resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==} + engines: {node: '>=18.18'} + + '@jridgewell/gen-mapping@0.3.13': + resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==} + + '@jridgewell/resolve-uri@3.1.2': + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} + engines: {node: '>=6.0.0'} + + '@jridgewell/sourcemap-codec@1.5.5': + resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==} + + '@jridgewell/trace-mapping@0.3.31': + resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==} + + '@modelcontextprotocol/sdk@1.28.0': + resolution: {integrity: sha512-gmloF+i+flI8ouQK7MWW4mOwuMh4RePBuPFAEPC6+pdqyWOUMDOixb6qZ69owLJpz6XmyllCouc4t8YWO+E2Nw==} + engines: {node: '>=18'} + peerDependencies: + '@cfworker/json-schema': ^4.1.1 + zod: ^3.25 || ^4.0 + peerDependenciesMeta: + '@cfworker/json-schema': + optional: true + + '@napi-rs/wasm-runtime@1.1.2': + resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==} + peerDependencies: + '@emnapi/core': ^1.7.1 + '@emnapi/runtime': ^1.7.1 + + '@oxc-project/types@0.122.0': + resolution: {integrity: sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA==} + + '@quansync/fs@1.0.0': + resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==} + + '@rolldown/binding-android-arm64@1.0.0-rc.12': + resolution: {integrity: sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [android] + + '@rolldown/binding-darwin-arm64@1.0.0-rc.12': + resolution: {integrity: sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [darwin] + + '@rolldown/binding-darwin-x64@1.0.0-rc.12': + resolution: {integrity: sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [x64] + os: [darwin] + + '@rolldown/binding-freebsd-x64@1.0.0-rc.12': + resolution: {integrity: sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [x64] + os: [freebsd] + + '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12': + resolution: {integrity: sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm] + os: [linux] + + '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12': + resolution: {integrity: sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12': + resolution: {integrity: sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12': + resolution: {integrity: sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12': + resolution: {integrity: sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12': + resolution: {integrity: sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@rolldown/binding-linux-x64-musl@1.0.0-rc.12': + resolution: {integrity: sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [x64] + os: [linux] + libc: [musl] + + '@rolldown/binding-openharmony-arm64@1.0.0-rc.12': + resolution: {integrity: sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [openharmony] + + '@rolldown/binding-wasm32-wasi@1.0.0-rc.12': + resolution: {integrity: sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg==} + engines: {node: '>=14.0.0'} + cpu: [wasm32] + + '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12': + resolution: {integrity: sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [arm64] + os: [win32] + + '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12': + resolution: {integrity: sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw==} + engines: {node: ^20.19.0 || >=22.12.0} + cpu: [x64] + os: [win32] + + '@rolldown/pluginutils@1.0.0-rc.12': + resolution: {integrity: sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw==} + + '@rollup/rollup-android-arm-eabi@4.60.1': + resolution: {integrity: sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==} + cpu: [arm] + os: [android] + + '@rollup/rollup-android-arm64@4.60.1': + resolution: {integrity: sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==} + cpu: [arm64] + os: [android] + + '@rollup/rollup-darwin-arm64@4.60.1': + resolution: {integrity: sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==} + cpu: [arm64] + os: [darwin] + + '@rollup/rollup-darwin-x64@4.60.1': + resolution: {integrity: sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==} + cpu: [x64] + os: [darwin] + + '@rollup/rollup-freebsd-arm64@4.60.1': + resolution: {integrity: sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==} + cpu: [arm64] + os: [freebsd] + + '@rollup/rollup-freebsd-x64@4.60.1': + resolution: {integrity: sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==} + cpu: [x64] + os: [freebsd] + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + resolution: {integrity: sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==} + cpu: [arm] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + resolution: {integrity: sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==} + cpu: [arm] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + resolution: {integrity: sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==} + cpu: [arm64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-arm64-musl@4.60.1': + resolution: {integrity: sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==} + cpu: [arm64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + resolution: {integrity: sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==} + cpu: [loong64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-loong64-musl@4.60.1': + resolution: {integrity: sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==} + cpu: [loong64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + resolution: {integrity: sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==} + cpu: [ppc64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + resolution: {integrity: sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==} + cpu: [ppc64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + resolution: {integrity: sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==} + cpu: [riscv64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + resolution: {integrity: sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==} + cpu: [riscv64] + os: [linux] + libc: [musl] + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + resolution: {integrity: sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==} + cpu: [s390x] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-gnu@4.60.1': + resolution: {integrity: sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==} + cpu: [x64] + os: [linux] + libc: [glibc] + + '@rollup/rollup-linux-x64-musl@4.60.1': + resolution: {integrity: sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==} + cpu: [x64] + os: [linux] + libc: [musl] + + '@rollup/rollup-openbsd-x64@4.60.1': + resolution: {integrity: sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==} + cpu: [x64] + os: [openbsd] + + '@rollup/rollup-openharmony-arm64@4.60.1': + resolution: {integrity: sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==} + cpu: [arm64] + os: [openharmony] + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + resolution: {integrity: sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==} + cpu: [arm64] + os: [win32] + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + resolution: {integrity: sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==} + cpu: [ia32] + os: [win32] + + '@rollup/rollup-win32-x64-gnu@4.60.1': + resolution: {integrity: sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==} + cpu: [x64] + os: [win32] + + '@rollup/rollup-win32-x64-msvc@4.60.1': + resolution: {integrity: sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==} + cpu: [x64] + os: [win32] + + '@standard-schema/spec@1.1.0': + resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==} + + '@tybys/wasm-util@0.10.1': + resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==} + + '@types/chai@5.2.3': + resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + + '@types/deep-eql@4.0.2': + resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} + + '@types/estree@1.0.8': + resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + + '@types/jsesc@2.5.1': + resolution: {integrity: sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==} + + '@types/json-schema@7.0.15': + resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==} + + '@types/node@25.5.0': + resolution: {integrity: sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw==} + + '@typescript-eslint/parser@8.57.2': + resolution: {integrity: sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/project-service@8.57.2': + resolution: {integrity: sha512-FuH0wipFywXRTHf+bTTjNyuNQQsQC3qh/dYzaM4I4W0jrCqjCVuUh99+xd9KamUfmCGPvbO8NDngo/vsnNVqgw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/scope-manager@8.57.2': + resolution: {integrity: sha512-snZKH+W4WbWkrBqj4gUNRIGb/jipDW3qMqVJ4C9rzdFc+wLwruxk+2a5D+uoFcKPAqyqEnSb4l2ULuZf95eSkw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/tsconfig-utils@8.57.2': + resolution: {integrity: sha512-3Lm5DSM+DCowsUOJC+YqHHnKEfFh5CoGkj5Z31NQSNF4l5wdOwqGn99wmwN/LImhfY3KJnmordBq/4+VDe2eKw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/types@8.57.2': + resolution: {integrity: sha512-/iZM6FnM4tnx9csuTxspMW4BOSegshwX5oBDznJ7S4WggL7Vczz5d2W11ecc4vRrQMQHXRSxzrCsyG5EsPPTbA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@typescript-eslint/typescript-estree@8.57.2': + resolution: {integrity: sha512-2MKM+I6g8tJxfSmFKOnHv2t8Sk3T6rF20A1Puk0svLK+uVapDZB/4pfAeB7nE83uAZrU6OxW+HmOd5wHVdXwXA==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/utils@8.57.2': + resolution: {integrity: sha512-krRIbvPK1ju1WBKIefiX+bngPs+odIQUtR7kymzPfo1POVw3jlF+nLkmexdSSd4UCbDcQn+wMBATOOmpBbqgKg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + peerDependencies: + eslint: ^8.57.0 || ^9.0.0 || ^10.0.0 + typescript: '>=4.8.4 <6.0.0' + + '@typescript-eslint/visitor-keys@8.57.2': + resolution: {integrity: sha512-zhahknjobV2FiD6Ee9iLbS7OV9zi10rG26odsQdfBO/hjSzUQbkIYgda+iNKK1zNiW2ey+Lf8MU5btN17V3dUw==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + '@vitest/expect@4.1.2': + resolution: {integrity: sha512-gbu+7B0YgUJ2nkdsRJrFFW6X7NTP44WlhiclHniUhxADQJH5Szt9mZ9hWnJPJ8YwOK5zUOSSlSvyzRf0u1DSBQ==} + + '@vitest/mocker@4.1.2': + resolution: {integrity: sha512-Ize4iQtEALHDttPRCmN+FKqOl2vxTiNUhzobQFFt/BM1lRUTG7zRCLOykG/6Vo4E4hnUdfVLo5/eqKPukcWW7Q==} + peerDependencies: + msw: ^2.4.9 + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + + '@vitest/pretty-format@4.1.2': + resolution: {integrity: sha512-dwQga8aejqeuB+TvXCMzSQemvV9hNEtDDpgUKDzOmNQayl2OG241PSWeJwKRH3CiC+sESrmoFd49rfnq7T4RnA==} + + '@vitest/runner@4.1.2': + resolution: {integrity: sha512-Gr+FQan34CdiYAwpGJmQG8PgkyFVmARK8/xSijia3eTFgVfpcpztWLuP6FttGNfPLJhaZVP/euvujeNYar36OQ==} + + '@vitest/snapshot@4.1.2': + resolution: {integrity: sha512-g7yfUmxYS4mNxk31qbOYsSt2F4m1E02LFqO53Xpzg3zKMhLAPZAjjfyl9e6z7HrW6LvUdTwAQR3HHfLjpko16A==} + + '@vitest/spy@4.1.2': + resolution: {integrity: sha512-DU4fBnbVCJGNBwVA6xSToNXrkZNSiw59H8tcuUspVMsBDBST4nfvsPsEHDHGtWRRnqBERBQu7TrTKskmjqTXKA==} + + '@vitest/utils@4.1.2': + resolution: {integrity: sha512-xw2/TiX82lQHA06cgbqRKFb5lCAy3axQ4H4SoUFhUsg+wztiet+co86IAMDtF6Vm1hc7J6j09oh/rgDn+JdKIQ==} + + accepts@2.0.0: + resolution: {integrity: sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng==} + engines: {node: '>= 0.6'} + + acorn-jsx@5.3.2: + resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==} + peerDependencies: + acorn: ^6.0.0 || ^7.0.0 || ^8.0.0 + + acorn@8.16.0: + resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==} + engines: {node: '>=0.4.0'} + hasBin: true + + agent-base@7.1.4: + resolution: {integrity: sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ==} + engines: {node: '>= 14'} + + ajv-formats@3.0.1: + resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==} + peerDependencies: + ajv: ^8.0.0 + peerDependenciesMeta: + ajv: + optional: true + + ajv@6.14.0: + resolution: {integrity: sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==} + + ajv@8.18.0: + resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==} + + ansi-styles@4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + + ansis@4.2.0: + resolution: {integrity: sha512-HqZ5rWlFjGiV0tDm3UxxgNRqsOTniqoKZu0pIAfh7TZQMGuZK+hH0drySty0si0QXj1ieop4+SkSfPZBPPkHig==} + engines: {node: '>=14'} + + argparse@2.0.1: + resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} + + assertion-error@2.0.1: + resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} + engines: {node: '>=12'} + + ast-kit@3.0.0-beta.1: + resolution: {integrity: sha512-trmleAnZ2PxN/loHWVhhx1qeOHSRXq4TDsBBxq3GqeJitfk3+jTQ+v/C1km/KYq9M7wKqCewMh+/NAvVH7m+bw==} + engines: {node: '>=20.19.0'} + + balanced-match@1.0.2: + resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + + balanced-match@4.0.4: + resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==} + engines: {node: 18 || 20 || >=22} + + birpc@4.0.0: + resolution: {integrity: sha512-LShSxJP0KTmd101b6DRyGBj57LZxSDYWKitQNW/mi8GRMvZb078Uf9+pveax1DrVL89vm7mWe+TovdI/UDOuPw==} + + body-parser@2.2.2: + resolution: {integrity: sha512-oP5VkATKlNwcgvxi0vM0p/D3n2C3EReYVX+DNYs5TjZFn/oQt2j+4sVJtSMr18pdRr8wjTcBl6LoV+FUwzPmNA==} + engines: {node: '>=18'} + + brace-expansion@1.1.13: + resolution: {integrity: sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w==} + + brace-expansion@5.0.5: + resolution: {integrity: sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ==} + engines: {node: 18 || 20 || >=22} + + bytes@3.1.2: + resolution: {integrity: sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==} + engines: {node: '>= 0.8'} + + cac@7.0.0: + resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==} + engines: {node: '>=20.19.0'} + + call-bind-apply-helpers@1.0.2: + resolution: {integrity: sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==} + engines: {node: '>= 0.4'} + + call-bound@1.0.4: + resolution: {integrity: sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==} + engines: {node: '>= 0.4'} + + callsites@3.1.0: + resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==} + engines: {node: '>=6'} + + chai@6.2.2: + resolution: {integrity: sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==} + engines: {node: '>=18'} + + chalk@4.1.2: + resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} + engines: {node: '>=10'} + + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + + concat-map@0.0.1: + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} + + content-disposition@1.0.1: + resolution: {integrity: sha512-oIXISMynqSqm241k6kcQ5UwttDILMK4BiurCfGEREw6+X9jkkpEe5T9FZaApyLGGOnFuyMWZpdolTXMtvEJ08Q==} + engines: {node: '>=18'} + + content-type@1.0.5: + resolution: {integrity: sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==} + engines: {node: '>= 0.6'} + + convert-source-map@2.0.0: + resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} + + cookie-signature@1.2.2: + resolution: {integrity: sha512-D76uU73ulSXrD1UXF4KE2TMxVVwhsnCgfAyTg9k8P6KGZjlXKrOLe4dJQKI3Bxi5wjesZoFXJWElNWBjPZMbhg==} + engines: {node: '>=6.6.0'} + + cookie@0.7.2: + resolution: {integrity: sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==} + engines: {node: '>= 0.6'} + + cors@2.8.6: + resolution: {integrity: sha512-tJtZBBHA6vjIAaF6EnIaq6laBBP9aq/Y3ouVJjEfoHbRBcHBAHYcMh/w8LDrk2PvIMMq8gmopa5D4V8RmbrxGw==} + engines: {node: '>= 0.10'} + + cross-spawn@7.0.6: + resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} + engines: {node: '>= 8'} + + cssstyle@4.6.0: + resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==} + engines: {node: '>=18'} + + data-urls@5.0.0: + resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} + engines: {node: '>=18'} + + debug@4.4.3: + resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + + decimal.js@10.6.0: + resolution: {integrity: sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg==} + + deep-is@0.1.4: + resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==} + + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + + depd@2.0.0: + resolution: {integrity: sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==} + engines: {node: '>= 0.8'} + + detect-libc@2.1.2: + resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==} + engines: {node: '>=8'} + + dts-resolver@2.1.3: + resolution: {integrity: sha512-bihc7jPC90VrosXNzK0LTE2cuLP6jr0Ro8jk+kMugHReJVLIpHz/xadeq3MhuwyO4TD4OA3L1Q8pBBFRc08Tsw==} + engines: {node: '>=20.19.0'} + peerDependencies: + oxc-resolver: '>=11.0.0' + peerDependenciesMeta: + oxc-resolver: + optional: true + + dunder-proto@1.0.1: + resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==} + engines: {node: '>= 0.4'} + + ee-first@1.1.1: + resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} + + empathic@2.0.0: + resolution: {integrity: sha512-i6UzDscO/XfAcNYD75CfICkmfLedpyPDdozrLMmQc5ORaQcdMoc21OnlEylMIqI7U8eniKrPMxxtj8k0vhmJhA==} + engines: {node: '>=14'} + + encodeurl@2.0.0: + resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==} + engines: {node: '>= 0.8'} + + entities@6.0.1: + resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==} + engines: {node: '>=0.12'} + + es-define-property@1.0.1: + resolution: {integrity: sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==} + engines: {node: '>= 0.4'} + + es-errors@1.3.0: + resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} + engines: {node: '>= 0.4'} + + es-module-lexer@2.0.0: + resolution: {integrity: sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==} + + es-object-atoms@1.1.1: + resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==} + engines: {node: '>= 0.4'} + + esbuild@0.25.12: + resolution: {integrity: sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==} + engines: {node: '>=18'} + hasBin: true + + escape-html@1.0.3: + resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==} + + escape-string-regexp@4.0.0: + resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} + engines: {node: '>=10'} + + eslint-plugin-solid@0.14.5: + resolution: {integrity: sha512-nfuYK09ah5aJG/oEN6P1qziy1zLgW4PDWe75VNPi4CEFYk1x2AEqwFeQfEPR7gNn0F2jOeqKhx2E+5oNCOBYWQ==} + engines: {node: '>=18.0.0'} + peerDependencies: + eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 + typescript: '>=4.8.4' + + eslint-scope@8.4.0: + resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + eslint-visitor-keys@3.4.3: + resolution: {integrity: sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==} + engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} + + eslint-visitor-keys@4.2.1: + resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + eslint-visitor-keys@5.0.1: + resolution: {integrity: sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==} + engines: {node: ^20.19.0 || ^22.13.0 || >=24} + + eslint@9.39.4: + resolution: {integrity: sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + hasBin: true + peerDependencies: + jiti: '*' + peerDependenciesMeta: + jiti: + optional: true + + espree@10.4.0: + resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==} + engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + + esquery@1.7.0: + resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==} + engines: {node: '>=0.10'} + + esrecurse@4.3.0: + resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==} + engines: {node: '>=4.0'} + + estraverse@5.3.0: + resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==} + engines: {node: '>=4.0'} + + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + + esutils@2.0.3: + resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==} + engines: {node: '>=0.10.0'} + + etag@1.8.1: + resolution: {integrity: sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==} + engines: {node: '>= 0.6'} + + eventsource-parser@3.0.6: + resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==} + engines: {node: '>=18.0.0'} + + eventsource@3.0.7: + resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==} + engines: {node: '>=18.0.0'} + + expect-type@1.3.0: + resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==} + engines: {node: '>=12.0.0'} + + express-rate-limit@8.3.1: + resolution: {integrity: sha512-D1dKN+cmyPWuvB+G2SREQDzPY1agpBIcTa9sJxOPMCNeH3gwzhqJRDWCXW3gg0y//+LQ/8j52JbMROWyrKdMdw==} + engines: {node: '>= 16'} + peerDependencies: + express: '>= 4.11' + + express@5.2.1: + resolution: {integrity: sha512-hIS4idWWai69NezIdRt2xFVofaF4j+6INOpJlVOLDO8zXGpUVEVzIYk12UUi2JzjEzWL3IOAxcTubgz9Po0yXw==} + engines: {node: '>= 18'} + + fast-deep-equal@3.1.3: + resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + + fast-json-stable-stringify@2.1.0: + resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==} + + fast-levenshtein@2.0.6: + resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} + + fast-uri@3.1.0: + resolution: {integrity: sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==} + + fdir@6.5.0: + resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==} + engines: {node: '>=12.0.0'} + peerDependencies: + picomatch: ^3 || ^4 + peerDependenciesMeta: + picomatch: + optional: true + + file-entry-cache@8.0.0: + resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==} + engines: {node: '>=16.0.0'} + + finalhandler@2.1.1: + resolution: {integrity: sha512-S8KoZgRZN+a5rNwqTxlZZePjT/4cnm0ROV70LedRHZ0p8u9fRID0hJUZQpkKLzro8LfmC8sx23bY6tVNxv8pQA==} + engines: {node: '>= 18.0.0'} + + find-up@5.0.0: + resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} + engines: {node: '>=10'} + + flat-cache@4.0.1: + resolution: {integrity: sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==} + engines: {node: '>=16'} + + flatted@3.4.2: + resolution: {integrity: sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==} + + forwarded@0.2.0: + resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==} + engines: {node: '>= 0.6'} + + fresh@2.0.0: + resolution: {integrity: sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A==} + engines: {node: '>= 0.8'} + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + function-bind@1.1.2: + resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} + + get-intrinsic@1.3.0: + resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==} + engines: {node: '>= 0.4'} + + get-proto@1.0.1: + resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==} + engines: {node: '>= 0.4'} + + get-tsconfig@4.13.7: + resolution: {integrity: sha512-7tN6rFgBlMgpBML5j8typ92BKFi2sFQvIdpAqLA2beia5avZDrMs0FLZiM5etShWq5irVyGcGMEA1jcDaK7A/Q==} + + glob-parent@6.0.2: + resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} + engines: {node: '>=10.13.0'} + + globals@14.0.0: + resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==} + engines: {node: '>=18'} + + gopd@1.2.0: + resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==} + engines: {node: '>= 0.4'} + + has-flag@4.0.0: + resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==} + engines: {node: '>=8'} + + has-symbols@1.1.0: + resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==} + engines: {node: '>= 0.4'} + + hasown@2.0.2: + resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} + engines: {node: '>= 0.4'} + + hono@4.12.9: + resolution: {integrity: sha512-wy3T8Zm2bsEvxKZM5w21VdHDDcwVS1yUFFY6i8UobSsKfFceT7TOwhbhfKsDyx7tYQlmRM5FLpIuYvNFyjctiA==} + engines: {node: '>=16.9.0'} + + hookable@6.1.0: + resolution: {integrity: sha512-ZoKZSJgu8voGK2geJS+6YtYjvIzu9AOM/KZXsBxr83uhLL++e9pEv/dlgwgy3dvHg06kTz6JOh1hk3C8Ceiymw==} + + html-encoding-sniffer@4.0.0: + resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} + engines: {node: '>=18'} + + html-tags@3.3.1: + resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==} + engines: {node: '>=8'} + + http-errors@2.0.1: + resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==} + engines: {node: '>= 0.8'} + + http-proxy-agent@7.0.2: + resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==} + engines: {node: '>= 14'} + + https-proxy-agent@7.0.6: + resolution: {integrity: sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw==} + engines: {node: '>= 14'} + + iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + + iconv-lite@0.7.2: + resolution: {integrity: sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw==} + engines: {node: '>=0.10.0'} + + ignore@5.3.2: + resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} + engines: {node: '>= 4'} + + import-fresh@3.3.1: + resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==} + engines: {node: '>=6'} + + import-without-cache@0.2.5: + resolution: {integrity: sha512-B6Lc2s6yApwnD2/pMzFh/d5AVjdsDXjgkeJ766FmFuJELIGHNycKRj+l3A39yZPM4CchqNCB4RITEAYB1KUM6A==} + engines: {node: '>=20.19.0'} + + imurmurhash@0.1.4: + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} + engines: {node: '>=0.8.19'} + + inherits@2.0.4: + resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} + + inline-style-parser@0.2.7: + resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==} + + ip-address@10.1.0: + resolution: {integrity: sha512-XXADHxXmvT9+CRxhXg56LJovE+bmWnEWB78LB83VZTprKTmaC5QfruXocxzTZ2Kl0DNwKuBdlIhjL8LeY8Sf8Q==} + engines: {node: '>= 12'} + + ipaddr.js@1.9.1: + resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==} + engines: {node: '>= 0.10'} + + is-extglob@2.1.1: + resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} + engines: {node: '>=0.10.0'} + + is-glob@4.0.3: + resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} + engines: {node: '>=0.10.0'} + + is-html@2.0.0: + resolution: {integrity: sha512-S+OpgB5i7wzIue/YSE5hg0e5ZYfG3hhpNh9KGl6ayJ38p7ED6wxQLd1TV91xHpcTvw90KMJ9EwN3F/iNflHBVg==} + engines: {node: '>=8'} + + is-potential-custom-element-name@1.0.1: + resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==} + + is-promise@4.0.0: + resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==} + + isexe@2.0.0: + resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + + jiti@2.6.1: + resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==} + hasBin: true + + jose@6.2.2: + resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==} + + js-yaml@4.1.1: + resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==} + hasBin: true + + jsdom@26.1.0: + resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==} + engines: {node: '>=18'} + peerDependencies: + canvas: ^3.0.0 + peerDependenciesMeta: + canvas: + optional: true + + jsesc@3.1.0: + resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==} + engines: {node: '>=6'} + hasBin: true + + json-buffer@3.0.1: + resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==} + + json-schema-traverse@0.4.1: + resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==} + + json-schema-traverse@1.0.0: + resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==} + + json-schema-typed@8.0.2: + resolution: {integrity: sha512-fQhoXdcvc3V28x7C7BMs4P5+kNlgUURe2jmUT1T//oBRMDrqy1QPelJimwZGo7Hg9VPV3EQV5Bnq4hbFy2vetA==} + + json-stable-stringify-without-jsonify@1.0.1: + resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} + + kebab-case@1.0.2: + resolution: {integrity: sha512-7n6wXq4gNgBELfDCpzKc+mRrZFs7D+wgfF5WRFLNAr4DA/qtr9Js8uOAVAfHhuLMfAcQ0pRKqbpjx+TcJVdE1Q==} + + keyv@4.5.4: + resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==} + + known-css-properties@0.30.0: + resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==} + + levn@0.4.1: + resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==} + engines: {node: '>= 0.8.0'} + + lightningcss-android-arm64@1.32.0: + resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [android] + + lightningcss-darwin-arm64@1.32.0: + resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + + lightningcss-darwin-x64@1.32.0: + resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + + lightningcss-freebsd-x64@1.32.0: + resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + + lightningcss-linux-arm-gnueabihf@1.32.0: + resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + + lightningcss-linux-arm64-gnu@1.32.0: + resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + libc: [glibc] + + lightningcss-linux-arm64-musl@1.32.0: + resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + libc: [musl] + + lightningcss-linux-x64-gnu@1.32.0: + resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + libc: [glibc] + + lightningcss-linux-x64-musl@1.32.0: + resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + libc: [musl] + + lightningcss-win32-arm64-msvc@1.32.0: + resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + + lightningcss-win32-x64-msvc@1.32.0: + resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + + lightningcss@1.32.0: + resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==} + engines: {node: '>= 12.0.0'} + + locate-path@6.0.0: + resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} + engines: {node: '>=10'} + + lodash.merge@4.6.2: + resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} + + lru-cache@10.4.3: + resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + + magic-string@0.30.21: + resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + + math-intrinsics@1.1.0: + resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==} + engines: {node: '>= 0.4'} + + media-typer@1.1.0: + resolution: {integrity: sha512-aisnrDP4GNe06UcKFnV5bfMNPBUw4jsLGaWwWfnH3v02GnBuXX2MCVn5RbrWo0j3pczUilYblq7fQ7Nw2t5XKw==} + engines: {node: '>= 0.8'} + + merge-descriptors@2.0.0: + resolution: {integrity: sha512-Snk314V5ayFLhp3fkUREub6WtjBfPdCPY1Ln8/8munuLuiYhsABgBVWsozAG+MWMbVEvcdcpbi9R7ww22l9Q3g==} + engines: {node: '>=18'} + + mime-db@1.54.0: + resolution: {integrity: sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==} + engines: {node: '>= 0.6'} + + mime-types@3.0.2: + resolution: {integrity: sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==} + engines: {node: '>=18'} + + minimatch@10.2.4: + resolution: {integrity: sha512-oRjTw/97aTBN0RHbYCdtF1MQfvusSIBQM0IZEgzl6426+8jSC0nF1a/GmnVLpfB9yyr6g6FTqWqiZVbxrtaCIg==} + engines: {node: 18 || 20 || >=22} + + minimatch@3.1.5: + resolution: {integrity: sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==} + + ms@2.1.3: + resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} + + nanoid@3.3.11: + resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + natural-compare@1.4.0: + resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} + + negotiator@1.0.0: + resolution: {integrity: sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg==} + engines: {node: '>= 0.6'} + + nwsapi@2.2.23: + resolution: {integrity: sha512-7wfH4sLbt4M0gCDzGE6vzQBo0bfTKjU7Sfpqy/7gs1qBfYz2vEJH6vXcBKpO3+6Yu1telwd0t9HpyOoLEQQbIQ==} + + object-assign@4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} + engines: {node: '>=0.10.0'} + + object-inspect@1.13.4: + resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==} + engines: {node: '>= 0.4'} + + obug@2.1.1: + resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==} + + on-finished@2.4.1: + resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} + engines: {node: '>= 0.8'} + + once@1.4.0: + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} + + optionator@0.9.4: + resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} + engines: {node: '>= 0.8.0'} + + p-limit@3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + + p-locate@5.0.0: + resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} + engines: {node: '>=10'} + + parent-module@1.0.1: + resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} + engines: {node: '>=6'} + + parse5@7.3.0: + resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==} + + parseurl@1.3.3: + resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} + engines: {node: '>= 0.8'} + + path-exists@4.0.0: + resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} + engines: {node: '>=8'} + + path-key@3.1.1: + resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} + engines: {node: '>=8'} + + path-to-regexp@8.4.0: + resolution: {integrity: sha512-PuseHIvAnz3bjrM2rGJtSgo1zjgxapTLZ7x2pjhzWwlp4SJQgK3f3iZIQwkpEnBaKz6seKBADpM4B4ySkuYypg==} + + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + + picomatch@4.0.4: + resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==} + engines: {node: '>=12'} + + pkce-challenge@5.0.1: + resolution: {integrity: sha512-wQ0b/W4Fr01qtpHlqSqspcj3EhBvimsdh0KlHhH8HRZnMsEa0ea2fTULOXOS9ccQr3om+GcGRk4e+isrZWV8qQ==} + engines: {node: '>=16.20.0'} + + postcss@8.5.8: + resolution: {integrity: sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg==} + engines: {node: ^10 || ^12 || >=14} + + prelude-ls@1.2.1: + resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} + engines: {node: '>= 0.8.0'} + + proxy-addr@2.0.7: + resolution: {integrity: sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==} + engines: {node: '>= 0.10'} + + punycode@2.3.1: + resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==} + engines: {node: '>=6'} + + qs@6.15.0: + resolution: {integrity: sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==} + engines: {node: '>=0.6'} + + quansync@1.0.0: + resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==} + + range-parser@1.2.1: + resolution: {integrity: sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==} + engines: {node: '>= 0.6'} + + raw-body@3.0.2: + resolution: {integrity: sha512-K5zQjDllxWkf7Z5xJdV0/B0WTNqx6vxG70zJE4N0kBs4LovmEYWJzQGxC9bS9RAKu3bgM40lrd5zoLJ12MQ5BA==} + engines: {node: '>= 0.10'} + + require-from-string@2.0.2: + resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==} + engines: {node: '>=0.10.0'} + + resolve-from@4.0.0: + resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} + engines: {node: '>=4'} + + resolve-pkg-maps@1.0.0: + resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} + + rolldown-plugin-dts@0.23.2: + resolution: {integrity: sha512-PbSqLawLgZBGcOGT3yqWBGn4cX+wh2nt5FuBGdcMHyOhoukmjbhYAl8NT9sE4U38Cm9tqLOIQeOrvzeayM0DLQ==} + engines: {node: '>=20.19.0'} + peerDependencies: + '@ts-macro/tsc': ^0.3.6 + '@typescript/native-preview': '>=7.0.0-dev.20260325.1' + rolldown: ^1.0.0-rc.12 + typescript: ^5.0.0 || ^6.0.0 + vue-tsc: ~3.2.0 + peerDependenciesMeta: + '@ts-macro/tsc': + optional: true + '@typescript/native-preview': + optional: true + typescript: + optional: true + vue-tsc: + optional: true + + rolldown@1.0.0-rc.12: + resolution: {integrity: sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + + rollup@4.60.1: + resolution: {integrity: sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==} + engines: {node: '>=18.0.0', npm: '>=8.0.0'} + hasBin: true + + router@2.2.0: + resolution: {integrity: sha512-nLTrUKm2UyiL7rlhapu/Zl45FwNgkZGaCpZbIHajDYgwlJCOzLSk+cIPAnsEqV955GjILJnKbdQC1nVPz+gAYQ==} + engines: {node: '>= 18'} + + rrweb-cssom@0.8.0: + resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==} + + safer-buffer@2.1.2: + resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} + + saxes@6.0.0: + resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==} + engines: {node: '>=v12.22.7'} + + semver@7.7.4: + resolution: {integrity: sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==} + engines: {node: '>=10'} + hasBin: true + + send@1.2.1: + resolution: {integrity: sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==} + engines: {node: '>= 18'} + + serve-static@2.2.1: + resolution: {integrity: sha512-xRXBn0pPqQTVQiC8wyQrKs2MOlX24zQ0POGaj0kultvoOCstBQM5yvOhAVSUwOMjQtTvsPWoNCHfPGwaaQJhTw==} + engines: {node: '>= 18'} + + setprototypeof@1.2.0: + resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==} + + shebang-command@2.0.0: + resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} + engines: {node: '>=8'} + + shebang-regex@3.0.0: + resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} + engines: {node: '>=8'} + + side-channel-list@1.0.0: + resolution: {integrity: sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==} + engines: {node: '>= 0.4'} + + side-channel-map@1.0.1: + resolution: {integrity: sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==} + engines: {node: '>= 0.4'} + + side-channel-weakmap@1.0.2: + resolution: {integrity: sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==} + engines: {node: '>= 0.4'} + + side-channel@1.1.0: + resolution: {integrity: sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==} + engines: {node: '>= 0.4'} + + siginfo@2.0.0: + resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} + + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + + stackback@0.0.2: + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + + statuses@2.0.2: + resolution: {integrity: sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==} + engines: {node: '>= 0.8'} + + std-env@4.0.0: + resolution: {integrity: sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ==} + + strip-json-comments@3.1.1: + resolution: {integrity: sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==} + engines: {node: '>=8'} + + style-to-object@1.0.14: + resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==} + + supports-color@7.2.0: + resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==} + engines: {node: '>=8'} + + symbol-tree@3.2.4: + resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==} + + tinybench@2.9.0: + resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + + tinyexec@1.0.4: + resolution: {integrity: sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw==} + engines: {node: '>=18'} + + tinyglobby@0.2.15: + resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} + engines: {node: '>=12.0.0'} + + tinyrainbow@3.1.0: + resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==} + engines: {node: '>=14.0.0'} + + tldts-core@6.1.86: + resolution: {integrity: sha512-Je6p7pkk+KMzMv2XXKmAE3McmolOQFdxkKw0R8EYNr7sELW46JqnNeTX8ybPiQgvg1ymCoF8LXs5fzFaZvJPTA==} + + tldts@6.1.86: + resolution: {integrity: sha512-WMi/OQ2axVTf/ykqCQgXiIct+mSQDFdH2fkwhPwgEwvJ1kSzZRiinb0zF2Xb8u4+OqPChmyI6MEu4EezNJz+FQ==} + hasBin: true + + toidentifier@1.0.1: + resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} + engines: {node: '>=0.6'} + + tough-cookie@5.1.2: + resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==} + engines: {node: '>=16'} + + tr46@5.1.1: + resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==} + engines: {node: '>=18'} + + tree-kill@1.2.2: + resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} + hasBin: true + + ts-api-utils@2.5.0: + resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==} + engines: {node: '>=18.12'} + peerDependencies: + typescript: '>=4.8.4' + + tsdown@0.21.7: + resolution: {integrity: sha512-ukKIxKQzngkWvOYJAyptudclkm4VQqbjq+9HF5K5qDO8GJsYtMh8gIRwicbnZEnvFPr6mquFwYAVZ8JKt3rY2g==} + engines: {node: '>=20.19.0'} + hasBin: true + peerDependencies: + '@arethetypeswrong/core': ^0.18.1 + '@tsdown/css': 0.21.7 + '@tsdown/exe': 0.21.7 + '@vitejs/devtools': '*' + publint: ^0.3.0 + typescript: ^5.0.0 || ^6.0.0 + unplugin-unused: ^0.5.0 + peerDependenciesMeta: + '@arethetypeswrong/core': + optional: true + '@tsdown/css': + optional: true + '@tsdown/exe': + optional: true + '@vitejs/devtools': + optional: true + publint: + optional: true + typescript: + optional: true + unplugin-unused: + optional: true + + tslib@2.8.1: + resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} + + type-check@0.4.0: + resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==} + engines: {node: '>= 0.8.0'} + + type-is@2.0.1: + resolution: {integrity: sha512-OZs6gsjF4vMp32qrCbiVSkrFmXtG/AZhY3t0iAMrMBiAZyV9oALtXO8hsrHbMXF9x6L3grlFuwW2oAz7cav+Gw==} + engines: {node: '>= 0.6'} + + typescript@6.0.2: + resolution: {integrity: sha512-bGdAIrZ0wiGDo5l8c++HWtbaNCWTS4UTv7RaTH/ThVIgjkveJt83m74bBHMJkuCbslY8ixgLBVZJIOiQlQTjfQ==} + engines: {node: '>=14.17'} + hasBin: true + + unconfig-core@7.5.0: + resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==} + + undici-types@7.18.2: + resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==} + + unpipe@1.0.0: + resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==} + engines: {node: '>= 0.8'} + + unrun@0.2.34: + resolution: {integrity: sha512-LyaghRBR++r7svhDK6tnDz2XaYHWdneBOA0jbS8wnRsHerI9MFljX4fIiTgbbNbEVzZ0C9P1OjWLLe1OqoaaEw==} + engines: {node: '>=20.19.0'} + hasBin: true + peerDependencies: + synckit: ^0.11.11 + peerDependenciesMeta: + synckit: + optional: true + + uri-js@4.4.1: + resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + + vary@1.1.2: + resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} + engines: {node: '>= 0.8'} + + vite@6.4.1: + resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + peerDependencies: + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + jiti: '>=1.21.0' + less: '*' + lightningcss: ^1.21.0 + sass: '*' + sass-embedded: '*' + stylus: '*' + sugarss: '*' + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + jiti: + optional: true + less: + optional: true + lightningcss: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + + vite@8.0.3: + resolution: {integrity: sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ==} + engines: {node: ^20.19.0 || >=22.12.0} + hasBin: true + peerDependencies: + '@types/node': ^20.19.0 || >=22.12.0 + '@vitejs/devtools': ^0.1.0 + esbuild: ^0.27.0 + jiti: '>=1.21.0' + less: ^4.0.0 + sass: ^1.70.0 + sass-embedded: ^1.70.0 + stylus: '>=0.54.8' + sugarss: ^5.0.0 + terser: ^5.16.0 + tsx: ^4.8.1 + yaml: ^2.4.2 + peerDependenciesMeta: + '@types/node': + optional: true + '@vitejs/devtools': + optional: true + esbuild: + optional: true + jiti: + optional: true + less: + optional: true + sass: + optional: true + sass-embedded: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true + tsx: + optional: true + yaml: + optional: true + + vitest@4.1.2: + resolution: {integrity: sha512-xjR1dMTVHlFLh98JE3i/f/WePqJsah4A0FK9cc8Ehp9Udk0AZk6ccpIZhh1qJ/yxVWRZ+Q54ocnD8TXmkhspGg==} + engines: {node: ^20.0.0 || ^22.0.0 || >=24.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@opentelemetry/api': ^1.9.0 + '@types/node': ^20.0.0 || ^22.0.0 || >=24.0.0 + '@vitest/browser-playwright': 4.1.2 + '@vitest/browser-preview': 4.1.2 + '@vitest/browser-webdriverio': 4.1.2 + '@vitest/ui': 4.1.2 + happy-dom: '*' + jsdom: '*' + vite: ^6.0.0 || ^7.0.0 || ^8.0.0 + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@opentelemetry/api': + optional: true + '@types/node': + optional: true + '@vitest/browser-playwright': + optional: true + '@vitest/browser-preview': + optional: true + '@vitest/browser-webdriverio': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + + w3c-xmlserializer@5.0.0: + resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} + engines: {node: '>=18'} + + webidl-conversions@7.0.0: + resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} + engines: {node: '>=12'} + + whatwg-encoding@3.1.1: + resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} + engines: {node: '>=18'} + deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation + + whatwg-mimetype@4.0.0: + resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} + engines: {node: '>=18'} + + whatwg-url@14.2.0: + resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==} + engines: {node: '>=18'} + + which@2.0.2: + resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} + engines: {node: '>= 8'} + hasBin: true + + why-is-node-running@2.3.0: + resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==} + engines: {node: '>=8'} + hasBin: true + + word-wrap@1.2.5: + resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} + engines: {node: '>=0.10.0'} + + wrappy@1.0.2: + resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} + + ws@8.20.0: + resolution: {integrity: sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + + xml-name-validator@5.0.0: + resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} + engines: {node: '>=18'} + + xmlchars@2.2.0: + resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==} + + yocto-queue@0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + + zod-to-json-schema@3.25.2: + resolution: {integrity: sha512-O/PgfnpT1xKSDeQYSCfRI5Gy3hPf91mKVDuYLUHZJMiDFptvP41MSnWofm8dnCm0256ZNfZIM7DSzuSMAFnjHA==} + peerDependencies: + zod: ^3.25.28 || ^4 + + zod@4.3.6: + resolution: {integrity: sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==} + +snapshots: + + '@asamuzakjp/css-color@3.2.0': + dependencies: + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-color-parser': 3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + lru-cache: 10.4.3 + optional: true + + '@babel/generator@8.0.0-rc.3': + dependencies: + '@babel/parser': 8.0.0-rc.3 + '@babel/types': 8.0.0-rc.3 + '@jridgewell/gen-mapping': 0.3.13 + '@jridgewell/trace-mapping': 0.3.31 + '@types/jsesc': 2.5.1 + jsesc: 3.1.0 + + '@babel/helper-string-parser@8.0.0-rc.3': {} + + '@babel/helper-validator-identifier@8.0.0-rc.3': {} + + '@babel/parser@8.0.0-rc.3': + dependencies: + '@babel/types': 8.0.0-rc.3 + + '@babel/types@8.0.0-rc.3': + dependencies: + '@babel/helper-string-parser': 8.0.0-rc.3 + '@babel/helper-validator-identifier': 8.0.0-rc.3 + + '@biomejs/biome@1.9.4': + optionalDependencies: + '@biomejs/cli-darwin-arm64': 1.9.4 + '@biomejs/cli-darwin-x64': 1.9.4 + '@biomejs/cli-linux-arm64': 1.9.4 + '@biomejs/cli-linux-arm64-musl': 1.9.4 + '@biomejs/cli-linux-x64': 1.9.4 + '@biomejs/cli-linux-x64-musl': 1.9.4 + '@biomejs/cli-win32-arm64': 1.9.4 + '@biomejs/cli-win32-x64': 1.9.4 + + '@biomejs/cli-darwin-arm64@1.9.4': + optional: true + + '@biomejs/cli-darwin-x64@1.9.4': + optional: true + + '@biomejs/cli-linux-arm64-musl@1.9.4': + optional: true + + '@biomejs/cli-linux-arm64@1.9.4': + optional: true + + '@biomejs/cli-linux-x64-musl@1.9.4': + optional: true + + '@biomejs/cli-linux-x64@1.9.4': + optional: true + + '@biomejs/cli-win32-arm64@1.9.4': + optional: true + + '@biomejs/cli-win32-x64@1.9.4': + optional: true + + '@csstools/color-helpers@5.1.0': + optional: true + + '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + optional: true + + '@csstools/css-color-parser@3.1.0(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/color-helpers': 5.1.0 + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 + optional: true + + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': + dependencies: + '@csstools/css-tokenizer': 3.0.4 + optional: true + + '@csstools/css-tokenizer@3.0.4': + optional: true + + '@emnapi/core@1.9.1': + dependencies: + '@emnapi/wasi-threads': 1.2.0 + tslib: 2.8.1 + optional: true + + '@emnapi/runtime@1.9.1': + dependencies: + tslib: 2.8.1 + optional: true + + '@emnapi/wasi-threads@1.2.0': + dependencies: + tslib: 2.8.1 + optional: true + + '@esbuild/aix-ppc64@0.25.12': + optional: true + + '@esbuild/android-arm64@0.25.12': + optional: true + + '@esbuild/android-arm@0.25.12': + optional: true + + '@esbuild/android-x64@0.25.12': + optional: true + + '@esbuild/darwin-arm64@0.25.12': + optional: true + + '@esbuild/darwin-x64@0.25.12': + optional: true + + '@esbuild/freebsd-arm64@0.25.12': + optional: true + + '@esbuild/freebsd-x64@0.25.12': + optional: true + + '@esbuild/linux-arm64@0.25.12': + optional: true + + '@esbuild/linux-arm@0.25.12': + optional: true + + '@esbuild/linux-ia32@0.25.12': + optional: true + + '@esbuild/linux-loong64@0.25.12': + optional: true + + '@esbuild/linux-mips64el@0.25.12': + optional: true + + '@esbuild/linux-ppc64@0.25.12': + optional: true + + '@esbuild/linux-riscv64@0.25.12': + optional: true + + '@esbuild/linux-s390x@0.25.12': + optional: true + + '@esbuild/linux-x64@0.25.12': + optional: true + + '@esbuild/netbsd-arm64@0.25.12': + optional: true + + '@esbuild/netbsd-x64@0.25.12': + optional: true + + '@esbuild/openbsd-arm64@0.25.12': + optional: true + + '@esbuild/openbsd-x64@0.25.12': + optional: true + + '@esbuild/openharmony-arm64@0.25.12': + optional: true + + '@esbuild/sunos-x64@0.25.12': + optional: true + + '@esbuild/win32-arm64@0.25.12': + optional: true + + '@esbuild/win32-ia32@0.25.12': + optional: true + + '@esbuild/win32-x64@0.25.12': + optional: true + + '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@2.6.1))': + dependencies: + eslint: 9.39.4(jiti@2.6.1) + eslint-visitor-keys: 3.4.3 + + '@eslint-community/regexpp@4.12.2': {} + + '@eslint/config-array@0.21.2': + dependencies: + '@eslint/object-schema': 2.1.7 + debug: 4.4.3 + minimatch: 3.1.5 + transitivePeerDependencies: + - supports-color + + '@eslint/config-helpers@0.4.2': + dependencies: + '@eslint/core': 0.17.0 + + '@eslint/core@0.17.0': + dependencies: + '@types/json-schema': 7.0.15 + + '@eslint/eslintrc@3.3.5': + dependencies: + ajv: 6.14.0 + debug: 4.4.3 + espree: 10.4.0 + globals: 14.0.0 + ignore: 5.3.2 + import-fresh: 3.3.1 + js-yaml: 4.1.1 + minimatch: 3.1.5 + strip-json-comments: 3.1.1 + transitivePeerDependencies: + - supports-color + + '@eslint/js@9.39.4': {} + + '@eslint/object-schema@2.1.7': {} + + '@eslint/plugin-kit@0.4.1': + dependencies: + '@eslint/core': 0.17.0 + levn: 0.4.1 + + '@hono/node-server@1.19.11(hono@4.12.9)': + dependencies: + hono: 4.12.9 + + '@humanfs/core@0.19.1': {} + + '@humanfs/node@0.16.7': + dependencies: + '@humanfs/core': 0.19.1 + '@humanwhocodes/retry': 0.4.3 + + '@humanwhocodes/module-importer@1.0.1': {} + + '@humanwhocodes/retry@0.4.3': {} + + '@jridgewell/gen-mapping@0.3.13': + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + '@jridgewell/trace-mapping': 0.3.31 + + '@jridgewell/resolve-uri@3.1.2': {} + + '@jridgewell/sourcemap-codec@1.5.5': {} + + '@jridgewell/trace-mapping@0.3.31': + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.5.5 + + '@modelcontextprotocol/sdk@1.28.0(zod@4.3.6)': + dependencies: + '@hono/node-server': 1.19.11(hono@4.12.9) + ajv: 8.18.0 + ajv-formats: 3.0.1(ajv@8.18.0) + content-type: 1.0.5 + cors: 2.8.6 + cross-spawn: 7.0.6 + eventsource: 3.0.7 + eventsource-parser: 3.0.6 + express: 5.2.1 + express-rate-limit: 8.3.1(express@5.2.1) + hono: 4.12.9 + jose: 6.2.2 + json-schema-typed: 8.0.2 + pkce-challenge: 5.0.1 + raw-body: 3.0.2 + zod: 4.3.6 + zod-to-json-schema: 3.25.2(zod@4.3.6) + transitivePeerDependencies: + - supports-color + + '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)': + dependencies: + '@emnapi/core': 1.9.1 + '@emnapi/runtime': 1.9.1 + '@tybys/wasm-util': 0.10.1 + optional: true + + '@oxc-project/types@0.122.0': {} + + '@quansync/fs@1.0.0': + dependencies: + quansync: 1.0.0 + + '@rolldown/binding-android-arm64@1.0.0-rc.12': + optional: true + + '@rolldown/binding-darwin-arm64@1.0.0-rc.12': + optional: true + + '@rolldown/binding-darwin-x64@1.0.0-rc.12': + optional: true + + '@rolldown/binding-freebsd-x64@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-arm64-musl@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-x64-gnu@1.0.0-rc.12': + optional: true + + '@rolldown/binding-linux-x64-musl@1.0.0-rc.12': + optional: true + + '@rolldown/binding-openharmony-arm64@1.0.0-rc.12': + optional: true + + '@rolldown/binding-wasm32-wasi@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)': + dependencies: + '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + optional: true + + '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12': + optional: true + + '@rolldown/binding-win32-x64-msvc@1.0.0-rc.12': + optional: true + + '@rolldown/pluginutils@1.0.0-rc.12': {} + + '@rollup/rollup-android-arm-eabi@4.60.1': + optional: true + + '@rollup/rollup-android-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-arm64@4.60.1': + optional: true + + '@rollup/rollup-darwin-x64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-arm64@4.60.1': + optional: true + + '@rollup/rollup-freebsd-x64@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-gnueabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm-musleabihf@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-arm64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-loong64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-ppc64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-riscv64-musl@4.60.1': + optional: true + + '@rollup/rollup-linux-s390x-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-linux-x64-musl@4.60.1': + optional: true + + '@rollup/rollup-openbsd-x64@4.60.1': + optional: true + + '@rollup/rollup-openharmony-arm64@4.60.1': + optional: true + + '@rollup/rollup-win32-arm64-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-ia32-msvc@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-gnu@4.60.1': + optional: true + + '@rollup/rollup-win32-x64-msvc@4.60.1': + optional: true + + '@standard-schema/spec@1.1.0': {} + + '@tybys/wasm-util@0.10.1': + dependencies: + tslib: 2.8.1 + optional: true + + '@types/chai@5.2.3': + dependencies: + '@types/deep-eql': 4.0.2 + assertion-error: 2.0.1 + + '@types/deep-eql@4.0.2': {} + + '@types/estree@1.0.8': {} + + '@types/jsesc@2.5.1': {} + + '@types/json-schema@7.0.15': {} + + '@types/node@25.5.0': + dependencies: + undici-types: 7.18.2 + optional: true + + '@typescript-eslint/parser@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2)': + dependencies: + '@typescript-eslint/scope-manager': 8.57.2 + '@typescript-eslint/types': 8.57.2 + '@typescript-eslint/typescript-estree': 8.57.2(typescript@6.0.2) + '@typescript-eslint/visitor-keys': 8.57.2 + debug: 4.4.3 + eslint: 9.39.4(jiti@2.6.1) + typescript: 6.0.2 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/project-service@8.57.2(typescript@6.0.2)': + dependencies: + '@typescript-eslint/tsconfig-utils': 8.57.2(typescript@6.0.2) + '@typescript-eslint/types': 8.57.2 + debug: 4.4.3 + typescript: 6.0.2 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/scope-manager@8.57.2': + dependencies: + '@typescript-eslint/types': 8.57.2 + '@typescript-eslint/visitor-keys': 8.57.2 + + '@typescript-eslint/tsconfig-utils@8.57.2(typescript@6.0.2)': + dependencies: + typescript: 6.0.2 + + '@typescript-eslint/types@8.57.2': {} + + '@typescript-eslint/typescript-estree@8.57.2(typescript@6.0.2)': + dependencies: + '@typescript-eslint/project-service': 8.57.2(typescript@6.0.2) + '@typescript-eslint/tsconfig-utils': 8.57.2(typescript@6.0.2) + '@typescript-eslint/types': 8.57.2 + '@typescript-eslint/visitor-keys': 8.57.2 + debug: 4.4.3 + minimatch: 10.2.4 + semver: 7.7.4 + tinyglobby: 0.2.15 + ts-api-utils: 2.5.0(typescript@6.0.2) + typescript: 6.0.2 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/utils@8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2)': + dependencies: + '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1)) + '@typescript-eslint/scope-manager': 8.57.2 + '@typescript-eslint/types': 8.57.2 + '@typescript-eslint/typescript-estree': 8.57.2(typescript@6.0.2) + eslint: 9.39.4(jiti@2.6.1) + typescript: 6.0.2 + transitivePeerDependencies: + - supports-color + + '@typescript-eslint/visitor-keys@8.57.2': + dependencies: + '@typescript-eslint/types': 8.57.2 + eslint-visitor-keys: 5.0.1 + + '@vitest/expect@4.1.2': + dependencies: + '@standard-schema/spec': 1.1.0 + '@types/chai': 5.2.3 + '@vitest/spy': 4.1.2 + '@vitest/utils': 4.1.2 + chai: 6.2.2 + tinyrainbow: 3.1.0 + + '@vitest/mocker@4.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1))': + dependencies: + '@vitest/spy': 4.1.2 + estree-walker: 3.0.3 + magic-string: 0.30.21 + optionalDependencies: + vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) + + '@vitest/pretty-format@4.1.2': + dependencies: + tinyrainbow: 3.1.0 + + '@vitest/runner@4.1.2': + dependencies: + '@vitest/utils': 4.1.2 + pathe: 2.0.3 + + '@vitest/snapshot@4.1.2': + dependencies: + '@vitest/pretty-format': 4.1.2 + '@vitest/utils': 4.1.2 + magic-string: 0.30.21 + pathe: 2.0.3 + + '@vitest/spy@4.1.2': {} + + '@vitest/utils@4.1.2': + dependencies: + '@vitest/pretty-format': 4.1.2 + convert-source-map: 2.0.0 + tinyrainbow: 3.1.0 + + accepts@2.0.0: + dependencies: + mime-types: 3.0.2 + negotiator: 1.0.0 + + acorn-jsx@5.3.2(acorn@8.16.0): + dependencies: + acorn: 8.16.0 + + acorn@8.16.0: {} + + agent-base@7.1.4: + optional: true + + ajv-formats@3.0.1(ajv@8.18.0): + optionalDependencies: + ajv: 8.18.0 + + ajv@6.14.0: + dependencies: + fast-deep-equal: 3.1.3 + fast-json-stable-stringify: 2.1.0 + json-schema-traverse: 0.4.1 + uri-js: 4.4.1 + + ajv@8.18.0: + dependencies: + fast-deep-equal: 3.1.3 + fast-uri: 3.1.0 + json-schema-traverse: 1.0.0 + require-from-string: 2.0.2 + + ansi-styles@4.3.0: + dependencies: + color-convert: 2.0.1 + + ansis@4.2.0: {} + + argparse@2.0.1: {} + + assertion-error@2.0.1: {} + + ast-kit@3.0.0-beta.1: + dependencies: + '@babel/parser': 8.0.0-rc.3 + estree-walker: 3.0.3 + pathe: 2.0.3 + + balanced-match@1.0.2: {} + + balanced-match@4.0.4: {} + + birpc@4.0.0: {} + + body-parser@2.2.2: + dependencies: + bytes: 3.1.2 + content-type: 1.0.5 + debug: 4.4.3 + http-errors: 2.0.1 + iconv-lite: 0.7.2 + on-finished: 2.4.1 + qs: 6.15.0 + raw-body: 3.0.2 + type-is: 2.0.1 + transitivePeerDependencies: + - supports-color + + brace-expansion@1.1.13: + dependencies: + balanced-match: 1.0.2 + concat-map: 0.0.1 + + brace-expansion@5.0.5: + dependencies: + balanced-match: 4.0.4 + + bytes@3.1.2: {} + + cac@7.0.0: {} + + call-bind-apply-helpers@1.0.2: + dependencies: + es-errors: 1.3.0 + function-bind: 1.1.2 + + call-bound@1.0.4: + dependencies: + call-bind-apply-helpers: 1.0.2 + get-intrinsic: 1.3.0 + + callsites@3.1.0: {} + + chai@6.2.2: {} + + chalk@4.1.2: + dependencies: + ansi-styles: 4.3.0 + supports-color: 7.2.0 + + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + + concat-map@0.0.1: {} + + content-disposition@1.0.1: {} + + content-type@1.0.5: {} + + convert-source-map@2.0.0: {} + + cookie-signature@1.2.2: {} + + cookie@0.7.2: {} + + cors@2.8.6: + dependencies: + object-assign: 4.1.1 + vary: 1.1.2 + + cross-spawn@7.0.6: + dependencies: + path-key: 3.1.1 + shebang-command: 2.0.0 + which: 2.0.2 + + cssstyle@4.6.0: + dependencies: + '@asamuzakjp/css-color': 3.2.0 + rrweb-cssom: 0.8.0 + optional: true + + data-urls@5.0.0: + dependencies: + whatwg-mimetype: 4.0.0 + whatwg-url: 14.2.0 + optional: true + + debug@4.4.3: + dependencies: + ms: 2.1.3 + + decimal.js@10.6.0: + optional: true + + deep-is@0.1.4: {} + + defu@6.1.4: {} + + depd@2.0.0: {} + + detect-libc@2.1.2: {} + + dts-resolver@2.1.3: {} + + dunder-proto@1.0.1: + dependencies: + call-bind-apply-helpers: 1.0.2 + es-errors: 1.3.0 + gopd: 1.2.0 + + ee-first@1.1.1: {} + + empathic@2.0.0: {} + + encodeurl@2.0.0: {} + + entities@6.0.1: + optional: true + + es-define-property@1.0.1: {} + + es-errors@1.3.0: {} + + es-module-lexer@2.0.0: {} + + es-object-atoms@1.1.1: + dependencies: + es-errors: 1.3.0 + + esbuild@0.25.12: + optionalDependencies: + '@esbuild/aix-ppc64': 0.25.12 + '@esbuild/android-arm': 0.25.12 + '@esbuild/android-arm64': 0.25.12 + '@esbuild/android-x64': 0.25.12 + '@esbuild/darwin-arm64': 0.25.12 + '@esbuild/darwin-x64': 0.25.12 + '@esbuild/freebsd-arm64': 0.25.12 + '@esbuild/freebsd-x64': 0.25.12 + '@esbuild/linux-arm': 0.25.12 + '@esbuild/linux-arm64': 0.25.12 + '@esbuild/linux-ia32': 0.25.12 + '@esbuild/linux-loong64': 0.25.12 + '@esbuild/linux-mips64el': 0.25.12 + '@esbuild/linux-ppc64': 0.25.12 + '@esbuild/linux-riscv64': 0.25.12 + '@esbuild/linux-s390x': 0.25.12 + '@esbuild/linux-x64': 0.25.12 + '@esbuild/netbsd-arm64': 0.25.12 + '@esbuild/netbsd-x64': 0.25.12 + '@esbuild/openbsd-arm64': 0.25.12 + '@esbuild/openbsd-x64': 0.25.12 + '@esbuild/openharmony-arm64': 0.25.12 + '@esbuild/sunos-x64': 0.25.12 + '@esbuild/win32-arm64': 0.25.12 + '@esbuild/win32-ia32': 0.25.12 + '@esbuild/win32-x64': 0.25.12 + + escape-html@1.0.3: {} + + escape-string-regexp@4.0.0: {} + + eslint-plugin-solid@0.14.5(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2): + dependencies: + '@typescript-eslint/utils': 8.57.2(eslint@9.39.4(jiti@2.6.1))(typescript@6.0.2) + eslint: 9.39.4(jiti@2.6.1) + estraverse: 5.3.0 + is-html: 2.0.0 + kebab-case: 1.0.2 + known-css-properties: 0.30.0 + style-to-object: 1.0.14 + typescript: 6.0.2 + transitivePeerDependencies: + - supports-color + + eslint-scope@8.4.0: + dependencies: + esrecurse: 4.3.0 + estraverse: 5.3.0 + + eslint-visitor-keys@3.4.3: {} + + eslint-visitor-keys@4.2.1: {} + + eslint-visitor-keys@5.0.1: {} + + eslint@9.39.4(jiti@2.6.1): + dependencies: + '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@2.6.1)) + '@eslint-community/regexpp': 4.12.2 + '@eslint/config-array': 0.21.2 + '@eslint/config-helpers': 0.4.2 + '@eslint/core': 0.17.0 + '@eslint/eslintrc': 3.3.5 + '@eslint/js': 9.39.4 + '@eslint/plugin-kit': 0.4.1 + '@humanfs/node': 0.16.7 + '@humanwhocodes/module-importer': 1.0.1 + '@humanwhocodes/retry': 0.4.3 + '@types/estree': 1.0.8 + ajv: 6.14.0 + chalk: 4.1.2 + cross-spawn: 7.0.6 + debug: 4.4.3 + escape-string-regexp: 4.0.0 + eslint-scope: 8.4.0 + eslint-visitor-keys: 4.2.1 + espree: 10.4.0 + esquery: 1.7.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 8.0.0 + find-up: 5.0.0 + glob-parent: 6.0.2 + ignore: 5.3.2 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + json-stable-stringify-without-jsonify: 1.0.1 + lodash.merge: 4.6.2 + minimatch: 3.1.5 + natural-compare: 1.4.0 + optionator: 0.9.4 + optionalDependencies: + jiti: 2.6.1 + transitivePeerDependencies: + - supports-color + + espree@10.4.0: + dependencies: + acorn: 8.16.0 + acorn-jsx: 5.3.2(acorn@8.16.0) + eslint-visitor-keys: 4.2.1 + + esquery@1.7.0: + dependencies: + estraverse: 5.3.0 + + esrecurse@4.3.0: + dependencies: + estraverse: 5.3.0 + + estraverse@5.3.0: {} + + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.8 + + esutils@2.0.3: {} + + etag@1.8.1: {} + + eventsource-parser@3.0.6: {} + + eventsource@3.0.7: + dependencies: + eventsource-parser: 3.0.6 + + expect-type@1.3.0: {} + + express-rate-limit@8.3.1(express@5.2.1): + dependencies: + express: 5.2.1 + ip-address: 10.1.0 + + express@5.2.1: + dependencies: + accepts: 2.0.0 + body-parser: 2.2.2 + content-disposition: 1.0.1 + content-type: 1.0.5 + cookie: 0.7.2 + cookie-signature: 1.2.2 + debug: 4.4.3 + depd: 2.0.0 + encodeurl: 2.0.0 + escape-html: 1.0.3 + etag: 1.8.1 + finalhandler: 2.1.1 + fresh: 2.0.0 + http-errors: 2.0.1 + merge-descriptors: 2.0.0 + mime-types: 3.0.2 + on-finished: 2.4.1 + once: 1.4.0 + parseurl: 1.3.3 + proxy-addr: 2.0.7 + qs: 6.15.0 + range-parser: 1.2.1 + router: 2.2.0 + send: 1.2.1 + serve-static: 2.2.1 + statuses: 2.0.2 + type-is: 2.0.1 + vary: 1.1.2 + transitivePeerDependencies: + - supports-color + + fast-deep-equal@3.1.3: {} + + fast-json-stable-stringify@2.1.0: {} + + fast-levenshtein@2.0.6: {} + + fast-uri@3.1.0: {} + + fdir@6.5.0(picomatch@4.0.4): + optionalDependencies: + picomatch: 4.0.4 + + file-entry-cache@8.0.0: + dependencies: + flat-cache: 4.0.1 + + finalhandler@2.1.1: + dependencies: + debug: 4.4.3 + encodeurl: 2.0.0 + escape-html: 1.0.3 + on-finished: 2.4.1 + parseurl: 1.3.3 + statuses: 2.0.2 + transitivePeerDependencies: + - supports-color + + find-up@5.0.0: + dependencies: + locate-path: 6.0.0 + path-exists: 4.0.0 + + flat-cache@4.0.1: + dependencies: + flatted: 3.4.2 + keyv: 4.5.4 + + flatted@3.4.2: {} + + forwarded@0.2.0: {} + + fresh@2.0.0: {} + + fsevents@2.3.3: + optional: true + + function-bind@1.1.2: {} + + get-intrinsic@1.3.0: + dependencies: + call-bind-apply-helpers: 1.0.2 + es-define-property: 1.0.1 + es-errors: 1.3.0 + es-object-atoms: 1.1.1 + function-bind: 1.1.2 + get-proto: 1.0.1 + gopd: 1.2.0 + has-symbols: 1.1.0 + hasown: 2.0.2 + math-intrinsics: 1.1.0 + + get-proto@1.0.1: + dependencies: + dunder-proto: 1.0.1 + es-object-atoms: 1.1.1 + + get-tsconfig@4.13.7: + dependencies: + resolve-pkg-maps: 1.0.0 + + glob-parent@6.0.2: + dependencies: + is-glob: 4.0.3 + + globals@14.0.0: {} + + gopd@1.2.0: {} + + has-flag@4.0.0: {} + + has-symbols@1.1.0: {} + + hasown@2.0.2: + dependencies: + function-bind: 1.1.2 + + hono@4.12.9: {} + + hookable@6.1.0: {} + + html-encoding-sniffer@4.0.0: + dependencies: + whatwg-encoding: 3.1.1 + optional: true + + html-tags@3.3.1: {} + + http-errors@2.0.1: + dependencies: + depd: 2.0.0 + inherits: 2.0.4 + setprototypeof: 1.2.0 + statuses: 2.0.2 + toidentifier: 1.0.1 + + http-proxy-agent@7.0.2: + dependencies: + agent-base: 7.1.4 + debug: 4.4.3 + transitivePeerDependencies: + - supports-color + optional: true + + https-proxy-agent@7.0.6: + dependencies: + agent-base: 7.1.4 + debug: 4.4.3 + transitivePeerDependencies: + - supports-color + optional: true + + iconv-lite@0.6.3: + dependencies: + safer-buffer: 2.1.2 + optional: true + + iconv-lite@0.7.2: + dependencies: + safer-buffer: 2.1.2 + + ignore@5.3.2: {} + + import-fresh@3.3.1: + dependencies: + parent-module: 1.0.1 + resolve-from: 4.0.0 + + import-without-cache@0.2.5: {} + + imurmurhash@0.1.4: {} + + inherits@2.0.4: {} + + inline-style-parser@0.2.7: {} + + ip-address@10.1.0: {} + + ipaddr.js@1.9.1: {} + + is-extglob@2.1.1: {} + + is-glob@4.0.3: + dependencies: + is-extglob: 2.1.1 + + is-html@2.0.0: + dependencies: + html-tags: 3.3.1 + + is-potential-custom-element-name@1.0.1: + optional: true + + is-promise@4.0.0: {} + + isexe@2.0.0: {} + + jiti@2.6.1: + optional: true + + jose@6.2.2: {} + + js-yaml@4.1.1: + dependencies: + argparse: 2.0.1 + + jsdom@26.1.0: + dependencies: + cssstyle: 4.6.0 + data-urls: 5.0.0 + decimal.js: 10.6.0 + html-encoding-sniffer: 4.0.0 + http-proxy-agent: 7.0.2 + https-proxy-agent: 7.0.6 + is-potential-custom-element-name: 1.0.1 + nwsapi: 2.2.23 + parse5: 7.3.0 + rrweb-cssom: 0.8.0 + saxes: 6.0.0 + symbol-tree: 3.2.4 + tough-cookie: 5.1.2 + w3c-xmlserializer: 5.0.0 + webidl-conversions: 7.0.0 + whatwg-encoding: 3.1.1 + whatwg-mimetype: 4.0.0 + whatwg-url: 14.2.0 + ws: 8.20.0 + xml-name-validator: 5.0.0 + transitivePeerDependencies: + - bufferutil + - supports-color + - utf-8-validate + optional: true + + jsesc@3.1.0: {} + + json-buffer@3.0.1: {} + + json-schema-traverse@0.4.1: {} + + json-schema-traverse@1.0.0: {} + + json-schema-typed@8.0.2: {} + + json-stable-stringify-without-jsonify@1.0.1: {} + + kebab-case@1.0.2: {} + + keyv@4.5.4: + dependencies: + json-buffer: 3.0.1 + + known-css-properties@0.30.0: {} + + levn@0.4.1: + dependencies: + prelude-ls: 1.2.1 + type-check: 0.4.0 + + lightningcss-android-arm64@1.32.0: + optional: true + + lightningcss-darwin-arm64@1.32.0: + optional: true + + lightningcss-darwin-x64@1.32.0: + optional: true + + lightningcss-freebsd-x64@1.32.0: + optional: true + + lightningcss-linux-arm-gnueabihf@1.32.0: + optional: true + + lightningcss-linux-arm64-gnu@1.32.0: + optional: true + + lightningcss-linux-arm64-musl@1.32.0: + optional: true + + lightningcss-linux-x64-gnu@1.32.0: + optional: true + + lightningcss-linux-x64-musl@1.32.0: + optional: true + + lightningcss-win32-arm64-msvc@1.32.0: + optional: true + + lightningcss-win32-x64-msvc@1.32.0: + optional: true + + lightningcss@1.32.0: + dependencies: + detect-libc: 2.1.2 + optionalDependencies: + lightningcss-android-arm64: 1.32.0 + lightningcss-darwin-arm64: 1.32.0 + lightningcss-darwin-x64: 1.32.0 + lightningcss-freebsd-x64: 1.32.0 + lightningcss-linux-arm-gnueabihf: 1.32.0 + lightningcss-linux-arm64-gnu: 1.32.0 + lightningcss-linux-arm64-musl: 1.32.0 + lightningcss-linux-x64-gnu: 1.32.0 + lightningcss-linux-x64-musl: 1.32.0 + lightningcss-win32-arm64-msvc: 1.32.0 + lightningcss-win32-x64-msvc: 1.32.0 + + locate-path@6.0.0: + dependencies: + p-locate: 5.0.0 + + lodash.merge@4.6.2: {} + + lru-cache@10.4.3: + optional: true + + magic-string@0.30.21: + dependencies: + '@jridgewell/sourcemap-codec': 1.5.5 + + math-intrinsics@1.1.0: {} + + media-typer@1.1.0: {} + + merge-descriptors@2.0.0: {} + + mime-db@1.54.0: {} + + mime-types@3.0.2: + dependencies: + mime-db: 1.54.0 + + minimatch@10.2.4: + dependencies: + brace-expansion: 5.0.5 + + minimatch@3.1.5: + dependencies: + brace-expansion: 1.1.13 + + ms@2.1.3: {} + + nanoid@3.3.11: {} + + natural-compare@1.4.0: {} + + negotiator@1.0.0: {} + + nwsapi@2.2.23: + optional: true + + object-assign@4.1.1: {} + + object-inspect@1.13.4: {} + + obug@2.1.1: {} + + on-finished@2.4.1: + dependencies: + ee-first: 1.1.1 + + once@1.4.0: + dependencies: + wrappy: 1.0.2 + + optionator@0.9.4: + dependencies: + deep-is: 0.1.4 + fast-levenshtein: 2.0.6 + levn: 0.4.1 + prelude-ls: 1.2.1 + type-check: 0.4.0 + word-wrap: 1.2.5 + + p-limit@3.1.0: + dependencies: + yocto-queue: 0.1.0 + + p-locate@5.0.0: + dependencies: + p-limit: 3.1.0 + + parent-module@1.0.1: + dependencies: + callsites: 3.1.0 + + parse5@7.3.0: + dependencies: + entities: 6.0.1 + optional: true + + parseurl@1.3.3: {} + + path-exists@4.0.0: {} + + path-key@3.1.1: {} + + path-to-regexp@8.4.0: {} + + pathe@2.0.3: {} + + picocolors@1.1.1: {} + + picomatch@4.0.4: {} + + pkce-challenge@5.0.1: {} + + postcss@8.5.8: + dependencies: + nanoid: 3.3.11 + picocolors: 1.1.1 + source-map-js: 1.2.1 + + prelude-ls@1.2.1: {} + + proxy-addr@2.0.7: + dependencies: + forwarded: 0.2.0 + ipaddr.js: 1.9.1 + + punycode@2.3.1: {} + + qs@6.15.0: + dependencies: + side-channel: 1.1.0 + + quansync@1.0.0: {} + + range-parser@1.2.1: {} + + raw-body@3.0.2: + dependencies: + bytes: 3.1.2 + http-errors: 2.0.1 + iconv-lite: 0.7.2 + unpipe: 1.0.0 + + require-from-string@2.0.2: {} + + resolve-from@4.0.0: {} + + resolve-pkg-maps@1.0.0: {} + + rolldown-plugin-dts@0.23.2(rolldown@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@6.0.2): + dependencies: + '@babel/generator': 8.0.0-rc.3 + '@babel/helper-validator-identifier': 8.0.0-rc.3 + '@babel/parser': 8.0.0-rc.3 + '@babel/types': 8.0.0-rc.3 + ast-kit: 3.0.0-beta.1 + birpc: 4.0.0 + dts-resolver: 2.1.3 + get-tsconfig: 4.13.7 + obug: 2.1.1 + picomatch: 4.0.4 + rolldown: 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + optionalDependencies: + typescript: 6.0.2 + transitivePeerDependencies: + - oxc-resolver + + rolldown@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1): + dependencies: + '@oxc-project/types': 0.122.0 + '@rolldown/pluginutils': 1.0.0-rc.12 + optionalDependencies: + '@rolldown/binding-android-arm64': 1.0.0-rc.12 + '@rolldown/binding-darwin-arm64': 1.0.0-rc.12 + '@rolldown/binding-darwin-x64': 1.0.0-rc.12 + '@rolldown/binding-freebsd-x64': 1.0.0-rc.12 + '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.12 + '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.12 + '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.12 + '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.12 + '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.12 + '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.12 + '@rolldown/binding-linux-x64-musl': 1.0.0-rc.12 + '@rolldown/binding-openharmony-arm64': 1.0.0-rc.12 + '@rolldown/binding-wasm32-wasi': 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.12 + '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.12 + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + + rollup@4.60.1: + dependencies: + '@types/estree': 1.0.8 + optionalDependencies: + '@rollup/rollup-android-arm-eabi': 4.60.1 + '@rollup/rollup-android-arm64': 4.60.1 + '@rollup/rollup-darwin-arm64': 4.60.1 + '@rollup/rollup-darwin-x64': 4.60.1 + '@rollup/rollup-freebsd-arm64': 4.60.1 + '@rollup/rollup-freebsd-x64': 4.60.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.60.1 + '@rollup/rollup-linux-arm-musleabihf': 4.60.1 + '@rollup/rollup-linux-arm64-gnu': 4.60.1 + '@rollup/rollup-linux-arm64-musl': 4.60.1 + '@rollup/rollup-linux-loong64-gnu': 4.60.1 + '@rollup/rollup-linux-loong64-musl': 4.60.1 + '@rollup/rollup-linux-ppc64-gnu': 4.60.1 + '@rollup/rollup-linux-ppc64-musl': 4.60.1 + '@rollup/rollup-linux-riscv64-gnu': 4.60.1 + '@rollup/rollup-linux-riscv64-musl': 4.60.1 + '@rollup/rollup-linux-s390x-gnu': 4.60.1 + '@rollup/rollup-linux-x64-gnu': 4.60.1 + '@rollup/rollup-linux-x64-musl': 4.60.1 + '@rollup/rollup-openbsd-x64': 4.60.1 + '@rollup/rollup-openharmony-arm64': 4.60.1 + '@rollup/rollup-win32-arm64-msvc': 4.60.1 + '@rollup/rollup-win32-ia32-msvc': 4.60.1 + '@rollup/rollup-win32-x64-gnu': 4.60.1 + '@rollup/rollup-win32-x64-msvc': 4.60.1 + fsevents: 2.3.3 + + router@2.2.0: + dependencies: + debug: 4.4.3 + depd: 2.0.0 + is-promise: 4.0.0 + parseurl: 1.3.3 + path-to-regexp: 8.4.0 + transitivePeerDependencies: + - supports-color + + rrweb-cssom@0.8.0: + optional: true + + safer-buffer@2.1.2: {} + + saxes@6.0.0: + dependencies: + xmlchars: 2.2.0 + optional: true + + semver@7.7.4: {} + + send@1.2.1: + dependencies: + debug: 4.4.3 + encodeurl: 2.0.0 + escape-html: 1.0.3 + etag: 1.8.1 + fresh: 2.0.0 + http-errors: 2.0.1 + mime-types: 3.0.2 + ms: 2.1.3 + on-finished: 2.4.1 + range-parser: 1.2.1 + statuses: 2.0.2 + transitivePeerDependencies: + - supports-color + + serve-static@2.2.1: + dependencies: + encodeurl: 2.0.0 + escape-html: 1.0.3 + parseurl: 1.3.3 + send: 1.2.1 + transitivePeerDependencies: + - supports-color + + setprototypeof@1.2.0: {} + + shebang-command@2.0.0: + dependencies: + shebang-regex: 3.0.0 + + shebang-regex@3.0.0: {} + + side-channel-list@1.0.0: + dependencies: + es-errors: 1.3.0 + object-inspect: 1.13.4 + + side-channel-map@1.0.1: + dependencies: + call-bound: 1.0.4 + es-errors: 1.3.0 + get-intrinsic: 1.3.0 + object-inspect: 1.13.4 + + side-channel-weakmap@1.0.2: + dependencies: + call-bound: 1.0.4 + es-errors: 1.3.0 + get-intrinsic: 1.3.0 + object-inspect: 1.13.4 + side-channel-map: 1.0.1 + + side-channel@1.1.0: + dependencies: + es-errors: 1.3.0 + object-inspect: 1.13.4 + side-channel-list: 1.0.0 + side-channel-map: 1.0.1 + side-channel-weakmap: 1.0.2 + + siginfo@2.0.0: {} + + source-map-js@1.2.1: {} + + stackback@0.0.2: {} + + statuses@2.0.2: {} + + std-env@4.0.0: {} + + strip-json-comments@3.1.1: {} + + style-to-object@1.0.14: + dependencies: + inline-style-parser: 0.2.7 + + supports-color@7.2.0: + dependencies: + has-flag: 4.0.0 + + symbol-tree@3.2.4: + optional: true + + tinybench@2.9.0: {} + + tinyexec@1.0.4: {} + + tinyglobby@0.2.15: + dependencies: + fdir: 6.5.0(picomatch@4.0.4) + picomatch: 4.0.4 + + tinyrainbow@3.1.0: {} + + tldts-core@6.1.86: + optional: true + + tldts@6.1.86: + dependencies: + tldts-core: 6.1.86 + optional: true + + toidentifier@1.0.1: {} + + tough-cookie@5.1.2: + dependencies: + tldts: 6.1.86 + optional: true + + tr46@5.1.1: + dependencies: + punycode: 2.3.1 + optional: true + + tree-kill@1.2.2: {} + + ts-api-utils@2.5.0(typescript@6.0.2): + dependencies: + typescript: 6.0.2 + + tsdown@0.21.7(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(typescript@6.0.2): + dependencies: + ansis: 4.2.0 + cac: 7.0.0 + defu: 6.1.4 + empathic: 2.0.0 + hookable: 6.1.0 + import-without-cache: 0.2.5 + obug: 2.1.1 + picomatch: 4.0.4 + rolldown: 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + rolldown-plugin-dts: 0.23.2(rolldown@1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1))(typescript@6.0.2) + semver: 7.7.4 + tinyexec: 1.0.4 + tinyglobby: 0.2.15 + tree-kill: 1.2.2 + unconfig-core: 7.5.0 + unrun: 0.2.34(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + optionalDependencies: + typescript: 6.0.2 + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + - '@ts-macro/tsc' + - '@typescript/native-preview' + - oxc-resolver + - synckit + - vue-tsc + + tslib@2.8.1: + optional: true + + type-check@0.4.0: + dependencies: + prelude-ls: 1.2.1 + + type-is@2.0.1: + dependencies: + content-type: 1.0.5 + media-typer: 1.1.0 + mime-types: 3.0.2 + + typescript@6.0.2: {} + + unconfig-core@7.5.0: + dependencies: + '@quansync/fs': 1.0.0 + quansync: 1.0.0 + + undici-types@7.18.2: + optional: true + + unpipe@1.0.0: {} + + unrun@0.2.34(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1): + dependencies: + rolldown: 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + + uri-js@4.4.1: + dependencies: + punycode: 2.3.1 + + vary@1.1.2: {} + + vite@6.4.1(@types/node@25.5.0)(jiti@2.6.1)(lightningcss@1.32.0): + dependencies: + esbuild: 0.25.12 + fdir: 6.5.0(picomatch@4.0.4) + picomatch: 4.0.4 + postcss: 8.5.8 + rollup: 4.60.1 + tinyglobby: 0.2.15 + optionalDependencies: + '@types/node': 25.5.0 + fsevents: 2.3.3 + jiti: 2.6.1 + lightningcss: 1.32.0 + + vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1): + dependencies: + lightningcss: 1.32.0 + picomatch: 4.0.4 + postcss: 8.5.8 + rolldown: 1.0.0-rc.12(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1) + tinyglobby: 0.2.15 + optionalDependencies: + '@types/node': 25.5.0 + fsevents: 2.3.3 + jiti: 2.6.1 + transitivePeerDependencies: + - '@emnapi/core' + - '@emnapi/runtime' + + vitest@4.1.2(@types/node@25.5.0)(jsdom@26.1.0)(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)): + dependencies: + '@vitest/expect': 4.1.2 + '@vitest/mocker': 4.1.2(vite@8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1)) + '@vitest/pretty-format': 4.1.2 + '@vitest/runner': 4.1.2 + '@vitest/snapshot': 4.1.2 + '@vitest/spy': 4.1.2 + '@vitest/utils': 4.1.2 + es-module-lexer: 2.0.0 + expect-type: 1.3.0 + magic-string: 0.30.21 + obug: 2.1.1 + pathe: 2.0.3 + picomatch: 4.0.4 + std-env: 4.0.0 + tinybench: 2.9.0 + tinyexec: 1.0.4 + tinyglobby: 0.2.15 + tinyrainbow: 3.1.0 + vite: 8.0.3(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)(@types/node@25.5.0)(jiti@2.6.1) + why-is-node-running: 2.3.0 + optionalDependencies: + '@types/node': 25.5.0 + jsdom: 26.1.0 + transitivePeerDependencies: + - msw + + w3c-xmlserializer@5.0.0: + dependencies: + xml-name-validator: 5.0.0 + optional: true + + webidl-conversions@7.0.0: + optional: true + + whatwg-encoding@3.1.1: + dependencies: + iconv-lite: 0.6.3 + optional: true + + whatwg-mimetype@4.0.0: + optional: true + + whatwg-url@14.2.0: + dependencies: + tr46: 5.1.1 + webidl-conversions: 7.0.0 + optional: true + + which@2.0.2: + dependencies: + isexe: 2.0.0 + + why-is-node-running@2.3.0: + dependencies: + siginfo: 2.0.0 + stackback: 0.0.2 + + word-wrap@1.2.5: {} + + wrappy@1.0.2: {} + + ws@8.20.0: + optional: true + + xml-name-validator@5.0.0: + optional: true + + xmlchars@2.2.0: + optional: true + + yocto-queue@0.1.0: {} + + zod-to-json-schema@3.25.2(zod@4.3.6): + dependencies: + zod: 4.3.6 + + zod@4.3.6: {} diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml new file mode 100644 index 0000000..dee51e9 --- /dev/null +++ b/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +packages: + - "packages/*" diff --git a/tsconfig.base.json b/tsconfig.base.json new file mode 100644 index 0000000..9fe33b9 --- /dev/null +++ b/tsconfig.base.json @@ -0,0 +1,17 @@ +{ + "compilerOptions": { + "target": "ES2020", + "module": "ESNext", + "moduleResolution": "bundler", +"strict": true, + "exactOptionalPropertyTypes": true, + "noUncheckedIndexedAccess": true, + "verbatimModuleSyntax": true, + "declaration": true, + "declarationMap": true, + "sourceMap": true, + "esModuleInterop": false, + "skipLibCheck": true, + "ignoreDeprecations": "6.0" + } +}