@shabboo/kit 0.0.0-stage → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @shabboo/kit
+
+## 0.1.0
+
+### Minor Changes
+
+- [#9](https://github.com/mehrad77/matthiola/pull/9) [`b604377`](https://github.com/mehrad77/matthiola/commit/b60437792c8724fd1c323c9e8c8d4aedbb74b0a7) Thanks [@mehrad77](https://github.com/mehrad77)! - First public release of ShabUI: tokens, the day theme, base and print CSS, self-hosted fonts, icon data, `MotionRoot`, and the Astro components shown at ui.shab.boo.

package/DESIGN.md

@@ -0,0 +1,128 @@
+# ShabUI: design guide for agents
+
+ShabUI is the shab.boo design system: the tokens and UI kit in `packages/kit`, published to npm as `@shabboo/kit` and shown at ui.shab.boo. These are the rules for building UI with it, in plain text. Read this before you write or style any UI. Token, theme and status basics live in the Conventions of `AGENTS.md`; they are not repeated here. Each section says which ui.shab.boo page shows it rendered (`apps/ui/src/pages/…`). If you change a rule on one side, change it on the other.
+
+Before you use a kit component, read the frontmatter of `apps/ui/src/pages/components/<slug>.mdx`: `use`, `avoid`, `a11y.you` and `props`. Its status is in `apps/ui/src/registry.ts`. A `planned` component doesn't exist yet.
+
+## Tokens
+
+Pick a token by what you need. Apps may also use the palette; the UI kit (`src/ui/`) uses only these semantic tokens.
+
+| Need | Token |
+|---|---|
+| Page, panel, well | `--surface`, `--surface-raised`, `--surface-sunken` (a well is one step off the page toward the text: lighter at night, darker by day) |
+| Input fill (on a page, on a panel) | `--field`, `--field-raised` |
+| Body, secondary, helper, placeholder, disabled text | `--text`, `--text-muted`, `--text-helper` (an alias of muted), `--text-placeholder` (4.5:1 on any layer), `--text-disabled` (about 3:1: readable, plainly off) |
+| Accent text, text on a filled control | `--text-accent`, `--text-on-fill` |
+| A tiny highlight (the required mark, a signal badge or frame) | `--text-signal` |
+| Primary fill and its border | `--fill-accent`, `--fill-accent-strong` |
+| A soft accent glow (a lit timeline dot, a dialog's halo) | `--fill-glow` |
+| A control's edge (3:1 on any layer) | `--stroke-control` |
+| An accent edge (hover, focus, current) | `--stroke-strong` |
+| A decorative hairline (divider, panel) | `--stroke`, `--stroke-subtle` |
+| Hover, press, selected (over any layer) | `--state-hover`, `--state-active`, `--state-selected` |
+| Disabled control | `--fill-disabled`, `--text-disabled` |
+| Error, warning, info, success | `--status-*` (text, icon, border), `--status-*-fill` (tint). Always add an icon or a word. |
+| Modal backdrop | `--overlay` |
+| Focus | the global ring (`--focus-ring`); never remove it |
+| Stacking | `--z-base`, `--z-raised`, `--z-sticky`, `--z-overlay`, `--z-toast` |
+| Durations, easing | `--dur-fast`, `--dur-moderate`, `--dur-slow`, `--ease`, `--ease-enter`, `--ease-exit`; pixel: `--dur-step`, `--ease-step`, `--ease-dither`, `--blink` |
+| Icon size, touch target | `--icon-sm`, `--icon-md`, `--icon-lg`, `--target-min` |
+| Control height and side padding, per size | `--control-h-sm\|md\|lg`, `--control-pad-sm\|md\|lg` |
+| Corners | `--radius` (every box), `--radius-pill` (fully round ends) |
+| Faces | `--font-serif` (prose), `--font-mono` (UI, labels), `--font-arabic` (Persian and Arabic, for any mono text) |
+| Type size, line height, mono tracking | `--step--2` … `--step-5`, `--leading`, `--tracking-mono` (never in Persian or Arabic) |
+| Space, page gutter, widths | `--space-1` … `--space-8`, `--gutter`, `--measure` (prose), `--wide` (page) |
+| Charts, in order | `--chart-1` … `--chart-5` |
+
+Shown on: `foundations/colors`, `layers`, `status`, `layout`.
+
+## Writing
+
+Shown on: `foundations/content`.
+
+- Sentence case for headings, labels and buttons.
+- Buttons start with a verb and say what happens: "Send message", not "Submit" or "OK".
+- Labels are nouns, with no colon. Mono labels are uppercased by CSS, so write them in lowercase.
+- Use the fewest words that are still clear. Cut "please", "simply" and "just".
+- Errors say what happened, then how to fix it. Don't blame the reader, and don't shout.
+- Empty states say what goes here and how to add it.
+- Every date goes in `<time datetime>`. Format dates and numbers with `Intl` for the locale, so Persian gets ۰–۹ and Arabic ٠–٩.
+- In Persian and Arabic, never letter-space and never italicize. Use the zero-width non-joiner, not a space.
+- The author's copy (posts, chapters, the resume) stays verbatim. This guide sets no brand voice.
+
+## Accessibility
+
+Shown on: `foundations/accessibility`, `focus`, `direction`.
+
+The target is WCAG 2.1 AA. Check these before you call a component built:
+
+- **Contrast.** Text needs 4.5:1, or 3:1 at large sizes. A control's edges and marks need 3:1. Disabled is exempt, but must still look disabled.
+- **Keyboard.**
+  - Tab and Enter (or Space) do everything a pointer does.
+  - Tab order follows reading order, in both directions.
+  - Focus is always visible.
+  - Esc closes what opened and returns focus to the opener.
+  - Arrow keys are only for composite widgets, and they flip in RTL.
+- **Screen readers.**
+  - Use a native element first.
+  - Every control has a name: a visible label, or `aria-label` when it's an icon alone.
+  - Tie hints and errors in with `aria-describedby`, and mark invalid fields with `aria-invalid`.
+  - Put state in the markup (`aria-pressed`, `aria-expanded`, `aria-current`).
+  - Decorative icons and art get `aria-hidden`.
+  - Content that changes on its own goes in a polite live region.
+- **Touch.** Anything you tap is at least `--target-min` (44px), or has that much room around it. A kit control drawn smaller reaches it one of two ways:
+  - **Hit area** (the default): an invisible pseudo-element, `inset: min(0px, (100% - var(--target-min)) / 2)`, so it grows only where it is short. Button, Dialog's close, linked Tag (block axis only, since chips sit side by side).
+  - **Grow on touch**: under `@media (pointer: coarse)` the control itself takes `--target-min`, when neighbours sit too close for a hit area or a native control can't carry a pseudo-element. Pagination, small Disclosure, Field.
+  - Quiet buttons and inline links are exempt: in running text a taller hit area would cover the lines around it.
+- **Motion.** Every animation sits inside `@media (prefers-reduced-motion: no-preference)`, and the component looks finished without it. Nothing flashes more than three times a second.
+- **RTL.** Use logical properties only. Check every component in Persian too.
+
+## Patterns
+
+Shown on: `patterns/*`.
+
+- **Empty.** Say what goes here in the list's own words ("No posts tagged night yet"), plus one action to fill it. It isn't an error, so use neutral colors. A search with no results repeats the query and suggests a wider one.
+- **Loading.**
+  - Reserve the content's space so the page doesn't jump.
+  - Show nothing for the first few hundred milliseconds.
+  - Set `aria-busy="true"` while the region fills.
+  - No shimmer under reduced motion.
+  - Render the page and load only the part; never put the whole page behind a spinner.
+  - On failure, say what happened and offer a retry.
+- **Notifications.**
+  - Put the message as close to what it's about as possible: a badge, then a callout, then a toast, then a dialog.
+  - Every message has an icon or a word, never color alone.
+  - Errors stay until they're fixed, so never put one in a toast.
+  - Use `role="status"` for news and `role="alert"` only for errors that need action now.
+  - Don't move focus to a message that doesn't ask a question.
+- **Forms.**
+  - One column, a visible label above each field, and the placeholder only as an example.
+  - Ask only what you need, and mark required fields.
+  - Validate on blur or submit, never on every keystroke.
+  - Put each error under its field, saying how to fix it.
+  - One primary button at the end, starting with a verb. Never disable it; say what's missing when it's pressed.
+  - Use the right `type` and `autocomplete`.
+- **Disabled vs read-only.**
+  - Use read-only when the value matters but isn't the reader's to change.
+  - Use disabled only when the control will come back, and say nearby what brings it back.
+  - Hide what will never be available instead of disabling it.
+  - Use `aria-disabled="true"` when the control must stay focusable.
+
+## Pixel art
+
+Shown on: `foundations/pixel-art`, `texture`.
+
+- The whole system shares one whole-cell grid: hard edges, PixelFrame, dither and stepped motion in the kit; the painted scenes and figures on the landing.
+- Light comes from the upper left; right and bottom edges take the shade. Edge cells reach 1.7:1 against `--ink-3`.
+- `--fig-*` tokens are for art only, never UI or text. A new art colour is a new token.
+- New figures are painter recipes (`packages/painter/recipes/shabboo/`), emitted into the landing's `data.ts`; never hand-edit it. The page lists every step.
+
+## Motion
+
+Shown on: `foundations/motion`, `texture`.
+
+- **Smooth** (`--dur-*`, `--ease*`) is for content: things entering, leaving, or growing.
+- **Stepped** (`steps()`, `--dur-step`) is the pixel UI: presses, blinks, scans and dithers. Don't tween a pixel element.
+- Animate only on the reader's action. Never replay on page load or on a client-side page swap (persisted elements are re-inserted; gate the animation behind a flag set on click).
+- Nothing moves under reduced motion.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mehrad Rousta
+
+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.

package/README.md

@@ -1,3 +1,76 @@
-# Temporary Holding Version
+# @shabboo/kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+ShabUI, the design system behind [shab.boo](https://shab.boo): a night-first palette with a day theme, design tokens, base CSS, self-hosted fonts and RTL-ready Astro components. Every part is shown, in both directions and both themes, at **[ui.shab.boo](https://ui.shab.boo)**.
+
+```sh
+pnpm add @shabboo/kit   # or npm i / yarn add
+```
+
+## Astro
+
+Import the styles once, in your layout, then use the components:
+
+```astro
+---
+import "@shabboo/kit/fonts.css";
+import "@shabboo/kit/styles.css";
+import Button from "@shabboo/kit/Button.astro";
+---
+<html lang="en" dir="ltr">
+  <body>
+    <Button href="/start">Start</Button>
+  </body>
+</html>
+```
+
+## React, Vue, plain HTML
+
+The components are Astro-only for now; the tokens and CSS work anywhere:
+
+```js
+import "@shabboo/kit/fonts.css";
+import "@shabboo/kit/styles.css"; // tokens + base, prose and utility styles
+// or only the custom properties, no element styles:
+import "@shabboo/kit/tokens.css";
+```
+
+```css
+.panel {
+  background: var(--surface-raised);
+  color: var(--text);
+  border: 1px solid var(--stroke);
+}
+```
+
+React islands animated with [Motion](https://motion.dev) can wrap themselves in `MotionRoot`, which respects `prefers-reduced-motion`:
+
+```tsx
+import { MotionRoot, fadeUp } from "@shabboo/kit/motion";
+```
+
+`@shabboo/kit/icons` exports the icon path data (`PATHS`, `ICON_NAMES`) for drawing the same icons in any framework.
+
+## Themes and direction
+
+Night is the default. `data-theme="light"` on any element switches its subtree to day; `data-theme="dark"` brings night back. Components use logical properties, so `dir="rtl"` just works.
+
+## What's in the box
+
+| Import | What |
+|---|---|
+| `@shabboo/kit/tokens.css` | Custom properties only: palette, semantic layer, day theme, scales |
+| `@shabboo/kit/styles.css` | `tokens.css` + print theme + reset, base, prose and utilities |
+| `@shabboo/kit/print.css` | The print theme alone |
+| `@shabboo/kit/fonts.css` | Newsreader, JetBrains Mono and Vazirmatn via Fontsource |
+| `@shabboo/kit/<Name>.astro` | Components: `Button`, `Badge`, `Callout`, `Card`, `Dialog`, `Field`, … |
+| `@shabboo/kit/icons` | Icon path data |
+| `@shabboo/kit/motion` | `MotionRoot` and shared Motion variants |
+| `@shabboo/kit/DESIGN.md` | The rules: which token for what, writing, accessibility, patterns |
+
+## Versioning
+
+Semver. While the version is 0.x, a minor release may change a component's API; the [changelog](https://ui.shab.boo/start/changelog/) says how to move.
+
+## License
+
+MIT

package/dist/motion.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Shared Motion (framer-motion) setup for React islands.
+ * Wrap every animated island in <MotionRoot> so prefers-reduced-motion is always respected.
+ */
+import { type Transition, type Variants } from "motion/react";
+import type { ReactNode } from "react";
+export declare const ease: readonly [0.22, 1, 0.36, 1];
+export declare const transition: Transition;
+export declare const fadeUp: Variants;
+export declare const fade: Variants;
+export declare const stagger: (staggerChildren?: number) => Variants;
+export declare function MotionRoot({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/motion.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Shared Motion (framer-motion) setup for React islands.
+ * Wrap every animated island in <MotionRoot> so prefers-reduced-motion is always respected.
+ */
+import { MotionConfig } from "motion/react";
+export const ease = [0.22, 1, 0.36, 1];
+export const transition = { duration: 0.6, ease };
+export const fadeUp = {
+    hidden: { opacity: 0, y: 16 },
+    visible: { opacity: 1, y: 0, transition },
+};
+export const fade = {
+    hidden: { opacity: 0 },
+    visible: { opacity: 1, transition },
+};
+export const stagger = (staggerChildren = 0.08) => ({
+    hidden: {},
+    visible: { transition: { staggerChildren } },
+});
+export function MotionRoot({ children }) {
+    return (_jsx(MotionConfig, { reducedMotion: "user", transition: transition, children: children }));
+}

package/dist/ui/icons.d.ts

@@ -0,0 +1,24 @@
+/** Paths for <Icon>: a 24px grid, 1.5 stroke, round caps. Add an icon by adding a path. */
+export declare const PATHS: {
+    readonly "arrow-right": "M4 12h15M13 6l6 6-6 6";
+    readonly "arrow-left": "M20 12H5M11 6l-6 6 6 6";
+    readonly "arrow-down": "M12 4v15M6 13l6 6 6-6";
+    readonly "arrow-up": "M12 20V5M6 11l6-6 6 6";
+    readonly download: "M12 4v11M7 10l5 5 5-5M5 20h14";
+    readonly external: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5";
+    readonly "chevron-down": "M6 9l6 6 6-6";
+    readonly "chevron-right": "M9 6l6 6-6 6";
+    readonly close: "M6 6l12 12M18 6L6 18";
+    readonly check: "M5 12.5l4.5 4.5L19 7";
+    readonly info: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.01";
+    readonly warning: "M12 3.5l9.5 16.5h-19L12 3.5zM12 10v4.5M12 17.5v.01";
+    readonly search: "M10.5 18a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM16 16l5 5";
+    readonly copy: "M9 9h11v11H9zM5 15H4V4h11v1";
+    readonly rss: "M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8M6 19.01V19";
+    readonly mail: "M3 6h18v12H3zM3 6l9 7 9-7";
+    readonly github: "M9 19c-4.5 1.4-4.5-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21";
+    readonly moon: "M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z";
+    readonly flower: "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 9V4M12 15v5M9 12H4M15 12h5M9.9 9.9 6.3 6.3M14.1 14.1l3.6 3.6M14.1 9.9l3.6-3.6M9.9 14.1l-3.6 3.6";
+};
+export type IconName = keyof typeof PATHS;
+export declare const ICON_NAMES: IconName[];

package/dist/ui/icons.js

@@ -0,0 +1,23 @@
+/** Paths for <Icon>: a 24px grid, 1.5 stroke, round caps. Add an icon by adding a path. */
+export const PATHS = {
+    "arrow-right": "M4 12h15M13 6l6 6-6 6",
+    "arrow-left": "M20 12H5M11 6l-6 6 6 6",
+    "arrow-down": "M12 4v15M6 13l6 6 6-6",
+    "arrow-up": "M12 20V5M6 11l6-6 6 6",
+    download: "M12 4v11M7 10l5 5 5-5M5 20h14",
+    external: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5",
+    "chevron-down": "M6 9l6 6 6-6",
+    "chevron-right": "M9 6l6 6-6 6",
+    close: "M6 6l12 12M18 6L6 18",
+    check: "M5 12.5l4.5 4.5L19 7",
+    info: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v6M12 7.5v.01",
+    warning: "M12 3.5l9.5 16.5h-19L12 3.5zM12 10v4.5M12 17.5v.01",
+    search: "M10.5 18a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15zM16 16l5 5",
+    copy: "M9 9h11v11H9zM5 15H4V4h11v1",
+    rss: "M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8M6 19.01V19",
+    mail: "M3 6h18v12H3zM3 6l9 7 9-7",
+    github: "M9 19c-4.5 1.4-4.5-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2 2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12 12 0 0 0-6.2 0C6.5 2.8 5.4 3.1 5.4 3.1a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21",
+    moon: "M20 14.5A8.5 8.5 0 1 1 9.5 4a7 7 0 0 0 10.5 10.5z",
+    flower: "M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM12 9V4M12 15v5M9 12H4M15 12h5M9.9 9.9 6.3 6.3M14.1 14.1l3.6 3.6M14.1 9.9l3.6-3.6M9.9 14.1l-3.6 3.6",
+};
+export const ICON_NAMES = Object.keys(PATHS);

package/package.json

@@ -1,6 +1,86 @@
 {
   "name": "@shabboo/kit",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "ShabUI, the night-first design system behind shab.boo: tokens, base CSS, fonts and RTL-ready Astro components.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Mehrad Rousta",
+  "homepage": "https://ui.shab.boo",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mehrad77/matthiola.git",
+    "directory": "packages/kit"
+  },
+  "bugs": "https://github.com/mehrad77/matthiola/issues",
+  "keywords": [
+    "astro-component",
+    "design-system",
+    "design-tokens",
+    "css",
+    "rtl",
+    "dark-theme",
+    "shabui"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "src",
+    "dist",
+    "DESIGN.md",
+    "CHANGELOG.md"
+  ],
+  "exports": {
+    "./tokens.css": "./src/styles/tokens.css",
+    "./styles.css": "./src/styles/styles.css",
+    "./print.css": "./src/styles/print.css",
+    "./fonts.css": "./src/styles/fonts.css",
+    "./icons": {
+      "types": "./dist/ui/icons.d.ts",
+      "default": "./dist/ui/icons.js"
+    },
+    "./motion": {
+      "types": "./dist/motion.d.ts",
+      "default": "./dist/motion.js"
+    },
+    "./*.astro": "./src/ui/*.astro",
+    "./DESIGN.md": "./DESIGN.md",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/newsreader": "^5.3.0",
+    "@fontsource-variable/vazirmatn": "^5.3.0"
+  },
+  "peerDependencies": {
+    "astro": "^7.4.1",
+    "motion": "^14.4.0",
+    "react": "^19.3.1"
+  },
+  "peerDependenciesMeta": {
+    "astro": {
+      "optional": true
+    },
+    "motion": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "astro": "^7.4.1",
+    "motion": "^14.4.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "typescript": "^6.0.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "check": "node scripts/check-ui.mjs && tsc -p tsconfig.build.json && publint"
+  }
 }

package/src/motion.tsx

@@ -0,0 +1,33 @@
+/**
+ * Shared Motion (framer-motion) setup for React islands.
+ * Wrap every animated island in <MotionRoot> so prefers-reduced-motion is always respected.
+ */
+import { MotionConfig, type Transition, type Variants } from "motion/react";
+import type { ReactNode } from "react";
+
+export const ease = [0.22, 1, 0.36, 1] as const;
+
+export const transition: Transition = { duration: 0.6, ease };
+
+export const fadeUp: Variants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: { opacity: 1, y: 0, transition },
+};
+
+export const fade: Variants = {
+  hidden: { opacity: 0 },
+  visible: { opacity: 1, transition },
+};
+
+export const stagger = (staggerChildren = 0.08): Variants => ({
+  hidden: {},
+  visible: { transition: { staggerChildren } },
+});
+
+export function MotionRoot({ children }: { children: ReactNode }) {
+  return (
+    <MotionConfig reducedMotion="user" transition={transition}>
+      {children}
+    </MotionConfig>
+  );
+}

package/src/styles/fonts.css

@@ -0,0 +1,8 @@
+/*
+ * ShabUI's three faces, self-hosted through Fontsource: Newsreader (serif, upright and italic),
+ * JetBrains Mono (labels and code) and Vazirmatn (Persian and Arabic). tokens.css names them in --font-*.
+ */
+@import "@fontsource-variable/newsreader/wght.css";
+@import "@fontsource-variable/newsreader/wght-italic.css";
+@import "@fontsource-variable/jetbrains-mono/wght.css";
+@import "@fontsource-variable/vazirmatn/wght.css";

package/src/styles/print.css

@@ -0,0 +1,36 @@
+/*
+ * Print: ink on white paper for every site, whatever the screen shows. It swaps the night palette the semantic
+ * layer reads from, so kit parts and app styles print alike: no grain, no glow, no washes, status in their day inks
+ * (read from the --day-* palette, so print and day can't drift apart).
+ * It lives apart from tokens.css because scripts read that file's hex values as the night palette (og cards,
+ * favicons, the painter, the landing's figure check, the ui showcase); global.css imports it right after.
+ */
+@media print {
+  :root {
+    color-scheme: light;
+    --ink: #fff;
+    --ink-2: #fff;
+    --ink-3: #f2f2ef;
+    --ink-4: #e8e8e4;
+    --line: #bbb;
+    --line-dim: #ddd;
+    --line-control: #777;
+    --paper: #111;
+    --paper-dim: #444;
+    --paper-faint: #555;
+    --paper-off: #888;
+    --accent-strong: var(--accent);
+    --accent-text: var(--accent);
+    --accent-glow: transparent;
+    --signal: var(--day-signal);
+    --wash-1: transparent;
+    --wash-2: transparent;
+    --red: var(--day-red);
+    --red-wash: transparent;
+    --amber: var(--day-amber);
+    --amber-wash: transparent;
+    --blue: var(--day-blue);
+    --blue-wash: transparent;
+    --grain-opacity: 0;
+  }
+}