@heyramzi/review 0.0.0-stage → 1.0.2

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@heyramzi/review",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.2",
+  "description": "The one review UI for Editor OS, Shorts OS and any client tool. A Svelte 5 page built to two static files, plus the Node handler that serves it.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/heyramzi/ui.git",
+    "directory": "packages/review"
+  },
+  "files": [
+    "dist",
+    "src/theme",
+    "package.json"
+  ],
+  "type": "module",
+  "imports": {
+    "#src/*.js": "./src/*.ts",
+    "#src/*.svelte": "./src/*.svelte",
+    "#src/*.css": "./src/*.css",
+    "#src/*.svg": "./src/*.svg",
+    "#dev/*.js": "./dev/*.ts",
+    "#scripts/*": "./scripts/*"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/node/index.d.ts",
+      "default": "./dist/review.js"
+    },
+    "./review.css": "./dist/review.css",
+    "./tokens.css": "./src/theme/tokens.css",
+    "./server": {
+      "types": "./dist/node/server/index.d.ts",
+      "default": "./dist/node/server/index.js"
+    },
+    "./types": {
+      "types": "./dist/node/core/types.d.ts",
+      "default": "./dist/node/core/types.js"
+    },
+    "./figure": {
+      "types": "./dist/node/diagrams/figure.d.ts",
+      "default": "./dist/node/diagrams/figure.js"
+    },
+    "./placeholder": {
+      "types": "./dist/node/diagrams/placeholder.d.ts",
+      "default": "./dist/node/diagrams/placeholder.js"
+    }
+  },
+  "devDependencies": {
+    "@heyramzi/ui": "2.0.0",
+    "@playwright/test": "^1.64.1",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@types/node": "^26.6.5",
+    "jsdom": "^30.1.3",
+    "react-grab": "latest",
+    "svelte": "^5.57.2",
+    "svelte-check": "^4.7.7",
+    "typescript": "~7.0.2",
+    "vite-plus": "^1.3.0",
+    "vitest": "^5.0.5"
+  },
+  "scripts": {
+    "dev": "vp dev --port 3321 --strictPort",
+    "build": "vp build",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "check:tokens": "node scripts/check-tokens.mjs",
+    "test": "vp test run",
+    "test:e2e": "playwright test"
+  }
 }

package/src/theme/base.css

@@ -0,0 +1,346 @@
+/* Reset, type and the few shared classes every screen uses. All of it lives under .rv. */
+
+.rv {
+  font: 400 var(--fs-sm) / 1.5 var(--sans);
+  color: var(--text);
+  background: var(--ground);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: transparent;
+  accent-color: var(--accent);
+}
+.rv,
+.rv *,
+.rv *::before,
+.rv *::after {
+  box-sizing: border-box;
+}
+.rv :is(h1, h2, h3, p, ul, ol, figure) {
+  margin: 0;
+}
+.rv :is(ul, ol) {
+  padding: 0;
+  list-style: none;
+}
+.rv button,
+.rv input,
+.rv textarea,
+.rv select {
+  font: inherit;
+  color: inherit;
+}
+.rv button {
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-align: inherit;
+}
+.rv :is(button, [role="button"], a):focus-visible,
+.rv :is(input, textarea, select):focus-visible,
+.rv [tabindex]:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+.rv ::selection {
+  background: color-mix(in oklab, var(--accent) 38%, transparent);
+}
+.rv ::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.rv ::-webkit-scrollbar-thumb {
+  background: var(--line);
+  border-radius: var(--radius-lg);
+  border: 3px solid transparent;
+  background-clip: content-box;
+}
+.rv ::-webkit-scrollbar-thumb:hover {
+  background: var(--line-strong);
+  background-clip: content-box;
+  border: 3px solid transparent;
+}
+.rv {
+  scrollbar-color: var(--line) transparent;
+}
+
+.rv .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.rv .num {
+  font-variant-numeric: tabular-nums;
+}
+.rv .ic {
+  width: 16px;
+  height: 16px;
+  flex: none;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.rv .ic.sm {
+  width: 14px;
+  height: 14px;
+}
+
+/* Tone helpers: a class sets --tone, everything else reads it. */
+.rv .tone-neutral {
+  --tone: var(--dim);
+  --tone-soft: var(--raised);
+}
+.rv .tone-accent {
+  --tone: var(--accent);
+  --tone-soft: var(--accent-soft);
+}
+.rv .tone-ok {
+  --tone: var(--ok);
+  --tone-soft: var(--ok-soft);
+}
+.rv .tone-warn {
+  --tone: var(--warn-text);
+  --tone-soft: var(--warn-soft);
+}
+.rv .tone-bad {
+  --tone: var(--bad);
+  --tone-soft: var(--bad-soft);
+}
+.rv .tone-bot {
+  --tone: var(--bot);
+  --tone-soft: var(--bot-soft);
+}
+
+/* Buttons. Quiet by default, so a screen of them doesn't shout. */
+.rv .btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: var(--control);
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--dim);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+  transition:
+    background-color var(--duration-quick) var(--ease-smooth-out),
+    color var(--duration-quick) var(--ease-smooth-out),
+    border-color var(--duration-quick) var(--ease-smooth-out),
+    transform var(--duration-micro) var(--ease-smooth-out);
+}
+.rv .btn:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+.rv .btn:active {
+  background: var(--press);
+  transform: scale(var(--scale-medium));
+}
+.rv .btn:disabled,
+.rv .btn[aria-disabled="true"] {
+  color: var(--faint);
+  cursor: not-allowed;
+}
+/* WHY: still hoverable so its data-tip can say why. Faded by colour, since opacity would fade the tip too. */
+.rv .btn:is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
+  background: transparent;
+  color: var(--faint);
+  transform: none;
+}
+.rv .btn:is(.solid, .primary):is(:disabled, [aria-disabled="true"]),
+.rv .btn:is(.solid, .primary):is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
+  background: var(--raised);
+  border-color: var(--line);
+  color: var(--faint);
+}
+.rv .btn.solid {
+  background: var(--raised);
+  border-color: var(--line);
+  color: var(--text);
+}
+.rv .btn.solid:hover {
+  border-color: var(--line-strong);
+  background: color-mix(in oklab, var(--raised) 86%, var(--text));
+}
+.rv .btn.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--on-accent);
+  font-weight: 600;
+}
+.rv .btn.primary:hover {
+  background: color-mix(in oklab, var(--accent) 86%, var(--text));
+}
+.rv .btn.primary:active {
+  background: color-mix(in oklab, var(--accent) 78%, var(--text));
+}
+.rv .btn.icon {
+  width: var(--control);
+  padding: 0;
+}
+.rv .btn[aria-pressed="true"] {
+  color: var(--text);
+  background: var(--press);
+}
+.rv .btn.ok {
+  color: var(--ok);
+}
+.rv .btn.ok:hover {
+  background: var(--ok-soft);
+}
+.rv .btn.bad:hover {
+  color: var(--bad);
+  background: var(--bad-soft);
+}
+@media (pointer: coarse) {
+  .rv .btn {
+    min-height: 40px;
+  }
+  .rv .btn.icon {
+    width: 40px;
+  }
+}
+
+/* The key cap. */
+.rv kbd {
+  display: inline-grid;
+  place-items: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border: 1px solid var(--line);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-xs);
+  background: var(--surface);
+  color: var(--dim);
+  font: 500 var(--fs-xs) / 1 var(--mono);
+}
+/* No keyboard in reach, so a key cap only takes room. */
+@media (hover: none), (pointer: coarse) {
+  .rv kbd {
+    display: none;
+  }
+}
+
+/* A small labelled fact: a time, a kind, a count. */
+.rv .chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 22px;
+  padding: 0 7px;
+  border-radius: var(--radius-sm);
+  background: var(--raised);
+  color: var(--dim);
+  font-size: var(--fs-xs);
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+}
+.rv .chip.tinted {
+  background: var(--tone-soft);
+  color: var(--tone);
+}
+
+/* Tooltip, on the transitions-dev tooltip tokens. Pure CSS: a data-tip on anything. */
+.rv [data-tip] {
+  position: relative;
+}
+.rv [data-tip]::after {
+  content: attr(data-tip);
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + 8px);
+  left: 50%;
+  translate: -50% 0;
+  width: max-content;
+  max-width: 260px;
+  padding: 7px 10px;
+  border-radius: var(--radius-sm);
+  background: color-mix(in oklab, var(--raised) 92%, var(--text));
+  box-shadow: var(--shadow-pop);
+  color: var(--text);
+  font: 500 var(--fs-xs) / 1.4 var(--sans);
+  text-align: left;
+  text-wrap: pretty;
+  white-space: normal;
+  pointer-events: none;
+  opacity: 0;
+  scale: var(--tt-scale);
+  transform-origin: top center;
+  transition:
+    opacity var(--tt-out-dur) var(--ease-out),
+    scale var(--tt-out-dur) var(--ease-out);
+}
+.rv [data-tip][data-tip-end]::after {
+  left: auto;
+  right: 0;
+  translate: 0 0;
+  transform-origin: top right;
+}
+.rv [data-tip]:hover::after,
+.rv [data-tip]:focus-visible::after {
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity var(--tt-in-dur) var(--ease-out) var(--tt-delay),
+    scale var(--tt-in-dur) var(--ease-out) var(--tt-delay);
+}
+@media (hover: none) {
+  .rv [data-tip]::after {
+    display: none;
+  }
+}
+
+/* Skeletons pulse instead of shimmering across text they can't yet say. */
+.rv .skel {
+  background: var(--raised);
+  border-radius: var(--radius-sm);
+  animation: rv-pulse var(--pulse-dur) var(--ease-in-out) infinite alternate;
+}
+@keyframes rv-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.5;
+  }
+}
+
+/* A number or word that changed: the old one is gone, the new one slides and un-blurs in. */
+@keyframes rv-swap {
+  from {
+    opacity: 0;
+    transform: translateY(var(--text-swap-translate-y));
+    filter: blur(var(--text-swap-blur));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rv .skel {
+    animation: none;
+  }
+}
+
+/* The theme switch paints the new theme as a circle (see hooks/theme.svelte.ts); the browser's own cross-fade would fight it. */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 2;
+}

package/src/theme/tokens.css

@@ -0,0 +1,196 @@
+/*
+ * The only file that may hold a colour, a radius or a duration. Everything is declared under
+ * :where() so it has no specificity, and any host stylesheet overrides it by just setting the name.
+ */
+
+:where(:root) {
+  color-scheme: dark;
+
+  /* Set here, not on .rv, so a brand's own --on-accent on :root reaches the buttons. */
+  --on-accent: oklch(0.12 0.04 258);
+  --ground: oklch(0.12 0.04 258);
+  --surface: oklch(0.16 0.045 260);
+  --raised: oklch(0.205 0.05 262);
+  --line: oklch(0.27 0.055 264);
+  --line-soft: oklch(0.22 0.05 262);
+
+  --text: oklch(0.97 0.01 55);
+  --dim: oklch(0.76 0.02 262);
+  --faint: oklch(0.63 0.02 262);
+
+  --accent: oklch(0.68 0.16 272);
+  --bot: oklch(0.72 0.12 305);
+  /* The GrokBot face from the old Shorts room (github.com/zhulin025/LaoA-GrokBot, MIT), and the colours it cycles while thinking. */
+  --bot-think-a: #4f7cf6;
+  --bot-think-b: #d15cf0;
+  --ok: oklch(0.72 0.16 150);
+  --warn: oklch(0.8 0.13 75);
+  /* Warn as text. Light darkens it; keep --warn for dots and fills. */
+  --warn-text: var(--warn);
+  --bad: oklch(0.65 0.19 25);
+
+  /* The cover over the video frame stays dark with light text in both themes, like a player's. */
+  --cover-scrim-low: oklch(0 0 0 / 0.84);
+  --cover-scrim-mid: oklch(0 0 0 / 0.5);
+  --cover-scrim-top: oklch(0 0 0 / 0.4);
+  --cover-band: oklch(0.14 0.012 262);
+  --cover-text: oklch(1 0 0);
+  --cover-track: oklch(1 0 0 / 0.22);
+  --cover-fill: oklch(0.68 0.16 272);
+
+  /* The layout diagram is a fixed dark scene of a presenter at a desk, so it doesn't follow the theme. */
+  --scene-canvas: #0b0b0c;
+  --scene-room-top: #34363c;
+  --scene-room-bottom: #1a1b1f;
+  --scene-glow: #ffffff;
+  --scene-skin-top: #b9bcc4;
+  --scene-skin-bottom: #8c9099;
+  --scene-shirt: #565a64;
+  --scene-neck: #9a9ea7;
+  --scene-shadow: #000000;
+  --scene-collar: #484b54;
+  --scene-arm: #4a4e57;
+  --scene-screen: #181b22;
+  --scene-screen-bar: #232731;
+  --scene-dot: #3d4350;
+  --scene-pane: #20242d;
+  --scene-line: #2f3542;
+  --scene-media: #26232e;
+  --scene-media-ink: #4c4659;
+  --scene-edge: rgb(255 255 255 / 0.08);
+  --scene-grid: rgb(255 255 255 / 0.06);
+  --scene-words: #ffffff;
+
+  --sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --display: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace;
+
+  /* The one corner knob. Every other radius is a multiple of it. */
+  --radius: 10px;
+
+  /* Motion, on the transitions-dev names. */
+  --duration-stagger: 40ms;
+  --duration-micro: 80ms;
+  --duration-quick: 150ms;
+  --duration-fast: 250ms;
+  --duration-medium: 350ms;
+  --duration-slow: 400ms;
+  --duration-very-slow: 500ms;
+  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: ease-in-out;
+  --ease-out: ease-out;
+  --ease-linear: linear;
+  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+  --distance-micro: 4px;
+  --distance-base: 8px;
+  --scale-large: 0.96;
+  --scale-medium: 0.97;
+  --scale-small: 0.98;
+  --scale-tiny: 0.99;
+  --blur-small: 2px;
+  --blur-medium: 3px;
+  --pulse-dur: 1000ms;
+  --bot-think-dur: 2400ms;
+  --shimmer-dur: 2000ms;
+
+  --text-swap-dur: var(--duration-quick);
+  --text-swap-translate-y: var(--distance-micro);
+  --text-swap-blur: var(--blur-small);
+  --page-slide-dur: var(--duration-fast);
+  --page-slide-distance: var(--distance-base);
+  --page-blur: var(--blur-medium);
+  --dropdown-open-dur: var(--duration-fast);
+  --dropdown-close-dur: var(--duration-quick);
+  --dropdown-pre-scale: var(--scale-medium);
+  --panel-open-dur: var(--duration-slow);
+  --panel-close-dur: var(--duration-medium);
+  --tabs-dur: var(--duration-fast);
+  --tabs-ease: var(--ease-smooth-out);
+  --tt-in-dur: var(--duration-quick);
+  --tt-out-dur: 50ms;
+  --tt-delay: var(--duration-micro);
+  --tt-scale: var(--scale-small);
+}
+
+:where(:root[data-theme="light"]) {
+  color-scheme: light;
+
+  --on-accent: oklch(0.975 0.006 60);
+  --ground: oklch(0.975 0.006 60);
+  --surface: oklch(0.995 0.002 60);
+  --raised: oklch(0.945 0.008 60);
+  --line: oklch(0.86 0.012 260);
+  --line-soft: oklch(0.91 0.01 260);
+
+  --text: oklch(0.2 0.03 262);
+  --dim: oklch(0.38 0.025 262);
+  --faint: oklch(0.5 0.02 262);
+
+  --accent: oklch(0.5 0.2 272);
+  --bot: oklch(0.52 0.15 305);
+  --ok: oklch(0.52 0.14 150);
+  --warn: oklch(0.62 0.15 70);
+  --warn-text: oklch(0.48 0.11 70);
+  --bad: oklch(0.55 0.2 25);
+}
+
+/* WHY: one switch for every animation and transition that reads a token. */
+@media (prefers-reduced-motion: reduce) {
+  :where(:root) {
+    --duration-stagger: 0ms;
+    --duration-micro: 0ms;
+    --duration-quick: 0ms;
+    --duration-fast: 0ms;
+    --duration-medium: 0ms;
+    --duration-slow: 0ms;
+    --duration-very-slow: 0ms;
+    --pulse-dur: 0ms;
+    --bot-think-dur: 0ms;
+    --shimmer-dur: 0ms;
+  }
+}
+
+/* The derived tokens live on the page root, so an override anywhere above it is followed. */
+:where(.rv) {
+  --radius-xs: calc(var(--radius) * 0.35);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-lg: calc(var(--radius) * 1.4);
+  --radius-xl: calc(var(--radius) * 2);
+  --radius-pill: 999px;
+
+  --hover: color-mix(in oklab, var(--text) 6%, transparent);
+  --press: color-mix(in oklab, var(--text) 11%, transparent);
+  --scrim: color-mix(in oklab, var(--ground) 64%, transparent);
+  --line-strong: color-mix(in oklab, var(--line) 70%, var(--dim));
+  --accent-soft: color-mix(in oklab, var(--accent) 16%, var(--surface));
+  --accent-line: color-mix(in oklab, var(--accent) 48%, var(--line));
+  --ok-soft: color-mix(in oklab, var(--ok) 15%, var(--surface));
+  --warn-soft: color-mix(in oklab, var(--warn) 16%, var(--surface));
+  --bad-soft: color-mix(in oklab, var(--bad) 16%, var(--surface));
+  --bot-soft: color-mix(in oklab, var(--bot) 15%, var(--surface));
+
+  /* The @heyramzi/tasks tone names, read by its status dots, mapped onto review's palette. */
+  --color-muted-foreground: var(--dim);
+  --tone-accent: var(--accent);
+  --color-success: var(--ok);
+  --color-warning: var(--warn);
+  --color-destructive: var(--bad);
+  --status-dot-mark: var(--ground);
+
+  --shadow-pop:
+    0 1px 0 color-mix(in oklab, var(--text) 5%, transparent) inset,
+    0 12px 32px color-mix(in oklab, var(--ground) 65%, transparent), 0 0 0 1px var(--line);
+  --shadow-sheet:
+    0 -16px 48px color-mix(in oklab, var(--ground) 70%, transparent), 0 0 0 1px var(--line);
+  --shadow-lift: 0 6px 18px color-mix(in oklab, var(--ground) 55%, transparent);
+
+  --fs-2xs: 0.6875rem;
+  --fs-xs: 0.75rem;
+  --fs-sm: 0.8125rem;
+  --fs-md: 0.875rem;
+  --fs-lg: 1rem;
+  --fs-xl: 1.25rem;
+  /* 32px is the desktop floor for a button; the coarse-pointer rule lifts it to 40px. */
+  --control: 32px;
+  --gutter: 16px;
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-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.