@clusterenvision/ui-framework 1.0.0

package/dist/chunk-QPAAV32J.cjs

@@ -0,0 +1,1985 @@
+'use strict';
+
+var chunkZWUA2LPB_cjs = require('./chunk-ZWUA2LPB.cjs');
+var chunkEFOOXCY7_cjs = require('./chunk-EFOOXCY7.cjs');
+var chunkVHUXNDW2_cjs = require('./chunk-VHUXNDW2.cjs');
+
+// src/runtime/forms.js
+var PATH_SEGMENT_REGEX = /[^.[\]]+|\[(\d+)\]/g;
+function createFormController() {
+  const fields = /* @__PURE__ */ new Map();
+  const pathCache = /* @__PURE__ */ new Map();
+  const controller = {
+    register(name, options) {
+      if (fields.has(name)) {
+        return fields.get(name);
+      }
+      const control = createFieldControl(name, options);
+      fields.set(name, control);
+      return control;
+    },
+    registerArray(name, options) {
+      if (fields.has(name)) {
+        return fields.get(name);
+      }
+      const base = createFieldControl(name, options);
+      const control = {
+        ...base,
+        append(value) {
+          updateArray(base, (items) => {
+            items.push(value);
+          });
+        },
+        insert(index, value) {
+          updateArray(base, (items) => {
+            const nextIndex = clampIndex(index, items.length);
+            items.splice(nextIndex, 0, value);
+          });
+        },
+        remove(index) {
+          updateArray(base, (items) => {
+            if (index < 0 || index >= items.length) {
+              return;
+            }
+            items.splice(index, 1);
+          });
+        },
+        swap(indexA, indexB) {
+          updateArray(base, (items) => {
+            if (indexA < 0 || indexA >= items.length || indexB < 0 || indexB >= items.length || indexA === indexB) {
+              return;
+            }
+            const temp = items[indexA];
+            items[indexA] = items[indexB];
+            items[indexB] = temp;
+          });
+        },
+        move(fromIndex, toIndex) {
+          updateArray(base, (items) => {
+            if (fromIndex < 0 || fromIndex >= items.length) {
+              return;
+            }
+            const targetIndex = clampIndex(toIndex, items.length - 1);
+            const [item] = items.splice(fromIndex, 1);
+            const insertIndex = clampIndex(targetIndex, items.length);
+            items.splice(insertIndex, 0, item);
+          });
+        }
+      };
+      fields.set(name, control);
+      return control;
+    },
+    values() {
+      return buildNestedState((field) => field.value());
+    },
+    errors() {
+      return buildNestedErrors();
+    },
+    async validate() {
+      const entries = orderedEntries();
+      const fieldStates = {};
+      for (const [name, field] of entries) {
+        fieldStates[name] = await field.validateWithState();
+      }
+      return buildValidationResult(fieldStates, entries);
+    },
+    async validateFields(names) {
+      if (names.length === 0) {
+        return {
+          valid: true,
+          errors: {},
+          fields: {}
+        };
+      }
+      const entries = orderedEntries().filter(([name]) => names.includes(name));
+      const fieldStates = {};
+      for (const [name, field] of entries) {
+        fieldStates[name] = await field.validateWithState();
+      }
+      return buildValidationResult(fieldStates, entries);
+    },
+    handleSubmit(handler) {
+      return async (event) => {
+        event?.preventDefault();
+        const result = await controller.validate();
+        if (!result.valid) {
+          return;
+        }
+        await handler(controller.values(), event);
+      };
+    }
+  };
+  function createFieldControl(name, options) {
+    const value = chunkVHUXNDW2_cjs.signal(options.initialValue);
+    const errors = chunkVHUXNDW2_cjs.signal([]);
+    const touched = chunkVHUXNDW2_cjs.signal(false);
+    const runValidators = async () => {
+      const context = {
+        name,
+        value: value(),
+        values: controller.values(),
+        touched: touched()
+      };
+      const results = await Promise.all((options.validators ?? []).map((validator) => Promise.resolve(validator(context.value, context))));
+      const filtered = results.filter((message) => Boolean(message));
+      errors.set(filtered);
+      return {
+        name,
+        valid: filtered.length === 0,
+        errors: filtered
+      };
+    };
+    return {
+      name,
+      value,
+      errors,
+      touched,
+      setValue(nextValue) {
+        value.set(nextValue);
+      },
+      markTouched() {
+        touched.set(true);
+      },
+      async validate() {
+        const state = await runValidators();
+        return state.valid;
+      },
+      async validateWithState() {
+        return runValidators();
+      }
+    };
+  }
+  function updateArray(control, update) {
+    const current = Array.isArray(control.value()) ? [...control.value()] : [];
+    update(current);
+    control.setValue(current);
+  }
+  function orderedEntries() {
+    return Array.from(fields.entries()).sort((a, b) => getPath(a[0]).length - getPath(b[0]).length);
+  }
+  function buildNestedState(readValue) {
+    const result = {};
+    orderedEntries().forEach(([name, field]) => {
+      const path = getPath(name);
+      if (path.length === 0) {
+        return;
+      }
+      setPathValue(result, path, readValue(field));
+    });
+    return result;
+  }
+  function buildNestedErrors() {
+    return buildNestedErrorsForEntries(orderedEntries());
+  }
+  function buildNestedErrorsForEntries(entries) {
+    const result = {};
+    entries.forEach(([name, field]) => {
+      const fieldErrors = field.errors();
+      if (!fieldErrors.length) {
+        return;
+      }
+      const path = getPath(name);
+      if (path.length === 0) {
+        return;
+      }
+      setPathValue(result, path, fieldErrors);
+    });
+    return result;
+  }
+  function buildValidationResult(fieldStates, entries) {
+    const errors = buildNestedErrorsForEntries(entries);
+    const valid = Object.values(fieldStates).every((state) => state.valid);
+    return {
+      valid,
+      errors,
+      fields: fieldStates
+    };
+  }
+  function getPath(name) {
+    const cached = pathCache.get(name);
+    if (cached) {
+      return cached;
+    }
+    const segments = [];
+    let match;
+    while ((match = PATH_SEGMENT_REGEX.exec(name)) !== null) {
+      if (match[1] !== void 0) {
+        segments.push(Number(match[1]));
+      } else if (match[0]) {
+        segments.push(match[0]);
+      }
+    }
+    const resolved = segments.length > 0 ? segments : [name];
+    pathCache.set(name, resolved);
+    return resolved;
+  }
+  return controller;
+}
+function createFormWizard(form, steps, initialStep = 0) {
+  if (steps.length === 0) {
+    throw new Error("Form wizard requires at least one step.");
+  }
+  const stepIndex = chunkVHUXNDW2_cjs.signal(resolveStepIndex(steps, initialStep));
+  const currentStep = chunkVHUXNDW2_cjs.computed(() => steps[stepIndex()]);
+  const isFirst = chunkVHUXNDW2_cjs.computed(() => stepIndex() === 0);
+  const isLast = chunkVHUXNDW2_cjs.computed(() => stepIndex() >= steps.length - 1);
+  const controller = {
+    steps,
+    currentIndex: stepIndex,
+    currentStep,
+    isFirst,
+    isLast,
+    goTo(step) {
+      stepIndex.set(resolveStepIndex(steps, step));
+    },
+    async next() {
+      if (await controller.validateCurrent()) {
+        if (!isLast()) {
+          stepIndex.set(stepIndex() + 1);
+        }
+        return true;
+      }
+      return false;
+    },
+    previous() {
+      if (!isFirst()) {
+        stepIndex.set(stepIndex() - 1);
+      }
+    },
+    async validateCurrent() {
+      const step = currentStep();
+      if (step.validate) {
+        return Boolean(await step.validate(form));
+      }
+      if (step.fields && step.fields.length > 0) {
+        const result = await form.validateFields(step.fields);
+        return result.valid;
+      }
+      return true;
+    },
+    reset(step = 0) {
+      stepIndex.set(resolveStepIndex(steps, step));
+    }
+  };
+  return controller;
+}
+function resolveStepIndex(steps, step) {
+  if (typeof step === "number") {
+    return clampIndex(step, steps.length - 1);
+  }
+  const index = steps.findIndex((item) => item.id === step);
+  return index >= 0 ? index : 0;
+}
+function setPathValue(target, path, value) {
+  let cursor = target;
+  for (let index = 0; index < path.length; index += 1) {
+    const segment = path[index];
+    const isLast = index === path.length - 1;
+    if (isLast) {
+      if (Array.isArray(cursor) && typeof segment === "number") {
+        cursor[segment] = value;
+      } else {
+        cursor[segment] = value;
+      }
+      return;
+    }
+    const nextSegment = path[index + 1];
+    const shouldBeArray = typeof nextSegment === "number";
+    if (Array.isArray(cursor) && typeof segment === "number") {
+      if (!cursor[segment] || typeof cursor[segment] !== "object") {
+        cursor[segment] = shouldBeArray ? [] : {};
+      }
+      cursor = cursor[segment];
+      continue;
+    }
+    const currentValue = cursor[segment];
+    if (!currentValue || typeof currentValue !== "object") {
+      cursor[segment] = shouldBeArray ? [] : {};
+    } else if (shouldBeArray && !Array.isArray(currentValue)) {
+      cursor[segment] = [];
+    } else if (!shouldBeArray && Array.isArray(currentValue)) {
+      cursor[segment] = {};
+    }
+    cursor = cursor[segment];
+  }
+}
+function clampIndex(index, length) {
+  if (Number.isNaN(index)) {
+    return length;
+  }
+  return Math.min(Math.max(index, 0), length);
+}
+
+// src/runtime/resource.js
+var defaultCache = createResourceCache();
+function createResourceCache() {
+  const store = chunkVHUXNDW2_cjs.signal(/* @__PURE__ */ new Map());
+  return {
+    read(key) {
+      return store().get(key);
+    },
+    write(key, state) {
+      store.update((current) => {
+        const next = new Map(current);
+        next.set(key, state);
+        return next;
+      });
+    },
+    delete(key) {
+      store.update((current) => {
+        const next = new Map(current);
+        next.delete(key);
+        return next;
+      });
+    },
+    clear() {
+      store.set(/* @__PURE__ */ new Map());
+    },
+    keys() {
+      return Array.from(store().keys());
+    }
+  };
+}
+function getResourceCache() {
+  return defaultCache;
+}
+function normalizeResourceKey(key) {
+  return encodeResourceKey(key);
+}
+function invalidateResource(key, cache = defaultCache) {
+  cache.delete(normalizeResourceKey(key));
+}
+function createResource(key, fetcher, options = {}) {
+  const cache = options.cache ?? defaultCache;
+  const keySignal = chunkVHUXNDW2_cjs.signal(normalizeResourceKey(key));
+  const cached = resolveCachedState(cache, keySignal(), options.cacheTimeMs);
+  const hasCached = Boolean(cached);
+  const initialState = cached ? cached : options.initialData !== void 0 ? {
+    status: "success",
+    data: options.initialData,
+    updatedAt: Date.now()
+  } : { status: "idle" };
+  const state = chunkVHUXNDW2_cjs.signal(initialState);
+  const setState = (next) => {
+    state.set(next);
+    cache.write(keySignal(), next);
+  };
+  const load = async (context = {}) => {
+    const current = state();
+    if (!context.force && current.status === "success" && !isResourceStale(current, options.staleTimeMs)) {
+      return current;
+    }
+    if (current.status === "loading") {
+      return current;
+    }
+    setState({
+      ...current,
+      status: "loading"
+    });
+    const maxRetries = options.maxRetries ?? (typeof options.retry === "number" ? options.retry : 3);
+    let lastError;
+    for (let attempt = 0; attempt <= maxRetries; attempt++) {
+      try {
+        if (attempt > 0) {
+          const delay = typeof options.retryDelayMs === "function" ? options.retryDelayMs(attempt - 1) : calculateRetryDelay(attempt - 1, options.retryDelayMs);
+          await new Promise((resolve) => setTimeout(resolve, delay));
+        }
+        const data = await Promise.resolve(fetcher(context));
+        const next2 = {
+          status: "success",
+          data,
+          error: void 0,
+          updatedAt: Date.now()
+        };
+        setState(next2);
+        options.onSuccess?.(data);
+        options.onSettled?.(data, void 0);
+        return next2;
+      } catch (error) {
+        lastError = classifyError(error);
+        const shouldRetry = attempt < maxRetries && determineRetry(options.retry, attempt, lastError);
+        if (!shouldRetry) {
+          break;
+        }
+      }
+    }
+    const finalError = lastError ?? classifyError(new Error("Unknown error"));
+    const next = {
+      status: "error",
+      data: state().data,
+      error: finalError,
+      updatedAt: Date.now()
+    };
+    setState(next);
+    options.onError?.(finalError);
+    options.onSettled?.(void 0, finalError);
+    return next;
+  };
+  const resource = {
+    key: keySignal,
+    state,
+    isStale() {
+      return isResourceStale(state(), options.staleTimeMs);
+    },
+    load,
+    refresh(context) {
+      return load({ ...context, force: true });
+    },
+    async mutate(mutator, mutateOptions) {
+      const current = state();
+      const previousData = current.data;
+      if (mutateOptions?.optimisticData !== void 0) {
+        setState({
+          status: "success",
+          data: mutateOptions.optimisticData,
+          error: void 0,
+          updatedAt: Date.now()
+        });
+      }
+      try {
+        const nextData = await Promise.resolve(mutator(previousData));
+        const next = {
+          status: "success",
+          data: nextData,
+          error: void 0,
+          updatedAt: Date.now()
+        };
+        setState(next);
+        options.onSuccess?.(nextData);
+        options.onSettled?.(nextData, void 0);
+        return next;
+      } catch (error) {
+        const normalized = error instanceof Error ? error : new Error(String(error));
+        const shouldRollback = mutateOptions?.rollbackOnError !== false && previousData !== void 0;
+        if (shouldRollback) {
+          setState({
+            status: "success",
+            data: previousData,
+            error: void 0,
+            updatedAt: current.updatedAt ?? Date.now()
+          });
+          mutateOptions?.onRollback?.(previousData);
+          options.onError?.(normalized);
+          options.onSettled?.(void 0, normalized);
+          return {
+            status: "success",
+            data: previousData,
+            error: void 0,
+            updatedAt: current.updatedAt ?? Date.now()
+          };
+        } else {
+          setState({
+            status: "error",
+            data: previousData,
+            error: normalized,
+            updatedAt: Date.now()
+          });
+        }
+        options.onError?.(normalized);
+        options.onSettled?.(void 0, normalized);
+        return {
+          status: "error",
+          data: previousData,
+          error: normalized,
+          updatedAt: Date.now()
+        };
+      }
+    },
+    setData(data) {
+      setState({
+        status: "success",
+        data,
+        error: void 0,
+        updatedAt: Date.now()
+      });
+    },
+    setError(error) {
+      setState({
+        status: "error",
+        data: state().data,
+        error,
+        updatedAt: Date.now()
+      });
+    },
+    clear() {
+      setState({ status: "idle" });
+      cache.delete(keySignal());
+    }
+  };
+  if (options.enabled) {
+    void load();
+  }
+  if (options.refetchOnStale && hasCached && resource.isStale()) {
+    void load();
+  }
+  return resource;
+}
+function encodeResourceKey(value) {
+  if (value === void 0) {
+    return "u:";
+  }
+  if (value === null) {
+    return "null:";
+  }
+  if (typeof value === "string") {
+    return `s:${value}`;
+  }
+  if (typeof value === "number") {
+    return `n:${String(value)}`;
+  }
+  if (typeof value === "boolean") {
+    return `b:${value ? "1" : "0"}`;
+  }
+  if (Array.isArray(value)) {
+    return `a:[${value.map(encodeResourceKey).join("|")}]`;
+  }
+  const keys = Object.keys(value).sort();
+  const serialized = keys.map((key) => `${key}:${encodeResourceKey(value[key])}`).join("|");
+  return `o:{${serialized}}`;
+}
+function determineRetry(retry, attempt, error) {
+  if (retry === false || retry === void 0) {
+    return false;
+  }
+  if (!error.retryable) {
+    return false;
+  }
+  if (retry === true) {
+    return true;
+  }
+  if (typeof retry === "number") {
+    return attempt < retry;
+  }
+  return retry(attempt, error);
+}
+function resolveCachedState(cache, key, cacheTimeMs) {
+  const cached = cache.read(key);
+  if (!cached) {
+    return void 0;
+  }
+  if (isResourceExpired(cached, cacheTimeMs)) {
+    cache.delete(key);
+    return void 0;
+  }
+  return cached;
+}
+function isResourceStale(state, staleTimeMs) {
+  if (staleTimeMs === void 0) {
+    return false;
+  }
+  if (!state.updatedAt) {
+    return true;
+  }
+  return Date.now() - state.updatedAt >= staleTimeMs;
+}
+function isResourceExpired(state, cacheTimeMs) {
+  if (cacheTimeMs === void 0) {
+    return false;
+  }
+  if (!state.updatedAt) {
+    return true;
+  }
+  return Date.now() - state.updatedAt >= cacheTimeMs;
+}
+function classifyError(error) {
+  const base = error instanceof Error ? error : new Error(String(error));
+  if (base.name === "AbortError" || error && error.code === "ABORT_ERR") {
+    return Object.assign(base, {
+      type: "abort",
+      retryable: false
+    });
+  }
+  if (base.name === "TimeoutError" || base.message.toLowerCase().includes("timeout")) {
+    return Object.assign(base, {
+      type: "timeout",
+      retryable: true
+    });
+  }
+  const lower = base.message.toLowerCase();
+  if (base.name === "TypeError" && (lower.includes("fetch") || lower.includes("network"))) {
+    return Object.assign(base, {
+      type: "network",
+      retryable: true
+    });
+  }
+  const statusCode = error && error.statusCode;
+  if (statusCode !== void 0) {
+    if (statusCode >= 500) {
+      return Object.assign(base, {
+        type: "server",
+        retryable: true,
+        statusCode
+      });
+    }
+    if (statusCode >= 400) {
+      return Object.assign(base, {
+        type: "client",
+        retryable: false,
+        statusCode
+      });
+    }
+  }
+  return Object.assign(base, {
+    type: "unknown",
+    retryable: false
+  });
+}
+function calculateRetryDelay(attempt, baseDelayMs = 1e3) {
+  const exponentialDelay = Math.min(baseDelayMs * Math.pow(2, attempt), 3e4);
+  const jitter = exponentialDelay * 0.25 * (Math.random() * 2 - 1);
+  return Math.max(0, Math.floor(exponentialDelay + jitter));
+}
+
+// src/runtime/ai.ts
+function createAiSession(options) {
+  const historyLimit = Math.max(2, options.historyLimit ?? 20);
+  const initialMessages = trimHistory(options.initialMessages ?? [], historyLimit);
+  const messagesSignal = chunkVHUXNDW2_cjs.signal(initialMessages);
+  const suggestionsSignal = chunkVHUXNDW2_cjs.signal([...options.initialSuggestions ?? []]);
+  const statusSignal = chunkVHUXNDW2_cjs.signal("idle");
+  const errorSignal = chunkVHUXNDW2_cjs.signal(null);
+  const send = async (prompt, metadata) => {
+    const content = prompt.trim();
+    if (!content) {
+      return;
+    }
+    const priorMessages = messagesSignal();
+    const userMessage = createMessage("user", content, metadata?.context);
+    const nextHistory = trimHistory([...priorMessages, userMessage], historyLimit);
+    messagesSignal.set(nextHistory);
+    statusSignal.set("processing");
+    errorSignal.set(null);
+    const requestHistory = metadata?.systemPrompt ? trimHistory([...priorMessages, createMessage("system", metadata.systemPrompt), userMessage], historyLimit) : nextHistory;
+    try {
+      const response = await options.provider({
+        messages: requestHistory,
+        prompt: content,
+        locale: metadata?.locale ?? options.locale,
+        context: { ...options.context ?? {}, ...metadata?.context ?? {} }
+      });
+      const assistantMessage = normalizeAssistantMessage(response.message);
+      messagesSignal.set(trimHistory([...messagesSignal(), assistantMessage], historyLimit));
+      if (response.suggestions) {
+        suggestionsSignal.set(response.suggestions);
+      }
+      statusSignal.set("idle");
+    } catch (error) {
+      statusSignal.set("error");
+      errorSignal.set(error instanceof Error ? error.message : "Failed to fetch AI response");
+    }
+  };
+  const reset = () => {
+    messagesSignal.set([...initialMessages]);
+    suggestionsSignal.set([...options.initialSuggestions ?? []]);
+    statusSignal.set("idle");
+    errorSignal.set(null);
+  };
+  return {
+    messages: messagesSignal,
+    suggestions: suggestionsSignal,
+    status: statusSignal,
+    error: errorSignal,
+    send,
+    reset
+  };
+}
+function createHttpAiProvider(options) {
+  const fetcher = options.fetch ?? globalThis.fetch;
+  if (!fetcher) {
+    throw new Error("No fetch implementation available for AI provider.");
+  }
+  return async (request) => {
+    const response = await fetcher(options.endpoint, {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+        ...options.headers ?? {}
+      },
+      body: JSON.stringify(request)
+    });
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`AI endpoint responded with ${String(response.status)}: ${errorText}`);
+    }
+    const json = await response.json();
+    return options.mapResponse ? options.mapResponse(json) : json;
+  };
+}
+function createMockAiProvider(options = {}) {
+  const suggestions = options.suggestions ?? [
+    "Summarize the key risks",
+    "Outline a rollout plan",
+    "Draft stakeholder notes"
+  ];
+  return async (request) => {
+    const delay = Math.max(0, options.delayMs ?? 120);
+    if (delay) {
+      await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+    const suffix = options.signature ? `
+
+\u2014 ${options.signature}` : "";
+    return {
+      message: {
+        content: `AI mock response:
+${request.prompt}${suffix}`
+      },
+      suggestions
+    };
+  };
+}
+function trimHistory(messages, limit) {
+  if (messages.length <= limit) {
+    return [...messages];
+  }
+  return messages.slice(messages.length - limit);
+}
+function createMessage(role, content, metadata) {
+  return {
+    id: createMessageId(),
+    role,
+    content,
+    metadata,
+    createdAt: Date.now()
+  };
+}
+function normalizeAssistantMessage(payload) {
+  return {
+    id: payload.id ?? createMessageId(),
+    role: payload.role ?? "assistant",
+    content: payload.content,
+    metadata: payload.metadata,
+    createdAt: payload.createdAt ?? Date.now()
+  };
+}
+function createMessageId() {
+  const maybeCrypto = globalThis.crypto;
+  if (maybeCrypto?.randomUUID) {
+    return maybeCrypto.randomUUID();
+  }
+  return `ai_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+
+// src/runtime/devtools/diagnostics.js
+function createRuntimeDiagnosticsStore(options = {}) {
+  const reports = chunkVHUXNDW2_cjs.signal([]);
+  const reporterName = options.reporterName ?? `ceui-devtools-${Date.now()}`;
+  const maxReports = options.maxReports ?? 100;
+  let attached = false;
+  const reporter = {
+    name: reporterName,
+    report(report) {
+      reports.update((current) => {
+        const next = [...current, report];
+        if (next.length > maxReports) {
+          return next.slice(next.length - maxReports);
+        }
+        return next;
+      });
+    }
+  };
+  const store = {
+    reports,
+    attach() {
+      if (attached) {
+        return;
+      }
+      chunkZWUA2LPB_cjs.addRuntimeErrorReporter(reporter);
+      attached = true;
+    },
+    detach() {
+      if (!attached) {
+        return;
+      }
+      const next = chunkZWUA2LPB_cjs.getRuntimeErrorReporters().filter((entry) => entry.name !== reporterName);
+      chunkZWUA2LPB_cjs.registerRuntimeErrorReporters(next);
+      attached = false;
+    },
+    clearReports() {
+      reports.set([]);
+    },
+    getSnapshot() {
+      return {
+        reports: reports(),
+        routeData: store.getRouteDataSnapshot(),
+        resources: store.getResourceSnapshot()
+      };
+    },
+    getRouteDataSnapshot() {
+      const data = chunkEFOOXCY7_cjs.getRouteDataStore()();
+      return Object.fromEntries(data.entries());
+    },
+    getResourceSnapshot() {
+      const cache = getResourceCache();
+      const entries = cache.keys().map((key) => [key, cache.read(key)]).filter(([, value]) => Boolean(value));
+      return Object.fromEntries(entries);
+    }
+  };
+  return store;
+}
+
+// src/runtime/devtools/hydration-dashboard.js
+function getHydrationReports(reports) {
+  return reports.filter((report) => report.info.phase === "hydration");
+}
+function buildHydrationSummary(reports) {
+  const hydrationReports = getHydrationReports(reports);
+  const summary = {
+    total: hydrationReports.length,
+    byTemplateId: {},
+    byComponentName: {},
+    byReason: {}
+  };
+  hydrationReports.forEach((report) => {
+    const templateId = report.info.templateId ?? "unknown";
+    summary.byTemplateId[templateId] = (summary.byTemplateId[templateId] ?? 0) + 1;
+    const componentName = report.info.componentName ?? "unknown";
+    summary.byComponentName[componentName] = (summary.byComponentName[componentName] ?? 0) + 1;
+    const reason = extractHydrationReason(report.error);
+    summary.byReason[reason] = (summary.byReason[reason] ?? 0) + 1;
+  });
+  return summary;
+}
+function extractHydrationReason(error) {
+  const message = error?.message ?? "unknown";
+  const prefix = "[hydration] ";
+  return message.startsWith(prefix) ? message.slice(prefix.length) : message;
+}
+
+// src/runtime/devtools/hydration-replay.js
+function getHydrationDomPayload(report) {
+  const attributes = report.info.attributes;
+  if (!attributes || typeof attributes !== "object") {
+    return {};
+  }
+  const record = attributes;
+  return {
+    expectedDom: typeof record.expectedDom === "string" ? record.expectedDom : void 0,
+    receivedDom: typeof record.receivedDom === "string" ? record.receivedDom : void 0
+  };
+}
+function buildHydrationDomDiff(expectedDom, receivedDom, contextRadius = 40) {
+  const expected = expectedDom ?? "";
+  const received = receivedDom ?? "";
+  const minLength = Math.min(expected.length, received.length);
+  let mismatchIndex = -1;
+  for (let i = 0; i < minLength; i += 1) {
+    if (expected[i] !== received[i]) {
+      mismatchIndex = i;
+      break;
+    }
+  }
+  if (mismatchIndex === -1 && expected.length !== received.length) {
+    mismatchIndex = minLength;
+  }
+  const hasMismatch = mismatchIndex !== -1;
+  const expectedContext = hasMismatch ? expected.slice(Math.max(0, mismatchIndex - contextRadius), mismatchIndex + contextRadius) : "";
+  const receivedContext = hasMismatch ? received.slice(Math.max(0, mismatchIndex - contextRadius), mismatchIndex + contextRadius) : "";
+  return {
+    hasMismatch,
+    firstMismatchIndex: mismatchIndex,
+    expectedLength: expected.length,
+    receivedLength: received.length,
+    expectedContext,
+    receivedContext
+  };
+}
+function createHydrationReplaySession(report, options = {}) {
+  const payload = getHydrationDomPayload(report);
+  const diff = payload.expectedDom || payload.receivedDom ? buildHydrationDomDiff(payload.expectedDom, payload.receivedDom, options.contextRadius) : null;
+  return {
+    payload,
+    diff,
+    applyExpected(target) {
+      applyDomPayload(target, payload.expectedDom);
+    },
+    applyReceived(target) {
+      applyDomPayload(target, payload.receivedDom);
+    },
+    clear(target) {
+      clearNode(target);
+    }
+  };
+}
+function applyDomPayload(target, html) {
+  clearNode(target);
+  if (!html) {
+    return;
+  }
+  if (typeof document === "undefined") {
+    return;
+  }
+  if (target instanceof Element) {
+    target.innerHTML = html;
+    return;
+  }
+  if (target instanceof DocumentFragment) {
+    const template = document.createElement("template");
+    template.innerHTML = html;
+    target.appendChild(template.content.cloneNode(true));
+    return;
+  }
+  target.textContent = html;
+}
+function clearNode(target) {
+  while (target.firstChild) {
+    target.removeChild(target.firstChild);
+  }
+}
+
+// src/runtime/devtools/hydration-replay-panel.js
+function createHydrationReplayPanel(report, options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[ce-ui] Hydration replay panel requires a DOM.");
+  }
+  const contextRadius = options.contextRadius ?? 40;
+  const session = createHydrationReplaySession(report, { contextRadius });
+  const diff = session.diff ?? buildHydrationDomDiff(session.payload.expectedDom, session.payload.receivedDom, contextRadius);
+  const container = document.createElement("section");
+  container.className = ["ceui-hydration-panel", options.className].filter(Boolean).join(" ");
+  const style = document.createElement("style");
+  style.textContent = `
+    .ceui-hydration-panel {
+      font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
+      border: 1px solid var(--ceui-border, #d7dbe6);
+      border-radius: 16px;
+      padding: 16px;
+      background: var(--ceui-surface, #ffffff);
+      box-shadow: 0 10px 24px rgba(25, 36, 60, 0.08);
+    }
+    .ceui-hydration-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+    .ceui-hydration-panel__meta { font-size: 12px; color: var(--ceui-muted, #6a7280); }
+    .ceui-hydration-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
+    .ceui-hydration-panel__card {
+      border: 1px solid rgba(36, 86, 255, 0.12);
+      border-radius: 14px;
+      padding: 12px;
+      background: var(--ceui-surface-alt, #f6f4ff);
+    }
+    .ceui-hydration-panel__preview { border: 1px dashed #c9ccd4; border-radius: 10px; padding: 8px; min-height: 64px; background: #ffffff; }
+    .ceui-hydration-panel__code { margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: #f1f3f8; padding: 8px; border-radius: 8px; overflow: auto; }
+    .ceui-hydration-panel__highlight { background: #ffd54f; color: #1c1e22; padding: 0 2px; border-radius: 3px; }
+    .ceui-hydration-panel__label { font-weight: 600; margin-bottom: 6px; color: var(--ceui-ink, #1f2430); }
+  `;
+  const header = document.createElement("div");
+  header.className = "ceui-hydration-panel__header";
+  const title = document.createElement("div");
+  title.textContent = `Hydration Replay \xB7 ${report.info.templateId ?? "template"}`;
+  const meta = document.createElement("div");
+  meta.className = "ceui-hydration-panel__meta";
+  meta.textContent = `Component: ${report.info.componentName ?? "unknown"} \xB7 Mismatch index: ${diff.firstMismatchIndex}`;
+  header.append(title, meta);
+  const grid = document.createElement("div");
+  grid.className = "ceui-hydration-panel__grid";
+  grid.appendChild(buildPane("Expected (SSR)", session.payload.expectedDom, diff.firstMismatchIndex, contextRadius));
+  grid.appendChild(buildPane("Received (CSR)", session.payload.receivedDom, diff.firstMismatchIndex, contextRadius));
+  container.append(style, header, grid);
+  return container;
+}
+function buildPane(label, html, mismatchIndex, contextRadius) {
+  const card = document.createElement("div");
+  card.className = "ceui-hydration-panel__card";
+  const labelNode = document.createElement("div");
+  labelNode.className = "ceui-hydration-panel__label";
+  labelNode.textContent = label;
+  const preview = document.createElement("div");
+  preview.className = "ceui-hydration-panel__preview";
+  if (html) {
+    preview.innerHTML = html;
+  }
+  const code = document.createElement("pre");
+  code.className = "ceui-hydration-panel__code";
+  code.innerHTML = highlightSnippet(html ?? "", mismatchIndex, contextRadius);
+  card.append(labelNode, preview, code);
+  return card;
+}
+function highlightSnippet(value, mismatchIndex, contextRadius) {
+  if (!value) {
+    return escapeHtml("(empty)");
+  }
+  if (mismatchIndex < 0) {
+    return escapeHtml(truncate(value, contextRadius * 2));
+  }
+  const start = Math.max(0, mismatchIndex - contextRadius);
+  const end = Math.min(value.length, mismatchIndex + contextRadius);
+  const before = escapeHtml(value.slice(start, mismatchIndex));
+  const current = value[mismatchIndex] ?? "";
+  const after = escapeHtml(value.slice(mismatchIndex + 1, end));
+  const highlight = current ? escapeHtml(current) : "&nbsp;";
+  return `${before}<mark class="ceui-hydration-panel__highlight">${highlight}</mark>${after}`;
+}
+function truncate(value, maxLength) {
+  if (value.length <= maxLength) {
+    return value;
+  }
+  return `${value.slice(0, maxLength)}\u2026`;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+
+// src/runtime/devtools/router-inspector-panel.js
+function createRouterInspectorPanel(inspector, options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[ce-ui] Router inspector panel requires a DOM.");
+  }
+  const snapshot = inspector.getSnapshot();
+  const container = document.createElement("section");
+  container.className = ["ceui-router-panel", options.className].filter(Boolean).join(" ");
+  const style = document.createElement("style");
+  style.textContent = `
+    .ceui-router-panel {
+      font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
+      border: 1px solid var(--ceui-border, #d7dbe6);
+      border-radius: 16px;
+      padding: 16px;
+      background: var(--ceui-surface, #ffffff);
+      box-shadow: 0 10px 24px rgba(25, 36, 60, 0.08);
+    }
+    .ceui-router-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+    .ceui-router-panel__meta { font-size: 12px; color: var(--ceui-muted, #6a7280); }
+    .ceui-router-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
+    .ceui-router-panel__card {
+      border: 1px solid rgba(36, 86, 255, 0.12);
+      border-radius: 14px;
+      padding: 12px;
+      background: var(--ceui-surface-alt, #f6f4ff);
+    }
+    .ceui-router-panel__list { margin: 0; padding: 0; list-style: none; }
+    .ceui-router-panel__item { padding: 4px 0; font-size: 13px; }
+    .ceui-router-panel__item--active { font-weight: 600; color: var(--ceui-ink, #1f2430); }
+    .ceui-router-panel__code {
+      margin-top: 8px;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 12px;
+      background: #f1f3f8;
+      padding: 8px;
+      border-radius: 8px;
+      overflow: auto;
+    }
+    .ceui-router-panel__label { font-weight: 600; margin-bottom: 6px; color: var(--ceui-ink, #1f2430); }
+  `;
+  const header = document.createElement("div");
+  header.className = "ceui-router-panel__header";
+  const title = document.createElement("div");
+  title.textContent = "Router Inspector";
+  const meta = document.createElement("div");
+  meta.className = "ceui-router-panel__meta";
+  meta.textContent = `Path: ${snapshot.currentPath || "/"}`;
+  header.append(title, meta);
+  const grid = document.createElement("div");
+  grid.className = "ceui-router-panel__grid";
+  const treeCard = document.createElement("div");
+  treeCard.className = "ceui-router-panel__card";
+  const treeLabel = document.createElement("div");
+  treeLabel.className = "ceui-router-panel__label";
+  treeLabel.textContent = "Route Tree";
+  const list = document.createElement("ul");
+  list.className = "ceui-router-panel__list";
+  buildRouteList(snapshot.tree, list, 0);
+  treeCard.append(treeLabel, list);
+  grid.appendChild(treeCard);
+  if (options.showRouteData !== false) {
+    const dataCard = document.createElement("div");
+    dataCard.className = "ceui-router-panel__card";
+    const dataLabel = document.createElement("div");
+    dataLabel.className = "ceui-router-panel__label";
+    dataLabel.textContent = "Route Data Cache";
+    const cacheList = document.createElement("ul");
+    cacheList.className = "ceui-router-panel__list";
+    const dataEntries = Object.entries(snapshot.routeData);
+    if (dataEntries.length === 0) {
+      const empty = document.createElement("li");
+      empty.className = "ceui-router-panel__item";
+      empty.textContent = "No cached loader/action data.";
+      cacheList.appendChild(empty);
+    } else {
+      dataEntries.forEach(([key, entry]) => {
+        cacheList.appendChild(buildRouteDataItem(key, entry));
+      });
+    }
+    dataCard.append(dataLabel, cacheList);
+    grid.appendChild(dataCard);
+  }
+  container.append(style, header, grid);
+  return container;
+}
+function buildRouteList(nodes, list, depth) {
+  nodes.forEach((node) => {
+    const item = document.createElement("li");
+    item.className = `ceui-router-panel__item${node.isActive ? " ceui-router-panel__item--active" : ""}`;
+    item.textContent = `${" ".repeat(depth * 2)}${node.fullPath}`;
+    list.appendChild(item);
+    if (node.children.length) {
+      buildRouteList(node.children, list, depth + 1);
+    }
+  });
+}
+function buildRouteDataItem(key, entry) {
+  const item = document.createElement("li");
+  item.className = "ceui-router-panel__item";
+  const label = document.createElement("div");
+  label.textContent = key;
+  const status = document.createElement("div");
+  status.className = "ceui-router-panel__meta";
+  const phase = entry.info?.phase ?? "unknown";
+  const outcome = entry.error ? "error" : "ok";
+  const handled = entry.handled ? "handled" : "unhandled";
+  status.textContent = `Phase: ${phase} \xB7 Status: ${outcome} \xB7 ${handled}`;
+  if (entry.error) {
+    status.textContent += ` \xB7 ${entry.error.message}`;
+  }
+  if (typeof entry.durationMs === "number") {
+    status.textContent += ` \xB7 Duration: ${entry.durationMs}ms`;
+  }
+  const code = document.createElement("pre");
+  code.className = "ceui-router-panel__code";
+  code.textContent = JSON.stringify(
+    {
+      handled: entry.handled,
+      hasError: Boolean(entry.error),
+      info: entry.info ?? null,
+      data: entry.data ?? null
+    },
+    null,
+    2
+  );
+  item.append(label, status, code);
+  return item;
+}
+
+// src/runtime/devtools/signals-inspector.js
+function createSignalsInspector() {
+  const snapshot = chunkVHUXNDW2_cjs.signal(chunkVHUXNDW2_cjs.getSignalsInspectorSnapshot());
+  return {
+    snapshot,
+    refresh() {
+      const next = chunkVHUXNDW2_cjs.getSignalsInspectorSnapshot();
+      snapshot.set(next);
+      return next;
+    },
+    clear() {
+      chunkVHUXNDW2_cjs.clearSignalsInspectorRegistry();
+      snapshot.set(chunkVHUXNDW2_cjs.getSignalsInspectorSnapshot());
+    }
+  };
+}
+function buildSignalsGraph(snapshot) {
+  const nodes = [
+    ...snapshot.signals.map((signal2) => ({
+      id: signal2.id,
+      type: "signal",
+      label: signal2.id
+    })),
+    ...snapshot.effects.map((effect) => ({
+      id: effect.id,
+      type: "effect",
+      label: effect.name
+    }))
+  ];
+  const edges = [];
+  snapshot.effects.forEach((effect) => {
+    effect.trackedSignalIds.forEach((signalId) => {
+      edges.push({ from: effect.id, to: signalId, type: "tracks" });
+    });
+  });
+  return { nodes, edges };
+}
+
+// src/runtime/devtools/signals-inspector-panel.js
+function createSignalsInspectorPanel(options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[ce-ui] Signals inspector panel requires a DOM.");
+  }
+  const snapshot = options.snapshot ?? createSignalsInspector().refresh();
+  const graph = buildSignalsGraph(snapshot);
+  const container = document.createElement("section");
+  container.className = ["ceui-signals-panel", options.className].filter(Boolean).join(" ");
+  const style = document.createElement("style");
+  style.textContent = `
+    .ceui-signals-panel {
+      font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
+      border: 1px solid var(--ceui-border, #d7dbe6);
+      border-radius: 16px;
+      padding: 16px;
+      background: var(--ceui-surface, #ffffff);
+      box-shadow: 0 10px 24px rgba(25, 36, 60, 0.08);
+    }
+    .ceui-signals-panel__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+    .ceui-signals-panel__meta { font-size: 12px; color: var(--ceui-muted, #6a7280); }
+    .ceui-signals-panel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
+    .ceui-signals-panel__card {
+      border: 1px solid rgba(36, 86, 255, 0.12);
+      border-radius: 14px;
+      padding: 12px;
+      background: var(--ceui-surface-alt, #f6f4ff);
+    }
+    .ceui-signals-panel__list { margin: 0; padding: 0; list-style: none; }
+    .ceui-signals-panel__item { padding: 4px 0; font-size: 13px; }
+    .ceui-signals-panel__label { font-weight: 600; margin-bottom: 6px; color: var(--ceui-ink, #1f2430); }
+  `;
+  const header = document.createElement("div");
+  header.className = "ceui-signals-panel__header";
+  const title = document.createElement("div");
+  title.textContent = "Signals Inspector";
+  const meta = document.createElement("div");
+  meta.className = "ceui-signals-panel__meta";
+  meta.textContent = `Signals: ${snapshot.signals.length} \xB7 Effects: ${snapshot.effects.length}`;
+  header.append(title, meta);
+  const grid = document.createElement("div");
+  grid.className = "ceui-signals-panel__grid";
+  grid.appendChild(buildSignalList(snapshot));
+  grid.appendChild(buildEffectList(snapshot));
+  grid.appendChild(buildEdgesList(graph));
+  container.append(style, header, grid);
+  return container;
+}
+function buildSignalList(snapshot) {
+  const card = document.createElement("div");
+  card.className = "ceui-signals-panel__card";
+  const label = document.createElement("div");
+  label.className = "ceui-signals-panel__label";
+  label.textContent = "Signals";
+  const list = document.createElement("ul");
+  list.className = "ceui-signals-panel__list";
+  if (snapshot.signals.length === 0) {
+    list.appendChild(buildEmptyItem("No signals recorded."));
+  } else {
+    snapshot.signals.forEach((signal2) => {
+      const item = document.createElement("li");
+      item.className = "ceui-signals-panel__item";
+      item.textContent = `${signal2.id} \xB7 Subscribers: ${signal2.subscribers}`;
+      list.appendChild(item);
+    });
+  }
+  card.append(label, list);
+  return card;
+}
+function buildEffectList(snapshot) {
+  const card = document.createElement("div");
+  card.className = "ceui-signals-panel__card";
+  const label = document.createElement("div");
+  label.className = "ceui-signals-panel__label";
+  label.textContent = "Effects";
+  const list = document.createElement("ul");
+  list.className = "ceui-signals-panel__list";
+  if (snapshot.effects.length === 0) {
+    list.appendChild(buildEmptyItem("No effects recorded."));
+  } else {
+    snapshot.effects.forEach((effect) => {
+      const item = document.createElement("li");
+      item.className = "ceui-signals-panel__item";
+      item.textContent = `${effect.name} (${effect.id}) \xB7 Tracks: ${effect.trackedSignals}`;
+      list.appendChild(item);
+    });
+  }
+  card.append(label, list);
+  return card;
+}
+function buildEdgesList(graph) {
+  const card = document.createElement("div");
+  card.className = "ceui-signals-panel__card";
+  const label = document.createElement("div");
+  label.className = "ceui-signals-panel__label";
+  label.textContent = "Edges";
+  const list = document.createElement("ul");
+  list.className = "ceui-signals-panel__list";
+  if (graph.edges.length === 0) {
+    list.appendChild(buildEmptyItem("No tracked edges yet."));
+  } else {
+    graph.edges.forEach((edge) => {
+      const item = document.createElement("li");
+      item.className = "ceui-signals-panel__item";
+      item.textContent = `${edge.from} \u2192 ${edge.to}`;
+      list.appendChild(item);
+    });
+  }
+  card.append(label, list);
+  return card;
+}
+function buildEmptyItem(message) {
+  const item = document.createElement("li");
+  item.className = "ceui-signals-panel__item";
+  item.textContent = message;
+  return item;
+}
+
+// src/runtime/devtools/devtools-dashboard.js
+function createDevtoolsDashboard(options = {}) {
+  if (typeof document === "undefined") {
+    throw new Error("[ce-ui] Devtools dashboard requires a DOM.");
+  }
+  const container = document.createElement("section");
+  container.className = ["ceui-devtools-dashboard", options.className].filter(Boolean).join(" ");
+  const style = document.createElement("style");
+  style.textContent = `
+    .ceui-devtools-dashboard {
+      --ceui-surface: #ffffff;
+      --ceui-surface-alt: #f6f4ff;
+      --ceui-border: #d7dbe6;
+      --ceui-ink: #1f2430;
+      --ceui-muted: #6a7280;
+      --ceui-accent: #2456ff;
+      --ceui-shadow: 0 18px 40px rgba(25, 36, 60, 0.12);
+      font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", sans-serif;
+      display: grid;
+      gap: 18px;
+      padding: 20px;
+      border-radius: 20px;
+      background:
+        radial-gradient(120% 140% at 10% 0%, rgba(36, 86, 255, 0.12), transparent 55%),
+        radial-gradient(140% 120% at 90% 10%, rgba(34, 197, 94, 0.12), transparent 60%),
+        linear-gradient(135deg, #fefeff 0%, #f5f6fb 55%, #ffffff 100%);
+      border: 1px solid var(--ceui-border);
+      box-shadow: var(--ceui-shadow);
+      color: var(--ceui-ink);
+      animation: ceui-dashboard-fade 420ms ease;
+    }
+    .ceui-devtools-dashboard--compact {
+      gap: 12px;
+      padding: 14px;
+      border-radius: 16px;
+    }
+    .ceui-devtools-dashboard--soft {
+      --ceui-surface: #fafbfc;
+      --ceui-surface-alt: #f8f9fc;
+      --ceui-border: #e3e6ed;
+      --ceui-ink: #414958;
+      --ceui-muted: #7d8594;
+      --ceui-accent: #5577ff;
+      --ceui-shadow: 0 12px 32px rgba(25, 36, 60, 0.08);
+      background:
+        radial-gradient(120% 140% at 10% 0%, rgba(85, 119, 255, 0.08), transparent 55%),
+        radial-gradient(140% 120% at 90% 10%, rgba(52, 211, 153, 0.08), transparent 60%),
+        linear-gradient(135deg, #fafbfc 0%, #f8f9fc 55%, #fafbfc 100%);
+    }
+    @keyframes ceui-dashboard-fade {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .ceui-devtools-dashboard__empty {
+      border: 1px dashed var(--ceui-border);
+      border-radius: 14px;
+      padding: 16px;
+      color: var(--ceui-muted);
+      background: rgba(255, 255, 255, 0.7);
+    }
+    .ceui-devtools-dashboard__header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 16px;
+    }
+    .ceui-devtools-dashboard__title {
+      font-weight: 600;
+      font-size: 20px;
+      letter-spacing: -0.02em;
+    }
+    .ceui-devtools-dashboard__subtitle {
+      font-size: 12px;
+      color: var(--ceui-muted);
+    }
+    .ceui-devtools-dashboard__refresh,
+    .ceui-devtools-dashboard__toggle,
+    .ceui-devtools-dashboard__copy,
+    .ceui-devtools-dashboard__clear,
+    .ceui-devtools-dashboard__export {
+      border: 1px solid var(--ceui-border);
+      background: var(--ceui-surface);
+      border-radius: 999px;
+      padding: 6px 12px;
+      cursor: pointer;
+      font-size: 12px;
+      transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__refresh,
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__toggle,
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__copy,
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__clear,
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__export {
+      padding: 5px 10px;
+      font-size: 11px;
+      border-radius: 12px;
+    }
+    .ceui-devtools-dashboard__refresh:hover,
+    .ceui-devtools-dashboard__toggle:hover,
+    .ceui-devtools-dashboard__copy:hover,
+    .ceui-devtools-dashboard__clear:hover,
+    .ceui-devtools-dashboard__export:hover {
+      border-color: var(--ceui-accent);
+      box-shadow: 0 6px 14px rgba(36, 86, 255, 0.16);
+      transform: translateY(-1px);
+    }
+    .ceui-devtools-dashboard__panels { display: grid; gap: 16px; }
+    .ceui-devtools-dashboard__panels > * {
+      animation: ceui-panel-rise 360ms ease;
+      animation-fill-mode: both;
+    }
+    .ceui-devtools-dashboard__panels > *:nth-child(1) { animation-delay: 40ms; }
+    .ceui-devtools-dashboard__panels > *:nth-child(2) { animation-delay: 100ms; }
+    .ceui-devtools-dashboard__panels > *:nth-child(3) { animation-delay: 160ms; }
+    @keyframes ceui-panel-rise {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .ceui-devtools-dashboard__summary {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      color: var(--ceui-muted);
+      font-size: 12px;
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__summary {
+      gap: 8px;
+      font-size: 11px;
+    }
+    .ceui-devtools-dashboard__pill {
+      background: var(--ceui-surface-alt);
+      border-radius: 999px;
+      padding: 4px 12px;
+      max-width: 320px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      border: 1px solid rgba(36, 86, 255, 0.12);
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__pill { padding: 3px 10px; }
+    .ceui-devtools-dashboard__meta {
+      font-size: 12px;
+      color: var(--ceui-muted);
+      margin-left: auto;
+      margin-right: 12px;
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__meta {
+      font-size: 11px;
+      margin-right: 8px;
+    }
+    .ceui-devtools-dashboard__controls { display: flex; flex-wrap: wrap; gap: 8px; }
+    .ceui-devtools-dashboard__panels--hidden { display: none; }
+    .ceui-devtools-dashboard__footer {
+      font-size: 12px;
+      color: var(--ceui-muted);
+      padding-top: 4px;
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__footer {
+      font-size: 11px;
+      padding-top: 2px;
+    }
+    .ceui-devtools-dashboard__phase {
+      font-size: 12px;
+      color: var(--ceui-muted);
+      background: var(--ceui-surface);
+      border: 1px solid var(--ceui-border);
+      border-radius: 14px;
+      padding: 12px;
+      box-shadow: 0 10px 24px rgba(25, 36, 60, 0.08);
+    }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__phase {
+      font-size: 11px;
+      padding: 10px;
+      border-radius: 12px;
+    }
+    .ceui-devtools-dashboard__phase-title { font-weight: 600; margin-bottom: 6px; color: var(--ceui-ink); }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__title { font-size: 17px; }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__subtitle { font-size: 11px; }
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__panels { gap: 12px; }
+    .ceui-devtools-dashboard--compact .ceui-router-panel,
+    .ceui-devtools-dashboard--compact .ceui-signals-panel,
+    .ceui-devtools-dashboard--compact .ceui-hydration-panel,
+    .ceui-devtools-dashboard--compact .ceui-hydration-replay-panel {
+      border-radius: 12px;
+      padding: 12px;
+      box-shadow: 0 8px 18px rgba(25, 36, 60, 0.06);
+    }
+    .ceui-devtools-dashboard--compact .ceui-router-panel__card,
+    .ceui-devtools-dashboard--compact .ceui-signals-panel__card {
+      padding: 10px;
+      border-radius: 12px;
+    }
+    .ceui-devtools-dashboard--compact .ceui-router-panel__item,
+    .ceui-devtools-dashboard--compact .ceui-signals-panel__item,
+    .ceui-devtools-dashboard--compact .ceui-devtools-dashboard__pill {
+      font-size: 12px;
+    }
+  `;
+  container.appendChild(style);
+  const header = document.createElement("div");
+  header.className = "ceui-devtools-dashboard__header";
+  const title = document.createElement("div");
+  title.className = "ceui-devtools-dashboard__title";
+  title.textContent = "CE UI Devtools";
+  const subtitle = document.createElement("div");
+  subtitle.className = "ceui-devtools-dashboard__subtitle";
+  subtitle.textContent = "Runtime diagnostics and live state";
+  const headerText = document.createElement("div");
+  headerText.append(title, subtitle);
+  header.appendChild(headerText);
+  const refreshedAt = document.createElement("div");
+  refreshedAt.className = "ceui-devtools-dashboard__meta";
+  const controls = document.createElement("div");
+  controls.className = "ceui-devtools-dashboard__controls";
+  let panelsToggleButton = null;
+  let compactMode = Boolean(options.compact);
+  let currentTheme = options.theme ?? "default";
+  container.classList.toggle("ceui-devtools-dashboard--compact", compactMode);
+  container.classList.toggle("ceui-devtools-dashboard--soft", currentTheme === "soft");
+  if (options.showRefresh !== false) {
+    const refreshButton = document.createElement("button");
+    refreshButton.type = "button";
+    refreshButton.className = "ceui-devtools-dashboard__refresh";
+    refreshButton.textContent = "Refresh";
+    refreshButton.addEventListener("click", () => {
+      renderPanels();
+    });
+    controls.appendChild(refreshButton);
+  }
+  if (options.enableSummaryToggle) {
+    const toggleButton = document.createElement("button");
+    toggleButton.type = "button";
+    toggleButton.className = "ceui-devtools-dashboard__toggle";
+    toggleButton.textContent = "Hide summary";
+    toggleButton.addEventListener("click", () => {
+      summaryHidden = !summaryHidden;
+      toggleButton.textContent = summaryHidden ? "Show summary" : "Hide summary";
+      renderPanels();
+    });
+    controls.appendChild(toggleButton);
+  }
+  if (options.enablePanelsToggle) {
+    const panelsButton = document.createElement("button");
+    panelsButton.type = "button";
+    panelsButton.className = "ceui-devtools-dashboard__toggle";
+    panelsButton.textContent = "Collapse panels";
+    panelsButton.addEventListener("click", () => {
+      panelsHidden = !panelsHidden;
+      panelsButton.textContent = panelsHidden ? "Expand panels" : "Collapse panels";
+      renderPanels();
+    });
+    controls.appendChild(panelsButton);
+    panelsToggleButton = panelsButton;
+  }
+  if (options.enableCompactToggle !== false) {
+    const compactButton = document.createElement("button");
+    compactButton.type = "button";
+    compactButton.className = "ceui-devtools-dashboard__toggle";
+    compactButton.textContent = compactMode ? "Compact: on" : "Compact: off";
+    compactButton.addEventListener("click", () => {
+      compactMode = !compactMode;
+      container.classList.toggle("ceui-devtools-dashboard--compact", compactMode);
+      compactButton.textContent = compactMode ? "Compact: on" : "Compact: off";
+    });
+    controls.appendChild(compactButton);
+  }
+  if (options.enableThemeToggle !== false) {
+    const themeButton = document.createElement("button");
+    themeButton.type = "button";
+    themeButton.className = "ceui-devtools-dashboard__toggle";
+    themeButton.textContent = currentTheme === "soft" ? "Theme: soft" : "Theme: default";
+    themeButton.addEventListener("click", () => {
+      currentTheme = currentTheme === "soft" ? "default" : "soft";
+      container.classList.toggle("ceui-devtools-dashboard--soft", currentTheme === "soft");
+      themeButton.textContent = currentTheme === "soft" ? "Theme: soft" : "Theme: default";
+    });
+    controls.appendChild(themeButton);
+  }
+  if (options.enableCopyDiagnostics) {
+    const copyButton = document.createElement("button");
+    copyButton.type = "button";
+    copyButton.className = "ceui-devtools-dashboard__copy";
+    copyButton.textContent = "Copy diagnostics";
+    copyButton.addEventListener("click", async () => {
+      if (!options.diagnosticsStore || typeof navigator === "undefined" || !navigator.clipboard) {
+        return;
+      }
+      try {
+        await navigator.clipboard.writeText(JSON.stringify(options.diagnosticsStore.getSnapshot(), null, 2));
+        copyButton.textContent = "Copied";
+        setTimeout(() => {
+          copyButton.textContent = "Copy diagnostics";
+        }, 1500);
+      } catch {
+        copyButton.textContent = "Copy failed";
+        setTimeout(() => {
+          copyButton.textContent = "Copy diagnostics";
+        }, 1500);
+      }
+    });
+    controls.appendChild(copyButton);
+  }
+  if (options.enableClearDiagnostics) {
+    const clearButton = document.createElement("button");
+    clearButton.type = "button";
+    clearButton.className = "ceui-devtools-dashboard__clear";
+    clearButton.textContent = "Clear diagnostics";
+    clearButton.addEventListener("click", () => {
+      options.diagnosticsStore?.clearReports();
+      renderPanels();
+    });
+    controls.appendChild(clearButton);
+  }
+  if (options.enableExportDiagnostics) {
+    const exportButton = document.createElement("button");
+    exportButton.type = "button";
+    exportButton.className = "ceui-devtools-dashboard__export";
+    exportButton.textContent = "Export diagnostics";
+    exportButton.addEventListener("click", () => {
+      if (!options.diagnosticsStore || typeof document === "undefined") {
+        return;
+      }
+      const snapshot = options.diagnosticsStore.getSnapshot();
+      const json = JSON.stringify(snapshot, null, 2);
+      const blob = new Blob([json], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      anchor.download = `ce-ui-diagnostics-${Date.now()}.json`;
+      anchor.click();
+      URL.revokeObjectURL(url);
+    });
+    controls.appendChild(exportButton);
+  }
+  if (options.enableResetPanels) {
+    const resetButton = document.createElement("button");
+    resetButton.type = "button";
+    resetButton.className = "ceui-devtools-dashboard__toggle";
+    resetButton.textContent = "Reset panels";
+    resetButton.addEventListener("click", () => {
+      panelsHidden = false;
+      if (panelsToggleButton) {
+        panelsToggleButton.textContent = "Collapse panels";
+      }
+      renderPanels();
+    });
+    controls.appendChild(resetButton);
+  }
+  header.append(refreshedAt, controls);
+  const summary = document.createElement("div");
+  summary.className = "ceui-devtools-dashboard__summary";
+  const panels = document.createElement("div");
+  panels.className = "ceui-devtools-dashboard__panels";
+  const footer = document.createElement("div");
+  footer.className = "ceui-devtools-dashboard__footer";
+  const phasePanel = document.createElement("div");
+  phasePanel.className = "ceui-devtools-dashboard__phase";
+  let summaryHidden = false;
+  let panelsHidden = false;
+  const renderPanels = () => {
+    while (panels.firstChild) {
+      panels.removeChild(panels.firstChild);
+    }
+    while (summary.firstChild) {
+      summary.removeChild(summary.firstChild);
+    }
+    refreshedAt.textContent = `Refreshed: ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`;
+    if (!summaryHidden && options.showSummary !== false) {
+      buildSummary(options, summary);
+    }
+    panels.classList.toggle("ceui-devtools-dashboard__panels--hidden", panelsHidden);
+    footer.textContent = `Runtime reports: ${options.diagnosticsStore ? options.diagnosticsStore.reports().length : 0}`;
+    renderPhasePanel(options, phasePanel);
+    if (panelsHidden) {
+      return;
+    }
+    if (options.routerInspector) {
+      panels.appendChild(createRouterInspectorPanel(options.routerInspector));
+    }
+    const signalsPanel = createSignalsInspectorPanel({ snapshot: options.signalsSnapshot });
+    panels.appendChild(signalsPanel);
+    const hydrationReport = resolveHydrationReport(options);
+    if (hydrationReport) {
+      panels.appendChild(createHydrationReplayPanel(hydrationReport));
+    } else {
+      const empty = document.createElement("div");
+      empty.className = "ceui-devtools-dashboard__empty";
+      empty.textContent = "No hydration mismatch reports available.";
+      panels.appendChild(empty);
+    }
+  };
+  renderPanels();
+  container.append(header, summary, panels, phasePanel, footer);
+  return container;
+}
+function resolveHydrationReport(options) {
+  if (options.hydrationReport) {
+    return options.hydrationReport;
+  }
+  if (options.diagnosticsStore) {
+    const reports = getHydrationReports(options.diagnosticsStore.reports());
+    return reports[0];
+  }
+  return void 0;
+}
+function buildSummary(options, summary) {
+  const signalsSnapshot = options.signalsSnapshot ?? createSignalsInspector().refresh();
+  const signalsCount = signalsSnapshot.signals.length;
+  const effectsCount = signalsSnapshot.effects.length;
+  const hydrationReports = options.diagnosticsStore ? getHydrationReports(options.diagnosticsStore.reports()) : [];
+  const hydrationCount = hydrationReports.length;
+  const lastHydration = hydrationReports.slice().sort((a, b) => resolveHydrationTimestampValue(b) - resolveHydrationTimestampValue(a))[0];
+  const reportsByPhase = options.diagnosticsStore ? countReportsByPhase(options.diagnosticsStore) : /* @__PURE__ */ new Map();
+  const routeSummary = options.routerInspector?.getSnapshot();
+  if (routeSummary && options.showRouterSummary !== false) {
+    summary.appendChild(
+      buildSummaryPill(`Route: ${routeSummary.currentPath || "/"} (${routeSummary.currentMatch?.route.id ?? "unknown"})`)
+    );
+  }
+  summary.appendChild(buildSummaryPill(`Signals: ${signalsCount}`));
+  summary.appendChild(buildSummaryPill(`Effects: ${effectsCount}`));
+  summary.appendChild(buildSummaryPill(`Signals refreshed: ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`));
+  summary.appendChild(buildSummaryPill(`Hydration: ${hydrationCount}`));
+  if (reportsByPhase.size) {
+    const formatted = formatPhaseCounts(reportsByPhase);
+    const pill = buildSummaryPill(`Reports: ${formatted}`);
+    pill.title = formatted;
+    summary.appendChild(pill);
+  }
+  if (lastHydration) {
+    const timestampLabel = resolveHydrationTimestamp(lastHydration);
+    summary.appendChild(buildSummaryPill(`Last hydration: ${timestampLabel}`));
+    if (options.showHydrationTemplate !== false) {
+      summary.appendChild(buildSummaryPill(`Hydration template: ${lastHydration.info.templateId ?? "unknown"}`));
+    }
+  }
+}
+function buildSummaryPill(text) {
+  const pill = document.createElement("div");
+  pill.className = "ceui-devtools-dashboard__pill";
+  pill.textContent = text;
+  return pill;
+}
+function resolveHydrationTimestamp(report) {
+  const timestamp = resolveHydrationTimestampValue(report);
+  return timestamp ? new Date(timestamp).toLocaleTimeString() : "unknown";
+}
+function resolveHydrationTimestampValue(report) {
+  const timestamp = report.info.attributes?.timestamp;
+  return typeof timestamp === "number" ? timestamp : 0;
+}
+function countReportsByPhase(store) {
+  const counts = /* @__PURE__ */ new Map();
+  store.reports().forEach((report) => {
+    const phase = report.info.phase ?? "unknown";
+    counts.set(phase, (counts.get(phase) ?? 0) + 1);
+  });
+  return counts;
+}
+function formatPhaseCounts(counts) {
+  return Array.from(counts.entries()).sort((a, b) => a[0].localeCompare(b[0])).map(([phase, count]) => `${phase}:${count}`).join(" \xB7 ");
+}
+function renderPhasePanel(options, panel) {
+  panel.replaceChildren();
+  const title = document.createElement("div");
+  title.className = "ceui-devtools-dashboard__phase-title";
+  title.textContent = "Reports by phase";
+  panel.appendChild(title);
+  const counts = options.diagnosticsStore ? countReportsByPhase(options.diagnosticsStore) : /* @__PURE__ */ new Map();
+  if (!counts.size) {
+    const empty = document.createElement("div");
+    empty.textContent = "No reports captured.";
+    panel.appendChild(empty);
+    return;
+  }
+  const list = document.createElement("div");
+  list.textContent = formatPhaseCounts(counts);
+  panel.appendChild(list);
+}
+
+// src/runtime/devtools/router-inspector.js
+function buildRouteTree(routes, parentPath = "") {
+  return routes.map((route) => {
+    const fullPath = chunkZWUA2LPB_cjs.normalizePath(parentPath, route.path);
+    return {
+      id: route.id ?? route.path,
+      path: route.path,
+      fullPath,
+      hasLoader: Boolean(route.loader),
+      hasAction: Boolean(route.action),
+      hasGuards: Boolean(route.guards?.length),
+      children: buildRouteTree(route.children ?? [], fullPath),
+      isActive: false
+    };
+  });
+}
+function createRouterInspector(router, routes) {
+  const baseTree = buildRouteTree(routes);
+  const tree = chunkVHUXNDW2_cjs.computed(() => {
+    const activePath = router.currentMatch()?.fullPath ?? router.currentPath();
+    return markActiveRoutes(baseTree, activePath);
+  });
+  const inspector = {
+    tree,
+    currentPath: router.currentPath,
+    currentMatch: router.currentMatch,
+    getSnapshot() {
+      return {
+        currentPath: router.currentPath(),
+        currentMatch: router.currentMatch(),
+        tree: tree(),
+        routeData: inspector.getRouteDataSnapshot()
+      };
+    },
+    getRouteDataSnapshot() {
+      const store = chunkEFOOXCY7_cjs.getRouteDataStore()();
+      return Object.fromEntries(store.entries());
+    }
+  };
+  return inspector;
+}
+function markActiveRoutes(nodes, activePath) {
+  return nodes.map((node) => ({
+    ...node,
+    isActive: isPathActive(node.fullPath, activePath),
+    children: markActiveRoutes(node.children, activePath)
+  }));
+}
+function isPathActive(routePath, activePath) {
+  if (routePath === "/") {
+    return true;
+  }
+  if (activePath === routePath) {
+    return true;
+  }
+  return activePath.startsWith(`${routePath}/`);
+}
+
+// src/runtime/adapters/angular.js
+function createAngularAdapter(factory, options = {}) {
+  var _a;
+  return _a = class CeAngularBridge {
+    constructor(host) {
+      this.host = host;
+      this.props = {};
+    }
+    setInput(key, value) {
+      this.props = { ...this.props, [key]: value };
+      const patch = { [key]: value };
+      this.instance?.updateProps(patch);
+    }
+    ngOnInit() {
+      this.instance = factory.mount({
+        target: this.host.nativeElement,
+        props: this.props
+      });
+    }
+    ngOnChanges(changes) {
+      if (!this.instance) {
+        return;
+      }
+      const next = {};
+      Object.keys(changes).forEach((key) => {
+        const change = changes[key];
+        if (change) {
+          next[key] = change.currentValue;
+        }
+      });
+      if (Object.keys(next).length) {
+        this.instance.updateProps(next);
+      }
+    }
+    ngOnDestroy() {
+      this.instance?.destroy();
+    }
+  }, _a.selector = options.selector, _a.inputs = options.inputs ?? [], _a;
+}
+
+// src/runtime/adapters/react.js
+function createReactAdapter(factory, react, options = {}) {
+  const hostTag = options.hostElement ?? "div";
+  const Adapter = (props) => {
+    const hostRef = react.useRef(null);
+    const instanceRef = react.useRef(null);
+    react.useEffect(() => {
+      if (!hostRef.current) {
+        return void 0;
+      }
+      instanceRef.current = factory.mount({
+        target: hostRef.current,
+        props
+      });
+      return () => {
+        instanceRef.current?.destroy();
+        instanceRef.current = null;
+      };
+    }, []);
+    react.useEffect(() => {
+      if (instanceRef.current) {
+        instanceRef.current.updateProps(props);
+      }
+      return void 0;
+    }, [props]);
+    const refCallback = (node) => {
+      hostRef.current = node;
+    };
+    return react.createElement(hostTag, { ref: refCallback }, props.children ?? null);
+  };
+  if (options.displayName) {
+    Adapter.displayName = options.displayName;
+  }
+  return Adapter;
+}
+
+// src/runtime/adapters/vue.js
+function createVueAdapter(factory, vue, options = {}) {
+  const hostTag = options.hostElement ?? "div";
+  const component = {
+    name: options.displayName,
+    setup(props, ctx) {
+      const hostRef = vue.ref(null);
+      let instance = null;
+      vue.onMounted(() => {
+        if (!hostRef.value) {
+          return;
+        }
+        instance = factory.mount({
+          target: hostRef.value,
+          props
+        });
+      });
+      vue.watch(() => props, (next) => {
+        if (instance) {
+          instance.updateProps(next);
+        }
+      }, { deep: true });
+      vue.onBeforeUnmount(() => {
+        instance?.destroy();
+        instance = null;
+      });
+      return () => vue.h(hostTag, { ref: hostRef }, ctx?.slots?.default ? ctx.slots.default() : null);
+    }
+  };
+  return component;
+}
+
+exports.buildHydrationDomDiff = buildHydrationDomDiff;
+exports.buildHydrationSummary = buildHydrationSummary;
+exports.buildRouteTree = buildRouteTree;
+exports.buildSignalsGraph = buildSignalsGraph;
+exports.calculateRetryDelay = calculateRetryDelay;
+exports.classifyError = classifyError;
+exports.createAiSession = createAiSession;
+exports.createAngularAdapter = createAngularAdapter;
+exports.createDevtoolsDashboard = createDevtoolsDashboard;
+exports.createFormController = createFormController;
+exports.createFormWizard = createFormWizard;
+exports.createHttpAiProvider = createHttpAiProvider;
+exports.createHydrationReplayPanel = createHydrationReplayPanel;
+exports.createHydrationReplaySession = createHydrationReplaySession;
+exports.createMockAiProvider = createMockAiProvider;
+exports.createReactAdapter = createReactAdapter;
+exports.createResource = createResource;
+exports.createResourceCache = createResourceCache;
+exports.createRouterInspector = createRouterInspector;
+exports.createRouterInspectorPanel = createRouterInspectorPanel;
+exports.createRuntimeDiagnosticsStore = createRuntimeDiagnosticsStore;
+exports.createSignalsInspector = createSignalsInspector;
+exports.createSignalsInspectorPanel = createSignalsInspectorPanel;
+exports.createVueAdapter = createVueAdapter;
+exports.getHydrationDomPayload = getHydrationDomPayload;
+exports.getHydrationReports = getHydrationReports;
+exports.getResourceCache = getResourceCache;
+exports.invalidateResource = invalidateResource;
+exports.isResourceExpired = isResourceExpired;
+exports.isResourceStale = isResourceStale;
+exports.normalizeResourceKey = normalizeResourceKey;
+//# sourceMappingURL=chunk-QPAAV32J.cjs.map
+//# sourceMappingURL=chunk-QPAAV32J.cjs.map