koculu · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026 · Oct 23, 2026
diff --git a/frontend/components/landing/feature-showcase.ts b/frontend/components/landing/feature-showcase.ts
@@ -38,8 +38,7 @@ const featureShowcaseTemplate = html`<Panel
     variant="link"
     icon="tabler:arrow-up-right"
     iconPosition="end"
-    >{{ linkLabel }}</BtnLink
-  >
+    >{{ linkLabel }}</BtnLink>
 </Panel>`
 
 export function defineFeatureShowcaseComponent() {

diff --git a/frontend/components/landing/regor-relationship.ts b/frontend/components/landing/regor-relationship.ts
@@ -7,13 +7,24 @@ export interface RegorRelationship {
 
 const regorRelationshipTemplate = html`<figure class="regor-connection">
   <div class="regor-loop">
-    <svg class="regor-loop-path" viewBox="0 0 360 220" preserveAspectRatio="none" fill="none" aria-hidden="true">
-      <path class="regor-loop-ui" d="M80 62 V60 Q80 35 105 35 H255 Q280 35 280 54"/>
+    <svg
+      class="regor-loop-path"
+      viewBox="0 0 360 220"
+      preserveAspectRatio="none"
+      fill="none"
+      aria-hidden="true"
+    >
+      <path
+        class="regor-loop-ui"
+        d="M80 62 V60 Q80 35 105 35 H255 Q280 35 280 54"/>
       <path class="regor-loop-ui" d="M275 48 L280 55 L285 48"/>
-      <path class="regor-loop-docs" d="M280 160 Q280 185 255 185 H105 Q80 185 80 166"/>
+      <path
+        class="regor-loop-docs"
+        d="M280 160 Q280 185 255 185 H105 Q80 185 80 166"/>
       <path class="regor-loop-docs" d="M75 172 L80 165 L85 172"/>
     </svg>
-    <span class="regor-loop-label regor-loop-label--ui">Reactive UI <Icon name="lucide:arrow-right"/></span>
+    <span class="regor-loop-label regor-loop-label--ui"
+      >Reactive UI <Icon name="lucide:arrow-right"/></span>
     <div class="regor-loop-node regor-loop-node--regor">
       <span class="regor-loop-mark"><Icon name="lucide:orbit"/></span>
       <strong>Regor</strong>
@@ -22,9 +33,12 @@ const regorRelationshipTemplate = html`<figure class="regor-connection">
       <span class="regor-loop-mark"><Icon name="tabler:stack-2"/></span>
       <strong>PureStack</strong>
     </div>
-    <span class="regor-loop-label regor-loop-label--docs"><Icon name="lucide:arrow-left"/>Documentation</span>
+    <span class="regor-loop-label regor-loop-label--docs"
+      ><Icon name="lucide:arrow-left"/>Documentation</span>
   </div>
-  <figcaption>{{ uiCaption }}<br/>{{ docsCaption }}</figcaption>
+  <figcaption>
+    {{ uiCaption }}<br/>{{ docsCaption }}
+  </figcaption>
 </figure>`
 
 export function defineRegorRelationshipComponent() {

diff --git a/frontend/components/landing/source-workbench.ts b/frontend/components/landing/source-workbench.ts
@@ -23,14 +23,11 @@ const sourceWorkbenchTemplate = html`<Panel
     tabVariant="none"
   >
     <TabPane id="content" label="index.mdx" icon="tabler:file-code"
-      ><slot name="content"></slot
-    ></TabPane>
+      ><slot name="content"></slot></TabPane>
     <TabPane id="interactive" label="counter.ts" icon="tabler:braces"
-      ><slot name="interactive"></slot
-    ></TabPane>
+      ><slot name="interactive"></slot></TabPane>
     <TabPane id="style" label="styles.ts" icon="tabler:palette"
-      ><slot name="style"></slot
-    ></TabPane>
+      ><slot name="style"></slot></TabPane>
   </Tabs>
   <Flex class="workbench-status" align="center" justify="between">
     <span><Icon name="tabler:check"/>Same source. Connected workflow.</span>

diff --git a/frontend/components/shared/copy-button.ts b/frontend/components/shared/copy-button.ts
@@ -15,8 +15,7 @@ const copyButtonTemplate = html`<Btn
   tone="neutral"
   variant="subtle"
   icon="tabler:copy"
-  >Copy</Btn
->`
+  >Copy</Btn>`
 
 export function defineCopyButtonComponent() {
   return defineComponent<CopyButton>(copyButtonTemplate, {

diff --git a/frontend/components/shell/palette-picker.ts b/frontend/components/shell/palette-picker.ts
@@ -4,27 +4,34 @@ import { palettePresets } from '../../theme/presets'
 export interface PalettePicker {}
 
 const template = html`<details class="palette-picker">
-  <summary class="palette-picker__trigger" aria-label="Site color" title="Choose site color">
+  <summary
+    class="palette-picker__trigger"
+    aria-label="Site color"
+    title="Choose site color"
+  >
     <Icon name="tabler:palette" aria-hidden="true"/>
   </summary>
   <fieldset class="palette-picker__panel">
     <legend>Site color</legend>
     <p>Choose your site’s color palette.</p>
-    <div class="palette-picker__options">
-      ${palettePresets.map(renderColorOption).join('')}
-    </div>
+    <div class="palette-picker__options">${palettePresets.map(renderColorOption).join('')}</div>
     <span class="palette-picker__note">Saved on this device.</span>
   </fieldset>
-</details><PageScript src="/modules/palette-picker.ts"/>`
+</details>
+<PageScript src="/modules/palette-picker.ts"/>`
 
 export function definePalettePickerComponent() {
   return defineComponent<PalettePicker>(template)
 }
 
 function renderColorOption(preset: (typeof palettePresets)[number]) {
-  return html`<label class="palette-picker__option" data-site-color-option="${preset.id}">
-    <input type="radio" name="site-palette" value="${preset.id}"/>
-    <span class="palette-picker__swatch" aria-hidden="true"><Icon name="tabler:check"/></span>
-    <span>${preset.label}</span>
-  </label>`
+  return html`<label
+  class="palette-picker__option"
+  data-site-color-option="${preset.id}"
+>
+  <input type="radio" name="site-palette" value="${preset.id}"/>
+  <span class="palette-picker__swatch" aria-hidden="true"
+    ><Icon name="tabler:check"/></span>
+  <span>${preset.label}</span>
+</label>`
 }
diff --git a/frontend/designs/social-preview.svg b/frontend/designs/social-preview.svg
diff --git a/frontend/docs/apiProperty.ts b/frontend/docs/apiProperty.ts
@@ -11,8 +11,7 @@ const apiPropertyTemplate = html`<section class="api-property" :id="anchor" :ari
   <header class="api-property__header">
     <h4>
       <a :href="'#' + anchor"
-        ><code>{{ name }}</code><span aria-hidden="true"> #</span></a
-      >
+        ><code>{{ name }}</code><span aria-hidden="true"> #</span></a>
     </h4>
     <code class="api-property__type">{{ valueType }}</code>
     <dl class="api-property__default">

diff --git a/frontend/docs/componentGuide.ts b/frontend/docs/componentGuide.ts
@@ -24,16 +24,20 @@ export function defineComponentGuideComponents() {
   return {
     ComponentHeader: defineComponent<ComponentHeader>(
       html`<header class="component-header">
-      <div class="component-header__top">
-        <div class="component-header__identity"><code>{{ name }}</code><span>{{ kind }}</span></div>
-        <nav class="component-header__links" aria-label="Component resources">
-          <a href="#api-reference">API <span aria-hidden="true">↗</span></a>
-          <a :href="source" target="_blank" rel="noopener">Source <span aria-hidden="true">↗</span></a>
-        </nav>
-      </div>
-      <p class="component-header__summary">{{ summary }}</p>
-      <a class="component-header__back" :href="sectionHref">{{ section }} <span aria-hidden="true">↗</span></a>
-    </header>`,
+  <div class="component-header__top">
+    <div class="component-header__identity">
+      <code>{{ name }}</code><span>{{ kind }}</span>
+    </div>
+    <nav class="component-header__links" aria-label="Component resources">
+      <a href="#api-reference">API <span aria-hidden="true">↗</span></a>
+      <a :href="source" target="_blank" rel="noopener"
+        >Source <span aria-hidden="true">↗</span></a>
+    </nav>
+  </div>
+  <p class="component-header__summary">{{ summary }}</p>
+  <a class="component-header__back" :href="sectionHref"
+    >{{ section }} <span aria-hidden="true">↗</span></a>
+</header>`,
       {
         props: ['name', 'summary', 'source', 'kind', 'section', 'sectionHref'],
         context: (head) => ({
@@ -45,10 +49,12 @@ export function defineComponentGuideComponents() {
     ),
     ComponentExample: defineComponent<ComponentExample>(
       html`<section class="component-example" :aria-label="label">
-      <header class="component-example__heading"><span class="component-example__dot" aria-hidden="true"></span><strong>{{ label }}</strong><span class="component-example__tag">COMPOSITION</span></header>
-      <div class="component-example__stage"><slot></slot></div>
-      <p class="component-example__caption">{{ caption }}</p>
-    </section>`,
+  <header class="component-example__heading">
+    <span class="component-example__dot" aria-hidden="true"></span><strong>{{ label }}</strong><span class="component-example__tag">COMPOSITION</span>
+  </header>
+  <div class="component-example__stage"><slot></slot></div>
+  <p class="component-example__caption">{{ caption }}</p>
+</section>`,
       { props: ['label', 'caption'] },
     ),
   }

diff --git a/frontend/docs/dataGuide.ts b/frontend/docs/dataGuide.ts
@@ -76,11 +76,29 @@ export interface ChartAppearanceControls {
 export function defineChartAppearanceControls() {
   return defineComponent<ChartAppearanceControls>(
     html`<Grid columns="1" columnsMd="3">
-    <FormSelectField :id="prefix + '-tone'" label="Chart tone" :model="tone" :options="tones"/>
-    <FormSelectField :id="prefix + '-variant'" label="Chart variant" :model="variant" :options="variants"/>
-    <FormSelectField :id="prefix + '-mode'" label="Variant mode" :model="variantMode" :options="modes"/>
-    <FormInputField r-if="showWidth" :id="prefix + '-width'" label="SVG width (px; blank is responsive)" type="number" min="240" :model="width"/>
-  </Grid>`,
+  <FormSelectField
+    :id="prefix + '-tone'"
+    label="Chart tone"
+    :model="tone"
+    :options="tones"/>
+  <FormSelectField
+    :id="prefix + '-variant'"
+    label="Chart variant"
+    :model="variant"
+    :options="variants"/>
+  <FormSelectField
+    :id="prefix + '-mode'"
+    label="Variant mode"
+    :model="variantMode"
+    :options="modes"/>
+  <FormInputField
+    r-if="showWidth"
+    :id="prefix + '-width'"
+    label="SVG width (px; blank is responsive)"
+    type="number"
+    min="240"
+    :model="width"/>
+</Grid>`,
     {
       props: ['tone', 'variant', 'variantMode', 'width', 'showWidth', 'prefix'],
       context: (head) => ({
@@ -104,13 +122,43 @@ export interface ChartAppearanceGallery {
 export function defineChartAppearanceGallery() {
   return defineComponent<ChartAppearanceGallery>(
     html`<div class="component-appearance-grid data-chart-gallery">
-    <div class="component-appearance-cell" r-for="sample in samples">
-      <code>{{ sample.label }}</code>
-      <BarChart r-if="component === 'BarChart'" :items="sample.items" :tone="sample.tone" :variant="sample.variant" :variantMode="sample.mode" width="100%" height="160" :animated="false" :ariaLabel="sample.label + ': Monday 24, Tuesday 38, Wednesday -12'"/>
-      <LineChart r-if="component === 'LineChart'" :series="sample.series" :tone="sample.tone" :variant="sample.variant" :variantMode="sample.mode" width="100%" height="160" :showArea="true" :showPoints="true" :animated="false" :ariaLabel="sample.label + ': requests 18, 32, 25, 48'"/>
-      <DoughnutChart r-if="component === 'DoughnutChart'" :segments="sample.segments" :tone="sample.tone" :variant="sample.variant" :variantMode="sample.mode" size="160" centerLabel="Tasks" centerValue="30" :animated="false" :ariaLabel="sample.label + ': complete 18, review 7, planned 5'"/>
-    </div>
-  </div>`,
+  <div class="component-appearance-cell" r-for="sample in samples">
+    <code>{{ sample.label }}</code>
+    <BarChart
+      r-if="component === 'BarChart'"
+      :items="sample.items"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      :variantMode="sample.mode"
+      width="100%"
+      height="160"
+      :animated="false"
+      :ariaLabel="sample.label + ': Monday 24, Tuesday 38, Wednesday -12'"/>
+    <LineChart
+      r-if="component === 'LineChart'"
+      :series="sample.series"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      :variantMode="sample.mode"
+      width="100%"
+      height="160"
+      :showArea="true"
+      :showPoints="true"
+      :animated="false"
+      :ariaLabel="sample.label + ': requests 18, 32, 25, 48'"/>
+    <DoughnutChart
+      r-if="component === 'DoughnutChart'"
+      :segments="sample.segments"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      :variantMode="sample.mode"
+      size="160"
+      centerLabel="Tasks"
+      centerValue="30"
+      :animated="false"
+      :ariaLabel="sample.label + ': complete 18, review 7, planned 5'"/>
+  </div>
+</div>`,
     {
       props: ['component', 'axis'],
       context: (head) => {

diff --git a/frontend/docs/formAppearance.ts b/frontend/docs/formAppearance.ts
@@ -44,26 +44,103 @@ const inputTypes = [
   'week',
 ]
 
-const template = html`<div class="component-appearance-grid forms-appearance-grid" :class="{ 'forms-appearance-grid--composer': component === 'Composer' }">
+const template = html`<div
+  class="component-appearance-grid forms-appearance-grid"
+  :class="{ 'forms-appearance-grid--composer': component === 'Composer' }"
+>
   <div class="component-appearance-cell" r-for="sample in samples">
     <code>{{ sample.label }}</code>
-    <AppForm r-if="component === 'AppForm'" class="p-3" :tone="sample.tone" :variant="sample.variant" @submit.prevent="sample.submit($event)">
-      <FormInputField :id="sample.id" label="Project name" name="project" :model="sample.model" :required="true"/>
+    <AppForm
+      r-if="component === 'AppForm'"
+      class="p-3"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      @submit.prevent="sample.submit($event)"
+    >
+      <FormInputField
+        :id="sample.id"
+        label="Project name"
+        name="project"
+        :model="sample.model"
+        :required="true"/>
       <FormSubmit label="Preview save" :tone="sample.tone"/>
-      <FormStatus :hidden="!sample.receipt">{{ sample.receipt }}</FormStatus>
+      <FormStatus :hidden="!sample.receipt"
+        >{{ sample.receipt }}</FormStatus>
     </AppForm>
-    <FormInputField r-if="component === 'FormInputField'" :id="sample.id" :label="axis === 'type' ? sample.label : 'Project name'" :type="axis === 'type' ? sample.label : 'text'" :model="sample.model" :tone="sample.tone" :variant="sample.variant" placeholder="Your next idea"/>
-    <FormSelectField r-if="component === 'FormSelectField'" :id="sample.id" label="Region" :model="sample.model" :options="options" :tone="sample.tone" :variant="sample.variant"/>
-    <FormCheck r-if="component === 'FormCheck'" :id="sample.id" label="Release updates" :checked="sample.checked" :tone="sample.tone"/>
-    <form r-if="component === 'FormSubmit'" @submit.prevent="sample.submit($event)">
-      <FormSubmit :label="sample.label" :tone="sample.tone" :variant="sample.variant"/>
-      <FormStatus :hidden="!sample.receipt">{{ sample.receipt }}</FormStatus>
+    <FormInputField
+      r-if="component === 'FormInputField'"
+      :id="sample.id"
+      :label="axis === 'type' ? sample.label : 'Project name'"
+      :type="axis === 'type' ? sample.label : 'text'"
+      :model="sample.model"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      placeholder="Your next idea"/>
+    <FormSelectField
+      r-if="component === 'FormSelectField'"
+      :id="sample.id"
+      label="Region"
+      :model="sample.model"
+      :options="options"
+      :tone="sample.tone"
+      :variant="sample.variant"/>
+    <FormCheck
+      r-if="component === 'FormCheck'"
+      :id="sample.id"
+      label="Release updates"
+      :checked="sample.checked"
+      :tone="sample.tone"/>
+    <form
+      r-if="component === 'FormSubmit'"
+      @submit.prevent="sample.submit($event)"
+    >
+      <FormSubmit
+        :label="sample.label"
+        :tone="sample.tone"
+        :variant="sample.variant"/>
+      <FormStatus :hidden="!sample.receipt"
+        >{{ sample.receipt }}</FormStatus>
     </form>
-    <FormStatus r-if="component === 'FormStatus'" :tone="sample.tone" :variant="sample.variant">Your draft is ready for review.</FormStatus>
-    <AutoCompleteInput r-if="component === 'AutoCompleteInput'" :id="sample.id" label="Region" :model="sample.query" :selectedValue="sample.selected" :options="options" :tone="sample.tone" :variant="sample.variant" placeholder="Search a region"/>
-    <MultiAutoCompleteInput r-if="component === 'MultiAutoCompleteInput'" :id="sample.id" label="Release tags" :items="sample.items" :model="sample.query" :options="tags" :tone="sample.tone" :variant="sample.variant" placeholder="Add a tag" :allowCustomValues="true"/>
-    <Composer r-if="component === 'Composer'" :html="sample.content" :label="sample.label + ' editor'" :tone="sample.tone" :variant="sample.variant" minHeight="8rem"/>
-    <DropFiles r-if="component === 'DropFiles'" :files="sample.files" label="Attachments" hint="Choose files, drop, or paste." :tone="sample.tone" :variant="sample.variant"/>
+    <FormStatus
+      r-if="component === 'FormStatus'"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      >Your draft is ready for review.</FormStatus>
+    <AutoCompleteInput
+      r-if="component === 'AutoCompleteInput'"
+      :id="sample.id"
+      label="Region"
+      :model="sample.query"
+      :selectedValue="sample.selected"
+      :options="options"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      placeholder="Search a region"/>
+    <MultiAutoCompleteInput
+      r-if="component === 'MultiAutoCompleteInput'"
+      :id="sample.id"
+      label="Release tags"
+      :items="sample.items"
+      :model="sample.query"
+      :options="tags"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      placeholder="Add a tag"
+      :allowCustomValues="true"/>
+    <Composer
+      r-if="component === 'Composer'"
+      :html="sample.content"
+      :label="sample.label + ' editor'"
+      :tone="sample.tone"
+      :variant="sample.variant"
+      minHeight="8rem"/>
+    <DropFiles
+      r-if="component === 'DropFiles'"
+      :files="sample.files"
+      label="Attachments"
+      hint="Choose files, drop, or paste."
+      :tone="sample.tone"
+      :variant="sample.variant"/>
   </div>
 </div>`