nvent 0.4.0

package/dist/runtime/app/components/TimelineList.vue

@@ -0,0 +1,210 @@
+<template>
+  <div
+    :class="heightClass"
+    class="overflow-y-auto overflow-x-hidden"
+  >
+    <UTimeline
+      v-if="timelineItems && timelineItems.length"
+      :items="timelineItems"
+      size="xs"
+      class="px-6 py-4"
+    >
+      <!-- Custom indicator slot to show icons -->
+      <template #indicator="{ item }">
+        <UIcon
+          :name="item.icon || 'i-lucide-circle'"
+          class="size-4"
+        />
+      </template>
+
+      <!-- Custom title slot to include kind badge and subject -->
+      <template #title="{ item }">
+        <div class="flex items-center gap-2 min-w-0">
+          <span
+            class="font-mono text-xs px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 flex-shrink-0"
+          >
+            {{ item.eventType }}
+          </span>
+          <span
+            v-if="item.stepName"
+            class="text-xs text-gray-500 dark:text-gray-400 truncate"
+          >
+            {{ item.stepName }}
+          </span>
+        </div>
+      </template>
+
+      <!-- Custom description slot for rich content -->
+      <template #description="{ item }">
+        <!-- Special rendering for log events -->
+        <div
+          v-if="item.eventType === 'log'"
+          class="space-y-2 mt-2"
+        >
+          <div class="flex items-start gap-2">
+            <UBadge
+              :color="levelColor(item?.eventData?.level)"
+              variant="subtle"
+              size="xs"
+              class="capitalize mt-0.5 flex-shrink-0"
+            >
+              {{ item?.eventData?.level || "info" }}
+            </UBadge>
+            <span class="text-sm text-gray-900 dark:text-gray-100 flex-1 break-words">
+              {{ item?.eventData?.message || "" }}
+            </span>
+          </div>
+          <div
+            v-if="item?.eventData?.progress"
+            class="mt-2"
+          >
+            <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-x-auto max-h-40 text-gray-700 dark:text-gray-300 font-mono">{{ pretty(item.eventData) }}</pre>
+          </div>
+        </div>
+
+        <!-- Special rendering for flow events -->
+        <div
+          v-else-if="isFlowEvent(item.eventType)"
+          class="text-sm mt-2"
+        >
+          <div
+            v-if="item.eventData"
+            class="space-y-1"
+          >
+            <div
+              v-if="item.eventData.input"
+              class="flex items-start gap-2"
+            >
+              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Input:</span>
+              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 overflow-x-auto max-h-20 text-gray-700 dark:text-gray-300 font-mono flex-1 min-w-0">{{ pretty(item.eventData.input) }}</pre>
+            </div>
+            <div
+              v-if="item.eventData.output"
+              class="flex items-start gap-2"
+            >
+              <span class="text-xs text-gray-500 dark:text-gray-400 font-medium min-w-[60px] flex-shrink-0">Output:</span>
+              <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded px-2 py-1 overflow-x-auto max-h-20 text-gray-700 dark:text-gray-300 font-mono flex-1 min-w-0">{{ pretty(item.eventData.output) }}</pre>
+            </div>
+            <div
+              v-if="item.eventData.error"
+              class="flex items-start gap-2"
+            >
+              <span class="text-xs text-red-500 dark:text-red-400 font-medium min-w-[60px] flex-shrink-0">Error:</span>
+              <pre class="text-xs bg-red-50 dark:bg-red-900/20 rounded px-2 py-1 overflow-x-auto max-h-20 text-red-700 dark:text-red-300 font-mono flex-1 min-w-0">{{ pretty(item.eventData.error) }}</pre>
+            </div>
+          </div>
+        </div>
+
+        <!-- Default rendering -->
+        <div
+          v-else-if="item.eventData && Object.keys(item.eventData).length > 0"
+          class="mt-2"
+        >
+          <pre class="text-xs bg-gray-50 dark:bg-gray-800 rounded p-2 overflow-x-auto max-h-40 text-gray-700 dark:text-gray-300 font-mono">{{ pretty(item.eventData) }}</pre>
+        </div>
+      </template>
+    </UTimeline>
+    <div
+      v-else
+      class="h-full w-full flex flex-col items-center justify-center text-gray-400 dark:text-gray-500"
+    >
+      <UIcon
+        name="i-lucide-inbox"
+        class="w-12 h-12 mb-3 opacity-50"
+      />
+      <span class="text-sm">No events yet.</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { UTimeline, UIcon, UBadge } from "#components";
+const props = defineProps({
+  items: { type: Array, required: true },
+  heightClass: { type: String, required: false }
+});
+const heightClass = computed(() => props.heightClass || "h-96");
+function eventTsMs(e) {
+  try {
+    const ts = e?.ts;
+    if (typeof ts === "number" && Number.isFinite(ts)) return ts;
+    if (typeof ts === "string") {
+      const n = Number(ts);
+      if (Number.isFinite(n)) return n;
+      const d = Date.parse(ts);
+      if (!Number.isNaN(d)) return d;
+    }
+    if (typeof e?.id === "string" && e.id.includes("-")) {
+      const n = Number(e.id.split("-")[0]);
+      if (Number.isFinite(n)) return n;
+    }
+  } catch {
+  }
+  return Date.now();
+}
+function formatTs(e) {
+  try {
+    const t = eventTsMs(e);
+    return new Date(t).toLocaleString();
+  } catch {
+    return "";
+  }
+}
+function eventIcon(type) {
+  if (!type) return "i-lucide-circle";
+  if (type === "flow.start") return "i-lucide-play-circle";
+  if (type === "flow.completed") return "i-lucide-check-circle-2";
+  if (type === "flow.failed") return "i-lucide-x-circle";
+  if (type === "step.started" || type === "step.running") return "i-lucide-arrow-right-circle";
+  if (type === "step.completed") return "i-lucide-check-circle";
+  if (type === "step.failed") return "i-lucide-alert-circle";
+  if (type === "step.retry") return "i-lucide-rotate-cw";
+  if (type === "step.timeout") return "i-lucide-clock";
+  if (type === "log") return "i-lucide-file-text";
+  if (type === "emit") return "i-lucide-zap";
+  return "i-lucide-circle-dot";
+}
+const timelineItems = computed(() => {
+  const arr = Array.isArray(props.items) ? [...props.items] : [];
+  arr.sort((a, b) => {
+    const tb = eventTsMs(b);
+    const ta = eventTsMs(a);
+    if (tb !== ta) return tb - ta;
+    const ai = String(a?.id || "");
+    const bi = String(b?.id || "");
+    return bi.localeCompare(ai);
+  });
+  return arr.map((e) => ({
+    date: formatTs(e),
+    icon: eventIcon(e.type),
+    eventType: e.type,
+    stepName: e.stepName,
+    eventData: e.data
+  }));
+});
+function pretty(v) {
+  try {
+    return JSON.stringify(v, null, 2);
+  } catch {
+    return String(v);
+  }
+}
+function levelColor(level) {
+  switch ((level || "").toLowerCase()) {
+    case "debug":
+      return "neutral";
+    case "info":
+      return "primary";
+    case "warn":
+      return "warning";
+    case "error":
+      return "error";
+    default:
+      return "neutral";
+  }
+}
+function isFlowEvent(type) {
+  return type?.startsWith("flow.") || type?.startsWith("step.");
+}
+</script>

package/dist/runtime/app/components/TimelineList.vue.d.ts

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    items: any[];
+    heightClass?: string;
+};
+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/app/components/nhealth/component-router.d.vue.ts

@@ -0,0 +1,46 @@
+type ComponentRouteRecord = {
+    path: string;
+    component: any;
+    name?: string;
+};
+type ComponentRouterMode = 'query' | 'hash' | 'memory';
+type __VLS_Props = {
+    routes: ComponentRouteRecord[] | Record<string, any>;
+    base?: string;
+    mode?: ComponentRouterMode;
+    initial?: string;
+    debug?: boolean;
+};
+declare var __VLS_1: {
+    component: any;
+    route: any;
+    push: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
+    route: import("vue").ShallowRef<{
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, any>;
+    } | undefined, {
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, any>;
+    } | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: ComponentRouterMode;
+    debug: boolean;
+    base: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/nhealth/component-router.vue

@@ -0,0 +1,26 @@
+<template>
+  <slot
+    :component="component"
+    :route="route"
+    :push="push"
+  />
+</template>
+
+<script setup>
+import { useComponentRouter } from "#imports";
+const props = defineProps({
+  routes: { type: [Array, Object], required: true },
+  base: { type: String, required: false, default: "fp" },
+  mode: { type: String, required: false, default: "query" },
+  initial: { type: String, required: false },
+  debug: { type: Boolean, required: false, default: false }
+});
+const { component, route, push, replace } = useComponentRouter({
+  routes: props.routes,
+  base: props.base,
+  mode: props.mode,
+  initial: props.initial,
+  debug: props.debug
+});
+defineExpose({ push, replace, route });
+</script>

package/dist/runtime/app/components/nhealth/component-router.vue.d.ts

@@ -0,0 +1,46 @@
+type ComponentRouteRecord = {
+    path: string;
+    component: any;
+    name?: string;
+};
+type ComponentRouterMode = 'query' | 'hash' | 'memory';
+type __VLS_Props = {
+    routes: ComponentRouteRecord[] | Record<string, any>;
+    base?: string;
+    mode?: ComponentRouterMode;
+    initial?: string;
+    debug?: boolean;
+};
+declare var __VLS_1: {
+    component: any;
+    route: any;
+    push: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
+    route: import("vue").ShallowRef<{
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, any>;
+    } | undefined, {
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, any>;
+    } | undefined>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    mode: ComponentRouterMode;
+    debug: boolean;
+    base: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/nhealth/component-shell.d.vue.ts

@@ -0,0 +1,24 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    items?: (NavigationMenuItem & {
+        path?: string;
+    })[][];
+    activeMatch?: 'exact' | 'prefix';
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    activeMatch: "exact" | "prefix";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/components/nhealth/component-shell.vue

@@ -0,0 +1,89 @@
+<template>
+  <section class="h-full">
+    <!-- Layout container switches between column (horizontal nav top) and row (vertical nav left) -->
+    <div
+      :class="
+  orientation === 'vertical' ? 'flex h-full' : 'flex h-screen flex-col'
+"
+    >
+      <!-- Navigation area -->
+      <div
+        :class="[
+  'border-gray-200',
+  orientation === 'vertical' ? 'min-w-[256px] border-r' : 'border-b px-4 py-2'
+]"
+      >
+        <!-- Custom navigation wired via composable router -->
+        <nav
+          :class="
+  orientation === 'vertical' ? 'flex flex-col gap-1' : 'flex items-center gap-4'
+"
+        >
+          <template
+            v-for="(group, gi) in items"
+            :key="gi"
+          >
+            <div
+              :class="
+  orientation === 'vertical' ? 'flex flex-col gap-1 px-2 py-2' : 'flex flex-1 items-center gap-2'
+"
+            >
+              <button
+                v-for="(it, ii) in group"
+                :key="ii"
+                type="button"
+                :class="[
+  'cursor-pointer rounded-md hover:bg-gray-100',
+  orientation === 'vertical' ? 'px-2 py-1 text-left' : 'px-1 py-1',
+  isActive(it) ? 'text-primary-600' : 'hover:text-gray-900'
+]"
+                @click="onItemClick(it)"
+              >
+                <span class="inline-flex items-center gap-2">
+                  <UIcon
+                    v-if="it.icon"
+                    :name="it.icon"
+                  />
+                  <span>{{ it.label }}</span>
+                </span>
+              </button>
+            </div>
+          </template>
+        </nav>
+      </div>
+
+      <!-- Main Content -->
+      <div
+        :class="orientation === 'vertical' ? 'flex-1 min-h-0 overflow-hidden' : 'flex-1 min-h-0 overflow-hidden'"
+      >
+        <slot />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { useComponentRouter } from "#imports";
+const props = defineProps({
+  orientation: { type: String, required: false, default: "horizontal" },
+  items: { type: Array, required: false },
+  activeMatch: { type: String, required: false, default: "prefix" }
+});
+const router = useComponentRouter();
+function onItemClick(it) {
+  if (it.path) {
+    router.push(it.path);
+  }
+}
+function isActive(it) {
+  if (!it.path) return false;
+  const current = router.route?.value?.path || "";
+  if (props.activeMatch === "prefix") return isPrefixActive(current, it.path);
+  return current === it.path;
+}
+function isPrefixActive(current, base) {
+  if (base === "/") return current === "/";
+  if (current === base) return true;
+  return current.startsWith(base.endsWith("/") ? base : base + "/");
+}
+</script>

package/dist/runtime/app/components/nhealth/component-shell.vue.d.ts

@@ -0,0 +1,24 @@
+import type { NavigationMenuItem } from '@nuxt/ui';
+type __VLS_Props = {
+    orientation?: 'horizontal' | 'vertical';
+    items?: (NavigationMenuItem & {
+        path?: string;
+    })[][];
+    activeMatch?: 'exact' | 'prefix';
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    orientation: "horizontal" | "vertical";
+    activeMatch: "exact" | "prefix";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/app/composables/useAnalyzedFlows.d.ts

@@ -0,0 +1,14 @@
+import type { AnalyzedFlows } from '#build/analyzed-flows';
+/**
+ * Get pre-analyzed flows with execution levels and dependencies.
+ * Flows are analyzed at build time for optimal performance.
+ *
+ * This returns a reactive ref that will automatically trigger re-renders
+ * when flows are updated during development.
+ */
+export declare function useAnalyzedFlows(): any;
+/**
+ * Get the raw analyzed flows array directly.
+ * Use this when you don't need reactivity.
+ */
+export declare function getAnalyzedFlows(): AnalyzedFlows;

package/dist/runtime/app/composables/useAnalyzedFlows.js

@@ -0,0 +1,7 @@
+import { analyzedFlows } from "#build/analyzed-flows";
+export function useAnalyzedFlows() {
+  return readonly(ref(analyzedFlows));
+}
+export function getAnalyzedFlows() {
+  return analyzedFlows;
+}

package/dist/runtime/app/composables/useComponentRouter.d.ts

@@ -0,0 +1,38 @@
+import { shallowRef } from '#imports';
+export type ComponentRouteRecord = {
+    path: string;
+    component: any;
+    name?: string;
+};
+export type ComponentRouterMode = 'query' | 'hash' | 'memory';
+export interface UseComponentRouterOptions {
+    routes: ComponentRouteRecord[] | Record<string, any>;
+    base?: string;
+    mode?: ComponentRouterMode;
+    initial?: string;
+    provideKey?: string;
+    debug?: boolean;
+}
+type RouterContext = {
+    route: ReturnType<typeof shallowRef<{
+        path: string;
+        params: Record<string, string>;
+        query: Record<string, any>;
+    }>>;
+    push: (path: string) => Promise<void>;
+    replace: (path: string) => Promise<void>;
+    makePath: (patternOrPath: string, params?: Record<string, any>) => string;
+    makeHref: (patternOrPath: string, params?: Record<string, any>) => string;
+    pushTo: (patternOrPath: string, params?: Record<string, any>) => Promise<void>;
+    replaceTo: (patternOrPath: string, params?: Record<string, any>) => Promise<void>;
+};
+export declare function useComponentRouter(): RouterContext & {
+    component?: any;
+};
+export declare function useComponentRouter(opts: UseComponentRouterOptions): RouterContext & {
+    component: any;
+};
+export default useComponentRouter;
+export declare function createComponentRoutes(glob: Record<string, () => Promise<any>>, options?: {
+    base?: string;
+}): ComponentRouteRecord[];