@mhmo91/schmancy 0.10.6 → 0.10.7

package/dist/agent/schmancy.manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": "1.0.0",
-  "readme": "# Schmancy\n\nA Web Component UI library built on Lit, RxJS, and Tailwind CSS. Surfaces are glass. Depth is light. Interactions are physics.\n\n## Agent runtime\n\nFor sandboxed-iframe agents (Claude Design, Claude Artifacts, any LLM that can\nonly write HTML), schmancy ships a single-URL runtime at `@mhmo91/schmancy/agent`.\nDrop one `<script type=\"module\">` tag and every `<schmancy-*>` element is\nregistered. No bundler, no bare specifiers, no npm install.\n\n```html\n<script type=\"module\">\n  import 'https://esm.sh/@mhmo91/schmancy/agent';\n</script>\n<schmancy-theme root scheme=\"dark\">\n  <schmancy-surface type=\"solid\" fill=\"all\">\n    <schmancy-button>Hi</schmancy-button>\n  </schmancy-surface>\n</schmancy-theme>\n```\n\nThe same entry re-exports the full library surface for in-page script\ncode (`theme`, `area`, `state`, `show`, `lazy`, every directive, every\nservice, `SchmancyElement`). Import from the same URL.\n\nFor introspection — every tag's attributes, events, slots, CSS parts,\nplus the enum `values` array on every typed attribute (so agents don't\nhave to parse `\"'filled' | 'tonal' | ...\"` strings) — read the static\nmanifest at `@mhmo91/schmancy/agent/manifest`. It's a JSON file, shape\nfollows Custom Elements Manifest v1.\n\n## Install\n\n```bash\nnpm install @mhmo91/schmancy\n```\n\n```typescript\nimport '@mhmo91/schmancy'\nimport { magnetic, cursorGlow, gravity } from '@mhmo91/schmancy/directives'\n```\n\n## Use with Claude Code\n\nSchmancy ships a Claude Code plugin (manifest at `.claude-plugin/plugin.json`,\nskill source under `skills/schmancy/`). The npm tarball includes both, so\nafter `npm install @mhmo91/schmancy`, point Claude at the package directory\nwhen launching:\n\n```\nclaude --plugin-dir node_modules/@mhmo91/schmancy\n```\n\nSet a shell alias / `.envrc` so every session in the project picks it up.\nAfter editing plugin files, run `/reload-plugins` inside the session.\n\nClaude now knows every Schmancy component, foundation pattern, and\nconvention; the skill activates automatically when you work on schmancy\ncode — no CLAUDE.md edits, no symlinks.\n\n## Quick Start\n\n```html\n<schmancy-theme root scheme=\"dark\">\n  <schmancy-surface type=\"solid\" fill=\"all\">\n    <schmancy-area name=\"root\" .default=${lazy(() => import('./home.page'))}>\n      <schmancy-route when=\"home-page\" .component=${lazy(() => import('./home.page'))} />\n    </schmancy-area>\n  </schmancy-surface>\n</schmancy-theme>\n```\n\n## Design: Luminous Glass\n\n| Surface | Opacity | Blur | Purpose |\n|---------|---------|------|---------|\n| `solid` | 92% | — | Dense glass, high readability |\n| `subtle` | 78% | 8px | Frosted panel (default) |\n| `glass` | 55% | 16px | Overlays, dialogs, dropdowns |\n| `luminous` | 42% | 20px | Hero panels with glow halo |\n\n## Docs\n\nSchmancy is organized in four layers:\n\n- **Foundations** — [Area](./skills/schmancy/area.md) · [State](./skills/schmancy/state.md) · [Mixins (SchmancyElement)](./skills/schmancy/mixins.md) · [Theme](./skills/schmancy/theme.md) · [Directives](./skills/schmancy/directives.md)\n- **Atoms** — [Typography](./skills/schmancy/typography.md) · [Icons](./skills/schmancy/icons.md) · [Button](./skills/schmancy/button.md) · [Surface](./skills/schmancy/surface.md) · [Divider](./skills/schmancy/divider.md) · [Avatar](./skills/schmancy/avatar.md)\n- **Composites (by job)** — Forms, Navigation, Overlays, Interaction, Feedback, Display\n- **Utilities** — [Animation](./skills/schmancy/animation.md) · [Audio](./skills/schmancy/audio.md) · [Discovery](./skills/schmancy/discovery.md) · [RxJS Utils](./skills/schmancy/rxjs-utils.md) · [Utils](./skills/schmancy/utils.md)\n\n**Full component index:** [skills/schmancy/INDEX.md](./skills/schmancy/INDEX.md) — the single-file map with every tag, service, and convention. Written primarily for AI agents; humans welcome.\n\n## Tech Stack\n\n[Lit](https://lit.dev) · [RxJS](https://rxjs.dev) · [Tailwind CSS v4](https://tailwindcss.com) · [Blackbird](./src/utils/animation.ts)\n\n## License\n\nApache-2.0\n",
+  "readme": "# Schmancy\n\nA Web Component UI library built on Lit, RxJS, and Tailwind CSS. Surfaces are glass. Depth is light. Interactions are physics.\n\n## Agent runtime\n\nFor sandboxed-iframe agents (Claude Design, Claude Artifacts, any LLM that can\nonly write HTML), schmancy ships a single-URL runtime at `@mhmo91/schmancy/agent`.\nDrop one `<script type=\"module\">` tag and every `<schmancy-*>` element is\nregistered. No bundler, no bare specifiers, no npm install.\n\n```html\n<script type=\"module\">\n  import 'https://esm.sh/@mhmo91/schmancy/agent';\n</script>\n<schmancy-theme root scheme=\"dark\">\n  <schmancy-surface type=\"solid\" fill=\"all\">\n    <schmancy-button>Hi</schmancy-button>\n  </schmancy-surface>\n</schmancy-theme>\n```\n\nThe same entry re-exports the full library surface for in-page script\ncode (`theme`, `area`, `state`, `show`, `lazy`, every directive, every\nservice, `SchmancyElement`). Import from the same URL.\n\nFor introspection — every tag's attributes, events, slots, CSS parts,\nplus the enum `values` array on every typed attribute (so agents don't\nhave to parse `\"'filled' | 'tonal' | ...\"` strings) — read the static\nmanifest at `@mhmo91/schmancy/agent/manifest`. It's a JSON file, shape\nfollows Custom Elements Manifest v1.\n\n## Install\n\n```bash\nnpm install @mhmo91/schmancy\n```\n\n```typescript\nimport '@mhmo91/schmancy'\nimport { magnetic, cursorGlow, gravity } from '@mhmo91/schmancy/directives'\n```\n\n## Advanced components — `@mhmo91/schmancy-lab`\n\nReusable-but-opinionated components live in a sibling package: QR scanner,\ncharts, country/timezone selects, map embed. Install separately when you\nneed them. Lab governance (acceptance criterion + quarterly graduation\nclock) lives in [`lab/README.md`](./lab/README.md).\n\n```bash\nnpm install @mhmo91/schmancy @mhmo91/schmancy-lab\n```\n\n## Use with Claude Code\n\nSchmancy ships a Claude Code plugin (manifest at `.claude-plugin/plugin.json`,\nskill source under `skills/schmancy/`). The npm tarball includes both, so\nafter `npm install @mhmo91/schmancy`, point Claude at the package directory\nwhen launching:\n\n```\nclaude --plugin-dir node_modules/@mhmo91/schmancy\n```\n\nSet a shell alias / `.envrc` so every session in the project picks it up.\nAfter editing plugin files, run `/reload-plugins` inside the session.\n\nClaude now knows every Schmancy component, foundation pattern, and\nconvention; the skill activates automatically when you work on schmancy\ncode — no CLAUDE.md edits, no symlinks.\n\n## Quick Start\n\n```html\n<schmancy-theme root scheme=\"dark\">\n  <schmancy-surface type=\"solid\" fill=\"all\">\n    <schmancy-area name=\"root\" .default=${lazy(() => import('./home.page'))}>\n      <schmancy-route when=\"home-page\" .component=${lazy(() => import('./home.page'))} />\n    </schmancy-area>\n  </schmancy-surface>\n</schmancy-theme>\n```\n\n## Design: Luminous Glass\n\n| Surface | Opacity | Blur | Purpose |\n|---------|---------|------|---------|\n| `solid` | 92% | — | Dense glass, high readability |\n| `subtle` | 78% | 8px | Frosted panel (default) |\n| `glass` | 55% | 16px | Overlays, dialogs, dropdowns |\n| `luminous` | 42% | 20px | Hero panels with glow halo |\n\n## Docs\n\nSchmancy is organized in four layers:\n\n- **Foundations** — [Area](./skills/schmancy/area.md) · [State](./skills/schmancy/state.md) · [Mixins (SchmancyElement)](./skills/schmancy/mixins.md) · [Theme](./skills/schmancy/theme.md) · [Directives](./skills/schmancy/directives.md)\n- **Atoms** — [Typography](./skills/schmancy/typography.md) · [Icons](./skills/schmancy/icons.md) · [Button](./skills/schmancy/button.md) · [Surface](./skills/schmancy/surface.md) · [Divider](./skills/schmancy/divider.md) · [Avatar](./skills/schmancy/avatar.md)\n- **Composites (by job)** — Forms, Navigation, Overlays, Interaction, Feedback, Display\n- **Utilities** — [Animation](./skills/schmancy/animation.md) · [Audio](./skills/schmancy/audio.md) · [Discovery](./skills/schmancy/discovery.md) · [RxJS Utils](./skills/schmancy/rxjs-utils.md) · [Utils](./skills/schmancy/utils.md)\n\n**Full component index:** [skills/schmancy/INDEX.md](./skills/schmancy/INDEX.md) — the single-file map with every tag, service, and convention. Written primarily for AI agents; humans welcome.\n\n## Tech Stack\n\n[Lit](https://lit.dev) · [RxJS](https://rxjs.dev) · [Tailwind CSS v4](https://tailwindcss.com) · [Blackbird](./src/utils/animation.ts)\n\n## License\n\nApache-2.0\n",
   "modules": [
     {
       "kind": "javascript-module",
@@ -1009,208 +1009,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "charts/area-chart.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyAreaChart",
-          "tagName": "schmancy-area-chart",
-          "attributes": [
-            {
-              "name": "data",
-              "type": {
-                "text": "ChartDataPoint[]"
-              },
-              "default": "[]",
-              "description": "Chart data points"
-            },
-            {
-              "name": "height",
-              "type": {
-                "text": "number"
-              },
-              "default": "200",
-              "description": "Chart height in pixels"
-            },
-            {
-              "name": "showGrid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Show grid lines"
-            },
-            {
-              "name": "showLabels",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Show x-axis labels"
-            },
-            {
-              "name": "showTooltip",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Enable tooltips"
-            },
-            {
-              "name": "peakCount",
-              "type": {
-                "text": "number"
-              },
-              "default": "3",
-              "description": "Number of peaks to highlight"
-            },
-            {
-              "name": "animationDuration",
-              "type": {
-                "text": "number"
-              },
-              "default": "800",
-              "description": "Animation duration in milliseconds"
-            },
-            {
-              "name": "animated",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Enable entrance animation"
-            },
-            {
-              "name": "valuePrefix",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Prefix for values (e.g., \"EUR \")"
-            },
-            {
-              "name": "valueSuffix",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Suffix for values (e.g., \"%\")"
-            },
-            {
-              "name": "valueDecimals",
-              "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "description": "Decimal places for value display"
-            },
-            {
-              "name": "theme",
-              "type": {
-                "text": "Partial<ChartTheme>"
-              },
-              "default": "{}",
-              "description": "Theme overrides"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "charts/pills.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyPills",
-          "tagName": "schmancy-pills",
-          "attributes": [
-            {
-              "name": "data",
-              "type": {
-                "text": "PillDataPoint[]"
-              },
-              "default": "[]",
-              "description": "Chart data points"
-            },
-            {
-              "name": "valuePrefix",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Prefix for values (e.g., \"EUR \")"
-            },
-            {
-              "name": "valueSuffix",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Suffix for values (e.g., \"%\")"
-            },
-            {
-              "name": "valueDecimals",
-              "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "description": "Decimal places for value display"
-            },
-            {
-              "name": "showMedals",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Show medals for top 3"
-            },
-            {
-              "name": "showLegend",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Show legend for segments"
-            },
-            {
-              "name": "animationDuration",
-              "type": {
-                "text": "number"
-              },
-              "default": "500",
-              "description": "Animation duration in milliseconds"
-            },
-            {
-              "name": "animated",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Enable entrance animation"
-            },
-            {
-              "name": "labelWidth",
-              "type": {
-                "text": "string"
-              },
-              "default": "'w-14'",
-              "description": "Label column width (Tailwind class)"
-            },
-            {
-              "name": "valueWidth",
-              "type": {
-                "text": "string"
-              },
-              "default": "'w-20'",
-              "description": "Value column width (Tailwind class)"
-            }
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "checkbox/checkbox.ts",
@@ -3016,7 +2814,7 @@
             {
               "name": "elevation",
               "type": {
-                "text": "0 | 3 | 2 | 1 | 4 | 5"
+                "text": "0 | 1 | 2 | 3 | 4 | 5"
               },
               "default": "0",
               "description": "Defines the elevation level of the surface."
@@ -3040,118 +2838,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "map/map.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyMap",
-          "tagName": "schmancy-map",
-          "description": "`<schmancy-map>` component  A Google Maps component with an intuitive API for displaying interactive or static maps. Supports both address strings (with automatic geocoding) and precise coordinates.",
-          "attributes": [
-            {
-              "name": "address",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Simple address string that automatically geocodes to display the location. Takes precedence over latitude/longitude if both are provided."
-            },
-            {
-              "name": "latitude",
-              "type": {
-                "text": "number"
-              },
-              "description": "Latitude coordinate for precise location. Used when address is not provided."
-            },
-            {
-              "name": "longitude",
-              "type": {
-                "text": "number"
-              },
-              "description": "Longitude coordinate for precise location. Used when address is not provided."
-            },
-            {
-              "name": "zoom",
-              "type": {
-                "text": "number"
-              },
-              "default": "15",
-              "description": "Map zoom level. Higher numbers show more detail."
-            },
-            {
-              "name": "height",
-              "type": {
-                "text": "string"
-              },
-              "default": "'400px'",
-              "description": "Height of the map with CSS unit (e.g., \"400px\", \"50vh\")."
-            },
-            {
-              "name": "marker",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether to show a marker at the location."
-            },
-            {
-              "name": "markerTitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Tooltip text for the location marker."
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "\"roadmap\" | \"satellite\" | \"hybrid\" | \"terrain\""
-              },
-              "values": [
-                "roadmap",
-                "satellite",
-                "hybrid",
-                "terrain"
-              ],
-              "default": "'roadmap'",
-              "description": "Map display type. Options: \"roadmap\", \"satellite\", \"hybrid\", \"terrain\""
-            },
-            {
-              "name": "interactive",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether users can interact with the map (pan, zoom, click)."
-            },
-            {
-              "name": "controls",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Whether to show map controls (zoom buttons, fullscreen, etc.)."
-            },
-            {
-              "name": "apiKey",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Google Maps API key. Required for the map to load."
-            }
-          ],
-          "examples": [
-            "<!-- Simple address -->\n<schmancy-map address=\"Times Square, New York\"></schmancy-map>",
-            "<!-- With coordinates -->\n<schmancy-map latitude=\"40.758\" longitude=\"-73.985\" zoom=\"17\"></schmancy-map>",
-            "<!-- Satellite view -->\n<schmancy-map address=\"Grand Canyon\" type=\"satellite\" height=\"500px\"></schmancy-map>",
-            "<!-- Static map -->\n<schmancy-map address=\"Eiffel Tower, Paris\" interactive=\"false\" controls=\"false\"></schmancy-map>"
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "menu/menu-item.ts",
@@ -4055,39 +3741,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "payment-card-form/payment-card-form.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyPaymentCardForm",
-          "tagName": "schmancy-payment-card-form",
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "{ cardName: string; cardNumber: string; expirationDate: string; cvv: string; }"
-              },
-              "default": "{\n\t\tcardName: '',\n\t\tcardNumber: '',\n\t\texpirationDate: '',\n\t\tcvv: '',\n\t}",
-              "description": "The form data containing all payment card information"
-            }
-          ],
-          "events": [
-            {
-              "name": "change",
-              "description": "Fires when any field in the form changes"
-            }
-          ],
-          "slots": [
-            {
-              "name": "",
-              "description": "Default slot for any additional content"
-            }
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "progress/progress.ts",
@@ -4156,26 +3809,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "qr-scanner/qr-scanner.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyQRScanner",
-          "tagName": "schmancy-qr-scanner",
-          "attributes": [
-            {
-              "name": "continuous",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            }
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "radio-group/radio-button.ts",
@@ -4710,7 +4343,7 @@
             {
               "name": "gap",
               "type": {
-                "text": "0 | 3 | 2 | 1 | 8 | 4 | 5 | 6 | 10 | 12 | 16 | 20 | 24"
+                "text": "0 | 1 | 8 | 2 | 3 | 4 | 5 | 6 | 10 | 12 | 16 | 20 | 24"
               },
               "default": "4",
               "description": "Gap between steps. Maps to Tailwind gap classes."
@@ -5390,63 +5023,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "timeline/timeline-tile.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyTimelineTile",
-          "tagName": "schmancy-timeline-tile",
-          "attributes": [
-            {
-              "name": "state",
-              "type": {
-                "text": "TimelineTileState"
-              },
-              "values": [
-                "filled",
-                "empty",
-                "stack-top",
-                "stack-sibling"
-              ],
-              "default": "'empty'"
-            },
-            {
-              "name": "glyph",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            },
-            {
-              "name": "stack-count",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "index",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "caption",
-              "type": {
-                "text": "string"
-              }
-            }
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "tree/tree.ts",
@@ -5555,7 +5131,7 @@
             {
               "name": "maxLines",
               "type": {
-                "text": "3 | 2 | 1 | 4 | 5 | 6"
+                "text": "1 | 2 | 3 | 4 | 5 | 6"
               }
             },
             {
@@ -5719,115 +5295,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "extra/countries/countries.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyCountriesSelect",
-          "tagName": "schmancy-select-countries",
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Country'"
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Please select a country'"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Select a country'"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "extra/timezone/timezone.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "name": "SchmancyTimezonesSelect",
-          "tagName": "schmancy-select-timezones",
-          "description": "Timezone selector component with autocomplete filtering.",
-          "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Timezone'"
-            },
-            {
-              "name": "hint",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Please select a timezone'"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Select a timezone'"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''"
-            }
-          ]
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "layout/scroll/scroll.ts",