@umkmall/proto 0.1.0-heea0e2dbdd10 → 0.1.0-hf08301514059

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umkmall/proto",
-  "version": "0.1.0-heea0e2dbdd10",
+  "version": "0.1.0-hf08301514059",
   "description": "UMKMall design-system assets and prototyping docs, served from jsDelivr. Generated — see README.",
   "license": "UNLICENSED",
   "files": [

package/umkmall-components.md

@@ -10,9 +10,9 @@ UMKMall UI — 57 components, and the values each axis accepts.
 Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
 
 Button (Foundations)
-  type: primary | ghost | text
+  type: primary | ghost | outline | text
   color: primary | light | danger | dark
-  size: large | medium | small | micro
+  size: large | medium | small | micro | compact
   width: auto | full
   booleans: disabled, isLoading
 
@@ -25,27 +25,27 @@ Alert (Feedback)
 
 Badge (Content)
   color: primary | warning | success | danger | light | bestseller | gradient
-  size: xlarge | medium | small | micro
+  size: xlarge | medium | small | micro | compact | compactTight
   appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 
 Chip (Content)
   state: default | active
-  size: huge | xlarge | large | medium | small | micro
+  size: huge | xlarge | large | medium | small | micro | compact
   appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 
 TextField (Form)
-  size: large | small
-  appearance: default | a2ui
+  size: large | small | xsmall | compact
+  appearance: default | a2ui | bare
+  counterPlacement: below | inside
+  prefixPlacement: inside | outside
   booleans: error, disabled
-  REQUIRED props (not axes): label
 
 CheckBox (Form)
   size: xlarge | large | medium | small
   appearance: default | native
   booleans: error, disabled, indeterminate
-  REQUIRED props (not axes): label
 
 Radio (Form)
   size: large | medium | small
@@ -64,6 +64,7 @@ Switch (Form)
 
 Slider (Form)
   size: large | small
+  appearance: default | scrubber
   booleans: disabled
 
 DateTimeInput (Form)
@@ -78,7 +79,7 @@ OtpInput (Form)
   REQUIRED props (not axes): value, onChange
 
 Tabs (Navigation)
-  size: large | small
+  size: large | small | xsmall
   state: default | active
   appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
@@ -95,11 +96,11 @@ Skeleton (Feedback)
 Text (Foundations)
   role: display | h1 | h2 | h3 | h4 | h5 | h6 | paragraph | bodyLg | bodyMd | bodySm
   weight: bold | semibold | medium | regular
-  color: primary | secondary | disable | invert | brand | success | error | warning
+  color: primary | secondary | disable | invert | brand | success | error | warning | muted
 
 Icon (Foundations)
   size: xs | sm | md | lg | xl
-  color: primary | secondary | disable | invert | brand | success | error | warning
+  color: primary | secondary | disable | invert | brand | success | error | warning | muted
   REQUIRED props (not axes): name
 
 Sidebar (Shell)
@@ -125,28 +126,33 @@ ChatComposerInput (Chat)
   REQUIRED props (not axes): value, onValueChange, label
 
 ChatDrawer (Chat)
-  variant: inherit | neutral | info | warning | danger
+  variant: inherit | neutral | info | warning | danger | floating
   booleans: collapsed
 
 ChatAttachment (Chat)
-  variant: image | file
+  variant: image | file | tile
+  size: default | large
   booleans: showSize
   REQUIRED props (not axes): name
 
 ChatToolsButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatAttachmentButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatVoiceButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatSendButton (Chat)
   state: send | stop | waiting
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatSoundWave (Chat)
@@ -172,7 +178,7 @@ ChatMessageList (Chat)
   density: compact | balanced | spacious
   align: top | bottom
   gap: none | 2xs | xs | sm | md | lg
-  booleans: streaming
+  booleans: streaming, flush
 
 ChatThread (Chat)
 
@@ -188,7 +194,8 @@ ChatMessageTTSButton (Chat)
 Dialog (Overlays)
   size: small | medium | large | xlarge
   side: none | left | right
-  booleans: centered, showCloseButton
+  rounded: default | lg
+  booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
   REQUIRED props (not axes): open, onOpenChange
 
 Menu (Overlays)
@@ -200,7 +207,7 @@ Popover (Overlays)
   booleans: portal
 
 Card (Content)
-  variant: elevated | outlined | plain
+  variant: elevated | outlined | plain | glass
   padding: none | small | medium | large
   appearance: default | a2ui | a2ui-hero
 
@@ -275,6 +282,7 @@ Toaster (Feedback)
 Label (Form)
   variant: default | error | success
   size: sm | md | lg
+  look: default | field-large | field-small
   booleans: required
 
 TRAPS — each of these renders or ignores silently, with no error:

package/umkmall-prototype-starter.html

@@ -18,8 +18,8 @@ HOW TO USE THIS FILE
 WHAT THIS FILE NEEDS FROM THE NETWORK
   Four hosts, every time it is opened — not just the first time:
 
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tailwind.js
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-ui.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tailwind.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-ui.js
     https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
       — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
         The token CSS is NOT fetched: it is inlined in the <style> below, because a claude.ai
@@ -33,7 +33,7 @@ WHAT THIS FILE NEEDS FROM THE NETWORK
 
 YOU DO NOT HAVE TO START FROM THIS FILE
   Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tokens.css
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tokens.css
   then the Play CDN, the config and the bundle below. Keep the order — the config must come after
   the Play CDN script, or the theme arrives too late and every class resolves to nothing.
 
@@ -41,9 +41,9 @@ UMKMall UI — 57 components, and the values each axis accepts.
 Generated from packages/ui/src/contract/variants.ts. Do not hand-edit.
 
 Button (Foundations)
-  type: primary | ghost | text
+  type: primary | ghost | outline | text
   color: primary | light | danger | dark
-  size: large | medium | small | micro
+  size: large | medium | small | micro | compact
   width: auto | full
   booleans: disabled, isLoading
 
@@ -56,27 +56,27 @@ Alert (Feedback)
 
 Badge (Content)
   color: primary | warning | success | danger | light | bestseller | gradient
-  size: xlarge | medium | small | micro
+  size: xlarge | medium | small | micro | compact | compactTight
   appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 
 Chip (Content)
   state: default | active
-  size: huge | xlarge | large | medium | small | micro
+  size: huge | xlarge | large | medium | small | micro | compact
   appearance: default | a2ui
   booleans: showIconLeft, showIconRight
 
 TextField (Form)
-  size: large | small
-  appearance: default | a2ui
+  size: large | small | xsmall | compact
+  appearance: default | a2ui | bare
+  counterPlacement: below | inside
+  prefixPlacement: inside | outside
   booleans: error, disabled
-  REQUIRED props (not axes): label
 
 CheckBox (Form)
   size: xlarge | large | medium | small
   appearance: default | native
   booleans: error, disabled, indeterminate
-  REQUIRED props (not axes): label
 
 Radio (Form)
   size: large | medium | small
@@ -95,6 +95,7 @@ Switch (Form)
 
 Slider (Form)
   size: large | small
+  appearance: default | scrubber
   booleans: disabled
 
 DateTimeInput (Form)
@@ -109,7 +110,7 @@ OtpInput (Form)
   REQUIRED props (not axes): value, onChange
 
 Tabs (Navigation)
-  size: large | small
+  size: large | small | xsmall
   state: default | active
   appearance: default | a2ui
   booleans: showIconLeft, showNotif, showTitle
@@ -126,11 +127,11 @@ Skeleton (Feedback)
 Text (Foundations)
   role: display | h1 | h2 | h3 | h4 | h5 | h6 | paragraph | bodyLg | bodyMd | bodySm
   weight: bold | semibold | medium | regular
-  color: primary | secondary | disable | invert | brand | success | error | warning
+  color: primary | secondary | disable | invert | brand | success | error | warning | muted
 
 Icon (Foundations)
   size: xs | sm | md | lg | xl
-  color: primary | secondary | disable | invert | brand | success | error | warning
+  color: primary | secondary | disable | invert | brand | success | error | warning | muted
   REQUIRED props (not axes): name
 
 Sidebar (Shell)
@@ -156,28 +157,33 @@ ChatComposerInput (Chat)
   REQUIRED props (not axes): value, onValueChange, label
 
 ChatDrawer (Chat)
-  variant: inherit | neutral | info | warning | danger
+  variant: inherit | neutral | info | warning | danger | floating
   booleans: collapsed
 
 ChatAttachment (Chat)
-  variant: image | file
+  variant: image | file | tile
+  size: default | large
   booleans: showSize
   REQUIRED props (not axes): name
 
 ChatToolsButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatAttachmentButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatVoiceButton (Chat)
   state: default | active
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatSendButton (Chat)
   state: send | stop | waiting
+  size: compact | landing
   REQUIRED props (not axes): label
 
 ChatSoundWave (Chat)
@@ -203,7 +209,7 @@ ChatMessageList (Chat)
   density: compact | balanced | spacious
   align: top | bottom
   gap: none | 2xs | xs | sm | md | lg
-  booleans: streaming
+  booleans: streaming, flush
 
 ChatThread (Chat)
 
@@ -219,7 +225,8 @@ ChatMessageTTSButton (Chat)
 Dialog (Overlays)
   size: small | medium | large | xlarge
   side: none | left | right
-  booleans: centered, showCloseButton
+  rounded: default | lg
+  booleans: centered, fullHeight, keyboardAware, showCloseButton, dismissible, dismissOnOutsidePress, closeDisabled
   REQUIRED props (not axes): open, onOpenChange
 
 Menu (Overlays)
@@ -231,7 +238,7 @@ Popover (Overlays)
   booleans: portal
 
 Card (Content)
-  variant: elevated | outlined | plain
+  variant: elevated | outlined | plain | glass
   padding: none | small | medium | large
   appearance: default | a2ui | a2ui-hero
 
@@ -306,6 +313,7 @@ Toaster (Feedback)
 Label (Form)
   variant: default | error | success
   size: sm | md | lg
+  look: default | field-large | field-small
   booleans: required
 
 TRAPS — each of these renders or ignores silently, with no error:
@@ -442,6 +450,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --text-default-success: 14 160 110;
   --text-default-error: 219 0 0;
   --text-default-warning: 245 158 11;
+  --text-default-muted: 49 77 105;
   --text-hover-primary: 3 32 61;
   --text-hover-secondary: 97 118 140;
   --text-hover-invert: 246 246 246;
@@ -460,7 +469,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --text-focus-invert: 255 255 255;
   --text-focus-brand: 0 116 231;
   --text-focus-success: 14 160 110;
-  --text-focus-error: 231 0 0;
+  --text-focus-error: 219 0 0;
   --text-focus-warning: 245 158 11;
   --text-disable-primary: 195 203 211;
   --text-disable-brand: 150 198 245;
@@ -468,6 +477,15 @@ TRAPS — each of these renders or ignores silently, with no error:
   --text-disable-error: 245 150 150;
   --text-disable-warning: 253 228 152;
   --text-disable-invert: 49 77 105;
+  --text-chip-price: 138 74 0;
+  --text-chip-free: 0 88 71;
+  --text-tile-blue: 0 116 231;
+  --text-tile-green: 14 160 110;
+  --text-tile-yellow: 179 116 0;
+  --text-tile-red: 219 0 0;
+  --text-tile-purple: 91 69 194;
+  --text-tile-orange: 201 98 10;
+  --text-coin-default: 240 138 28;
   --icon-default-primary: 4 38 72;
   --icon-default-secondary: 147 162 176;
   --icon-default-invert: 255 255 255;
@@ -493,7 +511,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --icon-focus-invert: 255 255 255;
   --icon-focus-brand: 0 116 231;
   --icon-focus-success: 14 160 110;
-  --icon-focus-error: 231 0 0;
+  --icon-focus-error: 219 0 0;
   --icon-focus-warning: 245 158 11;
   --icon-disable-primary: 195 203 211;
   --icon-disable-brand: 150 198 245;
@@ -501,6 +519,13 @@ TRAPS — each of these renders or ignores silently, with no error:
   --icon-disable-error: 245 150 150;
   --icon-disable-warning: 253 228 152;
   --icon-disable-invert: 49 77 105;
+  --icon-tile-blue: 0 116 231;
+  --icon-tile-green: 14 160 110;
+  --icon-tile-yellow: 179 116 0;
+  --icon-tile-red: 219 0 0;
+  --icon-tile-purple: 91 69 194;
+  --icon-tile-orange: 201 98 10;
+  --icon-coin-default: 240 138 28;
   --surface-default-primary: 255 255 255;
   --surface-default-secondary: 246 246 246;
   --surface-default-invert: 0 0 0;
@@ -546,8 +571,21 @@ TRAPS — each of these renders or ignores silently, with no error:
   --surface-gradient-yellow-end: 172 111 8;
   --surface-gradient-callout-start: 0 81 162;
   --surface-gradient-callout-end: 8 118 96;
+  --surface-glass-default: 255 255 255;
+  --surface-glass-strong: 255 255 255;
+  --surface-page-mesh: 247 250 253;
+  --surface-tile-blue: 240 247 255;
+  --surface-tile-green: 236 253 247;
+  --surface-tile-yellow: 255 248 230;
+  --surface-tile-red: 255 243 243;
+  --surface-tile-purple: 239 235 252;
+  --surface-tile-orange: 255 240 227;
+  --surface-chip-price: 255 248 230;
+  --surface-chip-free: 236 253 247;
+  --surface-badge-promo: 231 0 0;
   --surface-hover-neutral: 247 248 250;
   --surface-selected-hover: 227 239 252;
+  --surface-default-subtle: 249 250 251;
   --border-default-primary: 240 240 240;
   --border-default-invert: 195 203 211;
   --border-default-brand: 0 116 231;
@@ -580,6 +618,7 @@ TRAPS — each of these renders or ignores silently, with no error:
   --border-disable-error: 245 150 150;
   --border-disable-warning: 253 228 152;
   --border-disable-invert: 49 77 105;
+  --border-glass-default: 255 255 255;
   --radius-null: 0;
   --radius-xs: 4;
   --radius-sm: 6;
@@ -615,6 +654,8 @@ TRAPS — each of these renders or ignores silently, with no error:
   --shadow-position-md: 4;
   --shadow-position-lg: 8;
   --shadow-position-xl: 12;
+  --shadow-nav: 0 10px 30px 0 #0426481f;
+  --shadow-float: 0 20px 50px 0 #04264847;
   --shadow-5-pct: 0 4px 12px 0 #0000000d;
   --shadow-card: 0 2px 8px 0 #0000001a;
   --shadow-10-pct: 0 4px 16px 0 #0000001a;
@@ -626,6 +667,32 @@ TRAPS — each of these renders or ignores silently, with no error:
   --border-width-sm: 1;
   --border-width-md: 2;
   --border-width-l: 4;
+  --glow-mesh-blue: 3 114 229;
+  --glow-mesh-green: 30 198 141;
+  --glow-mesh-sky: 150 198 245;
+  --glow-mesh-mint: 28 198 142;
+  --blur-glass: 18;
+  --motion-duration-press: 120;
+  --motion-duration-fast: 180;
+  --motion-duration-base: 280;
+  --motion-duration-slow: 380;
+  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-spring-press-damping: 18;
+  --motion-spring-press-stiffness: 320;
+  --motion-spring-sheet-damping: 22;
+  --motion-spring-sheet-stiffness: 220;
+  --motion-stagger-step: 40;
+  --motion-stagger-max: 8;
+  --motion-distance-enter: 12;
+  --motion-distance-sidebar: 24;
+  --motion-distance-label: 6;
+  --motion-delay-label: 100;
+  --motion-scale-press-default: 0.97;
+  --motion-scale-press-card: 0.98;
+  --motion-scale-press-icon: 0.92;
+  --motion-scale-pop-squash: 0.82;
+  --motion-scale-pop-overshoot: 1.14;
   --callout-default-surface: 240 247 255;
   --callout-default-border: 0 116 231;
   --callout-default-text: 0 81 162;
@@ -736,8 +803,8 @@ TRAPS — each of these renders or ignores silently, with no error:
 body { color: rgb(var(--text-default-primary)); }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tailwind.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tailwind.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-ui.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
 </head>
 <body class="bg-default-primary text-default-primary">

package/umkmall-rules.md

@@ -29,10 +29,10 @@ When I answer, build the whole thing in one file and hand it back.
 Each of these is plain markdown, published for you rather than for a person.
 Fetch them if you have web access; they are always current.
 
-  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-starter.md
-  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-starter-app.md
-  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-components.md
-  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-prototype-starter.html
+  the whole starter, in a code block   https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-starter.md
+  the demo block on its own            https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-starter-app.md
+  the component vocabulary             https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-components.md
+  the starter as a raw .html file      https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-prototype-starter.html
 
 TAKE THE FIRST ONE. It is the entire working file — <head>, mount node and a
 demo that already renders a chat room — inside a single fenced block, so you
@@ -150,7 +150,7 @@ THE COMPONENT LIST
 Not written here. It is a published file, always current, and it carries each
 component's axes AND the props it will not render without:
 
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-components.md
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-components.md
 
 Fetch it, or ask me to paste it. Do not work from memory of another design
 system — an invented axis value renders unstyled with no error, and a missing

package/umkmall-starter-app.md

@@ -1,13 +1,13 @@
 # UMKMall prototyping starter — the editable block
 
-This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-prototype-starter.html), on its own
+This is the `<script type="text/babel">` block from [the starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-prototype-starter.html), on its own
 so it can be read or pasted without the surrounding HTML.
 
 It renders a working chat room: a header, the journey's progress rail and quota meters, a
 scrolling transcript and a pinned composer. Edit the part between the `REPLACE THIS` and
 `end of the part you replace` markers; keep the shell around it.
 
-The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-rules.md).
+The `<head>` it needs is in the starter, or in section 3 of [the prompt](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-rules.md).
 
 ```jsx
 /*

package/umkmall-starter.md

@@ -3,9 +3,9 @@
 The starter in a code block, so it can be read without fetching HTML. Save it as `.html` and
 open it; there is no build step and no install.
 
-It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-prototype-starter.html) with one deliberate difference: the
+It is the same file as [the raw starter](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-prototype-starter.html) with one deliberate difference: the
 `.html` carries the whole component list inside a comment in its `<head>`, and here that is
-replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-components.md). Nothing else differs, and nothing the
+replaced by a link to [the same list](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-components.md). Nothing else differs, and nothing the
 page needs to run is in the part that was swapped.
 
 **Take the `<head>` exactly as it is.** Its tags load in one order that works: the config
@@ -14,7 +14,7 @@ CDN the global does not exist and after it the theme arrives too late — every
 class then resolves to nothing, with no error. Edit only the `<script type="text/babel">`
 block at the bottom.
 
-The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-components.md).
+The component list is not inline here; it is [its own file](https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-components.md).
 
 ````html
 <!doctype html>
@@ -37,8 +37,8 @@ HOW TO USE THIS FILE
 WHAT THIS FILE NEEDS FROM THE NETWORK
   Four hosts, every time it is opened — not just the first time:
 
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tailwind.js
-    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-ui.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tailwind.js
+    https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-ui.js
     https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js
       — all on jsDelivr: the design system's assets (pinned) and the JSX compiler.
         The token CSS is NOT fetched: it is inlined in the <style> below, because a claude.ai
@@ -52,14 +52,14 @@ WHAT THIS FILE NEEDS FROM THE NETWORK
 
 YOU DO NOT HAVE TO START FROM THIS FILE
   Four tags add UMKMall styling to a page you already have: the token CSS as a <link> to
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tokens.css
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tokens.css
   then the Play CDN, the config and the bundle below. Keep the order — the config must come after
   the Play CDN script, or the theme arrives too late and every class resolves to nothing.
 
 THE COMPONENT LIST IS NOT IN THIS FILE.
 It is published separately, and it is always current:
 
-  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-components.md
+  https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-components.md
 
 It carries every component, its axes, and the props it will not render without.
 -->
@@ -187,6 +187,7 @@ It carries every component, its axes, and the props it will not render without.
   --text-default-success: 14 160 110;
   --text-default-error: 219 0 0;
   --text-default-warning: 245 158 11;
+  --text-default-muted: 49 77 105;
   --text-hover-primary: 3 32 61;
   --text-hover-secondary: 97 118 140;
   --text-hover-invert: 246 246 246;
@@ -205,7 +206,7 @@ It carries every component, its axes, and the props it will not render without.
   --text-focus-invert: 255 255 255;
   --text-focus-brand: 0 116 231;
   --text-focus-success: 14 160 110;
-  --text-focus-error: 231 0 0;
+  --text-focus-error: 219 0 0;
   --text-focus-warning: 245 158 11;
   --text-disable-primary: 195 203 211;
   --text-disable-brand: 150 198 245;
@@ -213,6 +214,15 @@ It carries every component, its axes, and the props it will not render without.
   --text-disable-error: 245 150 150;
   --text-disable-warning: 253 228 152;
   --text-disable-invert: 49 77 105;
+  --text-chip-price: 138 74 0;
+  --text-chip-free: 0 88 71;
+  --text-tile-blue: 0 116 231;
+  --text-tile-green: 14 160 110;
+  --text-tile-yellow: 179 116 0;
+  --text-tile-red: 219 0 0;
+  --text-tile-purple: 91 69 194;
+  --text-tile-orange: 201 98 10;
+  --text-coin-default: 240 138 28;
   --icon-default-primary: 4 38 72;
   --icon-default-secondary: 147 162 176;
   --icon-default-invert: 255 255 255;
@@ -238,7 +248,7 @@ It carries every component, its axes, and the props it will not render without.
   --icon-focus-invert: 255 255 255;
   --icon-focus-brand: 0 116 231;
   --icon-focus-success: 14 160 110;
-  --icon-focus-error: 231 0 0;
+  --icon-focus-error: 219 0 0;
   --icon-focus-warning: 245 158 11;
   --icon-disable-primary: 195 203 211;
   --icon-disable-brand: 150 198 245;
@@ -246,6 +256,13 @@ It carries every component, its axes, and the props it will not render without.
   --icon-disable-error: 245 150 150;
   --icon-disable-warning: 253 228 152;
   --icon-disable-invert: 49 77 105;
+  --icon-tile-blue: 0 116 231;
+  --icon-tile-green: 14 160 110;
+  --icon-tile-yellow: 179 116 0;
+  --icon-tile-red: 219 0 0;
+  --icon-tile-purple: 91 69 194;
+  --icon-tile-orange: 201 98 10;
+  --icon-coin-default: 240 138 28;
   --surface-default-primary: 255 255 255;
   --surface-default-secondary: 246 246 246;
   --surface-default-invert: 0 0 0;
@@ -291,8 +308,21 @@ It carries every component, its axes, and the props it will not render without.
   --surface-gradient-yellow-end: 172 111 8;
   --surface-gradient-callout-start: 0 81 162;
   --surface-gradient-callout-end: 8 118 96;
+  --surface-glass-default: 255 255 255;
+  --surface-glass-strong: 255 255 255;
+  --surface-page-mesh: 247 250 253;
+  --surface-tile-blue: 240 247 255;
+  --surface-tile-green: 236 253 247;
+  --surface-tile-yellow: 255 248 230;
+  --surface-tile-red: 255 243 243;
+  --surface-tile-purple: 239 235 252;
+  --surface-tile-orange: 255 240 227;
+  --surface-chip-price: 255 248 230;
+  --surface-chip-free: 236 253 247;
+  --surface-badge-promo: 231 0 0;
   --surface-hover-neutral: 247 248 250;
   --surface-selected-hover: 227 239 252;
+  --surface-default-subtle: 249 250 251;
   --border-default-primary: 240 240 240;
   --border-default-invert: 195 203 211;
   --border-default-brand: 0 116 231;
@@ -325,6 +355,7 @@ It carries every component, its axes, and the props it will not render without.
   --border-disable-error: 245 150 150;
   --border-disable-warning: 253 228 152;
   --border-disable-invert: 49 77 105;
+  --border-glass-default: 255 255 255;
   --radius-null: 0;
   --radius-xs: 4;
   --radius-sm: 6;
@@ -360,6 +391,8 @@ It carries every component, its axes, and the props it will not render without.
   --shadow-position-md: 4;
   --shadow-position-lg: 8;
   --shadow-position-xl: 12;
+  --shadow-nav: 0 10px 30px 0 #0426481f;
+  --shadow-float: 0 20px 50px 0 #04264847;
   --shadow-5-pct: 0 4px 12px 0 #0000000d;
   --shadow-card: 0 2px 8px 0 #0000001a;
   --shadow-10-pct: 0 4px 16px 0 #0000001a;
@@ -371,6 +404,32 @@ It carries every component, its axes, and the props it will not render without.
   --border-width-sm: 1;
   --border-width-md: 2;
   --border-width-l: 4;
+  --glow-mesh-blue: 3 114 229;
+  --glow-mesh-green: 30 198 141;
+  --glow-mesh-sky: 150 198 245;
+  --glow-mesh-mint: 28 198 142;
+  --blur-glass: 18;
+  --motion-duration-press: 120;
+  --motion-duration-fast: 180;
+  --motion-duration-base: 280;
+  --motion-duration-slow: 380;
+  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-spring-press-damping: 18;
+  --motion-spring-press-stiffness: 320;
+  --motion-spring-sheet-damping: 22;
+  --motion-spring-sheet-stiffness: 220;
+  --motion-stagger-step: 40;
+  --motion-stagger-max: 8;
+  --motion-distance-enter: 12;
+  --motion-distance-sidebar: 24;
+  --motion-distance-label: 6;
+  --motion-delay-label: 100;
+  --motion-scale-press-default: 0.97;
+  --motion-scale-press-card: 0.98;
+  --motion-scale-press-icon: 0.92;
+  --motion-scale-pop-squash: 0.82;
+  --motion-scale-pop-overshoot: 1.14;
   --callout-default-surface: 240 247 255;
   --callout-default-border: 0 116 231;
   --callout-default-text: 0 81 162;
@@ -481,8 +540,8 @@ It carries every component, its axes, and the props it will not render without.
 body { color: rgb(var(--text-default-primary)); }
 </style>
 <script src="https://cdn.tailwindcss.com"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-tailwind.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-heea0e2dbdd10/umkmall-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-tailwind.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@umkmall/proto@0.1.0-hf08301514059/umkmall-ui.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.26.4/babel.min.js"></script>
 </head>
 <body class="bg-default-primary text-default-primary">