create-aiaui-module 0.0.0-stage → 0.1.1-TEST

package/templates/JobInformation/resources/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "aiaui-job-information-template",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "node build.mjs",
+    "dev": "vite build --watch"
+  },
+  "dependencies": { "vue": "^3.5.0" },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0"
+  }
+}

package/templates/JobInformation/resources/src/bus.ts

@@ -0,0 +1,38 @@
+import type { ModuleBus, ModuleBusListener } from "./contract";
+
+/**
+ * Create a per-mount communication bus.
+ *
+ * Not a singleton: `index.ts` creates one bus per `mount`, so it dies with
+ * unmount and is re-born on the next mount of the same module (for example
+ * when the user switches Instance in the UI).
+ */
+export function createBus(): ModuleBus {
+  const listeners = new Map<string, Set<ModuleBusListener>>();
+  const handles = new Map<string, object>();
+
+  return {
+    emit(event, payload) {
+      for (const listener of [...(listeners.get(event) ?? [])]) {
+        listener(payload);
+      }
+    },
+    on(event, listener) {
+      const current = listeners.get(event) ?? new Set<ModuleBusListener>();
+      current.add(listener);
+      listeners.set(event, current);
+    },
+    off(event, listener) {
+      listeners.get(event)?.delete(listener);
+    },
+    expose(name, handle) {
+      handles.set(name, handle);
+    },
+    release(name) {
+      handles.delete(name);
+    },
+    peer(name) {
+      return handles.get(name);
+    },
+  };
+}

package/templates/JobInformation/resources/src/contract.ts

@@ -0,0 +1,74 @@
+import type { Component } from "vue";
+
+export type ModuleApi = {
+  call<T>(
+    method: string,
+    path: string,
+    options?: { query?: Record<string, unknown>; body?: unknown },
+  ): Promise<T>;
+};
+
+/** Bus listener signature. Payload is deliberately loose; type it at the use site. */
+export type ModuleBusListener = (payload?: any) => void;
+
+/**
+ * A tiny communication bus shared by every slot component of one mount.
+ *
+ * - `emit` / `on` / `off` — decoupled events between slots
+ * - `expose` / `peer` — imperative handles published by one slot and called by another
+ *
+ * The bus is created per `mount` by `index.ts`. It never crosses module or
+ * Instance boundaries: switching an Instance mounts a fresh bus.
+ */
+export type ModuleBus = {
+  emit(event: string, payload?: unknown): void;
+  on(event: string, listener: ModuleBusListener): void;
+  off(event: string, listener: ModuleBusListener): void;
+  expose<T extends object>(name: string, handle: T): void;
+  release(name: string): void;
+  peer<T extends object>(name: string): T | undefined;
+};
+
+export type ModuleContext = {
+  module: string;
+  instanceId: string;
+  api: ModuleApi;
+  signal: AbortSignal;
+  /** Sibling-slot communication; created per mount. See CUSTOMIZATION.md. */
+  bus: ModuleBus;
+  place: (spec: {
+    kind: "route" | "slot";
+    path?: string;
+    slot?: string;
+    label?: string;
+    order?: number;
+  }) => void;
+};
+
+/**
+ * What the host platform actually passes into `mount`. The module enriches
+ * it with `bus` before slot components ever see it; slots always receive the
+ * full `ModuleContext` (with `bus`).
+ */
+export type HostModuleContext = Omit<ModuleContext, "bus">;
+
+/**
+ * A replaceable UI box. Slot components receive `context` as their only prop,
+ * so a developer can swap any box while keeping access to the module API.
+ */
+export type SlotComponent = Component;
+
+export type SlotMap = Record<string, SlotComponent>;
+
+export type SlotCustomization = {
+  mode?: "slots";
+  slots?: SlotMap;
+};
+
+export type FullCustomization = {
+  mode: "full";
+  mount: (container: HTMLElement, context: ModuleContext) => void | Promise<void>;
+  unmount: () => void;
+};
+
+export type Customization = SlotCustomization | FullCustomization;

package/templates/JobInformation/resources/src/customization.ts

@@ -0,0 +1,25 @@
+import type { Customization } from "./contract";
+
+/**
+ * Developer customization entry point.
+ *
+ * Default (no change): keeps the built-in panel.
+ *
+ * Partial (replace individual boxes):
+ *   import MyHeader from "./custom/MyHeader.vue";
+ *   export const customization: Customization = {
+ *     mode: "slots",
+ *     slots: { header: MyHeader },
+ *   };
+ *
+ * Full (replace the entire module):
+ *   export const customization: Customization = {
+ *     mode: "full",
+ *     mount(container, context) { ... },
+ *     unmount() { ... },
+ *   };
+ */
+export const customization: Customization = {
+  mode: "slots",
+  slots: {},
+};

package/templates/JobInformation/resources/src/defaults/DefaultPanel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { Component } from "vue";
+import type { ModuleContext } from "../contract";
+
+const props = defineProps<{
+  context: ModuleContext;
+  slots: Record<string, Component>;
+  slotOrder: string[];
+}>();
+</script>
+
+<template>
+  <main class="aia-job-information">
+    <component
+      v-for="name in props.slotOrder"
+      v-if="props.slots[name]"
+      :key="name"
+      :is="props.slots[name]"
+      :context="props.context"
+    />
+  </main>
+</template>

package/templates/JobInformation/resources/src/defaults/Header.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { ModuleContext } from "../contract";
+
+defineProps<{ context: ModuleContext }>();
+</script>
+
+<template>
+  <section class="aiaji-slot aiaji-header">
+    <div class="aiaji-crumb">OB-260920-014 <span aria-hidden="true">&gt;</span> LOT-A3471</div>
+    <div class="aiaji-state">WaitingForStart</div>
+  </section>
+</template>

package/templates/JobInformation/resources/src/defaults/InputCarriers.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ModuleContext } from "../contract";
+
+defineProps<{ context: ModuleContext }>();
+</script>
+
+<template>
+  <section class="aiaji-slot aiaji-carriers aiaji-carriers-input">
+    <h3>INPUT CARRIER(S)</h3>
+    <ul>
+      <li>CR-01</li>
+      <li>CR-02</li>
+    </ul>
+  </section>
+</template>

package/templates/JobInformation/resources/src/defaults/OutputCarriers.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { ModuleContext } from "../contract";
+
+defineProps<{ context: ModuleContext }>();
+</script>
+
+<template>
+  <section class="aiaji-slot aiaji-carriers aiaji-carriers-output">
+    <h3>OUTPUT CARRIER(S)</h3>
+    <ul>
+      <li>—</li>
+    </ul>
+  </section>
+</template>

package/templates/JobInformation/resources/src/defaults/Recipe.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ModuleContext } from "../contract";
+
+defineProps<{ context: ModuleContext }>();
+</script>
+
+<template>
+  <section class="aiaji-slot aiaji-recipe">
+    <div class="aiaji-meta">
+      <span>WO1 WO2 WO3 W17</span>
+      <span>42.6 Pa / 620W</span>
+    </div>
+    <div class="aiaji-recipe-row">
+      <span class="aiaji-recipe-name">RCP-CU-ETCH-O7</span>
+      <button type="button">View all</button>
+    </div>
+  </section>
+</template>

package/templates/JobInformation/resources/src/defaults/Timeline.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ModuleContext } from "../contract";
+
+defineProps<{ context: ModuleContext }>();
+
+const steps = ["Waiting for Start", "Start", "Executing", "Finished"];
+</script>
+
+<template>
+  <section class="aiaji-slot aiaji-timeline">
+    <h3>Progress</h3>
+    <ol>
+      <li
+        v-for="(step, index) in steps"
+        :key="step"
+        :class="{ 'aiaji-active': index === 0 }"
+      >
+        {{ step }}
+      </li>
+    </ol>
+  </section>
+</template>

package/templates/JobInformation/resources/src/defaults/slots.ts

@@ -0,0 +1,16 @@
+import type { SlotMap } from "../contract";
+import Header from "./Header.vue";
+import InputCarriers from "./InputCarriers.vue";
+import OutputCarriers from "./OutputCarriers.vue";
+import Timeline from "./Timeline.vue";
+import Recipe from "./Recipe.vue";
+
+export const defaultSlots: SlotMap = {
+  header: Header,
+  inputCarriers: InputCarriers,
+  outputCarriers: OutputCarriers,
+  timeline: Timeline,
+  recipe: Recipe,
+};
+
+export const slotOrder = ["header", "inputCarriers", "outputCarriers", "timeline", "recipe"];

package/templates/JobInformation/resources/src/defaults/styles.css

@@ -0,0 +1,90 @@
+.aia-job-information {
+  display: grid;
+  gap: 16px;
+  padding: 20px;
+  color: var(--aia-text, #222);
+  font: inherit;
+}
+
+.aiaji-slot h3 {
+  margin: 0 0 8px;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+}
+
+.aiaji-slot button {
+  font: inherit;
+  cursor: pointer;
+}
+
+.aiaji-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-bottom: 1px solid var(--aia-border, #e5e7eb);
+  padding-bottom: 12px;
+}
+
+.aiaji-crumb {
+  font-weight: 600;
+}
+
+.aiaji-state {
+  border: 1px solid var(--aia-border, #e5e7eb);
+  border-radius: 999px;
+  padding: 4px 12px;
+  color: var(--aia-accent, #2563eb);
+}
+
+.aiaji-carriers {
+  border: 1px solid var(--aia-border, #e5e7eb);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.aiaji-carriers ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.aiaji-timeline ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.aiaji-timeline li {
+  border: 1px solid var(--aia-border, #e5e7eb);
+  border-radius: 999px;
+  padding: 6px 12px;
+}
+
+.aiaji-timeline li.aiaji-active {
+  border-color: var(--aia-accent, #2563eb);
+  color: var(--aia-accent, #2563eb);
+}
+
+.aiaji-recipe {
+  display: grid;
+  gap: 10px;
+  border: 1px solid var(--aia-border, #e5e7eb);
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.aiaji-meta,
+.aiaji-recipe-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.aiaji-recipe-name {
+  font-weight: 600;
+}

package/templates/JobInformation/resources/src/index.ts

@@ -0,0 +1,45 @@
+import { createApp, type App } from "vue";
+import DefaultPanel from "./defaults/DefaultPanel.vue";
+import { defaultSlots, slotOrder } from "./defaults/slots";
+import { customization } from "./customization";
+import { createBus } from "./bus";
+import type { HostModuleContext, ModuleContext } from "./contract";
+import defaultStyles from "./defaults/styles.css?inline";
+
+let app: App | null = null;
+let styleElement: HTMLStyleElement | null = null;
+
+function ensureStyles() {
+  if (styleElement) return;
+  styleElement = document.createElement("style");
+  styleElement.textContent = defaultStyles;
+  document.head.appendChild(styleElement);
+}
+
+export function mount(container: HTMLElement, context: HostModuleContext) {
+  context.place({ kind: "route", path: "/jobs", label: "Jobs", order: 20 });
+
+  // One bus per mount: every slot component of this mount (built-in, custom,
+  // or full-mode) shares it via `context.bus`, and it dies on unmount.
+  const moduleContext: ModuleContext = { ...context, bus: createBus() };
+
+  if (customization.mode === "full") {
+    return customization.mount(container, moduleContext);
+  }
+
+  ensureStyles();
+  const slots = { ...defaultSlots, ...(customization.slots ?? {}) };
+  app = createApp(DefaultPanel, { context: moduleContext, slots, slotOrder });
+  app.mount(container);
+}
+
+export function unmount() {
+  if (customization.mode === "full") {
+    customization.unmount();
+    return;
+  }
+  app?.unmount();
+  app = null;
+  styleElement?.remove();
+  styleElement = null;
+}

package/templates/JobInformation/resources/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/JobInformation/resources/vite.config.mjs

@@ -0,0 +1,27 @@
+import { writeFileSync } from "node:fs";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+const manifest = { entry: "modules.js", files: ["modules.js"] };
+
+// Write manifest on every emit, including `vite build --watch`, so running
+// `npm run dev` never leaves `dist/` without a valid manifest.json.
+function manifestPlugin() {
+  return {
+    name: "aiaui-module-manifest",
+    writeBundle() {
+      writeFileSync("dist/manifest.json", JSON.stringify(manifest, null, 2) + "\n");
+    },
+  };
+}
+
+export default defineConfig({
+  plugins: [vue(), manifestPlugin()],
+  // Browser builds must never reference Node's `process` global.
+  // Collapse Vue's process.env.NODE_ENV guards at build time.
+  define: { "process.env.NODE_ENV": JSON.stringify("production") },
+  build: {
+    emptyOutDir: true,
+    lib: { entry: "src/index.ts", formats: ["es"], fileName: "modules" },
+  },
+});