@wtfalch/design 0.10.2 → 0.12.0

package/dist/tf.css

@@ -307,6 +307,7 @@
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
+    --radius-DEFAULT: var(--radius);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
@@ -443,6 +444,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[calc\(var\(--space-15\)\*2\)\] {
+    min-height: calc(var(--space-15) * 2);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -583,6 +587,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--radius\) {
+    border-radius: var(--radius);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -732,6 +739,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -778,9 +788,16 @@
   .surface-bg {
     background: var(--bg);
   }
+  .surface-control {
+    background: var(--control);
+  }
   .surface-panel {
     background: var(--panel);
   }
+  .focus-within\:shadow-\(--focus-ring\):focus-within {
+    --tw-shadow: var(--focus-ring);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -1513,13 +1530,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1780,13 +1790,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -2134,7 +2137,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -2156,15 +2167,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2495,9 +2506,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -4086,7 +4100,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the
@@ -4961,6 +4978,100 @@ body.splitting * { cursor: inherit !important; }
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
+
+/* Prose and the surface it is written on, added in 0.8.0. Last, because
+   `.prose` styles the elements the reset in `base.css` flattened and has to
+   win over it, and because the editor's box sits over nothing. */
+/* ---- ./richtext.css ---- */
+@layer components {
+/* Prose: one class, and the elements it styles are ones nobody wrote.
+ *
+ * That is the whole reason a class exists here rather than utilities. Inside
+ * the editor the paragraphs, headings and lists are ProseMirror's, built
+ * from the document — there is no JSX to hang a utility on, so the choice is
+ * descendant rules behind one class or an arbitrary variant per element,
+ * which is the same selector spelled worse. `Markdown` has the same problem
+ * for the same reason and answers it the same way, as `.md` in `base.css`.
+ *
+ * The editor and the view share the class on purpose. They have to look
+ * identical and one set of rules is what guarantees it; two sets maintained
+ * separately is precisely how a what-you-see-is-what-you-get editor stops
+ * being one. Everything the components *do* render — the box, the toolbar,
+ * the writing surface's own padding and focus ring — is utilities in the
+ * component, where it belongs.
+ *
+ * `.rich-text` and not `.prose`: this package's classes ship unprefixed into
+ * other people's stylesheets, and `.prose` is the one name in CSS most
+ * likely to already be taken — Tailwind's typography plugin defines exactly
+ * it. A consumer with that plugin and this package would have had two sets
+ * of margins fighting, and it would have read as a theming bug.
+ *
+ * Every value here is a token. The vertical rhythm is `--space-*`, four
+ * pixels a step and scaling with `--density`; the type steps are `--text-*`,
+ * scaling with `--font-size`. A heading two sizes apart from its body at one
+ * density is two sizes apart at every density.
+ */
+
+.rich-text > * {
+  margin: 0;
+}
+
+.rich-text > * + * {
+  margin-top: var(--space-3);
+}
+
+.rich-text h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.rich-text h3 {
+  font-size: var(--text-md);
+  font-weight: var(--weight-strong);
+}
+
+/* A heading after prose needs more room above it than below: the space
+   belongs to the section it opens, not to the paragraph it follows. */
+.rich-text > * + :is(h2, h3) {
+  margin-top: var(--space-6);
+}
+
+.rich-text :is(ul, ol) {
+  padding-left: var(--space-5);
+}
+
+.rich-text li + li {
+  margin-top: var(--space-1);
+}
+
+.rich-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rich-text strong {
+  font-weight: var(--weight-strong);
+}
+
+/* An empty editor says what goes in it. The placeholder extension puts the
+   words on the empty node as `data-placeholder` and marks it, so `attr()` is
+   reading an attribute of the element it is drawn on — which is the part a
+   hand-rolled rule got wrong twice: a rule on the paragraph cannot reach an
+   attribute on the box, and ProseMirror's empty paragraph holds a trailing
+   `<br>` so `:empty` never matches it either. `pointer-events: none` so a
+   click on the words still lands in the text.
+
+   Harmless on the view, which never produces the class. */
+.rich-text p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--muted);
+  pointer-events: none;
+}
+}
 /* ---- tf: the themes ---- */
 :root[data-theme='night']{--bg:#0f1115;--panel:#161a21;--panel-2:#1c222b;--border:#262d38;--text:#e6e9ef;--muted:#8b94a4;--accent:#5b9dff;--accent-dim:#2a4877;--app-bg:#0f1115;color-scheme:dark}
 :root[data-theme='paper']{--bg:#f6f7f9;--panel:#ffffff;--panel-2:#f0f2f5;--border:#e4e8ec;--border-strong:#8792a1;--text:#191d23;--muted:#5d6773;--accent:#0e7872;--accent-dim:#7fbdb8;--on-accent:#ffffff;--good:#1c7a4a;--warn:#8a6216;--bad:#b3312c;--info:#216bc9;--shadow-1:0 4px 14px rgba(16, 24, 40, 0.08);--shadow-2:0 8px 24px rgba(16, 24, 40, 0.10);--shadow-3:0 12px 32px rgba(16, 24, 40, 0.12);--scrim:rgba(16, 24, 40, 0.32);color-scheme:light}

package/dist/valet.css

@@ -311,6 +311,7 @@
     --text-2xs: var(--text-2xs);
     --text-md: var(--text-md);
     --font-weight-strong: var(--weight-strong);
+    --radius-DEFAULT: var(--radius);
     --radius-pill: var(--radius-pill);
     --color-text: var(--text);
     --color-muted: var(--muted);
@@ -447,6 +448,9 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-\[calc\(var\(--space-15\)\*2\)\] {
+    min-height: calc(var(--space-15) * 2);
+  }
   .min-h-screen {
     min-height: 100vh;
   }
@@ -587,6 +591,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-\(--radius\) {
+    border-radius: var(--radius);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -736,6 +743,9 @@
   .uppercase {
     text-transform: uppercase;
   }
+  .italic {
+    font-style: italic;
+  }
   .tabular-nums {
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
@@ -782,9 +792,16 @@
   .surface-bg {
     background: var(--bg);
   }
+  .surface-control {
+    background: var(--control);
+  }
   .surface-panel {
     background: var(--panel);
   }
+  .focus-within\:shadow-\(--focus-ring\):focus-within {
+    --tw-shadow: var(--focus-ring);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .disabled\:cursor-default:disabled {
     cursor: default;
   }
@@ -1517,13 +1534,6 @@ select:disabled { opacity: 0.45; cursor: not-allowed; }
   to { transform: scaleX(0); }
 }
 
-/* (The bordered head bar that used to live here is gone. It was a second
-   `.card-head` -- same name, different thing -- and the only place it was ever
-   used was the gallery page documenting it. A card that holds rows now takes
-   `title` like any other, and the header the component draws is the one
-   header.) */
-.row { display: flex; align-items: center; gap: var(--space-3); }
-
 .ctl-grow { flex: 1; min-width: 0; }
 
 .mono { font-family: var(--font-mono); font-size: var(--text-sm); }
@@ -1784,13 +1794,6 @@ input:active, textarea:active, select:active { transform: none; }
    template are allowed to diverge, and this is only saying that they have. */
 .set-hint.drifted { color: var(--warn); }
 
-/* One applet, alone on the page, at `/applet/<id>`. Fills the window: there is
-   no grid here to decide a height, and a screenshot of an applet letterboxed
-   inside a page is mostly not the applet. */
-.bare { height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
-
-.bare > * { flex: 1; min-height: 0; }
-
 /* A round is in flight. On the button that asks for one, because that is where
    you are looking when you have just pressed it -- and not in the foot, which
    would flicker every thirty seconds on a tile that is working perfectly. */
@@ -2138,7 +2141,15 @@ input:active, textarea:active, select:active { transform: none; }
 
 .danger-act > .set-hint + .set-hint { margin-top: var(--space-1); }
 
-.danger-row { margin-top: var(--space-2); gap: var(--space-2); align-items: center; }
+/* `display: flex` is here now. These rows carried `.row` as well, which is a
+   class no component of this package renders -- it only ever reached them
+   because a consumer's stylesheet happened to define it too. */
+.danger-row {
+  display: flex;
+  margin-top: var(--space-2);
+  gap: var(--space-2);
+  align-items: center;
+}
 
 .danger-row > input { min-width: 0; }
 
@@ -2160,15 +2171,15 @@ input:active, textarea:active, select:active { transform: none; }
   column-gap: var(--space-3);
 }
 
-.field-row { align-items: flex-end; gap: var(--space-2); }
+.danger-field-row { align-items: flex-end; gap: var(--space-2); }
 
-.field-row > button { flex: none; }
+.danger-field-row > button { flex: none; }
 
 /* Two forms one under the other, whose buttons say different words -- "Add"
    and "Block". Sized to their text they came out different widths, and two
    controls in the same column at the same indent that do not line up read as
    an accident rather than as a pair. */
-.field-row > button { min-width: 9ch; }
+.danger-field-row > button { min-width: 9ch; }
 }
 
 /* ---- ./callout.css ---- */
@@ -2499,9 +2510,12 @@ input:active, textarea:active, select:active { transform: none; }
 /* Sized to its words, for a switch that sits in a row of other controls rather
    than owning a row of its own. `flex: 1` there would push the label away from
    the switch by the whole width of the bar. */
-.row > .switch-row { flex: none; padding-block: 0; }
+/* `inRow`: a toggle beside other controls rather than in a column of
+   settings. Was `.row > .switch-row`, which reached through `.row` -- a class
+   no component here renders. */
+.switch-in-row { flex: none; padding-block: 0; }
 
-.row > .switch-row .switch-body { flex: none; }
+.switch-in-row .switch-body { flex: none; }
 
 /* The opposite case: a switch that *is* the row, with something small beside it
    -- a tooltip, a state word. `.set-row` wraps, so a switch that does not grow
@@ -4090,7 +4104,10 @@ input[type='range'].slider:disabled::-moz-range-thumb { opacity: 0; }
 /* Fields stacked down a form. Wider than the gap inside one field, so the
    label of the next belongs to the input under it rather than to the error
    above it. */
-.field-row > .field { flex: 1; min-width: 0; }
+/* `inRow`: a field sharing a line with other controls rather than stacked in a
+   column. Was `.field-row > .field`, which reached through a container class
+   the caller had to write and this package does not hand out. */
+.field-in-row { flex: 1; min-width: 0; }
 
 /* A password with an eye -- `Input type="password"`.
    A grid rather than `position: absolute`: both children take the one cell, the
@@ -4965,6 +4982,100 @@ body.splitting * { cursor: inherit !important; }
 .ident-remove:hover { background: var(--panel); color: var(--text); }
 .ident-remove:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
+
+/* Prose and the surface it is written on, added in 0.8.0. Last, because
+   `.prose` styles the elements the reset in `base.css` flattened and has to
+   win over it, and because the editor's box sits over nothing. */
+/* ---- ./richtext.css ---- */
+@layer components {
+/* Prose: one class, and the elements it styles are ones nobody wrote.
+ *
+ * That is the whole reason a class exists here rather than utilities. Inside
+ * the editor the paragraphs, headings and lists are ProseMirror's, built
+ * from the document — there is no JSX to hang a utility on, so the choice is
+ * descendant rules behind one class or an arbitrary variant per element,
+ * which is the same selector spelled worse. `Markdown` has the same problem
+ * for the same reason and answers it the same way, as `.md` in `base.css`.
+ *
+ * The editor and the view share the class on purpose. They have to look
+ * identical and one set of rules is what guarantees it; two sets maintained
+ * separately is precisely how a what-you-see-is-what-you-get editor stops
+ * being one. Everything the components *do* render — the box, the toolbar,
+ * the writing surface's own padding and focus ring — is utilities in the
+ * component, where it belongs.
+ *
+ * `.rich-text` and not `.prose`: this package's classes ship unprefixed into
+ * other people's stylesheets, and `.prose` is the one name in CSS most
+ * likely to already be taken — Tailwind's typography plugin defines exactly
+ * it. A consumer with that plugin and this package would have had two sets
+ * of margins fighting, and it would have read as a theming bug.
+ *
+ * Every value here is a token. The vertical rhythm is `--space-*`, four
+ * pixels a step and scaling with `--density`; the type steps are `--text-*`,
+ * scaling with `--font-size`. A heading two sizes apart from its body at one
+ * density is two sizes apart at every density.
+ */
+
+.rich-text > * {
+  margin: 0;
+}
+
+.rich-text > * + * {
+  margin-top: var(--space-3);
+}
+
+.rich-text h2 {
+  font-size: var(--text-lg);
+  font-weight: var(--weight-strong);
+  letter-spacing: -0.01em;
+}
+
+.rich-text h3 {
+  font-size: var(--text-md);
+  font-weight: var(--weight-strong);
+}
+
+/* A heading after prose needs more room above it than below: the space
+   belongs to the section it opens, not to the paragraph it follows. */
+.rich-text > * + :is(h2, h3) {
+  margin-top: var(--space-6);
+}
+
+.rich-text :is(ul, ol) {
+  padding-left: var(--space-5);
+}
+
+.rich-text li + li {
+  margin-top: var(--space-1);
+}
+
+.rich-text a {
+  color: var(--accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.rich-text strong {
+  font-weight: var(--weight-strong);
+}
+
+/* An empty editor says what goes in it. The placeholder extension puts the
+   words on the empty node as `data-placeholder` and marks it, so `attr()` is
+   reading an attribute of the element it is drawn on — which is the part a
+   hand-rolled rule got wrong twice: a rule on the paragraph cannot reach an
+   attribute on the box, and ProseMirror's empty paragraph holds a trailing
+   `<br>` so `:empty` never matches it either. `pointer-events: none` so a
+   click on the words still lands in the text.
+
+   Harmless on the view, which never produces the class. */
+.rich-text p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  color: var(--muted);
+  pointer-events: none;
+}
+}
 /* ---- valet: the themes ---- */
 :root[data-theme='valet']{--bg:#f4f5f8;--panel:#ffffff;--panel-2:#eceef3;--border:#dcdfe7;--border-strong:#7b8597;--text:#171a21;--muted:#5b6474;--accent:#4f46e5;--accent-dim:#a9a4f0;--on-accent:#ffffff;--good:#1b7f4b;--warn:#8a5f0a;--bad:#bf3a31;--info:#0e6f8e;--app-bg:#f4f5f8;--shadow-1:0 4px 14px rgba(23, 26, 33, 0.08);--shadow-2:0 8px 24px rgba(23, 26, 33, 0.10);--shadow-3:0 12px 32px rgba(23, 26, 33, 0.12);--scrim:rgba(23, 26, 33, 0.32);color-scheme:light}
 :root[data-theme='valet-night']{--bg:#0c0f14;--panel:#141820;--panel-2:#1b2029;--border:#262c37;--border-strong:#616b7d;--text:#e8eaf0;--muted:#9ba4b5;--accent:#8f88ff;--accent-dim:#3f3a8f;--on-accent:#0d0b2e;--good:#5fcb8f;--warn:#e2ae58;--bad:#f28b84;--info:#57c4e8;--app-bg:#0c0f14;--shadow-1:0 6px 20px rgba(0, 0, 0, 0.28);--shadow-2:0 8px 28px rgba(0, 0, 0, 0.34);--shadow-3:0 10px 34px rgba(0, 0, 0, 0.38);--scrim:rgba(0, 0, 0, 0.5);color-scheme:dark}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wtfalch/design",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "description": "wtfalch's design system: themeable components on a fixed token vocabulary.",
   "keywords": [
     "design-system",
@@ -48,7 +48,15 @@
       "default": "./dist/themes/index.js"
     },
     "./tokens.css": "./dist/tokens.css",
-    "./styles.css": "./dist/styles/index.css"
+    "./styles.css": "./dist/styles/index.css",
+    "./editor": {
+      "types": "./dist/editor.d.ts",
+      "default": "./dist/editor.js"
+    },
+    "./rich-text": {
+      "types": "./dist/rich-text.d.ts",
+      "default": "./dist/rich-text.js"
+    }
   },
   "sideEffects": ["*.css"],
   "engines": {
@@ -61,8 +69,14 @@
     "test": "vitest run"
   },
   "peerDependencies": {
+    "@tiptap/extension-link": "^3.31.0",
+    "@tiptap/extensions": "^3.31.0",
+    "@tiptap/pm": "^3.31.0",
+    "@tiptap/react": "^3.31.0",
+    "@tiptap/starter-kit": "^3.31.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zod": "^4.0.0"
   },
   "dependencies": {
     "@radix-ui/react-slot": "^1.3.3",
@@ -72,6 +86,11 @@
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.3.3",
+    "@tiptap/extension-link": "^3.31.3",
+    "@tiptap/extensions": "^3.31.3",
+    "@tiptap/pm": "^3.31.3",
+    "@tiptap/react": "^3.31.3",
+    "@tiptap/starter-kit": "^3.31.3",
     "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -79,6 +98,27 @@
     "react-dom": "^19",
     "tailwindcss": "^4.3.3",
     "typescript": "^5.9.0",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.6",
+    "zod": "^4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@tiptap/extension-link": {
+      "optional": true
+    },
+    "@tiptap/extensions": {
+      "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/react": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "zod": {
+      "optional": true
+    }
   }
 }