Migrate Regor documentation to PureStack

.gitignore

@@ -10,9 +10,10 @@ dist/
 .yarn/install-state.gz
 .yarn/sdks/
 
-.astro
 .yarn
 docs-dist
+docs-publish
+.tmp/
 
 # Perf profiling artifacts
 *.cpuprofile

README.md

@@ -33,7 +33,7 @@ Its template syntax is familiar to Vue users (`r-if`, `r-model`, `r-for`, `r-bin
 
 Discover the capabilities of Regor by diving into our comprehensive documentation. Whether you're new to Regor or an experienced user, our documentation provides in-depth insights into its features, API, directives, and more.
 
-Start exploring the [Regor Documentation](https://tenray.io//regor) now to harness the full potential of this powerful UI framework. The documentation sources are located in [docs-site](docs-site/).
+Start exploring the [Regor Documentation](https://regor.purestack.studio/) now to harness the full potential of this powerful UI framework. The documentation sources are located in [docs-site](docs-site/), built with PureStack.
 
 ## Requirements
 

docs-site/.gitignore

@@ -1,7 +1,7 @@
 node_modules
 docs-dist/
+docs-publish/
 *.tgz
-.astro
 .yarn
 
 # Yarn (Berry) artifacts

docs-site/README.md

@@ -1,25 +1,149 @@
-# Regor Documentation Site
+# Regor documentation
 
-This directory contains the source for Regor's documentation built with [Astro](https://astro.build/) and the Starlight theme.
+The source for <https://regor.purestack.studio/>, built with **PureStack**.
 
-## Requirements
+Use Node.js 22 or newer and Yarn 4.9.2. From this directory:
 
-- Node.js 18 or newer
-- Yarn (v4)
-
-## Getting Started
+```sh
+yarn install --immutable
+yarn serve
+```
 
-Install dependencies and start a local server:
+Open <http://127.0.0.1:4173/>. PureStack watches `content/` and reloads changes.
 
-```bash
-yarn install
-yarn dev
+```sh
+yarn build     # Clean development build in dist/web-dev/
+yarn release   # Minified deployment artifact in dist/web/
 ```
 
-To create a production build:
+`release` prepares static files; it does not upload them. Serve the contents of
+`dist/web/` at the root of `regor.purestack.studio`, with directory-index
+support (`/guide/` serves `/guide/index.html`). No `/regor` base path is needed.
+DNS and the host's TLS certificate must be configured for that domain separately.
+
+Write pages in `content/` as Markdown or Regor MDX. Filenames define routes;
+`index.md` or `index.mdx` defines a directory's landing page. Keep API filenames and links in
+matching case. Use top-level `order` frontmatter to order navigation. Put static
+files in `content/`; they are copied into the output at the same relative path.
+
+`content/siteConfig.json` configures the logo, light/dark theme, navigation,
+table of contents, Pagefind search, syntax highlighting, sitemap, and robots.txt.
+The sitemap uses `https://regor.purestack.studio` as its public URL.
+
+Navigation uses PureStack's hybrid mode. `content/_nav.json` enables Previous
+and Next page links throughout the docs, following the sidebar's page order
+within the guide, directives, and API sections.
+
+The site config explicitly sets stylesheet paths, output minification, script
+cache busting, authentication policy, navigation, sidebar offsets, search,
+and crawler settings. Consent uses PureStack's native component on the homepage
+and docs, with its settings control in the footer and the privacy policy linked
+directly to PureStack Studio.
+
+The social preview is `content/assets/social-preview.png` (1200 × 630). Its
+editable source is `design/assets/social-preview.svg`, using the library's
+orbit icon and the site's chartreuse/graphite palette.
+
+Regor's npm package is built and published independently from this site.
+
+## Site design
+
+`content/purestack.config.ts` registers the site plugin in `design/plugin.ts`.
+It adds a custom homepage template, reusable Regor components, and a document
+heading while retaining PureStack's documentation layout, search, navigation,
+and table of contents.
+
+`design/skin.ts` defines a vivid chartreuse identity on warm cream and graphite,
+with a restrained orchid companion for PureStack. The palette feeds
+the framework's semantic tones, so buttons, search, navigation, and panels
+share the same colors. `design/styles.ts` registers typed, responsive styles
+in PureStack's generated stylesheets; there is no separate CSS asset.
+
+The live workbench and ecosystem section use PureStack's `theme--dark` regions
+in both modes. Headline highlights and the closing section carry the bright
+signal color; documentation links use a darker green in light mode for contrast.
+
+The logo and generated favicon use `lucide:orbit` from PureStack's
+`ts-svg-icons` library, with the same mark in the ecosystem diagram and footer.
+
+Edit the homepage in `content/index.mdx`, the shared header/footer in their
+MDX files, and the live counter/clipboard behavior in `content/home.ts`.
+PureStack bundles the browser entry through `PageScript`. The source tabs use
+the built-in `Tabs` and `TabPane` components.
+
+## Live SVG example
 
-```bash
-yarn build
+The homepage's Signal Studio demonstrates three simulated event streams with
+animated SVG paths, workload presets, intensity controls, series toggles,
+computed summary metrics, and pointer or keyboard sample inspection.
+
+- `content/examples/chart-model.ts`: refs, derived data, and smooth SVG paths.
+- `content/examples/chart-view.ts`: the shared Regor template, including keyed
+  SVG lists, attribute bindings, and two-way form controls.
+- `content/examples/signal-chart.ts`: browser mounting, resize handling, and
+  animation lifecycle. `home.ts` imports this entry, so the homepage uses one
+  bundle for its counter and chart.
+
+The build renders a static preview with the same model and template. The
+browser mounts the interactive version, respects reduced-motion preferences,
+and stops the frame clock when the chart is offscreen, the tab is hidden, or
+the app is unmounted. The chart uses synthetic data and no chart library.
+
+The expandable source panel uses `<import-codeblock>` for all three files, so
+the displayed examples stay identical to the implementation.
+
+Type-check site extensions from the repository root:
+
+```sh
+yarn tsc -p docs-site/tsconfig.json --noEmit
 ```
 
-The generated site will be written to `docs-dist/`.
+## Interactive guides
+
+The guides use PureStack's `Panel`, `Grid`, `Badge`, `AlertBox`, `ExpandablePanel`,
+and `Tabs` components. Their filenames use `.mdx`; their public URLs are unchanged.
+
+Four pages include live Regor examples with source tabs using `<import-codeblock>`:
+
+- Reactivity: a quote with writable refs, computed totals, and a batched reset.
+- Templates: a filterable service board with keyed rows and conditional empty state.
+- Components: typed reactive props, computed initials, and a parent-context named slot.
+- Lifecycle: a conditional child that starts an interval on mount and clears it on unmount.
+
+Each example in `content/guide/demos/` exports its context factory and shared
+template. `design/guideComponents.ts` renders the static previews; `demos/browser.ts`
+mounts the matching interactive island through `PageScript`. The static controls
+are disabled, and the lifecycle preview creates no timer until the reader mounts
+its child. Scoped visual styles live in `design/guideStyles.ts` and follow both themes.
+
+Getting Started uses the same components, package-manager tabs, and a live counter
+from `content/examples/first-app/`. Overview shows the state-to-DOM flow and reuses
+the guide's computed quote example.
+
+Every directive reference in `content/directives/` has its own live preview and
+imported source. The directive index groups all fifteen topics into cards and
+includes a form preview. `content/directives/demos/examples.ts` shares the preview
+registry between `design/directiveComponents.ts` for static rendering and
+`demos/browser.ts` for browser mounting. Styles in `design/directiveStyles.ts`
+use the existing palette and are scoped to the examples. The HTML example uses
+fixed trusted strings, the form event example submits locally, and the teleport
+example keeps its target within the preview.
+
+## API reference
+
+The API index groups 45 references into eight categories with jump links and
+topic cards. All references use MDX, orientation panels, usage callouts, and
+expandable related links while keeping their existing public URLs.
+
+Sixteen shared labs cover 43 API references, including state conversion,
+derived values, subscriptions, effects, batching, explicit notifications,
+entanglement, raw objects, template conversion, DOM cleanup, context lookup,
+validation, configuration, lifecycle, and components. Their source tabs use
+`<import-codeblock>`. The lifecycle, component, and app labs reuse existing
+examples; the other lab sources live in `content/api/demos/`.
+
+`demos/examples.ts` shares the registry between `design/apiComponents.ts` for
+static previews and `demos/browser.ts` for scoped browser mounting.
+`design/apiStyles.ts` extends the existing documentation styles and palette.
+The `persist` and `warningHandler` pages include source examples for deliberate
+browser setup rather than running storage or shared-handler changes on page load.

docs-site/content/_nav.json

@@ -0,0 +1,3 @@
+{
+  "pageLinks": true
+}

docs-site/content/api/_nav.json

@@ -0,0 +1,3 @@
+{
+  "sequence": ["Regor API"]
+}

docs-site/content/api/addUnbinder.mdx

@@ -0,0 +1,82 @@
+---
+title: addUnbinder
+description: "Associate a cleanup callback with a DOM node’s binding lifetime."
+---
+
+<Panel class="guide-orientation" tone="neutral" variant="flat" bodyClass="p-3"><Flex wrap="true" class="gap-2"><Badge tone="accent" variant="surface">addUnbinder</Badge><Badge tone="neutral" variant="surface">Cleanup and Unbind</Badge></Flex><p>Associate a cleanup callback with a DOM node’s binding lifetime.</p></Panel>
+
+## Overview
+
+The `addUnbinder` function is used to associate an unbinder function with a DOM node in Regor. An unbinder function is used to remove bound data and associated logic from the DOM node when necessary.
+
+## Try it live
+
+<section class="guide-example" aria-label="addUnbinder example">
+  <div class="guide-example-heading"><strong>Own a node through its full lifetime</strong><Badge tone="accent" variant="surface">Live API</Badge></div>
+  <Tabs group="api-cleanup" selectedTab="cleanup-preview" ariaLabel="addUnbinder implementation" tone="neutral" variant="none" tabVariant="underline">
+    <TabPane id="cleanup-preview" label="Live preview"><div id="api-demo" data-example="cleanup"><ApiCleanup/></div><noscript><p class="guide-example-note">Enable JavaScript to try the controls. This preview is rendered at build time.</p></noscript></TabPane>
+    <TabPane id="cleanup-source" label="cleanup.ts"><import-codeblock src="./demos/cleanup.ts"/></TabPane>
+    <TabPane id="cleanup-mount" label="browser.ts"><import-codeblock src="./demos/browser.ts"/></TabPane>
+  </Tabs>
+  <p class="guide-example-note">Mount, write, unbind, or remove and drain. Watch the DOM, observer count, and registered cleanup.</p>
+</section>
+
+## Usage
+
+### Associating an Unbinder Function
+
+To associate an unbinder function with a DOM node, call the `addUnbinder` function with the following parameters:
+
+- `node`: The DOM node to which you want to associate the unbinder function.
+
+- `unbinder`: A function that can be executed later to remove bound data and associated logic from the DOM node.
+
+### Example
+
+```javascript
+import { addUnbinder } from 'regor'
+
+// Create an unbinder function
+const myUnbinder = () => {
+  // Remove bound data and associated logic
+  // ...
+}
+
+// Associate the unbinder function with a DOM node
+const someElement = document.getElementById('example')
+addUnbinder(someElement, myUnbinder)
+```
+
+## Parameters
+
+- `node`: The DOM node to which you want to associate the unbinder function.
+
+- `unbinder`: A function that can be executed later to remove bound data and associated logic from the DOM node.
+
+<AlertBox class="guide-callout" tone="accent" variant="surface" title="Associate cleanup with the node it belongs to"><p>The callback should release resources owned by that node. The preview counts custom cleanup calls.</p></AlertBox>
+
+## Notes
+
+- The `addUnbinder` function is typically used internally within Regor to manage unbinder functions associated with DOM nodes.
+
+- It provides a way to associate an unbinder function with a specific DOM element, allowing for the clean removal of bound data and logic when needed.
+
+- Unbinder functions are typically created and associated with DOM nodes as part of the data binding process in Regor.
+
+- The unbinder function, when executed, should perform any necessary cleanup or removal of data bindings and associated logic from the DOM node.
+
+- This function is primarily intended for use in advanced scenarios where direct access to Regor's internal data management is required.
+
+## See Also
+
+<ExpandablePanel class="guide-callout" title="Related APIs and guides" description="Continue with the references connected to addUnbinder." tone="neutral" variant="flat">
+  <ul>
+    <li><a href="/api/removeNode">removeNode</a></li>
+    <li><a href="/api/unbind">unbind</a></li>
+    <li><a href="/api/getBindData">getBindData</a></li>
+  </ul>
+</ExpandablePanel>
+
+[Back to the API list](/api/)
+
+<PageScript src="./demos/browser.ts"/>