@neurocle/synapse-react 0.0.0-stage → 0.3.0

package/dist/components/collection-window.mjs

@@ -0,0 +1,299 @@
+"use client";
+import { unwrap, unwrapTree } from "../shared/collection-internal.mjs";
+import { createContext, createElement, useContext, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { visuallyHiddenStyle } from "@zag-js/dom-query";
+//#region src/components/collection-window.tsx
+const upstreamOf = (api) => typeof api === "object" && api !== null && "collection" in api && typeof api.collection === "object" && api.collection !== null ? api.collection : void 0;
+const listSourceOf = /* @__PURE__ */ new WeakMap();
+function rememberCollection(collection) {
+	const upstream = unwrap(collection);
+	listSourceOf.set(upstream, collection);
+	return upstream;
+}
+function collectionOf(api) {
+	const upstream = upstreamOf(api);
+	return upstream === void 0 ? null : listSourceOf.get(upstream) ?? null;
+}
+const treeSourceOf = /* @__PURE__ */ new WeakMap();
+function treeSource(collection) {
+	return {
+		rootNode: collection.rootNode,
+		nodeOf: (value) => collection.nodeOf(value),
+		labelOf: (value) => collection.labelOf(value),
+		isBranch: (value) => collection.isBranch(value),
+		positionOf: (value) => collection.positionOf(value),
+		visibleValues: (expandedValues) => collection.visibleValues(expandedValues),
+		resolveWindow: (request) => collection.resolveWindow(request),
+		childEntries: (value) => collection.childrenOf(value).map((node) => ({
+			item: node,
+			value: collection.valueOf(node)
+		}))
+	};
+}
+function rememberTreeCollection(collection) {
+	const upstream = unwrapTree(collection);
+	treeSourceOf.set(upstream, treeSource(collection));
+	return upstream;
+}
+function treeCollectionOf(api) {
+	const upstream = upstreamOf(api);
+	return upstream === void 0 ? null : treeSourceOf.get(upstream) ?? null;
+}
+const UNMEASURED_WINDOW = 60;
+const OVERSCAN = 8;
+const ESTIMATED_ROW_HEIGHT = 32;
+const PINNED_ROW_STYLE = visuallyHiddenStyle;
+function pinnedRowProps(hidden) {
+	return hidden ? { style: PINNED_ROW_STYLE } : {};
+}
+const UNMEASURED = {
+	scrollTop: 0,
+	height: 0
+};
+function scrollParentOf(element) {
+	let current = element?.parentElement ?? null;
+	while (current !== null) {
+		const { overflowY } = getComputedStyle(current);
+		if (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") return current;
+		current = current.parentElement;
+	}
+	return null;
+}
+function resolveWindowRange(request) {
+	const { scrollTop, viewportHeight, itemHeight, forced } = request;
+	const measured = viewportHeight > 0;
+	const count = measured ? Math.ceil(viewportHeight / itemHeight) : UNMEASURED_WINDOW;
+	let start = measured ? Math.floor(scrollTop / itemHeight) : 0;
+	if (forced !== null) {
+		const index = Math.max(0, Math.min(forced.index, Math.max(0, forced.size - 1)));
+		if (index < start) start = index;
+		else if (index >= start + count) start = index - count + 1;
+	}
+	return {
+		start: Math.max(0, start),
+		count
+	};
+}
+function useScrollRange(sizeOf) {
+	const anchor = useRef(null);
+	const [viewport, setViewport] = useState(UNMEASURED);
+	const [rowHeight, setRowHeight] = useState(0);
+	const [forcedIndex, setForcedIndex] = useState(null);
+	useEffect(() => {
+		const scroller = scrollParentOf(anchor.current);
+		if (scroller === null) return;
+		const read = () => {
+			setForcedIndex(null);
+			setViewport((previous) => previous.scrollTop === scroller.scrollTop && previous.height === scroller.clientHeight ? previous : {
+				scrollTop: scroller.scrollTop,
+				height: scroller.clientHeight
+			});
+		};
+		read();
+		scroller.addEventListener("scroll", read, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => read());
+		observer?.observe(scroller);
+		return () => {
+			scroller.removeEventListener("scroll", read);
+			observer?.disconnect();
+		};
+	}, []);
+	useEffect(() => {
+		const first = anchor.current?.nextElementSibling;
+		if (!(first instanceof HTMLElement)) return;
+		const measured = first.offsetHeight;
+		if (measured > 0 && measured !== rowHeight) setRowHeight(measured);
+	});
+	const unit = rowHeight > 0 ? rowHeight : ESTIMATED_ROW_HEIGHT;
+	const range = resolveWindowRange({
+		scrollTop: viewport.scrollTop,
+		viewportHeight: viewport.height,
+		itemHeight: unit,
+		forced: forcedIndex === null ? null : {
+			index: forcedIndex,
+			size: sizeOf()
+		}
+	});
+	useEffect(() => {
+		if (forcedIndex === null) return;
+		const scroller = scrollParentOf(anchor.current);
+		if (scroller === null) return;
+		const target = range.start * unit;
+		if (scroller.scrollTop !== target) scroller.scrollTop = target;
+	}, [
+		forcedIndex,
+		range.start,
+		unit
+	]);
+	return {
+		anchor,
+		unit,
+		start: range.start,
+		count: range.count,
+		forceIndex: setForcedIndex
+	};
+}
+function createWindowHandle() {
+	let mounted = null;
+	return {
+		forceIndex: (index) => mounted?.(index),
+		connect: (forceIndex) => {
+			mounted = forceIndex;
+			return () => {
+				if (mounted === forceIndex) mounted = null;
+			};
+		}
+	};
+}
+const WindowHandleContext = createContext(null);
+WindowHandleContext.displayName = "SynapseWindowHandle";
+function useWindowHandle() {
+	return useContext(WindowHandleContext);
+}
+function withWindowHandle(Root) {
+	function WindowedRoot(props) {
+		const [handle] = useState(createWindowHandle);
+		return createElement(WindowHandleContext.Provider, { value: handle }, createElement(Root, props));
+	}
+	WindowedRoot.displayName = "displayName" in Root && typeof Root.displayName === "string" ? Root.displayName : "Root";
+	return WindowedRoot;
+}
+function usePublishedHandle(forceIndex) {
+	const handle = useContext(WindowHandleContext);
+	useEffect(() => handle?.connect(forceIndex), [handle, forceIndex]);
+}
+const spacerRow = (rows, unit, anchor) => /* @__PURE__ */ jsx("div", {
+	ref: anchor ?? null,
+	role: "presentation",
+	"aria-hidden": "true",
+	style: { blockSize: `${rows * unit}px` }
+});
+function WindowedRows(props) {
+	const { collection, activeValue, renderRow } = props;
+	const { anchor, start, count, unit } = useScrollRange(() => collection.size);
+	const window = collection.resolveWindow({
+		start,
+		count,
+		activeValue,
+		overscan: OVERSCAN
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		spacerRow(window.leadingCount, unit, anchor),
+		window.rows.map((row) => renderRow(row, row.pinned)),
+		spacerRow(window.trailingCount, unit)
+	] });
+}
+function WindowedTreeRows(props) {
+	const { collection, expandedValues, activeValue, renderRow } = props;
+	const { anchor, start, count, unit, forceIndex } = useScrollRange(() => collection.visibleValues(expandedValues).length);
+	usePublishedHandle(forceIndex);
+	const window = collection.resolveWindow({
+		expandedValues,
+		start,
+		count,
+		activeValue,
+		overscan: OVERSCAN
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		spacerRow(window.leadingCount, unit, anchor),
+		window.rows.map((row) => renderRow(row, row.pinned)),
+		spacerRow(window.trailingCount, unit)
+	] });
+}
+function resolveBranchWindow(collection, parentValue, request) {
+	const children = collection.childEntries(parentValue);
+	const size = children.length;
+	const safeCount = Math.max(0, request.count);
+	const rawStart = Math.max(0, Math.min(request.start, Math.max(0, size - safeCount)));
+	const windowStart = Math.max(0, rawStart - request.overscan);
+	const windowEnd = Math.min(size, rawStart + safeCount + request.overscan);
+	const entries = children.slice(windowStart, windowEnd).map((child, offset) => ({
+		item: child.item,
+		value: child.value,
+		index: windowStart + offset
+	}));
+	const activeIndex = request.activeValue === null ? -1 : children.findIndex((child) => child.value === request.activeValue);
+	const activeChild = activeIndex !== -1 && (activeIndex < windowStart || activeIndex >= windowEnd) ? children[activeIndex] : void 0;
+	const pinned = activeChild === void 0 ? null : {
+		item: activeChild.item,
+		value: activeChild.value,
+		index: activeIndex
+	};
+	const rows = (pinned === null ? entries : pinned.index < windowStart ? [pinned, ...entries] : [...entries, pinned]).map((entry) => ({
+		item: entry.item,
+		value: entry.value,
+		index: entry.index,
+		position: collection.positionOf(entry.value) ?? {
+			level: 1,
+			posInSet: entry.index + 1,
+			setSize: size,
+			indexPath: [entry.index],
+			valuePath: [entry.value],
+			branch: false
+		},
+		pinned: pinned !== null && entry.index === pinned.index
+	}));
+	return {
+		start: windowStart,
+		end: windowEnd,
+		entries,
+		leadingCount: windowStart,
+		trailingCount: size - windowEnd,
+		pinned,
+		rows
+	};
+}
+function WindowedBranchRows(props) {
+	const { collection, parentValue, activeValue, renderRow } = props;
+	const { anchor, start, count, unit } = useScrollRange(() => collection.childEntries(parentValue).length);
+	const window = resolveBranchWindow(collection, parentValue, {
+		start,
+		count,
+		activeValue,
+		overscan: OVERSCAN
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		spacerRow(window.leadingCount, unit, anchor),
+		window.rows.map((row) => renderRow(row, row.pinned)),
+		spacerRow(window.trailingCount, unit)
+	] });
+}
+function positionProps(position) {
+	return {
+		"aria-posinset": position.posInSet,
+		"aria-setsize": position.setSize
+	};
+}
+const highlightedValueOf = (api) => typeof api === "object" && api !== null && "highlightedValue" in api && typeof api.highlightedValue === "string" ? api.highlightedValue : null;
+function windowedContent(options) {
+	const readActive = options.activeValue ?? highlightedValueOf;
+	return (api) => {
+		const collection = collectionOf(api);
+		if (collection === null) return null;
+		return /* @__PURE__ */ jsx(WindowedRows, {
+			collection,
+			activeValue: readActive(api),
+			renderRow: (row, hidden) => options.renderRow(row, hidden, collection)
+		});
+	};
+}
+const isString = (value) => typeof value === "string";
+const expandedValueOf = (api) => typeof api === "object" && api !== null && "expandedValue" in api && Array.isArray(api.expandedValue) ? api.expandedValue.filter(isString) : [];
+function windowedTreeContent(options) {
+	const readExpanded = options.expandedValues ?? expandedValueOf;
+	return (api) => {
+		const collection = treeCollectionOf(api);
+		if (collection === null) return null;
+		return /* @__PURE__ */ jsx(WindowedTreeRows, {
+			collection,
+			expandedValues: readExpanded(api),
+			activeValue: options.activeValue(api),
+			renderRow: (row, hidden) => options.renderRow(row, hidden, collection)
+		});
+	};
+}
+//#endregion
+export { WindowedBranchRows, WindowedRows, WindowedTreeRows, collectionOf, pinnedRowProps, positionProps, rememberCollection, rememberTreeCollection, resolveWindowRange, treeCollectionOf, useWindowHandle, windowedContent, windowedTreeContent, withWindowHandle };
+
+//# sourceMappingURL=collection-window.mjs.map

package/dist/components/collection-window.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collection-window.mjs","names":[],"sources":["../../src/components/collection-window.tsx"],"sourcesContent":["'use client'\n\nimport type { ListCollection, TreeCollection } from '@zag-js/collection'\nimport { visuallyHiddenStyle } from '@zag-js/dom-query'\nimport {\n  createContext,\n  createElement,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n  type RefObject,\n} from 'react'\n\nimport { unwrap, unwrapTree } from '#/shared/collection-internal.ts'\nimport type {\n  CollectionWindow,\n  ItemPosition,\n  SynapseCollection,\n  SynapseTreeCollection,\n  TreeNodePosition,\n  TreeWindowRequest,\n  WindowEntry,\n  WindowRequest,\n  WindowRow,\n} from '#/shared/collection.ts'\n\nexport interface ListSource {\n  readonly size: number\n  labelOf: (value: string | null | undefined) => string | null\n  resolveWindow: (request: WindowRequest) => CollectionWindow<unknown>\n}\n\nexport interface TreeSource {\n  readonly rootNode: unknown\n  nodeOf: (value: string | null | undefined) => unknown\n  labelOf: (value: string | null | undefined) => string | null\n  isBranch: (value: string | null | undefined) => boolean\n  positionOf: (value: string | null | undefined) => TreeNodePosition | null\n  visibleValues: (expandedValues: readonly string[]) => readonly string[]\n  resolveWindow: (request: TreeWindowRequest) => CollectionWindow<unknown, TreeNodePosition>\n  childEntries: (value: string | null | undefined) => readonly ChildEntry[]\n}\n\nexport interface ChildEntry {\n  readonly item: unknown\n  readonly value: string\n}\n\nconst upstreamOf = (api: unknown): object | undefined =>\n  typeof api === 'object' &&\n  api !== null &&\n  'collection' in api &&\n  typeof api.collection === 'object' &&\n  api.collection !== null\n    ? api.collection\n    : undefined\n\nconst listSourceOf = new WeakMap<object, ListSource>()\n\nexport function rememberCollection<TItem>(\n  collection: SynapseCollection<TItem>,\n): ListCollection<unknown> {\n  const upstream = unwrap(collection)\n  listSourceOf.set(upstream, collection)\n  return upstream\n}\n\nexport function collectionOf(api: unknown): ListSource | null {\n  const upstream = upstreamOf(api)\n  return upstream === undefined ? null : (listSourceOf.get(upstream) ?? null)\n}\n\nconst treeSourceOf = new WeakMap<object, TreeSource>()\n\nfunction treeSource<TNode>(collection: SynapseTreeCollection<TNode>): TreeSource {\n  return {\n    rootNode: collection.rootNode,\n    nodeOf: (value) => collection.nodeOf(value),\n    labelOf: (value) => collection.labelOf(value),\n    isBranch: (value) => collection.isBranch(value),\n    positionOf: (value) => collection.positionOf(value),\n    visibleValues: (expandedValues) => collection.visibleValues(expandedValues),\n    resolveWindow: (request) => collection.resolveWindow(request),\n    childEntries: (value) =>\n      collection.childrenOf(value).map((node) => ({ item: node, value: collection.valueOf(node) })),\n  }\n}\n\nexport function rememberTreeCollection<TNode>(\n  collection: SynapseTreeCollection<TNode>,\n): TreeCollection<unknown> {\n  const upstream = unwrapTree(collection)\n  treeSourceOf.set(upstream, treeSource(collection))\n  return upstream\n}\n\nexport function treeCollectionOf(api: unknown): TreeSource | null {\n  const upstream = upstreamOf(api)\n  return upstream === undefined ? null : (treeSourceOf.get(upstream) ?? null)\n}\n\nexport const WINDOWED_COLLECTION_LIMIT = 100_000\n\nconst UNMEASURED_WINDOW = 60\n\nconst OVERSCAN = 8\n\nconst ESTIMATED_ROW_HEIGHT = 32\n\nconst PINNED_ROW_STYLE: CSSProperties = visuallyHiddenStyle\n\nexport interface WindowedRowsProps {\n  collection: ListSource\n  activeValue: string | null\n  renderRow: (row: WindowRow<unknown>, hidden: boolean) => ReactNode\n}\n\nexport function pinnedRowProps(hidden: boolean): { style?: CSSProperties } {\n  return hidden ? { style: PINNED_ROW_STYLE } : {}\n}\n\ninterface Viewport {\n  scrollTop: number\n  height: number\n}\n\nconst UNMEASURED: Viewport = { scrollTop: 0, height: 0 }\n\nfunction scrollParentOf(element: Element | null): HTMLElement | null {\n  let current = element?.parentElement ?? null\n  while (current !== null) {\n    const { overflowY } = getComputedStyle(current)\n    if (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') return current\n    current = current.parentElement\n  }\n  return null\n}\n\nexport interface ForcedIndex {\n  index: number\n  size: number\n}\n\nexport interface WindowRange {\n  start: number\n  count: number\n}\n\nexport interface WindowRangeRequest {\n  scrollTop: number\n  viewportHeight: number\n  itemHeight: number\n  forced: ForcedIndex | null\n}\n\nexport function resolveWindowRange(request: WindowRangeRequest): WindowRange {\n  const { scrollTop, viewportHeight, itemHeight, forced } = request\n  const measured = viewportHeight > 0\n  const count = measured ? Math.ceil(viewportHeight / itemHeight) : UNMEASURED_WINDOW\n  let start = measured ? Math.floor(scrollTop / itemHeight) : 0\n\n  if (forced !== null) {\n    const index = Math.max(0, Math.min(forced.index, Math.max(0, forced.size - 1)))\n    if (index < start) start = index\n    else if (index >= start + count) start = index - count + 1\n  }\n\n  return { start: Math.max(0, start), count }\n}\n\ninterface ScrollRange {\n  anchor: RefObject<HTMLDivElement | null>\n  start: number\n  count: number\n  unit: number\n  forceIndex: (index: number) => void\n}\n\nfunction useScrollRange(sizeOf: () => number): ScrollRange {\n  const anchor = useRef<HTMLDivElement | null>(null)\n  const [viewport, setViewport] = useState<Viewport>(UNMEASURED)\n  const [rowHeight, setRowHeight] = useState(0)\n  const [forcedIndex, setForcedIndex] = useState<number | null>(null)\n\n  useEffect(() => {\n    const scroller = scrollParentOf(anchor.current)\n    if (scroller === null) return\n\n    const read = (): void => {\n      setForcedIndex(null)\n      setViewport((previous) =>\n        previous.scrollTop === scroller.scrollTop && previous.height === scroller.clientHeight\n          ? previous\n          : { scrollTop: scroller.scrollTop, height: scroller.clientHeight },\n      )\n    }\n\n    read()\n    scroller.addEventListener('scroll', read, { passive: true })\n    const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => read())\n    observer?.observe(scroller)\n    return () => {\n      scroller.removeEventListener('scroll', read)\n      observer?.disconnect()\n    }\n  }, [])\n\n  useEffect(() => {\n    const first = anchor.current?.nextElementSibling\n    if (!(first instanceof HTMLElement)) return\n    const measured = first.offsetHeight\n    if (measured > 0 && measured !== rowHeight) setRowHeight(measured)\n  })\n\n  const unit = rowHeight > 0 ? rowHeight : ESTIMATED_ROW_HEIGHT\n  const range = resolveWindowRange({\n    scrollTop: viewport.scrollTop,\n    viewportHeight: viewport.height,\n    itemHeight: unit,\n    forced: forcedIndex === null ? null : { index: forcedIndex, size: sizeOf() },\n  })\n\n  useEffect(() => {\n    if (forcedIndex === null) return\n    const scroller = scrollParentOf(anchor.current)\n    if (scroller === null) return\n    const target = range.start * unit\n    if (scroller.scrollTop !== target) scroller.scrollTop = target\n  }, [forcedIndex, range.start, unit])\n\n  return { anchor, unit, start: range.start, count: range.count, forceIndex: setForcedIndex }\n}\n\nexport interface WindowHandle {\n  forceIndex: (index: number) => void\n  connect: (forceIndex: (index: number) => void) => () => void\n}\n\nfunction createWindowHandle(): WindowHandle {\n  let mounted: ((index: number) => void) | null = null\n  return {\n    forceIndex: (index) => mounted?.(index),\n    connect: (forceIndex) => {\n      mounted = forceIndex\n      return () => {\n        if (mounted === forceIndex) mounted = null\n      }\n    },\n  }\n}\n\nconst WindowHandleContext = createContext<WindowHandle | null>(null)\nWindowHandleContext.displayName = 'SynapseWindowHandle'\n\nexport function useWindowHandle(): WindowHandle | null {\n  return useContext(WindowHandleContext)\n}\n\nexport function withWindowHandle<TProps extends object>(\n  Root: (props: TProps) => ReactNode,\n): (props: TProps) => ReactNode {\n  function WindowedRoot(props: TProps): ReactNode {\n    const [handle] = useState(createWindowHandle)\n    return createElement(\n      WindowHandleContext.Provider,\n      { value: handle },\n      createElement(Root, props),\n    )\n  }\n  WindowedRoot.displayName =\n    'displayName' in Root && typeof Root.displayName === 'string' ? Root.displayName : 'Root'\n  return WindowedRoot\n}\n\nfunction usePublishedHandle(forceIndex: (index: number) => void): void {\n  const handle = useContext(WindowHandleContext)\n  useEffect(() => handle?.connect(forceIndex), [handle, forceIndex])\n}\n\nconst spacerRow = (\n  rows: number,\n  unit: number,\n  anchor?: RefObject<HTMLDivElement | null>,\n): ReactNode => (\n  <div\n    ref={anchor ?? null}\n    role=\"presentation\"\n    aria-hidden=\"true\"\n    style={{ blockSize: `${rows * unit}px` }}\n  />\n)\n\nexport function WindowedRows(props: WindowedRowsProps): ReactNode {\n  const { collection, activeValue, renderRow } = props\n  const { anchor, start, count, unit } = useScrollRange(() => collection.size)\n\n  const window = collection.resolveWindow({ start, count, activeValue, overscan: OVERSCAN })\n\n  return (\n    <>\n      {spacerRow(window.leadingCount, unit, anchor)}\n      {window.rows.map((row) => renderRow(row, row.pinned))}\n      {spacerRow(window.trailingCount, unit)}\n    </>\n  )\n}\n\nexport interface WindowedTreeRowsProps {\n  collection: TreeSource\n  expandedValues: readonly string[]\n  activeValue: string | null\n  renderRow: (row: WindowRow<unknown, TreeNodePosition>, hidden: boolean) => ReactNode\n}\n\nexport function WindowedTreeRows(props: WindowedTreeRowsProps): ReactNode {\n  const { collection, expandedValues, activeValue, renderRow } = props\n  const { anchor, start, count, unit, forceIndex } = useScrollRange(\n    () => collection.visibleValues(expandedValues).length,\n  )\n  usePublishedHandle(forceIndex)\n\n  const window = collection.resolveWindow({\n    expandedValues,\n    start,\n    count,\n    activeValue,\n    overscan: OVERSCAN,\n  })\n\n  return (\n    <>\n      {spacerRow(window.leadingCount, unit, anchor)}\n      {window.rows.map((row) => renderRow(row, row.pinned))}\n      {spacerRow(window.trailingCount, unit)}\n    </>\n  )\n}\n\nfunction resolveBranchWindow(\n  collection: TreeSource,\n  parentValue: string | null,\n  request: { start: number; count: number; activeValue: string | null; overscan: number },\n): CollectionWindow<unknown, TreeNodePosition> {\n  const children = collection.childEntries(parentValue)\n  const size = children.length\n  const safeCount = Math.max(0, request.count)\n  const rawStart = Math.max(0, Math.min(request.start, Math.max(0, size - safeCount)))\n  const windowStart = Math.max(0, rawStart - request.overscan)\n  const windowEnd = Math.min(size, rawStart + safeCount + request.overscan)\n\n  const entries: WindowEntry<unknown>[] = children\n    .slice(windowStart, windowEnd)\n    .map((child, offset) => ({ item: child.item, value: child.value, index: windowStart + offset }))\n\n  const activeIndex =\n    request.activeValue === null\n      ? -1\n      : children.findIndex((child) => child.value === request.activeValue)\n  const outside = activeIndex !== -1 && (activeIndex < windowStart || activeIndex >= windowEnd)\n  const activeChild = outside ? children[activeIndex] : undefined\n  const pinned: WindowEntry<unknown> | null =\n    activeChild === undefined\n      ? null\n      : { item: activeChild.item, value: activeChild.value, index: activeIndex }\n\n  const withPin: WindowEntry<unknown>[] =\n    pinned === null\n      ? entries\n      : pinned.index < windowStart\n        ? [pinned, ...entries]\n        : [...entries, pinned]\n\n  const rows: WindowRow<unknown, TreeNodePosition>[] = withPin.map((entry) => ({\n    item: entry.item,\n    value: entry.value,\n    index: entry.index,\n    position: collection.positionOf(entry.value) ?? {\n      level: 1,\n      posInSet: entry.index + 1,\n      setSize: size,\n      indexPath: [entry.index],\n      valuePath: [entry.value],\n      branch: false,\n    },\n    pinned: pinned !== null && entry.index === pinned.index,\n  }))\n\n  return {\n    start: windowStart,\n    end: windowEnd,\n    entries,\n    leadingCount: windowStart,\n    trailingCount: size - windowEnd,\n    pinned,\n    rows,\n  }\n}\n\nexport interface WindowedBranchRowsProps {\n  collection: TreeSource\n  parentValue: string | null\n  activeValue: string | null\n  renderRow: (row: WindowRow<unknown, TreeNodePosition>, hidden: boolean) => ReactNode\n}\n\nexport function WindowedBranchRows(props: WindowedBranchRowsProps): ReactNode {\n  const { collection, parentValue, activeValue, renderRow } = props\n  const { anchor, start, count, unit } = useScrollRange(\n    () => collection.childEntries(parentValue).length,\n  )\n\n  const window = resolveBranchWindow(collection, parentValue, {\n    start,\n    count,\n    activeValue,\n    overscan: OVERSCAN,\n  })\n\n  return (\n    <>\n      {spacerRow(window.leadingCount, unit, anchor)}\n      {window.rows.map((row) => renderRow(row, row.pinned))}\n      {spacerRow(window.trailingCount, unit)}\n    </>\n  )\n}\n\nexport function positionProps(position: ItemPosition): {\n  'aria-posinset': number\n  'aria-setsize': number\n} {\n  return { 'aria-posinset': position.posInSet, 'aria-setsize': position.setSize }\n}\n\nexport interface WindowedContentOptions {\n  activeValue?: (api: unknown) => string | null\n  renderRow: (row: WindowRow<unknown>, hidden: boolean, collection: ListSource) => ReactNode\n}\n\nconst highlightedValueOf = (api: unknown): string | null =>\n  typeof api === 'object' &&\n  api !== null &&\n  'highlightedValue' in api &&\n  typeof api.highlightedValue === 'string'\n    ? api.highlightedValue\n    : null\n\nexport function windowedContent(options: WindowedContentOptions): (api: unknown) => ReactNode {\n  const readActive = options.activeValue ?? highlightedValueOf\n  return (api) => {\n    const collection = collectionOf(api)\n    if (collection === null) return null\n    return (\n      <WindowedRows\n        collection={collection}\n        activeValue={readActive(api)}\n        renderRow={(row, hidden) => options.renderRow(row, hidden, collection)}\n      />\n    )\n  }\n}\n\nexport interface WindowedTreeContentOptions<TApi> {\n  expandedValues?: (api: TApi) => readonly string[]\n  activeValue: (api: TApi) => string | null\n  renderRow: (\n    row: WindowRow<unknown, TreeNodePosition>,\n    hidden: boolean,\n    collection: TreeSource,\n  ) => ReactNode\n}\n\nconst isString = (value: unknown): value is string => typeof value === 'string'\n\nconst expandedValueOf = (api: unknown): readonly string[] =>\n  typeof api === 'object' &&\n  api !== null &&\n  'expandedValue' in api &&\n  Array.isArray(api.expandedValue)\n    ? api.expandedValue.filter(isString)\n    : []\n\nexport function windowedTreeContent<TApi>(\n  options: WindowedTreeContentOptions<TApi>,\n): (api: TApi) => ReactNode {\n  const readExpanded = options.expandedValues ?? expandedValueOf\n  return (api) => {\n    const collection = treeCollectionOf(api)\n    if (collection === null) return null\n    return (\n      <WindowedTreeRows\n        collection={collection}\n        expandedValues={readExpanded(api)}\n        activeValue={options.activeValue(api)}\n        renderRow={(row, hidden) => options.renderRow(row, hidden, collection)}\n      />\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/components/color-picker/color-picker.d.mts

@@ -0,0 +1,67 @@
+import { TranslationOverrides } from "../../provider/translations.mjs";
+import { SynapseComponent } from "../../system/types.mjs";
+import { OpenChangeDetails } from "../details.mjs";
+import { Size } from "../../shared/size-scale.mjs";
+//#region src/components/color-picker/color-picker.d.ts
+export declare const COLOR_PICKER_FORMATS: readonly ['rgba', 'hsla', 'hsba'];
+export type ColorPickerFormat = (typeof COLOR_PICKER_FORMATS)[number];
+export interface ColorPickerPositioning {
+  placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+  gutter?: number;
+  flip?: boolean;
+}
+export interface ColorPickerValueChangeDetails {
+  readonly value: string;
+}
+export interface ColorPickerFormatChangeDetails {
+  readonly format: ColorPickerFormat;
+}
+export interface ColorPickerRootProps {
+  /** 제어되는 색이며, 어떤 CSS 색 문자열이든 됩니다. */
+  value?: string;
+  /** 비제어 초기 색. `value`가 주어지면 무시됩니다. */
+  defaultValue?: string;
+  /** 드래그의 매 단계를 포함해, 값이 바뀔 때마다 알림을 받습니다. */
+  onValueChange?: (details: ColorPickerValueChangeDetails) => void;
+  /** 드래그가 끝난 뒤 한 번 알림을 받습니다 — 저장할 때 쓸 콜백입니다. */
+  onValueChangeEnd?: (details: ColorPickerValueChangeDetails) => void;
+  /** 제어되는 떠 있는 레이어의 열림 상태. */
+  open?: boolean;
+  /** 비제어 초기 열림 상태. */
+  defaultOpen?: boolean;
+  /** 피커가 열리거나 닫힐 때마다 알림을 받습니다. */
+  onOpenChange?: (details: OpenChangeDetails) => void;
+  /** 숫자 입력과 슬라이더가 다루는, 제어되는 채널 형식. */
+  format?: ColorPickerFormat;
+  /** 비제어 초기 형식. 기본값은 `rgba`입니다. */
+  defaultFormat?: ColorPickerFormat;
+  /** 형식이 바뀔 때마다 알림을 받습니다. */
+  onFormatChange?: (details: ColorPickerFormatChangeDetails) => void;
+  /** 피커를 떠 있는 레이어가 아니라 제자리에 렌더링합니다. */
+  inline?: boolean;
+  /** 색 견본을 고르면 떠 있는 레이어를 닫습니다. 기본값은 false입니다. */
+  closeOnSelect?: boolean;
+  /** 열릴 때 포커스를 콘텐츠 안으로 옮깁니다. 기본값은 true입니다. */
+  openAutoFocus?: boolean;
+  /** 떠 있는 레이어가 놓이는 위치. */
+  positioning?: ColorPickerPositioning;
+  /** 폼 필드 이름. 이것이 없으면 컨트롤은 아무것도 제출하지 않습니다. */
+  name?: string;
+  /** 비활성화된 ColorPicker는 제출되지 않고 반응하지도 않습니다. */
+  disabled?: boolean;
+  /** 읽기 전용 ColorPicker는 값을 제출하지만 바꿀 수는 없습니다. */
+  readOnly?: boolean;
+  /** 보조 기술에 `aria-invalid`로 알려집니다. */
+  invalid?: boolean;
+  /** 제약 검증: 폼이 제출되려면 색이 골라져 있어야 합니다. */
+  required?: boolean;
+  /** 이 ColorPicker에만 적용되는 접근성 문자열이며, provider의 것보다 우선합니다. */
+  translations?: TranslationOverrides;
+  /** 하나의 공유 척도에서 옵니다. 모든 컴포넌트가 그렇듯 기본값은 `md`입니다. */
+  size?: Size;
+  /** 팩토리가 생성하는 식별자를 덮어씁니다. 서버와 클라이언트에서 동일합니다. */
+  id?: string;
+}
+export declare const ColorPicker: SynapseComponent<"area" | "areaBackground" | "areaThumb" | "channelInput" | "channelSlider" | "channelSliderLabel" | "channelSliderThumb" | "channelSliderTrack" | "channelSliderValueText" | "content" | "control" | "eyeDropperTrigger" | "formatSelect" | "formatTrigger" | "label" | "positioner" | "root" | "swatch" | "swatchGroup" | "swatchIndicator" | "swatchTrigger" | "transparencyGrid" | "trigger" | "valueText", "root", ColorPickerRootProps, never>;
+//#endregion
+//# sourceMappingURL=color-picker.d.mts.map

package/dist/components/color-picker/color-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker.d.mts","names":[],"sources":["../../../src/components/color-picker/color-picker.tsx"],"mappings":";;;;;qBAgBa;YAED,4BAA4B;iBAEvB;EACf;EASA;EACA;;iBAGe;WACN;;iBAGM;WACN,QAAQ;;iBAGF;;EAEf;;EAEA;;EAEA,iBAAiB,SAAS;;EAE1B,oBAAoB,SAAS;;EAE7B;;EAEA;;EAEA,gBAAgB,SAAS;;EAEzB,SAAS;;EAET,gBAAgB;;EAEhB,kBAAkB,SAAS;;EAE3B;;EAEA;;EAEA;;EAEA,cAAc;;EAEd;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA,eAAe;;EAEf,OAAO;;EAEP;;qBA8FW,aAAW,waAAA"}

package/dist/components/color-picker/color-picker.mjs

@@ -0,0 +1,230 @@
+"use client";
+import { resolveSize, sizeBelow } from "../../shared/size-scale.mjs";
+import { checkmark } from "../../icons/src/checkmark.mjs";
+import { eyedropper } from "../../icons/src/eyedropper.mjs";
+import "../../icons/src/index.mjs";
+import { Icon } from "../../shared/icon.mjs";
+import { defineComponent } from "../../system/create-component.mjs";
+import { buttonPartClass } from "../../shared/button-style.mjs";
+import { inputPartClass } from "../../shared/input-style.mjs";
+import { withSelectIndicator } from "../../shared/select-indicator.mjs";
+import { colorPickerRecipe } from "./color-picker.recipe.mjs";
+import { createElement, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as colorPicker from "@zag-js/color-picker";
+//#region src/components/color-picker/color-picker.tsx
+const COLOR_PICKER_FORMATS = [
+	"rgba",
+	"hsla",
+	"hsba"
+];
+const useColorPickerMachineProps = (props) => {
+	const [emitted] = useState(() => /* @__PURE__ */ new Map());
+	const remember = (details) => {
+		emitted.clear();
+		emitted.set(details.valueAsString, details.value);
+	};
+	const resolve = (value) => emitted.get(value) ?? colorPicker.parse(value);
+	return {
+		...props.value === void 0 ? {} : { value: resolve(props.value) },
+		...props.defaultValue === void 0 ? {} : { defaultValue: colorPicker.parse(props.defaultValue) },
+		onValueChange: (details) => {
+			remember(details);
+			props.onValueChange?.({ value: details.valueAsString });
+		},
+		onValueChangeEnd: (details) => {
+			remember(details);
+			props.onValueChangeEnd?.({ value: details.valueAsString });
+		}
+	};
+};
+const CHANNEL_LABELS = {
+	hue: "colorPicker.channelSlider.hue",
+	saturation: "colorPicker.channelSlider.saturation",
+	brightness: "colorPicker.channelSlider.brightness",
+	lightness: "colorPicker.channelSlider.lightness",
+	red: "colorPicker.channelSlider.red",
+	green: "colorPicker.channelSlider.green",
+	blue: "colorPicker.channelSlider.blue",
+	alpha: "colorPicker.channelSlider.alpha",
+	hex: "colorPicker.channelSlider.hex",
+	css: "colorPicker.channelSlider.css"
+};
+const channelLabel = (channel, translate) => {
+	const key = typeof channel === "string" ? CHANNEL_LABELS[channel] : void 0;
+	return key === void 0 ? String(channel) : translate(key);
+};
+const invalidOf = (behaviorProps) => behaviorProps["data-invalid"] === "" ? true : void 0;
+const PERCENT_CHANNELS = /* @__PURE__ */ new Set([
+	"saturation",
+	"brightness",
+	"lightness"
+]);
+const channelValueText = (channel, value, translate) => {
+	if (Number.isNaN(value)) return void 0;
+	if (channel === "hue") return translate("colorPicker.channelSliderThumb.degrees", { value: Math.round(value) });
+	if (channel === "alpha") return translate("colorPicker.channelSliderThumb.percent", { value: Math.round(value * 100) });
+	if (PERCENT_CHANNELS.has(channel)) return translate("colorPicker.channelSliderThumb.percent", { value: Math.round(value) });
+	return String(Math.round(value));
+};
+const MACHINE_FORMATS = [
+	"hsba",
+	"hsla",
+	"rgba"
+];
+const COLOR_CHANNELS = [
+	"hue",
+	"saturation",
+	"brightness",
+	"lightness",
+	"red",
+	"green",
+	"blue",
+	"alpha"
+];
+const channelOr = (value, fallback) => COLOR_CHANNELS.find((channel) => channel === value) ?? fallback;
+const formatOptions = () => COLOR_PICKER_FORMATS.map((format) => createElement("option", {
+	key: format,
+	value: format
+}, format));
+const ColorPicker = defineComponent()({
+	name: "ColorPicker",
+	module: colorPicker,
+	rootPart: "root",
+	elements: {
+		valueText: "span",
+		channelSliderLabel: "span",
+		channelSliderValueText: "span",
+		swatchIndicator: "span",
+		channelInput: "input",
+		formatSelect: "select"
+	},
+	getterProps: {
+		area: ["xChannel", "yChannel"],
+		areaBackground: ["xChannel", "yChannel"],
+		areaThumb: ["xChannel", "yChannel"],
+		channelSlider: [
+			"channel",
+			"orientation",
+			"format"
+		],
+		channelSliderTrack: [
+			"channel",
+			"orientation",
+			"format"
+		],
+		channelSliderThumb: [
+			"channel",
+			"orientation",
+			"format"
+		],
+		channelSliderLabel: ["channel", "orientation"],
+		channelSliderValueText: ["channel", "orientation"],
+		channelInput: ["channel", "orientation"],
+		swatchTrigger: ["value", "disabled"],
+		swatch: ["value", "respectAlpha"],
+		swatchIndicator: ["value", "respectAlpha"]
+	},
+	defaultContent: {
+		formatSelect: formatOptions,
+		valueText: (api) => api.valueAsString,
+		eyeDropperTrigger: () => /* @__PURE__ */ jsx(Icon, { icon: eyedropper }),
+		swatchIndicator: () => /* @__PURE__ */ jsx(Icon, { icon: checkmark })
+	},
+	rootOwnedGetters: [{
+		name: "hiddenInput",
+		getter: "getHiddenInputProps",
+		element: "input"
+	}],
+	amendBehaviorProps: {
+		trigger: (behaviorProps, api, _args, translate) => ({
+			"aria-label": translate("colorPicker.trigger.label", { value: api.valueAsString }),
+			"aria-invalid": invalidOf(behaviorProps)
+		}),
+		areaThumb: (behaviorProps, api, getterArgs, translate) => {
+			const { value, format } = api;
+			const area = value.toFormat(format.startsWith("hsl") ? "hsla" : "hsba");
+			const [, defaultX, defaultY] = area.getChannels();
+			const xChannel = channelOr(getterArgs["xChannel"], defaultX);
+			const yChannel = channelOr(getterArgs["yChannel"], defaultY);
+			const x = channelLabel(xChannel, translate);
+			const y = channelLabel(yChannel, translate);
+			return {
+				"aria-label": translate("colorPicker.areaThumb.label", {
+					xChannel: x,
+					yChannel: y
+				}),
+				"aria-roledescription": translate("colorPicker.areaThumb.roleDescription"),
+				"aria-valuetext": translate("colorPicker.areaThumb.valueText", {
+					xChannel: x,
+					xValue: String(area.getChannelValue(xChannel)),
+					yChannel: y,
+					yValue: String(area.getChannelValue(yChannel))
+				}),
+				"aria-invalid": invalidOf(behaviorProps)
+			};
+		},
+		channelSliderThumb: (behaviorProps, _api, getterArgs, translate) => ({
+			"aria-label": channelLabel(getterArgs["channel"], translate),
+			"aria-valuetext": channelValueText(String(getterArgs["channel"]), Number(behaviorProps["aria-valuenow"]), translate),
+			"aria-invalid": invalidOf(behaviorProps)
+		}),
+		channelInput: (behaviorProps, _api, getterArgs, translate) => ({
+			"aria-label": channelLabel(getterArgs["channel"], translate),
+			"aria-invalid": invalidOf(behaviorProps)
+		}),
+		eyeDropperTrigger: (_behaviorProps, _api, _args, translate) => ({ "aria-label": translate("colorPicker.eyeDropperTrigger.label") }),
+		swatchTrigger: (behaviorProps, _api, _args, translate) => ({ "aria-label": translate("colorPicker.swatchTrigger.label", { value: String(behaviorProps["data-value"]) }) }),
+		formatTrigger: (_behaviorProps, api, _args, translate) => {
+			const index = MACHINE_FORMATS.indexOf(api.format);
+			return { "aria-label": translate("colorPicker.formatTrigger.label", { format: MACHINE_FORMATS[(index + 1) % MACHINE_FORMATS.length] ?? MACHINE_FORMATS[0] }) };
+		},
+		formatSelect: (_behaviorProps, _api, _args, translate) => ({ "aria-label": translate("colorPicker.formatSelect.label") }),
+		positioner: (_behaviorProps, api) => api.inline ? { style: void 0 } : {}
+	},
+	field: {
+		ids: (field) => ({
+			label: field.label,
+			trigger: field.control
+		}),
+		describe: [
+			"trigger",
+			"channelInput",
+			"areaThumb",
+			"channelSliderThumb"
+		],
+		labelable: false
+	},
+	machineTranslations: null,
+	variantProps: [
+		"value",
+		"defaultValue",
+		"onValueChange",
+		"onValueChangeEnd",
+		"size"
+	],
+	useMachineProps: useColorPickerMachineProps,
+	slots: (props) => {
+		const size = resolveSize(props.size, "ColorPicker");
+		const raw = colorPickerRecipe.raw({ size });
+		return {
+			...colorPickerRecipe({ size }),
+			eyeDropperTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size
+			}, raw.eyeDropperTrigger),
+			formatTrigger: buttonPartClass({
+				variant: "ghost",
+				tone: "neutral",
+				size: sizeBelow(size)
+			}, raw.formatTrigger),
+			channelInput: inputPartClass(size, raw.channelInput)
+		};
+	}
+});
+Object.assign(ColorPicker, { FormatSelect: withSelectIndicator(ColorPicker.FormatSelect) });
+//#endregion
+export { COLOR_PICKER_FORMATS, ColorPicker };
+
+//# sourceMappingURL=color-picker.mjs.map