npm - @datamagik/cli - Versions diffs - 0.1.0 - Mend

@datamagik/cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (86) hide show

package/LICENSE +21 -0
package/assets/dm-script-globals.d.ts +181 -0
package/dist/api.d.ts +247 -0
package/dist/api.js +200 -0
package/dist/api.js.map +1 -0
package/dist/commands/add.d.ts +28 -0
package/dist/commands/add.js +260 -0
package/dist/commands/add.js.map +1 -0
package/dist/commands/dev.d.ts +25 -0
package/dist/commands/dev.js +113 -0
package/dist/commands/dev.js.map +1 -0
package/dist/commands/init.d.ts +23 -0
package/dist/commands/init.js +136 -0
package/dist/commands/init.js.map +1 -0
package/dist/commands/login.d.ts +16 -0
package/dist/commands/login.js +42 -0
package/dist/commands/login.js.map +1 -0
package/dist/commands/publish.d.ts +23 -0
package/dist/commands/publish.js +113 -0
package/dist/commands/publish.js.map +1 -0
package/dist/commands/script.d.ts +69 -0
package/dist/commands/script.js +289 -0
package/dist/commands/script.js.map +1 -0
package/dist/commands/sql.d.ts +28 -0
package/dist/commands/sql.js +124 -0
package/dist/commands/sql.js.map +1 -0
package/dist/commands/typegen.d.ts +13 -0
package/dist/commands/typegen.js +50 -0
package/dist/commands/typegen.js.map +1 -0
package/dist/config.d.ts +45 -0
package/dist/config.js +118 -0
package/dist/config.js.map +1 -0
package/dist/credentials.d.ts +17 -0
package/dist/credentials.js +49 -0
package/dist/credentials.js.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +268 -0
package/dist/index.js.map +1 -0
package/dist/scriptfile.d.ts +10 -0
package/dist/scriptfile.js +91 -0
package/dist/scriptfile.js.map +1 -0
package/dist/sqlfile.d.ts +9 -0
package/dist/sqlfile.js +75 -0
package/dist/sqlfile.js.map +1 -0
package/dist/typegen/emit.d.ts +22 -0
package/dist/typegen/emit.js +255 -0
package/dist/typegen/emit.js.map +1 -0
package/dist/typegen/meta.d.ts +84 -0
package/dist/typegen/meta.js +209 -0
package/dist/typegen/meta.js.map +1 -0
package/package.json +35 -0
package/templates/showcase/README.md +55 -0
package/templates/showcase/_gitignore +4 -0
package/templates/showcase/dm.config.json +16 -0
package/templates/showcase/env.d.ts +7 -0
package/templates/showcase/index.html +12 -0
package/templates/showcase/package.json +25 -0
package/templates/showcase/src/App.vue +67 -0
package/templates/showcase/src/assets/datamagik-logo.png +0 -0
package/templates/showcase/src/components/ShowcasePanel.vue +47 -0
package/templates/showcase/src/components/panels/ContextPanel.vue +35 -0
package/templates/showcase/src/components/panels/NavigatePanel.vue +38 -0
package/templates/showcase/src/components/panels/OutputPanel.vue +50 -0
package/templates/showcase/src/components/panels/PrintPanel.vue +68 -0
package/templates/showcase/src/components/panels/QueryPanel.vue +52 -0
package/templates/showcase/src/components/panels/ScriptPanel.vue +55 -0
package/templates/showcase/src/components/panels/SerialPanel.vue +64 -0
package/templates/showcase/src/dm-script-types.d.ts +13 -0
package/templates/showcase/src/dm.generated.ts +65 -0
package/templates/showcase/src/format.ts +13 -0
package/templates/showcase/src/main.ts +5 -0
package/templates/showcase/src/style.css +134 -0
package/templates/showcase/tsconfig.json +17 -0
package/templates/showcase/vite.config.ts +9 -0
package/templates/simple/README.md +37 -0
package/templates/simple/_gitignore +4 -0
package/templates/simple/dm.config.json +10 -0
package/templates/simple/env.d.ts +7 -0
package/templates/simple/index.html +12 -0
package/templates/simple/package.json +25 -0
package/templates/simple/src/App.vue +71 -0
package/templates/simple/src/dm.generated.ts +32 -0
package/templates/simple/src/main.ts +5 -0
package/templates/simple/src/style.css +63 -0
package/templates/simple/tsconfig.json +17 -0
package/templates/simple/vite.config.ts +9 -0

package/templates/showcase/README.md ADDED Viewed

@@ -0,0 +1,55 @@
+# __APP_NAME__
+A platform-styled DataMagik SPA **showcase** (Vue 3 + Vite + `@datamagik/app-sdk`)
+with a working example of every SDK area:
+| Panel | SDK |
+|---|---|
+| Context | `dm.init()`, `dm.context` |
+| Data query | `dm.data.query(alias, opts)` |
+| Scripts | `dm.scripts.run(alias, inputs)` |
+| Serial numbers | `dm.serials.preview / generate` |
+| Printing | `dm.printers.list`, `dm.print.submit` |
+| Navigation | `dm.navigate(target)` |
+| Output events | `dm.emitOutput`, `dm.on('app-output')` |
+## Get started
+```bash
+npm install
+# set "appId" in dm.config.json to your application id (App Studio header)
+npx dm login --url https://staging.data-magik.com   # or https://data-magik.com
+npx dm dev            # run it now — uses the bundled demo types
+```
+## Placeholder resources
+The data/script/serial/print panels are declared against **placeholder** ids, so
+they show a “wire it up” hint until you connect real resources. Add your own:
+```bash
+npx dm add               # interactive: pick a type, search, name an alias
+npx dm add lookup_table  # or jump straight to a type
+# remove the unused placeholder entries from dm.config.json, then:
+npx dm typegen           # refresh the typed surface (src/dm.generated.ts)
+```
+> `dm typegen` fetches every resource declared in dm.config.json, so it errors
+> on the demo placeholder ids until you replace them with real ones. `dm dev`
+> tolerates this (it falls back to the bundled types), so develop with `dm dev`.
+`dm add` covers lookup tables, ODBC queries, scripts, serial series, and printers.
+## Ship it
+```bash
+npx dm publish --message "first version"   # builds and goes live immediately
+```
+## Structure
+- `dm.config.json` — app id + declared resources (commit it).
+- `src/dm.generated.ts` — typed alias surface, regenerated by `dm typegen` (commit it).
+- `src/dm-script-types.d.ts` — type your scripts' inputs/outputs here.
+- `src/components/panels/` — one component per SDK area; copy what you need.
+- `src/components/ShowcasePanel.vue` — the presentational card shell.

package/templates/showcase/_gitignore ADDED Viewed

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.local
+.DS_Store

package/templates/showcase/dm.config.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "appId": __APP_ID__,
+  "entry": "index.html",
+  "sources": [
+    { "sourceId": 1, "type": "lookup_table", "alias": "parts" },
+    { "sourceId": 2, "type": "odbc_query", "alias": "openOrders" },
+    { "sourceId": 3, "type": "script", "alias": "postReceipt" }
+  ],
+  "serialSeries": [
+    { "seriesId": 1, "alias": "lotSerial" }
+  ],
+  "printers": [
+    { "printerId": 1, "alias": "line1Zebra" }
+  ],
+  "appContract": { "inputs": [], "outputs": [], "events": [] }
+}

package/templates/showcase/env.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
+  export default component;
+}

package/templates/showcase/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__APP_NAME__ — DataMagik</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/showcase/package.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "name": "__PKG_NAME__",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "dm dev",
+    "build": "vue-tsc --noEmit -p tsconfig.json && vite build",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "preview": "vite preview",
+    "typegen": "dm typegen",
+    "deploy": "dm publish"
+  },
+  "dependencies": {
+    "@datamagik/app-sdk": "^0.1.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@datamagik/cli": "^0.1.0",
+    "@vitejs/plugin-vue": "^5.2.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.3.5",
+    "vue-tsc": "^2.2.0"
+  }
+}

package/templates/showcase/src/App.vue ADDED Viewed

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+import type { DmContext } from '@datamagik/app-sdk';
+import { dm } from './dm.generated';
+import { fmtErr } from './format';
+import logoUrl from './assets/datamagik-logo.png';
+import ContextPanel from './components/panels/ContextPanel.vue';
+import QueryPanel from './components/panels/QueryPanel.vue';
+import ScriptPanel from './components/panels/ScriptPanel.vue';
+import SerialPanel from './components/panels/SerialPanel.vue';
+import PrintPanel from './components/panels/PrintPanel.vue';
+import NavigatePanel from './components/panels/NavigatePanel.vue';
+import OutputPanel from './components/panels/OutputPanel.vue';
+const status = ref<'connecting' | 'ok' | 'error'>('connecting');
+const ctx = ref<DmContext | null>(null);
+const fatal = ref('');
+const ready = computed(() => status.value === 'ok');
+onMounted(async () => {
+  try {
+    ctx.value = await dm.init();
+    status.value = 'ok';
+  } catch (e) {
+    status.value = 'error';
+    fatal.value = fmtErr(e);
+  }
+});
+</script>
+<template>
+  <div class="shell">
+    <header class="app-header">
+      <img class="logo" :src="logoUrl" alt="DataMagik" />
+      <div class="titles">
+        <h1>{{ ctx?.appName || '__APP_NAME__' }}</h1>
+        <p>App SDK showcase — a working example of every platform capability</p>
+      </div>
+      <span class="status">
+        <span class="dot" :class="{ ok: status === 'ok', err: status === 'error' }"></span>
+        {{ status === 'ok' ? 'Connected' : status === 'error' ? 'Disconnected' : 'Connecting…' }}
+      </span>
+    </header>
+    <div v-if="status === 'error'" class="notice">Could not connect: {{ fatal }}</div>
+    <div class="notice">
+      This starter declares <strong>placeholder</strong> resource ids, so the data panels show a
+      “wire it up” hint until you connect real resources. Run <code>dm add</code>, then
+      <code>dm typegen</code>.
+    </div>
+    <div class="grid">
+      <ContextPanel :ctx="ctx" />
+      <QueryPanel :ready="ready" />
+      <ScriptPanel :ready="ready" />
+      <SerialPanel :ready="ready" />
+      <PrintPanel :ready="ready" />
+      <NavigatePanel :ready="ready" />
+      <OutputPanel :ready="ready" />
+    </div>
+    <p class="footer">
+      Built with
+      <a href="https://www.npmjs.com/package/@datamagik/app-sdk" target="_blank" rel="noopener">@datamagik/app-sdk</a>
+    </p>
+  </div>
+</template>

package/templates/showcase/src/assets/datamagik-logo.png ADDED Viewed

Binary file

package/templates/showcase/src/components/ShowcasePanel.vue ADDED Viewed

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+const props = defineProps<{
+  title: string;
+  description: string;
+  code: string;
+  icon: string;
+}>();
+// Inline SVG inner markup keyed by name — keeps the app self-contained (no
+// icon-font CDN, which a sandboxed iframe / offline plant floor may block).
+const ICONS: Record<string, string> = {
+  link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>',
+  database: '<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>',
+  code: '<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>',
+  hash: '<line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/>',
+  printer: '<polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/>',
+  compass: '<circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/>',
+  broadcast: '<circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 0 1 0 8.49M7.76 16.24a6 6 0 0 1 0-8.49M19.07 4.93a10 10 0 0 1 0 14.14M4.93 19.07a10 10 0 0 1 0-14.14"/>',
+};
+const iconSvg = computed(() => ICONS[props.icon] ?? ICONS['link']);
+</script>
+<template>
+  <section class="panel">
+    <div class="panel-head">
+      <span class="panel-icon">
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          v-html="iconSvg"
+        ></svg>
+      </span>
+      <h2>{{ title }}</h2>
+    </div>
+    <p class="desc">{{ description }}</p>
+    <pre class="code">{{ code }}</pre>
+    <div v-if="$slots.controls" class="controls"><slot name="controls" /></div>
+    <slot name="result" />
+  </section>
+</template>

package/templates/showcase/src/components/panels/ContextPanel.vue ADDED Viewed

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { DmContext } from '@datamagik/app-sdk';
+import ShowcasePanel from '../ShowcasePanel.vue';
+defineProps<{ ctx: DmContext | null }>();
+const code = `const ctx = await dm.init();
+// ctx.appName, ctx.surface,
+// ctx.user, ctx.company, ctx.params`;
+</script>
+<template>
+  <ShowcasePanel
+    icon="link"
+    title="Context"
+    description="dm.init() resolves with the app context: who, where, and which screen params the host injected."
+    :code="code"
+  >
+    <template #result>
+      <dl v-if="ctx" class="kv">
+        <dt>App</dt>
+        <dd>{{ ctx.appName }} (v{{ ctx.version }})</dd>
+        <dt>Surface</dt>
+        <dd>{{ ctx.surface }}</dd>
+        <dt>User</dt>
+        <dd>{{ ctx.user.name }}</dd>
+        <dt>Company</dt>
+        <dd>{{ ctx.company.name }}</dd>
+        <dt>Params</dt>
+        <dd>{{ Object.keys(ctx.params).length ? JSON.stringify(ctx.params) : '—' }}</dd>
+      </dl>
+      <div v-else class="result hint">Connecting to the platform…</div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/NavigatePanel.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+defineProps<{ ready: boolean }>();
+const code = `dm.navigate({
+  appId: 12,
+  params: { order: '42' }
+});`;
+const appId = ref(12);
+const value = ref('');
+function go(): void {
+  // Fire-and-forget: the host shell handles the navigation request.
+  dm.navigate({ appId: Number(appId.value), params: { order: '42' } });
+  value.value = `Requested navigation to app #${appId.value} (handled by the host shell).`;
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="compass"
+    title="Navigation"
+    description="Ask the host shell to open another app. Fire-and-forget — the platform performs the navigation."
+    :code="code"
+  >
+    <template #controls>
+      <input class="text" v-model.number="appId" type="number" aria-label="Target app id" style="max-width: 6rem" />
+      <button class="btn" :disabled="!ready" @click="go">Navigate</button>
+    </template>
+    <template #result>
+      <div v-if="value" class="result">{{ value }}</div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/OutputPanel.vue ADDED Viewed

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+import type { AppOutput } from '@datamagik/app-sdk';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+import { pretty } from '../../format';
+defineProps<{ ready: boolean }>();
+const code = `dm.emitOutput('completed', payload);
+dm.on('app-output', (msg) => {
+  // react to other apps' output
+});`;
+const log = ref<string[]>([]);
+let off: (() => void) | undefined;
+onMounted(() => {
+  // Listen for output events broadcast by the host / other apps.
+  off = dm.on('app-output', (msg: AppOutput) => {
+    log.value = [`◀ ${msg.eventName}: ${pretty(msg.output)}`, ...log.value].slice(0, 5);
+  });
+});
+onUnmounted(() => off?.());
+function emit(): void {
+  dm.emitOutput('completed', { at: new Date().toISOString(), ok: true });
+  log.value = ['▶ emitted "completed"', ...log.value].slice(0, 5);
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="broadcast"
+    title="Output events"
+    description="Emit results to the host (and other apps), and subscribe to app-output events."
+    :code="code"
+  >
+    <template #controls>
+      <button class="btn" :disabled="!ready" @click="emit">Emit "completed"</button>
+    </template>
+    <template #result>
+      <ul v-if="log.length" class="rows">
+        <li v-for="(line, i) in log" :key="i">{{ line }}</li>
+      </ul>
+      <div v-else class="result hint">Emit an event, or wait for one from the host.</div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/PrintPanel.vue ADDED Viewed

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+import { fmtErr } from '../../format';
+defineProps<{ ready: boolean }>();
+const code = `await dm.printers.list();
+await dm.print.submit('line1Zebra', {
+  format: 'zpl', data: '^XA…^XZ'
+});`;
+const busy = ref(false);
+const value = ref('');
+const error = ref('');
+async function list(): Promise<void> {
+  await act(async () => {
+    const printers = await dm.printers.list();
+    value.value = printers.length ? printers.map((p) => `• ${p.name} (${p.type})`).join('\n') : 'No printers configured.';
+  });
+}
+async function submit(): Promise<void> {
+  await act(async () => {
+    const { jobId } = await dm.print.submit('line1Zebra', {
+      format: 'zpl',
+      data: '^XA^FO50,50^ADN,36,20^FDDataMagik^FS^XZ',
+    });
+    value.value = `Print job ${jobId} queued.`;
+  });
+}
+async function act(fn: () => Promise<void>): Promise<void> {
+  busy.value = true;
+  error.value = '';
+  value.value = '';
+  try {
+    await fn();
+  } catch (e) {
+    error.value = fmtErr(e);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="printer"
+    title="Printing"
+    description="List the company's printers and submit a label/document job to a declared printer."
+    :code="code"
+  >
+    <template #controls>
+      <button class="btn secondary" :disabled="!ready || busy" @click="list">List printers</button>
+      <button class="btn" :disabled="!ready || busy" @click="submit">Submit ZPL</button>
+    </template>
+    <template #result>
+      <div v-if="value" class="result">{{ value }}</div>
+      <div v-else-if="error" class="result hint">
+        {{ error }}
+        <br />Wire a real printer: <code>dm add printer</code> → <code>dm typegen</code>.
+      </div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/QueryPanel.vue ADDED Viewed

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+import { fmtErr } from '../../format';
+defineProps<{ ready: boolean }>();
+const code = `const { rows } = await dm.data.query(
+  'parts', { pageSize: 5 }
+);`;
+const busy = ref(false);
+const rows = ref<Record<string, unknown>[]>([]);
+const error = ref('');
+async function run(): Promise<void> {
+  busy.value = true;
+  error.value = '';
+  rows.value = [];
+  try {
+    const result = await dm.data.query('parts', { pageSize: 5 });
+    rows.value = result.rows;
+  } catch (e) {
+    error.value = fmtErr(e);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="database"
+    title="Data query"
+    description="Query a declared lookup table or ODBC query. Rows are typed from dm.generated.ts."
+    :code="code"
+  >
+    <template #controls>
+      <button class="btn" :disabled="!ready || busy" @click="run">{{ busy ? 'Querying…' : 'Run query' }}</button>
+    </template>
+    <template #result>
+      <ul v-if="rows.length" class="rows">
+        <li v-for="(row, i) in rows" :key="i">{{ row.display_text ?? JSON.stringify(row) }}</li>
+      </ul>
+      <div v-else-if="error" class="result hint">
+        {{ error }}
+        <br />Wire a real lookup table: <code>dm add lookup_table</code> → <code>dm typegen</code>.
+      </div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/ScriptPanel.vue ADDED Viewed

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+import { fmtErr, pretty } from '../../format';
+defineProps<{ ready: boolean }>();
+const code = `const out = await dm.scripts.run(
+  'postReceipt',
+  { poNumber, quantity }
+);`;
+const poNumber = ref('PO-1001');
+const quantity = ref(5);
+const busy = ref(false);
+const output = ref('');
+const error = ref('');
+async function run(): Promise<void> {
+  busy.value = true;
+  error.value = '';
+  output.value = '';
+  try {
+    const out = await dm.scripts.run('postReceipt', { poNumber: poNumber.value, quantity: Number(quantity.value) });
+    output.value = pretty(out);
+  } catch (e) {
+    error.value = fmtErr(e);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="code"
+    title="Scripts"
+    description="Run a server-side script. IO is typed via the DmScriptTypes augmentation (see src/dm-script-types.d.ts)."
+    :code="code"
+  >
+    <template #controls>
+      <input class="text" v-model="poNumber" aria-label="PO number" placeholder="PO number" />
+      <input class="text" v-model.number="quantity" type="number" aria-label="Quantity" style="max-width: 5rem" />
+      <button class="btn" :disabled="!ready || busy" @click="run">{{ busy ? 'Running…' : 'Run script' }}</button>
+    </template>
+    <template #result>
+      <div v-if="output" class="result">{{ output }}</div>
+      <div v-else-if="error" class="result hint">
+        {{ error }}
+        <br />Wire a real script: <code>dm add script</code> → <code>dm typegen</code>.
+      </div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/components/panels/SerialPanel.vue ADDED Viewed

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import ShowcasePanel from '../ShowcasePanel.vue';
+import { dm } from '../../dm.generated';
+import { fmtErr } from '../../format';
+defineProps<{ ready: boolean }>();
+const code = `await dm.serials.preview('lotSerial');
+await dm.serials.generate(
+  'lotSerial', { PART: 'P-100' }
+);`;
+const busy = ref(false);
+const value = ref('');
+const error = ref('');
+async function preview(): Promise<void> {
+  await act(async () => {
+    value.value = 'preview: ' + (await dm.serials.preview('lotSerial'));
+  });
+}
+async function generate(): Promise<void> {
+  await act(async () => {
+    const rec = await dm.serials.generate('lotSerial', { PART: 'P-100' });
+    value.value = 'generated: ' + rec.serialNumber;
+  });
+}
+async function act(fn: () => Promise<void>): Promise<void> {
+  busy.value = true;
+  error.value = '';
+  value.value = '';
+  try {
+    await fn();
+  } catch (e) {
+    error.value = fmtErr(e);
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <ShowcasePanel
+    icon="hash"
+    title="Serial numbers"
+    description="Preview or generate traceability serials. The context is typed from the series' schema."
+    :code="code"
+  >
+    <template #controls>
+      <button class="btn secondary" :disabled="!ready || busy" @click="preview">Preview</button>
+      <button class="btn" :disabled="!ready || busy" @click="generate">Generate</button>
+    </template>
+    <template #result>
+      <div v-if="value" class="result">{{ value }}</div>
+      <div v-else-if="error" class="result hint">
+        {{ error }}
+        <br />Wire a real series: <code>dm add serial_series</code> → <code>dm typegen</code>.
+      </div>
+    </template>
+  </ShowcasePanel>
+</template>

package/templates/showcase/src/dm-script-types.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+// Type your scripts by augmenting `DmScriptTypes` (declaration merging). The
+// platform stores no script IO schema, so without this a script's inputs/output
+// are `unknown`. Add one block per script alias declared in dm.config.json.
+import '@datamagik/app-sdk';
+declare module '@datamagik/app-sdk' {
+  interface DmScriptTypes {
+    postReceipt: {
+      inputs: { poNumber: string; quantity: number };
+      output: { ok: boolean; receiptId: number };
+    };
+  }
+}