@mirror-physics/fractal-ui 0.2.0-next.9 → 0.2.0-next.90

package/dist/lattice-FAYE5KWW.svg

@@ -0,0 +1,3 @@
+<svg width="460" height="460" viewBox="0 0 460 460" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M122.969 0.059864C124.824 0.0608223 126.603 0.798262 127.915 2.11016L457.572 331.773C458.882 333.083 459.62 334.859 459.622 336.711L459.809 452.735C459.815 456.607 456.677 459.749 452.805 459.747L336.65 459.685C334.795 459.684 333.016 458.947 331.704 457.635L2.05026 127.981C0.736582 126.667 -0.000997322 124.885 1.01213e-06 123.027L0.0623525 6.99624C0.06443 3.13031 3.20003 -0.00199578 7.06597 9.54104e-07L122.969 0.059864Z" fill="#D9D9D9"/>
+</svg>

package/dist/tokens.css

@@ -15,7 +15,7 @@
   /* Grey — true neutral UI scale, very slight cool lean */
   --grey-0: #FEFEFE;
   --grey-50: #FAFAFA;
-  --grey-100: #F0F0F0;
+  --grey-100: #F2F2F3;
   --grey-200: #E6E6E7;
   --grey-300: #D4D4D6;
   --grey-400: #929295;
@@ -123,6 +123,7 @@
   /* ---- Core ---- */
   --bg-canvas: var(--grey-0);
   --bg-surface-1: var(--grey-50);
+  --bg-surface-subtle: var(--grey-100);
   --bg-surface-2: var(--grey-200);
   --bg-surface-3: var(--grey-400);
   --bg-inverse: var(--grey-800);
@@ -134,11 +135,11 @@
   /* Hover */
   --hover-surface: var(--grey-100);
   --hover-on-surface: var(--grey-50);
-  --hover-canvas: var(--grey-100);
+  --hover-canvas: #F6F6F7;
 
   /* Navigation */
   --nav-surface: var(--grey-50);
-  --nav-border: var(--grey-200);
+  --nav-border: var(--border-on-surface-1);
   --nav-hover: var(--grey-100);
   --nav-selected: var(--grey-100);
 
@@ -152,10 +153,16 @@
   --fg-inverse-secondary: var(--grey-300);
 
   /* ---- Borders ---- */
-  --border-subtle: var(--grey-200);
-  --border-default: var(--grey-300);
+  /* Matched Oklab lightness step; calibrated to grey-200 on light canvas. */
+  --border-on-canvas: #E6E6E7;
+  --border-on-surface-1: #E2E2E2;
+  --border-on-surface-2: #CFCFD0;
+  --border-on-surface-3: #7D7D7F;
+  --border-subtle: var(--border-on-canvas);
+  --border-default: var(--border-subtle);
   --border-strong: var(--grey-400);
-  --border-focus: var(--blue-500);
+  --border-focus: var(--grey-400);
+  --focus-surface: color-mix(in srgb, var(--border-focus) 25%, transparent);
   --border-inverse: rgba(255, 255, 255, 0.12);
   --border-inverse-strong: rgba(255, 255, 255, 0.20);
 
@@ -202,6 +209,18 @@
   --warning-text: var(--yellow-900);
   --warning-bg: var(--yellow-0);
 
+  /* Filled status and metadata tags — borderless containment. */
+  --tag-info-bg: var(--blue-100);
+  --tag-info-fg: var(--blue-600);
+  --tag-success-bg: var(--green-100);
+  --tag-success-fg: var(--green-600);
+  --tag-warning-bg: var(--yellow-100);
+  --tag-warning-fg: var(--yellow-600);
+  --tag-error-bg: var(--red-100);
+  --tag-error-fg: var(--red-600);
+  --tag-neutral-bg: var(--bg-surface-2);
+  --tag-neutral-fg: var(--fg-secondary);
+
   /* ---- Pink ---- */
   --pink-default: var(--pink-500);
   --pink-hover: var(--pink-400);
@@ -313,6 +332,7 @@
     /* ---- Core ---- */
     --bg-canvas: var(--grey-900);
     --bg-surface-1: var(--grey-800);
+    --bg-surface-subtle: var(--grey-800);
     --bg-surface-2: var(--grey-700);
     --bg-surface-3: var(--grey-600);
     --bg-inverse: var(--grey-50);
@@ -324,11 +344,11 @@
     /* Hover */
     --hover-surface: var(--grey-700);
     --hover-on-surface: var(--grey-800);
-    --hover-canvas: var(--grey-700);
+    --hover-canvas: var(--grey-800);
 
     /* Navigation */
     --nav-surface: var(--grey-700);
-    --nav-border: var(--grey-600);
+    --nav-border: var(--border-on-surface-1);
     --nav-hover: var(--grey-600);
     --nav-selected: var(--grey-500);
 
@@ -342,10 +362,15 @@
     --fg-inverse-secondary: var(--grey-600);
 
     /* ---- Borders ---- */
-    --border-subtle: var(--grey-700);
-    --border-default: var(--grey-600);
+    /* Matched Oklab lightness step; calibrated to grey-200 on light canvas. */
+    --border-on-canvas: #2D2D2F;
+    --border-on-surface-1: #3F3F41;
+    --border-on-surface-2: #535355;
+    --border-on-surface-3: #6A6A6D;
+    --border-subtle: var(--border-on-canvas);
+    --border-default: var(--border-subtle);
     --border-strong: var(--grey-500);
-    --border-focus: var(--blue-400);
+    --border-focus: var(--grey-400);
     --border-inverse: rgba(0, 0, 0, 0.12);
     --border-inverse-strong: rgba(0, 0, 0, 0.20);
 
@@ -392,6 +417,18 @@
     --warning-text: var(--yellow-100);
     --warning-bg: var(--yellow-900);
 
+    /* Filled status and metadata tags — borderless containment. */
+    --tag-info-bg: var(--blue-700);
+    --tag-info-fg: var(--blue-200);
+    --tag-success-bg: var(--green-700);
+    --tag-success-fg: var(--green-200);
+    --tag-warning-bg: var(--yellow-700);
+    --tag-warning-fg: var(--yellow-200);
+    --tag-error-bg: var(--red-700);
+    --tag-error-fg: var(--red-200);
+    --tag-neutral-bg: var(--bg-surface-2);
+    --tag-neutral-fg: var(--fg-secondary);
+
     /* ---- Pink ---- */
     --pink-default: var(--pink-400);
     --pink-hover: var(--pink-300);
@@ -430,14 +467,46 @@
   }
 }
 
+/* Select the reference surface for a neutral boundary. This does not set a
+   background. Reset the scope at nested boundaries with a different pair. */
+[data-fractal-border-surface="canvas"] {
+  --border-subtle: var(--border-on-canvas);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-1"] {
+  --border-subtle: var(--border-on-surface-1);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-2"] {
+  --border-subtle: var(--border-on-surface-2);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+[data-fractal-border-surface="surface-3"] {
+  --border-subtle: var(--border-on-surface-3);
+  --border-default: var(--border-subtle);
+  --border-dashed-subtle: 1px dashed var(--border-subtle);
+}
+
+/* Primary actions share one theme for text and icon-only buttons.
+   Products may override these four tokens on their application root. */
+:root {
+  --button-primary-bg: var(--fg-primary);
+  --button-primary-hover: var(--fg-secondary);
+  --button-primary-active: var(--fg-primary);
+  --button-primary-fg: var(--fg-inverse);
+}
+
 /* =========================================
    Typography - Font Declarations & Tokens
    ========================================= */
 
 /* ---- Custom Font Declarations ---- */
 @font-face {
-  font-family: 'Figtree';
-  src: url('./assets/typography/Figtree-VariableFont_wght.ttf') format('truetype-variations');
+  font-family: 'Mirror Sans';
+  src: url('./assets/typography/MirrorSans-Variable.woff2') format('woff2');
   font-weight: 300 900;
   font-style: normal;
   font-display: swap;
@@ -451,12 +520,12 @@
   font-display: swap;
 }
 
-/* Math & Greek fallback. Figtree and Geist Mono have no glyphs for Greek
+/* Math & Greek fallback. Mirror Sans and Geist Mono have no glyphs for Greek
    letters (α, β, Δ, π, …) or math operators (∑, ∫, ∂, ∇, ≈, √, …), which
    appear constantly in scientific / chemistry reports. Noto Sans Math is
    listed after the primary faces so the browser borrows it per-glyph only
-   for the symbols Figtree/Geist Mono lack — normal Latin text still renders
-   in Figtree. See typography-guide.md → Math & Greek Fallback. */
+   for the symbols Mirror Sans/Geist Mono lack — normal Latin text still renders
+   in Mirror Sans. See typography-guide.md → Math & Greek Fallback. */
 @font-face {
   font-family: 'Noto Sans Math';
   src: url('./assets/typography/NotoSansMath-Regular.ttf') format('truetype');
@@ -467,7 +536,7 @@
 
 /* ---- Font Family Variables ---- */
 :root {
-  --font-sans: 'Figtree', 'Noto Sans Math', system-ui, sans-serif;
+  --font-sans: 'Mirror Sans', 'Noto Sans Math', system-ui, sans-serif;
   --font-mono: 'Geist Mono', 'Noto Sans Math', monospace;
 }
 
@@ -620,9 +689,46 @@ body {
     --shadow-xl: 0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
 
     /* ---- Layout Constants ---- */
+    --shell-header-height: 3.5rem; /* 56px at the default root, including the divider */
+    --chart-axis-tick-gap: var(--space-1);
+    --chart-axis-title-gap: var(--space-2);
     --panel-width: 256px;
   }
 
+/* Shared single-line control geometry. See layout-guide.md. */
+:root {
+  --control-border-width: 1px;
+  --control-label-gap: var(--space-2);
+  --control-icon-gap: var(--space-2);
+  --control-sm-font-size: .75rem;
+  --control-sm-line-height: 1.25rem;
+  --control-sm-padding-block: var(--space-1);
+  --control-sm-padding-inline: var(--space-3);
+  --control-sm-icon-size: 1rem;
+  --control-md-font-size: .875rem;
+  --control-md-line-height: 1.25rem;
+  --control-md-padding-block: var(--space-2);
+  --control-md-padding-inline: var(--space-3);
+  --control-md-icon-size: 1.25rem;
+  --control-lg-font-size: .875rem;
+  --control-lg-line-height: 1.25rem;
+  --control-lg-padding-block: var(--space-3);
+  --control-lg-padding-inline: var(--space-4);
+  --control-lg-icon-size: 1.25rem;
+  --control-xl-font-size: .875rem;
+  --control-xl-line-height: 1.25rem;
+  --control-xl-padding-block: var(--space-4);
+  --control-xl-padding-inline: var(--space-5);
+  --control-xl-icon-size: 1.25rem;
+}
+
+/* Table content caps; selected by the table container's available width. */
+:root {
+  --table-column-max-compact: 16rem;
+  --table-column-max-medium: 20rem;
+  --table-column-max-wide: 24rem;
+}
+
 /* =========================================
    Design System Motion Tokens
    =========================================

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mirror-physics/fractal-ui",
-  "version": "0.2.0-next.9",
-  "description": "Fractal UI — React components and CSS tokens for Mirror Physics products",
+  "version": "0.2.0-next.90",
+  "description": "Fractal UI \u2014 React components and CSS tokens for Mirror Physics products",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -13,7 +13,13 @@
       "require": "./dist/index.cjs"
     },
     "./css": "./dist/index.css",
-    "./tokens.css": "./dist/tokens.css"
+    "./tokens.css": "./dist/tokens.css",
+    "./column-editor": {
+      "types": "./dist/column-editor.d.ts",
+      "import": "./dist/column-editor.js",
+      "require": "./dist/column-editor.cjs"
+    },
+    "./column-editor.css": "./dist/column-editor.css"
   },
   "files": [
     "dist"
@@ -24,8 +30,11 @@
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
+    "test:tooltip": "playwright test",
+    "test:dropdown": "node --test tests/dropdown-position.test.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "publish:next": "set -a && . ./.env.local && set +a && npm publish --tag next",
     "prepublishOnly": "npm run typecheck && npm run build"
   },
   "peerDependencies": {
@@ -33,10 +42,17 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@mirror-physics/fractal-icons": "^0.4.0",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/view": "^6.43.7",
+    "@lezer/highlight": "^1.2.3",
+    "@mirror-physics/fractal-icons": "^0.4.3",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@uiw/react-codemirror": "^4.25.11",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
+    "@playwright/test": "^1.63.0",
     "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
@@ -46,7 +62,8 @@
     "react-dom": "^19.2.4",
     "storybook": "^10.4.6",
     "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6"
   },
   "repository": {
     "type": "git",