@construct-space/cli 1.5.1 → 1.6.2

package/README.md

@@ -23,6 +23,25 @@ construct check                # Type-check + lint
 construct clean                # Remove build artifacts
 ```
 
+### Built-in libraries
+
+Scaffolded spaces ship with the full Construct stack pre-wired — import freely, the host resolves them at runtime (never bundled):
+
+| Package | Purpose |
+|---------|---------|
+| `@construct-space/ui` | Vue 3 components — `Button`, `Card`, `Modal`, `Table`, `Badge`, `Avatar`, `ToggleGroup`, `ConfirmationModal`, ... |
+| `@construct-space/sdk` | Host composables — `useOrg`, `useOrgMembers`, `useToast`, `useAuth` |
+| `@construct-space/graph` | Multi-tenant data layer — `defineModel`, `useGraph`, scopes, access rules |
+| `lucide-vue-next` | Icon set |
+
+```ts
+import { Button, Card, Modal } from '@construct-space/ui'
+import { useOrg, useOrgMembers } from '@construct-space/sdk'
+import { defineModel, field, useGraph } from '@construct-space/graph'
+```
+
+The scaffolded `src/pages/index.vue` and `src/actions.ts` show the recommended patterns. Use `construct check` (typecheck + ESLint flat config) before commit.
+
 ### Graph (Data Models)
 
 ```bash

package/dist/index.js

@@ -5313,8 +5313,10 @@ async function scaffold(nameArg, options) {
     "safety.json.tmpl": join2(name, "agent", "hooks", "safety.json"),
     "build.yml.tmpl": join2(name, ".github", "workflows", "build.yml"),
     "tsconfig.json.tmpl": join2(name, "tsconfig.json"),
+    "eslint.config.js.tmpl": join2(name, "eslint.config.js"),
     "gitignore.tmpl": join2(name, ".gitignore"),
     "readme.md.tmpl": join2(name, "README.md"),
+    "construct.md.tmpl": join2(name, "CONSTRUCT.md"),
     "widgets/2x1.vue.tmpl": join2(name, "widgets", "summary", "2x1.vue"),
     "widgets/4x1.vue.tmpl": join2(name, "widgets", "summary", "4x1.vue"),
     "actions.ts.tmpl": join2(name, "src", "actions.ts")
@@ -7989,6 +7991,7 @@ function ora(options) {
 import { readFileSync as readFileSync2, writeFileSync as writeFileSync2, existsSync as existsSync3 } from "fs";
 import { join as join3 } from "path";
 var MANIFEST_FILE = "space.manifest.json";
+var HOST_API_VERSION = "0.5.0";
 var idRegex = /^[a-z][a-z0-9-]*$/;
 var versionRegex = /^\d+\.\d+\.\d+/;
 function validate2(m) {
@@ -8023,6 +8026,11 @@ function readRaw(dir) {
   const data = readFileSync2(path, "utf-8");
   return JSON.parse(data);
 }
+function write(dir, m) {
+  const path = join3(dir, MANIFEST_FILE);
+  writeFileSync2(path, JSON.stringify(m, null, 2) + `
+`);
+}
 function writeWithBuild(dir, raw, build) {
   raw.build = build;
   writeFileSync2(join3(dir, "manifest.json"), JSON.stringify(raw, null, 2) + `
@@ -8106,7 +8114,7 @@ function resolvePages(m, root, prefix) {
     if (existsSync4(legacyFullPath)) {
       let varName = "IndexPage";
       if (p.path) {
-        varName = capitalize(p.path.replace(/[\/:]/g, "-").replace(/-+/g, "-")) + "Page";
+        varName = capitalize(p.path.replace(/\[([^\]]+)\]/g, "$1").replace(/[\/:]/g, "-").replace(/-+/g, "-")) + "Page";
       }
       return { varName, importPath: prefix + legacyComponent, path: p.path };
     }
@@ -8240,35 +8248,174 @@ function bundleAgentDir(srcDir, distDir) {
 }
 
 // src/commands/build.ts
+function stripComments(source) {
+  let out = "";
+  let i = 0;
+  let quote = null;
+  let escaped = false;
+  while (i < source.length) {
+    const ch = source[i];
+    const next = source[i + 1];
+    if (quote) {
+      out += ch;
+      if (escaped) {
+        escaped = false;
+      } else if (ch === "\\") {
+        escaped = true;
+      } else if (ch === quote) {
+        quote = null;
+      }
+      i++;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") {
+      quote = ch;
+      out += ch;
+      i++;
+      continue;
+    }
+    if (ch === "/" && next === "/") {
+      while (i < source.length && source[i] !== `
+`) {
+        out += " ";
+        i++;
+      }
+      continue;
+    }
+    if (ch === "/" && next === "*") {
+      out += "  ";
+      i += 2;
+      while (i < source.length && !(source[i] === "*" && source[i + 1] === "/")) {
+        out += source[i] === `
+` ? `
+` : " ";
+        i++;
+      }
+      if (i < source.length) {
+        out += "  ";
+        i += 2;
+      }
+      continue;
+    }
+    out += ch;
+    i++;
+  }
+  return out;
+}
+function findMatchingBrace(source, openIndex) {
+  let depth = 0;
+  let quote = null;
+  let escaped = false;
+  for (let i = openIndex;i < source.length; i++) {
+    const ch = source[i];
+    if (quote) {
+      if (escaped)
+        escaped = false;
+      else if (ch === "\\")
+        escaped = true;
+      else if (ch === quote)
+        quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'" || ch === "`") {
+      quote = ch;
+      continue;
+    }
+    if (ch === "{")
+      depth++;
+    else if (ch === "}") {
+      depth--;
+      if (depth === 0)
+        return i;
+    }
+  }
+  return -1;
+}
+function objectLiteralAfter(source, start) {
+  const open = source.indexOf("{", start);
+  if (open < 0)
+    return null;
+  const close = findMatchingBrace(source, open);
+  if (close < 0)
+    return null;
+  return source.slice(open + 1, close);
+}
+function actionsObject(source) {
+  const stripped = stripComments(source);
+  const match = /export\s+const\s+actions\s*=/.exec(stripped);
+  if (!match)
+    return null;
+  return objectLiteralAfter(stripped, match.index + match[0].length);
+}
+function objectEntries(body) {
+  const entries = [];
+  let i = 0;
+  while (i < body.length) {
+    const match = /\s*,?\s*([A-Za-z_$][\w$]*)\s*:/.exec(body.slice(i));
+    if (!match)
+      break;
+    const name = match[1];
+    const valueStart = i + match.index + match[0].length;
+    const open = body.indexOf("{", valueStart);
+    if (open < 0)
+      break;
+    if (body.slice(valueStart, open).trim()) {
+      i = valueStart;
+      continue;
+    }
+    const close = findMatchingBrace(body, open);
+    if (close < 0)
+      break;
+    entries.push({ name, body: body.slice(open + 1, close) });
+    i = close + 1;
+  }
+  return entries;
+}
+function stringProperty(body, name) {
+  const match = new RegExp(`${name}\\s*:\\s*['"\`]([^'"\`]*)['"\`]`).exec(body);
+  return match?.[1];
+}
+function booleanProperty(body, name) {
+  const match = new RegExp(`${name}\\s*:\\s*(true|false)`).exec(body);
+  if (!match)
+    return;
+  return match[1] === "true";
+}
+function propertyObject(body, name) {
+  const match = new RegExp(`${name}\\s*:`).exec(body);
+  if (!match)
+    return null;
+  return objectLiteralAfter(body, match.index + match[0].length);
+}
 function extractActionMetadata(actionsPath) {
   try {
-    const source = readFileSync4(actionsPath, "utf-8");
+    const actionsBody = actionsObject(readFileSync4(actionsPath, "utf-8"));
+    if (!actionsBody)
+      return null;
     const result = {};
-    const actionPattern = /(\w+)\s*:\s*\{[^}]*description\s*:\s*['"`]([^'"`]+)['"`]/g;
-    let match;
-    while ((match = actionPattern.exec(source)) !== null) {
-      const actionId = match[1];
-      const description = match[2];
-      result[actionId] = { description };
-    }
-    for (const actionId of Object.keys(result)) {
-      const paramBlockPattern = new RegExp(`${actionId}\\s*:\\s*\\{[\\s\\S]*?params\\s*:\\s*\\{([\\s\\S]*?)\\}\\s*,?\\s*(?:run|\\})`);
-      const paramMatch = source.match(paramBlockPattern);
-      if (paramMatch?.[1]) {
+    for (const action of objectEntries(actionsBody)) {
+      const description = stringProperty(action.body, "description");
+      if (!description)
+        continue;
+      const metadata = { description };
+      const paramsBody = propertyObject(action.body, "params");
+      if (paramsBody) {
         const params = {};
-        const paramEntryPattern = /(\w+)\s*:\s*\{\s*type\s*:\s*['"`](\w+)['"`](?:\s*,\s*description\s*:\s*['"`]([^'"`]*)['"`])?(?:\s*,\s*required\s*:\s*(true|false))?\s*\}/g;
-        let pm;
-        while ((pm = paramEntryPattern.exec(paramMatch[1])) !== null) {
-          params[pm[1]] = {
-            type: pm[2],
-            ...pm[3] ? { description: pm[3] } : {},
-            ...pm[4] === "true" ? { required: true } : {}
+        for (const param of objectEntries(paramsBody)) {
+          const type = stringProperty(param.body, "type");
+          if (!type)
+            continue;
+          const required = booleanProperty(param.body, "required");
+          params[param.name] = {
+            type,
+            ...stringProperty(param.body, "description") ? { description: stringProperty(param.body, "description") } : {},
+            ...required === true ? { required: true } : {}
           };
         }
-        if (Object.keys(params).length > 0) {
-          result[actionId].params = params;
-        }
+        if (Object.keys(params).length > 0)
+          metadata.params = params;
       }
+      result[action.name] = metadata;
     }
     return Object.keys(result).length > 0 ? result : null;
   } catch {
@@ -8334,7 +8481,7 @@ async function build(options) {
   writeWithBuild(distDir, raw, {
     checksum,
     size: bundleData.length,
-    hostApiVersion: "0.2.0",
+    hostApiVersion: HOST_API_VERSION,
     builtAt: new Date().toISOString()
   });
   console.log(source_default.green(`Built ${m.name} v${m.version}`));
@@ -10016,7 +10163,7 @@ async function dev() {
     writeWithBuild(distDir, raw, {
       checksum,
       size: bundleData.length,
-      hostApiVersion: "0.2.0",
+      hostApiVersion: HOST_API_VERSION,
       builtAt: new Date().toISOString()
     });
     console.log(source_default.green(`Built \u2192 dist/ (${(bundleData.length / 1024).toFixed(1)} KB)`));
@@ -10316,6 +10463,22 @@ async function publish(options) {
 init_source();
 import { existsSync as existsSync12, readFileSync as readFileSync9 } from "fs";
 import { join as join15 } from "path";
+
+// src/lib/pagePaths.ts
+function pageComponentFromPath(path) {
+  const clean = path.replace(/^\/+|\/+$/g, "");
+  if (!clean)
+    return "pages/index.vue";
+  const segments = clean.split("/").map((segment) => {
+    if (segment.startsWith(":") && segment.length > 1) {
+      return `[${segment.slice(1)}]`;
+    }
+    return segment;
+  });
+  return `pages/${segments.join("/")}.vue`;
+}
+
+// src/commands/validate.ts
 function validate3() {
   const root = process.cwd();
   if (!exists(root)) {
@@ -10332,7 +10495,7 @@ function validate3() {
   }
   let warnings = 0;
   for (const page of m.pages) {
-    const component = page.component || (page.path === "" ? "pages/index.vue" : `pages/${page.path}.vue`);
+    const component = page.component || pageComponentFromPath(page.path);
     const fullPath = join15(root, "src", component);
     if (!existsSync12(fullPath)) {
       console.log(source_default.yellow(`  \u26A0 Page component not found: src/${component}`));
@@ -10383,7 +10546,7 @@ function check() {
   }
   let warnings = 0;
   for (const page of m.pages) {
-    const component = page.component || (page.path === "" ? "pages/index.vue" : `pages/${page.path}.vue`);
+    const component = page.component || pageComponentFromPath(page.path);
     if (!existsSync13(join16(root, "src", component))) {
       console.log(source_default.yellow(`  \u26A0 Page not found: src/${component}`));
       warnings++;
@@ -10946,6 +11109,33 @@ async function graphPush() {
     process.exit(1);
   }
 }
+function parseDefaultValue(raw) {
+  const value = raw.trim();
+  try {
+    return JSON.parse(value);
+  } catch {}
+  const quote = value[0];
+  if ((quote === "'" || quote === '"') && value.endsWith(quote)) {
+    return value.slice(1, -1).replace(/\\(['"\\bfnrt])/g, (_, ch) => {
+      switch (ch) {
+        case "b":
+          return "\b";
+        case "f":
+          return "\f";
+        case "n":
+          return `
+`;
+        case "r":
+          return "\r";
+        case "t":
+          return "\t";
+        default:
+          return ch;
+      }
+    });
+  }
+  return value;
+}
 function parseModelFile(content, fileName) {
   const modelMatch = content.match(/defineModel\s*\(\s*['"](\w+)['"]/);
   if (!modelMatch)
@@ -10973,11 +11163,7 @@ function parseModelFile(content, fileName) {
         field.validation = "url";
       const defaultMatch = modifiers.match(/\.default\((.+?)\)/);
       if (defaultMatch) {
-        try {
-          field.default = JSON.parse(defaultMatch[1]);
-        } catch {
-          field.default = defaultMatch[1];
-        }
+        field.default = parseDefaultValue(defaultMatch[1]);
       }
     }
     fields.push(field);
@@ -11159,10 +11345,41 @@ function parseModelFields(content, fileName) {
   }
   return { name: modelMatch[1], fields };
 }
+
+// src/commands/graph/fork.ts
+init_source();
+var spaceIDRegex = /^[a-z][a-z0-9-]*$/;
+function forkManifest(root, newSpaceID) {
+  const id = newSpaceID.trim();
+  if (!spaceIDRegex.test(id)) {
+    throw new Error("space id must be lowercase alphanumeric with hyphens, starting with a letter");
+  }
+  if (!exists(root)) {
+    throw new Error("No space.manifest.json found in current directory");
+  }
+  const m = read(root);
+  if (m.id === id) {
+    throw new Error(`space.manifest.json already uses id "${id}"`);
+  }
+  const oldSpaceID = m.id;
+  m.id = id;
+  write(root, m);
+  return { oldSpaceID, newSpaceID: id };
+}
+function graphFork(newSpaceID) {
+  try {
+    const result = forkManifest(process.cwd(), newSpaceID);
+    console.log(source_default.green(`Forked graph space id: ${result.oldSpaceID} -> ${result.newSpaceID}`));
+    console.log(source_default.dim("Run `construct graph push` to register the forked schema."));
+  } catch (err) {
+    console.error(source_default.red(err.message));
+    process.exit(1);
+  }
+}
 // package.json
 var package_default = {
   name: "@construct-space/cli",
-  version: "1.5.1",
+  version: "1.6.2",
   description: "Construct CLI \u2014 scaffold, build, develop, and publish spaces",
   type: "module",
   bin: {
@@ -11226,6 +11443,7 @@ var graph = program2.command("graph").description("Construct Graph \u2014 data m
 graph.command("init").description("Initialize Graph in a space project").action(() => graphInit());
 graph.command("generate <model> [fields...]").alias("g").description("Generate a data model").option("--access <rules>", "Access rules (e.g. read:member,create:member,update:owner,delete:admin)").action((model, fields, opts) => generate2(model, fields, opts));
 graph.command("push").description("Register models with the Graph service").action(async () => graphPush());
+graph.command("fork <new-space-id>").description("Rewrite this space manifest to a new graph space id").action((newSpaceID) => graphFork(newSpaceID));
 graph.command("migrate").description("Compare local models with server schema and apply changes").option("--apply", "Apply destructive changes (drop columns, alter constraints)").action(async (opts) => graphMigrate(opts));
 graph.command("spaces").alias("list").alias("ls").description("List spaces published by your org").option("--org <id>", "Override org id").option("--bundle <id>", "Filter to a single bundle").option("--json", "Output JSON").action(async (opts) => (await Promise.resolve().then(() => (init_spaces(), exports_spaces))).spacesList(opts));
 var bundles = graph.command("bundles").description("Manage space bundles (publisher grouping)");

package/dist/templates/space/actions.ts.tmpl

@@ -1,35 +1,26 @@
 /**
- * Space Actions — exposed to the AI agent via space_run_action
+ * Space Actions — exposed to the AI agent via space_run_action.
  *
- * Define actions here and they'll be automatically available as agent tools.
- * The agent calls: space_run_action(action: "action_id", payload: {...})
+ * Each action: { description, params, run }.
+ *  - `params` describe agent-callable inputs (type, description, required).
+ *  - `run` receives the payload and returns any JSON-serialisable value.
+ *
+ * Pair with @construct-space/graph for typed multi-tenant data:
+ *   import { useGraph } from '@construct-space/graph'
+ *   import { Item } from './models'
+ *   const items = useGraph(Item)
+ *
+ *   listItems: {
+ *     description: 'List items',
+ *     params: { limit: { type: 'number', required: false } },
+ *     run: async (p: any) => ({ items: await items.find({ limit: p.limit ?? 50 }) }),
+ *   }
  */
 
-// --- Graph SDK (data layer) ---
-// Uncomment after running `construct graph init` and defining models:
-//
-// import { useGraph } from '@construct-space/graph'
-// const graph = useGraph()
-//
-// Example action using Graph:
-// fetchItems: {
-//   description: 'Fetch items from the graph',
-//   params: {
-//     limit: { type: 'number', description: 'Max items to return', required: false },
-//   },
-//   run: async (p: any) => {
-//     const items = await graph.query('Item').limit(p.limit ?? 10).exec()
-//     return { items }
-//   },
-// },
-
 export const actions = {
-  // Example action:
-  // hello: {
-  //   description: 'Say hello',
-  //   params: {
-  //     name: { type: 'string', description: 'Name to greet', required: true },
-  //   },
-  //   run: (p: any) => ({ message: `Hello ${p.name}!` }),
-  // },
+  ping: {
+    description: 'Health check — returns pong with the space id.',
+    params: {},
+    run: () => ({ pong: true, space: '{{.ID}}' }),
+  },
 }

package/dist/templates/space/construct.md.tmpl

@@ -0,0 +1,260 @@
+---
+id: construct-stack
+name: Construct Stack Guide
+description: How to build and extend a Construct space — CLI, UI, SDK, Graph, manifest, agent actions
+trigger: construct|space|graph|ui|sdk|manifest|action
+category: skill
+tools: [read_file, list_dir, glob, grep, write_file, edit_file]
+---
+
+# Construct.md — agent guide for `{{.DisplayName}}`
+
+This file briefs an AI coding agent on the Construct stack so it can build, extend, and ship this space without external lookups.
+
+---
+
+## Stack at a glance
+
+| Layer | Package | Purpose |
+|-------|---------|---------|
+| UI | `@construct-space/ui` | Vue 3 component library |
+| Host | `@construct-space/sdk` | App composables (org, members, toast, auth) |
+| Data | `@construct-space/graph` | Multi-tenant typed data layer |
+| Icons | `lucide-vue-next` | Icon set |
+| Tooling | `@construct-space/cli` | Build / dev / publish |
+
+All four are **host-provided externals** — import normally, never bundle. Vite externalises them via `vite.config.ts`.
+
+---
+
+## Layout
+
+```
+{{.Name}}/
+  space.manifest.json     scope, pages, toolbar, agent, widgets, actions
+  src/
+    entry.ts              auto-generated; do not hand-edit
+    actions.ts            agent-callable actions (space_run_action)
+    pages/                filesystem routing (e.g. settings.vue → /settings)
+    components/           local Vue components
+    composables/          local composables (use* convention)
+    models/               graph models (defineModel)
+  agent/
+    config.md             agent system prompt, tool whitelist, max iterations
+    skills/               scoped skills loaded with the agent
+    hooks/safety.json     tool-call interception rules
+  widgets/                home-screen widgets (run inside Shadow DOM sandbox)
+```
+
+---
+
+## CLI
+
+```bash
+construct dev                  hot-reload dev (regenerates entry.ts on change)
+construct build                production build → dist/
+construct check                manifest + typecheck + lint
+construct install              install to active profile
+construct publish              publish to registry (requires auth)
+construct graph push           register models with graph backend
+construct graph install <id>   install a published space for current org
+```
+
+---
+
+## Manifest essentials
+
+```jsonc
+{
+  "id": "{{.ID}}",
+  "scope": "app | project | org",   // org = multi-tenant per organization
+  "minConstructVersion": "0.7.0",
+  "pages": [{ "path": "", "label": "Home", "default": true }],
+  "toolbar": [{ "id": "...", "icon": "...", "action": "createX" }],
+  "agent": "agent/config.md",
+  "skills": ["agent/skills/default.md"],
+  "actions": "src/actions.ts",
+  "widgets": [{ "id": "summary", "defaultSize": "4x1", "sizes": {...} }]
+}
+```
+
+`scope: 'org'` makes everything multi-tenant — graph schemas auto-partition per org. Use `useOrg()` to read current org context.
+
+---
+
+## `@construct-space/ui` — component cheatsheet
+
+All exported from the package root:
+
+**Layout**: `Card` (slots: header/accessory/default/footer/footer-end; variants: default/outline/muted; modifiers: hoverable/interactive), `SplitPane`, `ScrollArea`, `Separator`, `PanelSection`, `DashboardPanel`
+
+**Inputs**: `Input`, `Textarea`, `Select` (options: `{label, value}[]`), `MultiSelect`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `ColorPicker`, `FileInput`, `Slider`, `Autocomplete`, `FormField` (label/hint wrapper)
+
+**Display**: `Badge` (color: primary|neutral|success|warning|error|info; variant: solid|soft|subtle|outline), `Chip`, `Avatar` (`fallback` shows text — pass initials), `Empty`, `Skeleton`, `Progress`, `Tooltip`, `Kbd`, `Alert`, `Notification`/`Toast`
+
+**Actions**: `Button` (variant: solid|ghost|outline; color: primary|neutral|error|...; size: xs|sm|md|lg), `Dropdown`, `DropdownMenu`, `ContextMenu`, `Popover`, `ToggleGroup` (segmented control)
+
+**Overlays**: `Modal` (`v-model:open`, slots: header/body/footer), `Slideover`, `Drawer`, `ConfirmationModal` (`@confirm`, `@cancel`), `Pagination`
+
+**Data**: `Table` (`columns: TableColumn[]`, `rows`, `selectable`, `striped`, `stickyHeader`, slots: `cell-{key}`, `header-{key}`, `empty`), `Tree`, `Timeline`, `Tabs`, `Tab`, `Accordion`, `Calendar`, `Breadcrumbs`
+
+**Composables**: `useNotification`, `notify`, `useAuth`, `useTheme`, `useClipboard`, `useMediaQuery`, `useFormValidation`, `useKeyboard`/`useHotkey`, `useClickOutside`, `useEscapeKey`, `useLocalStorage`, `useAsync`, `useDebounce`/`useThrottle`, `useToggle`, `useSearch`, `useIntersectionObserver`
+
+### Component gotchas
+
+- **`Avatar` sizes**: only `sm | md | lg` (no `xs`).
+- **`Select`** doesn't accept `multiple` — render a chip-toggle list yourself for multi-select.
+- **`Table`** column `align` literals must be `as const` to typecheck (`align: 'right' as const`).
+- **`Table` rowKey** is a string field name on the row object, not a function.
+- **`Modal`** uses `v-model:open` (not `v-model`); slots: `header | body | footer | accessory`.
+- **`Card`** slots: `header | accessory | default | footer | footer-end`. Use `title`/`description` props for the header to get standard styling; put right-side actions in `accessory`.
+- **`ConfirmationModal`** emits `@confirm` and `@cancel` — wire both, otherwise dismissal does nothing.
+- **Settings pages**: never raw `<select>`/`<input>`/`<textarea>` — use `Select`, `Switch`, `Input`, `Textarea` with `FormField` labels. Persist with `localStorage` (key prefix per space).
+
+```vue
+<script setup lang="ts">
+import { Card, Button, Modal, Badge } from '@construct-space/ui'
+const open = ref(false)
+</script>
+<template>
+  <Card title="Hello" hoverable>
+    <Badge color="success" variant="subtle" label="Live" />
+    <template #footer-end>
+      <Button variant="solid" size="sm" @click="open = true">Open</Button>
+    </template>
+  </Card>
+  <Modal v-model:open="open" title="Demo">…</Modal>
+</template>
+```
+
+---
+
+## `@construct-space/sdk` — host composables
+
+```ts
+import { useOrg, useOrgMembers, useToast, useAuth } from '@construct-space/sdk'
+
+const { orgId, isOrg, org } = useOrg()           // current org context (reactive)
+const { members } = useOrgMembers()              // [{ user_id, name, email, role }, ...]
+const toast = useToast()                         // toast.success(...), toast.error(...)
+const { user, isAuthenticated, logout } = useAuth()
+```
+
+Use these for org-aware UX (assignee pickers, "shared with N" badges, avatars, member lookups).
+
+---
+
+## `@construct-space/graph` — data layer
+
+Define typed models, get a typed reactive client, multi-tenant by default.
+
+```ts
+// src/models/Task.ts
+import { defineModel, field, access } from '@construct-space/graph'
+
+export const Task = defineModel('task', {
+  title:       field.string().required(),
+  description: field.string(),
+  priority:    field.string(),
+  due_date:    field.date(),
+  position:    field.int(),
+  labels:      field.json(),
+  assignee_id: field.string().index(),
+}, {
+  scope: 'org',                          // partitions schema per organization
+  access: {
+    read:   access.authenticated(),
+    create: access.authenticated(),
+    update: access.authenticated(),
+    delete: access.owner(),
+  },
+})
+```
+
+```ts
+// src/composables/useTasks.ts
+import { useGraph } from '@construct-space/graph'
+import { Task } from '../models'
+
+const tasks = useGraph(Task)
+await tasks.find({ where: { priority: 'high' }, orderBy: { position: 'asc' }, limit: 50 })
+await tasks.create({ title: 'Ship', position: 0 })
+await tasks.update(id, { position: 1 })
+await tasks.remove(id)
+```
+
+**Field types**: `string`, `int`, `number`, `boolean`, `date`, `json`, `enum([...])`. Chain `.required()`, `.index()`, `.unique()`, `.default(v)`.
+
+**Access helpers**: `authenticated()`, `owner()`, `admin()`, `member()`. `member()` requires org context — use `authenticated()` for org-scoped models that allow any logged-in member.
+
+**Scopes**:
+- `app` — single shared schema (rare)
+- `org` — partitioned by organization (most product spaces)
+- `project` — partitioned by project (dev-tooling spaces)
+
+**Push models to backend after editing**: `construct graph push`.
+
+### Pitfalls
+
+- **`field.json()` columns** must receive a JSON-stringified value on write: `labels: JSON.stringify(arr)`. On read, parse back if it returns a string. Sending a JS array directly triggers `column is of type jsonb but expression is of type record`. Pattern:
+  ```ts
+  function parseLabels(raw: unknown): string[] {
+    if (Array.isArray(raw)) return raw as string[]
+    if (typeof raw === 'string' && raw.trim()) {
+      try { const v = JSON.parse(raw); return Array.isArray(v) ? v : [] } catch { return [] }
+    }
+    return []
+  }
+  ```
+- **Topological sort on push**: avoid `relation.belongsTo()` if push fails — use a `field.string()` foreign-key column instead and join manually in composables.
+- **Lazy provisioning**: first query for a new tenant auto-creates the schema; expect a one-time slower request.
+- **Schema ownership is sticky**: the first profile to `construct graph push` becomes the schema owner. Subsequent pushes from a different profile fail with "Ownership check failed". Bump the space `id` to fork, or push from the original owner profile.
+- **`access.member()` requires org context** — use `access.authenticated()` for org-scoped models that any logged-in member should be able to read/write. `member()` is for stricter membership checks.
+
+---
+
+## Actions (agent surface)
+
+`src/actions.ts` exports an `actions` object — each entry becomes an agent-callable tool via `space_run_action`.
+
+```ts
+export const actions = {
+  createTask: {
+    description: 'Create a task',
+    params: {
+      title: { type: 'string', required: true },
+      priority: { type: 'string', required: false },
+    },
+    run: async (p: any) => ({ task: await tasks.create(p) }),
+  },
+}
+```
+
+The agent (configured in `agent/config.md`) calls `space_list_actions` then `space_run_action`. Keep descriptions tight and specific — they're the only docstring the agent sees.
+
+---
+
+## Drag and drop (HTML5)
+
+Tauri intercepts native drag-drop by default. The Construct host sets `dragDropEnabled: false` so HTML5 events fire normally — use `draggable="true"`, `@dragstart`, `@dragover.prevent`, `@drop`. No extra deps required; reach for `vuedraggable` only if reordering needs auto-scroll/animation.
+
+---
+
+## Conventions
+
+- **Imports**: `@construct-space/*` packages always external. Local imports use relative paths (no `@/` alias unless you add one).
+- **Composables**: `use*` prefix, keep in `src/composables/`.
+- **Pages**: filename = route path. `index.vue` → `/`, `settings.vue` → `/settings`, `[id].vue` → param.
+- **Styling**: Tailwind utilities + CSS vars `--app-foreground`, `--app-background`, `--app-muted`, `--app-border`, `--app-accent`. Don't hard-code colors; the host themes via these variables.
+- **Comments**: explain *why*, not *what*. Skip TODOs in committed code.
+- **No emojis** in source unless the user requests them.
+
+---
+
+## Build pipeline reminder
+
+`construct build` writes:
+- `dist/space-{{.ID}}.iife.js` — the bundled space
+- `dist/manifest.json` — manifest + `build` block (checksum, size, **`hostApiVersion`**, builtAt)
+
+The runtime SpaceLoader compares `hostApiVersion` to its own; mismatches log a warning. Bump the CLI to keep them aligned.

package/dist/templates/space/eslint.config.js.tmpl

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+
+export default [
+  js.configs.recommended,
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        console: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        globalThis: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        history: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+    },
+  },
+  {
+    ignores: ['dist/', 'node_modules/', '*.d.ts'],
+  },
+]

package/dist/templates/space/index.vue.tmpl

@@ -2,19 +2,34 @@
 /**
  * {{.DisplayName}} — Home page
  *
- * Host-provided packages (vue, pinia, @vueuse/core, @construct/sdk, etc.)
- * are available as imports — they resolve to the host at runtime.
+ * Built-in libraries available at runtime (do not bundle):
+ *   @construct-space/ui     — Vue 3 components (Button, Card, Modal, Table, Badge, ...)
+ *   @construct-space/sdk    — useOrg, useOrgMembers, useToast, useAuth
+ *   @construct-space/graph  — defineModel, useGraph (multi-tenant data layer)
+ *   lucide-vue-next         — icons
  */
 import { ref } from 'vue'
+import { Button, Card, Empty } from '@construct-space/ui'
+import { Sparkles } from 'lucide-vue-next'
 
 const greeting = ref('Your space is ready. Start building!')
 </script>
 
 <template>
-  <div class="h-full flex items-center justify-center">
-    <div class="text-center">
-      <h1 class="text-2xl font-bold text-[var(--app-foreground)] mb-2">{{.DisplayName}}</h1>
-      <p class="text-sm text-[var(--app-muted)]">{{ greeting }}</p>
-    </div>
+  <div class="h-full flex items-center justify-center p-6">
+    <Card variant="default" class="max-w-md w-full text-center">
+      <template #header>
+        <div class="flex items-center justify-center gap-2 w-full">
+          <Sparkles class="size-5 text-[var(--app-accent)]" />
+          <h1 class="text-lg font-semibold text-[var(--app-foreground)]">{{.DisplayName}}</h1>
+        </div>
+      </template>
+
+      <Empty :description="greeting" size="sm" />
+
+      <template #footer-end>
+        <Button variant="solid" size="sm" label="Get Started" />
+      </template>
+    </Card>
   </div>
 </template>

package/dist/templates/space/package.json.tmpl

@@ -8,6 +8,7 @@
     "build": "construct build",
     "dev": "construct dev",
     "check": "construct check",
+    "lint": "eslint .",
     "validate": "construct validate"
   },
   "peerDependencies": {
@@ -18,10 +19,18 @@
   "devDependencies": {
     "@construct-space/cli": "latest",
     "@construct-space/sdk": "latest",
+    "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^5.2.3",
+    "eslint": "^10.2.1",
+    "eslint-plugin-vue": "^10.0.0",
     "lucide-vue-next": "^1.0.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.0.0",
     "vite": "^6.3.5",
     "vue-tsc": "^3.2.5"
+  },
+  "dependencies": {
+    "@construct-space/graph": "^0.5.0",
+    "@construct-space/ui": "^0.5.2"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@construct-space/cli",
-  "version": "1.5.1",
+  "version": "1.6.2",
   "description": "Construct CLI — scaffold, build, develop, and publish spaces",
   "type": "module",
   "bin": {

package/templates/space/actions.ts.tmpl

@@ -1,35 +1,26 @@
 /**
- * Space Actions — exposed to the AI agent via space_run_action
+ * Space Actions — exposed to the AI agent via space_run_action.
  *
- * Define actions here and they'll be automatically available as agent tools.
- * The agent calls: space_run_action(action: "action_id", payload: {...})
+ * Each action: { description, params, run }.
+ *  - `params` describe agent-callable inputs (type, description, required).
+ *  - `run` receives the payload and returns any JSON-serialisable value.
+ *
+ * Pair with @construct-space/graph for typed multi-tenant data:
+ *   import { useGraph } from '@construct-space/graph'
+ *   import { Item } from './models'
+ *   const items = useGraph(Item)
+ *
+ *   listItems: {
+ *     description: 'List items',
+ *     params: { limit: { type: 'number', required: false } },
+ *     run: async (p: any) => ({ items: await items.find({ limit: p.limit ?? 50 }) }),
+ *   }
  */
 
-// --- Graph SDK (data layer) ---
-// Uncomment after running `construct graph init` and defining models:
-//
-// import { useGraph } from '@construct-space/graph'
-// const graph = useGraph()
-//
-// Example action using Graph:
-// fetchItems: {
-//   description: 'Fetch items from the graph',
-//   params: {
-//     limit: { type: 'number', description: 'Max items to return', required: false },
-//   },
-//   run: async (p: any) => {
-//     const items = await graph.query('Item').limit(p.limit ?? 10).exec()
-//     return { items }
-//   },
-// },
-
 export const actions = {
-  // Example action:
-  // hello: {
-  //   description: 'Say hello',
-  //   params: {
-  //     name: { type: 'string', description: 'Name to greet', required: true },
-  //   },
-  //   run: (p: any) => ({ message: `Hello ${p.name}!` }),
-  // },
+  ping: {
+    description: 'Health check — returns pong with the space id.',
+    params: {},
+    run: () => ({ pong: true, space: '{{.ID}}' }),
+  },
 }

package/templates/space/construct.md.tmpl

@@ -0,0 +1,260 @@
+---
+id: construct-stack
+name: Construct Stack Guide
+description: How to build and extend a Construct space — CLI, UI, SDK, Graph, manifest, agent actions
+trigger: construct|space|graph|ui|sdk|manifest|action
+category: skill
+tools: [read_file, list_dir, glob, grep, write_file, edit_file]
+---
+
+# Construct.md — agent guide for `{{.DisplayName}}`
+
+This file briefs an AI coding agent on the Construct stack so it can build, extend, and ship this space without external lookups.
+
+---
+
+## Stack at a glance
+
+| Layer | Package | Purpose |
+|-------|---------|---------|
+| UI | `@construct-space/ui` | Vue 3 component library |
+| Host | `@construct-space/sdk` | App composables (org, members, toast, auth) |
+| Data | `@construct-space/graph` | Multi-tenant typed data layer |
+| Icons | `lucide-vue-next` | Icon set |
+| Tooling | `@construct-space/cli` | Build / dev / publish |
+
+All four are **host-provided externals** — import normally, never bundle. Vite externalises them via `vite.config.ts`.
+
+---
+
+## Layout
+
+```
+{{.Name}}/
+  space.manifest.json     scope, pages, toolbar, agent, widgets, actions
+  src/
+    entry.ts              auto-generated; do not hand-edit
+    actions.ts            agent-callable actions (space_run_action)
+    pages/                filesystem routing (e.g. settings.vue → /settings)
+    components/           local Vue components
+    composables/          local composables (use* convention)
+    models/               graph models (defineModel)
+  agent/
+    config.md             agent system prompt, tool whitelist, max iterations
+    skills/               scoped skills loaded with the agent
+    hooks/safety.json     tool-call interception rules
+  widgets/                home-screen widgets (run inside Shadow DOM sandbox)
+```
+
+---
+
+## CLI
+
+```bash
+construct dev                  hot-reload dev (regenerates entry.ts on change)
+construct build                production build → dist/
+construct check                manifest + typecheck + lint
+construct install              install to active profile
+construct publish              publish to registry (requires auth)
+construct graph push           register models with graph backend
+construct graph install <id>   install a published space for current org
+```
+
+---
+
+## Manifest essentials
+
+```jsonc
+{
+  "id": "{{.ID}}",
+  "scope": "app | project | org",   // org = multi-tenant per organization
+  "minConstructVersion": "0.7.0",
+  "pages": [{ "path": "", "label": "Home", "default": true }],
+  "toolbar": [{ "id": "...", "icon": "...", "action": "createX" }],
+  "agent": "agent/config.md",
+  "skills": ["agent/skills/default.md"],
+  "actions": "src/actions.ts",
+  "widgets": [{ "id": "summary", "defaultSize": "4x1", "sizes": {...} }]
+}
+```
+
+`scope: 'org'` makes everything multi-tenant — graph schemas auto-partition per org. Use `useOrg()` to read current org context.
+
+---
+
+## `@construct-space/ui` — component cheatsheet
+
+All exported from the package root:
+
+**Layout**: `Card` (slots: header/accessory/default/footer/footer-end; variants: default/outline/muted; modifiers: hoverable/interactive), `SplitPane`, `ScrollArea`, `Separator`, `PanelSection`, `DashboardPanel`
+
+**Inputs**: `Input`, `Textarea`, `Select` (options: `{label, value}[]`), `MultiSelect`, `Checkbox`, `Switch`, `RadioGroup`, `DatePicker`, `ColorPicker`, `FileInput`, `Slider`, `Autocomplete`, `FormField` (label/hint wrapper)
+
+**Display**: `Badge` (color: primary|neutral|success|warning|error|info; variant: solid|soft|subtle|outline), `Chip`, `Avatar` (`fallback` shows text — pass initials), `Empty`, `Skeleton`, `Progress`, `Tooltip`, `Kbd`, `Alert`, `Notification`/`Toast`
+
+**Actions**: `Button` (variant: solid|ghost|outline; color: primary|neutral|error|...; size: xs|sm|md|lg), `Dropdown`, `DropdownMenu`, `ContextMenu`, `Popover`, `ToggleGroup` (segmented control)
+
+**Overlays**: `Modal` (`v-model:open`, slots: header/body/footer), `Slideover`, `Drawer`, `ConfirmationModal` (`@confirm`, `@cancel`), `Pagination`
+
+**Data**: `Table` (`columns: TableColumn[]`, `rows`, `selectable`, `striped`, `stickyHeader`, slots: `cell-{key}`, `header-{key}`, `empty`), `Tree`, `Timeline`, `Tabs`, `Tab`, `Accordion`, `Calendar`, `Breadcrumbs`
+
+**Composables**: `useNotification`, `notify`, `useAuth`, `useTheme`, `useClipboard`, `useMediaQuery`, `useFormValidation`, `useKeyboard`/`useHotkey`, `useClickOutside`, `useEscapeKey`, `useLocalStorage`, `useAsync`, `useDebounce`/`useThrottle`, `useToggle`, `useSearch`, `useIntersectionObserver`
+
+### Component gotchas
+
+- **`Avatar` sizes**: only `sm | md | lg` (no `xs`).
+- **`Select`** doesn't accept `multiple` — render a chip-toggle list yourself for multi-select.
+- **`Table`** column `align` literals must be `as const` to typecheck (`align: 'right' as const`).
+- **`Table` rowKey** is a string field name on the row object, not a function.
+- **`Modal`** uses `v-model:open` (not `v-model`); slots: `header | body | footer | accessory`.
+- **`Card`** slots: `header | accessory | default | footer | footer-end`. Use `title`/`description` props for the header to get standard styling; put right-side actions in `accessory`.
+- **`ConfirmationModal`** emits `@confirm` and `@cancel` — wire both, otherwise dismissal does nothing.
+- **Settings pages**: never raw `<select>`/`<input>`/`<textarea>` — use `Select`, `Switch`, `Input`, `Textarea` with `FormField` labels. Persist with `localStorage` (key prefix per space).
+
+```vue
+<script setup lang="ts">
+import { Card, Button, Modal, Badge } from '@construct-space/ui'
+const open = ref(false)
+</script>
+<template>
+  <Card title="Hello" hoverable>
+    <Badge color="success" variant="subtle" label="Live" />
+    <template #footer-end>
+      <Button variant="solid" size="sm" @click="open = true">Open</Button>
+    </template>
+  </Card>
+  <Modal v-model:open="open" title="Demo">…</Modal>
+</template>
+```
+
+---
+
+## `@construct-space/sdk` — host composables
+
+```ts
+import { useOrg, useOrgMembers, useToast, useAuth } from '@construct-space/sdk'
+
+const { orgId, isOrg, org } = useOrg()           // current org context (reactive)
+const { members } = useOrgMembers()              // [{ user_id, name, email, role }, ...]
+const toast = useToast()                         // toast.success(...), toast.error(...)
+const { user, isAuthenticated, logout } = useAuth()
+```
+
+Use these for org-aware UX (assignee pickers, "shared with N" badges, avatars, member lookups).
+
+---
+
+## `@construct-space/graph` — data layer
+
+Define typed models, get a typed reactive client, multi-tenant by default.
+
+```ts
+// src/models/Task.ts
+import { defineModel, field, access } from '@construct-space/graph'
+
+export const Task = defineModel('task', {
+  title:       field.string().required(),
+  description: field.string(),
+  priority:    field.string(),
+  due_date:    field.date(),
+  position:    field.int(),
+  labels:      field.json(),
+  assignee_id: field.string().index(),
+}, {
+  scope: 'org',                          // partitions schema per organization
+  access: {
+    read:   access.authenticated(),
+    create: access.authenticated(),
+    update: access.authenticated(),
+    delete: access.owner(),
+  },
+})
+```
+
+```ts
+// src/composables/useTasks.ts
+import { useGraph } from '@construct-space/graph'
+import { Task } from '../models'
+
+const tasks = useGraph(Task)
+await tasks.find({ where: { priority: 'high' }, orderBy: { position: 'asc' }, limit: 50 })
+await tasks.create({ title: 'Ship', position: 0 })
+await tasks.update(id, { position: 1 })
+await tasks.remove(id)
+```
+
+**Field types**: `string`, `int`, `number`, `boolean`, `date`, `json`, `enum([...])`. Chain `.required()`, `.index()`, `.unique()`, `.default(v)`.
+
+**Access helpers**: `authenticated()`, `owner()`, `admin()`, `member()`. `member()` requires org context — use `authenticated()` for org-scoped models that allow any logged-in member.
+
+**Scopes**:
+- `app` — single shared schema (rare)
+- `org` — partitioned by organization (most product spaces)
+- `project` — partitioned by project (dev-tooling spaces)
+
+**Push models to backend after editing**: `construct graph push`.
+
+### Pitfalls
+
+- **`field.json()` columns** must receive a JSON-stringified value on write: `labels: JSON.stringify(arr)`. On read, parse back if it returns a string. Sending a JS array directly triggers `column is of type jsonb but expression is of type record`. Pattern:
+  ```ts
+  function parseLabels(raw: unknown): string[] {
+    if (Array.isArray(raw)) return raw as string[]
+    if (typeof raw === 'string' && raw.trim()) {
+      try { const v = JSON.parse(raw); return Array.isArray(v) ? v : [] } catch { return [] }
+    }
+    return []
+  }
+  ```
+- **Topological sort on push**: avoid `relation.belongsTo()` if push fails — use a `field.string()` foreign-key column instead and join manually in composables.
+- **Lazy provisioning**: first query for a new tenant auto-creates the schema; expect a one-time slower request.
+- **Schema ownership is sticky**: the first profile to `construct graph push` becomes the schema owner. Subsequent pushes from a different profile fail with "Ownership check failed". Bump the space `id` to fork, or push from the original owner profile.
+- **`access.member()` requires org context** — use `access.authenticated()` for org-scoped models that any logged-in member should be able to read/write. `member()` is for stricter membership checks.
+
+---
+
+## Actions (agent surface)
+
+`src/actions.ts` exports an `actions` object — each entry becomes an agent-callable tool via `space_run_action`.
+
+```ts
+export const actions = {
+  createTask: {
+    description: 'Create a task',
+    params: {
+      title: { type: 'string', required: true },
+      priority: { type: 'string', required: false },
+    },
+    run: async (p: any) => ({ task: await tasks.create(p) }),
+  },
+}
+```
+
+The agent (configured in `agent/config.md`) calls `space_list_actions` then `space_run_action`. Keep descriptions tight and specific — they're the only docstring the agent sees.
+
+---
+
+## Drag and drop (HTML5)
+
+Tauri intercepts native drag-drop by default. The Construct host sets `dragDropEnabled: false` so HTML5 events fire normally — use `draggable="true"`, `@dragstart`, `@dragover.prevent`, `@drop`. No extra deps required; reach for `vuedraggable` only if reordering needs auto-scroll/animation.
+
+---
+
+## Conventions
+
+- **Imports**: `@construct-space/*` packages always external. Local imports use relative paths (no `@/` alias unless you add one).
+- **Composables**: `use*` prefix, keep in `src/composables/`.
+- **Pages**: filename = route path. `index.vue` → `/`, `settings.vue` → `/settings`, `[id].vue` → param.
+- **Styling**: Tailwind utilities + CSS vars `--app-foreground`, `--app-background`, `--app-muted`, `--app-border`, `--app-accent`. Don't hard-code colors; the host themes via these variables.
+- **Comments**: explain *why*, not *what*. Skip TODOs in committed code.
+- **No emojis** in source unless the user requests them.
+
+---
+
+## Build pipeline reminder
+
+`construct build` writes:
+- `dist/space-{{.ID}}.iife.js` — the bundled space
+- `dist/manifest.json` — manifest + `build` block (checksum, size, **`hostApiVersion`**, builtAt)
+
+The runtime SpaceLoader compares `hostApiVersion` to its own; mismatches log a warning. Bump the CLI to keep them aligned.

package/templates/space/eslint.config.js.tmpl

@@ -0,0 +1,26 @@
+import js from '@eslint/js'
+
+export default [
+  js.configs.recommended,
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        console: 'readonly',
+        window: 'readonly',
+        document: 'readonly',
+        globalThis: 'readonly',
+        setTimeout: 'readonly',
+        clearTimeout: 'readonly',
+        history: 'readonly',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+    },
+  },
+  {
+    ignores: ['dist/', 'node_modules/', '*.d.ts'],
+  },
+]

package/templates/space/index.vue.tmpl

@@ -2,19 +2,34 @@
 /**
  * {{.DisplayName}} — Home page
  *
- * Host-provided packages (vue, pinia, @vueuse/core, @construct/sdk, etc.)
- * are available as imports — they resolve to the host at runtime.
+ * Built-in libraries available at runtime (do not bundle):
+ *   @construct-space/ui     — Vue 3 components (Button, Card, Modal, Table, Badge, ...)
+ *   @construct-space/sdk    — useOrg, useOrgMembers, useToast, useAuth
+ *   @construct-space/graph  — defineModel, useGraph (multi-tenant data layer)
+ *   lucide-vue-next         — icons
  */
 import { ref } from 'vue'
+import { Button, Card, Empty } from '@construct-space/ui'
+import { Sparkles } from 'lucide-vue-next'
 
 const greeting = ref('Your space is ready. Start building!')
 </script>
 
 <template>
-  <div class="h-full flex items-center justify-center">
-    <div class="text-center">
-      <h1 class="text-2xl font-bold text-[var(--app-foreground)] mb-2">{{.DisplayName}}</h1>
-      <p class="text-sm text-[var(--app-muted)]">{{ greeting }}</p>
-    </div>
+  <div class="h-full flex items-center justify-center p-6">
+    <Card variant="default" class="max-w-md w-full text-center">
+      <template #header>
+        <div class="flex items-center justify-center gap-2 w-full">
+          <Sparkles class="size-5 text-[var(--app-accent)]" />
+          <h1 class="text-lg font-semibold text-[var(--app-foreground)]">{{.DisplayName}}</h1>
+        </div>
+      </template>
+
+      <Empty :description="greeting" size="sm" />
+
+      <template #footer-end>
+        <Button variant="solid" size="sm" label="Get Started" />
+      </template>
+    </Card>
   </div>
 </template>

package/templates/space/package.json.tmpl

@@ -8,6 +8,7 @@
     "build": "construct build",
     "dev": "construct dev",
     "check": "construct check",
+    "lint": "eslint .",
     "validate": "construct validate"
   },
   "peerDependencies": {
@@ -18,10 +19,18 @@
   "devDependencies": {
     "@construct-space/cli": "latest",
     "@construct-space/sdk": "latest",
+    "@eslint/js": "^10.0.1",
     "@vitejs/plugin-vue": "^5.2.3",
+    "eslint": "^10.2.1",
+    "eslint-plugin-vue": "^10.0.0",
     "lucide-vue-next": "^1.0.0",
     "typescript": "^5.9.3",
+    "typescript-eslint": "^8.0.0",
     "vite": "^6.3.5",
     "vue-tsc": "^3.2.5"
+  },
+  "dependencies": {
+    "@construct-space/graph": "^0.5.0",
+    "@construct-space/ui": "^0.5.2"
   }
 }