feat(composer): hosted demo is the shadcn v3 reference project

apps/agent/package.json

@@ -16,7 +16,7 @@
     "@aestheticfunction/dspack-emit": "^0.6.0",
     "@aestheticfunction/dspack-export": "^0.5.0",
     "@aestheticfunction/dspack-gen": "^0.3.1",
-    "@aestheticfunction/dspack-spec": "^0.4.2",
+    "@aestheticfunction/dspack-spec": "^0.4.4",
     "@dspack-studio/agui-bridge": "workspace:*",
     "@dspack-studio/composer-core": "workspace:*",
     "@dspack-studio/contracts": "workspace:*",

apps/composer/app/demo-data.ts

@@ -1,15 +1,29 @@
 /**
  * The shipped demo project (honest magic: real files, pre-emitted at build
- * time by scripts/demo-assets.mjs — the same published APIs the agent runs).
+ * time by scripts/demo-assets.mjs — the same published dspack-emit APIs the
+ * agent runs).
+ *
+ * The hosted demo is the **shadcn/ui v3** reference project: the production
+ * v3 contract (34 components) mapped through a v2-language profile (T1-T4 +
+ * A0), so composer.aesthetic-function.com demonstrates the representation
+ * work actually shipped — the T4 dialog/sheet, T1 label donation, T3 joins,
+ * A0 families — rendered through the wireframe registry. Its 14 worked
+ * surfaces emit 11 and refuse 3 on *declared casualties* (accordion,
+ * breadcrumb, pagination, tooltip), surfaced as acknowledged, not failure.
+ *
+ * Live authoring — connecting your own React library, saving edits, and AI
+ * generation — still requires the local agent (`pnpm --filter agent dev`);
+ * the hosted app states that plainly.
  */
-import demoContract from "../demo-project/acme-ui.dspack.json";
-import demoProfile from "../demo-project/acme.profile.json";
-import demoManifest from "../demo-project/project.json";
+import demoContract from "../shadcn-v3-project/shadcn-ui.dspack.json";
+import demoProfile from "../shadcn-v3-project/shadcn-v3.profile.json";
+import demoManifest from "../shadcn-v3-project/project.json";
 import demoEmit from "./demo/generated/emit.json";
-import usesCasualty from "../demo-project/surfaces/uses-casualty.dsurface.json";
 
 export const DEMO_CONTRACT = demoContract as unknown as Record<string, any>;
 export const DEMO_PROFILE = demoProfile as unknown as Record<string, any>;
 export const DEMO_MANIFEST = demoManifest as unknown as Record<string, any>;
 export const DEMO_EMIT = demoEmit as unknown as Record<string, any>;
-export const DEMO_EXTRA_SURFACES = [{ name: "uses-casualty", surface: usesCasualty as unknown }];
+// The v3 contract's 14 examples ARE the worked surfaces (recomputeEmit emits
+// contractSurfaces(doc)); the project carries no extra surfaces beyond them.
+export const DEMO_EXTRA_SURFACES: Array<{ name: string; surface: unknown }> = [];

apps/composer/app/views/mapper-view.tsx

@@ -10,6 +10,15 @@
 import { useState } from "react";
 import { useComposer } from "../state";
 
+/**
+ * A contract enum member is either a plain string (v1) or a
+ * `{ value, description }` object (v3). Everything that treats an enum value
+ * as text — labels, valueMap keys, React children — must go through this;
+ * rendering the object directly is React error #31.
+ */
+const enumLabel = (v: unknown): string =>
+  typeof v === "string" ? v : v && typeof v === "object" && "value" in v ? String((v as { value: unknown }).value) : String(v);
+
 const field = {
   fontFamily: "var(--mono)",
   fontSize: 12,
@@ -89,7 +98,7 @@ export function MapperView() {
                     <tr key={name} style={{ borderTop: "1px solid var(--line-soft)" }}>
                       <td style={{ padding: "6px", fontFamily: "var(--mono)" }}>
                         {name}
-                        {cprop.values && <div style={{ fontSize: 11, color: "var(--fg-dim)" }}>[{cprop.values.join(", ")}]</div>}
+                        {cprop.values && <div style={{ fontSize: 11, color: "var(--fg-dim)" }}>[{cprop.values.map(enumLabel).join(", ")}]</div>}
                       </td>
                       {pp ? (
                         <>
@@ -112,7 +121,12 @@ export function MapperView() {
                           <td style={{ padding: "6px" }}>
                             {pp.kind === "enum" && cprop.values ? (
                               <div style={{ display: "grid", gap: 3 }}>
-                                {cprop.values.map((v: string) => (
+                                {cprop.values.map((raw: unknown) => {
+                                  // v3 contracts carry enum members as {value, description};
+                                  // v1 carries plain strings. Normalise to the value string —
+                                  // rendering the object directly is React error #31.
+                                  const v = enumLabel(raw);
+                                  return (
                                   <span key={v} style={{ fontFamily: "var(--mono)", fontSize: 11 }}>
                                     {v} →{" "}
                                     <select
@@ -130,7 +144,8 @@ export function MapperView() {
                                       ))}
                                     </select>
                                   </span>
-                                ))}
+                                  );
+                                })}
                                 <span style={{ fontSize: 11, color: "var(--fg-dim)" }}>target: [{(pp.targetEnum ?? []).join(", ")}]</span>
                               </div>
                             ) : (

apps/composer/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@aestheticfunction/dspack-gen": "^0.3.1",
-    "@aestheticfunction/dspack-spec": "^0.4.2",
+    "@aestheticfunction/dspack-spec": "^0.4.4",
     "@dspack-studio/a2ui-ingest": "workspace:*",
     "@dspack-studio/agui-bridge": "workspace:*",
     "@dspack-studio/composer-core": "workspace:*",

apps/composer/scripts/demo-assets.mjs

@@ -14,12 +14,12 @@ import { fileURLToPath } from "node:url";
 import { loadProfile, transformFromJson, emitSurface, EmitSurfaceError } from "@aestheticfunction/dspack-emit";
 
 const here = dirname(fileURLToPath(import.meta.url));
-const project = join(here, "..", "demo-project");
+const project = join(here, "..", "shadcn-v3-project");
 const outDir = join(here, "..", "app", "demo", "generated");
 
 const read = (p) => JSON.parse(readFileSync(p, "utf8"));
-const contract = read(join(project, "acme-ui.dspack.json"));
-const profile = loadProfile(read(join(project, "acme.profile.json")));
+const contract = read(join(project, "shadcn-ui.dspack.json"));
+const profile = loadProfile(read(join(project, "shadcn-v3.profile.json")));
 
 const surfaces = [];
 for (const example of contract.examples ?? []) {

apps/composer/shadcn-v3-project/project.json

@@ -5,7 +5,6 @@
   "catalogIdBase": "https://aesthetic-function.com/catalogs/shadcn-v3",
   "contractPath": "shadcn-ui.dspack.json",
   "profilePath": "shadcn-v3.profile.json",
-  "surfacesDir": "surfaces",
   "outDir": "out",
   "previewRegistry": "wireframe"
 }