@elytracms/studio 0.0.76 → 0.0.78

package/dist/ui/status-dot.d.ts

@@ -18,8 +18,9 @@ export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'c
     tone: StatusTone;
     /**
      * The accessible + hover/focus-revealed text (e.g. "Published"). Exposed as the
-     * `aria-label` and native `title`, and shown as a small pill on hover/focus so a
-     * keyboard user (no mouse) can still read it.
+     * `aria-label` (screen readers) and shown as a small pill on hover/focus so a
+     * mouse OR keyboard user can read it — no native `title` (EC-452: it duplicated
+     * the pill, showing the label twice on mouse hover).
      */
     label: string;
     /**
@@ -27,8 +28,8 @@ export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'c
      * EC-446 focusable behavior (the versions pane — a few rows — so a keyboard user can
      * focus a dot to reveal its pill). Pass `false` for a DENSE surface (the list
      * `$state` column, EC-448): a long list must not add a tab stop per row. The label
-     * stays reachable via `aria-label` + native `title` (and the hover pill on mouse) —
-     * just not via focus. The focus-ring styling is likewise dropped when non-interactive.
+     * stays reachable via `aria-label` (and the hover pill on mouse) — just not via
+     * focus. The focus-ring styling is likewise dropped when non-interactive.
      */
     interactive?: boolean;
 }
@@ -39,10 +40,12 @@ export interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'c
  * list `$state` column). Pure-presentational and domain-agnostic: it knows a
  * `tone` and a `label`, nothing about versions or documents.
  *
- * Accessibility: the wrapper is `role="img"` and carries the label as both
- * `aria-label` (screen readers) and native `title` (mouse). When `interactive`
- * (the default), it is also focusable (`tabIndex=0`) and a CSS pill reveals the
- * label on `:focus-visible`, so the meaning is reachable without a mouse; a
+ * Accessibility: the wrapper is `role="img"` and carries the label as its
+ * `aria-label` (screen readers) — no native `title` (EC-452: pairing one with
+ * the CSS pill below made the label show twice on mouse hover; the pill is the
+ * one hover surface now). When `interactive` (the default), it is also
+ * focusable (`tabIndex=0`) and the same CSS pill reveals the label on
+ * `:focus-visible`, so the meaning is reachable without a mouse; a
  * non-interactive dot (EC-448, dense lists) drops the tab stop + focus ring but
  * keeps the name + hover pill. The dot glyph and the pill are `aria-hidden` — the
  * wrapper's `aria-label` is the single announced name.

package/dist/ui/status-dot.js

@@ -24,15 +24,17 @@ export function statusDotToneClass(tone) {
  * list `$state` column). Pure-presentational and domain-agnostic: it knows a
  * `tone` and a `label`, nothing about versions or documents.
  *
- * Accessibility: the wrapper is `role="img"` and carries the label as both
- * `aria-label` (screen readers) and native `title` (mouse). When `interactive`
- * (the default), it is also focusable (`tabIndex=0`) and a CSS pill reveals the
- * label on `:focus-visible`, so the meaning is reachable without a mouse; a
+ * Accessibility: the wrapper is `role="img"` and carries the label as its
+ * `aria-label` (screen readers) — no native `title` (EC-452: pairing one with
+ * the CSS pill below made the label show twice on mouse hover; the pill is the
+ * one hover surface now). When `interactive` (the default), it is also
+ * focusable (`tabIndex=0`) and the same CSS pill reveals the label on
+ * `:focus-visible`, so the meaning is reachable without a mouse; a
  * non-interactive dot (EC-448, dense lists) drops the tab stop + focus ring but
  * keeps the name + hover pill. The dot glyph and the pill are `aria-hidden` — the
  * wrapper's `aria-label` is the single announced name.
  */
 export function StatusDot({ tone, label, className, interactive = true, ...props }) {
-    return (_jsxs("span", { role: "img", ...(interactive ? { tabIndex: 0 } : {}), "aria-label": label, title: label, className: cn('group/status-dot relative inline-flex items-center justify-center rounded-full outline-none', interactive && 'focus-visible:ring-2 focus-visible:ring-ring/60', className), ...props, children: [_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', statusDotToneClass(tone)) }), _jsx("span", { "aria-hidden": true, className: cn('pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 whitespace-nowrap', 'rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-md', 'opacity-0 transition-opacity duration-100', 'group-hover/status-dot:opacity-100 group-focus-visible/status-dot:opacity-100'), children: label })] }));
+    return (_jsxs("span", { role: "img", ...(interactive ? { tabIndex: 0 } : {}), "aria-label": label, className: cn('group/status-dot relative inline-flex items-center justify-center rounded-full outline-none', interactive && 'focus-visible:ring-2 focus-visible:ring-ring/60', className), ...props, children: [_jsx("span", { "aria-hidden": true, className: cn('size-2 shrink-0 rounded-full', statusDotToneClass(tone)) }), _jsx("span", { "aria-hidden": true, className: cn('pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 whitespace-nowrap', 'rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-md', 'opacity-0 transition-opacity duration-100', 'group-hover/status-dot:opacity-100 group-focus-visible/status-dot:opacity-100'), children: label })] }));
 }
 //# sourceMappingURL=status-dot.js.map

package/dist/ui/status-dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"status-dot.js","sourceRoot":"","sources":["../../src/ui/status-dot.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAWjC;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAgB;IACjD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,YAAY,CAAA;QACrB,KAAK,SAAS;YACZ,OAAO,YAAY,CAAA;QACrB,KAAK,OAAO;YACV,OAAO,wBAAwB,CAAA;QACjC,KAAK,SAAS;YACZ,OAAO,qBAAqB,CAAA;IAChC,CAAC;AACH,CAAC;AAsBD;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,EAAkB;IAChG,OAAO,CACL,gBACE,IAAI,EAAC,KAAK,KACN,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,gBAC5B,KAAK,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,EAAE,CACX,6FAA6F,EAC7F,WAAW,IAAI,iDAAiD,EAChE,SAAS,CACV,KACG,KAAK,aAET,oCAAkB,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,GAAI,EAC7F,oCAEE,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,4GAA4G,EAC5G,2CAA2C,EAC3C,+EAA+E,CAChF,YAEA,KAAK,GACD,IACF,CACR,CAAA;AACH,CAAC","sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * The status vocabulary a {@link StatusDot} can express. Kept deliberately\n * generic (not domain-specific) so the same primitive marks a published version\n * (`success`), a draft/pending state (`warning`), or a quiet/absent state\n * (`muted`/`neutral`) — the versions pane (EC-446) is its first consumer, the\n * list `$state` column (EC-445) its next.\n */\nexport type StatusTone = 'success' | 'warning' | 'muted' | 'neutral'\n\n/**\n * The dot's fill class per tone — a pure mapping onto the shared token palette\n * (the same `--success`/`--warning`/`--muted-foreground` tokens {@link Badge}\n * uses), extracted so it is unit-testable without a DOM.\n */\nexport function statusDotToneClass(tone: StatusTone): string {\n  switch (tone) {\n    case 'success':\n      return 'bg-success'\n    case 'warning':\n      return 'bg-warning'\n    case 'muted':\n      return 'bg-muted-foreground/40'\n    case 'neutral':\n      return 'bg-muted-foreground'\n  }\n}\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-label'> {\n  /** Which status the dot expresses — maps onto the shared token palette. */\n  tone: StatusTone\n  /**\n   * The accessible + hover/focus-revealed text (e.g. \"Published\"). Exposed as the\n   * `aria-label` and native `title`, and shown as a small pill on hover/focus so a\n   * keyboard user (no mouse) can still read it.\n   */\n  label: string\n  /**\n   * Whether the dot is a keyboard tab stop (EC-448). **Default `true`** preserves the\n   * EC-446 focusable behavior (the versions pane — a few rows — so a keyboard user can\n   * focus a dot to reveal its pill). Pass `false` for a DENSE surface (the list\n   * `$state` column, EC-448): a long list must not add a tab stop per row. The label\n   * stays reachable via `aria-label` + native `title` (and the hover pill on mouse) —\n   * just not via focus. The focus-ring styling is likewise dropped when non-interactive.\n   */\n  interactive?: boolean\n}\n\n/**\n * EC-446 — a compact, reusable status indicator: a small colored dot whose\n * meaning is revealed on hover/focus rather than spent as a full-width pill. The\n * primary space win over {@link Badge} for dense rows (the versions history, the\n * list `$state` column). Pure-presentational and domain-agnostic: it knows a\n * `tone` and a `label`, nothing about versions or documents.\n *\n * Accessibility: the wrapper is `role=\"img\"` and carries the label as both\n * `aria-label` (screen readers) and native `title` (mouse). When `interactive`\n * (the default), it is also focusable (`tabIndex=0`) and a CSS pill reveals the\n * label on `:focus-visible`, so the meaning is reachable without a mouse; a\n * non-interactive dot (EC-448, dense lists) drops the tab stop + focus ring but\n * keeps the name + hover pill. The dot glyph and the pill are `aria-hidden` — the\n * wrapper's `aria-label` is the single announced name.\n */\nexport function StatusDot({ tone, label, className, interactive = true, ...props }: StatusDotProps) {\n  return (\n    <span\n      role=\"img\"\n      {...(interactive ? { tabIndex: 0 } : {})}\n      aria-label={label}\n      title={label}\n      className={cn(\n        'group/status-dot relative inline-flex items-center justify-center rounded-full outline-none',\n        interactive && 'focus-visible:ring-2 focus-visible:ring-ring/60',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden className={cn('size-2 shrink-0 rounded-full', statusDotToneClass(tone))} />\n      <span\n        aria-hidden\n        className={cn(\n          'pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 whitespace-nowrap',\n          'rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-md',\n          'opacity-0 transition-opacity duration-100',\n          'group-hover/status-dot:opacity-100 group-focus-visible/status-dot:opacity-100',\n        )}\n      >\n        {label}\n      </span>\n    </span>\n  )\n}\n"]}
+{"version":3,"file":"status-dot.js","sourceRoot":"","sources":["../../src/ui/status-dot.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAA;AAWjC;;;;GAIG;AACH,MAAM,UAAU,kBAAkB,CAAC,IAAgB;IACjD,QAAQ,IAAI,EAAE,CAAC;QACb,KAAK,SAAS;YACZ,OAAO,YAAY,CAAA;QACrB,KAAK,SAAS;YACZ,OAAO,YAAY,CAAA;QACrB,KAAK,OAAO;YACV,OAAO,wBAAwB,CAAA;QACjC,KAAK,SAAS;YACZ,OAAO,qBAAqB,CAAA;IAChC,CAAC;AACH,CAAC;AAuBD;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,EAAkB;IAChG,OAAO,CACL,gBACE,IAAI,EAAC,KAAK,KACN,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,gBAC5B,KAAK,EACjB,SAAS,EAAE,EAAE,CACX,6FAA6F,EAC7F,WAAW,IAAI,iDAAiD,EAChE,SAAS,CACV,KACG,KAAK,aAET,oCAAkB,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC,GAAI,EAC7F,oCAEE,SAAS,EAAE,EAAE,CACX,+FAA+F,EAC/F,4GAA4G,EAC5G,2CAA2C,EAC3C,+EAA+E,CAChF,YAEA,KAAK,GACD,IACF,CACR,CAAA;AACH,CAAC","sourcesContent":["import type { HTMLAttributes } from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * The status vocabulary a {@link StatusDot} can express. Kept deliberately\n * generic (not domain-specific) so the same primitive marks a published version\n * (`success`), a draft/pending state (`warning`), or a quiet/absent state\n * (`muted`/`neutral`) — the versions pane (EC-446) is its first consumer, the\n * list `$state` column (EC-445) its next.\n */\nexport type StatusTone = 'success' | 'warning' | 'muted' | 'neutral'\n\n/**\n * The dot's fill class per tone — a pure mapping onto the shared token palette\n * (the same `--success`/`--warning`/`--muted-foreground` tokens {@link Badge}\n * uses), extracted so it is unit-testable without a DOM.\n */\nexport function statusDotToneClass(tone: StatusTone): string {\n  switch (tone) {\n    case 'success':\n      return 'bg-success'\n    case 'warning':\n      return 'bg-warning'\n    case 'muted':\n      return 'bg-muted-foreground/40'\n    case 'neutral':\n      return 'bg-muted-foreground'\n  }\n}\n\nexport interface StatusDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'aria-label'> {\n  /** Which status the dot expresses — maps onto the shared token palette. */\n  tone: StatusTone\n  /**\n   * The accessible + hover/focus-revealed text (e.g. \"Published\"). Exposed as the\n   * `aria-label` (screen readers) and shown as a small pill on hover/focus so a\n   * mouse OR keyboard user can read it — no native `title` (EC-452: it duplicated\n   * the pill, showing the label twice on mouse hover).\n   */\n  label: string\n  /**\n   * Whether the dot is a keyboard tab stop (EC-448). **Default `true`** preserves the\n   * EC-446 focusable behavior (the versions pane — a few rows — so a keyboard user can\n   * focus a dot to reveal its pill). Pass `false` for a DENSE surface (the list\n   * `$state` column, EC-448): a long list must not add a tab stop per row. The label\n   * stays reachable via `aria-label` (and the hover pill on mouse) — just not via\n   * focus. The focus-ring styling is likewise dropped when non-interactive.\n   */\n  interactive?: boolean\n}\n\n/**\n * EC-446 — a compact, reusable status indicator: a small colored dot whose\n * meaning is revealed on hover/focus rather than spent as a full-width pill. The\n * primary space win over {@link Badge} for dense rows (the versions history, the\n * list `$state` column). Pure-presentational and domain-agnostic: it knows a\n * `tone` and a `label`, nothing about versions or documents.\n *\n * Accessibility: the wrapper is `role=\"img\"` and carries the label as its\n * `aria-label` (screen readers) — no native `title` (EC-452: pairing one with\n * the CSS pill below made the label show twice on mouse hover; the pill is the\n * one hover surface now). When `interactive` (the default), it is also\n * focusable (`tabIndex=0`) and the same CSS pill reveals the label on\n * `:focus-visible`, so the meaning is reachable without a mouse; a\n * non-interactive dot (EC-448, dense lists) drops the tab stop + focus ring but\n * keeps the name + hover pill. The dot glyph and the pill are `aria-hidden` — the\n * wrapper's `aria-label` is the single announced name.\n */\nexport function StatusDot({ tone, label, className, interactive = true, ...props }: StatusDotProps) {\n  return (\n    <span\n      role=\"img\"\n      {...(interactive ? { tabIndex: 0 } : {})}\n      aria-label={label}\n      className={cn(\n        'group/status-dot relative inline-flex items-center justify-center rounded-full outline-none',\n        interactive && 'focus-visible:ring-2 focus-visible:ring-ring/60',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden className={cn('size-2 shrink-0 rounded-full', statusDotToneClass(tone))} />\n      <span\n        aria-hidden\n        className={cn(\n          'pointer-events-none absolute left-1/2 top-full z-50 mt-1.5 -translate-x-1/2 whitespace-nowrap',\n          'rounded-md border border-border bg-popover px-2 py-1 text-xs font-medium text-popover-foreground shadow-md',\n          'opacity-0 transition-opacity duration-100',\n          'group-hover/status-dot:opacity-100 group-focus-visible/status-dot:opacity-100',\n        )}\n      >\n        {label}\n      </span>\n    </span>\n  )\n}\n"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elytracms/studio",
   "author": "finaldream <hi@finaldream.de>",
-  "version": "0.0.76",
+  "version": "0.0.78",
   "private": false,
   "description": "The Elytra studio engine (UI + lib + routes + data-only Convex schema) as an importable package. Extraction staged in EXTRACTION.md (EC-223); Stages 1-2 = UI primitives + router-free lib leaves.",
   "license": "MIT",
@@ -150,7 +150,7 @@
     "lucide-react": "^1.23.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3",
-    "@elytracms/core": "^0.0.76"
+    "@elytracms/core": "^0.0.78"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.170.0",
@@ -169,6 +169,7 @@
     "@types/node": "^26.1.0",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
+    "convex-test": "^0.0.54",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.3",