@medalsocial/meda 2.8.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "2.8.1",
+  "version": "3.2.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {
@@ -63,6 +63,10 @@
       "types": "./dist/calendar/index.d.ts",
       "import": "./dist/calendar/index.js"
     },
+    "./booking": {
+      "types": "./dist/booking/index.d.ts",
+      "default": "./dist/booking/index.js"
+    },
     "./workflow-builder": {
       "types": "./dist/workflow-builder/index.d.ts",
       "import": "./dist/workflow-builder/index.js"
@@ -91,6 +95,10 @@
       "types": "./dist/post-preview/index.d.ts",
       "default": "./dist/post-preview/index.js"
     },
+    "./primitives": {
+      "types": "./dist/primitives/index.d.ts",
+      "default": "./dist/primitives/index.js"
+    },
     "./styles": {
       "default": "./dist/styles/theme.css"
     },
@@ -100,6 +108,27 @@
     "./styles/tokens": {
       "default": "./dist/styles/tokens.css"
     },
+    "./styles/tokens.css": {
+      "default": "./dist/styles/tokens.css"
+    },
+    "./styles/bridge.css": {
+      "default": "./dist/styles/bridge.css"
+    },
+    "./styles/base.css": {
+      "default": "./dist/styles/base.css"
+    },
+    "./calendar/styles.css": {
+      "default": "./dist/styles/calendar.css"
+    },
+    "./booking/styles.css": {
+      "default": "./dist/styles/booking.css"
+    },
+    "./primitives/styles.css": {
+      "default": "./dist/styles/primitives.css"
+    },
+    "./workflow-builder/styles.css": {
+      "default": "./dist/styles/workflow-builder.css"
+    },
     "./shell/primitives": {
       "types": "./dist/shell/primitives.d.ts",
       "default": "./dist/shell/primitives.js"
@@ -136,23 +165,24 @@
     "react-dom": ">=19",
     "react-markdown": "^10.0.0",
     "rehype-highlight": "^7.0.0",
-    "remark-gfm": "^4.0.0"
+    "remark-gfm": "^4.0.0",
+    "three": ">=0.160.0"
   },
   "peerDependenciesMeta": {
     "@dnd-kit/core": {
-      "optional": false
+      "optional": true
     },
     "@dnd-kit/sortable": {
-      "optional": false
+      "optional": true
     },
     "@dnd-kit/utilities": {
-      "optional": false
+      "optional": true
     },
     "@react-three/fiber": {
       "optional": true
     },
     "@xyflow/react": {
-      "optional": false
+      "optional": true
     },
     "next-themes": {
       "optional": true
@@ -165,18 +195,18 @@
     },
     "remark-gfm": {
       "optional": true
+    },
+    "three": {
+      "optional": true
     }
   },
   "dependencies": {
     "@base-ui/react": "1.8.0",
-    "@fontsource-variable/geist": "5.3.0",
-    "@fontsource-variable/geist-mono": "5.3.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
     "react-resizable-panels": "4.13.1",
     "tailwind-merge": "3.7.0",
-    "three": "0.185.1",
     "vaul": "1.1.2"
   },
   "devDependencies": {
@@ -186,6 +216,8 @@
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
+    "@fontsource-variable/geist": "5.3.0",
+    "@fontsource-variable/geist-mono": "5.3.0",
     "@react-three/fiber": "9.7.0",
     "@size-limit/preset-small-lib": "13.0.3",
     "@storybook/addon-a11y": "10.6.0",
@@ -194,6 +226,7 @@
     "@storybook/addon-themes": "10.6.0",
     "@storybook/addon-vitest": "10.6.0",
     "@storybook/react-vite": "10.6.0",
+    "@tailwindcss/cli": "4.3.3",
     "@tailwindcss/vite": "4.3.3",
     "@tanstack/intent": "0.4.0",
     "@testing-library/jest-dom": "7.0.1",
@@ -207,6 +240,7 @@
     "@vitest/coverage-v8": "4.1.11",
     "@xyflow/react": "12.11.6",
     "chromatic": "18.9.4",
+    "esbuild": "0.28.2",
     "fast-check": "4.10.2",
     "husky": "9.1.7",
     "jsdom": "30.1.0",
@@ -220,6 +254,7 @@
     "size-limit": "13.0.3",
     "storybook": "10.6.0",
     "tailwindcss": "4.3.3",
+    "three": "0.185.1",
     "typescript": "~6.0.3",
     "vite": "8.3.0",
     "vitest": "4.1.11",
@@ -250,6 +285,7 @@
     "chromatic": "chromatic --build-script-name=storybook:build --exit-zero-on-changes",
     "size-limit": "size-limit",
     "size-limit:why": "size-limit --why",
+    "size:budget": "node ./scripts/size-budget.mjs",
     "version": "changeset version",
     "release": "pnpm build && changeset publish",
     "registry:validate": "node ./registry/scripts/validate-registry.mjs",

package/skills/components/SKILL.md

@@ -111,6 +111,59 @@ import { StatusPill } from '@medalsocial/meda';
 
 **Why solid backgrounds (not tinted):** the 11px small size needs ≥4.5:1 contrast to pass WCAG AA. Tinted backgrounds (`bg-info/15 text-info`) fail axe gates at this size. Solid `bg-info text-info-foreground` etc. always passes via the theme tokens. If you need a tinted variant, use it at `size="md"` or larger only, and verify with `vitest-axe`.
 
+## Form + sheet primitives — native elements, exported
+
+`Checkbox`, `Field`, `Textarea` and `Sheet` ARE exported from `@medalsocial/meda` and
+`@medalsocial/meda/primitives` (unlike the `src/components/ui/` adapters). They sit on
+native elements so they stay small and work without JavaScript-heavy machinery:
+
+```tsx
+import { Checkbox, Field, Input, Sheet, Textarea } from '@medalsocial/meda/primitives';
+
+<Field>
+  <Field.Label htmlFor="email">E-mail</Field.Label>
+  <Input id="email" invalid aria-describedby="email-error" />
+  <Field.Error id="email-error">Enter a valid e-mail address.</Field.Error>
+</Field>
+
+<Checkbox id="terms" onCheckedChange={setAccepted} />   {/* native <input type="checkbox"> */}
+
+<Sheet open={open} onOpenChange={setOpen} dismissible={!saving}>
+  <Sheet.Trigger render={<Button variant="outline" />}>Add child</Sheet.Trigger>
+  <Sheet.Content>                                       {/* native <dialog>, showModal() */}
+    <Sheet.Title>Add child</Sheet.Title>
+    <Sheet.Description>Only for this booking.</Sheet.Description>
+    …
+    <Sheet.Close render={<Button variant="ghost" size="sm" />} aria-label="Close">×</Sheet.Close>
+  </Sheet.Content>
+</Sheet>
+```
+
+- `Field` owns no ids or state — wire `htmlFor` / `aria-describedby` yourself.
+- `Sheet` is a bottom sheet on phones and a centred dialog from `md` (`side="bottom"` pins
+  the bottom sheet). Escape, backdrop click and `Sheet.Close` all go through `onOpenChange`;
+  `dismissible={false}` blocks them while a submit is in flight. Focus returns to the trigger.
+- Reach for `src/components/ui/` (Base UI) only for menus, popovers and comboboxes.
+
+## Booking screens — `@medalsocial/meda/booking`
+
+Presentational screens for a booking flow, extracted so every customer site renders the
+same wizard / manage page / portal. Rules when editing or adding one:
+
+- **No data access.** No `fetch`, router, storage, cookies, env, or Medal/SDK types. Data
+  comes in as the structural shapes in `src/booking/types.ts`; outcomes leave as callbacks
+  (`onPick`, `onSubmit`, `onSave(...) => Promise<SaveResult>`).
+- **No copy, no clock.** Every string is a `labels` key (`'<screen>.<thing>'`, declared in
+  the screen's `*_LABEL_KEYS` array and rolled up in `label-keys.ts`); every date / price
+  goes through the `format: BookingFormat` prop — never `Date` getters or `Intl`.
+- **Colours through the bridge only** (`bg-primary`, `text-muted-foreground`, …).
+  `pnpm lint:tokens` rejects palette colours (`bg-white`, `text-green-600`) and arbitrary
+  colour values in `src/booking`.
+- **Override ladder:** CSS variables → `labels` → `classNames` slots → `components` card
+  renderers (export the default renderer). Keep all four working in tests.
+- **Public repo:** no customer names, copy, URLs or data. Stories and tests use the invented
+  «Salong Demo» fixtures in `src/booking/__stories__/`.
+
 ## ui-adapters — NOT exported from the npm package
 
 shadcn-style adapters in `src/components/ui/` (`Dialog`, `DropdownMenu`, `Tooltip`, `Drawer`, `Command`, `Checkbox`, `Collapsible`) wrap `@base-ui/react`. **They are intentionally NOT exported from `@medalsocial/meda`** — meda follows the shadcn philosophy: you own the ui code.