{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "gpuix-components", "type": "registry:lib", "title": "Runtime: components", "description": "The `@gpuixui/components` modules the component items import. Installed automatically with the component; not a component itself.", "author": "Cyberistic ", "dependencies": [ "@gpuix/native@0.11.0", "@gpuix/react@0.11.0", "effect@4.1.2", "react@^19.2.4" ], "registryDependencies": [ "https://gpuixui.sudokw.com/gpuix-icons.json", "https://gpuixui.sudokw.com/gpuix-motion.json", "https://gpuixui.sudokw.com/gpuix-primitives.json", "https://gpuixui.sudokw.com/gpuix-tokens.json", "https://gpuixui.sudokw.com/gpuix-tw.json" ], "files": [ { "path": "packages/components/src/authoring.ts", "target": "@ui/gpuixui/components/authoring.ts", "type": "registry:lib", "content": "export * from \"./internal/button.js\";\nexport * from \"./internal/controllable.js\";\nexport * from \"./internal/local-state.js\";\nexport * from \"./internal/measure.js\";\nexport * from \"./internal/pattern-field.js\";\nexport * from \"./internal/presence.js\";\nexport * from \"./internal/recipe.js\";\nexport * from \"./internal/scatter.js\";\nexport * from \"./internal/surface-box.js\";\nexport * from \"./internal/svg-pattern.js\";\nexport * from \"./internal/text.js\";\nexport * from \"./internal/theme.js\";\n" }, { "path": "packages/components/src/dropdown-menu.tsx", "target": "@ui/gpuixui/components/dropdown-menu.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport { useGpuix } from \"@gpuix/react\";\nimport type { PublicInstance } from \"@gpuix/react\";\nimport {\n FloatingLayer,\n floatingRootStyle,\n mergeStyles,\n type FloatingContentProps,\n} from \"@gpuix/react/floating\";\nimport {\n createContext,\n useCallback,\n useContext,\n useLayoutEffect,\n useMemo,\n useRef,\n type RefObject,\n} from \"react\";\nimport { Button, type ButtonProps } from \"./internal/button.js\";\nimport { useControllableState } from \"./internal/controllable.js\";\nimport {\n dismissTopLayer,\n isDismissalClick,\n pushDismissLayer,\n} from \"./internal/dismiss-layer.js\";\nimport { DismissScope, useDismissDepth } from \"./internal/dismiss-scope.js\";\nimport { isActivation, isDown, isUp, swallowsDefault } from \"./internal/key.js\";\nimport {\n assertParts,\n type PartChildren,\n type PartComponent,\n type PartsContract,\n} from \"./internal/parts.js\";\nimport {\n fadeFromAnchor,\n PresenceShield,\n presenceMotion,\n presenceStyle,\n useSurfacePresence,\n useSurfaceTiming,\n} from \"./internal/presence.js\";\nimport { useMergedRef } from \"./internal/ref.js\";\nimport { useTheme } from \"./internal/theme.js\";\nimport { usePlacement } from \"./internal/use-placement.js\";\nimport {\n MenuCheckboxItem,\n MenuGroup,\n MenuItem,\n MenuLabel,\n MenuRadioGroup,\n MenuRadioItem,\n MenuSeparator,\n} from \"./menu/item.js\";\nimport {\n MenuContext,\n MenuLeaving,\n useMenuContext,\n useMenuState,\n type MenuCloseReason,\n} from \"./menu/state.js\";\nimport { MenuSub, MenuSubContent, MenuSubTrigger } from \"./menu/sub.js\";\nimport { menuKeyHandlers, menuSurfaceStyle } from \"./menu/surface.js\";\n\ninterface DropdownContextValue {\n readonly open: boolean;\n readonly setOpen: (open: boolean) => void;\n readonly trigger: RefObject;\n\n readonly pendingFocus: RefObject<\"first\" | \"last\" | null>;\n}\n\nconst DropdownContext = createContext(\n undefined,\n);\n\nconst useDropdownContext = (): DropdownContextValue => {\n const value = useContext(DropdownContext);\n if (value === undefined) {\n throw new Error(\"DropdownMenu parts must be used inside DropdownMenu\");\n }\n return value;\n};\n\nexport interface DropdownMenuProps {\n readonly open?: boolean;\n\n readonly defaultOpen?: boolean;\n readonly onOpenChange?: (open: boolean) => void;\n readonly children?: PartChildren;\n}\n\nexport const DropdownMenu = ({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n children,\n}: DropdownMenuProps) => {\n const [open, setOpen] = useControllableState({\n value: openProp,\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n });\n const renderer = useGpuix().renderer;\n const trigger = useRef(null);\n const restoreFocus = useRef(false);\n const wasOpen = useRef(false);\n\n const pendingFocus = useRef<\"first\" | \"last\" | null>(null);\n\n const setOpenRef = useRef(setOpen);\n useLayoutEffect(() => {\n setOpenRef.current = setOpen;\n });\n\n const close = useCallback((reason: MenuCloseReason) => {\n restoreFocus.current = reason === \"activate\" || reason === \"dismiss\";\n if (reason === \"outside\") {\n }\n setOpenRef.current(false);\n }, []);\n\n const menu = useMenuState(close);\n\n const depth = useDismissDepth();\n useLayoutEffect(() => {\n if (!open) return;\n return pushDismissLayer((event) => {\n close(event.eventType === \"keyDown\" ? \"dismiss\" : \"outside\");\n }, depth);\n }, [close, depth, open]);\n\n useLayoutEffect(() => {\n if (open) {\n wasOpen.current = true;\n return;\n }\n if (!wasOpen.current) return;\n wasOpen.current = false;\n if (!restoreFocus.current) return;\n const target = trigger.current;\n if (target !== null) renderer?.focusElement?.(target.id);\n }, [open, renderer]);\n\n useLayoutEffect(() => {\n if (!open) pendingFocus.current = null;\n }, [open]);\n\n const context = useMemo(\n () => ({ open, setOpen, trigger, pendingFocus }),\n [open, setOpen],\n );\n\n assertParts(dropdownRoot, children);\n\n return (\n \n \n
{children}
\n \n \n );\n};\n\nexport const DropdownMenuTrigger = ({\n onClick,\n onKeyDown,\n onKeyUp,\n ref,\n disabled = false,\n ...rest\n}: ButtonProps) => {\n const { open, setOpen, trigger, pendingFocus } = useDropdownContext();\n const setTrigger = useMergedRef(trigger, ref);\n\n const openAt = (edge: \"first\" | \"last\"): void => {\n pendingFocus.current = edge;\n setOpen(true);\n };\n\n return (\n {\n if (!disabled && !open) {\n if (isDown(event)) openAt(\"first\");\n else if (isUp(event)) openAt(\"last\");\n else if (swallowsDefault(event, \"down\")) event.preventDefault();\n else if (isActivation(event, \"down\")) openAt(\"first\");\n }\n onKeyDown?.(event);\n }}\n onKeyUp={(event) => {\n if (!disabled && !open && isActivation(event, \"up\")) openAt(\"first\");\n onKeyUp?.(event);\n }}\n onClick={(event) => {\n onClick?.(event);\n\n pendingFocus.current = null;\n\n if (isDismissalClick(event)) return;\n setOpen(!open);\n }}\n />\n );\n};\n\nexport interface DropdownMenuContentProps extends FloatingContentProps {\n readonly label?: string;\n\n readonly className?: string;\n\n readonly side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n readonly align?: \"start\" | \"center\" | \"end\";\n\n readonly sideOffset?: number;\n\n readonly alignOffset?: number;\n readonly children?: PartChildren;\n}\n\nexport const DropdownMenuContent = ({\n label,\n className,\n side = \"bottom\",\n align = \"start\",\n sideOffset = 4,\n alignOffset = 0,\n collisionPadding = 8,\n children,\n onKeyDown,\n onKeyUp,\n onMouseDownOutside,\n style,\n ref,\n ...rest\n}: DropdownMenuContentProps) => {\n const theme = useTheme();\n const { open, trigger, pendingFocus } = useDropdownContext();\n const menu = useMenuContext();\n const keys = menuKeyHandlers(menu);\n const surface = useRef(null);\n const setSurface = useMergedRef(surface, ref);\n const timing = useSurfaceTiming(\"normal\");\n const presence = useSurfacePresence(open, timing);\n const placement = usePlacement({\n open: presence.mounted,\n side,\n align,\n margin: collisionPadding,\n trigger,\n surface,\n });\n assertParts(dropdownContent, children);\n\n useLayoutEffect(() => {\n if (!open) return;\n const edge = pendingFocus.current;\n if (edge === null || menu.rows.length === 0) return;\n pendingFocus.current = null;\n menu.step({ _tag: edge === \"first\" ? \"First\" : \"Last\" });\n }, [menu, open, pendingFocus]);\n\n if (!presence.mounted) return null;\n\n return (\n {\n onMouseDownOutside?.(event);\n dismissTopLayer(event);\n }}\n onKeyDown={(event) => {\n keys.onKeyDown(event);\n onKeyDown?.(event);\n }}\n onKeyUp={(event) => {\n keys.onKeyUp(event);\n onKeyUp?.(event);\n }}\n style={mergeStyles(\n mergeStyles(\n menuSurfaceStyle(theme, className),\n\n { position: \"relative\", ...presenceStyle(presence.present) },\n ),\n style,\n )}\n >\n \n {children}\n \n \n \n );\n};\n\nexport {\n MenuSub as DropdownMenuSub,\n MenuSubContent as DropdownMenuSubContent,\n MenuSubTrigger as DropdownMenuSubTrigger,\n} from \"./menu/sub.js\";\n\nexport type {\n MenuSubContentProps as DropdownMenuSubContentProps,\n MenuSubProps as DropdownMenuSubProps,\n MenuSubTriggerProps as DropdownMenuSubTriggerProps,\n} from \"./menu/sub.js\";\n\nexport {\n MenuCheckboxItem as DropdownMenuCheckboxItem,\n MenuGroup as DropdownMenuGroup,\n MenuItem as DropdownMenuItem,\n MenuLabel as DropdownMenuLabel,\n MenuRadioGroup as DropdownMenuRadioGroup,\n MenuRadioItem as DropdownMenuRadioItem,\n MenuSeparator as DropdownMenuSeparator,\n};\n\nexport type {\n MenuCheckboxItemProps as DropdownMenuCheckboxItemProps,\n MenuItemProps as DropdownMenuItemProps,\n MenuRadioGroupProps as DropdownMenuRadioGroupProps,\n MenuRadioItemProps as DropdownMenuRadioItemProps,\n} from \"./menu/item.js\";\n\nconst dropdownParts: ReadonlyArray = [\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuRadioItem,\n MenuGroup,\n MenuLabel,\n MenuSeparator,\n MenuSub,\n MenuSubTrigger,\n MenuSubContent,\n];\n\nconst dropdownRoot: PartsContract = {\n parent: \"DropdownMenu\",\n family: dropdownParts,\n accepts: [DropdownMenuTrigger, DropdownMenuContent],\n hint: \"Put DropdownMenuTrigger and DropdownMenuContent directly inside DropdownMenu.\",\n};\n\nconst dropdownContent: PartsContract = {\n parent: \"DropdownMenuContent\",\n family: dropdownParts,\n accepts: [\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuGroup,\n MenuLabel,\n MenuSeparator,\n MenuSub,\n ],\n hint: \"Put rows, groups, labels, separators and submenus directly inside DropdownMenuContent.\",\n};\n\nexport const dropdownMenuMeta = {\n name: \"Dropdown menus\",\n tier: 2,\n status: \"done\",\n gpuixSupport: \"partial\",\n limitations: [\n \"one level of submenus is tested; deeper nesting follows the same rule but is untested\",\n 'the root surface flips once when snapping would cover its trigger, and align=\"center\" is measured from the trigger; the snap margin wins near a window edge',\n 'submenus open to the right and are clamped by fit=\"snap\"; there is no left-side flip',\n \"no aria-haspopup in 0.11.0; a submenu trigger announces aria-expanded only\",\n \"type-ahead is a case-insensitive 500 ms prefix search with no fuzzy scoring; a composed label needs textValue\",\n \"the checkbox and radio rows use aria-selected and a check icon because 0.11.0 has no aria-checked\",\n \"a radio group is controlled: the popup unmounts when it closes, so the caller owns the choice\",\n ],\n docs: \"docs/dropdown-menu.mdx\",\n example: \"examples/dropdown-menu.example.tsx\",\n testFile: \"src/behaviour/dropdown-menu.test.tsx\",\n} as const;\n" }, { "path": "packages/components/src/image-zoom.tsx", "target": "@ui/gpuixui/components/image-zoom.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { EventPayload, Props } from \"@gpuix/react\";\nimport {\n mergeStyles,\n resolveStyle,\n type StateStyle,\n} from \"@gpuix/react/floating\";\nimport type { MotionLevel } from \"../motion/timing.js\";\nimport { cn } from \"../tw/index.js\";\nimport * as Option from \"effect/Option\";\nimport {\n zoomFollow,\n zoomFrames,\n zoomGeometry,\n zoomRest,\n} from \"./image-zoom/logic.js\";\nimport { makeZoomStore } from \"./image-zoom/store.js\";\nimport { send, useLocalState, useLocalStore } from \"./internal/local-state.js\";\nimport { measuredPoint } from \"./internal/measure.js\";\nimport { nameOf } from \"./internal/text.js\";\nimport { useMotionPreference, useSurfaceTiming } from \"./internal/presence.js\";\nimport { recipeStyle } from \"./internal/recipe.js\";\nimport { surfaceOriginStyle, useSurfaceBox } from \"./internal/surface-box.js\";\nimport { useTheme, type Theme } from \"./internal/theme.js\";\n\nconst PICTURE_NAME = \"Picture\";\n\nconst cornerOf = (radius: Option.Option, theme: Theme): number =>\n Option.match(radius, {\n onNone: () => theme.radius.md,\n onSome: (value) =>\n Number.isFinite(value) && value >= 0 ? value : theme.radius.md,\n });\n\nexport interface ImageZoomState {\n readonly zoomed: boolean;\n readonly reducedMotion: boolean;\n}\n\nexport interface ImageZoomProps extends Omit {\n readonly src: string;\n\n readonly alt: string;\n\n readonly width?: number;\n\n readonly height?: number;\n\n readonly scale?: number;\n\n readonly radius?: number;\n\n readonly level?: MotionLevel;\n\n readonly className?: string;\n\n readonly style?: StateStyle;\n}\n\nexport const ImageZoom = ({\n src,\n alt,\n width,\n height,\n scale,\n radius,\n level = \"normal\",\n className,\n style,\n onMouseMove,\n onMouseLeave,\n onLayout,\n ...rest\n}: ImageZoomProps) => {\n const theme = useTheme();\n const preference = useMotionPreference();\n const timing = useSurfaceTiming(level).enter;\n const geometry = zoomGeometry({\n width: Option.fromNullishOr(width),\n height: Option.fromNullishOr(height),\n scale: Option.fromNullishOr(scale),\n });\n const store = useLocalStore(makeZoomStore);\n const pointer = useLocalState(store.local);\n const surface = useSurfaceBox();\n\n const box = Option.match(Option.all({ pointer, surface: surface.box }), {\n onNone: () => zoomRest(geometry),\n onSome: ({ pointer, surface }) => zoomFollow(geometry, surface, pointer),\n });\n\n const measure = (event: EventPayload) => {\n surface.measure(event);\n onLayout?.(event);\n };\n\n const follow = (event: EventPayload) => {\n onMouseMove?.(event);\n surface.read();\n Option.match(measuredPoint(event), {\n onNone: () => undefined,\n onSome: (point) => send(store.follow(point)),\n });\n };\n\n const leave = (event: EventPayload) => {\n onMouseLeave?.(event);\n send(store.leave);\n };\n\n const corner = cornerOf(Option.fromNullishOr(radius), theme);\n const pictureName = nameOf(alt) ?? PICTURE_NAME;\n const state: ImageZoomState = {\n zoomed: Option.isSome(pointer) && geometry.scale > 1,\n reducedMotion: preference === \"reduced\",\n };\n\n return (\n \n \n \n \n );\n};\n\nexport const imageZoomMeta = {\n name: \"Image zoom\",\n tier: 5,\n status: \"done\",\n gpuixSupport: \"partial\",\n limitations: [\n \"the magnification is a box the picture scales itself into plus a left/top pan, not a transform: the runtime has no transform (upstream issue #102)\",\n \"the pointer drives it; there is no wheel, pinch or drag-to-pan gesture, and the image publishes one image node with no tab stop\",\n \"the frame is fixed: a responsive gallery passes a measured width and height rather than a percentage\",\n \"the pan follows the box the frame reported; a 1px probe at its origin re-reports it on every pointer read, because onLayout reports a size change and not a move\",\n \"a magnified picture shows the buffer the host decoded, so a very large factor is soft where the source is small\",\n ],\n docs: \"docs/image-zoom.mdx\",\n example: \"examples/image-zoom.example.tsx\",\n testFile: \"src/behaviour/image-zoom.test.tsx\",\n} as const;\n" }, { "path": "packages/components/src/image-zoom/logic.ts", "target": "@ui/gpuixui/components/image-zoom/logic.ts", "type": "registry:lib", "content": "import type { MotionStyle } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport interface ZoomSize {\n readonly width: number;\n readonly height: number;\n}\n\nexport interface ZoomSurface {\n readonly x: number;\n readonly y: number;\n readonly width: number;\n readonly height: number;\n}\n\nexport interface ZoomPointer {\n readonly x: number;\n readonly y: number;\n}\n\nexport interface ZoomBox {\n readonly left: number;\n readonly top: number;\n readonly width: number;\n readonly height: number;\n}\n\nexport interface ZoomGeometry {\n readonly frameWidth: number;\n readonly frameHeight: number;\n readonly scale: number;\n}\n\nexport const imageZoomFrame: ZoomSize = { width: 240, height: 160 };\n\nexport const imageZoomScale = 1.6;\n\nexport const imageZoomMaxScale = 4;\n\nexport const zoomRest = (geometry: ZoomGeometry): ZoomBox => ({\n left: 0,\n top: 0,\n width: geometry.frameWidth,\n height: geometry.frameHeight,\n});\n\nconst usable = (\n value: Option.Option,\n low: number,\n fallback: number,\n): number =>\n Option.match(value, {\n onNone: () => fallback,\n onSome: (number) =>\n Number.isFinite(number) && number >= low ? number : fallback,\n });\n\nconst finite = (value: Option.Option, fallback: number): number =>\n Option.match(value, {\n onNone: () => fallback,\n onSome: (number) => (Number.isFinite(number) ? number : fallback),\n });\n\nconst between = (value: number, low: number, high: number): number =>\n Math.min(high, Math.max(low, value));\n\nconst tenth = (value: number): number => {\n const rounded = Math.round(value * 10) / 10;\n return rounded === 0 ? 0 : rounded;\n};\n\nexport const zoomGeometry = (input: {\n readonly width: Option.Option;\n readonly height: Option.Option;\n readonly scale: Option.Option;\n}): ZoomGeometry => ({\n frameWidth: usable(input.width, 1, imageZoomFrame.width),\n frameHeight: usable(input.height, 1, imageZoomFrame.height),\n scale: between(finite(input.scale, imageZoomScale), 1, imageZoomMaxScale),\n});\n\nconst fraction = (offset: number, size: number): number =>\n size > 0 ? between(offset / size, 0, 1) : 0.5;\n\nexport const zoomFollow = (\n geometry: ZoomGeometry,\n frame: ZoomSurface,\n pointer: ZoomPointer,\n): ZoomBox => {\n const across = fraction(pointer.x - frame.x, frame.width);\n const down = fraction(pointer.y - frame.y, frame.height);\n const width = tenth(geometry.frameWidth * geometry.scale);\n const height = tenth(geometry.frameHeight * geometry.scale);\n\n return {\n left: tenth(-across * (width - geometry.frameWidth)),\n top: tenth(-down * (height - geometry.frameHeight)),\n width,\n height,\n };\n};\n\nexport const zoomFrames = (box: ZoomBox): MotionStyle => ({\n left: box.left,\n top: box.top,\n width: box.width,\n height: box.height,\n});\n\nexport const sameZoom = (a: ZoomBox, b: ZoomBox): boolean =>\n a.left === b.left &&\n a.top === b.top &&\n a.width === b.width &&\n a.height === b.height;\n\nexport const samePointer = (a: ZoomPointer, b: ZoomPointer): boolean =>\n a.x === b.x && a.y === b.y;\n" }, { "path": "packages/components/src/image-zoom/store.ts", "target": "@ui/gpuixui/components/image-zoom/store.ts", "type": "registry:lib", "content": "import { Effect } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport * as SubscriptionRef from \"effect/SubscriptionRef\";\nimport { makeLocalState, type LocalState } from \"../internal/local-state.js\";\nimport { samePointer, type ZoomPointer } from \"./logic.js\";\n\nexport interface ZoomStore {\n readonly local: LocalState>;\n\n readonly follow: (point: ZoomPointer) => Effect.Effect;\n\n readonly leave: Effect.Effect;\n}\n\nexport const makeZoomStore: Effect.Effect = Effect.gen(function* () {\n const local = yield* makeLocalState>(\n Option.none(),\n );\n\n const follow = Effect.fnUntraced(function* (point: ZoomPointer) {\n const held = yield* SubscriptionRef.get(local.state);\n if (Option.exists(held, (previous) => samePointer(previous, point))) return;\n yield* local.write(Option.some(point));\n });\n\n const leave = Effect.gen(function* () {\n const held = yield* SubscriptionRef.get(local.state);\n if (Option.isNone(held)) return;\n yield* local.write(Option.none());\n });\n\n return { local, follow, leave };\n});\n" }, { "path": "packages/components/src/internal/button.tsx", "target": "@ui/gpuixui/components/internal/button.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props } from \"@gpuix/react\";\nimport type { ReactNode } from \"react\";\nimport {\n Button as PrimitiveButton,\n IconButton as PrimitiveIconButton,\n actionOnColor as primitiveActionOnColor,\n type ButtonVariant as PrimitiveVariant,\n} from \"../../primitives/button.js\";\nimport { cn } from \"../../tw/index.js\";\nimport * as Schema from \"effect/Schema\";\nimport type { Theme } from \"./theme.js\";\n\nconst ButtonVariants = Schema.Literals([\n \"primary\",\n \"secondary\",\n \"ghost\",\n \"danger\",\n \"link\",\n]);\n\nexport type ButtonVariant = typeof ButtonVariants.Type;\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps extends Props {\n readonly variant?: ButtonVariant;\n\n readonly size?: ButtonSize;\n\n readonly disabled?: boolean;\n\n readonly loading?: boolean;\n\n readonly loadingLabel?: string;\n\n readonly reducedMotion?: boolean;\n\n readonly leading?: ReactNode;\n\n readonly trailing?: ReactNode;\n}\n\nexport interface IconButtonProps extends Props {\n readonly label: string;\n\n readonly size?: ButtonSize;\n readonly disabled?: boolean;\n}\n\ninterface Look {\n readonly variant: PrimitiveVariant;\n readonly className: string;\n}\n\nconst LOOKS: Readonly> = {\n primary: { variant: \"primary\", className: \"\" },\n secondary: { variant: \"secondary\", className: \"border border-strong\" },\n ghost: { variant: \"ghost\", className: \"\" },\n danger: { variant: \"destructive\", className: \"\" },\n\n link: { variant: \"link\", className: \"underline underline-offset-4\" },\n};\n\nconst lookOf = (variant: unknown): Look =>\n LOOKS[Schema.is(ButtonVariants)(variant) ? variant : \"secondary\"];\n\nexport const actionOnColor = (theme: Theme, variant: ButtonVariant): string =>\n primitiveActionOnColor(theme, lookOf(variant).variant);\n\nexport const Button = ({\n variant = \"secondary\",\n size = \"md\",\n disabled = false,\n onClick,\n style,\n \"aria-label\": ariaLabel,\n ...rest\n}: ButtonProps) => {\n const look = lookOf(variant);\n return (\n \n );\n};\n\nexport const IconButton = ({\n label,\n size = \"md\",\n disabled = false,\n onClick,\n style,\n children,\n ...rest\n}: IconButtonProps) => (\n \n);\n" }, { "path": "packages/components/src/internal/clock.ts", "target": "@ui/gpuixui/components/internal/clock.ts", "type": "registry:lib", "content": "import { Effect } from \"effect\";\nimport * as Clock from \"effect/Clock\";\n\nexport const monotonicNanos = (): bigint =>\n Effect.runSync(Clock.monotonicTimeNanos);\n\nexport const hoverDelay = (value: number, fallback: number): number =>\n Number.isFinite(value) ? Math.max(0, value) : fallback;\n" }, { "path": "packages/components/src/internal/collection.ts", "target": "@ui/gpuixui/components/internal/collection.ts", "type": "registry:lib", "content": "import * as Arr from \"effect/Array\";\nimport * as Option from \"effect/Option\";\nimport { pipe } from \"effect\";\n\nexport interface CollectionItem {\n readonly id: number;\n readonly disabled: boolean;\n}\n\nexport interface Collection {\n readonly register: (item: CollectionItem) => () => void;\n\n readonly items: () => ReadonlyArray;\n}\n\nexport interface ValueItem extends CollectionItem {\n readonly value: string;\n}\n\nexport const upsertValue = (\n items: ReadonlyArray,\n item: Item,\n): ReadonlyArray =>\n Arr.some(items, (existing) => existing.value === item.value)\n ? Arr.map(items, (existing) =>\n existing.value === item.value ? item : existing,\n )\n : Arr.append(items, item);\n\nexport const insert = (\n items: ReadonlyArray,\n item: CollectionItem,\n): ReadonlyArray =>\n Arr.some(items, (existing) => existing.id === item.id)\n ? Arr.map(items, (existing) => (existing.id === item.id ? item : existing))\n : Arr.append(items, item);\n\nexport const remove = (\n items: ReadonlyArray,\n id: number,\n): ReadonlyArray =>\n Arr.filter(items, (existing) => existing.id !== id);\n\nexport const enabledIndexes = (\n items: ReadonlyArray,\n): ReadonlyArray =>\n Arr.map(\n Arr.filter(\n Arr.map(items, (item, index) => ({ index, disabled: item.disabled })),\n (entry) => !entry.disabled,\n ),\n (entry) => entry.index,\n );\n\nconst nth = (\n indexes: ReadonlyArray,\n position: number,\n): Option.Option => Option.fromNullishOr(indexes[position]);\n\nexport const firstEnabled = (\n items: ReadonlyArray,\n): Option.Option => nth(enabledIndexes(items), 0);\n\nexport const lastEnabled = (\n items: ReadonlyArray,\n): Option.Option =>\n pipe(nth(enabledIndexes(items), Arr.length(enabledIndexes(items)) - 1));\n\nexport const indexOfId = (\n items: ReadonlyArray,\n id: number,\n): Option.Option => Arr.findFirstIndex(items, (item) => item.id === id);\n\nexport const nextEnabled = (\n items: ReadonlyArray,\n current: Option.Option,\n delta: 1 | -1,\n): Option.Option => {\n const pool = enabledIndexes(items);\n const size = Arr.length(pool);\n if (size === 0) return Option.none();\n\n const step = (position: number) =>\n nth(pool, (position + delta + size) % size);\n\n return pipe(\n current,\n Option.match({\n onNone: () => (delta > 0 ? nth(pool, 0) : nth(pool, size - 1)),\n onSome: (index) =>\n pipe(\n Arr.findFirstIndex(pool, (candidate) => candidate === index),\n Option.match({\n onSome: step,\n onNone: () =>\n delta > 0\n ? pipe(\n Arr.findFirst(pool, (candidate) => candidate > index),\n Option.orElse(() => nth(pool, 0)),\n )\n : pipe(\n Arr.findLast(pool, (candidate) => candidate < index),\n Option.orElse(() => nth(pool, size - 1)),\n ),\n }),\n ),\n }),\n );\n};\n\nexport const createCollection = (): Collection => {\n let entries: ReadonlyArray = [];\n return {\n register: (item) => {\n entries = insert(entries, item);\n return () => {\n entries = remove(entries, item.id);\n };\n },\n items: () => entries,\n };\n};\n" }, { "path": "packages/components/src/internal/controllable.ts", "target": "@ui/gpuixui/components/internal/controllable.ts", "type": "registry:lib", "content": "import { useCallback, useState } from \"react\";\n\nexport type ControllableState = readonly [Value, (next: Value) => void];\n\nexport interface ControllableStateOptions {\n readonly value: Value | undefined;\n\n readonly defaultValue: Value;\n\n readonly onChange?: (next: Value) => void;\n}\n\nexport const useControllableState = ({\n value,\n defaultValue,\n onChange,\n}: ControllableStateOptions): ControllableState => {\n const [internal, setInternal] = useState(defaultValue);\n const controlled = value !== undefined;\n\n const setValue = useCallback(\n (next: Value) => {\n if (!controlled) setInternal(next);\n if (value !== next) onChange?.(next);\n },\n [controlled, value, onChange],\n );\n\n return [controlled ? value : internal, setValue];\n};\n" }, { "path": "packages/components/src/internal/dismiss-layer.ts", "target": "@ui/gpuixui/components/internal/dismiss-layer.ts", "type": "registry:lib", "content": "import type { EventPayload } from \"@gpuix/react\";\nimport * as Arr from \"effect/Array\";\nimport * as Duration from \"effect/Duration\";\nimport * as Option from \"effect/Option\";\nimport * as Order from \"effect/Order\";\nimport { monotonicNanos } from \"./clock.js\";\n\nexport type DismissHandler = (event: EventPayload) => void;\n\ninterface Layer {\n readonly onDismiss: DismissHandler;\n readonly depth: number;\n}\n\nlet layers: ReadonlyArray = [];\n\nlet dismissedKeystroke: Option.Option = Option.none();\n\ninterface Press {\n readonly shape: string;\n readonly at: bigint;\n}\n\nlet dismissedPress: Option.Option = Option.none();\n\nexport const pointerGestureWindow: Duration.Duration = Duration.millis(64);\n\nconst PRESS_WINDOW_NANOS =\n BigInt(Duration.toMillis(pointerGestureWindow)) * 1_000_000n;\n\nconst pressShape = (event: EventPayload): string =>\n Arr.join(\":\")(\n Arr.map(\n [event.eventType, event.x, event.y, event.button, event.clickCount],\n (part) => (part === undefined ? \"\" : `${part}`),\n ),\n );\n\nconst consumedPress = (event: EventPayload, now: bigint): boolean => {\n const shape = pressShape(event);\n const repeated = Option.exists(\n dismissedPress,\n (press) => press.shape === shape && now - press.at <= PRESS_WINDOW_NANOS,\n );\n if (!repeated) dismissedPress = Option.some({ shape, at: now });\n return repeated;\n};\n\nlet lastDismissedPoint: Option.Option<{\n readonly point: string;\n readonly at: bigint;\n}> = Option.none();\n\nconst pointOf = (event: EventPayload): string =>\n Arr.join(\":\")(\n Arr.map([event.x, event.y, event.button], (part) =>\n part === undefined ? \"\" : `${part}`,\n ),\n );\n\nexport const isDismissalClick = (\n event: EventPayload,\n now: bigint = monotonicNanos(),\n): boolean =>\n Option.exists(\n lastDismissedPoint,\n (dismissed) =>\n dismissed.point === pointOf(event) &&\n now - dismissed.at <= PRESS_WINDOW_NANOS,\n );\n\nconst consumedKeystroke = (keystrokeId: number): boolean => {\n if (Option.contains(dismissedKeystroke, keystrokeId)) return true;\n dismissedKeystroke = Option.some(keystrokeId);\n return false;\n};\n\nconst consume = (event: EventPayload, now: bigint): boolean =>\n Option.match(Option.fromNullishOr(event.keystrokeId), {\n onNone: () => consumedPress(event, now),\n onSome: consumedKeystroke,\n });\n\nconst byDepth: Order.Order = Order.mapInput(\n Order.Number,\n (layer: Layer) => layer.depth,\n);\n\nconst topmost = (): Option.Option =>\n Option.map(Arr.last(Arr.sort(layers, byDepth)), (layer) => layer.onDismiss);\n\nexport const pushDismissLayer = (\n onDismiss: DismissHandler,\n depth: number,\n): (() => void) => {\n const layer: Layer = { onDismiss, depth };\n layers = Arr.append(layers, layer);\n return () => {\n layers = Arr.filter(layers, (candidate) => candidate !== layer);\n if (Arr.length(layers) === 0) {\n dismissedKeystroke = Option.none();\n dismissedPress = Option.none();\n }\n };\n};\n\nexport const dismissTopLayer = (\n event: EventPayload,\n now: bigint = monotonicNanos(),\n): boolean => {\n if (consume(event, now)) return false;\n return Option.match(topmost(), {\n onNone: () => false,\n onSome: (onDismiss) => {\n lastDismissedPoint = Option.some({ point: pointOf(event), at: now });\n onDismiss(event);\n return true;\n },\n });\n};\n\nexport const dismissLayerCount = (): number => Arr.length(layers);\n" }, { "path": "packages/components/src/internal/dismiss-scope.tsx", "target": "@ui/gpuixui/components/internal/dismiss-scope.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport { createContext, useContext, type ReactNode } from \"react\";\n\nconst AmbientDepth = createContext(0);\n\nexport const useDismissDepth = (): number => useContext(AmbientDepth) + 1;\n\nexport const DismissScope = ({\n children,\n}: {\n readonly children: ReactNode;\n}) => (\n \n {children}\n \n);\n" }, { "path": "packages/components/src/internal/event-claim.ts", "target": "@ui/gpuixui/components/internal/event-claim.ts", "type": "registry:lib", "content": "import type { EventPayload } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\ninterface KeyClaim {\n readonly eventType: string;\n readonly key: string | undefined;\n readonly keyChar: string | undefined;\n readonly modifiers: string;\n}\n\nlet claim: Option.Option = Option.none();\n\nconst modifiersOf = (event: EventPayload): string => {\n const modifiers = event.modifiers;\n return [\n modifiers?.cmd === true ? \"cmd\" : \"\",\n modifiers?.ctrl === true ? \"ctrl\" : \"\",\n modifiers?.alt === true ? \"alt\" : \"\",\n modifiers?.shift === true ? \"shift\" : \"\",\n ].join(\"+\");\n};\n\nconst claimOf = (event: EventPayload): KeyClaim => ({\n eventType: event.eventType,\n key: event.key,\n keyChar: event.keyChar,\n modifiers: modifiersOf(event),\n});\n\nconst sameClaim = (left: KeyClaim, right: KeyClaim): boolean =>\n left.eventType === right.eventType &&\n left.key === right.key &&\n left.keyChar === right.keyChar &&\n left.modifiers === right.modifiers;\n\nexport const claimEvent = (event: EventPayload): void => {\n claim = Option.some(claimOf(event));\n queueMicrotask(() => {\n claim = Option.none();\n });\n};\n\nexport const isEventClaimed = (event: EventPayload): boolean =>\n Option.match(claim, {\n onNone: () => false,\n onSome: (current) => {\n if (!sameClaim(current, claimOf(event))) return false;\n\n claim = Option.none();\n return true;\n },\n });\n" }, { "path": "packages/components/src/internal/hover.ts", "target": "@ui/gpuixui/components/internal/hover.ts", "type": "registry:lib", "content": "import { Effect } from \"effect\";\nimport { useRef } from \"react\";\nimport { makeLocalState, send, useLocalStore } from \"./local-state.js\";\n\nexport type HoverSurfaceName = \"trigger\" | \"content\";\n\ninterface HoverHold {\n readonly pointer: Readonly>;\n readonly focus: Readonly>;\n}\n\nconst released: HoverHold = {\n pointer: { trigger: false, content: false },\n focus: { trigger: false, content: false },\n};\n\nconst holdStore = Effect.map(makeLocalState(released), (local) => ({\n local,\n}));\n\nexport interface HoverTiming {\n readonly open: boolean;\n readonly setOpen: (open: boolean) => void;\n\n readonly openDelay: number;\n\n readonly closeDelay: number;\n}\n\nexport interface HoverControls {\n readonly pointer: (surface: HoverSurfaceName, present: boolean) => void;\n\n readonly focus: (surface: HoverSurfaceName, present: boolean) => void;\n\n readonly cancel: () => void;\n\n readonly cancelOpening: () => void;\n\n readonly request: (open: boolean) => void;\n\n readonly held: () => boolean;\n}\n\nconst holds = (hold: HoverHold): boolean =>\n hold.pointer.trigger ||\n hold.pointer.content ||\n hold.focus.trigger ||\n hold.focus.content;\n\nexport const useHoverDelays = (timing: HoverTiming): HoverControls => {\n const { local } = useLocalStore(holdStore);\n const latest = useRef(timing);\n latest.current = timing;\n\n const cancel = (): void => {\n send(local.cancel);\n };\n\n const request = (open: boolean): void => {\n if (latest.current.open === open) return;\n latest.current.setOpen(open);\n };\n\n const aim = (open: boolean, delay: number): void => {\n cancel();\n send(\n local.after(\n delay,\n Effect.sync(() => {\n request(open);\n }),\n ),\n );\n };\n\n const hold = (\n channel: \"pointer\" | \"focus\",\n surface: HoverSurfaceName,\n present: boolean,\n ): void => {\n const state = local.read();\n const next: HoverHold = {\n ...state,\n [channel]: { ...state[channel], [surface]: present },\n };\n send(local.write(next));\n\n if (present) {\n cancel();\n if (latest.current.open) return;\n if (channel === \"focus\") {\n request(true);\n return;\n }\n aim(true, latest.current.openDelay);\n return;\n }\n if (holds(next)) return;\n if (!latest.current.open) {\n cancel();\n return;\n }\n aim(false, latest.current.closeDelay);\n };\n\n return {\n pointer: (surface, present) => hold(\"pointer\", surface, present),\n focus: (surface, present) => hold(\"focus\", surface, present),\n cancel,\n cancelOpening: () => {\n if (!latest.current.open) cancel();\n },\n request,\n held: () => holds(local.read()),\n };\n};\n" }, { "path": "packages/components/src/internal/key.ts", "target": "@ui/gpuixui/components/internal/key.ts", "type": "registry:lib", "content": "import type { EventPayload, KeyEvent, Props } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport type KeyPhase = \"down\" | \"up\";\n\nexport const isActivation = (event: EventPayload, phase: KeyPhase): boolean => {\n if (event.isHeld === true) return false;\n if (event.key === \"enter\") return phase === \"down\";\n return event.key === \"space\" && phase === \"up\";\n};\n\nexport const swallowsDefault = (\n event: EventPayload,\n phase: KeyPhase,\n): boolean => event.key === \"space\" && phase === \"down\";\n\nexport const activationHandlers = (\n activate: (event: KeyEvent) => void,\n observe: Pick = {},\n): Pick => ({\n onKeyDown: (event: KeyEvent) => {\n if (swallowsDefault(event, \"down\")) event.preventDefault();\n if (isActivation(event, \"down\")) activate(event);\n observe.onKeyDown?.(event);\n },\n onKeyUp: (event: KeyEvent) => {\n if (isActivation(event, \"up\")) activate(event);\n observe.onKeyUp?.(event);\n },\n});\n\nexport const isEnter = (event: EventPayload): boolean => event.key === \"enter\";\n\nexport const isDown = (event: EventPayload): boolean =>\n event.key === \"down\" || (event.key === \"n\" && event.modifiers?.ctrl === true);\n\nexport const isUp = (event: EventPayload): boolean =>\n event.key === \"up\" || (event.key === \"p\" && event.modifiers?.ctrl === true);\n\nexport const isRight = (event: EventPayload): boolean => event.key === \"right\";\n\nexport const isLeft = (event: EventPayload): boolean => event.key === \"left\";\n\nexport const isFirst = (event: EventPayload): boolean => event.key === \"home\";\n\nexport const isLast = (event: EventPayload): boolean => event.key === \"end\";\n\nexport const isPageUp = (event: EventPayload): boolean =>\n event.key === \"pageup\";\n\nexport const isPageDown = (event: EventPayload): boolean =>\n event.key === \"pagedown\";\n\nexport const isDismiss = (event: EventPayload): boolean =>\n event.key === \"escape\";\n\nexport const isTab = (event: EventPayload): boolean => event.key === \"tab\";\n\nexport const isSelectAll = (event: EventPayload): boolean =>\n event.key === \"a\" &&\n (event.modifiers?.cmd === true || event.modifiers?.ctrl === true);\n\nexport const isMenuKey = (event: EventPayload): boolean =>\n (event.key === \"f10\" && event.modifiers?.shift === true) ||\n event.key === \"contextmenu\";\n\nexport const axisDirection = (\n event: EventPayload,\n orientation: \"horizontal\" | \"vertical\",\n): Option.Option<1 | -1> => {\n if (event.key === \"right\") return Option.some(1);\n if (event.key === \"left\") return Option.some(-1);\n if (orientation === \"vertical\") {\n if (isDown(event)) return Option.some(1);\n if (isUp(event)) return Option.some(-1);\n }\n return Option.none();\n};\n" }, { "path": "packages/components/src/internal/local-state.ts", "target": "@ui/gpuixui/components/internal/local-state.ts", "type": "registry:lib", "content": "import { Effect } from \"effect\";\nimport * as Arr from \"effect/Array\";\nimport * as Duration from \"effect/Duration\";\nimport * as Fiber from \"effect/Fiber\";\nimport * as Option from \"effect/Option\";\nimport * as Ref from \"effect/Ref\";\nimport * as SubscriptionRef from \"effect/SubscriptionRef\";\nimport { useEffect, useState, useSyncExternalStore } from \"react\";\n\nexport interface LocalState {\n readonly state: SubscriptionRef.SubscriptionRef;\n\n readonly read: () => A;\n\n readonly subscribe: (listener: () => void) => () => void;\n\n readonly write: (next: A) => Effect.Effect;\n\n readonly after: (\n millis: number,\n effect: Effect.Effect,\n ) => Effect.Effect;\n\n readonly cancel: Effect.Effect;\n\n readonly running: () => boolean;\n}\n\nexport const makeLocalState = (initial: A): Effect.Effect> =>\n Effect.gen(function* () {\n const state = yield* SubscriptionRef.make(initial);\n const timer = yield* Ref.make(Option.none>());\n const listeners = yield* Ref.make void>>(Arr.empty());\n\n const write = Effect.fnUntraced(function* (next: A) {\n yield* SubscriptionRef.set(state, next);\n const subscribers = yield* Ref.get(listeners);\n yield* Effect.sync(() => {\n Arr.forEach(subscribers, (listener) => listener());\n });\n });\n\n const cancel = Effect.gen(function* () {\n const held = yield* Ref.getAndSet(timer, Option.none());\n yield* Option.match(held, {\n onNone: () => Effect.void,\n onSome: Fiber.interrupt,\n });\n });\n\n const after = Effect.fnUntraced(function* (\n millis: number,\n effect: Effect.Effect,\n ) {\n yield* cancel;\n const fiber = yield* Effect.forkDetach(\n Effect.sleep(Duration.millis(millis)).pipe(Effect.andThen(effect)),\n );\n yield* Ref.set(timer, Option.some(fiber));\n });\n\n const running = (): boolean =>\n Option.exists(\n Ref.getUnsafe(timer),\n (fiber) => fiber.pollUnsafe() === undefined,\n );\n\n const subscribe = (listener: () => void): (() => void) => {\n Effect.runSync(\n Ref.update(listeners, (current) => Arr.append(current, listener)),\n );\n return () => {\n Effect.runSync(\n Ref.update(listeners, (current) =>\n Arr.filter(current, (held) => held !== listener),\n ),\n );\n };\n };\n\n return {\n state,\n\n read: () => SubscriptionRef.getUnsafe(state),\n subscribe,\n write,\n after,\n cancel,\n running,\n };\n });\n\ninterface Teardown {\n readonly local: { readonly cancel: Effect.Effect };\n}\n\nexport const useLocalStore = (\n make: Effect.Effect,\n): Store => {\n const [store] = useState(() => Effect.runSync(make));\n useEffect(() => () => send(store.local.cancel), [store]);\n return store;\n};\n\nexport const send = (command: Effect.Effect): void => {\n Effect.runFork(command);\n};\n\nexport const useLocalState = (local: LocalState): A =>\n useSyncExternalStore(local.subscribe, local.read, local.read);\n\nexport const useLocalSlice = (\n local: LocalState,\n select: (state: A) => B,\n): B =>\n useSyncExternalStore(\n local.subscribe,\n () => select(local.read()),\n () => select(local.read()),\n );\n" }, { "path": "packages/components/src/internal/measure.ts", "target": "@ui/gpuixui/components/internal/measure.ts", "type": "registry:lib", "content": "import type { EventPayload } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\n\nexport interface MeasuredBox {\n readonly x: number;\n readonly y: number;\n readonly width: number;\n readonly height: number;\n}\n\nconst measurable = (value: number | undefined): Option.Option =>\n Option.filter(Option.fromNullishOr(value), Number.isFinite);\n\nexport const measuredBox = (event: EventPayload): Option.Option =>\n Option.all({\n x: measurable(event.x),\n y: measurable(event.y),\n width: measurable(event.width),\n height: measurable(event.height),\n });\n\nexport const measuredHeight = (event: EventPayload): Option.Option =>\n measurable(event.height);\n\nexport interface MeasuredPoint {\n readonly x: number;\n readonly y: number;\n}\n\nexport const measuredPoint = (\n event: EventPayload,\n): Option.Option =>\n Option.all({\n x: measurable(event.x),\n y: measurable(event.y),\n });\n" }, { "path": "packages/components/src/internal/overlay.ts", "target": "@ui/gpuixui/components/internal/overlay.ts", "type": "registry:lib", "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { cn } from \"../../tw/index.js\";\nimport * as Arr from \"effect/Array\";\nimport * as Option from \"effect/Option\";\nimport { recipeStyle } from \"./recipe.js\";\nimport {\n alpha,\n elevationShadow,\n type BoxShadow,\n type ElevationLevel,\n type Theme,\n} from \"./theme.js\";\n\nexport const OVERLAY_WASH = 0.55;\n\nexport const overlayVeilColor = (theme: Theme): string =>\n alpha(theme.colors.background, OVERLAY_WASH);\n\nconst isEdge = (shadow: BoxShadow): boolean =>\n shadow.blurRadius === 0 && shadow.spreadRadius > 0;\n\nconst shadows = (painted: StyleDesc[\"boxShadow\"]): ReadonlyArray =>\n Option.match(Option.fromNullishOr(painted), {\n onNone: () => [],\n onSome: (value) => Arr.ensure(value),\n });\n\nexport const overlaySurfaceStyle = (\n recipe: string,\n className: string | undefined,\n theme: Theme,\n elevation?: ElevationLevel,\n): StyleDesc => {\n const style = recipeStyle(cn(recipe, className), theme);\n const lift = Option.fromNullishOr(elevation).pipe(\n Option.flatMap((level) =>\n Option.fromNullishOr(elevationShadow(theme, level)),\n ),\n );\n\n return Option.match(lift, {\n onNone: () => style,\n onSome: (shadow) => {\n const painted = shadows(style.boxShadow);\n const lost = Arr.every(painted, isEdge) && painted.length > 0;\n return lost ? { ...style, boxShadow: [shadow, ...painted] } : style;\n },\n });\n};\n" }, { "path": "packages/components/src/internal/parts.ts", "target": "@ui/gpuixui/components/internal/parts.ts", "type": "registry:lib", "content": "import * as Arr from \"effect/Array\";\nimport * as P from \"effect/Predicate\";\nimport {\n Children,\n Fragment,\n isValidElement,\n type ReactElement,\n type ReactNode,\n} from \"react\";\n\nexport type PartComponent = (props: never) => ReactNode;\n\nexport type PartChildren =\n | ReactElement\n | boolean\n | null\n | undefined\n | ReadonlyArray;\n\nexport interface PartsContract {\n readonly parent: string;\n\n readonly family: ReadonlyArray;\n\n readonly accepts: ReadonlyArray;\n\n readonly hint?: string;\n}\n\nconst componentName = (type: unknown): string =>\n P.isString(type)\n ? type\n : P.isFunction(type)\n ? type.name || \"anonymous\"\n : \"element\";\n\nconst fragmentChildren = (element: ReactElement): ReactNode =>\n hasChildren(element.props) ? element.props.children : undefined;\n\nconst hasChildren = (\n value: unknown,\n): value is { readonly children?: ReactNode } =>\n P.isObject(value) && \"children\" in value;\n\nconst leaves = (children: ReactNode): ReadonlyArray =>\n Arr.flatMap(Children.toArray(children), (child) =>\n isValidElement(child) && child.type === Fragment\n ? leaves(fragmentChildren(child))\n : [child],\n );\n\nexport const assertParts = (\n contract: PartsContract,\n children: ReactNode,\n): void => {\n Arr.forEach(leaves(children), (leaf) => {\n if (!isValidElement(leaf)) return;\n if (Arr.some(contract.accepts, (part) => part === leaf.type)) return;\n if (!Arr.some(contract.family, (part) => part === leaf.type)) return;\n\n throw new Error(\n `${componentName(leaf.type)} cannot be used inside ${contract.parent}.` +\n (contract.hint === undefined ? \"\" : ` ${contract.hint}`),\n );\n });\n};\n" }, { "path": "packages/components/src/internal/pattern-field.tsx", "target": "@ui/gpuixui/components/internal/pattern-field.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { EventPayload, MotionProps, Props } from \"@gpuix/react\";\nimport {\n mergeStyles,\n resolveStyle,\n type StateStyle,\n} from \"@gpuix/react/floating\";\nimport type { MotionLevel } from \"../../motion/timing.js\";\nimport { cn } from \"../../tw/index.js\";\nimport * as Option from \"effect/Option\";\nimport type { ReactNode } from \"react\";\nimport { send, useLocalState, useLocalStore } from \"./local-state.js\";\nimport { measuredBox } from \"./measure.js\";\nimport { makeFieldStore } from \"./pattern-field/store.js\";\nimport { fadeOnly, useMotionPreference, useSurfaceTiming } from \"./presence.js\";\nimport { recipeStyle } from \"./recipe.js\";\nimport { durationOf } from \"./scatter.js\";\nimport { paintableBox, type PatternBox } from \"./svg-pattern.js\";\nimport { useTheme } from \"./theme.js\";\n\nexport const patternBreatheMs = 8_000;\n\nexport const patternBreatheFloor = 1_000;\n\nexport const patternBreatheCap = 60_000;\n\nexport const patternDim = 0.55;\n\nexport interface PatternFieldState {\n readonly width: number;\n readonly height: number;\n readonly reducedMotion: boolean;\n}\n\nexport type FieldArt = (box: PatternBox, testId: string) => ReactNode;\n\nexport interface PatternFieldProps extends Omit {\n readonly markup: (box: PatternBox) => string;\n\n readonly color: string;\n\n readonly breatheMs?: number;\n\n readonly level?: MotionLevel;\n\n readonly className?: string;\n\n readonly style?: StateStyle;\n\n readonly children?: ReactNode;\n}\n\nexport interface DecorativeFieldProps extends Omit<\n Props,\n \"children\" | \"style\"\n> {\n readonly art: FieldArt;\n\n readonly breatheMs?: number;\n\n readonly level?: MotionLevel;\n\n readonly className?: string;\n\n readonly style?: StateStyle;\n\n readonly children?: ReactNode;\n}\n\nconst Breath = ({\n art,\n legMs,\n id,\n lit,\n onLanded,\n}: {\n readonly art: ReactNode;\n readonly legMs: number;\n readonly id: string;\n readonly lit: boolean;\n readonly onLanded: () => void;\n}) => {\n const motion: MotionProps = {\n initial: { opacity: patternDim },\n animate: { opacity: lit ? patternDim : 1 },\n transition: { duration: legMs / 1000, ease: \"easeInOut\" },\n };\n\n return (\n \n {art}\n \n );\n};\n\nexport const DecorativeField = ({\n art,\n breatheMs,\n level = \"slow\",\n className,\n style,\n testId,\n children,\n ...rest\n}: DecorativeFieldProps) => {\n const theme = useTheme();\n const preference = useMotionPreference();\n const timing = useSurfaceTiming(level);\n const still = preference === \"reduced\";\n const legMs = durationOf(\n Option.fromNullishOr(breatheMs),\n patternBreatheMs,\n patternBreatheFloor,\n patternBreatheCap,\n );\n const store = useLocalStore(makeFieldStore);\n const field = useLocalState(store.local);\n\n const noteBox = (event: EventPayload): void => {\n Option.match(measuredBox(event), {\n onNone: () => undefined,\n onSome: (next) =>\n send(store.note({ width: next.width, height: next.height })),\n });\n };\n\n const measured: PatternBox = Option.getOrElse(field.box, () => ({\n width: 0,\n height: 0,\n }));\n const painted = paintableBox(measured);\n const id = testId ?? \"pattern\";\n\n const state: PatternFieldState = {\n width: measured.width,\n height: measured.height,\n reducedMotion: still,\n };\n\n return (\n \n {painted ? (\n still ? (\n art(measured, id)\n ) : (\n send(store.breathe)}\n />\n )\n ) : undefined}\n {children}\n \n );\n};\n\nexport const PatternField = ({ markup, color, ...rest }: PatternFieldProps) => (\n (\n \n )}\n />\n);\n" }, { "path": "packages/components/src/internal/pattern-field/store.ts", "target": "@ui/gpuixui/components/internal/pattern-field/store.ts", "type": "registry:lib", "content": "import { Effect } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport * as SubscriptionRef from \"effect/SubscriptionRef\";\nimport { makeLocalState, type LocalState } from \"../local-state.js\";\nimport type { PatternBox } from \"../svg-pattern.js\";\n\nexport interface FieldStoreState {\n readonly box: Option.Option;\n\n readonly lit: boolean;\n}\n\nexport interface FieldStore {\n readonly local: LocalState;\n\n readonly note: (box: PatternBox) => Effect.Effect;\n\n readonly breathe: Effect.Effect;\n}\n\nconst resting: FieldStoreState = { box: Option.none(), lit: false };\n\nexport const makeFieldStore: Effect.Effect = Effect.gen(\n function* () {\n const local = yield* makeLocalState(resting);\n\n const note = Effect.fnUntraced(function* (box: PatternBox) {\n const current = yield* SubscriptionRef.get(local.state);\n if (\n Option.exists(\n current.box,\n (held) => held.width === box.width && held.height === box.height,\n )\n )\n return;\n yield* local.write({ ...current, box: Option.some(box) });\n });\n\n const breathe = Effect.gen(function* () {\n const current = yield* SubscriptionRef.get(local.state);\n yield* local.write({ ...current, lit: !current.lit });\n });\n\n return { local, note, breathe };\n },\n);\n" }, { "path": "packages/components/src/internal/placement.ts", "target": "@ui/gpuixui/components/internal/placement.ts", "type": "registry:lib", "content": "import type { FloatingAlign, FloatingSide } from \"@gpuix/react/floating\";\nimport { Match } from \"effect\";\nimport * as Schema from \"effect/Schema\";\n\nexport interface FloatingBounds {\n readonly x: number;\n readonly y: number;\n readonly width: number;\n readonly height: number;\n}\n\nexport interface WindowBounds {\n readonly width: number;\n readonly height: number;\n}\n\nexport interface PlacementInput {\n readonly side: unknown;\n\n readonly align: unknown;\n readonly trigger: FloatingBounds;\n\n readonly surface: FloatingBounds;\n readonly window: WindowBounds;\n readonly margin: number;\n}\n\nexport interface Placement {\n readonly side: FloatingSide;\n readonly align: FloatingAlign;\n readonly alignOffset: number;\n}\n\nconst PlacementSide = Schema.Literals([\"top\", \"right\", \"bottom\", \"left\"]);\n\nexport const isAlign = Schema.is(Schema.Literals([\"start\", \"center\", \"end\"]));\n\nconst sideOf = (side: unknown): FloatingSide =>\n Schema.is(PlacementSide)(side) ? side : \"bottom\";\n\nconst alignOf = (align: unknown): FloatingAlign =>\n isAlign(align) ? align : \"start\";\n\nconst oppositeSide = (side: unknown): FloatingSide =>\n Match.value(sideOf(side)).pipe(\n Match.when(\"top\", () => \"bottom\" as const),\n Match.when(\"bottom\", () => \"top\" as const),\n Match.when(\"left\", () => \"right\" as const),\n Match.when(\"right\", () => \"left\" as const),\n Match.exhaustive,\n );\n\nconst roomOn = (side: unknown, input: PlacementInput): number =>\n Match.value(sideOf(side)).pipe(\n Match.when(\"top\", () => input.trigger.y - input.margin),\n Match.when(\n \"bottom\",\n () =>\n input.window.height -\n input.margin -\n (input.trigger.y + input.trigger.height),\n ),\n Match.when(\"left\", () => input.trigger.x - input.margin),\n Match.when(\n \"right\",\n () =>\n input.window.width -\n input.margin -\n (input.trigger.x + input.trigger.width),\n ),\n Match.exhaustive,\n );\n\nconst extentOn = (side: unknown, surface: FloatingBounds): number =>\n Match.value(sideOf(side)).pipe(\n Match.when(\"top\", () => surface.height),\n Match.when(\"bottom\", () => surface.height),\n Match.when(\"left\", () => surface.width),\n Match.when(\"right\", () => surface.width),\n Match.exhaustive,\n );\n\nexport const resolveSide = (input: PlacementInput): FloatingSide => {\n const side = sideOf(input.side);\n const extent = extentOn(side, input.surface);\n if (roomOn(side, input) >= extent) return side;\n\n const opposite = oppositeSide(side);\n const oppositeRoom = roomOn(opposite, input);\n if (oppositeRoom >= extentOn(opposite, input.surface)) return opposite;\n\n return oppositeRoom > roomOn(side, input) ? opposite : side;\n};\n\nconst alignOffsetOn = (\n side: unknown,\n align: unknown,\n trigger: FloatingBounds,\n surface: FloatingBounds,\n): number =>\n Match.value(alignOf(align)).pipe(\n Match.when(\"center\", () =>\n Match.value(sideOf(side)).pipe(\n Match.when(\"top\", () => (trigger.width - surface.width) / 2),\n Match.when(\"bottom\", () => (trigger.width - surface.width) / 2),\n Match.when(\"left\", () => (trigger.height - surface.height) / 2),\n Match.when(\"right\", () => (trigger.height - surface.height) / 2),\n Match.exhaustive,\n ),\n ),\n Match.when(\"start\", () => 0),\n Match.when(\"end\", () => 0),\n Match.exhaustive,\n );\n\nconst hostAlign = (align: FloatingAlign): \"start\" | \"end\" =>\n align === \"end\" ? \"end\" : \"start\";\n\nexport const requestedPlacement = (\n side: unknown,\n align: unknown,\n): Placement => ({\n side: sideOf(side),\n align: hostAlign(alignOf(align)),\n alignOffset: 0,\n});\n\nexport const resolvePlacement = (input: PlacementInput): Placement => {\n const side = resolveSide(input);\n return {\n side,\n align: hostAlign(alignOf(input.align)),\n alignOffset: alignOffsetOn(side, input.align, input.trigger, input.surface),\n };\n};\n" }, { "path": "packages/components/src/internal/presence.tsx", "target": "@ui/gpuixui/components/internal/presence.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { MotionProps } from \"@gpuix/react\";\nimport {\n delayedTiming,\n exitWindowMs,\n fadeFrom,\n fadeFromAnchor,\n fadeFromSide,\n fadeOnly,\n presenceMotion as motionOfPresence,\n presenceStyle,\n transitionWindowMs,\n type PresenceFrames,\n type PresenceHitRule,\n type PresenceSide,\n type PresenceTiming,\n type PresenceTransition,\n} from \"../../motion/presence.js\";\nimport {\n MotionProvider,\n useMotionPreference,\n useSurfacePresence,\n useSurfaceTiming,\n type MotionProviderProps,\n type SurfacePresence,\n} from \"../../motion/react/presence.js\";\nimport {\n motionTiming,\n type MotionLevel,\n type MotionPreference,\n} from \"../../motion/timing.js\";\n\nexport { MotionProvider, useMotionPreference, type MotionProviderProps };\n\nexport type SurfaceFrames = PresenceFrames;\n\nexport type SurfaceTiming = PresenceTiming;\n\nexport type PanelSide = PresenceSide;\n\nexport {\n delayedTiming,\n exitWindowMs,\n fadeFrom,\n fadeFromAnchor,\n fadeFromSide,\n fadeOnly,\n presenceStyle,\n transitionWindowMs,\n};\nexport type { PresenceHitRule };\n\nexport { useSurfacePresence, useSurfaceTiming, type SurfacePresence };\n\nexport const moveTiming = (\n level: MotionLevel,\n preference: MotionPreference,\n): PresenceTransition => motionTiming(level, { phase: \"standard\", preference });\n\nexport const useMoveTiming = (level: MotionLevel): PresenceTransition =>\n moveTiming(level, useMotionPreference());\n\nexport const presenceMotion = (\n frames: SurfaceFrames,\n presence: SurfacePresence,\n timing: SurfaceTiming = presence.timing,\n): MotionProps => motionOfPresence(frames, presence.present, timing);\n\nexport const PresenceShield = ({ present }: { readonly present: boolean }) =>\n present ? null : (\n \n );\n\nexport const presenceTabStop = (\n present: boolean,\n): { readonly tabIndex?: number } => (present ? {} : { tabIndex: -1 });\n" }, { "path": "packages/components/src/internal/recipe.ts", "target": "@ui/gpuixui/components/internal/recipe.ts", "type": "registry:lib", "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport { createRecipeCache } from \"../../tw/index.js\";\nimport type { Theme } from \"./theme.js\";\n\nexport const recipeStyle: (recipe: string, theme: Theme) => StyleDesc =\n createRecipeCache(512);\n" }, { "path": "packages/components/src/internal/ref.ts", "target": "@ui/gpuixui/components/internal/ref.ts", "type": "registry:lib", "content": "import type { Ref, RefCallback } from \"react\";\nimport { useCallback } from \"react\";\n\nconst assign = (ref: Ref | undefined, value: T): void => {\n if (ref === null || ref === undefined) return;\n if (typeof ref === \"function\") {\n ref(value);\n return;\n }\n ref.current = value;\n};\n\nexport const useMergedRef = (\n internal: Ref,\n caller: Ref | undefined,\n): RefCallback =>\n useCallback(\n (value: T) => {\n assign(internal, value);\n assign(caller, value);\n },\n [internal, caller],\n );\n" }, { "path": "packages/components/src/internal/scatter.ts", "target": "@ui/gpuixui/components/internal/scatter.ts", "type": "registry:lib", "content": "import * as Option from \"effect/Option\";\n\nexport const seededUnit = (\n seed: number,\n index: number,\n slot: number,\n): number => {\n let value =\n Math.imul(seed ^ 0x9e3779b9, 0x85ebca6b) ^\n Math.imul((index + 1) * 8 + slot, 0xc2b2ae35);\n value ^= value >>> 15;\n value = Math.imul(value, 0x2c1b3c6d);\n value ^= value >>> 13;\n return (value >>> 0) / 0x100000000;\n};\n\nexport const tenth = (value: number): number => Math.round(value * 10) / 10;\n\nexport const paintable = (value: number): boolean =>\n Number.isFinite(value) && value > 0;\n\nexport const seedOf = (seed: Option.Option): number =>\n Option.getOrElse(\n Option.filter(seed, (value) => Number.isFinite(value)),\n () => 1,\n );\n\nexport const countOf = (\n count: Option.Option,\n fallback: number,\n cap: number,\n): number =>\n Option.getOrElse(\n Option.map(\n Option.filter(count, (value) => Number.isFinite(value) && value >= 0),\n (value) => Math.min(Math.round(value), cap),\n ),\n () => fallback,\n );\n\nexport const sizeRangeOf = (\n min: Option.Option,\n max: Option.Option,\n fallbackMin: number,\n fallbackMax: number,\n): { readonly min: number; readonly max: number } => {\n const floor = sizeOf(min, fallbackMin);\n const ceiling = sizeOf(max, fallbackMax);\n return floor <= ceiling\n ? { min: floor, max: ceiling }\n : { min: ceiling, max: floor };\n};\n\nconst sizeOf = (size: Option.Option, fallback: number): number =>\n Option.getOrElse(\n Option.map(\n Option.filter(size, (value) => Number.isFinite(value) && value >= 1),\n Math.round,\n ),\n () => fallback,\n );\n\nexport const durationOf = (\n duration: Option.Option,\n fallback: number,\n floor: number,\n cap: number,\n): number =>\n Option.getOrElse(\n Option.map(\n Option.filter(\n duration,\n (value) => Number.isFinite(value) && value >= floor,\n ),\n (value) => Math.min(Math.round(value), cap),\n ),\n () => fallback,\n );\n" }, { "path": "packages/components/src/internal/surface-box.tsx", "target": "@ui/gpuixui/components/internal/surface-box.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { EventPayload, StyleDesc } from \"@gpuix/react\";\nimport * as Option from \"effect/Option\";\nimport { useRef, useState } from \"react\";\nimport { measuredBox, type MeasuredBox } from \"./measure.js\";\n\nexport interface SurfaceBox {\n readonly box: Option.Option;\n\n readonly measure: (event: EventPayload) => void;\n\n readonly read: () => void;\n\n readonly nudge: number;\n\n readonly noteOrigin: (event: EventPayload) => void;\n}\n\nexport const surfaceOriginStyle = (nudge: number): StyleDesc => ({\n position: \"absolute\",\n left: 0,\n top: 0,\n width: 1 + nudge,\n height: 1,\n pointerEvents: \"none\",\n});\n\nexport const useSurfaceBox = (): SurfaceBox => {\n const size = useRef>(Option.none());\n const origin = useRef>(Option.none());\n const [box, setBox] = useState>(Option.none());\n const [nudge, setNudge] = useState(0);\n\n const publish = () => {\n setBox(\n Option.map(\n Option.all({ origin: origin.current, size: size.current }),\n ({ origin, size }) => ({\n x: origin.x,\n y: origin.y,\n width: size.width,\n height: size.height,\n }),\n ),\n );\n };\n\n const measure = (event: EventPayload) => {\n Option.match(measuredBox(event), {\n onNone: () => undefined,\n onSome: (next) => {\n size.current = Option.some(next);\n publish();\n },\n });\n };\n\n const noteOrigin = (event: EventPayload) => {\n Option.match(measuredBox(event), {\n onNone: () => undefined,\n onSome: (next) => {\n origin.current = Option.some(next);\n publish();\n },\n });\n };\n\n const read = () => setNudge((value) => (value === 0 ? 1 : 0));\n\n return { box, measure, read, nudge, noteOrigin };\n};\n" }, { "path": "packages/components/src/internal/svg-pattern.ts", "target": "@ui/gpuixui/components/internal/svg-pattern.ts", "type": "registry:lib", "content": "export interface PatternBox {\n readonly width: number;\n readonly height: number;\n}\n\nexport const svgPatternMarkup = (\n box: PatternBox,\n path: string,\n stroke: number,\n): string =>\n ``;\n\nexport const paintableBox = (box: PatternBox): boolean =>\n Number.isFinite(box.width) &&\n Number.isFinite(box.height) &&\n box.width > 0 &&\n box.height > 0;\n" }, { "path": "packages/components/src/internal/text.ts", "target": "@ui/gpuixui/components/internal/text.ts", "type": "registry:lib", "content": "import { pipe } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport * as Str from \"effect/String\";\n\nexport const textOf = (value: unknown): string =>\n typeof value === \"string\" ? value : \"\";\n\nexport const nameOf = (value: unknown): string | undefined =>\n pipe(\n Option.some(textOf(value)),\n Option.map(Str.trim),\n Option.filter(Str.isNonEmpty),\n Option.getOrUndefined,\n );\n" }, { "path": "packages/components/src/internal/theme.ts", "target": "@ui/gpuixui/components/internal/theme.ts", "type": "registry:lib", "content": "import type { StyleDesc } from \"@gpuix/react\";\nimport * as Schema from \"effect/Schema\";\nimport {\n alpha,\n avatarPixels,\n avatarSize,\n brandTextOn,\n controlFocusRing,\n controlHeight,\n controlPaddingX,\n currentPlatform,\n darkTheme,\n disabledAction,\n disabledOpacity,\n elevationShadow,\n filledHover,\n filledPressed,\n findHighlight,\n focusRing,\n keyboardFocusRing,\n lightTheme,\n nativeTextTheme,\n pointerWash,\n selectionOn,\n statusTone,\n syntaxColors,\n targetSize,\n textStyle,\n type BoxShadow,\n type ElevationLevel,\n type FindHighlightSource,\n type NativeTextFill,\n type PlatformName,\n type PointerWashSurface,\n type StatusTone,\n type SyntaxColors,\n type SyntaxRole,\n type TextRole,\n type Theme,\n type ThemeColors,\n} from \"../../tokens/index.js\";\n\nexport {\n alpha,\n avatarPixels,\n avatarSize,\n controlFocusRing,\n controlHeight,\n controlPaddingX,\n currentPlatform,\n darkTheme,\n disabledAction,\n disabledOpacity,\n elevationShadow,\n filledHover,\n filledPressed,\n findHighlight,\n focusRing,\n keyboardFocusRing,\n lightTheme,\n nativeTextTheme,\n statusTone,\n syntaxColors,\n targetSize,\n textStyle,\n};\nexport type {\n BoxShadow,\n ElevationLevel,\n FindHighlightSource,\n NativeTextFill,\n PlatformName,\n StatusTone,\n SyntaxColors,\n SyntaxRole,\n TextRole,\n Theme,\n};\nexport { ThemeProvider, useTheme } from \"../../tokens/react.js\";\n\nexport const keyboardRing = (theme: Theme, invalid = false): StyleDesc =>\n controlFocusRing(theme, { invalid }) ?? {};\n\nexport interface ControlRingState {\n readonly disabled?: boolean;\n\n readonly invalid?: boolean;\n}\n\nexport const controlRing = (\n theme: Theme,\n state: ControlRingState = {},\n): StyleDesc => controlFocusRing(theme, state) ?? {};\n\nexport const pressWash = (theme: Theme, replaced: PointerWashSurface): string =>\n pointerWash(theme, \"active\", replaced) ?? theme.colors.active;\n\nexport const selectionWash = (theme: Theme): StyleDesc => ({\n selectionColor: theme.colors.selection,\n});\n\nexport const keepContent: StyleDesc = { keyboardFocusDim: false };\n\nexport const disabledFade = (\n disabled: boolean,\n): { readonly opacity: number } | undefined =>\n disabled ? { opacity: disabledOpacity } : undefined;\n\nconst Tones = Schema.Literals([\"info\", \"success\", \"warning\", \"danger\"]);\n\nexport type Tone = typeof Tones.Type;\n\nexport const toneOf = (value: unknown): Tone =>\n Schema.is(Tones)(value) ? value : \"info\";\n\nexport interface ToneStyle {\n readonly fg: string;\n readonly bg: string;\n readonly border: string;\n}\n\nconst TOKEN_TONE: Readonly> = {\n info: \"info\",\n success: \"success\",\n warning: \"warning\",\n danger: \"destructive\",\n};\n\nexport const tone = (theme: Theme, value: Tone): ToneStyle => {\n const { background, border, foreground } = statusTone(\n theme,\n TOKEN_TONE[value],\n );\n return { bg: background, border, fg: foreground };\n};\n\nconst softRoles: Readonly> = {\n info: \"infoSoft\",\n success: \"successSoft\",\n warning: \"warningSoft\",\n danger: \"destructiveSoft\",\n};\n\nexport const messageLink = (theme: Theme, value: Tone): string =>\n brandTextOn(theme, softRoles[value]);\n\nexport const messageSelection = (theme: Theme, value: Tone): string =>\n selectionOn(theme, softRoles[value]);\n\nexport const toneSurface = (theme: Theme, value: Tone): StyleDesc => {\n const { bg, border, fg } = tone(theme, value);\n return {\n backgroundColor: bg,\n color: fg,\n borderWidth: theme.borderWidth.thin,\n borderColor: border,\n };\n};\n" }, { "path": "packages/components/src/internal/use-placement.ts", "target": "@ui/gpuixui/components/internal/use-placement.ts", "type": "registry:lib", "content": "import { useGpuix, type PublicInstance } from \"@gpuix/react\";\nimport type { FloatingAlign, FloatingSide } from \"@gpuix/react/floating\";\nimport * as Option from \"effect/Option\";\nimport { useLayoutEffect, useRef, useState, type RefObject } from \"react\";\nimport {\n requestedPlacement,\n resolvePlacement,\n type Placement,\n} from \"./placement.js\";\n\nexport interface UsePlacementInput {\n readonly open: boolean;\n readonly side: FloatingSide;\n readonly align: FloatingAlign;\n readonly margin: number;\n readonly trigger: RefObject;\n readonly surface: RefObject;\n}\n\nconst boundsOf = (\n renderer: ReturnType[\"renderer\"],\n instance: PublicInstance | null,\n): Option.Option<{ x: number; y: number; width: number; height: number }> =>\n Option.flatMap(Option.fromNullishOr(instance), (element) =>\n Option.fromNullishOr(renderer?.getElementBounds?.(element.id)),\n );\n\nexport const usePlacement = ({\n open,\n side,\n align,\n margin,\n trigger,\n surface,\n}: UsePlacementInput): Placement => {\n const renderer = useGpuix().renderer;\n const [placement, setPlacement] = useState>(\n Option.none(),\n );\n const measuredFor = useRef(null);\n const key = `${side}:${align}:${margin}`;\n\n useLayoutEffect(() => {\n if (!open) {\n measuredFor.current = null;\n setPlacement(Option.none());\n return;\n }\n if (measuredFor.current === key) return;\n\n const measured = Option.all({\n trigger: boundsOf(renderer, trigger.current),\n surface: boundsOf(renderer, surface.current),\n window: Option.fromNullishOr(renderer?.getWindowSize?.()),\n });\n if (Option.isNone(measured)) return;\n\n measuredFor.current = key;\n setPlacement(\n Option.some(resolvePlacement({ ...measured.value, side, align, margin })),\n );\n }, [align, key, margin, open, renderer, side, surface, trigger]);\n\n return Option.getOrElse(placement, () => requestedPlacement(side, align));\n};\n" }, { "path": "packages/components/src/menu/hover.ts", "target": "@ui/gpuixui/components/menu/hover.ts", "type": "registry:lib", "content": "import { createContext } from \"react\";\nimport type { HoverControls } from \"../internal/hover.js\";\n\nexport const submenuOpenDelayMs = 100;\n\nexport const menuCloseGraceMs = 80;\n\nexport const MenuPointer = createContext(undefined);\n" }, { "path": "packages/components/src/menu/item.tsx", "target": "@ui/gpuixui/components/menu/item.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { Props, PublicInstance } from \"@gpuix/react\";\nimport {\n mergeStyles,\n resolveStyle,\n type StateStyle,\n} from \"@gpuix/react/floating\";\nimport { Icon } from \"../../icons/index.js\";\nimport { MENU_GROUP, MENU_ITEM, MENU_LABEL, MENU_SEPARATOR } from \"../../tw/index.js\";\nimport { Match } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport * as P from \"effect/Predicate\";\nimport * as Schema from \"effect/Schema\";\nimport * as Str from \"effect/String\";\nimport {\n createContext,\n useCallback,\n useContext,\n useLayoutEffect,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { overlaySurfaceStyle } from \"../internal/overlay.js\";\nimport {\n controlHeight,\n pressWash,\n statusTone,\n useTheme,\n} from \"../internal/theme.js\";\nimport {\n assertParts,\n type PartChildren,\n type PartComponent,\n type PartsContract,\n} from \"../internal/parts.js\";\nimport { useMergedRef } from \"../internal/ref.js\";\nimport { useMenuContext, useMenuLeaving } from \"./state.js\";\n\nconst MenuTones = Schema.Literals([\"default\", \"destructive\"]);\n\nexport type MenuItemTone = typeof MenuTones.Type;\n\nexport const menuToneOf = (value: unknown): MenuItemTone =>\n Schema.is(MenuTones)(value) ? value : \"default\";\n\nexport interface MenuItemProps extends Omit {\n readonly onSelect?: () => void;\n readonly disabled?: boolean;\n\n readonly tone?: MenuItemTone;\n\n readonly leading?: ReactNode;\n\n readonly trailing?: ReactNode;\n\n readonly textValue?: string;\n\n readonly closeOnSelect?: boolean;\n\n readonly className?: string;\n\n readonly style?: StateStyle;\n}\n\nexport interface MenuItemState {\n readonly disabled: boolean;\n\n readonly highlighted: boolean;\n}\n\nexport interface MenuRowState {\n readonly tone: MenuItemTone;\n readonly active: boolean;\n readonly disabled: boolean;\n}\n\nexport const menuRowStyle = (\n theme: ReturnType,\n row: MenuRowState,\n className?: string,\n): Props[\"style\"] => {\n const { tone, active, disabled } = row;\n const color = disabled\n ? theme.colors.disabledForeground\n : Match.value(tone).pipe(\n Match.when(\n \"destructive\",\n () => statusTone(theme, \"destructive\").foreground,\n ),\n Match.when(\"default\", () => undefined),\n Match.exhaustive,\n );\n\n const appkit = theme.interaction === \"appkit\";\n const pointerWash = { backgroundColor: theme.colors.hover };\n const accentWash = {\n backgroundColor: theme.colors.primary,\n color: theme.colors.primaryForeground,\n };\n const highlight = appkit ? accentWash : pointerWash;\n\n return {\n ...overlaySurfaceStyle(MENU_ITEM, className, theme),\n height: controlHeight(theme, \"sm\"),\n\n ...(color === undefined ? {} : { color }),\n ...(active && !disabled ? highlight : {}),\n cursor: disabled ? \"not-allowed\" : \"pointer\",\n hover: disabled ? undefined : highlight,\n active: disabled\n ? undefined\n : appkit\n ? accentWash\n : { backgroundColor: pressWash(theme, \"hover\") },\n };\n};\n\nconst Row = ({\n leading,\n trailing,\n children,\n}: {\n readonly leading?: ReactNode;\n readonly trailing?: ReactNode;\n readonly children: ReactNode;\n}) => (\n <>\n {leading === undefined ? null : leading}\n \n {children}\n \n {trailing === undefined ? null : trailing}\n \n);\n\nexport const MenuItem = ({\n onSelect,\n disabled = false,\n tone: requestedTone = \"default\",\n leading,\n trailing,\n textValue,\n closeOnSelect = true,\n children,\n onFocus,\n onClick,\n onMouseEnter,\n onMouseLeave,\n className,\n style,\n ref,\n ...rest\n}: MenuItemProps) => {\n const theme = useTheme();\n\n const emphasis = menuToneOf(requestedTone);\n\n const { activeId, register, noteFocus, notePointer, close, closeSubmenu } =\n useMenuContext();\n\n const leaving = useMenuLeaving();\n const [instance, setInstance] = useState(\n undefined,\n );\n const action = useRef<() => void>(() => undefined);\n\n useLayoutEffect(() => {\n action.current = () => {\n onSelect?.();\n if (closeOnSelect) close(\"activate\");\n };\n });\n\n const attach = useCallback((next: PublicInstance | null) => {\n setInstance(next ?? undefined);\n }, []);\n const setRow = useMergedRef(attach, ref);\n\n const run = useCallback(() => action.current(), []);\n\n const searchable = textValue ?? (P.isString(children) ? children : \"\");\n\n useLayoutEffect(() => {\n if (instance === undefined) return;\n return register({\n id: instance.id,\n disabled,\n label: searchable,\n activate: run,\n });\n }, [disabled, instance, register, run, searchable]);\n\n const active =\n instance !== undefined && Option.contains(activeId, instance.id);\n const state: MenuItemState = { disabled, highlighted: active };\n\n return (\n {\n if (instance !== undefined) noteFocus(instance.id);\n onFocus?.(event);\n }}\n onClick={(event) => {\n if (disabled) return;\n onClick?.(event);\n action.current();\n }}\n onMouseEnter={(event) => {\n notePointer(true);\n closeSubmenu(instance?.id);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n notePointer(false);\n onMouseLeave?.(event);\n }}\n style={mergeStyles(\n menuRowStyle(theme, { tone: emphasis, active, disabled }, className),\n resolveStyle(style, state),\n )}\n >\n \n {children}\n \n \n );\n};\n\nconst MenuCheckMark = ({ checked }: { readonly checked: boolean }) => {\n const theme = useTheme();\n return (\n \n {checked ? (\n \n ) : null}\n \n );\n};\n\nexport interface MenuCheckboxItemProps extends Omit {\n readonly checked: boolean;\n readonly onCheckedChange: (checked: boolean) => void;\n\n readonly style?: StateStyle;\n}\n\nexport interface MenuCheckboxItemState {\n readonly checked: boolean;\n readonly disabled: boolean;\n readonly highlighted: boolean;\n}\n\nexport const MenuCheckboxItem = ({\n checked,\n onCheckedChange,\n onSelect,\n disabled = false,\n leading,\n trailing,\n children,\n style,\n ref,\n ...rest\n}: MenuCheckboxItemProps) => {\n const { activeId } = useMenuContext();\n const instance = useRef(null);\n const attach = useCallback((next: PublicInstance | null) => {\n instance.current = next;\n }, []);\n const setRow = useMergedRef(attach, ref);\n const highlighted =\n instance.current !== null && Option.contains(activeId, instance.current.id);\n const state: MenuCheckboxItemState = { checked, disabled, highlighted };\n\n return (\n {\n onSelect?.();\n onCheckedChange(!checked);\n }}\n leading={leading ?? }\n trailing={trailing}\n >\n {children}\n \n );\n};\n\nexport interface MenuRadioGroupProps extends Omit {\n readonly value: string;\n\n readonly onValueChange: (value: string) => void;\n\n readonly label?: string;\n\n readonly className?: string;\n readonly children?: PartChildren;\n}\n\ninterface MenuRadioGroupValue {\n readonly value: string;\n readonly choose: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext(\n undefined,\n);\n\nconst useMenuRadioGroup = (): MenuRadioGroupValue => {\n const value = useContext(MenuRadioGroupContext);\n if (value === undefined) {\n throw new Error(\n \"MenuRadioItem must be used inside a MenuRadioGroup: the group owns the choice.\",\n );\n }\n return value;\n};\n\nexport const MenuRadioGroup = ({\n value,\n onValueChange,\n label,\n className,\n children,\n style,\n ...rest\n}: MenuRadioGroupProps) => {\n assertParts(menuRadioGroup, children);\n\n const group: MenuRadioGroupValue = { value, choose: onValueChange };\n\n return (\n \n \n {children}\n \n \n );\n};\n\nexport interface MenuRadioItemProps extends Omit<\n MenuItemProps,\n \"style\" | \"onSelect\"\n> {\n readonly value: string;\n\n readonly style?: StateStyle;\n}\n\nexport interface MenuRadioItemState {\n readonly checked: boolean;\n readonly disabled: boolean;\n readonly highlighted: boolean;\n}\n\nexport const MenuRadioItem = ({\n value,\n disabled = false,\n leading,\n trailing,\n children,\n style,\n ref,\n ...rest\n}: MenuRadioItemProps) => {\n const { value: chosen, choose } = useMenuRadioGroup();\n const { activeId } = useMenuContext();\n const instance = useRef(null);\n const attach = useCallback((next: PublicInstance | null) => {\n instance.current = next;\n }, []);\n const setRow = useMergedRef(attach, ref);\n const checked = chosen === value;\n const highlighted =\n instance.current !== null && Option.contains(activeId, instance.current.id);\n const state: MenuRadioItemState = { checked, disabled, highlighted };\n\n return (\n {\n if (!checked) choose(value);\n }}\n leading={leading ?? }\n trailing={trailing}\n >\n {children}\n \n );\n};\n\nexport interface MenuSeparatorProps extends Props {\n readonly className?: string;\n}\n\nexport const MenuSeparator = ({\n className,\n style,\n ...rest\n}: MenuSeparatorProps) => {\n const theme = useTheme();\n return (\n \n );\n};\n\nexport interface MenuLabelProps extends Props {\n readonly className?: string;\n}\n\nexport const MenuLabel = ({ className, style, ...rest }: MenuLabelProps) => {\n const theme = useTheme();\n return (\n \n );\n};\n\nexport interface MenuGroupProps extends Omit {\n readonly label?: string;\n\n readonly className?: string;\n readonly children?: PartChildren;\n}\n\nconst MenuGroupSurface = ({\n label,\n className,\n children,\n style,\n ...rest\n}: MenuGroupProps) => {\n const theme = useTheme();\n return (\n \n {children}\n \n );\n};\n\nexport const MenuGroup = ({\n className,\n children,\n style,\n ...rest\n}: MenuGroupProps) => {\n assertParts(menuGroup, children);\n return (\n \n {children}\n \n );\n};\n\nconst menuRowParts: ReadonlyArray = [\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuRadioItem,\n MenuGroup,\n MenuLabel,\n MenuSeparator,\n];\n\nconst menuGroup: PartsContract = {\n parent: \"menu group\",\n family: menuRowParts,\n accepts: [\n MenuItem,\n MenuCheckboxItem,\n MenuRadioGroup,\n MenuLabel,\n MenuSeparator,\n ],\n hint: \"Put rows, labels and separators directly inside the group.\",\n};\n\nconst menuRadioGroup: PartsContract = {\n parent: \"MenuRadioGroup\",\n family: menuRowParts,\n accepts: [MenuRadioItem, MenuLabel, MenuSeparator],\n hint: \"Put MenuRadioItem rows directly inside the radio group.\",\n};\n" }, { "path": "packages/components/src/menu/logic.ts", "target": "@ui/gpuixui/components/menu/logic.ts", "type": "registry:lib", "content": "import * as Arr from \"effect/Array\";\nimport * as Option from \"effect/Option\";\nimport { Match, pipe } from \"effect\";\nimport {\n firstEnabled,\n indexOfId,\n lastEnabled,\n nextEnabled,\n type CollectionItem,\n} from \"../internal/collection.js\";\nimport type { TypeaheadItem } from \"../typeahead.js\";\n\nexport interface MenuItemSpec extends CollectionItem, TypeaheadItem {\n readonly label: string;\n}\n\nexport interface MenuState {\n readonly activeId: Option.Option;\n}\n\nexport const initial: MenuState = { activeId: Option.none() };\n\nexport type MenuAction =\n | { readonly _tag: \"Reset\" }\n | { readonly _tag: \"Focus\"; readonly id: number }\n | { readonly _tag: \"Move\"; readonly delta: 1 | -1 }\n | { readonly _tag: \"First\" }\n | { readonly _tag: \"Last\" };\n\nconst idAt = (\n items: ReadonlyArray,\n index: Option.Option,\n): Option.Option =>\n pipe(\n index,\n Option.flatMap((at) => Option.map(Arr.get(items, at), (item) => item.id)),\n );\n\nconst activeIndex = (\n state: MenuState,\n items: ReadonlyArray,\n): Option.Option =>\n pipe(\n state.activeId,\n Option.flatMap((id) => indexOfId(items, id)),\n );\n\nexport const move = (\n state: MenuState,\n items: ReadonlyArray,\n action: MenuAction,\n): MenuState =>\n Match.value(action).pipe(\n Match.when({ _tag: \"Reset\" }, () => initial),\n Match.when({ _tag: \"Focus\" }, (focus) =>\n pipe(\n Arr.findFirst(items, (item) => item.id === focus.id),\n Option.filter((item) => !item.disabled),\n Option.match({\n onNone: () => state,\n onSome: () => ({ activeId: Option.some(focus.id) }),\n }),\n ),\n ),\n Match.when({ _tag: \"Move\" }, (step) => ({\n activeId: pipe(\n nextEnabled(items, activeIndex(state, items), step.delta),\n Option.flatMap((at) => idAt(items, Option.some(at))),\n Option.orElse(() => state.activeId),\n ),\n })),\n Match.when({ _tag: \"First\" }, () => ({\n activeId: idAt(items, firstEnabled(items)),\n })),\n Match.when({ _tag: \"Last\" }, () => ({\n activeId: idAt(items, lastEnabled(items)),\n })),\n Match.exhaustive,\n );\n\nexport const resolveActiveIndex = activeIndex;\n\nexport const isActive = (state: MenuState, id: number): boolean =>\n Option.contains(state.activeId, id);\n" }, { "path": "packages/components/src/menu/state.ts", "target": "@ui/gpuixui/components/menu/state.ts", "type": "registry:lib", "content": "import { useGpuix } from \"@gpuix/react\";\nimport * as Arr from \"effect/Array\";\nimport * as Option from \"effect/Option\";\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { useTypeahead } from \"../typeahead.js\";\nimport {\n initial,\n move as moveActive,\n resolveActiveIndex,\n type MenuAction,\n type MenuItemSpec,\n} from \"./logic.js\";\n\nexport interface MenuRow extends MenuItemSpec {\n readonly activate: () => void;\n}\n\nexport type MenuCloseReason =\n | \"activate\"\n | \"dismiss\"\n | \"outside\"\n | \"leave\"\n | \"pointer\";\n\nexport interface MenuContextValue {\n readonly rows: ReadonlyArray;\n readonly activeId: Option.Option;\n readonly register: (row: MenuRow) => () => void;\n\n readonly noteFocus: (id: number) => void;\n\n readonly focusRow: (id: number) => void;\n\n readonly step: (action: MenuAction) => void;\n\n readonly typeahead: (char: string) => void;\n\n readonly activateActive: () => void;\n\n readonly notePointer: (present: boolean) => void;\n\n readonly close: (reason: MenuCloseReason) => void;\n\n readonly closeSubmenu: (rowId?: number) => void;\n\n readonly claimSubmenu: (close: () => void, triggerId?: number) => () => void;\n}\n\nexport const MenuContext = createContext(\n undefined,\n);\n\nexport const MenuLeaving = createContext(false);\n\nexport const useMenuLeaving = (): boolean => useContext(MenuLeaving);\n\nexport const useMenuContext = (): MenuContextValue => {\n const value = useContext(MenuContext);\n if (value === undefined) {\n throw new Error(\"Menu parts must be used inside a menu content\");\n }\n return value;\n};\n\nconst ignorePointer = (): void => undefined;\n\nconst upsert = (\n rows: ReadonlyArray,\n row: MenuRow,\n): ReadonlyArray => {\n const existing = Arr.findFirst(rows, (candidate) => candidate.id === row.id);\n return Option.match(existing, {\n onNone: () => Arr.append(rows, row),\n onSome: (current) =>\n current.disabled === row.disabled && current.label === row.label\n ? rows\n : Arr.map(rows, (candidate) =>\n candidate.id === row.id ? row : candidate,\n ),\n });\n};\n\nexport const useMenuState = (\n close: (reason: MenuCloseReason) => void,\n notePointer: (present: boolean) => void = ignorePointer,\n): MenuContextValue => {\n const renderer = useGpuix().renderer;\n const [rows, setRows] = useState>([]);\n const [activeId, setActiveId] = useState>(\n initial.activeId,\n );\n\n const register = useCallback((row: MenuRow) => {\n setRows((current) => upsert(current, row));\n return () => {\n setRows((current) =>\n Arr.filter(current, (candidate) => candidate.id !== row.id),\n );\n };\n }, []);\n\n const noteFocus = useCallback((id: number) => {\n setActiveId(Option.some(id));\n }, []);\n\n const focusRow = useCallback(\n (id: number) => {\n setActiveId(Option.some(id));\n renderer?.focusElement?.(id);\n },\n [renderer],\n );\n\n const step = useCallback(\n (action: MenuAction) => {\n Option.match(moveActive({ activeId }, rows, action).activeId, {\n onNone: () => undefined,\n onSome: focusRow,\n });\n },\n [activeId, focusRow, rows],\n );\n\n const typeahead = useTypeahead(\n rows,\n resolveActiveIndex({ activeId }, rows),\n (row) => focusRow(row.id),\n );\n\n const activate = useCallback(\n (id: number) => {\n Option.match(\n Arr.findFirst(rows, (row) => row.id === id),\n {\n onNone: () => undefined,\n onSome: (row) => {\n if (!row.disabled) row.activate();\n },\n },\n );\n },\n [rows],\n );\n\n const activateActive = useCallback(() => {\n Option.match(activeId, {\n onNone: () => undefined,\n onSome: activate,\n });\n }, [activate, activeId]);\n\n const submenu = useRef<{\n readonly close: () => void;\n readonly triggerId: number | undefined;\n } | null>(null);\n\n const closeSubmenu = useCallback((rowId?: number) => {\n const open = submenu.current;\n if (open === null || (rowId !== undefined && open.triggerId === rowId)) {\n return;\n }\n submenu.current = null;\n open.close();\n }, []);\n\n const claimSubmenu = useCallback((close: () => void, triggerId?: number) => {\n const previous = submenu.current;\n submenu.current = { close, triggerId };\n if (previous !== null && previous.close !== close) previous.close();\n return () => {\n if (submenu.current?.close === close) submenu.current = null;\n };\n }, []);\n\n return useMemo(\n () => ({\n rows,\n activeId,\n register,\n noteFocus,\n focusRow,\n step,\n typeahead,\n activateActive,\n close,\n notePointer,\n closeSubmenu,\n claimSubmenu,\n }),\n [\n activateActive,\n activeId,\n claimSubmenu,\n close,\n closeSubmenu,\n focusRow,\n noteFocus,\n notePointer,\n register,\n rows,\n step,\n typeahead,\n ],\n );\n};\n" }, { "path": "packages/components/src/menu/sub.tsx", "target": "@ui/gpuixui/components/menu/sub.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { EventPayload, Props, PublicInstance } from \"@gpuix/react\";\nimport { useGpuix } from \"@gpuix/react\";\nimport { mergeStyles } from \"@gpuix/react/floating\";\nimport { Icon } from \"../../icons/index.js\";\nimport { Match } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport {\n createContext,\n useCallback,\n useContext,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n type RefObject,\n} from \"react\";\nimport { pushDismissLayer } from \"../internal/dismiss-layer.js\";\nimport { useDismissDepth } from \"../internal/dismiss-scope.js\";\nimport { claimEvent } from \"../internal/event-claim.js\";\nimport { useHoverDelays } from \"../internal/hover.js\";\nimport { isDown, isLeft, isRight, isUp } from \"../internal/key.js\";\nimport {\n assertParts,\n type PartChildren,\n type PartComponent,\n type PartsContract,\n} from \"../internal/parts.js\";\nimport {\n fadeFromAnchor,\n presenceMotion,\n presenceStyle,\n useSurfacePresence,\n useSurfaceTiming,\n} from \"../internal/presence.js\";\nimport { useMergedRef } from \"../internal/ref.js\";\nimport { useTheme } from \"../internal/theme.js\";\nimport {\n MenuCheckboxItem,\n MenuGroup,\n MenuItem,\n MenuLabel,\n MenuSeparator,\n type MenuItemProps,\n} from \"./item.js\";\nimport { MenuPointer, menuCloseGraceMs, submenuOpenDelayMs } from \"./hover.js\";\nimport {\n MenuContext,\n useMenuContext,\n useMenuState,\n type MenuCloseReason,\n} from \"./state.js\";\nimport { MenuSurface } from \"./surface.js\";\n\ninterface SubContextValue {\n readonly open: boolean;\n\n readonly openNow: () => void;\n\n readonly close: (reason: MenuCloseReason) => void;\n\n readonly hoverTrigger: (present: boolean) => void;\n\n readonly hoverContent: (present: boolean) => void;\n\n readonly trigger: RefObject;\n\n readonly focusEdge: RefObject<((edge: \"first\" | \"last\") => void) | null>;\n}\n\nconst SubContext = createContext(undefined);\n\nconst useSubContext = (): SubContextValue => {\n const value = useContext(SubContext);\n if (value === undefined) {\n throw new Error(\"Submenu parts must be used inside a Submenu\");\n }\n return value;\n};\n\nexport interface MenuSubProps {\n readonly children?: PartChildren;\n}\n\nexport const MenuSub = ({ children }: MenuSubProps) => {\n const renderer = useGpuix().renderer;\n const parent = useMenuContext();\n const [open, setOpen] = useState(false);\n const trigger = useRef(null);\n const focusEdge = useRef<((edge: \"first\" | \"last\") => void) | null>(null);\n const restoreFocus = useRef(false);\n\n const focusTrigger = useCallback(() => {\n Option.match(Option.fromNullishOr(trigger.current), {\n onNone: () => undefined,\n onSome: (instance) => renderer?.focusElement?.(instance.id),\n });\n }, [renderer, trigger]);\n\n const hover = useHoverDelays({\n open,\n setOpen: (next) => {\n if (!next) restoreFocus.current = true;\n setOpen(next);\n },\n openDelay: submenuOpenDelayMs,\n closeDelay: menuCloseGraceMs,\n });\n\n const openNow = useCallback(() => {\n hover.cancel();\n setOpen(true);\n }, [hover]);\n\n const close = useCallback(\n (reason: MenuCloseReason) => {\n restoreFocus.current = reason === \"dismiss\" || reason === \"pointer\";\n hover.cancel();\n setOpen(false);\n\n if (reason === \"pointer\") return;\n Match.value(reason).pipe(\n Match.when(\"activate\", () => parent.close(\"activate\")),\n Match.when(\"leave\", () => parent.close(\"leave\")),\n Match.when(\"outside\", () => parent.close(\"outside\")),\n Match.when(\"dismiss\", () => undefined),\n Match.exhaustive,\n );\n },\n [hover, parent],\n );\n\n useLayoutEffect(() => {\n if (open || !restoreFocus.current) return;\n restoreFocus.current = false;\n focusTrigger();\n }, [focusTrigger, open]);\n\n const value = useMemo(\n () => ({\n open,\n openNow,\n close,\n hoverTrigger: (present) => hover.pointer(\"trigger\", present),\n hoverContent: (present) => hover.pointer(\"content\", present),\n trigger,\n focusEdge,\n }),\n [close, hover, open, openNow],\n );\n assertParts(menuSub, children);\n\n return {children};\n};\n\nexport interface MenuSubTriggerProps extends Omit<\n MenuItemProps,\n \"onSelect\" | \"closeOnSelect\" | \"tone\"\n> {}\n\nexport const MenuSubTrigger = ({\n children,\n trailing,\n textValue,\n disabled = false,\n onKeyDown,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n ref,\n ...rest\n}: MenuSubTriggerProps) => {\n const theme = useTheme();\n const { open, openNow, close, hoverTrigger, trigger, focusEdge } =\n useSubContext();\n const setTrigger = useMergedRef(trigger, ref);\n\n return (\n (open ? close(\"dismiss\") : openNow())}\n onFocus={(event) => {\n if (open) focusEdge.current?.(\"first\");\n onFocus?.(event);\n }}\n onMouseEnter={(event) => {\n if (!disabled) hoverTrigger(true);\n onMouseEnter?.(event);\n }}\n onMouseLeave={(event) => {\n if (!disabled) hoverTrigger(false);\n onMouseLeave?.(event);\n }}\n onKeyDown={(event) => {\n if (!open) {\n if (isRight(event) || isDown(event) || isUp(event)) openNow();\n } else if (isDown(event) || isUp(event)) {\n claimEvent(event);\n focusEdge.current?.(isDown(event) ? \"first\" : \"last\");\n } else if (isRight(event)) {\n claimEvent(event);\n focusEdge.current?.(\"first\");\n } else if (isLeft(event)) {\n close(\"dismiss\");\n }\n onKeyDown?.(event);\n }}\n trailing={\n trailing ?? (\n \n )\n }\n >\n {children}\n \n );\n};\n\nconst SUBMENU_GAP = 4;\n\nconst SUBMENU_MAX_HEIGHT = 320;\n\nexport interface MenuSubContentProps extends Omit {\n readonly label?: string;\n readonly children?: PartChildren;\n}\n\nexport const MenuSubContent = ({\n label,\n children,\n onKeyDown,\n style,\n testId,\n ...rest\n}: MenuSubContentProps) => {\n const renderer = useGpuix().renderer;\n const { open, close, hoverContent, trigger, focusEdge } = useSubContext();\n const parent = useMenuContext();\n const pointer = useContext(MenuPointer);\n assertParts(menuSubContent, children);\n const parentClaim = parent.claimSubmenu;\n const surface = useRef(null);\n\n const menu = useMenuState(close, (present) => {\n hoverContent(present);\n pointer?.pointer(\"trigger\", present);\n });\n\n const depth = useDismissDepth();\n\n useLayoutEffect(() => {\n focusEdge.current = (edge) =>\n menu.step({ _tag: edge === \"first\" ? \"First\" : \"Last\" });\n }, [focusEdge, menu]);\n\n useLayoutEffect(\n () => () => {\n focusEdge.current = null;\n },\n [focusEdge],\n );\n\n const closeRef = useRef(close);\n useLayoutEffect(() => {\n closeRef.current = close;\n });\n\n const insideSurface = useCallback(\n (event: EventPayload): boolean => {\n const instance = surface.current;\n if (instance === null) return false;\n const bounds = renderer?.getElementBounds?.(instance.id);\n if (bounds === null || bounds === undefined) return false;\n const { x, y } = event;\n return (\n x !== undefined &&\n y !== undefined &&\n x >= bounds.x &&\n x <= bounds.x + bounds.width &&\n y >= bounds.y &&\n y <= bounds.y + bounds.height\n );\n },\n [renderer],\n );\n\n const setSurface = useCallback((next: PublicInstance | null) => {\n surface.current = next;\n }, []);\n\n useLayoutEffect(() => {\n if (!open) return;\n const release = parentClaim(\n () => closeRef.current(\"pointer\"),\n trigger.current?.id,\n );\n const pop = pushDismissLayer((event) => {\n if (event.eventType === \"mouseDownOutside\" && insideSurface(event))\n return;\n closeRef.current(event.eventType === \"keyDown\" ? \"dismiss\" : \"outside\");\n }, depth);\n return () => {\n pop();\n release();\n };\n }, [depth, insideSurface, open, parentClaim, trigger]);\n\n const [point, setPoint] = useState<{ x: number; y: number } | undefined>();\n\n const timing = useSurfaceTiming(\"normal\");\n const presence = useSurfacePresence(open, timing);\n\n useLayoutEffect(() => {\n if (!open) return;\n const instance = trigger.current;\n if (instance === null) return;\n Option.match(\n Option.fromNullishOr(renderer?.getElementBounds?.(instance.id)),\n {\n onNone: () => undefined,\n onSome: (bounds) =>\n setPoint({\n x: bounds.x + bounds.width + SUBMENU_GAP,\n y: bounds.y,\n }),\n },\n );\n }, [open, renderer, trigger]);\n\n const pendingFocus = useRef(true);\n useLayoutEffect(() => {\n if (!open) {\n pendingFocus.current = true;\n return;\n }\n if (!pendingFocus.current || menu.rows.length === 0) return;\n pendingFocus.current = false;\n menu.step({ _tag: \"First\" });\n }, [menu, open]);\n\n if (!presence.mounted || point === undefined) return null;\n\n return (\n \n \n {\n claimEvent(event);\n if (isLeft(event)) close(\"dismiss\");\n onKeyDown?.(event);\n }}\n style={mergeStyles(\n {\n position: \"relative\",\n ...presenceStyle(presence.present),\n },\n style,\n )}\n >\n {}\n \n {children}\n \n \n \n \n );\n};\n\nconst subParts: ReadonlyArray = [\n MenuSub,\n MenuSubTrigger,\n MenuSubContent,\n MenuItem,\n MenuCheckboxItem,\n MenuGroup,\n MenuLabel,\n MenuSeparator,\n];\n\nconst menuSub: PartsContract = {\n parent: \"MenuSub\",\n family: subParts,\n accepts: [MenuSubTrigger, MenuSubContent],\n hint: \"Put the submenu trigger and its content directly inside MenuSub.\",\n};\n\nconst menuSubContent: PartsContract = {\n parent: \"MenuSubContent\",\n family: subParts,\n accepts: [\n MenuItem,\n MenuCheckboxItem,\n MenuGroup,\n MenuLabel,\n MenuSeparator,\n MenuSub,\n ],\n hint: \"Put rows, groups, labels, separators and nested submenus directly inside MenuSubContent.\",\n};\n" }, { "path": "packages/components/src/menu/surface.tsx", "target": "@ui/gpuixui/components/menu/surface.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { KeyEvent, Props, StyleDesc } from \"@gpuix/react\";\nimport { mergeStyles } from \"@gpuix/react/floating\";\nimport { MENU_CONTENT } from \"../../tw/index.js\";\nimport { Match, pipe } from \"effect\";\nimport * as Option from \"effect/Option\";\nimport type { ReactNode } from \"react\";\nimport { isEventClaimed } from \"../internal/event-claim.js\";\nimport { dismissTopLayer } from \"../internal/dismiss-layer.js\";\nimport { DismissScope } from \"../internal/dismiss-scope.js\";\nimport {\n isActivation,\n isDismiss,\n isDown,\n isFirst,\n isLast,\n isTab,\n isUp,\n swallowsDefault,\n} from \"../internal/key.js\";\nimport { overlaySurfaceStyle } from \"../internal/overlay.js\";\nimport { PresenceShield } from \"../internal/presence.js\";\nimport { useTheme, type Theme } from \"../internal/theme.js\";\nimport { typedChar } from \"../typeahead.js\";\nimport { MenuLeaving, useMenuContext, type MenuContextValue } from \"./state.js\";\n\nexport const menuSurfaceStyle = (theme: Theme, className?: string): StyleDesc =>\n overlaySurfaceStyle(MENU_CONTENT, className, theme, \"lg\");\n\nexport const menuKeyHandlers = (\n menu: MenuContextValue,\n): {\n readonly onKeyDown: (event: KeyEvent) => void;\n readonly onKeyUp: (event: KeyEvent) => void;\n} => ({\n onKeyDown: (event: KeyEvent): void => {\n if (isEventClaimed(event)) return;\n if (swallowsDefault(event, \"down\")) event.preventDefault();\n pipe(\n typedChar(event),\n Option.match({\n onSome: menu.typeahead,\n onNone: () =>\n Match.value(event).pipe(\n Match.when(isDown, () => menu.step({ _tag: \"Move\", delta: 1 })),\n Match.when(isUp, () => menu.step({ _tag: \"Move\", delta: -1 })),\n Match.when(isFirst, () => menu.step({ _tag: \"First\" })),\n Match.when(isLast, () => menu.step({ _tag: \"Last\" })),\n Match.when(\n (press) => isActivation(press, \"down\"),\n menu.activateActive,\n ),\n Match.when(isDismiss, (value) => {\n dismissTopLayer(value);\n }),\n\n Match.when(isTab, () => menu.close(\"leave\")),\n Match.orElse(() => undefined),\n ),\n }),\n );\n },\n onKeyUp: (event: KeyEvent): void => {\n if (isEventClaimed(event)) return;\n if (isActivation(event, \"up\")) menu.activateActive();\n },\n});\n\nexport interface MenuSurfaceProps extends Props {\n readonly label?: string;\n\n readonly className?: string;\n readonly children?: ReactNode;\n\n readonly leaving?: boolean;\n}\n\nexport const MenuSurface = ({\n label,\n children,\n leaving = false,\n onKeyDown,\n onKeyUp,\n onMouseEnter,\n onMouseLeave,\n onMouseMove,\n className,\n style,\n ...rest\n}: MenuSurfaceProps) => {\n const theme = useTheme();\n const menu = useMenuContext();\n const keys = menuKeyHandlers(menu);\n\n return (\n {\n menu.notePointer(true);\n onMouseEnter?.(event);\n }}\n onMouseMove={(event) => {\n menu.notePointer(true);\n onMouseMove?.(event);\n }}\n onMouseLeave={(event) => {\n menu.notePointer(false);\n onMouseLeave?.(event);\n }}\n onKeyDown={(event) => {\n keys.onKeyDown(event);\n onKeyDown?.(event);\n }}\n onKeyUp={(event) => {\n keys.onKeyUp(event);\n onKeyUp?.(event);\n }}\n style={mergeStyles(\n mergeStyles(menuSurfaceStyle(theme, className), {\n pointerEvents: \"auto\",\n\n position: \"relative\",\n }),\n style,\n )}\n >\n \n {children}\n \n \n \n );\n};\n" }, { "path": "packages/components/src/popover.tsx", "target": "@ui/gpuixui/components/popover.tsx", "type": "registry:component", "content": "/** @jsxImportSource @gpuix/react */\nimport type { EventPayload, PublicInstance } from \"@gpuix/react\";\nimport { useGpuix } from \"@gpuix/react\";\nimport {\n FloatingLayer,\n floatingRootStyle,\n mergeStyles,\n type FloatingAlign,\n type FloatingContentProps,\n} from \"@gpuix/react/floating\";\nimport { POPOVER_CONTENT } from \"../tw/index.js\";\nimport {\n Button,\n type ButtonProps as PrimitiveButtonProps,\n} from \"../primitives/button.js\";\nimport { Match } from \"effect\";\nimport {\n createContext,\n useContext,\n useLayoutEffect,\n useMemo,\n useRef,\n type RefObject,\n} from \"react\";\nimport { useControllableState } from \"./internal/controllable.js\";\nimport { dismissTopLayer, pushDismissLayer } from \"./internal/dismiss-layer.js\";\nimport { DismissScope, useDismissDepth } from \"./internal/dismiss-scope.js\";\nimport { isDismiss, isTab } from \"./internal/key.js\";\nimport { overlaySurfaceStyle } from \"./internal/overlay.js\";\nimport {\n assertParts,\n type PartChildren,\n type PartComponent,\n type PartsContract,\n} from \"./internal/parts.js\";\nimport {\n fadeFromAnchor,\n PresenceShield,\n presenceMotion,\n presenceStyle,\n useSurfacePresence,\n useSurfaceTiming,\n} from \"./internal/presence.js\";\nimport { isAlign } from \"./internal/placement.js\";\nimport { isDismissalClick } from \"./internal/dismiss-layer.js\";\nimport { useMergedRef } from \"./internal/ref.js\";\nimport { useTheme } from \"./internal/theme.js\";\nimport { usePlacement } from \"./internal/use-placement.js\";\n\nconst popoverAlign = (align: unknown): FloatingAlign =>\n isAlign(align) ? align : \"center\";\n\ninterface PopoverContextValue {\n readonly open: boolean;\n readonly setOpen: (open: boolean) => void;\n readonly trigger: RefObject;\n}\n\nconst PopoverContext = createContext(\n undefined,\n);\n\nconst usePopoverContext = (): PopoverContextValue => {\n const value = useContext(PopoverContext);\n if (value === undefined) {\n throw new Error(\"Popover parts must be used inside Popover\");\n }\n return value;\n};\n\nexport interface PopoverProps {\n readonly open?: boolean;\n\n readonly defaultOpen?: boolean;\n readonly onOpenChange?: (open: boolean) => void;\n readonly children?: PartChildren;\n}\n\nexport const Popover = ({\n open: openProp,\n defaultOpen = false,\n onOpenChange,\n children,\n}: PopoverProps) => {\n const [open, setOpen] = useControllableState({\n value: openProp,\n defaultValue: defaultOpen,\n onChange: onOpenChange,\n });\n const trigger = useRef(null);\n\n const context = useMemo(\n () => ({ open, setOpen, trigger }),\n [open, setOpen],\n );\n\n assertParts(popoverRoot, children);\n\n return (\n \n
{children}
\n \n );\n};\n\nexport interface PopoverTriggerProps extends PrimitiveButtonProps {\n readonly onClick?: (event: EventPayload) => void;\n}\n\nexport const PopoverTrigger = ({\n onClick,\n onActivate,\n ref,\n variant = \"secondary\",\n ...rest\n}: PopoverTriggerProps) => {\n const { open, setOpen, trigger } = usePopoverContext();\n const setTrigger = useMergedRef(trigger, ref);\n\n return (\n {\n (onActivate ?? onClick)?.(event);\n\n if (isDismissalClick(event)) return;\n setOpen(!open);\n }}\n />\n );\n};\n\nexport interface PopoverContentProps extends FloatingContentProps {\n readonly className?: string;\n\n readonly side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n readonly align?: \"start\" | \"center\" | \"end\";\n\n readonly sideOffset?: number;\n\n readonly collisionPadding?: number;\n\n readonly alignOffset?: number;\n}\n\nexport const PopoverContent = ({\n className,\n side = \"bottom\",\n align = \"center\",\n sideOffset = 6,\n alignOffset = 0,\n collisionPadding = 8,\n children,\n onKeyDown,\n onMouseDownOutside,\n style,\n ref,\n ...rest\n}: PopoverContentProps) => {\n const theme = useTheme();\n const { open, setOpen, trigger } = usePopoverContext();\n const renderer = useGpuix().renderer;\n const surface = useRef(null);\n const setSurface = useMergedRef(surface, ref);\n const timing = useSurfaceTiming(\"normal\");\n const presence = useSurfacePresence(open, timing);\n const placement = usePlacement({\n open: presence.mounted,\n side,\n align: popoverAlign(align),\n margin: collisionPadding,\n trigger,\n surface,\n });\n\n const close = useRef<() => void>(() => undefined);\n useLayoutEffect(() => {\n close.current = () => setOpen(false);\n });\n\n const depth = useDismissDepth();\n useLayoutEffect(() => {\n if (!open) return;\n return pushDismissLayer((event) => {\n close.current();\n if (event.eventType === \"keyDown\") {\n const target = trigger.current;\n if (target !== null) renderer?.focusElement?.(target.id);\n return;\n }\n }, depth);\n }, [depth, open, renderer, trigger]);\n\n if (!presence.mounted) return null;\n\n return (\n {\n onMouseDownOutside?.(event);\n dismissTopLayer(event);\n }}\n onKeyDown={(event) => {\n onKeyDown?.(event);\n Match.value(event).pipe(\n Match.when(isDismiss, (value) => {\n dismissTopLayer(value);\n }),\n\n Match.when(isTab, () => setOpen(false)),\n Match.orElse(() => undefined),\n );\n }}\n style={mergeStyles(\n mergeStyles(\n overlaySurfaceStyle(POPOVER_CONTENT, className, theme, \"lg\"),\n\n {\n minWidth: 200,\n position: \"relative\",\n ...presenceStyle(presence.present),\n },\n ),\n style,\n )}\n >\n {children}\n \n \n );\n};\n\nconst popoverParts: ReadonlyArray = [\n Popover,\n PopoverTrigger,\n PopoverContent,\n];\n\nconst popoverRoot: PartsContract = {\n parent: \"Popover\",\n family: popoverParts,\n accepts: [PopoverTrigger, PopoverContent],\n hint: \"Put PopoverTrigger and PopoverContent directly inside Popover.\",\n};\n\nexport const popoverMeta = {\n name: \"Popovers\",\n tier: 2,\n status: \"done\",\n gpuixSupport: \"partial\",\n limitations: [\n \"positioning is GPUix's anchored layer: it snaps but does not flip, so the component flips once when the snapped surface would cover its trigger; no arrow or custom anchor element\",\n 'the runtime\\'s `align=\"center\"` centres on the containing block, so the component maps it to a measured `start` offset; the snap margin wins near a window edge',\n \"an outside press gives focus to whatever was pressed, so focus is not returned to the trigger (Escape is)\",\n ],\n docs: \"docs/popover.mdx\",\n example: \"examples/popover.example.tsx\",\n testFile: \"src/behaviour/popover.test.tsx\",\n} as const;\n" }, { "path": "packages/components/src/typeahead.ts", "target": "@ui/gpuixui/components/typeahead.ts", "type": "registry:lib", "content": "import type { EventPayload } from \"@gpuix/react\";\nimport { pipe } from \"effect\";\nimport * as Arr from \"effect/Array\";\nimport * as Duration from \"effect/Duration\";\nimport * as Option from \"effect/Option\";\nimport * as Str from \"effect/String\";\nimport { useCallback, useRef } from \"react\";\nimport { monotonicNanos } from \"./internal/clock.js\";\n\nexport interface TypeaheadBuffer {\n readonly text: string;\n readonly at: number;\n}\n\nexport const idleTypeahead: TypeaheadBuffer = { text: \"\", at: 0 };\n\nexport const typeaheadWindow: Duration.Duration = Duration.millis(500);\n\nexport const typeaheadWindowMs: number = Duration.toMillis(typeaheadWindow);\n\nexport const typeaheadNowMs = (): number =>\n Number(monotonicNanos() / 1_000_000n);\n\nexport const typeaheadPress = (\n buffer: TypeaheadBuffer,\n char: string,\n now: number,\n): TypeaheadBuffer => {\n const letter = Str.toLowerCase(char);\n if (\n buffer.text === \"\" ||\n !Number.isFinite(now) ||\n now - buffer.at > typeaheadWindowMs\n ) {\n return { text: letter, at: Number.isFinite(now) ? now : 0 };\n }\n const repeating = pipe(\n Str.split(\"\")(buffer.text),\n Arr.every((seen) => seen === letter),\n );\n return repeating\n ? { text: buffer.text, at: now }\n : { text: `${buffer.text}${letter}`, at: now };\n};\n\nexport interface TypeaheadItem {\n readonly label: string;\n readonly disabled: boolean;\n}\n\nconst normalise = (value: string): string => Str.toLowerCase(Str.trim(value));\n\nexport const typeaheadMatchIndex = (\n items: ReadonlyArray,\n from: Option.Option,\n prefix: string,\n): Option.Option => {\n const needle = normalise(prefix);\n if (Str.isEmpty(needle)) return Option.none();\n\n const fromIndex = Option.getOrElse(from, () => -1);\n\n return pipe(\n items,\n Arr.map((item, index) => ({ index, item, label: normalise(item.label) })),\n Arr.filter(\n (candidate) =>\n !candidate.item.disabled &&\n Str.isNonEmpty(candidate.label) &&\n Str.startsWith(needle)(candidate.label),\n ),\n (candidates) =>\n pipe(\n Arr.findFirst(candidates, (candidate) => candidate.index > fromIndex),\n Option.orElse(() => Arr.head(candidates)),\n Option.map((candidate) => candidate.index),\n ),\n );\n};\n\nexport const typeaheadMatch = (\n items: ReadonlyArray,\n from: Option.Option,\n prefix: string,\n): Option.Option =>\n Option.flatMap(typeaheadMatchIndex(items, from, prefix), (index) =>\n Arr.get(items, index),\n );\n\nexport const typedChar = (event: EventPayload): Option.Option =>\n pipe(\n Option.fromNullishOr(event.keyChar),\n Option.filter(\n (char) =>\n char.length === 1 &&\n char !== \" \" &&\n Option.exists(\n Option.fromNullishOr(event.key),\n (key) =>\n key.length === 1 &&\n event.modifiers?.cmd !== true &&\n event.modifiers?.ctrl !== true &&\n event.modifiers?.alt !== true,\n ),\n ),\n );\n\nexport const useTypeahead = (\n items: ReadonlyArray,\n from: Option.Option,\n onMatch: (item: Item) => void,\n): ((char: string) => void) => {\n const buffer = useRef(idleTypeahead);\n return useCallback(\n (char: string) => {\n const next = typeaheadPress(buffer.current, char, typeaheadNowMs());\n Option.match(typeaheadMatch(items, from, next.text), {\n onNone: () => {\n buffer.current = idleTypeahead;\n },\n onSome: (item) => {\n buffer.current = next;\n onMatch(item);\n },\n });\n },\n [from, items, onMatch],\n );\n};\n" } ], "docs": "[Runtime: components](https://gpuixui.sudokw.com/registry) — These are GPUix native components: the files render through GPUix's reconciler against `@gpuix/react`, not the DOM, and need the per-platform `@gpuix/native` binding. The CLI installs the `@gpuixui/*` runtime the components import as registry items, so the copied tree resolves on its own; wrap it in `ThemeProvider` before it renders.", "meta": { "url": "/registry", "kind": "runtime", "runtime": "gpuix", "registry": "gpuixui" } }