attaform 0.17.2 → 0.18.0

package/dist/runtime/components/AttaformDevtoolsPanel.vue

@@ -0,0 +1,453 @@
+<script setup>
+import { computed, onUnmounted, ref, watch } from "vue";
+import { canonicalizePath } from "attaform";
+import DevtoolsValueTree from "./DevtoolsValueTree.vue";
+const props = defineProps({
+  bridge: { type: Object, required: true }
+});
+const updateTick = ref(0);
+const registry = computed(() => props.bridge.registry);
+const formEntries = computed(() => {
+  void updateTick.value;
+  return Array.from(registry.value.forms.entries());
+});
+const selectedFormKey = ref(null);
+const activeKey = computed(() => {
+  if (selectedFormKey.value !== null && registry.value.forms.has(selectedFormKey.value)) {
+    return selectedFormKey.value;
+  }
+  return formEntries.value[0]?.[0] ?? null;
+});
+const activeForm = computed(() => {
+  const key = activeKey.value;
+  return key !== null ? registry.value.forms.get(key) ?? null : null;
+});
+const formValueView = computed(() => {
+  void updateTick.value;
+  const form = activeForm.value;
+  if (form === null) return null;
+  return form.form.value;
+});
+const schemaErrorRows = computed(() => {
+  void updateTick.value;
+  const form = activeForm.value;
+  if (form === null) return [];
+  return Array.from(form.schemaErrors.entries());
+});
+const userErrorRows = computed(() => {
+  void updateTick.value;
+  const form = activeForm.value;
+  if (form === null) return [];
+  return Array.from(form.userErrors.entries());
+});
+const aggregates = computed(() => {
+  void updateTick.value;
+  const form = activeForm.value;
+  if (form === null) return null;
+  return {
+    submitting: form.submitting.value,
+    submissionAttempts: form.submissionAttempts.value,
+    submitError: form.submitError.value,
+    activeValidations: form.activeValidations.value
+  };
+});
+function selectForm(key) {
+  selectedFormKey.value = key;
+}
+function humanizePathKey(key) {
+  try {
+    const parsed = JSON.parse(key);
+    if (Array.isArray(parsed)) {
+      return parsed.map((seg) => typeof seg === "number" ? String(seg) : String(seg)).join(".");
+    }
+  } catch {
+  }
+  return key;
+}
+function fmt(v) {
+  if (v === null) return "null";
+  if (v === void 0) return "undefined";
+  if (typeof v === "string") return v;
+  if (typeof v === "number" || typeof v === "boolean" || typeof v === "bigint") {
+    return String(v);
+  }
+  try {
+    return JSON.stringify(v);
+  } catch {
+    return String(v);
+  }
+}
+const selectedPath = ref(null);
+const selectedKey = computed(
+  () => selectedPath.value === null ? null : JSON.stringify(selectedPath.value)
+);
+function selectPath(path) {
+  const key = JSON.stringify(path);
+  if (selectedKey.value === key) {
+    selectedPath.value = null;
+  } else {
+    selectedPath.value = path;
+  }
+}
+const selectedFieldState = computed(() => {
+  void updateTick.value;
+  const form = activeForm.value;
+  const path = selectedPath.value;
+  if (form === null || path === null) return null;
+  try {
+    const { key: canonicalKey } = canonicalizePath(path);
+    const record = form.fields.get(canonicalKey) ?? null;
+    let value = form.form.value;
+    for (const seg of path) {
+      if (value === null || typeof value !== "object") {
+        value = void 0;
+        break;
+      }
+      value = value[seg];
+    }
+    const schemaEntries = form.schemaErrors.get(canonicalKey) ?? [];
+    const userEntries = form.userErrors.get(canonicalKey) ?? [];
+    return {
+      record,
+      value,
+      errors: [...schemaEntries, ...userEntries],
+      schemaErrorCount: schemaEntries.length,
+      userErrorCount: userEntries.length
+    };
+  } catch (err) {
+    console.error("[attaform devtools] field-state lookup failed", { path, err });
+    return null;
+  }
+});
+function humanizeSelectedPath() {
+  const path = selectedPath.value;
+  if (path === null || path.length === 0) return "(root)";
+  return path.map((seg) => String(seg)).join(".");
+}
+function selectedValueView() {
+  const fs = selectedFieldState.value;
+  if (fs === null) return null;
+  return fs.value;
+}
+function handleEdit(rawPath, next) {
+  const form = activeForm.value;
+  if (form === null) return;
+  try {
+    const { segments: canonicalPath, key: canonicalKey } = canonicalizePath(
+      rawPath
+    );
+    form.setValueAtPath(canonicalPath, next, {
+      persist: form.persistOptIns.hasAnyOptInForPath(canonicalKey)
+    });
+  } catch (err) {
+    console.error("[attaform devtools] edit failed", { rawPath, next, err });
+  }
+}
+const MAX_TIMELINE_EVENTS = 200;
+const events = ref([]);
+const expandedEventId = ref(null);
+let eventIdCounter = 0;
+function pushEvent(seed) {
+  const entry = { id: ++eventIdCounter, ...seed };
+  const next = [entry, ...events.value];
+  if (next.length > MAX_TIMELINE_EVENTS) next.length = MAX_TIMELINE_EVENTS;
+  events.value = next;
+}
+function clearTimeline() {
+  events.value = [];
+  expandedEventId.value = null;
+}
+function toggleEvent(id) {
+  expandedEventId.value = expandedEventId.value === id ? null : id;
+}
+function formatTime(time) {
+  const d = new Date(time);
+  const hh = String(d.getHours()).padStart(2, "0");
+  const mm = String(d.getMinutes()).padStart(2, "0");
+  const ss = String(d.getSeconds()).padStart(2, "0");
+  const ms = String(d.getMilliseconds()).padStart(3, "0");
+  return `${hh}:${mm}:${ss}.${ms}`;
+}
+const subscribers = /* @__PURE__ */ new Map();
+function subscribeForm(key, form) {
+  if (subscribers.has(key)) return;
+  const captureValue = () => {
+    try {
+      return structuredClone(form.form.value);
+    } catch {
+      return form.form.value;
+    }
+  };
+  const unsubChange = form.onFormChange(() => {
+    pushEvent({ type: "form.change", formKey: key, time: Date.now(), value: captureValue() });
+    updateTick.value++;
+  });
+  const unsubSubmit = form.onSubmitSuccess(() => {
+    pushEvent({ type: "submit.success", formKey: key, time: Date.now(), value: captureValue() });
+    updateTick.value++;
+  });
+  const unsubReset = form.onReset(() => {
+    pushEvent({ type: "reset", formKey: key, time: Date.now(), value: captureValue() });
+    updateTick.value++;
+  });
+  subscribers.set(key, () => {
+    unsubChange();
+    unsubSubmit();
+    unsubReset();
+  });
+}
+watch(
+  formEntries,
+  (entries) => {
+    const liveKeys = new Set(entries.map(([k]) => k));
+    for (const [key, form] of entries) {
+      if (!subscribers.has(key)) subscribeForm(key, form);
+    }
+    for (const [key, unsub] of subscribers) {
+      if (!liveKeys.has(key)) {
+        unsub();
+        subscribers.delete(key);
+      }
+    }
+  },
+  { immediate: true }
+);
+const POLL_INTERVAL_MS = 120;
+const pollHandle = window.setInterval(() => {
+  updateTick.value++;
+}, POLL_INTERVAL_MS);
+onUnmounted(() => {
+  window.clearInterval(pollHandle);
+  for (const unsub of subscribers.values()) unsub();
+  subscribers.clear();
+});
+</script>
+
+<template>
+  <div class="atf-panel">
+    <header class="atf-header">
+      <div class="atf-brand">
+        <svg
+          class="atf-logo"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <rect width="24" height="24" rx="5" fill="#6938ef" />
+          <g
+            fill="none"
+            stroke="#ffffff"
+            stroke-width="2.25"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M8 16 L12 8 L16 16" />
+            <path d="M9.5 13 L14.5 13" />
+          </g>
+        </svg>
+        <span class="atf-title">Attaform</span>
+        <span class="atf-version">v{{ bridge.version }}</span>
+      </div>
+    </header>
+
+    <div class="atf-body">
+      <aside class="atf-sidebar">
+        <div class="atf-sidebar-title">
+          Forms <span class="atf-count">{{ formEntries.length }}</span>
+        </div>
+        <ul v-if="formEntries.length === 0" class="atf-empty">
+          <li>
+            No registered forms yet.
+            <small>Call <code>useForm()</code> on a page to see it here.</small>
+          </li>
+        </ul>
+        <ul v-else class="atf-form-list">
+          <li
+            v-for="[key] in formEntries"
+            :key="key"
+            class="atf-form-item"
+            :class="{ active: key === activeKey }"
+            @click="selectForm(key)"
+          >
+            {{ key }}
+          </li>
+        </ul>
+      </aside>
+
+      <main class="atf-detail">
+        <div v-if="activeForm === null" class="atf-empty-detail">Select a form on the left.</div>
+        <template v-else>
+          <section class="atf-section">
+            <h2 class="atf-section-title">
+              Form value
+              <span class="atf-section-hint">click a key to inspect field state</span>
+            </h2>
+            <div class="atf-section-body atf-tree">
+              <DevtoolsValueTree
+                :value="formValueView"
+                :editable="true"
+                :on-edit="handleEdit"
+                :selected-key="selectedKey"
+                :on-select-path="selectPath"
+              />
+            </div>
+          </section>
+
+          <section v-if="selectedFieldState !== null" class="atf-section">
+            <h2 class="atf-section-title">
+              Field state
+              <code class="atf-path">{{ humanizeSelectedPath() }}</code>
+              <button
+                type="button"
+                class="atf-clear-btn"
+                title="Deselect"
+                @click="selectedPath = null"
+              >
+                ×
+              </button>
+            </h2>
+            <div class="atf-section-body">
+              <dl class="atf-aggregates">
+                <dt>connected</dt>
+                <dd>{{ fmt(selectedFieldState.record?.connected) }}</dd>
+                <dt>touched</dt>
+                <dd>{{ fmt(selectedFieldState.record?.touched) }}</dd>
+                <dt>focused</dt>
+                <dd>{{ fmt(selectedFieldState.record?.focused) }}</dd>
+                <dt>blurred</dt>
+                <dd>{{ fmt(selectedFieldState.record?.blurred) }}</dd>
+                <dt>updatedAt</dt>
+                <dd>{{ fmt(selectedFieldState.record?.updatedAt) }}</dd>
+                <dt>schemaErrors</dt>
+                <dd>{{ fmt(selectedFieldState.schemaErrorCount) }}</dd>
+                <dt>userErrors</dt>
+                <dd>{{ fmt(selectedFieldState.userErrorCount) }}</dd>
+                <dt>errors</dt>
+                <dd>
+                  <span v-if="selectedFieldState.errors.length === 0">{{ fmt([]) }}</span>
+                  <ul v-else class="atf-error-messages">
+                    <li v-for="(e, i) in selectedFieldState.errors" :key="i">
+                      {{ e.message }} <small>({{ e.code }})</small>
+                    </li>
+                  </ul>
+                </dd>
+                <dt>value</dt>
+                <dd class="atf-tree">
+                  <DevtoolsValueTree :value="selectedValueView()" />
+                </dd>
+              </dl>
+            </div>
+          </section>
+
+          <section class="atf-section">
+            <h2 class="atf-section-title">
+              Schema Errors
+              <span v-if="schemaErrorRows.length" class="atf-badge atf-badge-error">
+                {{ schemaErrorRows.length }}
+              </span>
+            </h2>
+            <div class="atf-section-body">
+              <p v-if="schemaErrorRows.length === 0" class="atf-empty-list"> No schema errors. </p>
+              <ul v-else class="atf-error-list">
+                <li v-for="[path, errs] in schemaErrorRows" :key="path">
+                  <code class="atf-path">{{ humanizePathKey(path) }}</code>
+                  <ul class="atf-error-messages">
+                    <li v-for="(e, i) in errs" :key="i">{{ e.message }}</li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </section>
+
+          <section class="atf-section">
+            <h2 class="atf-section-title">
+              User Errors
+              <span v-if="userErrorRows.length" class="atf-badge atf-badge-warn">
+                {{ userErrorRows.length }}
+              </span>
+            </h2>
+            <div class="atf-section-body">
+              <p v-if="userErrorRows.length === 0" class="atf-empty-list">
+                No user-injected errors.
+              </p>
+              <ul v-else class="atf-error-list">
+                <li v-for="[path, errs] in userErrorRows" :key="path">
+                  <code class="atf-path">{{ humanizePathKey(path) }}</code>
+                  <ul class="atf-error-messages">
+                    <li v-for="(e, i) in errs" :key="i">{{ e.message }}</li>
+                  </ul>
+                </li>
+              </ul>
+            </div>
+          </section>
+
+          <section v-if="aggregates" class="atf-section">
+            <h2 class="atf-section-title">Aggregates</h2>
+            <div class="atf-section-body">
+              <dl class="atf-aggregates">
+                <dt>submitting</dt>
+                <dd>{{ fmt(aggregates.submitting) }}</dd>
+                <dt>submissionAttempts</dt>
+                <dd>{{ fmt(aggregates.submissionAttempts) }}</dd>
+                <dt>submitError</dt>
+                <dd>{{ fmt(aggregates.submitError) }}</dd>
+                <dt>activeValidations</dt>
+                <dd>{{ fmt(aggregates.activeValidations) }}</dd>
+              </dl>
+            </div>
+          </section>
+
+          <section class="atf-section">
+            <h2 class="atf-section-title">
+              Timeline
+              <span v-if="events.length" class="atf-badge atf-badge-neutral">
+                {{ events.length }}{{ events.length === MAX_TIMELINE_EVENTS ? "+" : "" }}
+              </span>
+              <button
+                v-if="events.length"
+                type="button"
+                class="atf-clear-btn"
+                @click="clearTimeline"
+              >
+                clear
+              </button>
+            </h2>
+            <div class="atf-section-body">
+              <p v-if="events.length === 0" class="atf-empty-list">
+                No events yet. Type into an input, submit, or call <code>reset()</code> to see
+                entries appear here.
+              </p>
+              <ul v-else class="atf-timeline">
+                <li
+                  v-for="event in events"
+                  :key="event.id"
+                  class="atf-timeline-entry"
+                  :class="[
+  `atf-timeline-${event.type.split('.')[0]}`,
+  { expanded: expandedEventId === event.id }
+]"
+                >
+                  <div class="atf-timeline-row" @click="toggleEvent(event.id)">
+                    <span class="atf-timeline-time">{{ formatTime(event.time) }}</span>
+                    <span class="atf-timeline-type">{{ event.type }}</span>
+                    <span class="atf-timeline-form">{{ event.formKey }}</span>
+                    <span class="atf-timeline-caret">
+                      {{ expandedEventId === event.id ? "\u2212" : "+" }}
+                    </span>
+                  </div>
+                  <div v-if="expandedEventId === event.id" class="atf-timeline-detail">
+                    <DevtoolsValueTree :value="event.value" />
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </section>
+        </template>
+      </main>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.atf-panel{--atf-bg:#0f172a;--atf-bg-elev:#111c33;--atf-fg:#e2e8f0;--atf-fg-muted:#94a3b8;--atf-border:rgba(148,163,184,.12);--atf-border-strong:rgba(148,163,184,.2);--atf-accent:#5b8def;--atf-key:#93c5fd;--atf-string:#86efac;--atf-number:#fbbf24;--atf-boolean:#f472b6;--atf-redacted:#f87171;--atf-muted:#64748b;--atf-row-hover:hsla(0,0%,100%,.04);--atf-error-bg:rgba(248,113,113,.1);--atf-warn-bg:rgba(251,191,36,.1);background:var(--atf-bg);color:var(--atf-fg);display:flex;flex-direction:column;font-family:system-ui,-apple-system,Segoe UI,sans-serif;font-size:13px;height:100vh;line-height:1.5}@media (prefers-color-scheme:light){.atf-panel{--atf-bg:#fff;--atf-bg-elev:#f8fafc;--atf-fg:#0f172a;--atf-fg-muted:#64748b;--atf-border:rgba(15,23,42,.08);--atf-border-strong:rgba(15,23,42,.16);--atf-key:#2563eb;--atf-string:#16a34a;--atf-number:#d97706;--atf-boolean:#db2777;--atf-redacted:#dc2626;--atf-muted:#94a3b8;--atf-row-hover:rgba(15,23,42,.04);--atf-error-bg:rgba(220,38,38,.08);--atf-warn-bg:rgba(217,119,6,.08)}}.atf-header{background:var(--atf-bg-elev);border-bottom:1px solid var(--atf-border);flex:0 0 auto;padding:.75rem 1rem}.atf-brand{align-items:center;display:flex;gap:.5rem}.atf-logo{display:block;height:22px;width:22px}.atf-title{font-size:14px;font-weight:600}.atf-version{color:var(--atf-fg-muted);font-family:ui-monospace,monospace;font-size:11px}.atf-body{display:grid;flex:1 1 auto;grid-template-columns:200px 1fr;min-height:0}.atf-sidebar{border-right:1px solid var(--atf-border);overflow-y:auto;padding:.75rem 0}.atf-sidebar-title{align-items:center;color:var(--atf-fg-muted);display:flex;font-size:11px;gap:.4em;letter-spacing:.05em;padding:0 1rem .5rem;text-transform:uppercase}.atf-count{background:var(--atf-border-strong);border-radius:999px;color:var(--atf-fg);font-size:10px;padding:0 .4em}.atf-empty{color:var(--atf-fg-muted);list-style:none;margin:0;padding:0 1rem}.atf-empty small{display:block;font-size:11px;margin-top:.4rem}.atf-empty code{background:var(--atf-border);border-radius:3px;font-size:11px;padding:.05em .35em}.atf-form-list{list-style:none;margin:0;padding:0}.atf-form-item{cursor:pointer;font-family:ui-monospace,monospace;font-size:12px;padding:.4rem 1rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.atf-form-item:hover{background:var(--atf-row-hover)}.atf-form-item.active{background:rgba(91,141,239,.12);border-left:2px solid var(--atf-accent);color:var(--atf-key);padding-left:calc(1rem - 2px)}.atf-detail{overflow-y:auto;padding:1rem 1.25rem}.atf-empty-detail{color:var(--atf-fg-muted);padding:3rem 0;text-align:center}.atf-section{margin-bottom:1.25rem}.atf-section-title{align-items:center;color:var(--atf-fg-muted);display:flex;font-size:11px;font-weight:600;gap:.5em;letter-spacing:.06em;margin:0 0 .5rem;text-transform:uppercase}.atf-section-body{background:var(--atf-bg-elev);border:1px solid var(--atf-border);border-radius:6px;padding:.6rem .8rem}.atf-badge{border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.04em;padding:0 .45em}.atf-badge-error{background:var(--atf-error-bg);color:var(--atf-redacted)}.atf-badge-warn{background:var(--atf-warn-bg);color:var(--atf-number)}.atf-empty-list{color:var(--atf-fg-muted);font-size:12px;margin:0}.atf-error-list{list-style:none;margin:0;padding:0}.atf-error-list>li+li{border-top:1px solid var(--atf-border);margin-top:.6rem;padding-top:.6rem}.atf-path{color:var(--atf-key);display:block;font-family:ui-monospace,monospace;font-size:12px;margin-bottom:.25rem}.atf-error-messages{color:var(--atf-redacted);font-size:12px;list-style:none;margin:0;padding:0}.atf-error-messages>li+li{margin-top:.2rem}.atf-aggregates{display:grid;font-family:ui-monospace,monospace;font-size:12px;gap:.35rem .75rem;grid-template-columns:max-content 1fr;margin:0}.atf-aggregates dt{color:var(--atf-key)}.atf-aggregates dd{color:var(--atf-fg);margin:0}.atf-badge-neutral{background:var(--atf-border-strong);color:var(--atf-fg)}.atf-clear-btn{background:transparent;border:1px solid var(--atf-border);border-radius:4px;cursor:pointer;font:inherit;font-size:11px;padding:.1rem .5rem}.atf-clear-btn,.atf-section-hint{color:var(--atf-fg-muted);margin-left:auto}.atf-section-hint{font-size:10px;font-weight:400;letter-spacing:0;text-transform:none}.atf-fg-muted{color:var(--atf-fg-muted)}.atf-clear-btn:hover{border-color:var(--atf-border-strong);color:var(--atf-fg)}.atf-timeline{list-style:none;margin:0;max-height:18rem;overflow-y:auto;padding:0}.atf-timeline-entry{border-top:1px solid var(--atf-border)}.atf-timeline-entry:first-child{border-top:0}.atf-timeline-row{align-items:baseline;cursor:pointer;display:grid;font-family:ui-monospace,monospace;font-size:11px;gap:.6rem;grid-template-columns:7.5rem 8rem 1fr auto;padding:.4rem 0}.atf-timeline-row:hover{background:var(--atf-row-hover)}.atf-timeline-time{color:var(--atf-fg-muted)}.atf-timeline-type{color:var(--atf-key);font-weight:600}.atf-timeline-form{color:var(--atf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.atf-timeline-caret{color:var(--atf-fg-muted);text-align:center;width:1em}.atf-timeline-entry.atf-timeline-submit .atf-timeline-type{color:var(--atf-string)}.atf-timeline-entry.atf-timeline-reset .atf-timeline-type{color:var(--atf-redacted)}.atf-timeline-detail{border-top:1px dashed var(--atf-border);margin-top:-1px;padding:.4rem 0 .6rem 7.5rem}
+</style>

package/dist/runtime/components/AttaformDevtoolsPanel.vue.d.ts

@@ -0,0 +1,7 @@
+import { type AttaformDevtoolsBridge } from 'attaform';
+type __VLS_Props = {
+    bridge: AttaformDevtoolsBridge;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/DevtoolsValueTree.d.vue.ts

@@ -0,0 +1,37 @@
+type __VLS_Props = {
+    value: unknown;
+    label?: string;
+    depth?: number;
+    /**
+     * Path-from-root for this node. Used by edit-aware mounts so the
+     * commit handler knows which leaf the user just touched. Default
+     * `[]` for non-editable mounts; the panel passes the explicit path
+     * when it wires up `onEdit`.
+     */
+    path?: ReadonlyArray<string | number>;
+    /**
+     * Edit-mode toggle. When `true` and `onEdit` is wired, leaf cells
+     * become click-to-edit. Sensitive (redacted) leaves stay read-only
+     * regardless — overwriting with the literal `[redacted]` string
+     * would destroy the real value.
+     */
+    editable?: boolean | undefined;
+    onEdit?: ((path: ReadonlyArray<string | number>, next: unknown) => void) | undefined;
+    /**
+     * Canonical JSON-array key of the currently-selected path (`null`
+     * for no selection). Compared against this node's own key so the
+     * key label can render in a highlighted state. Plumbed as a key
+     * rather than a path array because string equality is cheap and
+     * cross-renders consistently.
+     */
+    selectedKey?: string | null | undefined;
+    /**
+     * Click handler for the key label. Called with the node's current
+     * path-from-root; the panel toggles selection on identical paths.
+     * When omitted, the key label is plain text (no selection UX).
+     */
+    onSelectPath?: ((path: ReadonlyArray<string | number>) => void) | undefined;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;