@lifanh/quiet-paper 0.1.0

package/README.md

@@ -0,0 +1,86 @@
+# @lifanh/quiet-paper
+
+**Quiet paper** design system — React primitives and Tailwind v4 tokens for personal sites and app demos.
+
+## Requirements
+
+- React 18 or 19
+- Tailwind CSS v4 with utilities used by components (`bg-accent`, `font-ui`, `text-muted`, etc.)
+
+## Install
+
+```bash
+npm install @lifanh/quiet-paper
+```
+
+**Local development** (link while editing the package):
+
+```bash
+npm install /path/to/quiet-paper
+# or: npm link @lifanh/quiet-paper
+```
+
+## Styles (once per app)
+
+In `global.css`:
+
+```css
+@import "tailwindcss";
+@import "@lifanh/quiet-paper/styles/tailwind-sources.css";
+@import "@lifanh/quiet-paper/styles/tokens.css" layer(theme);
+@import "@lifanh/quiet-paper/styles/tailwind-theme.css";
+
+@layer base {
+  /* document defaults — see lifan-astro-minimal-theme/src/styles/global.css */
+}
+```
+
+## Use
+
+```tsx
+import {
+  Button,
+  Field,
+  Panel,
+  EmptyState,
+  ErrorState,
+  HairlineTable,
+} from "@lifanh/quiet-paper";
+```
+
+## What stays in the app
+
+- Astro layouts, marketing pages, demo-specific composites (`FetchDemo`, `RunsTable`, …)
+- This package is **primitives only** — no business logic
+
+## Canonical tokens
+
+Edit `styles/tokens.css` here first; apps should not fork hex values in components.
+
+## Why `tailwind-sources.css`?
+
+Tailwind v4 does not scan `node_modules`. The package ships a one-line `@source "../src"` file so consumers never hard-code `../../node_modules/...` (breaks when `global.css` moves or you use pnpm).
+
+## Consumer contract (Pattern A only)
+
+All consumers are expected to use **Tailwind CSS v4**. Setup:
+
+```css
+@import "tailwindcss";
+@import "@lifanh/quiet-paper/styles/tailwind-sources.css";
+@import "@lifanh/quiet-paper/styles/tokens.css" layer(theme);
+@import "@lifanh/quiet-paper/styles/tailwind-theme.css";
+```
+
+No pre-built utility CSS in this package; the app’s Tailwind build generates utilities after scanning package sources via `tailwind-sources.css`.
+
+**Do not** add `@source` paths into `node_modules` from the app — the package owns that via `tailwind-sources.css`.
+
+## Contrast
+
+After editing `styles/tokens.css`, re-check foreground/background pairs (WCAG AA 4.5:1 for normal text).
+
+## Docs
+
+- [Architecture](./docs/ARCHITECTURE.md)
+- [Publish](./docs/PUBLISH.md)

package/dist/index.d.ts

@@ -0,0 +1,94 @@
+import { ButtonHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react';
+import { ReactNode } from 'react';
+
+export declare function Button({ children, variant, className, type, ...props }: ButtonProps): JSX.Element;
+
+export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    children: ReactNode;
+    variant?: Variant;
+};
+
+export declare function EmptyState({ title, description, primaryAction, secondaryAction, children, }: EmptyStateProps): JSX.Element;
+
+export declare type EmptyStateAction = {
+    label: string;
+    onClick: () => void;
+};
+
+export declare type EmptyStateProps = {
+    title: string;
+    description: string;
+    primaryAction?: EmptyStateAction;
+    secondaryAction?: EmptyStateAction;
+    children?: ReactNode;
+};
+
+export declare function ErrorState({ kicker, title, description, detail, primaryAction, secondaryAction, children, }: ErrorStateProps): JSX.Element;
+
+export declare type ErrorStateAction = {
+    label: string;
+    onClick: () => void;
+};
+
+export declare type ErrorStateProps = {
+    /** Short status label above the title (i18n). Omit with `kicker=""` to hide. */
+    kicker?: string;
+    title: string;
+    description: string;
+    detail?: string;
+    primaryAction?: ErrorStateAction;
+    secondaryAction?: ErrorStateAction;
+    children?: ReactNode;
+};
+
+export declare function Field({ id, label, hint, error, className, "aria-describedby": ariaDescribedBy, ...inputProps }: FieldProps): JSX.Element;
+
+export declare type FieldProps = {
+    id: string;
+    label: string;
+    hint?: string;
+    /** Inline validation — one line under the input, no box */
+    error?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
+
+export declare type HairlineColumn<T> = {
+    id: string;
+    header: string;
+    align?: "left" | "right";
+    cell: (row: T) => ReactNode;
+    headerClassName?: string;
+    cellClassName?: string;
+};
+
+export declare function HairlineTable<T>({ caption, columns, rows, getRowKey, empty, }: HairlineTableProps<T>): JSX.Element;
+
+export declare type HairlineTableProps<T> = {
+    caption?: string;
+    columns: HairlineColumn<T>[];
+    rows: T[];
+    getRowKey: (row: T) => string;
+    empty?: ReactNode;
+};
+
+export declare function LoadingBlock({ label, lines, className, }: LoadingBlockProps): JSX.Element;
+
+export declare type LoadingBlockProps = {
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Number of placeholder lines */
+    lines?: number;
+    className?: string;
+};
+
+export declare function Panel({ children, className }: PanelProps): JSX.Element;
+
+export declare type PanelProps = {
+    children: ReactNode;
+    className?: string;
+};
+
+declare type Variant = "primary" | "secondary";
+
+export { }

package/dist/quiet-paper.js

@@ -0,0 +1,226 @@
+import { jsx as e, jsxs as d, Fragment as b } from "react/jsx-runtime";
+const x = {
+  primary: "bg-accent text-surface hover:bg-accent-hover border border-transparent",
+  secondary: "bg-transparent text-text border-border hover:border-text"
+};
+function o({
+  children: t,
+  variant: a = "primary",
+  className: l = "",
+  type: r = "button",
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: r,
+      className: `font-ui inline-flex items-center justify-center rounded-sm border px-4 py-2 text-sm leading-none transition-colors ${x[a]} ${l}`.trim(),
+      ...n,
+      children: t
+    }
+  );
+}
+function h({
+  id: t,
+  label: a,
+  hint: l,
+  error: r,
+  className: n = "",
+  "aria-describedby": i,
+  ...s
+}) {
+  const c = r ? `${t}-error` : void 0, m = l && !r ? `${t}-hint` : void 0, u = [c, m, i].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ e("label", { htmlFor: t, className: "font-ui block text-sm text-muted", children: a }),
+    /* @__PURE__ */ e(
+      "input",
+      {
+        id: t,
+        "aria-invalid": r ? !0 : void 0,
+        "aria-describedby": u,
+        className: `font-ui w-full rounded-sm border bg-bg px-3 py-2 text-sm text-text placeholder:text-muted/70 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 ${r ? "border-2 border-error-border focus-visible:outline-error" : "border border-border focus-visible:outline-accent"} ${n}`.trim(),
+        ...s
+      }
+    ),
+    r ? /* @__PURE__ */ d(
+      "p",
+      {
+        id: c,
+        className: "font-ui m-0 text-xs font-medium leading-normal text-error",
+        role: "alert",
+        children: [
+          /* @__PURE__ */ d("span", { className: "font-mono font-bold", "aria-hidden": !0, children: [
+            "×",
+            " "
+          ] }),
+          r
+        ]
+      }
+    ) : l ? /* @__PURE__ */ e("p", { id: m, className: "font-ui m-0 text-xs leading-normal text-muted", children: l }) : null
+  ] });
+}
+function p({ children: t, className: a = "" }) {
+  return /* @__PURE__ */ e(
+    "section",
+    {
+      className: `rounded-md border border-border-subtle bg-surface p-5 ${a}`.trim(),
+      children: t
+    }
+  );
+}
+function g({
+  title: t,
+  description: a,
+  primaryAction: l,
+  secondaryAction: r,
+  children: n
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "rounded-md border border-dashed border-border py-10 px-5 text-center",
+      role: "status",
+      children: [
+        /* @__PURE__ */ e("h3", { className: "font-ui m-0 text-sm font-semibold text-text", children: t }),
+        /* @__PURE__ */ e("p", { className: "font-ui m-0 mt-2 text-sm leading-relaxed text-muted", children: a }),
+        n,
+        (l || r) && /* @__PURE__ */ d("div", { className: "mt-5 flex flex-wrap items-center justify-center gap-3", children: [
+          l ? /* @__PURE__ */ e(o, { type: "button", onClick: l.onClick, children: l.label }) : null,
+          r ? /* @__PURE__ */ e(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: r.onClick,
+              children: r.label
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function N({
+  kicker: t = "Failed",
+  title: a,
+  description: l,
+  detail: r,
+  primaryAction: n,
+  secondaryAction: i,
+  children: s
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: "rounded-md border border-error-border bg-error-surface px-5 py-6",
+      role: "alert",
+      children: [
+        t ? /* @__PURE__ */ d("p", { className: "font-ui m-0 flex items-center gap-2 text-xs font-semibold tracking-[0.14em] text-error uppercase", children: [
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: "inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-error-border bg-bg font-mono text-[0.65rem] font-bold leading-none text-error",
+              "aria-hidden": !0,
+              children: "!"
+            }
+          ),
+          /* @__PURE__ */ e("span", { children: t })
+        ] }) : null,
+        /* @__PURE__ */ e(
+          "h3",
+          {
+            className: `font-ui m-0 text-sm font-semibold text-error ${t ? "mt-2" : ""}`.trim(),
+            children: a
+          }
+        ),
+        /* @__PURE__ */ e("p", { className: "font-ui m-0 mt-2 text-sm leading-relaxed text-text", children: l }),
+        r ? /* @__PURE__ */ e("p", { className: "font-ui m-0 mt-2 font-mono text-xs leading-normal text-muted", children: r }) : null,
+        s,
+        (n || i) && /* @__PURE__ */ d("div", { className: "mt-5 flex flex-wrap items-center gap-3", children: [
+          n ? /* @__PURE__ */ e(o, { type: "button", onClick: n.onClick, children: n.label }) : null,
+          i ? /* @__PURE__ */ e(
+            o,
+            {
+              type: "button",
+              variant: "secondary",
+              onClick: i.onClick,
+              children: i.label
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+function v({
+  caption: t,
+  columns: a,
+  rows: l,
+  getRowKey: r,
+  empty: n
+}) {
+  return l.length === 0 && n ? /* @__PURE__ */ e(b, { children: n }) : /* @__PURE__ */ e("div", { className: "overflow-x-auto", children: /* @__PURE__ */ d("table", { className: "w-full min-w-[20rem] border-collapse text-left", children: [
+    t ? /* @__PURE__ */ e("caption", { className: "sr-only", children: t }) : null,
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "border-b border-border", children: a.map((i) => /* @__PURE__ */ e(
+      "th",
+      {
+        scope: "col",
+        className: `font-ui pb-2 text-xs font-semibold tracking-wide text-muted uppercase ${i.align === "right" ? "text-right" : "text-left"} ${i.headerClassName ?? ""}`.trim(),
+        children: i.header
+      },
+      i.id
+    )) }) }),
+    /* @__PURE__ */ e("tbody", { children: l.map((i) => /* @__PURE__ */ e(
+      "tr",
+      {
+        className: "border-b border-border-subtle last:border-b-0",
+        children: a.map((s) => /* @__PURE__ */ e(
+          "td",
+          {
+            className: `font-ui py-3 text-sm text-text ${s.align === "right" ? "text-right tabular-nums" : "text-left"} ${s.cellClassName ?? ""}`.trim(),
+            children: s.cell(i)
+          },
+          s.id
+        ))
+      },
+      r(i)
+    )) })
+  ] }) });
+}
+function y({
+  label: t = "Loading",
+  lines: a = 3,
+  className: l = ""
+}) {
+  return /* @__PURE__ */ d(
+    "div",
+    {
+      className: `space-y-3 ${l}`.trim(),
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      children: [
+        /* @__PURE__ */ e("span", { className: "sr-only", children: t }),
+        Array.from({ length: a }, (r, n) => /* @__PURE__ */ e(
+          "div",
+          {
+            className: "h-3 animate-pulse rounded-sm bg-border-subtle",
+            style: { width: n === a - 1 ? "72%" : "100%" },
+            "aria-hidden": "true"
+          },
+          n
+        ))
+      ]
+    }
+  );
+}
+export {
+  o as Button,
+  g as EmptyState,
+  N as ErrorState,
+  h as Field,
+  v as HairlineTable,
+  y as LoadingBlock,
+  p as Panel
+};
+//# sourceMappingURL=quiet-paper.js.map

package/dist/quiet-paper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quiet-paper.js","sources":["../src/Button.tsx","../src/Field.tsx","../src/Panel.tsx","../src/EmptyState.tsx","../src/ErrorState.tsx","../src/HairlineTable.tsx","../src/LoadingBlock.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes, ReactNode } from \"react\";\n\ntype Variant = \"primary\" | \"secondary\";\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {\n\tchildren: ReactNode;\n\tvariant?: Variant;\n};\n\nconst variants: Record<Variant, string> = {\n\tprimary:\n\t\t\"bg-accent text-surface hover:bg-accent-hover border border-transparent\",\n\tsecondary: \"bg-transparent text-text border-border hover:border-text\",\n};\n\nexport function Button({\n\tchildren,\n\tvariant = \"primary\",\n\tclassName = \"\",\n\ttype = \"button\",\n\t...props\n}: ButtonProps) {\n\treturn (\n\t\t<button\n\t\t\ttype={type}\n\t\t\tclassName={`font-ui inline-flex items-center justify-center rounded-sm border px-4 py-2 text-sm leading-none transition-colors ${variants[variant]} ${className}`.trim()}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</button>\n\t);\n}","import type { InputHTMLAttributes } from \"react\";\n\nexport type FieldProps = {\n\tid: string;\n\tlabel: string;\n\thint?: string;\n\t/** Inline validation — one line under the input, no box */\n\terror?: string;\n} & InputHTMLAttributes<HTMLInputElement>;\n\nexport function Field({\n\tid,\n\tlabel,\n\thint,\n\terror,\n\tclassName = \"\",\n\t\"aria-describedby\": ariaDescribedBy,\n\t...inputProps\n}: FieldProps) {\n\tconst errorId = error ? `${id}-error` : undefined;\n\tconst hintId = hint && !error ? `${id}-hint` : undefined;\n\tconst describedBy =\n\t\t[errorId, hintId, ariaDescribedBy].filter(Boolean).join(\" \") || undefined;\n\n\treturn (\n\t\t<div className=\"space-y-2\">\n\t\t\t<label htmlFor={id} className=\"font-ui block text-sm text-muted\">\n\t\t\t\t{label}\n\t\t\t</label>\n\t\t\t<input\n\t\t\t\tid={id}\n\t\t\t\taria-invalid={error ? true : undefined}\n\t\t\t\taria-describedby={describedBy}\n\t\t\t\tclassName={`font-ui w-full rounded-sm border bg-bg px-3 py-2 text-sm text-text placeholder:text-muted/70 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 ${error ? \"border-2 border-error-border focus-visible:outline-error\" : \"border border-border focus-visible:outline-accent\"} ${className}`.trim()}\n\t\t\t\t{...inputProps}\n\t\t\t/>\n\t\t\t{error ? (\n\t\t\t\t<p\n\t\t\t\t\tid={errorId}\n\t\t\t\t\tclassName=\"font-ui m-0 text-xs font-medium leading-normal text-error\"\n\t\t\t\t\trole=\"alert\"\n\t\t\t\t>\n\t\t\t\t\t<span className=\"font-mono font-bold\" aria-hidden>\n\t\t\t\t\t\t×{\" \"}\n\t\t\t\t\t</span>\n\t\t\t\t\t{error}\n\t\t\t\t</p>\n\t\t\t) : hint ? (\n\t\t\t\t<p id={hintId} className=\"font-ui m-0 text-xs leading-normal text-muted\">\n\t\t\t\t\t{hint}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t</div>\n\t);\n}","import type { ReactNode } from \"react\";\n\nexport type PanelProps = {\n\tchildren: ReactNode;\n\tclassName?: string;\n};\n\nexport function Panel({ children, className = \"\" }: PanelProps) {\n\treturn (\n\t\t<section\n\t\t\tclassName={`rounded-md border border-border-subtle bg-surface p-5 ${className}`.trim()}\n\t\t>\n\t\t\t{children}\n\t\t</section>\n\t);\n}","import type { ReactNode } from \"react\";\nimport { Button } from \"./Button\";\n\nexport type EmptyStateAction = {\n\tlabel: string;\n\tonClick: () => void;\n};\n\nexport type EmptyStateProps = {\n\ttitle: string;\n\tdescription: string;\n\tprimaryAction?: EmptyStateAction;\n\tsecondaryAction?: EmptyStateAction;\n\tchildren?: ReactNode;\n};\n\nexport function EmptyState({\n\ttitle,\n\tdescription,\n\tprimaryAction,\n\tsecondaryAction,\n\tchildren,\n}: EmptyStateProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"rounded-md border border-dashed border-border py-10 px-5 text-center\"\n\t\t\trole=\"status\"\n\t\t>\n\t\t\t<h3 className=\"font-ui m-0 text-sm font-semibold text-text\">{title}</h3>\n\t\t\t<p className=\"font-ui m-0 mt-2 text-sm leading-relaxed text-muted\">\n\t\t\t\t{description}\n\t\t\t</p>\n\t\t\t{children}\n\t\t\t{(primaryAction || secondaryAction) && (\n\t\t\t\t<div className=\"mt-5 flex flex-wrap items-center justify-center gap-3\">\n\t\t\t\t\t{primaryAction ? (\n\t\t\t\t\t\t<Button type=\"button\" onClick={primaryAction.onClick}>\n\t\t\t\t\t\t\t{primaryAction.label}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{secondaryAction ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={secondaryAction.onClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{secondaryAction.label}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}","import type { ReactNode } from \"react\";\nimport { Button } from \"./Button\";\n\nexport type ErrorStateAction = {\n\tlabel: string;\n\tonClick: () => void;\n};\n\nexport type ErrorStateProps = {\n\t/** Short status label above the title (i18n). Omit with `kicker=\"\"` to hide. */\n\tkicker?: string;\n\ttitle: string;\n\tdescription: string;\n\tdetail?: string;\n\tprimaryAction?: ErrorStateAction;\n\tsecondaryAction?: ErrorStateAction;\n\tchildren?: ReactNode;\n};\n\nexport function ErrorState({\n\tkicker = \"Failed\",\n\ttitle,\n\tdescription,\n\tdetail,\n\tprimaryAction,\n\tsecondaryAction,\n\tchildren,\n}: ErrorStateProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName=\"rounded-md border border-error-border bg-error-surface px-5 py-6\"\n\t\t\trole=\"alert\"\n\t\t>\n\t\t\t{kicker ? (\n\t\t\t\t<p className=\"font-ui m-0 flex items-center gap-2 text-xs font-semibold tracking-[0.14em] text-error uppercase\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName=\"inline-flex size-4 shrink-0 items-center justify-center rounded-sm border border-error-border bg-bg font-mono text-[0.65rem] font-bold leading-none text-error\"\n\t\t\t\t\t\taria-hidden\n\t\t\t\t\t>\n\t\t\t\t\t\t!\n\t\t\t\t\t</span>\n\t\t\t\t\t<span>{kicker}</span>\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t<h3\n\t\t\t\tclassName={`font-ui m-0 text-sm font-semibold text-error ${kicker ? \"mt-2\" : \"\"}`.trim()}\n\t\t\t>\n\t\t\t\t{title}\n\t\t\t</h3>\n\t\t\t<p className=\"font-ui m-0 mt-2 text-sm leading-relaxed text-text\">\n\t\t\t\t{description}\n\t\t\t</p>\n\t\t\t{detail ? (\n\t\t\t\t<p className=\"font-ui m-0 mt-2 font-mono text-xs leading-normal text-muted\">\n\t\t\t\t\t{detail}\n\t\t\t\t</p>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t\t{(primaryAction || secondaryAction) && (\n\t\t\t\t<div className=\"mt-5 flex flex-wrap items-center gap-3\">\n\t\t\t\t\t{primaryAction ? (\n\t\t\t\t\t\t<Button type=\"button\" onClick={primaryAction.onClick}>\n\t\t\t\t\t\t\t{primaryAction.label}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{secondaryAction ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={secondaryAction.onClick}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{secondaryAction.label}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n}","import type { ReactNode } from \"react\";\n\nexport type HairlineColumn<T> = {\n\tid: string;\n\theader: string;\n\talign?: \"left\" | \"right\";\n\tcell: (row: T) => ReactNode;\n\theaderClassName?: string;\n\tcellClassName?: string;\n};\n\nexport type HairlineTableProps<T> = {\n\tcaption?: string;\n\tcolumns: HairlineColumn<T>[];\n\trows: T[];\n\tgetRowKey: (row: T) => string;\n\tempty?: ReactNode;\n};\n\nexport function HairlineTable<T>({\n\tcaption,\n\tcolumns,\n\trows,\n\tgetRowKey,\n\tempty,\n}: HairlineTableProps<T>) {\n\tif (rows.length === 0 && empty) {\n\t\treturn <>{empty}</>;\n\t}\n\n\treturn (\n\t\t<div className=\"overflow-x-auto\">\n\t\t\t<table className=\"w-full min-w-[20rem] border-collapse text-left\">\n\t\t\t\t{caption ? (\n\t\t\t\t\t<caption className=\"sr-only\">{caption}</caption>\n\t\t\t\t) : null}\n\t\t\t\t<thead>\n\t\t\t\t\t<tr className=\"border-b border-border\">\n\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\tclassName={`font-ui pb-2 text-xs font-semibold tracking-wide text-muted uppercase ${col.align === \"right\" ? \"text-right\" : \"text-left\"} ${col.headerClassName ?? \"\"}`.trim()}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{col.header}\n\t\t\t\t\t\t\t</th>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</tr>\n\t\t\t\t</thead>\n\t\t\t\t<tbody>\n\t\t\t\t\t{rows.map((row) => (\n\t\t\t\t\t\t<tr\n\t\t\t\t\t\t\tkey={getRowKey(row)}\n\t\t\t\t\t\t\tclassName=\"border-b border-border-subtle last:border-b-0\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{columns.map((col) => (\n\t\t\t\t\t\t\t\t<td\n\t\t\t\t\t\t\t\t\tkey={col.id}\n\t\t\t\t\t\t\t\t\tclassName={`font-ui py-3 text-sm text-text ${col.align === \"right\" ? \"text-right tabular-nums\" : \"text-left\"} ${col.cellClassName ?? \"\"}`.trim()}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{col.cell(row)}\n\t\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</tr>\n\t\t\t\t\t))}\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t);\n}","export type LoadingBlockProps = {\n\t/** Accessible label for screen readers */\n\tlabel?: string;\n\t/** Number of placeholder lines */\n\tlines?: number;\n\tclassName?: string;\n};\n\nexport function LoadingBlock({\n\tlabel = \"Loading\",\n\tlines = 3,\n\tclassName = \"\",\n}: LoadingBlockProps) {\n\treturn (\n\t\t<div\n\t\t\tclassName={`space-y-3 ${className}`.trim()}\n\t\t\trole=\"status\"\n\t\t\taria-live=\"polite\"\n\t\t\taria-busy=\"true\"\n\t\t>\n\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t{Array.from({ length: lines }, (_, i) => (\n\t\t\t\t<div\n\t\t\t\t\tkey={i}\n\t\t\t\t\tclassName=\"h-3 animate-pulse rounded-sm bg-border-subtle\"\n\t\t\t\t\tstyle={{ width: i === lines - 1 ? \"72%\" : \"100%\" }}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}"],"names":["variants","Button","children","variant","className","type","props","jsx","Field","id","label","hint","error","ariaDescribedBy","inputProps","errorId","hintId","describedBy","jsxs","Panel","EmptyState","title","description","primaryAction","secondaryAction","ErrorState","kicker","detail","HairlineTable","caption","columns","rows","getRowKey","empty","col","row","LoadingBlock","lines","_","i"],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lifanh/quiet-paper",
+  "version": "0.1.0",
+  "description": "Quiet paper design system — Tailwind v4 tokens + React primitives (Panel, Field, Button, states, HairlineTable)",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lifanh/quiet-paper.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/quiet-paper.js",
+      "default": "./dist/quiet-paper.js"
+    },
+    "./styles/tokens.css": "./styles/tokens.css",
+    "./styles/tailwind-theme.css": "./styles/tailwind-theme.css",
+    "./styles/tailwind-sources.css": "./styles/tailwind-sources.css"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.0.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}

package/styles/tailwind-sources.css

@@ -0,0 +1,8 @@
+/**
+ * Register this package for Tailwind v4 class detection.
+ * Import once from the app (paths are relative to this file inside the package):
+ *
+ *   @import "@lifanh/quiet-paper/styles/tailwind-sources.css";
+ */
+/* Scan published JS so Tailwind v4 sees class names (Pattern A, Tailwind v4). */
+@source "../dist";

package/styles/tailwind-theme.css

@@ -0,0 +1,48 @@
+/**
+ * Tailwind v4 @theme bridge — import after tokens.css in app global.css:
+ * @import "@lifanh/quiet-paper/styles/tokens.css" layer(theme);
+ * @import "@lifanh/quiet-paper/styles/tailwind-theme.css";
+ */
+@theme {
+    --color-bg: var(--color-bg);
+    --color-surface: var(--color-surface);
+    --color-text: var(--color-text);
+    --color-muted: var(--color-text-muted);
+    --color-border: var(--color-border);
+    --color-border-subtle: var(--color-border-subtle);
+    --color-accent: var(--color-accent);
+    --color-accent-hover: var(--color-accent-hover);
+    --color-error: var(--color-error);
+    --color-error-border: var(--color-error-border);
+    --color-error-surface: var(--color-error-surface);
+
+    --font-sans: var(--font-sans);
+    --font-ui: var(--font-ui);
+    --font-mono: var(--font-mono);
+
+    --spacing-1: var(--space-1);
+    --spacing-2: var(--space-2);
+    --spacing-3: var(--space-3);
+    --spacing-4: var(--space-4);
+    --spacing-5: var(--space-5);
+    --spacing-6: var(--space-6);
+    --spacing-8: var(--space-8);
+    --spacing-12: var(--space-12);
+    --spacing-16: var(--space-16);
+
+    --text-xs: var(--text-xs);
+    --text-sm: var(--text-sm);
+    --text-lg: var(--text-lg);
+    --text-xl: var(--text-xl);
+    --text-2xl: var(--text-2xl);
+
+    --leading-tight: var(--leading-tight);
+    --leading-normal: var(--leading-normal);
+    --leading-relaxed: var(--leading-relaxed);
+
+    --radius-sm: var(--radius-sm);
+    --radius-md: var(--radius-md);
+
+    --max-width-measure: var(--measure);
+    --max-width-measure-wide: var(--measure-wide);
+}

package/styles/tokens.css

@@ -0,0 +1,59 @@
+/**
+ * @lifanh/quiet-paper — canonical design tokens
+ * Import in app global CSS before Tailwind @theme mapping.
+ */
+:root {
+    --color-bg: #f4f3ef;
+    --color-surface: #faf9f6;
+    --color-text: #1a1917;
+    --color-text-muted: #5c5a54;
+    --color-border: #ddd9d0;
+    --color-border-subtle: #ebe8e1;
+
+    --color-accent: #2a4f6e;
+    --color-accent-hover: #1f3d56;
+    --color-accent-muted: #6b8a9e;
+
+    /* Rust ink — enough red chroma for deutan/protan, still not alarm UI */
+    --color-error: #a33232;
+    --color-error-border: #c87868;
+    /* Salmon wash — clearly “marked” vs cream surface, not another gray */
+    --color-error-surface: #f8e8e4;
+
+    --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;
+
+    --font-sans:
+        "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
+    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+
+    --text-xs: 0.8125rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.3125rem;
+    --text-2xl: 1.625rem;
+    --text-3xl: 2rem;
+
+    --leading-tight: 1.3;
+    --leading-normal: 1.55;
+    --leading-relaxed: 1.65;
+
+    --measure: 38rem;
+    --measure-wide: 48rem;
+
+    --radius-sm: 3px;
+    --radius-md: 6px;
+
+    --density-prose: 1;
+    --density-ui: 0.875;
+}