@justanarthur/modo-ui 0.5.0 → 0.6.0-canary.0

package/lib/size-context.tsx

@@ -0,0 +1,66 @@
+// biome-ignore-all lint: vendored upstream code keeps its own patterns (see the header)
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/size-context.tsx` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `"use client"` directive dropped (no RSC here).
+ * - `SizeProvider` moved to `primitives/sizes/index.tsx`, the documented
+ *   item (sized components import it from there); `SizeContext` exported for it.
+ * - `sizeMap`, `typeScale` and their types moved to `lib/size-scale.ts` (plain
+ *   data a server module can import) and re-exported here; their text classes
+ *   read DS tokens (`text-[13px]` / `text-[12px]` → `text-body` / `text-body-compact`).
+ */
+
+import { createContext, useContext } from 'react'
+import {
+  type SizeClasses,
+  type SizeVariant,
+  sizeMap,
+  type TypeScaleRole,
+  type TypeScaleStep,
+  typeScale,
+} from './size-scale'
+
+/** The type scale resolved for the active ladder step (px per role):
+ *  explicit override > surrounding SizeProvider > "default". */
+function useTypeScale(override?: SizeVariant | null): Record<TypeScaleRole, number> {
+  const variant = useSizeVariant(override)
+  return {
+    display: typeScale.display[variant],
+    title: typeScale.title[variant],
+    subtitle: typeScale.subtitle[variant],
+    body: typeScale.body[variant],
+    caption: typeScale.caption[variant],
+  }
+}
+
+interface SizeContextValue {
+  size: SizeVariant
+  setSize: (size: SizeVariant) => void
+  classes: SizeClasses
+}
+
+const SizeContext = createContext<SizeContextValue | null>(null)
+
+/** Resolve the active size variant: explicit prop > provider > "default". */
+function useSizeVariant(override?: SizeVariant | null): SizeVariant {
+  const ctx = useContext(SizeContext)
+  return override ?? ctx?.size ?? 'default'
+}
+
+/** Resolve size classes: explicit prop > provider > "default". */
+function useSize(override?: SizeVariant | null): SizeClasses {
+  return sizeMap[useSizeVariant(override)]
+}
+
+function useSizeContext() {
+  const ctx = useContext(SizeContext)
+  if (!ctx) throw new Error('useSizeContext must be used within a SizeProvider')
+  return ctx
+}
+
+export type { SizeClasses, SizeVariant, TypeScaleRole, TypeScaleStep }
+export { SizeContext, sizeMap, typeScale, useSize, useSizeContext, useSizeVariant, useTypeScale }

package/lib/size-scale.ts

@@ -0,0 +1,115 @@
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/size-context.tsx` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - The ladder's plain data (`sizeMap`, `typeScale` and their types), split out
+ *   of `lib/size-context.tsx` so server code can read it: no JSX, hooks or
+ *   contexts here. `size-context.tsx` re-exports all of it.
+ * - `sizeMap` text classes read DS tokens (AGENTS.md styling): `text-[13px]` /
+ *   `text-[12px]` → `text-body` / `text-body-compact`.
+ */
+
+type SizeVariant = 'default' | 'compact'
+
+interface SizeClasses {
+  /** The variant these classes belong to — handy for conditionals. */
+  variant: SizeVariant
+  /** Bounded control height — buttons, inputs, select triggers, subtle tabs —
+   *  AND list/menu rows (select options, dropdown, checkbox and radio rows).
+   *  One token by design: a popup row lines up with the trigger that opened
+   *  it because they share this height. */
+  control: string
+  /** `control` as a number, for consumers that need raw pixels. */
+  controlHeight: number
+  /** Tab trigger height inside a padded segmented list. Sized so
+   *  `segmentPad` + `segmentItem` adds back up to the control height —
+   *  the segmented control's outer box stays on the same ladder. */
+  segmentItem: string
+  /** Padding of the segmented list around its tabs. */
+  segmentPad: string
+  /** Body text inside controls. */
+  text: string
+  /** Horizontal padding of bounded controls (select trigger, inputs). */
+  px: string
+  /** Horizontal padding of list/menu rows, which sit inside a padded popup
+   *  or group and need less inset than a bounded control. */
+  itemPx: string
+  /** Gap between an icon / control glyph and its label, and between
+   *  neighbouring controls in a row (toolbars, filter bars, button
+   *  clusters). Density is spacing as much as control height, so the
+   *  compact step halves it. */
+  gap: string
+  /** Glyph size in px: leading/trailing icons inside controls, and the
+   *  checkbox square / radio circle. */
+  icon: number
+}
+
+const sizeMap: Record<SizeVariant, SizeClasses> = {
+  // 36px — the default control height. Matches a 13px label with comfortable
+  // breathing room and keeps controls a workable pointer target.
+  default: {
+    variant: 'default',
+    control: 'h-9',
+    controlHeight: 36,
+    segmentItem: 'h-7',
+    segmentPad: 'p-1',
+    text: 'text-body',
+    px: 'px-3',
+    itemPx: 'px-2',
+    gap: 'gap-2',
+    icon: 16,
+  },
+  // 28px — the compact height for dense surfaces: filter bars, toolbars,
+  // table headers, sidebars. One step down in text (12px) and icon (14px)
+  // so the whole control shrinks together, not just its box.
+  compact: {
+    variant: 'compact',
+    control: 'h-7',
+    controlHeight: 28,
+    segmentItem: 'h-6',
+    segmentPad: 'p-0.5',
+    text: 'text-body-compact',
+    px: 'px-2.5',
+    itemPx: 'px-1.5',
+    gap: 'gap-1',
+    icon: 14,
+  },
+}
+
+/** One role of the type scale: px per ladder step. */
+interface TypeScaleStep {
+  default: number
+  compact: number
+}
+
+/**
+ * Role-based type scale, per ladder step (px values).
+ *
+ * The default column is the system as shipped; the compact column steps each
+ * role down one notch so dense regions read as a smaller sibling of the same
+ * hierarchy, not a squeezed copy. `body`, `caption`, and `subtitle` are what
+ * the sized components already render through `SizeClasses.text` and their
+ * compact conditionals; `display` and `title` are the page-level roles
+ * for consumers composing their own screens.
+ */
+const typeScale = {
+  /** Page titles. */
+  display: { default: 28, compact: 24 },
+  /** Section headings, dialog titles. */
+  title: { default: 16, compact: 15 },
+  /** Card titles, chat bubbles, emphasized rows. */
+  subtitle: { default: 14, compact: 13 },
+  /** Control labels and body copy — `SizeClasses.text`. */
+  body: { default: 13, compact: 12 },
+  /** Secondary text: descriptions, meta rows, errors, eyebrows and group
+   *  labels (the former overline role — an uppercase or muted caption). */
+  caption: { default: 12, compact: 11 },
+} as const satisfies Record<string, TypeScaleStep>
+
+type TypeScaleRole = keyof typeof typeScale
+
+export type { SizeClasses, SizeVariant, TypeScaleRole, TypeScaleStep }
+export { sizeMap, typeScale }

package/lib/slot.ts

@@ -0,0 +1,25 @@
+/*
+ * Local addition (not part of Fluid Functionalism): the trigger / close slot
+ * shape FF's Dialog uses, shared by every overlay part that wraps a control.
+ * Both spellings compose: `render={<Button/>}` (Base UI's composition API) or
+ * Radix-style `asChild` with a single child element.
+ */
+
+import { type ButtonHTMLAttributes, isValidElement, type ReactElement, type ReactNode } from 'react'
+
+interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The element that becomes the control, e.g. a Button. */
+  render?: ReactElement
+  /** Compose onto the single child instead. Both spellings work in both flavors. Defaults to `false`. */
+  asChild?: boolean
+  /** Control content when there is no render element. */
+  children?: ReactNode
+}
+
+function slotRender(render: ReactElement | undefined, asChild: boolean | undefined, children: ReactNode) {
+  if (render) return render
+  return asChild && isValidElement(children) ? children : undefined
+}
+
+export type { SlotProps }
+export { slotRender }

package/lib/springs.ts

@@ -0,0 +1,62 @@
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/springs.ts` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `goo`: the morph engine's own tier (lib/use-morph.ts) for the goo effect,
+ *   slower than `slow` so the liquid neck stays on screen long enough to read.
+ *   It lands in about 200ms with a little bounce and closes on a spring, not
+ *   a tween, so the neck reforms on the way back.
+ * - `exitFallbackMs` also reads a spring exit's `visualDuration`.
+ */
+
+// Motion tokens. Each tier's value is the ENTER transition — a critically
+// damped spring, except the largest tier which keeps a little bounce. Its
+// `.exit` is the matching EXIT transition — a plain tween, no bounce, one tier
+// quicker — so a dismissal reads as crisp and final rather than replaying the
+// entrance in reverse.
+//
+//   transition={spring.fast}                              // enter
+//   exit={{ opacity: 0, transition: spring.fast.exit }}   // leave
+//
+// The bigger the thing that moves, the slower the spring. Never hand-write a
+// duration — always reach for a tier.
+export const spring = {
+  fast: {
+    type: 'spring' as const,
+    duration: 0.08,
+    bounce: 0,
+    exit: { duration: 0.06 },
+  },
+  // Critically damped: same perceived speed as a bouncier tier, but lands
+  // exactly with no overshoot — for short travel and panels/sheets that must
+  // settle precisely (dropdowns, tabs, drawers, merged selection backgrounds).
+  moderate: {
+    type: 'spring' as const,
+    duration: 0.16,
+    bounce: 0,
+    exit: { duration: 0.12 },
+  },
+  slow: {
+    type: 'spring' as const,
+    duration: 0.24,
+    bounce: 0.12,
+    exit: { duration: 0.16 },
+  },
+  goo: {
+    type: 'spring' as const,
+    visualDuration: 0.25,
+    bounce: 0.15,
+    exit: { type: 'spring' as const, visualDuration: 0.2, bounce: 0 },
+  },
+} as const
+
+// Fallback delay (ms) for deferred-unmount timers that guard an exit tween:
+// popups keep their portal mounted until onAnimationComplete fires, but a
+// throttled/background tab can stall the animation, so a timer force-unmounts
+// after the tier's exit duration plus a safety buffer. Deriving it here keeps
+// the timers in step with the tokens above.
+export const exitFallbackMs = (tier: { exit: { duration: number } | { visualDuration: number } }) =>
+  Math.round(('duration' in tier.exit ? tier.exit.duration : tier.exit.visualDuration) * 1000) + 100

package/lib/surface-classes.ts

@@ -0,0 +1,58 @@
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/surface-classes.ts` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `SURFACE_HOVER_BG`, `SURFACE_HOVER_SHADOW` and `surfaceHoverClasses`
+ *   dropped — only the omitted Sidebar used them.
+ * - The literal-lookup rationale below applies to UnoCSS unchanged: its
+ *   extractor also only sees whole class names in source.
+ */
+
+/**
+ * Static lookup tables for surface tokens.
+ *
+ * Tailwind v4's static scanner only generates utility classes for literal
+ * strings it sees in source. Template-literal class names like
+ * `bg-surface-${level}` are invisible to the scanner, so the matching
+ * utility never gets generated and the background renders transparent.
+ *
+ * Use these maps when picking a surface level at runtime:
+ *
+ *   <div className={surfaceClasses(level)} />
+ *
+ * Each entry below contains the literal class name, which is enough for
+ * Tailwind to detect and emit the utility.
+ */
+
+export const SURFACE_BG: Record<number, string> = {
+  1: 'bg-surface-1',
+  2: 'bg-surface-2',
+  3: 'bg-surface-3',
+  4: 'bg-surface-4',
+  5: 'bg-surface-5',
+  6: 'bg-surface-6',
+  7: 'bg-surface-7',
+  8: 'bg-surface-8',
+}
+
+export const SURFACE_SHADOW: Record<number, string> = {
+  1: 'shadow-surface-1',
+  2: 'shadow-surface-2',
+  3: 'shadow-surface-3',
+  4: 'shadow-surface-4',
+  5: 'shadow-surface-5',
+  6: 'shadow-surface-6',
+  7: 'shadow-surface-7',
+  8: 'shadow-surface-8',
+}
+
+export function surfaceClasses(bgLevel: number, shadowLevel: number = bgLevel): string {
+  // Round after clamping so a fractional level can't index out of the lookup
+  // tables (which would render "undefined undefined").
+  const bg = Math.round(Math.max(1, Math.min(8, bgLevel)))
+  const shadow = Math.round(Math.max(1, Math.min(8, shadowLevel)))
+  return `${SURFACE_BG[bg]} ${SURFACE_SHADOW[shadow]}`
+}

package/lib/surface-context.tsx

@@ -0,0 +1,21 @@
+/*
+ * Vendored from Fluid Functionalism — `registry/default/lib/surface-context.tsx` at
+ * github.com/mickadesign/fluid-functionalism@b3587bdbd83fc66c2a6aae3817ffb856cb09260b
+ * (fluidfunctionalism.com). MIT License © 2026 Micka Touillaud — see
+ * LICENSE.fluid-functionalism in this package.
+ *
+ * Local modifications:
+ * - `"use client"` directive dropped (no RSC here).
+ */
+
+import { createContext, type ReactNode, useContext } from 'react'
+
+const SurfaceContext = createContext<number>(1)
+
+export function useSurface(): number {
+  return useContext(SurfaceContext)
+}
+
+export function SurfaceProvider({ value, children }: { value: number; children: ReactNode }) {
+  return <SurfaceContext.Provider value={Math.max(1, Math.min(8, value))}>{children}</SurfaceContext.Provider>
+}

package/lib/use-controllable-state.ts

@@ -0,0 +1,44 @@
+import { useCallback, useRef, useState } from 'react'
+
+/*
+ * Local addition (not part of Fluid Functionalism): controlled + uncontrolled
+ * state the way Base UI components take it. Several FF wrappers are
+ * controlled-only (`checked`, `value`, `selectedIndex`, …); each gains a
+ * `default*` counterpart backed by this hook, so a component works with no
+ * state of its own in the caller.
+ *
+ * The component is controlled while `value !== undefined`: it renders
+ * `value` and only reports changes through `onChange`. Otherwise it keeps its
+ * own state, seeded from `defaultValue` (read once, like `useState`), and
+ * still reports every change. The setter is stable, accepts an updater
+ * function, and skips no-op updates (`Object.is`).
+ */
+export function useControllableState<T>(
+  value: T | undefined,
+  defaultValue: T,
+  onChange?: (value: T) => void,
+): [T, (next: T | ((prev: T) => T)) => void] {
+  const [internal, setInternal] = useState<T>(defaultValue)
+  const controlled = value !== undefined
+  const current = controlled ? (value as T) : internal
+
+  // Latest render's values, so the stable setter never reads a stale closure
+  // and back-to-back updater calls chain off each other.
+  const currentRef = useRef(current)
+  currentRef.current = current
+  const controlledRef = useRef(controlled)
+  controlledRef.current = controlled
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+
+  const setValue = useCallback((next: T | ((prev: T) => T)) => {
+    const prev = currentRef.current
+    const resolved = typeof next === 'function' ? (next as (prev: T) => T)(prev) : next
+    if (Object.is(resolved, prev)) return
+    currentRef.current = resolved
+    if (!controlledRef.current) setInternal(resolved)
+    onChangeRef.current?.(resolved)
+  }, [])
+
+  return [current, setValue]
+}