@wtfalch/design 0.11.0 → 0.13.0

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;
   }
@@ -2814,8 +2831,10 @@ input[type='radio']:active:not(:disabled) {
 }
 
 /* Only where there is something to pick. A row without `row-hit` is not a
-   choice, and lighting it up on hover promises something that does not happen. */
-.rows-pick > .rows-row:has(.row-hit):hover {
+   choice, and lighting it up on hover promises something that does not happen.
+   Nor is a row whose hit is disabled: a waiting row lit up under its own
+   `not-allowed` cursor, and `disabled` would have made that permanent. */
+.rows-pick > .rows-row:has(.row-hit:enabled):hover {
   border-color: var(--accent);
   background: var(--panel-2);
 }
@@ -2867,9 +2886,16 @@ input[type='radio']:active:not(:disabled) {
 /* And nothing else can be chosen while it happens: picking a second model
    mid-load queues a second load, which is how a machine ends up swapping two
    sets of weights it cannot hold at once. */
-.rows-pick > .rows-row.is-waiting { opacity: 0.5; }
+.rows-pick > .rows-row.is-waiting,
+.rows-pick > .rows-row.is-disabled { opacity: 0.5; }
 
-.rows-pick > .rows-row.is-waiting .row-hit { cursor: not-allowed; }
+.rows-pick > .rows-row.is-waiting .row-hit,
+.rows-pick > .rows-row.is-disabled .row-hit { cursor: not-allowed; }
+
+/* Dimmed once. `.row-hit:disabled` dims the button as well, and under the
+   row's own opacity the hint of a disabled row, the line saying why it cannot
+   be chosen, came out at a quarter strength. */
+.rows-pick > .rows-row.is-disabled > .row-hit:disabled { opacity: 1; }
 
 @media (prefers-reduced-motion: reduce) {
   /* The border still says which one, without the breathing. */
@@ -2921,7 +2947,7 @@ input[type='radio']:active:not(:disabled) {
   margin-bottom: calc(var(--space-2) * -1);
 }
 
-.rows-pick > .rows-row.is-picked:has(.row-hit):hover {
+.rows-pick > .rows-row.is-picked:has(.row-hit:enabled):hover {
   background: color-mix(in srgb, var(--accent) 13%, var(--panel));
 }
 
@@ -2980,7 +3006,7 @@ input[type='radio']:active:not(:disabled) {
   border-radius: var(--radius-sm);
 }
 
-.row-hit:hover .truncate { color: var(--accent); }
+.row-hit:enabled:hover .truncate { color: var(--accent); }
 
 .row-hit:focus-visible { outline: none; box-shadow: var(--focus-ring); }
 }
@@ -4965,6 +4991,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.11.0",
+  "version": "0.13.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
+    }
   }
 }