@pienter/ui 0.3.0 → 0.7.1

package/components/form/block-editor/block-editor.css

@@ -0,0 +1,149 @@
+@layer components {
+    .pui-block-editor {
+        display: grid;
+        gap: var(--space-s);
+        min-inline-size: 0;
+    }
+
+    .pui-block-editor__hint,
+    .pui-block-editor__summary {
+        margin: 0;
+        color: var(--text-clr-muted);
+        font-size: var(--step--1);
+    }
+
+    .pui-block-editor__list {
+        display: grid;
+        gap: var(--space-s);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .pui-block-editor__item {
+        position: relative;
+        min-inline-size: 0;
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        background: var(--bg-clr-surface);
+
+        &[data-dragging='true'] {
+            opacity: var(--opacity-disabled);
+        }
+
+        &[data-drop]::before {
+            content: '';
+            position: absolute;
+            inset-inline: 0;
+            block-size: var(--stroke-lg);
+            border-radius: var(--radius-pill);
+            background: var(--outline-clr-base);
+            pointer-events: none;
+        }
+
+        &[data-drop='before']::before {
+            inset-block-start: calc(var(--space-2xs) * -1);
+        }
+
+        &[data-drop='after']::before {
+            inset-block-end: calc(var(--space-2xs) * -1);
+        }
+    }
+
+    .pui-block-editor__header {
+        display: flex;
+        align-items: start;
+        gap: var(--space-2xs);
+        padding: var(--space-xs);
+    }
+
+    .pui-block-editor__heading {
+        flex: 1;
+        min-inline-size: 0;
+    }
+
+    .pui-block-editor__drag,
+    .pui-block-editor__toggle {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        min-block-size: var(--control-height-sm);
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-clr-base);
+        font: inherit;
+        text-align: start;
+        cursor: pointer;
+
+        &:focus-visible {
+            outline: var(--outline-width) solid var(--outline-clr-base);
+            outline-offset: var(--outline-offset);
+            border-radius: var(--radius-xs);
+        }
+
+        &:disabled {
+            opacity: var(--opacity-disabled);
+            cursor: not-allowed;
+        }
+    }
+
+    .pui-block-editor__drag {
+        justify-content: center;
+        flex: 0 0 var(--control-height-sm);
+        touch-action: none;
+        cursor: grab;
+
+        &:active:not(:disabled) {
+            cursor: grabbing;
+        }
+    }
+
+    .pui-block-editor__toggle {
+        flex-wrap: wrap;
+        inline-size: 100%;
+    }
+
+    .pui-block-editor__title {
+        font-size: var(--step--1);
+        font-weight: var(--fw-control);
+        overflow-wrap: anywhere;
+    }
+
+    .pui-block-editor__type {
+        color: var(--text-clr-muted);
+        font-size: var(--step--2);
+    }
+
+    .pui-block-editor__actions,
+    .pui-block-editor__add {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--space-3xs);
+    }
+
+    .pui-block-editor__body {
+        display: grid;
+        gap: var(--space-s);
+        padding: var(--space-s);
+        border-block-start: var(--stroke-sm) solid var(--border-clr-subtle);
+
+        &[hidden] {
+            display: none;
+        }
+    }
+
+    .pui-block-editor__empty {
+        padding: var(--space-m);
+        border: var(--stroke-sm) dashed var(--border-clr-subtle);
+        border-radius: var(--radius-md);
+        color: var(--text-clr-muted);
+        font-size: var(--step--1);
+        text-align: center;
+    }
+
+    .pui-block-editor__add {
+        gap: var(--space-2xs);
+    }
+}

package/components/form/block-editor/types.ts

@@ -0,0 +1,15 @@
+export interface ContentBlock {
+    id: string;
+    type: string;
+}
+
+export interface BlockType<T extends ContentBlock = ContentBlock> {
+    type: string;
+    label: string;
+    /** Return a new block with a unique, stable id. */
+    create: () => T;
+}
+
+export type BlockPatch<T extends ContentBlock> = Partial<
+    Omit<T, 'id' | 'type'>
+>;

package/components/form/combobox/Combobox.vue

@@ -85,12 +85,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch, onMounted, onBeforeUnmount } from 'vue';
-import {
-    mountPopover,
-    type PopoverControl,
-    type Placement,
-} from '../../../utils/controllers/popover.js';
+import { computed, ref, watch } from 'vue';
+import { usePopover, type Placement } from '../../../composables/usePopover.js';
 import { generateId } from '../../../utils/a11y/id.js';
 
 defineOptions({ inheritAttrs: false });
@@ -218,7 +214,25 @@ const activeIndex = ref<number | null>(null);
 // label of the currently-selected option.
 const isTyping = ref(false);
 
-let control: PopoverControl | null = null;
+// Anchor the listbox to the input itself so positioning tracks the
+// input's box (the input is the visual reference, not the wrapper).
+// `modal: false` → `popover="auto"` so the browser handles
+// outside-click / focus-out / Escape light-dismiss. The listbox
+// closes naturally when the user tabs or clicks away.
+const control = usePopover(listboxRef, {
+    anchor: inputRef,
+    placement: () => props.placement,
+    offset: () => props.offset,
+    onOpen: () => {
+        isOpen.value = true;
+        emit('open-change', true);
+    },
+    onClose: () => {
+        isOpen.value = false;
+        activeIndex.value = null;
+        emit('open-change', false);
+    },
+});
 
 const hasErrors = computed(() => props.errors.length > 0);
 
@@ -264,6 +278,18 @@ const filteredOptions = computed(() => {
     return props.options.filter((opt) => fn(opt, q));
 });
 
+const firstEnabledIndex = computed(() => {
+    const index = filteredOptions.value.findIndex((option) => !option.disabled);
+    return index >= 0 ? index : null;
+});
+
+const lastEnabledIndex = computed(() => {
+    for (let index = filteredOptions.value.length - 1; index >= 0; index -= 1) {
+        if (!filteredOptions.value[index]?.disabled) return index;
+    }
+    return null;
+});
+
 const activeOptionDomId = computed(() => {
     if (activeIndex.value == null) return null;
     return `${listboxId}-opt-${activeIndex.value}`;
@@ -271,12 +297,10 @@ const activeOptionDomId = computed(() => {
 
 function open(): void {
     if (props.disabled) return;
-    if (!control) return;
     control.show();
 }
 
 function close(): void {
-    if (!control) return;
     control.hide();
 }
 
@@ -331,8 +355,7 @@ function onInput(event: Event): void {
     isTyping.value = true;
     // First filtered match becomes the active option so Enter has
     // an obvious target. Skip disabled options.
-    const firstEnabled = filteredOptions.value.findIndex((o) => !o.disabled);
-    activeIndex.value = firstEnabled >= 0 ? firstEnabled : null;
+    activeIndex.value = firstEnabledIndex.value;
     if (!isOpen.value) open();
 }
 
@@ -374,12 +397,7 @@ function onKeydown(event: KeyboardEvent): void {
             event.preventDefault();
             if (!isOpen.value) {
                 open();
-                // Defer active-index move until after the popover opens so
-                // the listbox content is visible to scroll into view.
-                const firstEnabled = filteredOptions.value.findIndex(
-                    (o) => !o.disabled,
-                );
-                activeIndex.value = firstEnabled >= 0 ? firstEnabled : null;
+                activeIndex.value = firstEnabledIndex.value;
             } else {
                 moveActive(1);
             }
@@ -388,41 +406,22 @@ function onKeydown(event: KeyboardEvent): void {
             event.preventDefault();
             if (!isOpen.value) {
                 open();
-                const lastEnabled = [...filteredOptions.value]
-                    .map((o, i) => ({ o, i }))
-                    .reverse()
-                    .find(({ o }) => !o.disabled);
-                activeIndex.value = lastEnabled ? lastEnabled.i : null;
+                activeIndex.value = lastEnabledIndex.value;
             } else {
                 moveActive(-1);
             }
             break;
         case 'Home':
-            if (!isOpen.value) return;
-            event.preventDefault();
-            {
-                const firstEnabled = filteredOptions.value.findIndex(
-                    (o) => !o.disabled,
-                );
-                if (firstEnabled >= 0) {
-                    activeIndex.value = firstEnabled;
-                    scrollActiveIntoView();
-                }
-            }
-            break;
         case 'End':
             if (!isOpen.value) return;
             event.preventDefault();
             {
-                let lastEnabled = -1;
-                for (let i = filteredOptions.value.length - 1; i >= 0; i -= 1) {
-                    if (!filteredOptions.value[i]?.disabled) {
-                        lastEnabled = i;
-                        break;
-                    }
-                }
-                if (lastEnabled >= 0) {
-                    activeIndex.value = lastEnabled;
+                const index =
+                    event.key === 'Home'
+                        ? firstEnabledIndex.value
+                        : lastEnabledIndex.value;
+                if (index !== null) {
+                    activeIndex.value = index;
                     scrollActiveIntoView();
                 }
             }
@@ -463,30 +462,6 @@ function onKeydown(event: KeyboardEvent): void {
     }
 }
 
-onMounted(() => {
-    if (!listboxRef.value || !inputRef.value) return;
-    control = mountPopover(listboxRef.value, {
-        // Anchor the listbox to the input itself so positioning
-        // tracks the input's box (the input is the visual reference,
-        // not the wrapper).
-        anchor: inputRef.value,
-        placement: props.placement,
-        offset: props.offset,
-        // `modal: false` → `popover="auto"` so the browser handles
-        // outside-click / focus-out / Escape light-dismiss. The
-        // listbox closes naturally when the user tabs or clicks away.
-        onOpen: () => {
-            isOpen.value = true;
-            emit('open-change', true);
-        },
-        onClose: () => {
-            isOpen.value = false;
-            activeIndex.value = null;
-            emit('open-change', false);
-        },
-    });
-});
-
 // Watch model changes from the consumer and reset typing state so
 // the input mirrors the new selection's label cleanly.
 watch(
@@ -496,11 +471,6 @@ watch(
         query.value = '';
     },
 );
-
-onBeforeUnmount(() => {
-    control?.teardown();
-    control = null;
-});
 </script>
 
 <style>

package/components/form/combobox/combobox.css

@@ -8,7 +8,7 @@
    * disabled state match TextInput / Textarea exactly.
    *
    * The listbox is a separate element (a `<ul popover="auto">`) the
-   * controller positions via `mountPopover`. CSS resets the
+   * composable positions via `usePopover`. CSS resets the
    * user-agent popover defaults (`margin: 0; border: 0; inset: auto`)
    * and supplies the surface look — the Popover API places the
    * element in the top layer; inline `left`/`top` from the controller

package/components/form/form/Form.vue

@@ -131,8 +131,7 @@ function handleSubmit(): void {
 
     // Validation passed. Clear any lingering client-side errors from a
     // prior failed submit so child form-primitives don't keep displaying
-    // them while the consumer's async submit runs (mirrors the Astro
-    // controller's `clearAllErrors(el)` between client-pass and onSubmit).
+    // them while the consumer's async submit runs.
     clientFieldErrors.value = {};
 
     // Surface FormData to the consumer's submit handler; consumer manages

package/components/form/label/label.css

@@ -5,7 +5,7 @@
  * use cases where the form-primitive components' built-in label is not
  * suitable (e.g., labels associated with custom groups or with multiple
  * controls). Importing this file re-imports the scaffold so a
- * standalone Label dragged into an Astro page that does not also use
+ * standalone Label on a page that does not also use
  * TextInput / Textarea / Select still gets the typography rules.
  */
 @import '../text-input/text-input.css';

package/components/form/number-field/NumberField.vue

@@ -143,10 +143,9 @@ function handleStep(direction: 'decrement' | 'increment'): void {
         input.stepDown();
     }
     // Dispatch native input/change events so consumer-attached DOM
-    // listeners observe the same behavior as the Astro controller path.
+    // listeners observe stepper clicks the same as typed edits.
     input.dispatchEvent(new Event('input', { bubbles: true }));
     input.dispatchEvent(new Event('change', { bubbles: true }));
-    emit('update:modelValue', input.valueAsNumber);
 }
 </script>
 

package/components/form/number-field/number-field.css

@@ -90,7 +90,7 @@
         /* Lift the focused button above its neighbours so the outline
      * isn't clipped by the adjacent button's edge. */
         position: relative;
-        z-index: 1;
+        z-index: var(--layer-1);
     }
 
     .pui-number-field__step:disabled {

package/components/form/radio-group/RadioGroup.vue

@@ -8,11 +8,8 @@
         :aria-describedby="describedBy"
         :aria-invalid="hasErrors ? 'true' : undefined"
     >
-        <!-- aria-invalid lives on the <fieldset> (group-level signal) AND, when the
-       Astro mountForm controller is wired, on the first radio. The redundancy
-       is intentional — see ./AUDIT.md "ARIA
-       expectations" for the rationale. Do NOT remove either binding without
-       coordinating with the form controller. -->
+        <!-- aria-invalid lives on the <fieldset>: a group-level signal — see
+       ./AUDIT.md "ARIA expectations" for the rationale. -->
         <legend class="pui-field__label">{{ label }}</legend>
         <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
         <div class="pui-radio-group" :data-orientation="orientation">

package/components/form/record-form/RecordFields.vue

@@ -0,0 +1,128 @@
+<script lang="ts">
+export type { RecordFormField } from './types.js';
+</script>
+
+<script setup lang="ts" generic="T extends object">
+import { computed } from 'vue';
+import TextInput from '../text-input/TextInput.vue';
+import PuiTextarea from '../textarea/Textarea.vue';
+import PuiSelect from '../select/Select.vue';
+import Checkbox from '../checkbox/Checkbox.vue';
+import {
+    readPath,
+    updatePath,
+    type ValidationIssue,
+    type ValuePath,
+} from '../../../utils/cms/index.js';
+import type { RecordFormField } from './types.js';
+import { pathFor, messagesFor } from './fields.js';
+
+const props = withDefaults(
+    defineProps<{
+        modelValue: T;
+        fields: readonly RecordFormField[];
+        issues?: readonly ValidationIssue[];
+        busy?: boolean;
+    }>(),
+    { issues: () => [], busy: false },
+);
+const emit = defineEmits<{
+    'update:modelValue': [value: T];
+    'field-change': [path: ValuePath];
+}>();
+const fieldsWithErrors = computed(() =>
+    props.fields.map((field) => ({
+        field,
+        errors: messagesFor(field, props.issues),
+    })),
+);
+
+function valueFor(field: RecordFormField): unknown {
+    return readPath(props.modelValue, pathFor(field));
+}
+function textFor(field: RecordFormField): string {
+    const value = valueFor(field);
+    return typeof value === 'string' ? value : '';
+}
+function update(field: RecordFormField, value: unknown): void {
+    if (props.busy || field.disabled) return;
+    const path = pathFor(field);
+    emit('update:modelValue', updatePath(props.modelValue, path, value));
+    emit('field-change', path);
+}
+</script>
+
+<template>
+    <div class="pui-record-fields">
+        <template
+            v-for="{ field, errors } in fieldsWithErrors"
+            :key="field.name"
+        >
+            <slot name="before-field" :field="field" />
+            <slot
+                :name="`field:${field.name}`"
+                :field="field"
+                :value="valueFor(field)"
+                :update="(value: unknown) => update(field, value)"
+                :errors="errors"
+                :disabled="busy || !!field.disabled"
+            >
+                <PuiTextarea
+                    v-if="field.type === 'textarea'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :rows="field.rows"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <PuiSelect
+                    v-else-if="field.type === 'select'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :options="field.options"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <Checkbox
+                    v-else-if="field.type === 'checkbox'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="valueFor(field) === true"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+                <TextInput
+                    v-else-if="field.type !== 'custom'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :type="field.type ?? 'text'"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :placeholder="field.placeholder"
+                    :autocomplete="field.autocomplete"
+                    :errors="errors"
+                    @update:model-value="update(field, $event)"
+                />
+            </slot>
+        </template>
+    </div>
+</template>
+
+<style>
+@import './record-form.css';
+</style>

package/components/form/record-form/RecordForm.vue

@@ -0,0 +1,116 @@
+<script lang="ts">
+export type { RecordFormField } from './types.js';
+</script>
+
+<script setup lang="ts" generic="T extends object">
+import { computed } from 'vue';
+import Button from '../../action/button/Button.vue';
+import Form from '../form/Form.vue';
+import RecordFields from './RecordFields.vue';
+import {
+    cloneRecord,
+    type ValidationIssue,
+    type ValuePath,
+} from '../../../utils/cms/index.js';
+import { pathFor, containsPath, messagesFor } from './fields.js';
+import type { RecordFormField } from './types.js';
+
+const props = withDefaults(
+    defineProps<{
+        /** Caller-owned write payload; every supplied property is retained. */
+        modelValue: T;
+        fields: readonly RecordFormField[];
+        issues?: readonly ValidationIssue[];
+        errors?: string[];
+        busy?: boolean;
+        submitLabel?: string;
+        statusMessage?: string;
+    }>(),
+    {
+        issues: () => [],
+        errors: () => [],
+        busy: false,
+        submitLabel: 'Save changes',
+        statusMessage: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    'update:modelValue': [value: T];
+    'field-change': [path: ValuePath];
+    submit: [value: T];
+}>();
+
+const fieldErrors = computed(() =>
+    Object.fromEntries(
+        props.fields.map((field) => [
+            JSON.stringify(pathFor(field)),
+            messagesFor(field, props.issues),
+        ]),
+    ),
+);
+
+const summary = computed(() => [
+    ...props.errors,
+    ...props.issues.flatMap((issue) => {
+        const field = props.fields.find((field) =>
+            containsPath(pathFor(field), issue.path),
+        );
+        const label = field?.label ?? issue.path.join(' / ');
+        return issue.messages.map((message) =>
+            label ? `${label}: ${message}` : message,
+        );
+    }),
+]);
+
+function submit(): void {
+    if (!props.busy) emit('submit', cloneRecord(props.modelValue));
+}
+</script>
+
+<template>
+    <Form
+        class="pui-record-form"
+        :busy="busy"
+        :errors="summary"
+        :field-errors="fieldErrors"
+        :status-message="statusMessage"
+        @submit="submit"
+    >
+        <slot name="fields">
+            <RecordFields
+                class="pui-record-form__fields"
+                :model-value="modelValue"
+                :fields="fields"
+                :issues="issues"
+                :busy="busy"
+                @update:model-value="emit('update:modelValue', $event)"
+                @field-change="emit('field-change', $event)"
+            >
+                <template
+                    v-for="name in Object.keys($slots).filter(
+                        (name) =>
+                            name === 'before-field' ||
+                            name.startsWith('field:'),
+                    )"
+                    :key="name"
+                    #[name]="scope"
+                >
+                    <slot :name="name" v-bind="scope" />
+                </template>
+            </RecordFields>
+        </slot>
+        <slot />
+        <template #actions>
+            <slot name="actions" :busy="busy">
+                <Button type="submit" variant="primary" :loading="busy">
+                    {{ submitLabel }}
+                </Button>
+            </slot>
+        </template>
+    </Form>
+</template>
+
+<style>
+@import './record-form.css';
+</style>

package/components/form/record-form/fields.ts

@@ -0,0 +1,20 @@
+import type { ValidationIssue, ValuePath } from '../../../utils/cms/index.js';
+import type { RecordFormField } from './types.js';
+
+export function pathFor(field: RecordFormField): ValuePath {
+    return field.path ?? [field.name];
+}
+export function containsPath(parent: ValuePath, child: ValuePath): boolean {
+    return (
+        parent.length <= child.length &&
+        parent.every((part, index) => part === child[index])
+    );
+}
+export function messagesFor(
+    field: RecordFormField,
+    issues: readonly ValidationIssue[],
+): string[] {
+    return issues
+        .filter((issue) => containsPath(pathFor(field), issue.path))
+        .flatMap((issue) => issue.messages);
+}