@heyramzi/ui 2.1.0 → 2.2.0

package/src/design/index.css

@@ -1,30 +1,12 @@
-/* The craft layer, the opinionated half of a design system.
- *
- * A palette says which colours a product uses. This file says how a surface
- * lifts off the page, how round a control is against a card, and how long an
- * overlay takes to arrive. Those three answers are what separate a kit that
- * looks assembled from one that looks made, and they were the part every app
- * here was re-deciding per component.
- *
- * WHY it ships beside the palette rather than inside it: the palette is the
- * brand and differs per app; elevation, radius and motion are craft and should
- * not. An app imports this, then tints it with `--elev-tint` and nothing else.
- *
- * Studied from beautifului.dev and rareui.com, which both build the same three
- * ladders: a hairline that is a shadow rather than a border, a radius that
- * steps by the role of the box, and a close that is faster than its open.
- *
- * Import once, after Tailwind:
- *   @import "@heyramzi/ui/design";
+/* The craft layer, imported once after Tailwind: elevation, radius and motion
+ * stay the same in every app, and an app tints it with `--elev-tint` alone.
  */
 
 @import "./polish.css";
 
 /* ── Radius, by role not by size ─────────────────────────────
-   A chip inside a control inside a card has to read as nested, which needs
-   three radii that step, not one radius reused. The Tailwind names are the
-   home so `rounded-lg` on a button already resolves to the control radius and
-   no component has to learn a new class. */
+   Nested boxes need radii that step, so the Tailwind names map to roles and
+   `rounded-lg` is already the control radius. */
 @theme {
   --radius-xs: 4px; /* tag, dot, inline code */
   --radius-sm: 6px; /* chip, badge, small pill */
@@ -36,28 +18,8 @@
 }
 
 /* ── Elevation ───────────────────────────────────────────────
-   Four steps of lift, plus the two edges that are not lift.
-
-   WHY the steps are shadow-only and the hairline is its own token: most boxes
-   in a kit already draw a border, and an elevation that bakes a `0 0 0 1px`
-   ring into every step gives those boxes two edges a pixel apart. Compose them
-   where a component drops its border:
-
-     box-shadow: var(--elev-hairline), var(--elev-card);
-
-   WHY each step is stacked rather than one blurred drop: a single shadow reads
-   as a sticker. Depth is several offsets falling off together, which is what
-   the eye reads as distance. They cost nothing extra because every stop is the
-   same colour at a different alpha.
-
-   WHY the blur radii are large and the alphas small: a 4px blur at 20% draws a
-   visible grey edge, which the eye reads as a second border. A 28px blur at 7%
-   is barely a colour anywhere and reads as height. Reach for more blur before
-   more alpha, every time.
-
-   `--elev-tint` is the one knob an app turns. Pure black greys a warm palette
-   out; the hue of the app's own darkest surface keeps the shadow in the
-   family. */
+   The steps are shadow-only and the hairline is its own token, or a box that
+   already draws a border gets two edges a pixel apart. */
 :root {
   --elev-tint: oklch(0 0 0);
 
@@ -84,9 +46,8 @@
     0 12px 26px -8px color-mix(in oklab, var(--elev-tint) 12%, transparent),
     0 40px 72px -20px color-mix(in oklab, var(--elev-tint) 20%, transparent);
 
-  /* The two edges. A hairline separates a surface from what is behind it; a rim
-     is the light catching its top edge, which is what makes a filled control
-     read as a physical key rather than a coloured rectangle. */
+  /* A hairline separates a surface from what's behind it; a rim lights its top
+     edge so a filled control reads as a key, not a coloured box. */
   --elev-hairline: 0 0 0 1px var(--color-border, var(--border));
   --elev-rim: inset 0 1px 0 color-mix(in oklab, white 16%, transparent);
 
@@ -94,10 +55,8 @@
   --elev-field: inset 0 1px 2px color-mix(in oklab, var(--elev-tint) 7%, transparent);
 }
 
-/* A dark surface cannot cast a darker shadow than the page it sits on, so the
-   hairline does the separating and the shadow only sinks what is behind it. On
-   dark the hairline is white at a low alpha, which is what reads as a lit edge
-   rather than as a drawn border. */
+/* A dark surface can't cast a shadow darker than its page, so on dark a
+   low-alpha white hairline does the separating. */
 .dark {
   --elev-btn: 0 1px 2px color-mix(in oklab, black 30%, transparent);
   --elev-card:
@@ -116,25 +75,19 @@
 }
 
 /* ── Focus ───────────────────────────────────────────────────
-   One ring, two parts: a solid edge that redraws the control's own outline in
-   the accent, and a soft halo that carries it off the surface. Written as a
-   variable so a component spends one line on it and every control focuses the
-   same way. */
+   One ring in one variable, a solid accent edge plus a soft halo, so every
+   control focuses the same way. */
 :root {
   --ring-color: var(--color-ring, var(--ring));
   --ring-halo: color-mix(in oklab, var(--ring-color) 16%, transparent);
-  /* A solid pixel redrawing the control's own edge, then a wide soft band. At a
-     higher alpha the band reads as a second border rather than as a glow, which
-     is why it is 16% over 4px and not 30% over 2px. */
+  /* At a higher alpha the halo reads as a second border, not a glow, which is
+     why it's 16% over 4px and not 30% over 2px. */
   --ring-focus: 0 0 0 1px var(--ring-color), 0 0 0 5px var(--ring-halo);
 }
 
 /* ── Motion ──────────────────────────────────────────────────
-   The transitions-dev scale, verbatim, so a snippet pasted from that skill and
-   a component written here read from the same names.
-
-   The doctrine in one line: an open is an invitation and a close should get out
-   of the way, so every close is shorter than its open and no close bounces. */
+   The transitions-dev scale, verbatim so pasted snippets share its names; every
+   close is shorter than its open, and no close bounces. */
 :root {
   --duration-stagger: 40ms;
   --duration-micro: 80ms;
@@ -186,13 +139,9 @@
 
   --ease-smooth-out: var(--ease-smooth-out);
 
-  /* WHY the durations are re-declared under a second name: Tailwind's
-     `duration-*` utility reads `--transition-duration-*`, not `--duration-*`, so
-     the six names above generated no class at all. `duration-fast` therefore
-     compiled to nothing and the element ended up at `transition-duration: 0s`:
-     no error, no warning, and a component that simply does not animate. The
-     comment at the top of this block had claimed `duration-fast` was a class
-     since the block was written. Found 31 Aug 2026 by probing a live page. */
+  /* Tailwind's `duration-*` reads `--transition-duration-*`, not `--duration-*`,
+     so without these `duration-fast` silently compiles to nothing and nothing
+     animates (found 31 Aug 2026). */
   --transition-duration-micro: var(--duration-micro);
   --transition-duration-quick: var(--duration-quick);
   --transition-duration-fast: var(--duration-fast);
@@ -201,14 +150,8 @@
   --transition-duration-very-slow: var(--duration-very-slow);
 }
 
-/* The bits-ui state variants every primitive in `./shadcn` is written against.
- *
- * bits-ui v2 writes `data-checked` / `data-open` and v1 wrote
- * `data-state="checked"`, so each variant matches both and a component does not
- * have to know which it is talking to. They live here rather than in a
- * consumer's stylesheet because the classes that need them ship in this
- * package: an app that defines only the palette rendered a switch that never
- * moved. Moved out of upsys `tokens.css` on 14 Sep 2026, with the kit. */
+/* Each bits-ui variant matches v2's `data-open` and v1's `data-state`, and ships
+ * here because an app that defined only the palette got a switch that never moved. */
 @custom-variant data-open {
   &:where([data-state="open"]),
   &:where([data-open]:not([data-open="false"])) {

package/src/design/polish.css

@@ -1,16 +1,5 @@
-/* The rules the craft layer applies for itself.
- *
- * Two layers, on purpose. `base` holds the element defaults (focus, selection,
- * scrollbars) so any component class or utility beats them. `components` holds
- * the three motion primitives, so a utility still beats those too.
- *
- * WHY the layers are not optional: an `@import` at the top of an app stylesheet
- * lands OUTSIDE Tailwind's layers, and unlayered CSS beats every layered rule
- * whatever its specificity. Written bare, a `:where()` selector here would
- * silently outrank `focus-visible:ring-3` on every control in the app.
- *
- * Imported by ./index.css. Do not import it on its own, because it reads the tokens
- * that file declares. */
+/* Keep every rule here inside a layer: unlayered CSS beats all layered rules, so a bare
+ * `:where()` would silently outrank `focus-visible:ring-3` on every control. */
 
 @layer base {
   /* One ring for the whole kit. `:where` keeps it at specificity zero on top of
@@ -26,9 +15,8 @@
     background: color-mix(in oklab, var(--ring-color) 24%, transparent);
   }
 
-  /* A default macOS overlay scrollbar paints a black bar on a dark panel. Track
-     transparent, thumb on the line token, so it belongs to whatever surface it
-     is over. The border is what insets the thumb without a second element. */
+  /* The default macOS scrollbar paints a black bar on a dark panel, so the track stays
+     transparent and the border insets the thumb. */
   :where(html) {
     scrollbar-color: var(--color-border, var(--border)) transparent;
   }
@@ -49,22 +37,19 @@
     background-color: var(--color-border, var(--border));
   }
 
-  ::-webkit-scrollbar-thumb:hover {
-    background-color: var(--color-muted-foreground, var(--muted-foreground));
+  @media (hover: hover) and (pointer: fine) {
+    ::-webkit-scrollbar-thumb:hover {
+      background-color: var(--color-muted-foreground, var(--muted-foreground));
+    }
   }
 }
 
 @layer components {
-  /* Three moves the kit repeats. They are classes rather than tokens because a
-     component wants one name, not four declarations, and because the reduced
-     motion guard then lives in one place instead of in every component.
-
-     Namespaced `t-` to match the transitions-dev snippets, which these sit
-     beside rather than duplicate. */
+  /* Classes, not tokens, so the reduced motion guard lives here once instead of in
+     every component. */
 
-  /* A control that reads as a key: it travels down a pixel under the finger.
-     The travel is what sells it, because a colour change alone reads as a hover
-     state, not as a press. */
+  /* A key that travels down a pixel when pressed, because a colour change alone
+     reads as hover, not as a press. */
   .t-press {
     transition:
       background-color var(--duration-quick) var(--ease-smooth-out),
@@ -78,18 +63,19 @@
     transform: translateY(1px);
   }
 
-  /* A card that answers the pointer. It rises by a pixel and gains the next
-     step of elevation, so the hover reads as the card coming forward rather
-     than as its border changing colour. */
+  /* The card rises a pixel and gains an elevation step, so hover reads as the card
+     coming forward, not its border changing colour. */
   .t-lift {
     transition:
       box-shadow var(--duration-fast) var(--ease-smooth-out),
       transform var(--duration-fast) var(--ease-smooth-out);
   }
 
-  .t-lift:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--elev-raised);
+  @media (hover: hover) and (pointer: fine) {
+    .t-lift:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--elev-raised);
+    }
   }
 
   /* A surface arriving. The open carries the distance, the scale and the blur;
@@ -109,11 +95,16 @@
       transition: none;
     }
 
-    .t-press:active,
-    .t-lift:hover {
+    .t-press:active {
       transform: none;
     }
 
+    @media (hover: hover) and (pointer: fine) {
+      .t-lift:hover {
+        transform: none;
+      }
+    }
+
     .t-enter,
     .t-exit {
       animation-duration: 1ms;

package/src/editor/editor-toolbar.svelte

@@ -1,87 +1,87 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Editor } from "@tiptap/core";
-import { Button } from "../shadcn/button/index.js";
-import { Input } from "../shadcn/input/index.js";
-import {
-	TextB,
-	TextItalic,
-	TextStrikethrough,
-	LinkSimple,
-	LinkBreak,
-	ListBullets,
-	ListNumbers,
-	Quotes,
-	VideoCamera,
-} from "phosphor-svelte";
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Editor } from "@tiptap/core";
+	import { Button } from "../shadcn/button/index.js";
+	import { Input } from "../shadcn/input/index.js";
+	import {
+		TextB,
+		TextItalic,
+		TextStrikethrough,
+		LinkSimple,
+		LinkBreak,
+		ListBullets,
+		ListNumbers,
+		Quotes,
+		VideoCamera,
+	} from "phosphor-svelte";
 
-// =========================
-// TYPES
-// =========================
-interface Props {
-	editor: Editor | null;
-	/** Bumped by the parent on every transaction, so active states re-read. */
-	tick: number;
-	preset: "full" | "notes";
-	onInsertYoutube: () => void;
-}
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		editor: Editor | null;
+		/** Bumped by the parent on every transaction, so active states re-read. */
+		tick: number;
+		preset: "full" | "notes";
+		onInsertYoutube: () => void;
+	}
 
-// =========================
-// PROPS
-// =========================
-let { editor: editorProp, tick, preset, onInsertYoutube }: Props = $props();
+	// =========================
+	// PROPS
+	// =========================
+	let { editor: editorProp, tick, preset, onInsertYoutube }: Props = $props();
 
-// =========================
-// STATE
-// =========================
-let linkUrl = $state("");
-let showLinkPopover = $state(false);
-let linkInputEl: HTMLInputElement | undefined = $state();
+	// =========================
+	// STATE
+	// =========================
+	let linkUrl = $state("");
+	let showLinkPopover = $state(false);
+	let linkInputEl: HTMLInputElement | undefined = $state();
 
-// =========================
-// DERIVED
-// =========================
-let editor: Editor | null = $derived(tick >= 0 ? editorProp : null);
+	// =========================
+	// DERIVED
+	// =========================
+	let editor: Editor | null = $derived(tick >= 0 ? editorProp : null);
 
-// =========================
-// EFFECTS
-// =========================
-$effect(() => {
-	if (showLinkPopover && linkInputEl) {
-		linkInputEl.focus();
-	}
-});
+	// =========================
+	// EFFECTS
+	// =========================
+	$effect(() => {
+		if (showLinkPopover && linkInputEl) {
+			linkInputEl.focus();
+		}
+	});
 
-// =========================
-// FUNCTIONS
-// =========================
-function toggleLink() {
-	if (!editor) return;
-	if (editor.isActive("link")) {
-		editor.chain().focus().unsetLink().run();
-		return;
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function toggleLink() {
+		if (!editor) return;
+		if (editor.isActive("link")) {
+			editor.chain().focus().unsetLink().run();
+			return;
+		}
+		const previousUrl = editor.getAttributes("link").href;
+		linkUrl = previousUrl || "";
+		showLinkPopover = true;
 	}
-	const previousUrl = editor.getAttributes("link").href;
-	linkUrl = previousUrl || "";
-	showLinkPopover = true;
-}
 
-function applyLink() {
-	if (!editor) return;
-	if (linkUrl.trim()) {
-		editor.chain().focus().setLink({ href: linkUrl.trim() }).run();
+	function applyLink() {
+		if (!editor) return;
+		if (linkUrl.trim()) {
+			editor.chain().focus().setLink({ href: linkUrl.trim() }).run();
+		}
+		linkUrl = "";
+		showLinkPopover = false;
 	}
-	linkUrl = "";
-	showLinkPopover = false;
-}
 
-function cancelLink() {
-	linkUrl = "";
-	showLinkPopover = false;
-	editor?.chain().focus().run();
-}
+	function cancelLink() {
+		linkUrl = "";
+		showLinkPopover = false;
+		editor?.chain().focus().run();
+	}
 </script>
 
 <!-- =========================== -->
@@ -98,7 +98,10 @@ function cancelLink() {
 					placeholder="Paste link..."
 					class="h-7 w-52 text-[0.8125rem]"
 					onkeydown={(e) => {
-						if (e.key === "Enter") { e.preventDefault(); applyLink(); }
+						if (e.key === "Enter") {
+							e.preventDefault();
+							applyLink();
+						}
 						if (e.key === "Escape") cancelLink();
 					}}
 				/>
@@ -106,12 +109,12 @@ function cancelLink() {
 					<LinkSimple size={14} />
 				</Button>
 				<Button
-				variant="ghost"
-				size="sm"
-				icon
-				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				onclick={cancelLink}
-				title="Cancel"
+					variant="ghost"
+					size="sm"
+					icon
+					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+					onclick={cancelLink}
+					title="Cancel"
 				>
 					&times;
 				</Button>
@@ -191,24 +194,25 @@ function cancelLink() {
 
 			{#if editor.isActive("link")}
 				<Button
-				variant="ghost"
-				size="sm"
-				icon
-				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={true}
-				onclick={() => editor?.chain().focus().unsetLink().run()}
+					variant="ghost"
+					size="sm"
+					icon
+					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+					aria-pressed={true}
+					onclick={() => editor?.chain().focus().unsetLink().run()}
 					title="Remove link"
 				>
 					<LinkBreak size={15} />
 				</Button>
 			{:else}
 				<Button
-				variant="ghost"
-				size="sm"
-				icon
-				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				onclick={toggleLink}
-					title="Add link (Cmd+K)">
+					variant="ghost"
+					size="sm"
+					icon
+					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+					onclick={toggleLink}
+					title="Add link (Cmd+K)"
+				>
 					<LinkSimple size={15} />
 				</Button>
 			{/if}
@@ -253,13 +257,14 @@ function cancelLink() {
 				<div class="toolbar-divider"></div>
 
 				<Button
-				variant="ghost"
-				size="sm"
-				icon
-				class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
-				aria-pressed={editor.isActive("youtube")}
-				onclick={onInsertYoutube}
-					title="Insert YouTube video">
+					variant="ghost"
+					size="sm"
+					icon
+					class="text-muted-foreground aria-pressed:bg-brand/10 aria-pressed:text-brand"
+					aria-pressed={editor.isActive("youtube")}
+					onclick={onInsertYoutube}
+					title="Insert YouTube video"
+				>
 					<VideoCamera size={15} />
 				</Button>
 			{/if}