@duro-app/tokens 5.9.0 → 5.11.0

package/dist/index.js

@@ -48,6 +48,7 @@ const e = {
   inverseBorder: "var(--inverseBorder-x1x0j0at)",
   inverseBorderHover: "var(--inverseBorderHover-x12x46ev)",
   fixedLight: "var(--fixedLight-xd608fw)",
+  fixedDark: "var(--fixedDark-xy1v4hq)",
   overlayLight: "var(--overlayLight-x71omwc)",
   contrastSurface: "var(--contrastSurface-x1i512m4)",
   onContrastSurface: "var(--onContrastSurface-x1dm0pi1)",
@@ -103,6 +104,10 @@ const e = {
   iconLg: "var(--iconLg-x1lsumnr)",
   iconXl: "var(--iconXl-x7w40q9)",
   iconXxl: "var(--iconXxl-xij55jf)",
+  thumbSm: "var(--thumbSm-x1t1g9ky)",
+  mediaTileMinW: "var(--mediaTileMinW-x1pavouy)",
+  glyphClampMax: "var(--glyphClampMax-x3c2ety)",
+  timeReadoutW: "var(--timeReadoutW-x4630c6)",
   navMarkerW: "var(--navMarkerW-x1swbkx4)",
   navMarkerH: "var(--navMarkerH-xlc6r7a)",
   divider: "var(--divider-x34oj7m)",
@@ -162,6 +167,8 @@ const e = {
   dayHeaderH: "var(--dayHeaderH-x1j7gty0)",
   timelineLabelW: "var(--timelineLabelW-xx6mz1f)",
   appBarH: "var(--appBarH-x12xs6hi)",
+  dragThumbW: "var(--dragThumbW-x1bz26bx)",
+  dragThumbH: "var(--dragThumbH-xbt2de9)",
   __varGroupHash__: "x1w57kmz"
 }, x = {
   hairline: "var(--hairline-xomm6fc)",
@@ -365,7 +372,7 @@ const e = {
   dropReady: "var(--dropReady-x19ev27m)",
   dropOver: "var(--dropOver-x1w3k9ro)",
   __varGroupHash__: "x13v825q"
-}, f = {
+}, d = {
   instant: "var(--instant-x3tclo2)",
   minimal: "var(--minimal-x39oeki)",
   quick: "var(--quick-xmb6uht)",
@@ -374,20 +381,20 @@ const e = {
   base: "var(--base-x13vs74m)",
   slow: "var(--slow-xtti36c)",
   __varGroupHash__: "x8wiu4o"
-}, d = {
+}, f = {
   standard: "var(--standard-xg4ngex)",
   linear: "var(--linear-x13iskbu)",
   easeOut: "var(--easeOut-x1dtgzac)",
   easeIn: "var(--easeIn-xxaysck)",
   __varGroupHash__: "x1unb8zz"
 }, k = {
-  xjvd03b: "x27mww3 xjvd03b",
+  xjvd03b: "x14i52nv xjvd03b",
   $$css: !0
-}, S = {
+}, m = {
   x13v825q: "x1jk1o70 x13v825q",
   $$css: !0
-}, m = {
-  xjvd03b: "x1kpt2hd xjvd03b",
+}, S = {
+  xjvd03b: "xorrbe1 xjvd03b",
   $$css: !0
 }, u = {
   x13v825q: "xc8o4hb x13v825q",
@@ -398,14 +405,14 @@ export {
   e as breakpoints,
   r as breakpointsPx,
   a as colors,
-  f as duration,
-  d as easing,
+  d as duration,
+  f as easing,
   v as effects,
   u as highContrastShadows,
-  m as highContrastTheme,
+  S as highContrastTheme,
   s as layers,
   l as layoutSpacing,
-  S as lightShadows,
+  m as lightShadows,
   k as lightTheme,
   i as microSpacing,
   n as radii,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layers.css.ts","../src/tokens/effects.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n  px1: '1px',\n  px2: '2px',\n  px3: '3px',\n  px5: '5px',\n  px6: '6px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  px6: '6px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n  touchTarget: '44px',\n  controlSm: '28px',\n  controlMd: '39px',\n  controlLg: '40px',\n  indicator: '18px',\n  indicatorDot: '8px',\n  checkMarkW: '5px',\n  checkMarkH: '9px',\n  switchTrackW: '36px',\n  switchTrackH: '20px',\n  switchThumb: '16px',\n  iconButton: '32px',\n  iconButtonSm: '28px',\n  spinnerSm: '16px',\n  spinnerMd: '24px',\n  spinnerLg: '40px',\n  glyphXs: '10px',\n  glyphSm: '12px',\n  glyphMd: '16px',\n  iconSm: '16px',\n  iconMd: '18px',\n  iconLg: '24px',\n  iconXl: '36px',\n  iconXxl: '48px',\n  navMarkerW: '3px',\n  navMarkerH: '18px',\n  divider: '1px',\n  tabIndicator: '2px',\n  edgeFade: '32px',\n  scrollbar: '8px',\n  swatchW: '44px',\n  swatchH: '34px',\n  labelMinW: '120px',\n  popupMinW: '160px',\n  listMaxH: '280px',\n  listMaxHSm: '200px',\n  dialogSm: '400px',\n  dialogMd: '520px',\n  dialogLg: '680px',\n  panelSm: '360px',\n  panelMd: '480px',\n  panelLg: '640px',\n  toastMaxW: '440px',\n  gridColSm: '240px',\n  gridColMd: '280px',\n  pageSm: '600px',\n  pageMd: '800px',\n  pageLg: '1200px',\n  sidebarW: '240px',\n  pageXs: '480px',\n  pageXl: '1440px',\n  asideW: '320px',\n  gridColXs: '200px',\n  fieldMinWSm: '80px',\n  fieldMinW: '160px',\n  popoverWSm: '240px',\n  popoverW: '320px',\n  popupMaxW: '280px',\n  meterH: '6px',\n  skeletonChipW: '96px',\n  dropZoneMinH: '128px',\n  canvasMinH: '480px',\n  editorMinH: '160px',\n  toolbarH: '36px',\n  embedW: '550px',\n  colorPickerW: '196px',\n  colorAreaH: '150px',\n  colorTrackH: '12px',\n  colorSwatch: '20px',\n  colorPreviewH: '22px',\n  handle: '16px',\n  chip: '24px',\n  placeholderMinH: '80px',\n  previewMaxH: '320px',\n  barH: '4px',\n  readoutW: '40px',\n  sliderW: '96px',\n  paletteMinW: '96px',\n  deviceBarW: '96px',\n  // Calendar grids: the time-label column and the day-header row.\n  timeGutterW: '64px',\n  dayHeaderH: '46px',\n  // Timeline: the row-label column beside the date track.\n  timelineLabelW: '180px',\n  // AppShell's bar below its collapse point: a touch-target Menu button\n  // between spacing.sm above and below, plus the hairline under it.\n  appBarH: '61px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n  hairline: '1px',\n  strong: '2px',\n  accent: '3px',\n  focusRing: '2px',\n  focusOffset: '2px',\n  focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n  // A focused or sticky part above its siblings (a joined group's focus ring,\n  // a scrollbar, a sticky table header).\n  raised: '1',\n  // Floating chrome over the page: Tooltip, ActionBar.\n  floating: '50',\n  // A floating surface that must cover another floating one, outside a modal:\n  // a link editor over a selection format bar. Pair it with `popoverRaised`\n  // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n  // sibling floating surface, never a modal.\n  floatingRaised: '60',\n  // A modal's backdrop.\n  overlay: '1000',\n  // A modal's panel (Dialog, Drawer).\n  modal: '1001',\n  // Chrome that sits on a modal-level surface, above that surface's own\n  // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n  modalRaised: '1002',\n  // A Popover inside a Dialog or Drawer: above that modal, below the popups\n  // (a Select, a Menu) and the Select click-catcher opened from inside it.\n  // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n  popover: '1040',\n  // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n  // a popup's click-catcher and the popup itself.\n  popoverRaised: '1041',\n  // A popup's click-catcher, under the popup itself.\n  popupBackdrop: '1049',\n  // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n  popup: '1050',\n  // The toast region: above popups and modals.\n  toast: '1060',\n  // The ThemeProvider portal mount that holds all of the above.\n  portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n  // DragDrop's drop-target rings: borders.hairline in colors.border on every\n  // zone that can receive, borders.strong in colors.accent on the one under the\n  // pointer. Literal per theme (StyleX needs inline literals); the drift check\n  // rebuilds each from the palette. Not focus: focus stays on outlines.\n  dropReady: 'inset 0 0 0 1px #333333',\n  dropOver: 'inset 0 0 0 2px #6aaffc',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n *   two other values components used; `minimal` is the 1ms reduced-motion\n *   duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *   `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  // Non-zero so animationend still fires under reduced motion.\n  minimal: '1ms',\n  quick: '120ms',\n  fast: '150ms',\n  brisk: '160ms',\n  base: '200ms',\n  slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  linear: 'linear',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n  dropReady: 'inset 0 0 0 1px #d4d4d4',\n  dropOver: 'inset 0 0 0 2px #1e40af',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n  dropReady: 'inset 0 0 0 1px #555555',\n  dropOver: 'inset 0 0 0 2px #60a5fa',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/tokens/breakpoints.css.ts","../src/tokens/colors.css.ts","../src/tokens/spacing.css.ts","../src/tokens/sizes.css.ts","../src/tokens/borders.css.ts","../src/tokens/layers.css.ts","../src/tokens/effects.css.ts","../src/tokens/layout-spacing.css.ts","../src/tokens/typography.css.ts","../src/tokens/type-presets.css.ts","../src/tokens/shadows.css.ts","../src/tokens/motion.css.ts","../src/themes/light.css.ts","../src/themes/high-contrast.css.ts"],"sourcesContent":["import {css} from 'react-strict-dom'\n\n// Breakpoint scale — the widths at which responsive layouts change.\n//\n// These use `css.defineConsts` rather than `css.defineVars` because CSS media\n// and container queries cannot read custom properties: a query threshold has\n// to be a literal. `defineConsts` values are inlined into the query text at\n// build time by the StyleX babel plugin (that's their whole reason to exist),\n// so `@container (max-width: ${breakpoints.sm})` compiles to a real `640px`.\n//\n// For runtime JS comparisons (`containerWidth < breakpointsPx.sm`) use the\n// plain-number mirror below — defineConsts values are query strings, not\n// numbers. Keep the two in sync. Values follow the common Tailwind-aligned scale.\nexport const breakpoints = css.defineConsts({\n  /** Phones — dense tables card up below here. */\n  xs: '480px',\n  /** Large phone / small tablet. The default \"go to the mobile layout\" line. */\n  sm: '640px',\n  /** Tablet portrait. */\n  md: '768px',\n  /** Tablet landscape / small laptop. */\n  lg: '1024px',\n  /** Desktop. */\n  xl: '1280px',\n})\n\nexport const breakpointsPx = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n} as const\n\nexport type Breakpoint = keyof typeof breakpointsPx\n","import {css} from 'react-strict-dom'\n\nexport const colors = css.defineVars({\n  // Backgrounds\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n\n  // Text\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n\n  // Accent\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n\n  // Border\n  border: '#333333',\n\n  // Semantic — Error\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n\n  // Semantic — Success\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n\n  // Semantic — Warning\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n\n  // Semantic — Info (uses accent)\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  // The fixed black, the same in every theme (video letterbox).\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const spacing = css.defineVars({\n  xs: '4px',\n  sm: '8px',\n  ms: '12px',\n  md: '16px',\n  lg: '24px',\n  xl: '32px',\n  xxl: '48px',\n  xxxl: '64px',\n})\n\n// Optical micro-steps below and between the spacing scale: a 1-6px nudge that\n// aligns a glyph or tightens a dense control. Not a layout choice, so not part\n// of SpacingToken (no `gap=\"px2\"`); prefer the scale.\nexport const microSpacing = css.defineVars({\n  px1: '1px',\n  px2: '2px',\n  px3: '3px',\n  px5: '5px',\n  px6: '6px',\n})\n\nexport const radii = css.defineVars({\n  xs: '4px',\n  px6: '6px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  full: '9999px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const sizes = css.defineVars({\n  touchTarget: '44px',\n  controlSm: '28px',\n  controlMd: '39px',\n  controlLg: '40px',\n  indicator: '18px',\n  indicatorDot: '8px',\n  checkMarkW: '5px',\n  checkMarkH: '9px',\n  switchTrackW: '36px',\n  switchTrackH: '20px',\n  switchThumb: '16px',\n  iconButton: '32px',\n  iconButtonSm: '28px',\n  spinnerSm: '16px',\n  spinnerMd: '24px',\n  spinnerLg: '40px',\n  glyphXs: '10px',\n  glyphSm: '12px',\n  glyphMd: '16px',\n  iconSm: '16px',\n  iconMd: '18px',\n  iconLg: '24px',\n  iconXl: '36px',\n  iconXxl: '48px',\n  // A small square thumbnail (a file/media row preview).\n  thumbSm: '40px',\n  // Minimum width of a media grid tile.\n  mediaTileMinW: '108px',\n  // Upper bound a glyph scales up to inside its tile.\n  glyphClampMax: '160px',\n  // Width of a mm:ss time readout, so digits do not shift the layout.\n  timeReadoutW: '74px',\n  navMarkerW: '3px',\n  navMarkerH: '18px',\n  divider: '1px',\n  tabIndicator: '2px',\n  edgeFade: '32px',\n  scrollbar: '8px',\n  swatchW: '44px',\n  swatchH: '34px',\n  labelMinW: '120px',\n  popupMinW: '160px',\n  listMaxH: '280px',\n  listMaxHSm: '200px',\n  dialogSm: '400px',\n  dialogMd: '520px',\n  dialogLg: '680px',\n  panelSm: '360px',\n  panelMd: '480px',\n  panelLg: '640px',\n  toastMaxW: '440px',\n  gridColSm: '240px',\n  gridColMd: '280px',\n  pageSm: '600px',\n  pageMd: '800px',\n  pageLg: '1200px',\n  sidebarW: '240px',\n  pageXs: '480px',\n  pageXl: '1440px',\n  asideW: '320px',\n  gridColXs: '200px',\n  fieldMinWSm: '80px',\n  fieldMinW: '160px',\n  popoverWSm: '240px',\n  popoverW: '320px',\n  popupMaxW: '280px',\n  meterH: '6px',\n  skeletonChipW: '96px',\n  dropZoneMinH: '128px',\n  canvasMinH: '480px',\n  editorMinH: '160px',\n  toolbarH: '36px',\n  embedW: '550px',\n  colorPickerW: '196px',\n  colorAreaH: '150px',\n  colorTrackH: '12px',\n  colorSwatch: '20px',\n  colorPreviewH: '22px',\n  handle: '16px',\n  chip: '24px',\n  placeholderMinH: '80px',\n  previewMaxH: '320px',\n  barH: '4px',\n  readoutW: '40px',\n  sliderW: '96px',\n  paletteMinW: '96px',\n  deviceBarW: '96px',\n  // Calendar grids: the time-label column and the day-header row.\n  timeGutterW: '64px',\n  dayHeaderH: '46px',\n  // Timeline: the row-label column beside the date track.\n  timelineLabelW: '180px',\n  // AppShell's bar below its collapse point: a touch-target Menu button\n  // between spacing.sm above and below, plus the hairline under it.\n  appBarH: '61px',\n  // Drag-ghost thumbnail: the small preview image that follows the pointer.\n  dragThumbW: '132px',\n  dragThumbH: '99px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const borders = css.defineVars({\n  hairline: '1px',\n  strong: '2px',\n  accent: '3px',\n  focusRing: '2px',\n  focusOffset: '2px',\n  focusOffsetSm: '1px',\n})\n","import {css} from 'react-strict-dom'\nimport type {LayerToken} from '../keys'\n\n// The z-index scale. Values are unitless strings so `--duro-layer-*` exists\n// for plain CSS; React Native takes a number, so a native overlay reads the\n// numeric LAYERS map from `@duro-app/tokens/keys` instead.\n//\n// They only compete inside one stacking context. Dialog, Drawer, the popups\n// and the toast region all portal into the ThemeProvider mount (`portal`),\n// and this is the order they keep there.\n// StyleX types a var by its literal, so string values would type every layer\n// as a string, which `zIndex` (a number) refuses. Typing the literals as CSS\n// integers makes `zIndex: layers.popup` a number to TypeScript; the cast has\n// no runtime effect (StyleX and the drift check read straight through it).\ntype LayerValue = ReturnType<typeof css.types.integer<number>>\n\nexport const layers = css.defineVars({\n  // A focused or sticky part above its siblings (a joined group's focus ring,\n  // a scrollbar, a sticky table header).\n  raised: '1',\n  // Floating chrome over the page: Tooltip, ActionBar.\n  floating: '50',\n  // A floating surface that must cover another floating one, outside a modal:\n  // a link editor over a selection format bar. Pair it with `popoverRaised`\n  // and pick by `useInModal()` (a Popover does it with `raised`). It covers a\n  // sibling floating surface, never a modal.\n  floatingRaised: '60',\n  // A modal's backdrop.\n  overlay: '1000',\n  // A modal's panel (Dialog, Drawer).\n  modal: '1001',\n  // Chrome that sits on a modal-level surface, above that surface's own\n  // parts: a sheet's toolbar over its bottom bar. Still below a Popover.\n  modalRaised: '1002',\n  // A Popover inside a Dialog or Drawer: above that modal, below the popups\n  // (a Select, a Menu) and the Select click-catcher opened from inside it.\n  // Outside a modal a Popover is `floating`, so a modal opened later covers it.\n  popover: '1040',\n  // `floatingRaised` inside a Dialog or Drawer: over a Popover there, under\n  // a popup's click-catcher and the popup itself.\n  popoverRaised: '1041',\n  // A popup's click-catcher, under the popup itself.\n  popupBackdrop: '1049',\n  // Popups: Select, Listbox, Menu — above a modal or Popover they open from.\n  popup: '1050',\n  // The toast region: above popups and modals.\n  toast: '1060',\n  // The ThemeProvider portal mount that holds all of the above.\n  portal: '1100',\n} as unknown as Readonly<Record<LayerToken, LayerValue>>)\n","import {css} from 'react-strict-dom'\n\n// Visual effects. Not themed.\n//\n// overlayBlur: the blur behind a modal's backdrop (a command palette, a\n// lightbox). Apply it ONLY on the backdrop element itself: a backdropFilter\n// (or filter) on an ancestor becomes the containing block for every fixed\n// descendant, so a Dialog or Drawer opened inside it is positioned against\n// that ancestor instead of the viewport.\n//\n// surfaceBlur: a frosted surface over imagery (a pill or a chip on a photo).\n// The same warning holds: put it ONLY on that surface element itself, never on\n// a wrapper that holds a Dialog, a Drawer or any fixed descendant.\nexport const effects = css.defineVars({\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n})\n","import {css} from 'react-strict-dom'\n\nexport const layoutSpacing = css.defineVars({\n  // Vertical rhythm (stack gaps)\n  stackXs: '4px',\n  stackSm: '8px',\n  stackMd: '16px',\n  stackLg: '24px',\n  stackXl: '48px',\n\n  // Horizontal rhythm (inline gaps)\n  inlineXs: '4px',\n  inlineSm: '8px',\n  inlineMd: '16px',\n  inlineLg: '24px',\n\n  // Container insets\n  containerSm: '16px',\n  containerMd: '24px',\n  containerLg: '32px',\n})\n","import {css} from 'react-strict-dom'\n\nexport const typography = css.defineVars({\n  fontFamily:\n    '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif',\n  fontFamilyMono: '\"SF Mono\", \"Fira Code\", \"Fira Mono\", \"Roboto Mono\", \"Courier New\", monospace',\n  fontSizeXs: '0.75rem',\n  fontSizeSm: '0.875rem',\n  fontSizeMd: '1rem',\n  fontSizeLg: '1.125rem',\n  fontSizeXl: '1.25rem',\n  fontSizeHeading: '1.5rem',\n  fontWeightNormal: '400',\n  fontWeightMedium: '500',\n  fontWeightSemibold: '600',\n  fontWeightBold: '700',\n  lineHeight: '1.5',\n})\n\nexport const typeScale = css.defineVars({\n  // 9-step font size scale\n  fontSize1: '0.75rem', // 12px — captions, badges\n  fontSize2: '0.8125rem', // 13px — small UI\n  fontSize3: '0.875rem', // 14px — default UI (buttons, inputs)\n  fontSize4: '1rem', // 16px — body text\n  fontSize5: '1.125rem', // 18px — body-lg\n  fontSize6: '1.25rem', // 20px — subheading\n  fontSize7: '1.5rem', // 24px — heading-sm\n  fontSize8: '1.875rem', // 30px — heading-md\n  fontSize9: '2.25rem', // 36px — heading-lg\n\n  // Matched line-heights\n  lineHeight1: '1rem', // 16px\n  lineHeight2: '1.25rem', // 20px\n  lineHeight3: '1.25rem', // 20px\n  lineHeight4: '1.5rem', // 24px\n  lineHeight5: '1.5rem', // 24px\n  lineHeight6: '1.75rem', // 28px\n  lineHeight7: '2rem', // 32px\n  lineHeight8: '2.25rem', // 36px\n  lineHeight9: '2.75rem', // 44px\n\n  // Fluid display sizes\n  displaySm: 'clamp(2.25rem, 1.5rem + 2vw, 3rem)', // 36–48px\n  displayMd: 'clamp(2.75rem, 1.75rem + 2.5vw, 3.75rem)', // 44–60px\n  displayLg: 'clamp(3.5rem, 2rem + 3.5vw, 4.5rem)', // 56–72px\n\n  // Letter-spacing\n  letterSpacingTight: '-0.02em',\n  letterSpacingNormal: '0',\n  letterSpacingWide: '0.04em',\n})\n","import {css} from 'react-strict-dom'\nimport {typography, typeScale} from './typography.css'\n\nexport const typePresets = css.create({\n  // Body\n  bodySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize4,\n    lineHeight: typeScale.lineHeight4,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  bodyLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize5,\n    lineHeight: typeScale.lineHeight5,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n\n  // UI\n  caption: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingWide,\n  },\n  label: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightMedium,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  code: {\n    fontFamily: typography.fontFamilyMono,\n    fontSize: typeScale.fontSize3,\n    lineHeight: typeScale.lineHeight3,\n    fontWeight: typography.fontWeightNormal,\n    letterSpacing: typeScale.letterSpacingNormal,\n  },\n  overline: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize1,\n    lineHeight: typeScale.lineHeight1,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingWide,\n    textTransform: 'uppercase' as const,\n  },\n\n  // Heading\n  headingSm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize6,\n    lineHeight: typeScale.lineHeight6,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize7,\n    lineHeight: typeScale.lineHeight7,\n    fontWeight: typography.fontWeightSemibold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize8,\n    lineHeight: typeScale.lineHeight8,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  headingXl: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.fontSize9,\n    lineHeight: typeScale.lineHeight9,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n\n  // Display (fluid)\n  displaySm: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displaySm,\n    lineHeight: 1.2,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayMd: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayMd,\n    lineHeight: 1.15,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n  displayLg: {\n    fontFamily: typography.fontFamily,\n    fontSize: typeScale.displayLg,\n    lineHeight: 1.1,\n    fontWeight: typography.fontWeightBold,\n    letterSpacing: typeScale.letterSpacingTight,\n  },\n})\n","import {css} from 'react-strict-dom'\n\nexport const shadows = css.defineVars({\n  sm: '0 2px 4px rgba(0, 0, 0, 0.3)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.4)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.5)',\n  // DragDrop's drop-target rings: borders.hairline in colors.border on every\n  // zone that can receive, borders.strong in colors.accent on the one under the\n  // pointer. Literal per theme (StyleX needs inline literals); the drift check\n  // rebuilds each from the palette. Not focus: focus stays on outlines.\n  dropReady: 'inset 0 0 0 1px #333333',\n  dropOver: 'inset 0 0 0 2px #6aaffc',\n})\n","import {css} from 'react-strict-dom'\n\n/**\n * Motion timing tokens.\n *\n * Values are harvested from what the system already uses — nothing invented:\n * - durations: 150ms is the de-facto transition (Button, Card, and ~30 other\n *   spots), 200ms the common overlay enter (Drawer), 280ms the larger panel\n *   enter (DetailPanel). `instant` is for explicit no-motion.\n *   `quick` (List hover, sort indicator) and `brisk` (Toast enter) are the\n *   two other values components used; `minimal` is the 1ms reduced-motion\n *   duration that still fires animationend.\n * - easings: `standard` is the default `ease` used throughout; `easeOut` /\n *   `easeIn` are the \"Apple ease\" curves already defined for DetailPanel.\n *   `linear` is the Spinner's constant rotation.\n *\n * Reduced motion is handled globally (the `@media (prefers-reduced-motion)`\n * rule in the reset neutralizes timing) plus per-component transform guards, so\n * these stay as plain timing values.\n */\nexport const duration = css.defineVars({\n  instant: '0ms',\n  // Non-zero so animationend still fires under reduced motion.\n  minimal: '1ms',\n  quick: '120ms',\n  fast: '150ms',\n  brisk: '160ms',\n  base: '200ms',\n  slow: '280ms',\n})\n\nexport const easing = css.defineVars({\n  standard: 'ease',\n  linear: 'linear',\n  easeOut: 'cubic-bezier(0.32, 0.72, 0, 1)',\n  easeIn: 'cubic-bezier(0.72, 0, 0.68, 0.28)',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const lightTheme = css.createTheme(colors, {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n})\n\nexport const lightShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.08)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.12)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.16)',\n  dropReady: 'inset 0 0 0 1px #d4d4d4',\n  dropOver: 'inset 0 0 0 2px #1e40af',\n})\n","import {css} from 'react-strict-dom'\nimport {colors} from '../tokens/colors.css'\nimport {shadows} from '../tokens/shadows.css'\n\nexport const highContrastTheme = css.createTheme(colors, {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n\n  // Highlight — a non-status accent (a category, an intent); no status meaning.\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  // Fixed overlays — the same in every theme (a scrim darkens whatever is\n  // under it; the inverse overlays sit on an accent surface).\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  // A light that does not follow the theme (the Switch knob).\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  // A fixed translucent white over content (the light counterpart of scrim).\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  // The opposite tone of the theme: a surface that stands out from the page\n  // (toasts, coach marks), with its own text colour. Not the fixed inverse*\n  // overlays above, which sit on an accent fill.\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  // A border on contrastSurface, at least 3:1 against it (non-text).\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n})\n\nexport const highContrastShadows = css.createTheme(shadows, {\n  sm: '0 2px 4px rgba(0, 0, 0, 0.6)',\n  md: '0 4px 12px rgba(0, 0, 0, 0.7)',\n  lg: '0 8px 24px rgba(0, 0, 0, 0.8)',\n  dropReady: 'inset 0 0 0 1px #555555',\n  dropOver: 'inset 0 0 0 2px #60a5fa',\n})\n"],"names":["breakpoints","breakpointsPx","colors","spacing","microSpacing","radii","sizes","borders","layers","effects","layoutSpacing","typography","typeScale","typePresets","shadows","duration","easing","lightTheme","lightShadows","highContrastTheme","highContrastShadows"],"mappings":"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"}

package/dist/keys.d.ts

@@ -42,7 +42,7 @@ export declare const DURATION_MS: {
     readonly slow: 280;
 };
 export type DurationToken = keyof typeof DURATION_MS;
-export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH", "timelineLabelW", "appBarH"];
+export declare const SIZE_KEYS: readonly ["touchTarget", "controlSm", "controlMd", "controlLg", "indicator", "indicatorDot", "checkMarkW", "checkMarkH", "switchTrackW", "switchTrackH", "switchThumb", "iconButton", "iconButtonSm", "spinnerSm", "spinnerMd", "spinnerLg", "glyphXs", "glyphSm", "glyphMd", "iconSm", "iconMd", "iconLg", "iconXl", "iconXxl", "thumbSm", "mediaTileMinW", "glyphClampMax", "timeReadoutW", "navMarkerW", "navMarkerH", "divider", "tabIndicator", "edgeFade", "scrollbar", "swatchW", "swatchH", "labelMinW", "popupMinW", "listMaxH", "listMaxHSm", "dialogSm", "dialogMd", "dialogLg", "panelSm", "panelMd", "panelLg", "toastMaxW", "gridColSm", "gridColMd", "pageSm", "pageMd", "pageLg", "sidebarW", "pageXs", "pageXl", "asideW", "gridColXs", "fieldMinWSm", "fieldMinW", "popoverWSm", "popoverW", "popupMaxW", "meterH", "skeletonChipW", "dropZoneMinH", "canvasMinH", "editorMinH", "toolbarH", "embedW", "colorPickerW", "colorAreaH", "colorTrackH", "colorSwatch", "colorPreviewH", "handle", "chip", "placeholderMinH", "previewMaxH", "barH", "readoutW", "sliderW", "paletteMinW", "deviceBarW", "timeGutterW", "dayHeaderH", "timelineLabelW", "appBarH", "dragThumbW", "dragThumbH"];
 export type SizeToken = (typeof SIZE_KEYS)[number];
 export declare const SIZES_PX: {
     readonly touchTarget: 44;
@@ -69,6 +69,10 @@ export declare const SIZES_PX: {
     readonly iconLg: 24;
     readonly iconXl: 36;
     readonly iconXxl: 48;
+    readonly thumbSm: 40;
+    readonly mediaTileMinW: 108;
+    readonly glyphClampMax: 160;
+    readonly timeReadoutW: 74;
     readonly navMarkerW: 3;
     readonly navMarkerH: 18;
     readonly divider: 1;
@@ -128,6 +132,8 @@ export declare const SIZES_PX: {
     readonly dayHeaderH: 46;
     readonly timelineLabelW: 180;
     readonly appBarH: 61;
+    readonly dragThumbW: 132;
+    readonly dragThumbH: 99;
 };
 export declare const BORDER_KEYS: readonly ["hairline", "strong", "accent", "focusRing", "focusOffset", "focusOffsetSm"];
 export type BorderToken = (typeof BORDER_KEYS)[number];

package/dist/keys.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,ojCAoFZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../src/keys.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,UAAU,CAAA;AAEvC,eAAO,MAAM,YAAY,8DAA+D,CAAA;AACxF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AAGxD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAGV,eAAO,MAAM,kBAAkB,8CAA+C,CAAA;AAC9E,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,kBAAkB,CAAC,CAAC,MAAM,CAAC,CAAA;AACnE,eAAO,MAAM,gBAAgB;;;;;;CAMnB,CAAA;AAEV,eAAO,MAAM,WAAW,kDAAmD,CAAA;AAC3E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,WAAW,sDAAuD,CAAA;AAC/E,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,WAAW;;;;;;;;CAQd,CAAA;AACV,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,WAAW,CAAA;AAEpD,eAAO,MAAM,SAAS,6oCA0FZ,CAAA;AACV,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAA;AAGlD,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FX,CAAA;AAEV,eAAO,MAAM,WAAW,wFAOd,CAAA;AACV,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,UAAU,+JAab,CAAA;AACV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AAIpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAEV,eAAO,MAAM,WAAW,yCAA0C,CAAA;AAClE,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AAGtD,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAKV,eAAO,MAAM,UAAU;;;;;;CAMb,CAAA;AACV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,UAAU,CAAA;AAK9C,eAAO,MAAM,eAAe,yCAA0C,CAAA;AACtE,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA;AAGV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAGV,eAAO,MAAM,YAAY;;;;;CAKf,CAAA;AAGV,eAAO,MAAM,wBAAwB;;;;;;;;;;CAU3B,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;;CAMV,CAAA;AAGV,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,MAAM,SAAS,CAAA;AAExC,YAAY,EAAC,UAAU,EAAC,MAAM,6BAA6B,CAAA"}

package/dist/mockup.css

@@ -27,6 +27,7 @@
   --duro-color-error-contrast: #000000;
   --duro-color-error-hover: #fca5a5;
   --duro-color-error-text: #fca5a5;
+  --duro-color-fixed-dark: #000000;
   --duro-color-fixed-light: #ffffff;
   --duro-color-highlight: #c084fc;
   --duro-color-highlight-bg: rgba(192, 132, 252, 0.1);
@@ -103,12 +104,15 @@
   --duro-size-dialog-md: 520px;
   --duro-size-dialog-sm: 400px;
   --duro-size-divider: 1px;
+  --duro-size-drag-thumb-h: 99px;
+  --duro-size-drag-thumb-w: 132px;
   --duro-size-drop-zone-min-h: 128px;
   --duro-size-edge-fade: 32px;
   --duro-size-editor-min-h: 160px;
   --duro-size-embed-w: 550px;
   --duro-size-field-min-w: 160px;
   --duro-size-field-min-w-sm: 80px;
+  --duro-size-glyph-clamp-max: 160px;
   --duro-size-glyph-md: 16px;
   --duro-size-glyph-sm: 12px;
   --duro-size-glyph-xs: 10px;
@@ -128,6 +132,7 @@
   --duro-size-label-min-w: 120px;
   --duro-size-list-max-h: 280px;
   --duro-size-list-max-h-sm: 200px;
+  --duro-size-media-tile-min-w: 108px;
   --duro-size-meter-h: 6px;
   --duro-size-nav-marker-h: 18px;
   --duro-size-nav-marker-w: 3px;
@@ -160,8 +165,10 @@
   --duro-size-switch-track-h: 20px;
   --duro-size-switch-track-w: 36px;
   --duro-size-tab-indicator: 2px;
+  --duro-size-thumb-sm: 40px;
   --duro-size-time-gutter-w: 64px;
   --duro-size-timeline-label-w: 180px;
+  --duro-size-time-readout-w: 74px;
   --duro-size-toast-max-w: 440px;
   --duro-size-toolbar-h: 36px;
   --duro-size-touch-target: 44px;
@@ -279,6 +286,7 @@
   --duro-color-error-contrast: #ffffff;
   --duro-color-error-hover: #7f1d1d;
   --duro-color-error-text: #7f1d1d;
+  --duro-color-fixed-dark: #000000;
   --duro-color-fixed-light: #ffffff;
   --duro-color-highlight: #6b21a8;
   --duro-color-highlight-bg: rgba(107, 33, 168, 0.08);
@@ -331,6 +339,7 @@
   --duro-color-error-contrast: #000000;
   --duro-color-error-hover: #fca5a5;
   --duro-color-error-text: #fca5a5;
+  --duro-color-fixed-dark: #000000;
   --duro-color-fixed-light: #ffffff;
   --duro-color-highlight: #d8b4fe;
   --duro-color-highlight-bg: rgba(216, 180, 254, 0.15);

package/dist/raw.d.ts

@@ -36,6 +36,7 @@ export type RawColors = {
     inverseBorder: string;
     inverseBorderHover: string;
     fixedLight: string;
+    fixedDark: string;
     overlayLight: string;
     contrastSurface: string;
     onContrastSurface: string;
@@ -118,6 +119,10 @@ export declare const SIZES_PX: {
     readonly iconLg: 24;
     readonly iconXl: 36;
     readonly iconXxl: 48;
+    readonly thumbSm: 40;
+    readonly mediaTileMinW: 108;
+    readonly glyphClampMax: 160;
+    readonly timeReadoutW: 74;
     readonly navMarkerW: 3;
     readonly navMarkerH: 18;
     readonly divider: 1;
@@ -177,6 +182,8 @@ export declare const SIZES_PX: {
     readonly dayHeaderH: 46;
     readonly timelineLabelW: 180;
     readonly appBarH: 61;
+    readonly dragThumbW: 132;
+    readonly dragThumbH: 99;
 };
 export declare const EMAIL_PX: {
     readonly emailCardW: 520;

package/dist/raw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAEV,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAGV,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoFX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SA0CxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SA0CzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SA0ChC,CAAA"}
+{"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../src/raw.ts"],"names":[],"mappings":"AAWA,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAA;IACd,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,MAAM,CAAA;IACrB,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,kBAAkB,EAAE,MAAM,CAAA;IAC1B,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACvB,CAAA;AAKD,eAAO,MAAM,UAAU;;;;;;;;;CASb,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;CAOX,CAAA;AAEV,eAAO,MAAM,aAAa;;;;;;;CAOhB,CAAA;AAEV,eAAO,MAAM,UAAU;;;;;;;CAOb,CAAA;AAEV,eAAO,MAAM,MAAM;;;;;;;;;;;;;CAaT,CAAA;AAGV,eAAO,MAAM,OAAO;;;CAGV,CAAA;AAEV,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0FX,CAAA;AAIV,eAAO,MAAM,QAAQ;;;CAA+C,CAAA;AAGpE,eAAO,MAAM,UAAU,EAAE,SA2CxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SA2CzB,CAAA;AAGD,eAAO,MAAM,kBAAkB,EAAE,SA2ChC,CAAA"}

package/dist/raw.js

@@ -28,7 +28,7 @@ const r = {
   focusRing: 2,
   focusOffset: 2,
   focusOffsetSm: 1
-}, t = {
+}, i = {
   raised: 1,
   floating: 50,
   floatingRaised: 60,
@@ -41,7 +41,7 @@ const r = {
   popup: 1050,
   toast: 1060,
   portal: 1100
-}, i = {
+}, t = {
   overlayBlur: "blur(2px)",
   surfaceBlur: "blur(6px)"
 }, g = {
@@ -69,6 +69,10 @@ const r = {
   iconLg: 24,
   iconXl: 36,
   iconXxl: 48,
+  thumbSm: 40,
+  mediaTileMinW: 108,
+  glyphClampMax: 160,
+  timeReadoutW: 74,
   navMarkerW: 3,
   navMarkerH: 18,
   divider: 1,
@@ -127,7 +131,9 @@ const r = {
   timeGutterW: 64,
   dayHeaderH: 46,
   timelineLabelW: 180,
-  appBarH: 61
+  appBarH: 61,
+  dragThumbW: 132,
+  dragThumbH: 99
 }, n = {
   emailCardW: 520,
   trackingPixel: 1
@@ -169,6 +175,7 @@ const r = {
   inverseBorder: "rgba(0, 0, 0, 0.55)",
   inverseBorderHover: "rgba(0, 0, 0, 0.70)",
   fixedLight: "#ffffff",
+  fixedDark: "#000000",
   overlayLight: "rgba(255, 255, 255, 0.78)",
   contrastSurface: "#f5f5f5",
   onContrastSurface: "#1a1a1a",
@@ -211,6 +218,7 @@ const r = {
   inverseBorder: "rgba(0, 0, 0, 0.55)",
   inverseBorderHover: "rgba(0, 0, 0, 0.70)",
   fixedLight: "#ffffff",
+  fixedDark: "#000000",
   overlayLight: "rgba(255, 255, 255, 0.78)",
   contrastSurface: "#1a1a1a",
   onContrastSurface: "#e5e5e5",
@@ -253,6 +261,7 @@ const r = {
   inverseBorder: "rgba(0, 0, 0, 0.55)",
   inverseBorderHover: "rgba(0, 0, 0, 0.70)",
   fixedLight: "#ffffff",
+  fixedDark: "#000000",
   overlayLight: "rgba(255, 255, 255, 0.78)",
   contrastSurface: "#ffffff",
   onContrastSurface: "#000000",
@@ -260,10 +269,10 @@ const r = {
 };
 export {
   o as BORDERS_PX,
-  i as EFFECTS,
+  t as EFFECTS,
   n as EMAIL_PX,
   a as FONT_SIZE_REM,
-  t as LAYERS,
+  i as LAYERS,
   e as RADII_PX,
   g as SIZES_PX,
   r as SPACING_PX,

package/dist/raw.js.map

@@ -1 +1 @@
-{"version":3,"file":"raw.js","sources":["../src/raw.ts"],"sourcesContent":["// Plain hex values for non-`react-strict-dom` consumers (e.g. an MUI\n// `createTheme` palette). These mirror the literals defined in\n// `tokens/colors.css.ts`, `themes/light.css.ts`, and `themes/high-contrast.css.ts`.\n//\n// We can't make the css.ts files import from here: StyleX (the babel plugin\n// behind RSD's `css.defineVars` / `css.createTheme` on web) requires the\n// argument to be an inline object literal. So values live in two places.\n//\n// `scripts/check-token-drift.mjs` runs in `prebuild` and fails the build if\n// the literal in any css.ts file diverges from the corresponding export here.\n\nexport type RawColors = {\n  bg: string\n  bgCard: string\n  bgCardHover: string\n  text: string\n  textMuted: string\n  accent: string\n  accentHover: string\n  accentContrast: string\n  border: string\n  error: string\n  errorHover: string\n  errorBg: string\n  errorBorder: string\n  errorText: string\n  errorContrast: string\n  success: string\n  successBg: string\n  successBorder: string\n  successText: string\n  warning: string\n  warningBg: string\n  warningBorder: string\n  warningText: string\n  info: string\n  infoBg: string\n  infoBorder: string\n  infoText: string\n  highlight: string\n  highlightBg: string\n  highlightBorder: string\n  highlightText: string\n  scrim: string\n  inverseFill: string\n  inverseFillHover: string\n  inverseBorder: string\n  inverseBorderHover: string\n  fixedLight: string\n  overlayLight: string\n  contrastSurface: string\n  onContrastSurface: string\n  contrastBorder: string\n}\n\n// Numeric maps for consumers that load only the compiled `/raw` entry (e.g.\n// ui-email, which cannot read CSS variables or the TypeScript `/keys` source).\n// Copies of the keys.ts maps; check-token-drift.mjs fails if they diverge.\nexport const SPACING_PX = {\n  xs: 4,\n  sm: 8,\n  ms: 12,\n  md: 16,\n  lg: 24,\n  xl: 32,\n  xxl: 48,\n  xxxl: 64,\n} as const\n\nexport const RADII_PX = {\n  xs: 4,\n  px6: 6,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  full: 9999,\n} as const\n\nexport const FONT_SIZE_REM = {\n  fontSizeXs: 0.75,\n  fontSizeSm: 0.875,\n  fontSizeMd: 1,\n  fontSizeLg: 1.125,\n  fontSizeXl: 1.25,\n  fontSizeHeading: 1.5,\n} as const\n\nexport const BORDERS_PX = {\n  hairline: 1,\n  strong: 2,\n  accent: 3,\n  focusRing: 2,\n  focusOffset: 2,\n  focusOffsetSm: 1,\n} as const\n\nexport const LAYERS = {\n  raised: 1,\n  floating: 50,\n  floatingRaised: 60,\n  overlay: 1000,\n  modal: 1001,\n  modalRaised: 1002,\n  popover: 1040,\n  popoverRaised: 1041,\n  popupBackdrop: 1049,\n  popup: 1050,\n  toast: 1060,\n  portal: 1100,\n} as const\n\n// Copy of keys.ts EFFECTS (CSS filter strings, not a numeric map).\nexport const EFFECTS = {\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n} as const\n\nexport const SIZES_PX = {\n  touchTarget: 44,\n  controlSm: 28,\n  controlMd: 39,\n  controlLg: 40,\n  indicator: 18,\n  indicatorDot: 8,\n  checkMarkW: 5,\n  checkMarkH: 9,\n  switchTrackW: 36,\n  switchTrackH: 20,\n  switchThumb: 16,\n  iconButton: 32,\n  iconButtonSm: 28,\n  spinnerSm: 16,\n  spinnerMd: 24,\n  spinnerLg: 40,\n  glyphXs: 10,\n  glyphSm: 12,\n  glyphMd: 16,\n  iconSm: 16,\n  iconMd: 18,\n  iconLg: 24,\n  iconXl: 36,\n  iconXxl: 48,\n  navMarkerW: 3,\n  navMarkerH: 18,\n  divider: 1,\n  tabIndicator: 2,\n  edgeFade: 32,\n  scrollbar: 8,\n  swatchW: 44,\n  swatchH: 34,\n  labelMinW: 120,\n  popupMinW: 160,\n  listMaxH: 280,\n  listMaxHSm: 200,\n  dialogSm: 400,\n  dialogMd: 520,\n  dialogLg: 680,\n  panelSm: 360,\n  panelMd: 480,\n  panelLg: 640,\n  toastMaxW: 440,\n  gridColSm: 240,\n  gridColMd: 280,\n  pageSm: 600,\n  pageMd: 800,\n  pageLg: 1200,\n  sidebarW: 240,\n  pageXs: 480,\n  pageXl: 1440,\n  asideW: 320,\n  gridColXs: 200,\n  fieldMinWSm: 80,\n  fieldMinW: 160,\n  popoverWSm: 240,\n  popoverW: 320,\n  popupMaxW: 280,\n  meterH: 6,\n  skeletonChipW: 96,\n  dropZoneMinH: 128,\n  canvasMinH: 480,\n  editorMinH: 160,\n  toolbarH: 36,\n  embedW: 550,\n  colorPickerW: 196,\n  colorAreaH: 150,\n  colorTrackH: 12,\n  colorSwatch: 20,\n  colorPreviewH: 22,\n  handle: 16,\n  chip: 24,\n  placeholderMinH: 80,\n  previewMaxH: 320,\n  barH: 4,\n  readoutW: 40,\n  sliderW: 96,\n  paletteMinW: 96,\n  deviceBarW: 96,\n  timeGutterW: 64,\n  dayHeaderH: 46,\n  timelineLabelW: 180,\n  appBarH: 61,\n} as const\n\n// Email-only measures: no CSS variable (mail clients cannot read them) and not\n// a lint candidate, so it is deliberately absent from keys.ts.\nexport const EMAIL_PX = {emailCardW: 520, trackingPixel: 1} as const\n\n// Dark theme — matches the defaults in `tokens/colors.css.ts`.\nexport const darkColors: RawColors = {\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#333333',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n\n// Light theme — matches the overrides in `themes/light.css.ts`.\nexport const lightColors: RawColors = {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n}\n\n// High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.\nexport const highContrastColors: RawColors = {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n"],"names":["SPACING_PX","RADII_PX","FONT_SIZE_REM","BORDERS_PX","LAYERS","EFFECTS","SIZES_PX","EMAIL_PX","darkColors","lightColors","highContrastColors"],"mappings":"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"}
+{"version":3,"file":"raw.js","sources":["../src/raw.ts"],"sourcesContent":["// Plain hex values for non-`react-strict-dom` consumers (e.g. an MUI\n// `createTheme` palette). These mirror the literals defined in\n// `tokens/colors.css.ts`, `themes/light.css.ts`, and `themes/high-contrast.css.ts`.\n//\n// We can't make the css.ts files import from here: StyleX (the babel plugin\n// behind RSD's `css.defineVars` / `css.createTheme` on web) requires the\n// argument to be an inline object literal. So values live in two places.\n//\n// `scripts/check-token-drift.mjs` runs in `prebuild` and fails the build if\n// the literal in any css.ts file diverges from the corresponding export here.\n\nexport type RawColors = {\n  bg: string\n  bgCard: string\n  bgCardHover: string\n  text: string\n  textMuted: string\n  accent: string\n  accentHover: string\n  accentContrast: string\n  border: string\n  error: string\n  errorHover: string\n  errorBg: string\n  errorBorder: string\n  errorText: string\n  errorContrast: string\n  success: string\n  successBg: string\n  successBorder: string\n  successText: string\n  warning: string\n  warningBg: string\n  warningBorder: string\n  warningText: string\n  info: string\n  infoBg: string\n  infoBorder: string\n  infoText: string\n  highlight: string\n  highlightBg: string\n  highlightBorder: string\n  highlightText: string\n  scrim: string\n  inverseFill: string\n  inverseFillHover: string\n  inverseBorder: string\n  inverseBorderHover: string\n  fixedLight: string\n  fixedDark: string\n  overlayLight: string\n  contrastSurface: string\n  onContrastSurface: string\n  contrastBorder: string\n}\n\n// Numeric maps for consumers that load only the compiled `/raw` entry (e.g.\n// ui-email, which cannot read CSS variables or the TypeScript `/keys` source).\n// Copies of the keys.ts maps; check-token-drift.mjs fails if they diverge.\nexport const SPACING_PX = {\n  xs: 4,\n  sm: 8,\n  ms: 12,\n  md: 16,\n  lg: 24,\n  xl: 32,\n  xxl: 48,\n  xxxl: 64,\n} as const\n\nexport const RADII_PX = {\n  xs: 4,\n  px6: 6,\n  sm: 8,\n  md: 12,\n  lg: 16,\n  full: 9999,\n} as const\n\nexport const FONT_SIZE_REM = {\n  fontSizeXs: 0.75,\n  fontSizeSm: 0.875,\n  fontSizeMd: 1,\n  fontSizeLg: 1.125,\n  fontSizeXl: 1.25,\n  fontSizeHeading: 1.5,\n} as const\n\nexport const BORDERS_PX = {\n  hairline: 1,\n  strong: 2,\n  accent: 3,\n  focusRing: 2,\n  focusOffset: 2,\n  focusOffsetSm: 1,\n} as const\n\nexport const LAYERS = {\n  raised: 1,\n  floating: 50,\n  floatingRaised: 60,\n  overlay: 1000,\n  modal: 1001,\n  modalRaised: 1002,\n  popover: 1040,\n  popoverRaised: 1041,\n  popupBackdrop: 1049,\n  popup: 1050,\n  toast: 1060,\n  portal: 1100,\n} as const\n\n// Copy of keys.ts EFFECTS (CSS filter strings, not a numeric map).\nexport const EFFECTS = {\n  overlayBlur: 'blur(2px)',\n  surfaceBlur: 'blur(6px)',\n} as const\n\nexport const SIZES_PX = {\n  touchTarget: 44,\n  controlSm: 28,\n  controlMd: 39,\n  controlLg: 40,\n  indicator: 18,\n  indicatorDot: 8,\n  checkMarkW: 5,\n  checkMarkH: 9,\n  switchTrackW: 36,\n  switchTrackH: 20,\n  switchThumb: 16,\n  iconButton: 32,\n  iconButtonSm: 28,\n  spinnerSm: 16,\n  spinnerMd: 24,\n  spinnerLg: 40,\n  glyphXs: 10,\n  glyphSm: 12,\n  glyphMd: 16,\n  iconSm: 16,\n  iconMd: 18,\n  iconLg: 24,\n  iconXl: 36,\n  iconXxl: 48,\n  thumbSm: 40,\n  mediaTileMinW: 108,\n  glyphClampMax: 160,\n  timeReadoutW: 74,\n  navMarkerW: 3,\n  navMarkerH: 18,\n  divider: 1,\n  tabIndicator: 2,\n  edgeFade: 32,\n  scrollbar: 8,\n  swatchW: 44,\n  swatchH: 34,\n  labelMinW: 120,\n  popupMinW: 160,\n  listMaxH: 280,\n  listMaxHSm: 200,\n  dialogSm: 400,\n  dialogMd: 520,\n  dialogLg: 680,\n  panelSm: 360,\n  panelMd: 480,\n  panelLg: 640,\n  toastMaxW: 440,\n  gridColSm: 240,\n  gridColMd: 280,\n  pageSm: 600,\n  pageMd: 800,\n  pageLg: 1200,\n  sidebarW: 240,\n  pageXs: 480,\n  pageXl: 1440,\n  asideW: 320,\n  gridColXs: 200,\n  fieldMinWSm: 80,\n  fieldMinW: 160,\n  popoverWSm: 240,\n  popoverW: 320,\n  popupMaxW: 280,\n  meterH: 6,\n  skeletonChipW: 96,\n  dropZoneMinH: 128,\n  canvasMinH: 480,\n  editorMinH: 160,\n  toolbarH: 36,\n  embedW: 550,\n  colorPickerW: 196,\n  colorAreaH: 150,\n  colorTrackH: 12,\n  colorSwatch: 20,\n  colorPreviewH: 22,\n  handle: 16,\n  chip: 24,\n  placeholderMinH: 80,\n  previewMaxH: 320,\n  barH: 4,\n  readoutW: 40,\n  sliderW: 96,\n  paletteMinW: 96,\n  deviceBarW: 96,\n  timeGutterW: 64,\n  dayHeaderH: 46,\n  timelineLabelW: 180,\n  appBarH: 61,\n  dragThumbW: 132,\n  dragThumbH: 99,\n} as const\n\n// Email-only measures: no CSS variable (mail clients cannot read them) and not\n// a lint candidate, so it is deliberately absent from keys.ts.\nexport const EMAIL_PX = {emailCardW: 520, trackingPixel: 1} as const\n\n// Dark theme — matches the defaults in `tokens/colors.css.ts`.\nexport const darkColors: RawColors = {\n  bg: '#0f0f0f',\n  bgCard: '#1a1a1a',\n  bgCardHover: '#242424',\n  text: '#e5e5e5',\n  textMuted: '#b0b0b0',\n  accent: '#6aaffc',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#333333',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.1)',\n  errorBorder: 'rgba(248, 113, 113, 0.3)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#22c55e',\n  successBg: 'rgba(34, 197, 94, 0.1)',\n  successBorder: 'rgba(34, 197, 94, 0.3)',\n  successText: '#86efac',\n  warning: '#fbbf24',\n  warningBg: 'rgba(251, 191, 36, 0.1)',\n  warningBorder: 'rgba(251, 191, 36, 0.3)',\n  warningText: '#fde68a',\n  info: '#6aaffc',\n  infoBg: 'rgba(106, 175, 252, 0.1)',\n  infoBorder: 'rgba(106, 175, 252, 0.3)',\n  infoText: '#93c5fd',\n  highlight: '#c084fc',\n  highlightBg: 'rgba(192, 132, 252, 0.1)',\n  highlightBorder: 'rgba(192, 132, 252, 0.3)',\n  highlightText: '#d8b4fe',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#f5f5f5',\n  onContrastSurface: '#1a1a1a',\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n\n// Light theme — matches the overrides in `themes/light.css.ts`.\nexport const lightColors: RawColors = {\n  bg: '#ffffff',\n  bgCard: '#f5f5f5',\n  bgCardHover: '#ebebeb',\n  text: '#1a1a1a',\n  textMuted: '#4a4a4a',\n  accent: '#1e40af',\n  accentHover: '#1a3799',\n  accentContrast: '#ffffff',\n  border: '#d4d4d4',\n  error: '#991b1b',\n  errorHover: '#7f1d1d',\n  errorBg: 'rgba(153, 27, 27, 0.08)',\n  errorBorder: 'rgba(153, 27, 27, 0.3)',\n  errorText: '#7f1d1d',\n  errorContrast: '#ffffff',\n  success: '#166534',\n  successBg: 'rgba(22, 101, 52, 0.08)',\n  successBorder: 'rgba(22, 101, 52, 0.3)',\n  successText: '#14532d',\n  warning: '#92400e',\n  warningBg: 'rgba(146, 64, 14, 0.08)',\n  warningBorder: 'rgba(146, 64, 14, 0.3)',\n  warningText: '#78350f',\n  info: '#1e40af',\n  infoBg: 'rgba(30, 64, 175, 0.08)',\n  infoBorder: 'rgba(30, 64, 175, 0.3)',\n  infoText: '#1e40af',\n  highlight: '#6b21a8',\n  highlightBg: 'rgba(107, 33, 168, 0.08)',\n  highlightBorder: 'rgba(107, 33, 168, 0.3)',\n  highlightText: '#581c87',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#1a1a1a',\n  onContrastSurface: '#e5e5e5',\n  contrastBorder: 'rgba(255, 255, 255, 0.33)',\n}\n\n// High-contrast theme — matches the overrides in `themes/high-contrast.css.ts`.\nexport const highContrastColors: RawColors = {\n  bg: '#000000',\n  bgCard: '#111111',\n  bgCardHover: '#1a1a1a',\n  text: '#ffffff',\n  textMuted: '#b0b0b0',\n  accent: '#60a5fa',\n  accentHover: '#93c5fd',\n  accentContrast: '#000000',\n  border: '#555555',\n  error: '#f87171',\n  errorHover: '#fca5a5',\n  errorBg: 'rgba(248, 113, 113, 0.15)',\n  errorBorder: 'rgba(248, 113, 113, 0.5)',\n  errorText: '#fca5a5',\n  errorContrast: '#000000',\n  success: '#4ade80',\n  successBg: 'rgba(74, 222, 128, 0.15)',\n  successBorder: 'rgba(74, 222, 128, 0.5)',\n  successText: '#86efac',\n  warning: '#fcd34d',\n  warningBg: 'rgba(252, 211, 77, 0.15)',\n  warningBorder: 'rgba(252, 211, 77, 0.5)',\n  warningText: '#fef08a',\n  info: '#60a5fa',\n  infoBg: 'rgba(96, 165, 250, 0.15)',\n  infoBorder: 'rgba(96, 165, 250, 0.5)',\n  infoText: '#bfdbfe',\n  highlight: '#d8b4fe',\n  highlightBg: 'rgba(216, 180, 254, 0.15)',\n  highlightBorder: 'rgba(216, 180, 254, 0.5)',\n  highlightText: '#e9d5ff',\n  scrim: 'rgba(0, 0, 0, 0.4)',\n  inverseFill: 'rgba(0, 0, 0, 0.10)',\n  inverseFillHover: 'rgba(0, 0, 0, 0.18)',\n  inverseBorder: 'rgba(0, 0, 0, 0.55)',\n  inverseBorderHover: 'rgba(0, 0, 0, 0.70)',\n  fixedLight: '#ffffff',\n  fixedDark: '#000000',\n  overlayLight: 'rgba(255, 255, 255, 0.78)',\n  contrastSurface: '#ffffff',\n  onContrastSurface: '#000000',\n  contrastBorder: 'rgba(0, 0, 0, 0.42)',\n}\n"],"names":["SPACING_PX","RADII_PX","FONT_SIZE_REM","BORDERS_PX","LAYERS","EFFECTS","SIZES_PX","EMAIL_PX","darkColors","lightColors","highContrastColors"],"mappings":"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"}

package/dist/themes/high-contrast.css.d.ts

@@ -37,6 +37,7 @@ export declare const highContrastTheme: css.Theme<css.VarGroup<Readonly<{
     inverseBorder: string;
     inverseBorderHover: string;
     fixedLight: string;
+    fixedDark: string;
     overlayLight: string;
     contrastSurface: string;
     onContrastSurface: string;

package/dist/themes/high-contrast.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoD5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;oBAM9B,CAAA"}
+{"version":3,"file":"high-contrast.css.d.ts","sourceRoot":"","sources":["../../src/themes/high-contrast.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqD5B,CAAA;AAEF,eAAO,MAAM,mBAAmB;;;;;;oBAM9B,CAAA"}

package/dist/themes/light.css.d.ts

@@ -37,6 +37,7 @@ export declare const lightTheme: css.Theme<css.VarGroup<Readonly<{
     inverseBorder: string;
     inverseBorderHover: string;
     fixedLight: string;
+    fixedDark: string;
     overlayLight: string;
     contrastSurface: string;
     onContrastSurface: string;

package/dist/themes/light.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAoDrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;oBAMvB,CAAA"}
+{"version":3,"file":"light.css.d.ts","sourceRoot":"","sources":["../../src/themes/light.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAIpC,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAqDrB,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;oBAMvB,CAAA"}

package/dist/tokens/colors.css.d.ts

@@ -37,6 +37,7 @@ export declare const colors: css.VarGroup<Readonly<{
     inverseBorder: string;
     inverseBorderHover: string;
     fixedLight: string;
+    fixedDark: string;
     overlayLight: string;
     contrastSurface: string;
     onContrastSurface: string;

package/dist/tokens/colors.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAoEjB,CAAA"}
+{"version":3,"file":"colors.css.d.ts","sourceRoot":"","sources":["../../src/tokens/colors.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAsEjB,CAAA"}

package/dist/tokens/sizes.css.d.ts

@@ -24,6 +24,10 @@ export declare const sizes: css.VarGroup<Readonly<{
     iconLg: string;
     iconXl: string;
     iconXxl: string;
+    thumbSm: string;
+    mediaTileMinW: string;
+    glyphClampMax: string;
+    timeReadoutW: string;
     navMarkerW: string;
     navMarkerH: string;
     divider: string;
@@ -83,5 +87,7 @@ export declare const sizes: css.VarGroup<Readonly<{
     dayHeaderH: string;
     timelineLabelW: string;
     appBarH: string;
+    dragThumbW: string;
+    dragThumbH: string;
 }>, symbol>;
 //# sourceMappingURL=sizes.css.d.ts.map

package/dist/tokens/sizes.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAwFhB,CAAA"}
+{"version":3,"file":"sizes.css.d.ts","sourceRoot":"","sources":["../../src/tokens/sizes.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,kBAAkB,CAAA;AAEpC,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmGhB,CAAA"}

package/dist/vars.css

@@ -28,6 +28,7 @@
   --duro-color-error-contrast: var(--errorContrast-x1lvjkah);
   --duro-color-error-hover: var(--errorHover-x7eyu03);
   --duro-color-error-text: var(--errorText-xf51nwe);
+  --duro-color-fixed-dark: var(--fixedDark-xy1v4hq);
   --duro-color-fixed-light: var(--fixedLight-xd608fw);
   --duro-color-highlight: var(--highlight-x14yvf5c);
   --duro-color-highlight-bg: var(--highlightBg-x5qhmj2);
@@ -104,12 +105,15 @@
   --duro-size-dialog-md: var(--dialogMd-x1yjoj5l);
   --duro-size-dialog-sm: var(--dialogSm-x16fibl1);
   --duro-size-divider: var(--divider-x34oj7m);
+  --duro-size-drag-thumb-h: var(--dragThumbH-xbt2de9);
+  --duro-size-drag-thumb-w: var(--dragThumbW-x1bz26bx);
   --duro-size-drop-zone-min-h: var(--dropZoneMinH-x9asgie);
   --duro-size-edge-fade: var(--edgeFade-x1a8srg4);
   --duro-size-editor-min-h: var(--editorMinH-x7umtuv);
   --duro-size-embed-w: var(--embedW-x1jprk4i);
   --duro-size-field-min-w: var(--fieldMinW-x3410dk);
   --duro-size-field-min-w-sm: var(--fieldMinWSm-x17qqf6g);
+  --duro-size-glyph-clamp-max: var(--glyphClampMax-x3c2ety);
   --duro-size-glyph-md: var(--glyphMd-x1hz0jso);
   --duro-size-glyph-sm: var(--glyphSm-x17geiot);
   --duro-size-glyph-xs: var(--glyphXs-x7xktls);
@@ -129,6 +133,7 @@
   --duro-size-label-min-w: var(--labelMinW-x1tnvsg3);
   --duro-size-list-max-h: var(--listMaxH-x1g3bmh3);
   --duro-size-list-max-h-sm: var(--listMaxHSm-xhny4oa);
+  --duro-size-media-tile-min-w: var(--mediaTileMinW-x1pavouy);
   --duro-size-meter-h: var(--meterH-x5xauib);
   --duro-size-nav-marker-h: var(--navMarkerH-xlc6r7a);
   --duro-size-nav-marker-w: var(--navMarkerW-x1swbkx4);
@@ -161,8 +166,10 @@
   --duro-size-switch-track-h: var(--switchTrackH-x1h3icne);
   --duro-size-switch-track-w: var(--switchTrackW-xcah3tt);
   --duro-size-tab-indicator: var(--tabIndicator-xeswvk3);
+  --duro-size-thumb-sm: var(--thumbSm-x1t1g9ky);
   --duro-size-time-gutter-w: var(--timeGutterW-xsc6tna);
   --duro-size-timeline-label-w: var(--timelineLabelW-xx6mz1f);
+  --duro-size-time-readout-w: var(--timeReadoutW-x4630c6);
   --duro-size-toast-max-w: var(--toastMaxW-x1po6n0z);
   --duro-size-toolbar-h: var(--toolbarH-x16tj5lc);
   --duro-size-touch-target: var(--touchTarget-x1u5badx);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/tokens",
-  "version": "5.9.0",
+  "version": "5.11.0",
   "type": "module",
   "license": "MIT",
   "repository": {

package/src/keys.ts

@@ -95,6 +95,10 @@ export const SIZE_KEYS = [
   'iconLg',
   'iconXl',
   'iconXxl',
+  'thumbSm',
+  'mediaTileMinW',
+  'glyphClampMax',
+  'timeReadoutW',
   'navMarkerW',
   'navMarkerH',
   'divider',
@@ -154,6 +158,8 @@ export const SIZE_KEYS = [
   'dayHeaderH',
   'timelineLabelW',
   'appBarH',
+  'dragThumbW',
+  'dragThumbH',
 ] as const
 export type SizeToken = (typeof SIZE_KEYS)[number]
 
@@ -183,6 +189,10 @@ export const SIZES_PX = {
   iconLg: 24,
   iconXl: 36,
   iconXxl: 48,
+  thumbSm: 40,
+  mediaTileMinW: 108,
+  glyphClampMax: 160,
+  timeReadoutW: 74,
   navMarkerW: 3,
   navMarkerH: 18,
   divider: 1,
@@ -242,6 +252,8 @@ export const SIZES_PX = {
   dayHeaderH: 46,
   timelineLabelW: 180,
   appBarH: 61,
+  dragThumbW: 132,
+  dragThumbH: 99,
 } as const
 
 export const BORDER_KEYS = [

package/src/raw.ts

@@ -47,6 +47,7 @@ export type RawColors = {
   inverseBorder: string
   inverseBorderHover: string
   fixedLight: string
+  fixedDark: string
   overlayLight: string
   contrastSurface: string
   onContrastSurface: string
@@ -140,6 +141,10 @@ export const SIZES_PX = {
   iconLg: 24,
   iconXl: 36,
   iconXxl: 48,
+  thumbSm: 40,
+  mediaTileMinW: 108,
+  glyphClampMax: 160,
+  timeReadoutW: 74,
   navMarkerW: 3,
   navMarkerH: 18,
   divider: 1,
@@ -199,6 +204,8 @@ export const SIZES_PX = {
   dayHeaderH: 46,
   timelineLabelW: 180,
   appBarH: 61,
+  dragThumbW: 132,
+  dragThumbH: 99,
 } as const
 
 // Email-only measures: no CSS variable (mail clients cannot read them) and not
@@ -244,6 +251,7 @@ export const darkColors: RawColors = {
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  fixedDark: '#000000',
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   contrastSurface: '#f5f5f5',
   onContrastSurface: '#1a1a1a',
@@ -289,6 +297,7 @@ export const lightColors: RawColors = {
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  fixedDark: '#000000',
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   contrastSurface: '#1a1a1a',
   onContrastSurface: '#e5e5e5',
@@ -334,6 +343,7 @@ export const highContrastColors: RawColors = {
   inverseBorder: 'rgba(0, 0, 0, 0.55)',
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   fixedLight: '#ffffff',
+  fixedDark: '#000000',
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   contrastSurface: '#ffffff',
   onContrastSurface: '#000000',

package/src/themes/high-contrast.css.ts

@@ -45,6 +45,7 @@ export const highContrastTheme = css.createTheme(colors, {
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  fixedDark: '#000000',
   // A fixed translucent white over content (the light counterpart of scrim).
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   // The opposite tone of the theme: a surface that stands out from the page

package/src/themes/light.css.ts

@@ -45,6 +45,7 @@ export const lightTheme = css.createTheme(colors, {
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  fixedDark: '#000000',
   // A fixed translucent white over content (the light counterpart of scrim).
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   // The opposite tone of the theme: a surface that stands out from the page

package/src/tokens/colors.css.ts

@@ -59,6 +59,8 @@ export const colors = css.defineVars({
   inverseBorderHover: 'rgba(0, 0, 0, 0.70)',
   // A light that does not follow the theme (the Switch knob).
   fixedLight: '#ffffff',
+  // The fixed black, the same in every theme (video letterbox).
+  fixedDark: '#000000',
   // A fixed translucent white over content (the light counterpart of scrim).
   overlayLight: 'rgba(255, 255, 255, 0.78)',
   // The opposite tone of the theme: a surface that stands out from the page

package/src/tokens/sizes.css.ts

@@ -25,6 +25,14 @@ export const sizes = css.defineVars({
   iconLg: '24px',
   iconXl: '36px',
   iconXxl: '48px',
+  // A small square thumbnail (a file/media row preview).
+  thumbSm: '40px',
+  // Minimum width of a media grid tile.
+  mediaTileMinW: '108px',
+  // Upper bound a glyph scales up to inside its tile.
+  glyphClampMax: '160px',
+  // Width of a mm:ss time readout, so digits do not shift the layout.
+  timeReadoutW: '74px',
   navMarkerW: '3px',
   navMarkerH: '18px',
   divider: '1px',
@@ -88,4 +96,7 @@ export const sizes = css.defineVars({
   // AppShell's bar below its collapse point: a touch-target Menu button
   // between spacing.sm above and below, plus the hairline under it.
   appBarH: '61px',
+  // Drag-ghost thumbnail: the small preview image that follows the pointer.
+  dragThumbW: '132px',
+  dragThumbH: '99px',
 })