@justanarthur/modo-ui 0.6.0-canary.8 → 0.6.0

package/lib/size-scale.ts

@@ -1,115 +0,0 @@
-/*
- * 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

@@ -1,115 +0,0 @@
-/*
- * 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. `cloneSlot` / `mergeSlotProps` /
- * `composeRefs` are the other half: a wrapper clones its single child with its own props
- * merged in, as Radix's Slot does (the child's props win, handlers chain, `className`
- * joins, `style` merges, refs compose). `slotId` hands a slot element's `id` to the Base UI part
- * that wraps it, so the part registers that id rather than a generated one.
- */
-
-import {
-  type ButtonHTMLAttributes,
-  type CSSProperties,
-  cloneElement,
-  isValidElement,
-  type MutableRefObject,
-  type ReactElement,
-  type ReactNode,
-  type Ref,
-  version,
-} from 'react'
-
-interface SlotProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  /** The element that becomes the control, e.g. a Button. Children fill it when it has none of its own. */
-  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, or the content of a render element that has none of its own. */
-  children?: ReactNode
-  /** Whether the render element is a native `<button>`: pass `false` for a `<div>` or a link, so Base UI adds the button role and keyboard handling itself. Parts not built on a Base UI button ignore it. Defaults to `true`. */
-  nativeButton?: boolean
-}
-
-/**
- * The element a slot part renders: `render`, or the single child with `asChild`, or undefined for the
- * part's own button. Base UI semantics: `children` fill a render element that has no children of its own
- * (`render={<div/>}` + children → the div gets them); a render element's own children win.
- */
-function slotRender(render: ReactElement | undefined, asChild: boolean | undefined, children: ReactNode) {
-  if (render) {
-    const own = (render.props as { children?: ReactNode }).children
-    return children === undefined || own !== undefined ? render : cloneElement(render, undefined, children)
-  }
-  return asChild && isValidElement(children) ? children : undefined
-}
-
-/**
- * The `id` a Base UI part should register: the slot element's own `id` when it has one, else the part's.
- * Base UI merges a render element's props over its own, so an element `id` lands on the DOM node
- * regardless; passing it to the part as well makes Base UI track that same id (a trigger's id is how its
- * menu or popup finds it) instead of a generated one that no element carries.
- */
-function slotId(element: unknown, id?: string): string | undefined {
-  const own = isValidElement(element) ? (element.props as { id?: unknown }).id : undefined
-  return typeof own === 'string' ? own : id
-}
-
-/** Calls every ref: callback refs with the node, object refs by assigning it. */
-function composeRefs<T>(...refs: (Ref<T> | undefined | null)[]): (node: T | null) => void {
-  return node => {
-    for (const ref of refs) {
-      if (typeof ref === 'function') ref(node)
-      else if (ref) (ref as MutableRefObject<T | null>).current = node
-    }
-  }
-}
-
-/** A child's ref: React 19 keeps it in `props.ref`, React 18 on the element; each warns when read the other way. */
-const REACT_19 = parseInt(version, 10) >= 19
-
-function elementRef(element: ReactElement): Ref<unknown> | undefined {
-  if (REACT_19) return (element.props as { ref?: Ref<unknown> }).ref
-  return (element as { ref?: Ref<unknown> }).ref
-}
-
-/**
- * Props for a slotted child, with Radix Slot semantics: the child's props win,
- * `on*` handlers are chained (the child's first), `className` is joined and
- * `style` is merged (the child's declarations win).
- */
-function mergeSlotProps(slotProps: Record<string, unknown>, childProps: Record<string, unknown>) {
-  const merged: Record<string, unknown> = { ...slotProps, ...childProps }
-  for (const key of Object.keys(childProps)) {
-    const own = childProps[key]
-    const given = slotProps[key]
-    if (/^on[A-Z]/.test(key)) {
-      if (typeof given !== 'function') continue
-      if (typeof own === 'function') {
-        merged[key] = (...args: unknown[]) => {
-          own(...args)
-          given(...args)
-        }
-      } else merged[key] = given
-    } else if (key === 'style') {
-      merged[key] = { ...(given as CSSProperties | undefined), ...(own as CSSProperties | undefined) }
-    } else if (key === 'className') {
-      merged[key] = [given, own].filter(Boolean).join(' ')
-    }
-  }
-  return merged
-}
-
-/**
- * Clones `child` with the slot's props merged in (see `mergeSlotProps`) and the slot's ref composed
- * with the child's own, the way Radix's `Slot` composes onto its single child.
- */
-function cloneSlot(child: ReactElement, slotProps: Record<string, unknown> = {}, slotRef?: Ref<unknown>) {
-  const own = elementRef(child)
-  const props = mergeSlotProps(slotProps, child.props as Record<string, unknown>)
-  return cloneElement(child, slotRef || own ? { ...props, ref: composeRefs(slotRef, own) } : props)
-}
-
-export type { SlotProps }
-export { cloneSlot, composeRefs, mergeSlotProps, slotId, slotRender }

package/lib/springs.ts

@@ -1,62 +0,0 @@
-/*
- * 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

@@ -1,58 +0,0 @@
-/*
- * 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

@@ -1,21 +0,0 @@
-/*
- * 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

@@ -1,44 +0,0 @@
-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]
-}