@gunkin/uiify 0.0.15-alpha → 0.0.16-alpha

package/README.md

@@ -7,7 +7,7 @@ Native-first, accessible React 19 components that work before hydration.
 ## Install
 
 ```bash
-npm install @gunkin/uiify@alpha react react-dom
+npm install @gunkin/uiify react react-dom
 ```
 
 ## Use
@@ -44,6 +44,39 @@ For @gunkin/uiify, read node_modules/@gunkin/uiify/agents/index.md
 
 In a monorepo with hoisted dependencies, point to the nearest `node_modules/@gunkin/uiify`.
 
+### `/uiify` page-building skill
+
+The package also includes the `/uiify` AI skill. Use it when an agent is creating or improving a
+web page with UIify: it maps the brief to available components, plans the page in `DESIGN.md`,
+implements the page in `src/App.tsx` when that file exists, and reports the checks it could run.
+It uses the installed package's component references and follows UIify's public styling and
+accessibility contracts. Invoke it explicitly so it runs only for page-building work.
+
+Install the skill into the directory your agent reads:
+
+```bash
+# Cross-tool Agent Skills location (Codex, Copilot, Cursor, and compatible tools)
+mkdir -p .agents/skills/uiify
+cp -R node_modules/@gunkin/uiify/skills/uiify/. .agents/skills/uiify/
+
+# For Claude Code, use this location instead
+mkdir -p .claude/skills/uiify
+cp -R node_modules/@gunkin/uiify/skills/uiify/. .claude/skills/uiify/
+```
+
+Then invoke `/uiify <page brief>` in Claude Code, or use the explicit skill invocation supported by
+your agent. Add `--auto` to run all stages without confirmation gates. Interactive runs pause at
+each stage so you can stop before implementation. The skill writes its design state to `DESIGN.md`
+and page code under `src/`; it does not create a page when `src/App.tsx` is absent.
+
+### Keeping the skill current when developing UIify
+
+When changing a UIify component, update its public component reference and example when its API or
+usage changes, and update the harness catalog when its coverage or gap status changes. Then run
+`npm run checks:fix` from the repository root. This regenerates the consumer AI docs and `/uiify`
+skill, then checks their tests and freshness. Review and commit generated changes with the component
+change. `npm run check:ai-harness` runs the focused tests and freshness checks without rewriting files.
+
 Documentation: https://uiify.gunkin.dev/
 
 MIT © Anton Gunkin

package/agents/components.md

@@ -67,6 +67,7 @@ its exports, props and shapes; exact types are in the `.d.ts` file listed in the
 | [otp-input](./reference/components/otp-input.md) | `@gunkin/uiify/components/otp-input` | 2 | none | `input` | `dist/components/otp-input.d.ts` |  |
 | [color-picker](./reference/components/color-picker.md) | `@gunkin/uiify/components/color-picker` | 1 | S1 | `input[type=color]` | `dist/components/color-picker.d.ts` |  |
 | [virtual-scroll](./reference/components/virtual-scroll.md) | `@gunkin/uiify/components/virtual-scroll` | 2 | none | `div[overflow]` | `dist/components/virtual-scroll.d.ts` |  |
+| [table-of-contents](./reference/components/table-of-contents.md) | `@gunkin/uiify/components/table-of-contents` | 2 | S1 | `nav + button[popovertarget] + [popover] + a[href]` | `dist/components/table-of-contents.d.ts` | Base entry is a server-pure native navigation shell; /client adds enhancements. Native links and popover invocation/dismissal work without JavaScript. |
 
 ## Elements
 

package/agents/index.md

@@ -74,7 +74,7 @@ export function BillingLink() {
 }
 ```
 
-Parts do not share React context. Each part names its root with an id you choose:
+Native server parts do not share React context. Each part names its root with an id you choose:
 
 ```tsx
 import { Field } from "@gunkin/uiify/components/field";
@@ -171,3 +171,9 @@ Check a component's tier in `components.md` before importing it into a Server Co
 
 Some components also have sub-entries such as `@gunkin/uiify/components/modal/client` for
 controlled state. They are listed under **Sub-entries** in the component's reference file.
+
+TableOfContents has a server-pure base entry for native popover buttons and fragment links.
+Import `@gunkin/uiify/components/table-of-contents/client` for scrollspy, hover opening,
+pinning and controlled `value`/`open`. Provide unique `Content.id` and matching `Trigger.target`,
+label the navigation and trigger, and match each `Indicator.value` to a target heading ID.
+The client Root owns context for its parts. A permanent list omits Trigger and Content.

package/agents/reference/components/table-of-contents.md

@@ -0,0 +1,185 @@
+<!-- Generated from the package source. Do not edit by hand. -->
+# table-of-contents
+
+- Import: `@gunkin/uiify/components/table-of-contents`
+- Tier 2 (Client component — pre-hydration SSR); state source S1; native element `nav + button[popovertarget] + [popover] + a[href]`
+- Without JavaScript: pre-hydration-only
+- Types file: `dist/components/table-of-contents.d.ts`
+- Note: Base entry is a server-pure native navigation shell; /client adds enhancements. Native links and popover invocation/dismissal work without JavaScript.
+
+## Exports
+
+- Runtime: `TableOfContents`, `TableOfContentsRoot`, `TableOfContentsTrigger`, `TableOfContentsRail`, `TableOfContentsIndicator`, `TableOfContentsContent`, `TableOfContentsList`, `TableOfContentsLink`
+- Types: `TableOfContentsLevel`, `TableOfContentsRootOwnProps`, `TableOfContentsRootProps`, `TableOfContentsTriggerOwnProps`, `TableOfContentsTriggerProps`, `TableOfContentsRailOwnProps`, `TableOfContentsRailProps`, `TableOfContentsIndicatorOwnProps`, `TableOfContentsIndicatorProps`, `TableOfContentsContentOwnProps`, `TableOfContentsContentProps`, `TableOfContentsListOwnProps`, `TableOfContentsListProps`, `TableOfContentsLinkOwnProps`, `TableOfContentsLinkProps`
+
+## Values
+
+- `TableOfContentsLevel`: `1 | 2 | 3 | 4 | 5 | 6`
+
+## Props and shapes
+
+### TableOfContentsRootOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | no |  |
+
+### TableOfContentsTriggerOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | no |  |
+| `target` | `string` | yes |  |
+
+### TableOfContentsRailOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | no |  |
+
+### TableOfContentsIndicatorOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `ref` | `Ref<HTMLElement>` | no |  |
+| `style` | `CSSProperties` | no |  |
+| `children` | `ReactNode` | no |  |
+| `value` | `string` | yes | Stable target ID matching a Link fragment. |
+| `level` | `TableOfContentsLevel` | no |  |
+| `selected` | `boolean` | no |  |
+
+### TableOfContentsContentOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | no |  |
+| `id` | `string` | yes |  |
+| `side` | `AnchorSide` | no |  |
+| `align` | `AnchorAlign` | no |  |
+
+### TableOfContentsListOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` | no |  |
+
+### TableOfContentsLinkOwnProps
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `style` | `CSSProperties` | no |  |
+| `"aria-current"` | `AriaAttributes["aria-current"]` | no |  |
+| `children` | `ReactNode` | no |  |
+| `href` | `string` | yes | Native same-page anchor; external URLs are not tracked by scrollspy. |
+| `level` | `TableOfContentsLevel` | no |  |
+| `selected` | `boolean` | no |  |
+
+### TableOfContentsTargetSnapshot
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `value` | `string` | yes |  |
+| `start` | `number` | yes |  |
+| `visible` | `boolean` | yes |  |
+
+### TableOfContentsScrollSnapshot
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `targets` | `readonly TableOfContentsTargetSnapshot[]` | yes |  |
+| `viewportStart` | `number` | yes |  |
+| `viewportEnd` | `number` | yes |  |
+| `offset` | `number` | yes |  |
+| `contentEnd` | `number \| null` | yes |  |
+
+### TableOfContentsObserverOptions
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `root` | `HTMLElement` | yes |  |
+| `scrollTarget` | `string \| undefined` | no |  |
+| `contentTarget` | `string \| undefined` | no |  |
+| `offset` | `number` | yes |  |
+| `onValueChange` | `(value: string \| null) => void` | yes |  |
+
+### TableOfContentsObserver
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `refresh` | `() => void` | yes |  |
+| `destroy` | `() => void` | yes |  |
+
+### TableOfContentsClientRootOwnProps
+
+Extends: `TableOfContentsRootOwnProps`
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `ref` | `Ref<HTMLElement>` | no |  |
+| `className` | `string` | no |  |
+| `style` | `CSSProperties` | no |  |
+| `onClick` | `MouseEventHandler<HTMLElement>` | no |  |
+| `scrollSpy` | `boolean` | no |  |
+| `scrollTarget` | `string` | no | Scroll-container element ID; omitted tracks the owning window. |
+| `contentTarget` | `string` | no | Content element ID used for target scope and end-of-content selection. |
+| `offset` | `number` | no |  |
+| `value` | `string \| null` | no |  |
+| `defaultValue` | `string \| null` | no |  |
+| `onValueChange` | `(value: string \| null) => void` | no |  |
+| `open` | `boolean` | no |  |
+| `defaultOpen` | `boolean` | no | Applied after hydration; the native SSR surface starts closed. |
+| `onOpenChange` | `(open: boolean) => void` | no |  |
+| `openOnHover` | `boolean` | no |  |
+| `openDelay` | `number` | no |  |
+| `closeDelay` | `number` | no |  |
+
+### TableOfContentsClientContextValue
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `value` | `string \| null` | yes |  |
+| `open` | `boolean` | yes |  |
+| `documentUrl` | `string \| undefined` | yes |  |
+
+### TableOfContentsInteractionOptions
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `root` | `HTMLElement` | yes |  |
+| `getOpen` | `() => boolean` | yes |  |
+| `requestOpen` | `(open: boolean) => void` | yes |  |
+| `controlled` | `boolean` | yes |  |
+| `openOnHover` | `boolean` | yes |  |
+| `openDelay` | `number` | yes |  |
+| `closeDelay` | `number` | yes |  |
+
+### TableOfContentsInteractions
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `click` | `(event: MouseEvent) => void` | yes |  |
+| `destroy` | `() => void` | yes |  |
+
+### TableOfContentsPointerOptions
+
+| Member | Type | Required | Description |
+| --- | --- | --- | --- |
+| `root` | `HTMLElement` | yes |  |
+
+## Other types
+
+- `TableOfContentsRootProps<TAs>`: `RenderableProps<TAs, TableOfContentsRootOwnProps, Record<string, never>, HTMLElement>`
+- `TableOfContentsTriggerProps<TAs>`: `NativeButtonProps<TAs, TableOfContentsTriggerOwnProps>`
+- `TableOfContentsRailProps<TAs>`: `RenderableProps<TAs, TableOfContentsRailOwnProps, Record<string, never>, HTMLElement>`
+- `TableOfContentsIndicatorProps<TAs>`: `RenderableProps<TAs, TableOfContentsIndicatorOwnProps, { selected: boolean }, HTMLElement>`
+- `TableOfContentsContentProps<TAs>`: `RenderableProps<TAs, TableOfContentsContentOwnProps, Record<string, never>, HTMLElement>`
+- `TableOfContentsListProps<TAs>`: `RenderableProps<TAs, TableOfContentsListOwnProps, Record<string, never>, HTMLElement>`
+- `TableOfContentsLinkProps<TAs>`: `RenderableProps<TAs, TableOfContentsLinkOwnProps, { selected: boolean }, HTMLAnchorElement>`
+- `TableOfContentsClientRootProps<TAs>`: `RenderableProps<TAs, TableOfContentsClientRootOwnProps, { value: string | null; open: boolean }, HTMLElement>`
+
+## Sub-entries
+
+### `@gunkin/uiify/components/table-of-contents/client`
+
+- Runtime: `TableOfContents`, `TableOfContentsRoot`, `TableOfContentsTrigger`, `TableOfContentsContent`, `TableOfContentsLink`, `TableOfContentsIndicator`, `TableOfContentsRail`, `TableOfContentsList`
+- Types: `TableOfContentsClientRootOwnProps`, `TableOfContentsClientRootProps`, `TableOfContentsLevel`, `TableOfContentsTriggerProps`, `TableOfContentsRailProps`, `TableOfContentsContentProps`, `TableOfContentsListProps`, `TableOfContentsLinkProps`, `TableOfContentsIndicatorProps`

package/dist/components/index.d.ts

@@ -41,4 +41,5 @@ export * from "./drawer/index.js";
 export * from "./context-menu/index.js";
 export * from "./header/index.js";
 export * from "./virtual-scroll/index.js";
+export * from "./table-of-contents/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAE1C,cAAc,8BAA8B,CAAC"}

package/dist/components/index.js

@@ -41,4 +41,5 @@ export * from "./drawer/index.js";
 export * from "./context-menu/index.js";
 export * from "./header/index.js";
 export * from "./virtual-scroll/index.js";
+export * from "./table-of-contents/index.js";
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// @gunkin/uiify/components — root barrel export.\n// Each component task appends one line here:\n//   export * from \"./<name>/index.js\";\n\nexport * from \"./button/index.js\";\nexport * from \"./checkbox/index.js\";\nexport * from \"./modal/index.js\";\nexport * from \"./dropdown-menu/index.js\";\nexport * from \"./hover-card/index.js\";\nexport * from \"./input/index.js\";\nexport * from \"./popup/index.js\";\nexport * from \"./radio-group/index.js\";\nexport * from \"./slider/index.js\";\nexport * from \"./switch/index.js\";\nexport * from \"./tabs/index.js\";\nexport * from \"./textarea/index.js\";\nexport * from \"./toggle-group/index.js\";\nexport * from \"./toolbar/index.js\";\nexport * from \"./toggle/index.js\";\nexport * from \"./tooltip/index.js\";\nexport * from \"./accordion/index.js\";\nexport * from \"./alert-modal/index.js\";\nexport * from \"./combobox/index.js\";\nexport * from \"./toast/index.js\";\nexport * from \"./select/index.js\";\nexport * from \"./spinner/index.js\";\nexport * from \"./skeleton/index.js\";\nexport * from \"./collapsible/index.js\";\nexport * from \"./breadcrumb/index.js\";\nexport * from \"./pagination/index.js\";\nexport * from \"./table/index.js\";\nexport * from \"./number-field/index.js\";\nexport * from \"./otp-input/index.js\";\nexport * from \"./segmented-control/index.js\";\nexport * from \"./rating/index.js\";\nexport * from \"./field/index.js\";\nexport * from \"./form/index.js\";\nexport * from \"./tags-input/index.js\";\nexport * from \"./file-upload/index.js\";\nexport * from \"./color-picker/index.js\";\nexport * from \"./carousel/index.js\";\nexport * from \"./candle-chart/index.js\";\nexport * from \"./line-chart/index.js\";\nexport * from \"./drawer/index.js\";\nexport * from \"./context-menu/index.js\";\nexport * from \"./header/index.js\";\nexport * from \"./virtual-scroll/index.js\";\n"],"mappings":"AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["// @gunkin/uiify/components — root barrel export.\n// Each component task appends one line here:\n//   export * from \"./<name>/index.js\";\n\nexport * from \"./button/index.js\";\nexport * from \"./checkbox/index.js\";\nexport * from \"./modal/index.js\";\nexport * from \"./dropdown-menu/index.js\";\nexport * from \"./hover-card/index.js\";\nexport * from \"./input/index.js\";\nexport * from \"./popup/index.js\";\nexport * from \"./radio-group/index.js\";\nexport * from \"./slider/index.js\";\nexport * from \"./switch/index.js\";\nexport * from \"./tabs/index.js\";\nexport * from \"./textarea/index.js\";\nexport * from \"./toggle-group/index.js\";\nexport * from \"./toolbar/index.js\";\nexport * from \"./toggle/index.js\";\nexport * from \"./tooltip/index.js\";\nexport * from \"./accordion/index.js\";\nexport * from \"./alert-modal/index.js\";\nexport * from \"./combobox/index.js\";\nexport * from \"./toast/index.js\";\nexport * from \"./select/index.js\";\nexport * from \"./spinner/index.js\";\nexport * from \"./skeleton/index.js\";\nexport * from \"./collapsible/index.js\";\nexport * from \"./breadcrumb/index.js\";\nexport * from \"./pagination/index.js\";\nexport * from \"./table/index.js\";\nexport * from \"./number-field/index.js\";\nexport * from \"./otp-input/index.js\";\nexport * from \"./segmented-control/index.js\";\nexport * from \"./rating/index.js\";\nexport * from \"./field/index.js\";\nexport * from \"./form/index.js\";\nexport * from \"./tags-input/index.js\";\nexport * from \"./file-upload/index.js\";\nexport * from \"./color-picker/index.js\";\nexport * from \"./carousel/index.js\";\nexport * from \"./candle-chart/index.js\";\nexport * from \"./line-chart/index.js\";\nexport * from \"./drawer/index.js\";\nexport * from \"./context-menu/index.js\";\nexport * from \"./header/index.js\";\nexport * from \"./virtual-scroll/index.js\";\n\nexport * from \"./table-of-contents/index.js\";\n"],"mappings":"AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,cAAc;","names":[]}

package/dist/components/table-of-contents/TableOfContents.d.ts

@@ -0,0 +1,22 @@
+import type { ElementType, ReactElement } from "react";
+import type { TableOfContentsRootProps, TableOfContentsTriggerProps, TableOfContentsRailProps, TableOfContentsIndicatorProps, TableOfContentsContentProps, TableOfContentsListProps, TableOfContentsLinkProps } from "./types.js";
+export declare function TableOfContentsRoot<TAs extends ElementType = "nav">(props: TableOfContentsRootProps<TAs>): ReactElement | null;
+export declare function TableOfContentsTrigger<TAs extends ElementType = "button">(props: TableOfContentsTriggerProps<TAs>): ReactElement;
+export declare namespace TableOfContentsTrigger {
+    var displayName: string;
+}
+export declare function TableOfContentsRail<TAs extends ElementType = "span">(props: TableOfContentsRailProps<TAs>): ReactElement | null;
+export declare function TableOfContentsIndicator<TAs extends ElementType = "span">(props: TableOfContentsIndicatorProps<TAs>): ReactElement | null;
+export declare function TableOfContentsContent<TAs extends ElementType = "div">(props: TableOfContentsContentProps<TAs>): ReactElement | null;
+export declare function TableOfContentsList<TAs extends ElementType = "div">(props: TableOfContentsListProps<TAs>): ReactElement | null;
+export declare function TableOfContentsLink<TAs extends ElementType = "a">(props: TableOfContentsLinkProps<TAs>): ReactElement | null;
+export declare const TableOfContents: {
+    Root: typeof TableOfContentsRoot;
+    Trigger: typeof TableOfContentsTrigger;
+    Rail: typeof TableOfContentsRail;
+    Indicator: typeof TableOfContentsIndicator;
+    Content: typeof TableOfContentsContent;
+    List: typeof TableOfContentsList;
+    Link: typeof TableOfContentsLink;
+};
+//# sourceMappingURL=TableOfContents.d.ts.map

package/dist/components/table-of-contents/TableOfContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../../src/components/table-of-contents/TableOfContents.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAiB,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMtE,OAAO,KAAK,EACV,wBAAwB,EACxB,2BAA2B,EAC3B,wBAAwB,EACxB,6BAA6B,EAC7B,2BAA2B,EAC3B,wBAAwB,EACxB,wBAAwB,EACzB,MAAM,YAAY,CAAC;AAMpB,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACjE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CASrB;AACD,wBAAgB,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,QAAQ,EACvE,KAAK,EAAE,2BAA2B,CAAC,GAAG,CAAC,GACtC,YAAY,CAUd;yBAZe,sBAAsB;;;AAatC,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,MAAM,EAClE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CASrB;AACD,wBAAgB,wBAAwB,CAAC,GAAG,SAAS,WAAW,GAAG,MAAM,EACvE,KAAK,EAAE,6BAA6B,CAAC,GAAG,CAAC,GACxC,YAAY,GAAG,IAAI,CAuBrB;AACD,wBAAgB,sBAAsB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACpE,KAAK,EAAE,2BAA2B,CAAC,GAAG,CAAC,GACtC,YAAY,GAAG,IAAI,CAsBrB;AACD,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACjE,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CASrB;AACD,wBAAgB,mBAAmB,CAAC,GAAG,SAAS,WAAW,GAAG,GAAG,EAC/D,KAAK,EAAE,wBAAwB,CAAC,GAAG,CAAC,GACnC,YAAY,GAAG,IAAI,CAuBrB;AAED,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAC"}

package/dist/components/table-of-contents/TableOfContents.js

@@ -0,0 +1,142 @@
+import { createElement } from "react";
+import { useRenderElement } from "../../core/render.js";
+import {
+  createAnchorPositionerProps,
+  createAnchorTriggerProps
+} from "../../core/anchor-position/props.js";
+function anchorFor(target) {
+  return `--uiify-toc-${Array.from(target, (c) => c.codePointAt(0)?.toString(16)).join("-")}`;
+}
+function TableOfContentsRoot(props) {
+  const { as, render, ...rest } = props;
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "nav",
+    props: { ...rest, "data-uiify-table-of-contents": "" },
+    state: {}
+  });
+}
+function TableOfContentsTrigger(props) {
+  const { as, target, ...rest } = props;
+  return createElement(as ?? "button", {
+    ...rest,
+    ...createAnchorTriggerProps(anchorFor(target)),
+    "data-part": "trigger",
+    type: "button",
+    popoverTarget: target,
+    popoverTargetAction: "toggle"
+  });
+}
+function TableOfContentsRail(props) {
+  const { as, render, ...rest } = props;
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "span",
+    props: { ...rest, "aria-hidden": true, "data-part": "rail" },
+    state: {}
+  });
+}
+function TableOfContentsIndicator(props) {
+  const {
+    as,
+    render,
+    value: _value,
+    level = 2,
+    selected = false,
+    style,
+    ...rest
+  } = props;
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "span",
+    props: {
+      ...rest,
+      style: { ...style, "--uiify-toc-level": level },
+      "aria-hidden": true,
+      "data-part": "indicator",
+      "data-selected": selected ? "" : void 0
+    },
+    state: { selected }
+  });
+}
+function TableOfContentsContent(props) {
+  const {
+    as,
+    render,
+    side = "left",
+    align = "start",
+    id,
+    ...rest
+  } = props;
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "div",
+    props: {
+      ...rest,
+      ...createAnchorPositionerProps({ anchorName: anchorFor(id), side, align }),
+      id,
+      popover: "auto",
+      "data-part": "content"
+    },
+    state: {}
+  });
+}
+function TableOfContentsList(props) {
+  const { as, render, ...rest } = props;
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "div",
+    props: { ...rest, "data-part": "list" },
+    state: {}
+  });
+}
+function TableOfContentsLink(props) {
+  const {
+    as,
+    render,
+    level = 2,
+    selected,
+    style,
+    ...rest
+  } = props;
+  const current = selected ?? rest["aria-current"] === "location";
+  return useRenderElement({
+    as,
+    render,
+    defaultTag: "a",
+    props: {
+      ...rest,
+      style: { ...style, "--uiify-toc-level": level },
+      "data-part": "link",
+      "data-selected": current ? "" : void 0,
+      ...selected === void 0 ? {} : { "aria-current": selected ? "location" : void 0 }
+    },
+    state: { selected: current }
+  });
+}
+const TableOfContents = {
+  Root: TableOfContentsRoot,
+  Trigger: TableOfContentsTrigger,
+  Rail: TableOfContentsRail,
+  Indicator: TableOfContentsIndicator,
+  Content: TableOfContentsContent,
+  List: TableOfContentsList,
+  Link: TableOfContentsLink
+};
+TableOfContentsTrigger.displayName = "TableOfContentsTrigger";
+export {
+  TableOfContents,
+  TableOfContentsContent,
+  TableOfContentsIndicator,
+  TableOfContentsLink,
+  TableOfContentsList,
+  TableOfContentsRail,
+  TableOfContentsRoot,
+  TableOfContentsTrigger
+};
+//# sourceMappingURL=TableOfContents.js.map

package/dist/components/table-of-contents/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table-of-contents/TableOfContents.tsx"],"sourcesContent":["// Informed by studying Mantine TableOfContents, Fumadocs TOC and Tocbot.\n// Independently written; see NOTICE and the clean-room research notes.\nimport { createElement } from \"react\";\nimport type { CSSProperties, ElementType, ReactElement } from \"react\";\nimport { useRenderElement } from \"../../core/render.js\";\nimport {\n  createAnchorPositionerProps,\n  createAnchorTriggerProps,\n} from \"../../core/anchor-position/props.js\";\nimport type {\n  TableOfContentsRootProps,\n  TableOfContentsTriggerProps,\n  TableOfContentsRailProps,\n  TableOfContentsIndicatorProps,\n  TableOfContentsContentProps,\n  TableOfContentsListProps,\n  TableOfContentsLinkProps,\n} from \"./types.js\";\n\nfunction anchorFor(target: string): string {\n  return `--uiify-toc-${Array.from(target, (c) => c.codePointAt(0)?.toString(16)).join(\"-\")}`;\n}\n\nexport function TableOfContentsRoot<TAs extends ElementType = \"nav\">(\n  props: TableOfContentsRootProps<TAs>,\n): ReactElement | null {\n  const { as, render, ...rest } = props as TableOfContentsRootProps<\"nav\">;\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"nav\",\n    props: { ...rest, \"data-uiify-table-of-contents\": \"\" },\n    state: {},\n  });\n}\nexport function TableOfContentsTrigger<TAs extends ElementType = \"button\">(\n  props: TableOfContentsTriggerProps<TAs>,\n): ReactElement {\n  const { as, target, ...rest } = props as TableOfContentsTriggerProps<\"button\">;\n  return createElement(as ?? \"button\", {\n    ...rest,\n    ...createAnchorTriggerProps(anchorFor(target)),\n    \"data-part\": \"trigger\",\n    type: \"button\",\n    popoverTarget: target,\n    popoverTargetAction: \"toggle\",\n  });\n}\nexport function TableOfContentsRail<TAs extends ElementType = \"span\">(\n  props: TableOfContentsRailProps<TAs>,\n): ReactElement | null {\n  const { as, render, ...rest } = props as TableOfContentsRailProps<\"span\">;\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"span\",\n    props: { ...rest, \"aria-hidden\": true, \"data-part\": \"rail\" },\n    state: {},\n  });\n}\nexport function TableOfContentsIndicator<TAs extends ElementType = \"span\">(\n  props: TableOfContentsIndicatorProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    value: _value,\n    level = 2,\n    selected = false,\n    style,\n    ...rest\n  } = props as TableOfContentsIndicatorProps<\"span\">;\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"span\",\n    props: {\n      ...rest,\n      style: { ...style, \"--uiify-toc-level\": level } as CSSProperties,\n      \"aria-hidden\": true,\n      \"data-part\": \"indicator\",\n      \"data-selected\": selected ? \"\" : undefined,\n    },\n    state: { selected },\n  });\n}\nexport function TableOfContentsContent<TAs extends ElementType = \"div\">(\n  props: TableOfContentsContentProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    side = \"left\",\n    align = \"start\",\n    id,\n    ...rest\n  } = props as TableOfContentsContentProps<\"div\">;\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"div\",\n    props: {\n      ...rest,\n      ...createAnchorPositionerProps({ anchorName: anchorFor(id), side, align }),\n      id,\n      popover: \"auto\",\n      \"data-part\": \"content\",\n    },\n    state: {},\n  });\n}\nexport function TableOfContentsList<TAs extends ElementType = \"div\">(\n  props: TableOfContentsListProps<TAs>,\n): ReactElement | null {\n  const { as, render, ...rest } = props as TableOfContentsListProps<\"div\">;\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"div\",\n    props: { ...rest, \"data-part\": \"list\" },\n    state: {},\n  });\n}\nexport function TableOfContentsLink<TAs extends ElementType = \"a\">(\n  props: TableOfContentsLinkProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    render,\n    level = 2,\n    selected,\n    style,\n    ...rest\n  } = props as TableOfContentsLinkProps<\"a\">;\n  const current = selected ?? rest[\"aria-current\"] === \"location\";\n  return useRenderElement({\n    as,\n    render,\n    defaultTag: \"a\",\n    props: {\n      ...rest,\n      style: { ...style, \"--uiify-toc-level\": level } as CSSProperties,\n      \"data-part\": \"link\",\n      \"data-selected\": current ? \"\" : undefined,\n      ...(selected === undefined ? {} : { \"aria-current\": selected ? \"location\" : undefined }),\n    },\n    state: { selected: current },\n  });\n}\n\nexport const TableOfContents = {\n  Root: TableOfContentsRoot,\n  Trigger: TableOfContentsTrigger,\n  Rail: TableOfContentsRail,\n  Indicator: TableOfContentsIndicator,\n  Content: TableOfContentsContent,\n  List: TableOfContentsList,\n  Link: TableOfContentsLink,\n};\n\nTableOfContentsTrigger.displayName = \"TableOfContentsTrigger\";\n"],"mappings":"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","names":[]}

package/dist/components/table-of-contents/client/TableOfContentsClient.d.ts

@@ -0,0 +1,18 @@
+import type { ElementType, ReactElement } from "react";
+import { TableOfContentsRail as NativeRail, TableOfContentsList as NativeList } from "../TableOfContents.js";
+import { TableOfContentsClientTrigger, TableOfContentsClientContent, TableOfContentsClientLink, TableOfContentsClientIndicator } from "./TableOfContentsClientParts.js";
+import type { TableOfContentsClientRootProps } from "../types.js";
+export declare function TableOfContentsClientRoot<TAs extends ElementType = "nav">(props: TableOfContentsClientRootProps<TAs>): ReactElement;
+export declare namespace TableOfContentsClientRoot {
+    var displayName: string;
+}
+export declare const TableOfContents: {
+    Root: typeof TableOfContentsClientRoot;
+    Trigger: typeof TableOfContentsClientTrigger;
+    Rail: typeof NativeRail;
+    Content: typeof TableOfContentsClientContent;
+    List: typeof NativeList;
+    Link: typeof TableOfContentsClientLink;
+    Indicator: typeof TableOfContentsClientIndicator;
+};
+//# sourceMappingURL=TableOfContentsClient.d.ts.map

package/dist/components/table-of-contents/client/TableOfContentsClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContentsClient.d.ts","sourceRoot":"","sources":["../../../../src/components/table-of-contents/client/TableOfContentsClient.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAiC,MAAM,OAAO,CAAC;AAMtF,OAAO,EACL,mBAAmB,IAAI,UAAU,EACjC,mBAAmB,IAAI,UAAU,EAClC,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EACL,4BAA4B,EAC5B,4BAA4B,EAC5B,yBAAyB,EACzB,8BAA8B,EAC/B,MAAM,iCAAiC,CAAC;AAIzC,OAAO,KAAK,EAAE,8BAA8B,EAA+B,MAAM,aAAa,CAAC;AAE/F,wBAAgB,yBAAyB,CAAC,GAAG,SAAS,WAAW,GAAG,KAAK,EACvE,KAAK,EAAE,8BAA8B,CAAC,GAAG,CAAC,GACzC,YAAY,CA4Gd;yBA9Ge,yBAAyB;;;AA+GzC,eAAO,MAAM,eAAe;;;;;;;;CAQ3B,CAAC"}

package/dist/components/table-of-contents/client/TableOfContentsClient.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useControllableState } from "../../../hooks/use-controllable-state.js";
+import { useEventCallback } from "../../../hooks/use-event-callback.js";
+import { useMergedRefs } from "../../../hooks/use-merged-refs.js";
+import { useIsomorphicLayoutEffect } from "../../../hooks/use-isomorphic-layout-effect.js";
+import { useRenderElement } from "../../../core/render.js";
+import {
+  TableOfContentsRail as NativeRail,
+  TableOfContentsList as NativeList
+} from "../TableOfContents.js";
+import { observeTableOfContents } from "../scrollspy.js";
+import {
+  TableOfContentsClientTrigger,
+  TableOfContentsClientContent,
+  TableOfContentsClientLink,
+  TableOfContentsClientIndicator
+} from "./TableOfContentsClientParts.js";
+import { TableOfContentsContext } from "./table-of-contents-context.js";
+import { attachTableOfContentsInteractions } from "./table-of-contents-interactions.js";
+import { attachTableOfContentsPointer } from "./table-of-contents-pointer.js";
+function TableOfContentsClientRoot(props) {
+  const {
+    as,
+    render,
+    ref,
+    children,
+    onClick,
+    scrollSpy = true,
+    scrollTarget,
+    contentTarget,
+    offset = 0,
+    value: controlledValue,
+    defaultValue = null,
+    onValueChange,
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    openOnHover = true,
+    openDelay = 100,
+    closeDelay = 200,
+    ...rest
+  } = props;
+  const rootRef = useRef(null), mergedRef = useMergedRefs(rootRef, ref);
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [documentUrl, setDocumentUrl] = useState();
+  const ready = documentUrl !== void 0;
+  const interactions = useRef(null);
+  const getOpen = useEventCallback(() => open);
+  const controlled = controlledOpen !== void 0;
+  useIsomorphicLayoutEffect(() => {
+    const root = rootRef.current, panel = root?.querySelector('[data-part="content"]');
+    if (!root) return;
+    setDocumentUrl(root.ownerDocument.URL);
+    if (!panel) return;
+    const actual = panel.matches(":popover-open");
+    if (!ready && controlledOpen === void 0 && actual && !open) {
+      setOpen(true);
+      return;
+    }
+    if (actual !== open) {
+      if (open) panel.showPopover();
+      else panel.hidePopover();
+    }
+  }, [open, children, controlledOpen, setOpen, ready]);
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const controller = attachTableOfContentsInteractions({
+      root,
+      getOpen,
+      requestOpen: setOpen,
+      controlled,
+      openOnHover,
+      openDelay,
+      closeDelay
+    });
+    interactions.current = controller;
+    const clearPointer = attachTableOfContentsPointer({ root });
+    return () => {
+      controller.destroy();
+      interactions.current = null;
+      clearPointer();
+    };
+  }, [controlled, openOnHover, openDelay, closeDelay, getOpen, setOpen, as]);
+  useEffect(() => {
+    if (!scrollSpy || !rootRef.current) return;
+    const controller = observeTableOfContents({
+      root: rootRef.current,
+      scrollTarget,
+      contentTarget,
+      offset: Math.max(0, offset),
+      onValueChange: setValue
+    });
+    return () => controller.destroy();
+  }, [scrollSpy, scrollTarget, contentTarget, offset, setValue]);
+  const element = useRenderElement({
+    as,
+    render,
+    defaultTag: "nav",
+    props: {
+      ...rest,
+      children,
+      ref: mergedRef,
+      "data-uiify-table-of-contents": "",
+      "data-state": ready && open ? "open" : "closed",
+      onClick(event) {
+        onClick?.(event);
+        interactions.current?.click(event.nativeEvent);
+      }
+    },
+    state: { value, open: ready && open }
+  });
+  return /* @__PURE__ */ jsx(TableOfContentsContext, { value: { value, open: ready && open, documentUrl }, children: element });
+}
+const TableOfContents = {
+  Root: TableOfContentsClientRoot,
+  Trigger: TableOfContentsClientTrigger,
+  Rail: NativeRail,
+  Content: TableOfContentsClientContent,
+  List: NativeList,
+  Link: TableOfContentsClientLink,
+  Indicator: TableOfContentsClientIndicator
+};
+TableOfContentsClientRoot.displayName = "TableOfContentsClientRoot";
+export {
+  TableOfContents,
+  TableOfContentsClientRoot
+};
+//# sourceMappingURL=TableOfContentsClient.js.map