@floegence/floe-webapp-core 0.86.60 → 0.86.63

package/dist/icons.js

@@ -1,20 +1,22 @@
-import { Activity as n, ActivityIcon as c, AlertCircle as r, AlertTriangle as a, ArchiveIcon as I, ArrowDown as i, ArrowLeft as l, ArrowRight as t, ArrowRightLeft as s, ArrowUp as d, AtSign as C, AwardIcon as h, BarChart as k, BatteryIcon as p, Bell as u, BellIcon as S, Bookmark as g, BookmarkIcon as D, Bot as P, BotIcon as f, BugIcon as m, Calendar as y, CalendarIcon as M, Camera as T, CameraIcon as F, ChartIcon as w, Check as L, CheckCircle as A, CheckIcon as B, ChevronDown as b, ChevronLeft as v, ChevronRight as H, ChevronUp as U, ChevronsUpDown as x, CircleStop as G, Clock as R, ClockIcon as E, CloseIcon as V, Cloud as O, CloudIcon as W, Code as z, CodeIcon as K, CompassIcon as q, Copy as X, CopyCheck as Z, CopyCheckIcon as Q, CopyIcon as j, Cpu as J, CreditCardIcon as N, Database as Y, DatabaseIcon as _, DollarIcon as $, Download as oo, DownloadIcon as eo, EditIcon as no, ErrorIcon as co, ExternalLink as ro, Eye as ao, EyeIcon as Io, EyeOff as io, FileCode as lo, FilePlus as to, FilePlusIcon as so, FileText as Co, Files as ho, Filter as ko, FilterIcon as po, FireIcon as uo, Folder as So, FolderOpen as go, FolderPlus as Do, FolderPlusIcon as Po, GiftIcon as fo, GitBranch as mo, GitBranchIcon as yo, Globe as Mo, GlobeIcon as To, Grid as Fo, Grid3x3 as wo, GripVertical as Lo, Hash as Ao, HeadphonesIcon as Bo, Heart as bo, HeartIcon as vo, HelpIcon as Ho, Highlighter as Uo, History as xo, Home as Go, HomeIcon as Ro, Image as Eo, ImageIcon as Vo, Info as Oo, InfoIcon as Wo, Key as zo, KeyIcon as Ko, Layers as qo, LayersIcon as Xo, LayoutDashboard as Zo, Link as Qo, LinkIcon as jo, Loader2 as Jo, LoadingIcon as No, Lock as Yo, LockIcon as _o, MagicIcon as $o, Mail as oe, MailIcon as ee, MapPinIcon as ne, Maximize as ce, Menu as re, MessageIcon as ae, MessageSquare as Ie, Mic as ie, MicIcon as le, MicOff as te, Minus as se, MinusIcon as de, MonitorPointer as Ce, Moon as he, MoonIcon as ke, MoreHorizontal as pe, MoreVertical as ue, MuteIcon as Se, Package as ge, PackageIcon as De, Paperclip as Pe, Paste as fe, PasteIcon as me, Pause as ye, PauseIcon as Me, Pencil as Te, Phone as Fe, PieChart as we, Pin as Le, PinIcon as Ae, Play as Be, PlayIcon as be, Plus as ve, PlusIcon as He, PowerIcon as Ue, PrinterIcon as xe, Quote as Ge, Refresh as Re, RefreshIcon as Ee, Region as Ve, Restore as Oe, RocketIcon as We, Save as ze, SaveIcon as Ke, Search as qe, SearchIcon as Xe, Send as Ze, SendIcon as Qe, Settings as je, SettingsIcon as Je, ShareIcon as Ne, Shield as Ye, ShieldCheck as _e, ShieldIcon as $e, SparkleIcon as on, Sparkles as en, Star as nn, StarIcon as cn, Stop as rn, StopFilled as an, SuccessIcon as In, Sun as ln, SunIcon as tn, Tag as sn, TagIcon as dn, TargetIcon as Cn, Terminal as hn, TerminalIcon as kn, TextTool as pn, ThumbsDownIcon as un, ThumbsUpIcon as Sn, Timer as gn, Trash as Dn, TrashIcon as Pn, TrendingDown as fn, TrendingUp as mn, Unlock as yn, Upload as Mn, UploadIcon as Tn, User as Fn, UserIcon as wn, Video as Ln, VideoIcon as An, Volume as Bn, VolumeIcon as bn, VolumeOff as vn, Wand as Hn, WarningIcon as Un, WifiIcon as xn, WifiOffIcon as Gn, Workflow as Rn, X as En, XCircle as Vn, Zap as On, ZapIcon as Wn } from "./components/icons/index.js";
-import { ActualSize as Kn, Clipboard as qn, ExitFullscreen as Xn, Fullscreen as Zn, Keyboard as Qn, Monitor as jn, Scan as Jn, SlidersHorizontal as Nn, Unplug as Yn } from "./components/icons/RemoteControlIcons.js";
-import { DockActivity as $n, DockBot as oc, DockCode as ec, DockCpu as nc, DockFileCode as cc, DockFolder as rc, DockGlobe as ac, DockLayers as Ic, DockLayoutDashboard as ic, DockMessageSquare as lc, DockRegion as tc, DockSearch as sc, DockSparkles as dc, DockTerminal as Cc, DockText as hc } from "./components/icons/DockIcons.js";
+import { Activity as n, ActivityIcon as c, AlertCircle as r, AlertTriangle as a, ArchiveIcon as i, ArrowDown as l, ArrowLeft as I, ArrowRight as t, ArrowRightLeft as s, ArrowUp as d, AtSign as h, AwardIcon as C, BarChart as k, BatteryIcon as p, Bell as u, BellIcon as S, Bookmark as g, BookmarkIcon as D, Bot as P, BotIcon as f, BugIcon as m, Calendar as y, CalendarIcon as M, Camera as T, CameraIcon as F, ChartIcon as R, Check as w, CheckCircle as L, CheckIcon as A, ChevronDown as v, ChevronLeft as B, ChevronRight as b, ChevronUp as x, ChevronsUpDown as H, CircleStop as U, Clock as G, ClockIcon as E, CloseIcon as V, Cloud as O, CloudIcon as W, Code as z, CodeIcon as K, CompassIcon as q, Copy as X, CopyCheck as Z, CopyCheckIcon as N, CopyIcon as Q, Cpu as j, CreditCardIcon as J, Database as Y, DatabaseIcon as _, DollarIcon as $, Download as oo, DownloadIcon as eo, EditIcon as no, ErrorIcon as co, ExternalLink as ro, Eye as ao, EyeIcon as io, EyeOff as lo, FileCode as Io, FilePlus as to, FilePlusIcon as so, FileText as ho, Files as Co, Filter as ko, FilterIcon as po, FireIcon as uo, Folder as So, FolderOpen as go, FolderPlus as Do, FolderPlusIcon as Po, GiftIcon as fo, GitBranch as mo, GitBranchIcon as yo, Globe as Mo, GlobeIcon as To, Grid as Fo, Grid3x3 as Ro, GripVertical as wo, Hash as Lo, HeadphonesIcon as Ao, Heart as vo, HeartIcon as Bo, HelpIcon as bo, Highlighter as xo, History as Ho, Home as Uo, HomeIcon as Go, Image as Eo, ImageIcon as Vo, Info as Oo, InfoIcon as Wo, Key as zo, KeyIcon as Ko, Layers as qo, LayersIcon as Xo, LayoutDashboard as Zo, Link as No, LinkIcon as Qo, Loader2 as jo, LoadingIcon as Jo, Lock as Yo, LockIcon as _o, MagicIcon as $o, Mail as oe, MailIcon as ee, MapPinIcon as ne, Maximize as ce, Menu as re, MessageIcon as ae, MessageSquare as ie, Mic as le, MicIcon as Ie, MicOff as te, Minus as se, MinusIcon as de, MonitorPointer as he, Moon as Ce, MoonIcon as ke, MoreHorizontal as pe, MoreVertical as ue, MuteIcon as Se, Package as ge, PackageIcon as De, Paperclip as Pe, Paste as fe, PasteIcon as me, Pause as ye, PauseIcon as Me, Pencil as Te, Phone as Fe, PieChart as Re, Pin as we, PinIcon as Le, Play as Ae, PlayIcon as ve, Plus as Be, PlusIcon as be, PowerIcon as xe, PrinterIcon as He, Quote as Ue, Refresh as Ge, RefreshIcon as Ee, Region as Ve, Restore as Oe, RocketIcon as We, Save as ze, SaveIcon as Ke, Search as qe, SearchIcon as Xe, Send as Ze, SendIcon as Ne, Settings as Qe, SettingsIcon as je, ShareIcon as Je, Shield as Ye, ShieldCheck as _e, ShieldIcon as $e, SparkleIcon as on, Sparkles as en, Star as nn, StarIcon as cn, Stop as rn, StopFilled as an, SuccessIcon as ln, Sun as In, SunIcon as tn, Tag as sn, TagIcon as dn, TargetIcon as hn, Terminal as Cn, TerminalIcon as kn, TextTool as pn, ThumbsDownIcon as un, ThumbsUpIcon as Sn, Timer as gn, Trash as Dn, TrashIcon as Pn, TrendingDown as fn, TrendingUp as mn, Unlock as yn, Upload as Mn, UploadIcon as Tn, User as Fn, UserIcon as Rn, Video as wn, VideoIcon as Ln, Volume as An, VolumeIcon as vn, VolumeOff as Bn, Wand as bn, WarningIcon as xn, WifiIcon as Hn, WifiOffIcon as Un, Workflow as Gn, X as En, XCircle as Vn, Zap as On, ZapIcon as Wn } from "./components/icons/index.js";
+import { ActivityRailIcons as Kn, RailChat as qn, RailDesignTokens as Xn, RailFiles as Zn, RailLaunchpad as Nn, RailNotes as Qn, RailSearch as jn, RailSettings as Jn, RailShowcase as Yn } from "./components/icons/ActivityRailIcons.js";
+import { ActualSize as $n, Clipboard as oc, ExitFullscreen as ec, Fullscreen as nc, Keyboard as cc, Monitor as rc, Scan as ac, SlidersHorizontal as ic, Unplug as lc } from "./components/icons/RemoteControlIcons.js";
+import { DockActivity as tc, DockBot as sc, DockCode as dc, DockCpu as hc, DockFileCode as Cc, DockFolder as kc, DockGlobe as pc, DockLayers as uc, DockLayoutDashboard as Sc, DockMessageSquare as gc, DockRegion as Dc, DockSearch as Pc, DockSparkles as fc, DockTerminal as mc, DockText as yc } from "./components/icons/DockIcons.js";
 export {
   n as Activity,
   c as ActivityIcon,
-  Kn as ActualSize,
+  Kn as ActivityRailIcons,
+  $n as ActualSize,
   r as AlertCircle,
   a as AlertTriangle,
-  I as ArchiveIcon,
-  i as ArrowDown,
-  l as ArrowLeft,
+  i as ArchiveIcon,
+  l as ArrowDown,
+  I as ArrowLeft,
   t as ArrowRight,
   s as ArrowRightLeft,
   d as ArrowUp,
-  C as AtSign,
-  h as AwardIcon,
+  h as AtSign,
+  C as AwardIcon,
   k as BarChart,
   p as BatteryIcon,
   u as Bell,
@@ -28,18 +30,18 @@ export {
   M as CalendarIcon,
   T as Camera,
   F as CameraIcon,
-  w as ChartIcon,
-  L as Check,
-  A as CheckCircle,
-  B as CheckIcon,
-  b as ChevronDown,
-  v as ChevronLeft,
-  H as ChevronRight,
-  U as ChevronUp,
-  x as ChevronsUpDown,
-  G as CircleStop,
-  qn as Clipboard,
-  R as Clock,
+  R as ChartIcon,
+  w as Check,
+  L as CheckCircle,
+  A as CheckIcon,
+  v as ChevronDown,
+  B as ChevronLeft,
+  b as ChevronRight,
+  x as ChevronUp,
+  H as ChevronsUpDown,
+  U as CircleStop,
+  oc as Clipboard,
+  G as Clock,
   E as ClockIcon,
   V as CloseIcon,
   O as Cloud,
@@ -49,42 +51,42 @@ export {
   q as CompassIcon,
   X as Copy,
   Z as CopyCheck,
-  Q as CopyCheckIcon,
-  j as CopyIcon,
-  J as Cpu,
-  N as CreditCardIcon,
+  N as CopyCheckIcon,
+  Q as CopyIcon,
+  j as Cpu,
+  J as CreditCardIcon,
   Y as Database,
   _ as DatabaseIcon,
-  $n as DockActivity,
-  oc as DockBot,
-  ec as DockCode,
-  nc as DockCpu,
-  cc as DockFileCode,
-  rc as DockFolder,
-  ac as DockGlobe,
-  Ic as DockLayers,
-  ic as DockLayoutDashboard,
-  lc as DockMessageSquare,
-  tc as DockRegion,
-  sc as DockSearch,
-  dc as DockSparkles,
-  Cc as DockTerminal,
-  hc as DockText,
+  tc as DockActivity,
+  sc as DockBot,
+  dc as DockCode,
+  hc as DockCpu,
+  Cc as DockFileCode,
+  kc as DockFolder,
+  pc as DockGlobe,
+  uc as DockLayers,
+  Sc as DockLayoutDashboard,
+  gc as DockMessageSquare,
+  Dc as DockRegion,
+  Pc as DockSearch,
+  fc as DockSparkles,
+  mc as DockTerminal,
+  yc as DockText,
   $ as DollarIcon,
   oo as Download,
   eo as DownloadIcon,
   no as EditIcon,
   co as ErrorIcon,
-  Xn as ExitFullscreen,
+  ec as ExitFullscreen,
   ro as ExternalLink,
   ao as Eye,
-  Io as EyeIcon,
-  io as EyeOff,
-  lo as FileCode,
+  io as EyeIcon,
+  lo as EyeOff,
+  Io as FileCode,
   to as FilePlus,
   so as FilePlusIcon,
-  Co as FileText,
-  ho as Files,
+  ho as FileText,
+  Co as Files,
   ko as Filter,
   po as FilterIcon,
   uo as FireIcon,
@@ -92,38 +94,38 @@ export {
   go as FolderOpen,
   Do as FolderPlus,
   Po as FolderPlusIcon,
-  Zn as Fullscreen,
+  nc as Fullscreen,
   fo as GiftIcon,
   mo as GitBranch,
   yo as GitBranchIcon,
   Mo as Globe,
   To as GlobeIcon,
   Fo as Grid,
-  wo as Grid3x3,
-  Lo as GripVertical,
-  Ao as Hash,
-  Bo as HeadphonesIcon,
-  bo as Heart,
-  vo as HeartIcon,
-  Ho as HelpIcon,
-  Uo as Highlighter,
-  xo as History,
-  Go as Home,
-  Ro as HomeIcon,
+  Ro as Grid3x3,
+  wo as GripVertical,
+  Lo as Hash,
+  Ao as HeadphonesIcon,
+  vo as Heart,
+  Bo as HeartIcon,
+  bo as HelpIcon,
+  xo as Highlighter,
+  Ho as History,
+  Uo as Home,
+  Go as HomeIcon,
   Eo as Image,
   Vo as ImageIcon,
   Oo as Info,
   Wo as InfoIcon,
   zo as Key,
   Ko as KeyIcon,
-  Qn as Keyboard,
+  cc as Keyboard,
   qo as Layers,
   Xo as LayersIcon,
   Zo as LayoutDashboard,
-  Qo as Link,
-  jo as LinkIcon,
-  Jo as Loader2,
-  No as LoadingIcon,
+  No as Link,
+  Qo as LinkIcon,
+  jo as Loader2,
+  Jo as LoadingIcon,
   Yo as Lock,
   _o as LockIcon,
   $o as MagicIcon,
@@ -133,15 +135,15 @@ export {
   ce as Maximize,
   re as Menu,
   ae as MessageIcon,
-  Ie as MessageSquare,
-  ie as Mic,
-  le as MicIcon,
+  ie as MessageSquare,
+  le as Mic,
+  Ie as MicIcon,
   te as MicOff,
   se as Minus,
   de as MinusIcon,
-  jn as Monitor,
-  Ce as MonitorPointer,
-  he as Moon,
+  rc as Monitor,
+  he as MonitorPointer,
+  Ce as Moon,
   ke as MoonIcon,
   pe as MoreHorizontal,
   ue as MoreVertical,
@@ -155,48 +157,56 @@ export {
   Me as PauseIcon,
   Te as Pencil,
   Fe as Phone,
-  we as PieChart,
-  Le as Pin,
-  Ae as PinIcon,
-  Be as Play,
-  be as PlayIcon,
-  ve as Plus,
-  He as PlusIcon,
-  Ue as PowerIcon,
-  xe as PrinterIcon,
-  Ge as Quote,
-  Re as Refresh,
+  Re as PieChart,
+  we as Pin,
+  Le as PinIcon,
+  Ae as Play,
+  ve as PlayIcon,
+  Be as Plus,
+  be as PlusIcon,
+  xe as PowerIcon,
+  He as PrinterIcon,
+  Ue as Quote,
+  qn as RailChat,
+  Xn as RailDesignTokens,
+  Zn as RailFiles,
+  Nn as RailLaunchpad,
+  Qn as RailNotes,
+  jn as RailSearch,
+  Jn as RailSettings,
+  Yn as RailShowcase,
+  Ge as Refresh,
   Ee as RefreshIcon,
   Ve as Region,
   Oe as Restore,
   We as RocketIcon,
   ze as Save,
   Ke as SaveIcon,
-  Jn as Scan,
+  ac as Scan,
   qe as Search,
   Xe as SearchIcon,
   Ze as Send,
-  Qe as SendIcon,
-  je as Settings,
-  Je as SettingsIcon,
-  Ne as ShareIcon,
+  Ne as SendIcon,
+  Qe as Settings,
+  je as SettingsIcon,
+  Je as ShareIcon,
   Ye as Shield,
   _e as ShieldCheck,
   $e as ShieldIcon,
-  Nn as SlidersHorizontal,
+  ic as SlidersHorizontal,
   on as SparkleIcon,
   en as Sparkles,
   nn as Star,
   cn as StarIcon,
   rn as Stop,
   an as StopFilled,
-  In as SuccessIcon,
-  ln as Sun,
+  ln as SuccessIcon,
+  In as Sun,
   tn as SunIcon,
   sn as Tag,
   dn as TagIcon,
-  Cn as TargetIcon,
-  hn as Terminal,
+  hn as TargetIcon,
+  Cn as Terminal,
   kn as TerminalIcon,
   pn as TextTool,
   un as ThumbsDownIcon,
@@ -207,21 +217,21 @@ export {
   fn as TrendingDown,
   mn as TrendingUp,
   yn as Unlock,
-  Yn as Unplug,
+  lc as Unplug,
   Mn as Upload,
   Tn as UploadIcon,
   Fn as User,
-  wn as UserIcon,
-  Ln as Video,
-  An as VideoIcon,
-  Bn as Volume,
-  bn as VolumeIcon,
-  vn as VolumeOff,
-  Hn as Wand,
-  Un as WarningIcon,
-  xn as WifiIcon,
-  Gn as WifiOffIcon,
-  Rn as Workflow,
+  Rn as UserIcon,
+  wn as Video,
+  Ln as VideoIcon,
+  An as Volume,
+  vn as VolumeIcon,
+  Bn as VolumeOff,
+  bn as Wand,
+  xn as WarningIcon,
+  Hn as WifiIcon,
+  Un as WifiOffIcon,
+  Gn as Workflow,
   En as X,
   Vn as XCircle,
   On as Zap,

package/dist/language.css

@@ -0,0 +1,320 @@
+/*
+ * Floe visual language — the single source of truth for planes, ink, state and
+ * elevation. Every component recipe derives from this file; nothing here is a
+ * component. A theme only supplies the six base colors, and the rest of the
+ * ladder is derived from them, so every preset inherits the same system.
+ *
+ * Four ideas carry the whole language:
+ *
+ * 1. Depth is a fill step, not a line. Planes separate by a few percent of ink;
+ *    a hairline appears only where two planes would otherwise land on the same
+ *    value. Cards therefore carry no border at rest.
+ * 2. One state ramp. Hover, press and selection are all percentages of ink —
+ *    the same three alphas everywhere, so a row, a tab and a menu item respond
+ *    with one gesture. Brand color never means "hovered".
+ * 3. Corners are concentric. A child radius is its parent's radius minus the
+ *    gap between them, so nested groups never show a mismatched curve.
+ * 4. Motion is decisive. Short, decelerating, color-and-transform only.
+ */
+
+:root,
+[data-floe-theme] {
+  /* ---------------------------------------------------------------------
+   * Planes — four steps of depth. `plane` is the page ground, `surface` is a
+   * content plane sitting on it, `well` is recessed into a surface (fields,
+   * code, rails, track backgrounds), `float` is lifted above everything with
+   * a real shadow. Values are derived so a preset only has to pick its canvas.
+   * ------------------------------------------------------------------- */
+  --floe-plane: var(--background);
+  --floe-plane-raised: var(--card);
+  --floe-plane-float: var(--popover);
+  --floe-well: color-mix(in srgb, var(--foreground) 4.5%, var(--card));
+  --floe-well-strong: color-mix(in srgb, var(--foreground) 7%, var(--card));
+  --floe-well-on-plane: color-mix(in srgb, var(--foreground) 4%, var(--background));
+
+  /* ---------------------------------------------------------------------
+   * Ink — a four-step reading ramp. `ink` is body, `ink-soft` secondary copy,
+   * `ink-quiet` metadata and icons that sit outside the reading path,
+   * `ink-ghost` placeholders and disabled. Never invent a fifth grey.
+   * ------------------------------------------------------------------- */
+  --floe-ink: var(--foreground);
+  --floe-ink-soft: var(--muted-foreground);
+  --floe-ink-quiet: color-mix(in srgb, var(--foreground) 62%, var(--background));
+  --floe-ink-ghost: color-mix(in srgb, var(--foreground) 44%, var(--background));
+
+  /* ---------------------------------------------------------------------
+   * Hairlines — one width (1px), three strengths. `line` separates equal-value
+   * planes, `line-strong` marks an editable boundary that must stay findable,
+   * `line-quiet` is a divider inside dense content.
+   * ------------------------------------------------------------------- */
+  --floe-line: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --floe-line-strong: color-mix(in srgb, var(--foreground) 18%, transparent);
+  --floe-line-quiet: color-mix(in srgb, var(--foreground) 5.5%, transparent);
+  --floe-line-inverse: color-mix(in srgb, var(--primary-foreground) 16%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Fields — a well with a whisper of an edge. The fill (not a line) says
+   * "you can type here"; the edge exists so the well has a boundary at all,
+   * and it brightens on hover, then more on focus.
+   *
+   * The edge is calibrated against the field's own fill, not the card, since
+   * that is the pair that decides whether a boundary is visible. 22% ink is
+   * the lowest value where every preset lands inside the quiet band this
+   * repository already uses for idle fields (1.25–2:1, set for porcelain-dark
+   * in b80c3e8): it measures 1.26 at the narrowest (solarized-light) and 1.76
+   * at the widest (forest). 16% left ten presets below 1.25, and in the dark
+   * presets it collapsed onto the fill entirely.
+   *
+   * The resting edge is deliberately below the 3:1 of a hit-area boundary:
+   * the well fill, the visible label and the field's own text identify the
+   * control, and `--ring` carries the 3:1 focus boundary. A labelled text
+   * field is what WCAG 1.4.11 excepts; the check that guards this file
+   * enforces the band rather than letting the edge disappear.
+   * ------------------------------------------------------------------- */
+  --floe-field-fill: var(--floe-well);
+  --floe-field-fill-hover: var(--floe-well-strong);
+  --floe-field-edge: color-mix(in srgb, var(--foreground) 22%, var(--card));
+  --floe-field-edge-hover: color-mix(in srgb, var(--foreground) 32%, var(--card));
+  --floe-field-placeholder: color-mix(in srgb, var(--foreground) 42%, var(--background));
+  /* An unchecked box or switch has no fill of its own, so its boundary *is*
+  * the control and must clear 3:1 against every plane it can sit on. */
+  --floe-control-edge: color-mix(in srgb, var(--foreground) 50%, var(--card));
+  --floe-control-edge-hover: color-mix(in srgb, var(--foreground) 66%, var(--card));
+
+  /* ---------------------------------------------------------------------
+   * State — the only hover/press/selection values in the system. They are
+   * translucent so they compose over any plane without a second palette.
+   * ------------------------------------------------------------------- */
+  --floe-state-hover: color-mix(in srgb, var(--foreground) 5.5%, transparent);
+  --floe-state-press: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --floe-state-selected: color-mix(in srgb, var(--primary) 8%, transparent);
+  --floe-state-selected-strong: color-mix(in srgb, var(--primary) 12%, transparent);
+  --floe-state-on-inverse-hover: color-mix(in srgb, var(--primary-foreground) 12%, transparent);
+
+  /* Accent — jade is the one chromatic voice: focus, selection and positive
+   * emphasis. It is never used for a resting surface. */
+  --floe-accent-ink: var(--ring);
+  --floe-accent-soft: color-mix(in srgb, var(--ring) 12%, transparent);
+  --floe-accent-line: color-mix(in srgb, var(--ring) 34%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Elevation — three steps, used sparingly. Resting cards get `none`; the
+   * hairline + fill step already separate them. `raised` is for interactive
+   * cards on hover, `float` for popovers, menus, dialogs and windows.
+   * ------------------------------------------------------------------- */
+  --floe-elevation-raised:
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent),
+    0 1px 1px -0.5px color-mix(in srgb, #000 5%, transparent);
+  --floe-elevation-float:
+    0 12px 32px -8px color-mix(in srgb, #000 18%, transparent),
+    0 4px 10px -4px color-mix(in srgb, #000 10%, transparent),
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent);
+  --floe-elevation-float-strong:
+    0 24px 56px -12px color-mix(in srgb, #000 26%, transparent),
+    0 8px 20px -8px color-mix(in srgb, #000 14%, transparent),
+    0 1px 2px -1px color-mix(in srgb, #000 8%, transparent);
+
+  /* ---------------------------------------------------------------------
+   * Shape — concentric ladder. sm 6 · md 8 · control 10 · group 12 ·
+   * card 16 · panel 20 · float 20. A 10px control inside a 16px card with
+   * 8px padding lands on 8px, which is md: the curve stays parallel.
+   * ------------------------------------------------------------------- */
+  --floe-radius-xs: 0.25rem;
+  --floe-radius-sm: 0.375rem;
+  --floe-radius-md: 0.5rem;
+  --floe-radius-control: 0.625rem;
+  --floe-radius-field: 0.625rem;
+  --floe-radius-group: 0.75rem;
+  --floe-radius-card: 1rem;
+  --floe-radius-panel: 1.25rem;
+  --floe-radius-floating: 1.25rem;
+
+  /* ---------------------------------------------------------------------
+   * Density — one control scale, one row scale. sm 28 · md 32 · lg 36.
+   * Rows sit at 30 so a list of rows reads calmer than a toolbar.
+   * ------------------------------------------------------------------- */
+  --floe-control-height-xs: 1.5rem;
+  --floe-control-height-sm: 1.75rem;
+  --floe-control-height-md: 2rem;
+  --floe-control-height-lg: 2.25rem;
+  --floe-control-padding-sm: 0.5rem;
+  --floe-control-padding-md: 0.625rem;
+  --floe-control-padding-lg: 0.875rem;
+  --floe-row-height: 1.875rem;
+  --floe-row-height-compact: 1.625rem;
+
+  /* ---------------------------------------------------------------------
+   * Box rhythm — five paddings and three gaps. A control pad keeps a 10px
+   * radius concentric inside a 12px group; a card pad is the gutter that
+   * makes a plane read as an object rather than a rectangle.
+   * ------------------------------------------------------------------- */
+  --floe-pad-tight: 0.375rem;
+  --floe-pad-control: 0.5rem;
+  --floe-pad-group: 0.75rem;
+  --floe-pad-card: 0.875rem;
+  --floe-pad-panel: 1rem;
+  --floe-gap-inline: 0.25rem;
+  --floe-gap-control: 0.375rem;
+  --floe-gap-group: 0.75rem;
+  --floe-gap-section: 1.25rem;
+
+  /* ---------------------------------------------------------------------
+   * Type — 11 caption · 12 supporting · 13 control and body · 16 heading.
+   * One step per role; no component picks its own size.
+   * ------------------------------------------------------------------- */
+  --floe-type-caption: 0.6875rem;
+  --floe-type-supporting: 0.75rem;
+  --floe-type-control: 0.8125rem;
+  --floe-type-body: 0.8125rem;
+  --floe-type-heading: 1rem;
+  --floe-type-heading-sm: 0.9375rem;
+  --floe-type-display: 1.375rem;
+  /* Below caption. Only decorative chips that must fit inside an 8-10px
+   * badge belong here — never running text, metadata or a control label. */
+  --floe-type-micro: 0.5rem;
+  --floe-type-nano: 0.4375rem;
+  --floe-line-caption: 0.9375rem;
+  --floe-line-control: 1.25rem;
+  --floe-line-body: 1.375rem;
+  --floe-line-heading: 1.375rem;
+
+  /* ---------------------------------------------------------------------
+   * Motion — one decelerating curve and one settle curve. Nothing bounces
+   * except a deliberate spring for a control that changes shape.
+   * ------------------------------------------------------------------- */
+  --floe-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --floe-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --floe-ease-spring: cubic-bezier(0.34, 1.35, 0.64, 1);
+  --floe-duration-instant: 90ms;
+  --floe-duration-fast: 140ms;
+  --floe-duration-base: 200ms;
+  --floe-duration-slow: 280ms;
+  --floe-duration-float: 240ms;
+  --floe-hover-lift: -1px;
+  --floe-press-scale: 0.985;
+  --floe-hover-lift-strong: -2px;
+}
+
+/*
+ * The interaction primitives. Components compose these instead of writing
+ * their own hover recipes, which is what kept the old set inconsistent.
+ */
+
+/* Every interactive surface moves through the same transition set. */
+[data-floe-interactive] {
+  transition:
+    background-color var(--floe-duration-fast) var(--floe-ease-out),
+    border-color var(--floe-duration-fast) var(--floe-ease-out),
+    color var(--floe-duration-fast) var(--floe-ease-out),
+    box-shadow var(--floe-duration-base) var(--floe-ease-out),
+    transform var(--floe-duration-fast) var(--floe-ease-out);
+}
+
+/* Rows, tabs, menu items: fill is transparent, so the state layer composes
+ * over whatever plane hosts them. A control that declares a surface part owns
+ * its own face (surface.css) and keeps the state layer off its fill, so a
+ * selected tab is not repainted by the generic selection tint. */
+[data-floe-interactive]:where(
+    [data-floe-interactive='row'],
+    [data-floe-interactive='item']
+  ):not([data-floe-surface-part]):hover {
+  background-color: var(--floe-state-hover);
+  color: var(--floe-ink);
+}
+
+[data-floe-interactive]:where(
+    [data-floe-interactive='row'],
+    [data-floe-interactive='item']
+  ):not([data-floe-surface-part]):active {
+  background-color: var(--floe-state-press);
+}
+
+[data-floe-interactive]:not([data-floe-surface-part]):where(
+    [aria-selected='true'],
+    [data-selected='true']
+  ) {
+  background-color: var(--floe-state-selected);
+  color: var(--floe-ink);
+}
+
+/* Icon buttons rise a single step of ink on hover, in addition to the fill. */
+[data-floe-interactive='icon']:hover {
+  color: var(--floe-ink);
+}
+
+/* Pressible controls settle rather than travel. */
+[data-floe-interactive='press']:active {
+  transform: scale(var(--floe-press-scale));
+}
+
+/* Clickable planes rise one step and take the first elevation. A card is not a
+ * control: it travels instead of settling, and the shadow says it detached from
+ * the canvas rather than competing with the fill step. */
+[data-floe-interactive='lift']:hover {
+  transform: translateY(var(--floe-hover-lift));
+  box-shadow: var(--floe-elevation-raised);
+}
+
+/*
+ * The field surface. One recipe for every editable boundary — text inputs,
+ * textareas, compound number/select fields, dropdown triggers and directory
+ * pickers — so a form never mixes two field looks. It is a filled well with a
+ * whisper edge, not a box: the fill carries the affordance, the edge only
+ * gives the well an end, and focus brightens the edge (see input-focus.css,
+ * which owns the color-only focus contract).
+ */
+@layer components {
+  .floe-field {
+    border: 1px solid var(--floe-field-edge);
+    border-radius: var(--floe-radius-field);
+    background-color: var(--floe-field-fill);
+    color: var(--floe-ink);
+    transition:
+      background-color var(--floe-duration-fast) var(--floe-ease-out),
+      border-color var(--floe-duration-fast) var(--floe-ease-out);
+  }
+
+  .floe-field:hover:not(:disabled):not([aria-disabled='true']) {
+    border-color: var(--floe-field-edge-hover);
+  }
+
+  .floe-field::placeholder {
+    color: var(--floe-field-placeholder);
+    opacity: 1;
+  }
+
+  .floe-field[aria-invalid='true'] {
+    border-color: color-mix(in srgb, var(--error) 62%, var(--card));
+  }
+
+  .floe-field:disabled,
+  .floe-field[aria-disabled='true'] {
+    background-color: var(--floe-plane);
+    border-color: var(--floe-line);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-floe-interactive] {
+    transition-duration: 1ms;
+  }
+  [data-floe-interactive='press']:active {
+    transform: none;
+  }
+  [data-floe-interactive='lift']:hover {
+    transform: none;
+    box-shadow: none;
+  }
+}
+
+@media (forced-colors: active) {
+  :root,
+  [data-floe-theme] {
+    --floe-line: CanvasText;
+    --floe-line-strong: CanvasText;
+    --floe-state-hover: Highlight;
+    --floe-state-selected: Highlight;
+    --floe-elevation-float: none;
+    --floe-elevation-float-strong: none;
+  }
+}