Publish as a Quixos Workspace Template

.quixos-template-source.json

@@ -0,0 +1,4 @@
+{
+  "monorepoCommit": "99b2868b7e974441744657b35049f5baae4a499b",
+  "sourcePath": "quixos-instance/packages/todo-react-runtime"
+}

descriptor.quixos-package.txtpb

@@ -1,8 +1,9 @@
+# Generated from the checked package contract
 package_id: "package:todo-react-runtime"
 package_revision_id: "package:todo-react-runtime@1"
 runtime_protocol_version: "quixos-capabilities-v1"
 exports: { export_id: "export:todo-react-runtime:create-component" runtime_symbol: "createComponent" }
-exports: { export_id: "export:todo-react-runtime:source-get" runtime_symbol: "source.get" }
+exports: { export_id: "export:todo-react-runtime:source-get" runtime_symbol: "sourceGet" }
-exports: { export_id: "export:todo-react-runtime:props-get" runtime_symbol: "props.get" }
+exports: { export_id: "export:todo-react-runtime:props-get" runtime_symbol: "propsGet" }
-exports: { export_id: "export:todo-react-runtime:props-watch" runtime_symbol: "props.watch" }
+exports: { export_id: "export:todo-react-runtime:props-watch" runtime_symbol: "propsWatch" }
-exports: { export_id: "export:todo-react-runtime:props-watch-stop" runtime_symbol: "props.watchStop" }
+exports: { export_id: "export:todo-react-runtime:props-watch-stop" runtime_symbol: "propsWatchStop" }

flake.lock

@@ -37,17 +37,17 @@
     "quixosNixHelpers": {
       "flake": false,
       "locked": {
-        "lastModified": 1788543053,
+        "lastModified": 1789602549,
-        "narHash": "sha256-3YReATWEVxZinYVi/l3cwOz+oFoZUrwj24kUBQTmUpQ=",
+        "narHash": "sha256-DD66dQ3dzEvG13Zju/4sVSV4pnktSUkJ/Rbr1KkHMdg=",
-        "ref": "refs/tags/quixos-reachability/56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a",
+        "ref": "refs/tags/quixos-reachability/e2747066ca7d9d001dcb5dd936e17969ed88fc5f",
-        "rev": "56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a",
+        "rev": "e2747066ca7d9d001dcb5dd936e17969ed88fc5f",
-        "revCount": 8,
+        "revCount": 32,
         "type": "git",
         "url": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/quixos-nix-helpers.git"
       },
       "original": {
-        "ref": "refs/tags/quixos-reachability/56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a",
+        "ref": "refs/tags/quixos-reachability/e2747066ca7d9d001dcb5dd936e17969ed88fc5f",
-        "rev": "56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a",
+        "rev": "e2747066ca7d9d001dcb5dd936e17969ed88fc5f",
         "type": "git",
         "url": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/quixos-nix-helpers.git"
       }

flake.nix

@@ -6,31 +6,33 @@
     flake-utils.url = "github:numtide/flake-utils";
 
     quixosNixHelpers = {
-      url = "git+https://gitea-external.egads.tutti.syntaxblitz.net/quixos/quixos-nix-helpers.git?ref=refs/tags/quixos-reachability/56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a&rev=56bbcd22d17f8c7f120b1e0b5bd1d5a86e91a80a";
+      url = "git+https://gitea-external.egads.tutti.syntaxblitz.net/quixos/quixos-nix-helpers.git?ref=refs/tags/quixos-reachability/e2747066ca7d9d001dcb5dd936e17969ed88fc5f&rev=e2747066ca7d9d001dcb5dd936e17969ed88fc5f";
       flake = false;
     };
   };
 
-  outputs = inputs@{ nixpkgs, flake-utils, quixosNixHelpers, ... }:
+  outputs =
+    inputs@{
+      nixpkgs,
+      flake-utils,
+      quixosNixHelpers,
+      ...
+    }:
     let
       quixosHelpers = import "${quixosNixHelpers}/quixos-package-helpers.nix";
     in
     quixosHelpers.mkCaminoTsYarnNixifyFlake {
       inherit inputs nixpkgs flake-utils;
       packageRoot = ./.;
+      migrationEntrypoint = "dist/migrate.js";
       promptName = "todo-react-runtime";
       bundle = {
-        entry = "dist/server.js";
+        entry = "src/server.ts";
+        browserSources = true;
       };
       installServer = {
         libexecName = "todo-react-runtime";
         descriptorPath = "descriptor.quixos-package.txtpb";
-        extraFiles = [
-          {
-            source = "dist/todo-component.mjs";
-            target = "todo-component.mjs";
-          }
-        ];
       };
     };
 }

package.json

@@ -8,15 +8,17 @@
     "server": "dist/server.js"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/build-component.mjs",
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@quixos/camino-package-runtime": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=a998690446ecf647e3af78e369492c1a3663b66d"
+    "@quixos/camino-package-runtime": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=cd2b04dc8c2daeea633bf8ecdd31d20fdc41f2ab"
   },
   "devDependencies": {
     "@types/node": "^24",
+    "@types/react": "^18.3.12",
     "esbuild": "^0.25.12",
+    "react": "^18.3.1",
     "typescript": "^7.0.2"
   }
 }

package.qx

@@ -1,26 +1,16 @@
+import interface TaskData;
 external atom TaskReactComponent id "atom:task-react-component";
 external atom Task id "atom:task";
+type TaskProps = record {data: interface-ref<TaskData>;};
 
 package TodoReactRuntime id "package:todo-react-runtime" revision "package:todo-react-runtime@1" {
   constructor createComponent id "export:todo-react-runtime:create-component" constructs TaskReactComponent : atom-ref<Task>;
   operation sourceGet id "export:todo-react-runtime:source-get" : unit -> string mode call receiver atom TaskReactComponent;
-  operation propsGet id "export:todo-react-runtime:props-get" : unit -> message "org.quixos.web-studio.ReactProps" mode call receiver atom TaskReactComponent requires {
+  operation propsGet id "export:todo-react-runtime:props-get" : unit -> TaskProps mode call receiver atom TaskReactComponent requires {
-    edge subject id "port:todo-react:subject" : exactly-one atom Task [resolve];
+    interface data id "port:todo-react-runtime:data" : TaskData;
-    state title id "port:todo-react:title" : string [read];
-    state status id "port:todo-react:status" : string [read];
-    state priority id "port:todo-react:priority" : string [read];
-    state notes id "port:todo-react:notes" : string [read];
-    state dueDate id "port:todo-react:due-date" : string [read];
-    state energy id "port:todo-react:energy" : string [read];
   };
-  operation propsWatch id "export:todo-react-runtime:props-watch" : unit -> watch-handle mode watch-start emits message "org.quixos.web-studio.ReactProps" receiver atom TaskReactComponent requires {
+  operation propsWatch id "export:todo-react-runtime:props-watch" : unit -> watch-handle mode watch-start emits TaskProps receiver atom TaskReactComponent requires {
-    edge subject id "port:todo-react:subject" : exactly-one atom Task [resolve];
+    interface data id "port:todo-react-runtime:data" : TaskData;
-    state title id "port:todo-react:title" : string [read];
-    state status id "port:todo-react:status" : string [read];
-    state priority id "port:todo-react:priority" : string [read];
-    state notes id "port:todo-react:notes" : string [read];
-    state dueDate id "port:todo-react:due-date" : string [read];
-    state energy id "port:todo-react:energy" : string [read];
   };
   operation propsWatchStop id "export:todo-react-runtime:props-watch-stop" : watch-handle -> unit mode watch-stop receiver atom TaskReactComponent;
 }

quixos.check.json

@@ -0,0 +1,10 @@
+{
+  "backend": "typescript",
+  "bindingOutput": "src/gen/qx.ts",
+  "options": {
+    "react": {
+      "propsExports": ["propsGet"],
+      "components": [{ "module": "../todo-component.js", "propsExport": "propsGet" }]
+    }
+  }
+}

quixos.lock

@@ -1,6 +1,10 @@
 quixos-lock version 1 {
   quixos source {
     repository "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/quixos.git";
-    commit "9c3ab572ecfbc83785038c3d9f174516df15d63f";
+    commit "99b2868b7e974441744657b35049f5baae4a499b";
+  }
+  interface TaskData source {
+    repository "https://repos.quixos.org/quixos-templates/interface-task-data.git";
+    commit "ad2eac936b1d7f30eed9c0a74d1c220ec073b625";
   }
 }

quixos.migrations.json

@@ -0,0 +1,6 @@
+{
+  "generatedBy": "qx-scaffold-v1",
+  "schemaVersion": 1,
+  "contracts": {},
+  "migrations": []
+}

quixos.toolchain.json

@@ -0,0 +1,4 @@
+{
+  "generatedBy": "qx-scaffold-v1",
+  "nixifyPluginUrl": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/yarn-plugin-nixify-patched/raw/commit/4528fdd20b30d869262443b3f044549810e75fb8/dist/yarn-plugin-nixify.js"
+}

scripts/build-component.mjs

@@ -1,34 +0,0 @@
-import { build } from "esbuild";
-
-const platformModules = new Map([
-  [
-    "@quixos/web-studio-react-runtime",
-    "/__quixos/platform/web-studio-react-runtime/v1.mjs",
-  ],
-  ["react", "/__quixos/platform/react/v18.mjs"],
-  ["react/jsx-runtime", "/__quixos/platform/react-jsx-runtime/v18.mjs"],
-  ["react/jsx-dev-runtime", "/__quixos/platform/react-jsx-dev-runtime/v18.mjs"],
-]);
-
-await build({
-  entryPoints: ["dist/todo-component.js"],
-  outfile: "dist/todo-component.mjs",
-  bundle: true,
-  format: "esm",
-  platform: "browser",
-  target: "es2022",
-  sourcemap: true,
-  plugins: [
-    {
-      name: "quixos-platform-modules",
-      setup(buildApi) {
-        buildApi.onResolve({ filter: /.*/ }, (args) => {
-          const platformPath = platformModules.get(args.path);
-          return platformPath
-            ? { path: platformPath, external: true }
-            : undefined;
-        });
-      },
-    },
-  ],
-});

src/browser-assets.d.ts

@@ -0,0 +1,4 @@
+declare module "*?browser-source" {
+  const source: string;
+  export default source;
+}

src/gen/react-props.gen.ts

@@ -0,0 +1,6 @@
+// Generated from checked QX contracts. Do not edit.
+import type {ObjectRef, InterfaceReference, ReadableField, WritableField} from "@quixos/web-studio-react-runtime";
+export type Interface0 = InterfaceReference<"interface:task-data@1", {"title": WritableField<string>;"status": WritableField<string>;"priority": WritableField<string>;"notes": WritableField<string>;"dueDate": WritableField<string>;"energy": WritableField<string>}> ;
+export type ReactResults = {"propsGet": {"data": Interface0}};
+type CheckedComponent<K extends keyof ReactResults, C extends (props: {camino: ReactResults[K]; render: any; dispatch: (action: any) => void}) => unknown> = C;
+type Component0 = CheckedComponent<"propsGet", typeof import("../todo-component.js")["default"]>;

src/gen/web-studio-react-runtime.d.ts

@@ -1,28 +1,25 @@
+// Generated by the Quixos React platform contract. Do not edit.
 declare module "@quixos/web-studio-react-runtime" {
+  import type * as React from "react";
+  export function useComponentOverlayContainer(): HTMLElement;
+  export function useComponentStyleRoot(): ShadowRoot;
   export type ObjectRef<AtomId extends string> = string & {
     readonly $quixosAtom: AtomId;
   };
-  export type LiveFieldProp<T> = {
+  export type FieldCapability = {objectId: string; interfaceRevisionId: string; getOperationId: string; watchOperationId?: string; setOperationId?: string; inputKind?: "fields" | "value"};
-    value: T;
+  export type ReadableField<T> = {readonly value?: T; readonly capability: FieldCapability};
-    source: {
+  /** set(T) uses the resolved capability: native CRDT fields send incremental edits;
-      objectId: string;
+   * custom/manual setters receive semantic values. Storage provenance grants no authority. */
-      slotId: string;
+  export type WritableField<T> = ReadableField<T> & {readonly $writeType?: (value: T) => T; readonly writable: true; readonly capability: FieldCapability & {setOperationId: string}};
-      valueType?: string;
+  export type LiveFieldProp<T> = ReadableField<T>;
-      storagePolicy?: string;
+  export type InterfaceReference<I extends string, Fields> = {readonly $quixosRef: string; readonly interfaceRevisionId: I; readonly fields: Fields};
-      revision?: string | number | bigint;
-      crdtSnapshot?: {
-        type: string;
-        encoding: string;
-        payload: string;
-      };
-    };
-  };
   export type ReactComponentHostProps<Action> = {
     onAction?: (action: Action) => void;
-    fallback?: unknown;
+    fallback?: React.ReactNode;
     className?: string;
-    style?: Record<string, string | number | undefined>;
+    style?: React.CSSProperties;
-    onError?: (error: Error) => void;
+    /** Optional extra action. The host still displays and reports errors by default. */
+    extraErrorAction?: (error: Error) => void;
   };
   export type ReactComponentImplementationProps<CaminoProps, RenderProps, Action> = {
     camino: CaminoProps;
@@ -39,16 +36,10 @@ declare module "@quixos/web-studio-react-runtime" {
     interfaceRevisionId: string,
     operationId: string,
     value?: unknown,
+    options?: {clientMutationId?: string; signal?: AbortSignal},
   ) => Promise<Result>;
-  export const h: (...args: any[]) => any;
+  export const h: typeof React.createElement;
-  export const useLiveField: <T>(
+  export function useLiveField<T>(field: ReadableField<T>, options: {write: (value: T) => Promise<void>}): readonly [T, (value: T) => Promise<void>];
-    field: LiveFieldProp<T>,
+  export function useLiveField<T>(field: WritableField<T>): readonly [T, (value: T) => Promise<void>];
-    options?: {
+  export function useLiveField<T>(field: ReadableField<T>): readonly [T];
-      reconcileRegister?: (state: {
-        confirmed: T;
-        optimistic: T;
-        pending: boolean;
-      }) => T;
-    },
-  ) => [T, (value: T) => void | Promise<void>];
 }

src/impl/createComponent.ts

@@ -0,0 +1,2 @@
+// This adapter keeps the implementation file hand-authored.
+export { createComponent as handler } from "../todo-react.impl.js";

src/impl/propsGet.ts

@@ -0,0 +1,2 @@
+// This adapter keeps the implementation file hand-authored.
+export { props as handler } from "../todo-react.impl.js";

src/impl/propsWatch.ts

@@ -0,0 +1,2 @@
+// This adapter keeps the implementation file hand-authored.
+export { props as handler } from "../todo-react.impl.js";

src/impl/propsWatchStop.ts

@@ -0,0 +1,2 @@
+// This adapter keeps the implementation file hand-authored.
+export { stopWatch as handler } from "../todo-react.impl.js";

src/impl/sourceGet.ts

@@ -0,0 +1,2 @@
+// This adapter keeps the implementation file hand-authored.
+export { source as handler } from "../todo-react.impl.js";

src/migrate.ts

@@ -0,0 +1,3 @@
+// Generated by qx-scaffold-v1
+import { serveMigration } from "@quixos/camino-package-runtime";
+await serveMigration({});

src/server.ts

@@ -1,13 +1,17 @@
+// Generated by qx-scaffold-v1
 import { servePackageRuntime } from "@quixos/camino-package-runtime";
-import { createComponent, props, source, stopWatch } from "./todo-react.impl.js";
+import { createRuntime } from "./gen/qx.js";
-
+import { handler as impl0 } from "./impl/createComponent.js";
-servePackageRuntime({
+import { handler as impl1 } from "./impl/sourceGet.js";
-  packageRevisionId: "package:todo-react-runtime@1",
+import { handler as impl2 } from "./impl/propsGet.js";
-  exports: {
+import { handler as impl3 } from "./impl/propsWatch.js";
-    "export:todo-react-runtime:create-component": createComponent,
+import { handler as impl4 } from "./impl/propsWatchStop.js";
-    "export:todo-react-runtime:source-get": source,
+servePackageRuntime(
-    "export:todo-react-runtime:props-get": props,
+  createRuntime({
-    "export:todo-react-runtime:props-watch": props,
+    createComponent: impl0,
-    "export:todo-react-runtime:props-watch-stop": stopWatch,
+    sourceGet: impl1,
-  },
+    propsGet: impl2,
-});
+    propsWatch: impl3,
+    propsWatchStop: impl4,
+  }),
+);

src/todo-component.tsx

@@ -1,40 +1,11 @@
-import {
+import { useLiveField, type ReactComponentImplementationProps } from "@quixos/web-studio-react-runtime";
-  h,
-  useLiveField,
-  type LiveFieldProp,
-  type ReactComponentImplementationProps,
-} from "@quixos/web-studio-react-runtime";
 import type {
   TodoReactComponentAction,
   TodoReactComponentRenderProps,
 } from "./gen/quixos.todo.TodoReactComponent.react.js";
+import type { ReactResults } from "./gen/react-props.gen.js";
 
-type TodoReactComponentCaminoProps = {
+type TodoReactComponentCaminoProps = ReactResults["propsGet"];
-  task_id: string;
-  title: LiveFieldProp<string>;
-  status: LiveFieldProp<string>;
-  priority: LiveFieldProp<string>;
-  notes: LiveFieldProp<string>;
-  due_date: LiveFieldProp<string>;
-  energy: LiveFieldProp<string>;
-  display_label: string;
-};
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      div: Record<string, unknown>;
-      button: Record<string, unknown>;
-      input: Record<string, unknown>;
-      label: Record<string, unknown>;
-      option: Record<string, unknown>;
-      select: Record<string, unknown>;
-      span: Record<string, unknown>;
-      strong: Record<string, unknown>;
-      textarea: Record<string, unknown>;
-    }
-  }
-}
 
 const palette = {
   ink: "#28362d",
@@ -46,9 +17,8 @@ const palette = {
   berry: "#a9544f",
 };
 
-const statusTone = (status: string) => status === "DONE"
+const statusTone = (status: string) =>
-  ? palette.moss
+  status === "DONE" ? palette.moss : status === "ARCHIVED" ? palette.muted : "#52749a";
-  : status === "ARCHIVED" ? palette.muted : "#52749a";
 
 const fieldLabelStyle = {
   display: "grid",
@@ -77,34 +47,32 @@ type TodoComponentImplementationProps = ReactComponentImplementationProps<
   TodoReactComponentAction
 >;
 
-export default function TodoComponent({
+export default function TodoComponent({ camino: props, render, dispatch }: TodoComponentImplementationProps) {
-  camino: props,
+  const [title, setTitle] = useLiveField(props.data.fields.title);
-  render,
+  const [status, setStatus] = useLiveField(props.data.fields.status);
-  dispatch,
+  const [priority, setPriority] = useLiveField(props.data.fields.priority);
-}: TodoComponentImplementationProps) {
+  const [notes, setNotes] = useLiveField(props.data.fields.notes);
-  const [title, setTitle] = useLiveField(props.title);
+  const [dueDate, setDueDate] = useLiveField(props.data.fields.dueDate);
-  const [status, setStatus] = useLiveField(props.status);
+  const [energy, setEnergy] = useLiveField(props.data.fields.energy);
-  const [priority, setPriority] = useLiveField(props.priority);
-  const [notes, setNotes] = useLiveField(props.notes);
-  const [dueDate, setDueDate] = useLiveField(props.due_date);
-  const [energy, setEnergy] = useLiveField(props.energy);
   const done = status === "DONE";
 
   return (
-    <div style={{
+    <div
-      display: "grid",
+      style={{
-      gap: render.compact ? "9px" : "13px",
+        display: "grid",
-      minWidth: 0,
+        gap: render.compact ? "9px" : "13px",
-      height: "100%",
+        minWidth: 0,
-      padding: render.compact ? "11px" : "15px",
+        height: "100%",
-      border: render.selected ? `2px solid ${palette.honey}` : `1px solid ${palette.line}`,
+        padding: render.compact ? "11px" : "15px",
-      borderRadius: "12px",
+        border: render.selected ? `2px solid ${palette.honey}` : `1px solid ${palette.line}`,
-      background: palette.cream,
+        borderRadius: "12px",
-      boxShadow: render.selected ? "0 0 0 3px rgba(217,155,61,.14)" : "none",
+        background: palette.cream,
-      color: palette.ink,
+        boxShadow: render.selected ? "0 0 0 3px rgba(217,155,61,.14)" : "none",
-      fontFamily: "Avenir Next, Nunito, ui-sans-serif, system-ui, sans-serif",
+        color: palette.ink,
-      overflow: "auto",
+        fontFamily: "Avenir Next, Nunito, ui-sans-serif, system-ui, sans-serif",
-    }}>
+        overflow: "auto",
+      }}
+    >
       <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: "10px" }}>
         <button
           type="button"
@@ -125,14 +93,16 @@ export default function TodoComponent({
           {done ? "✓" : ""}
         </button>
         <div style={{ display: "grid", flex: 1, gap: "3px", minWidth: 0 }}>
-          <strong style={{
+          <strong
-            overflow: "hidden",
+            style={{
-            fontSize: render.compact ? "14px" : "17px",
+              overflow: "hidden",
-            lineHeight: 1.25,
+              fontSize: render.compact ? "14px" : "17px",
-            textDecoration: done ? "line-through" : "none",
+              lineHeight: 1.25,
-            textOverflow: "ellipsis",
+              textDecoration: done ? "line-through" : "none",
-            whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
-          }}>
+              whiteSpace: "nowrap",
+            }}
+          >
             {title || "Untitled task"}
           </strong>
           <span style={{ color: statusTone(status), fontSize: "10px", fontWeight: 800, letterSpacing: ".08em" }}>
@@ -167,7 +137,11 @@ export default function TodoComponent({
           <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(112px, 1fr))", gap: "8px" }}>
             <label style={fieldLabelStyle}>
               Status
-              <select style={controlStyle} value={status} onChange={(event: { currentTarget: HTMLSelectElement }) => void setStatus(event.currentTarget.value)}>
+              <select
+                style={controlStyle}
+                value={status}
+                onChange={(event: { currentTarget: HTMLSelectElement }) => void setStatus(event.currentTarget.value)}
+              >
                 <option value="OPEN">Open</option>
                 <option value="DONE">Done</option>
                 <option value="ARCHIVED">Archived</option>
@@ -175,7 +149,11 @@ export default function TodoComponent({
             </label>
             <label style={fieldLabelStyle}>
               Priority
-              <select style={controlStyle} value={priority} onChange={(event: { currentTarget: HTMLSelectElement }) => void setPriority(event.currentTarget.value)}>
+              <select
+                style={controlStyle}
+                value={priority}
+                onChange={(event: { currentTarget: HTMLSelectElement }) => void setPriority(event.currentTarget.value)}
+              >
                 <option value="LOW">Low</option>
                 <option value="NORMAL">Normal</option>
                 <option value="HIGH">High</option>
@@ -183,7 +161,11 @@ export default function TodoComponent({
             </label>
             <label style={fieldLabelStyle}>
               Energy
-              <select style={controlStyle} value={energy} onChange={(event: { currentTarget: HTMLSelectElement }) => void setEnergy(event.currentTarget.value)}>
+              <select
+                style={controlStyle}
+                value={energy}
+                onChange={(event: { currentTarget: HTMLSelectElement }) => void setEnergy(event.currentTarget.value)}
+              >
                 <option value="LOW">Low</option>
                 <option value="MEDIUM">Medium</option>
                 <option value="HIGH">High</option>
@@ -191,7 +173,12 @@ export default function TodoComponent({
             </label>
             <label style={fieldLabelStyle}>
               Due
-              <input style={controlStyle} type="date" value={dueDate} onInput={(event: { currentTarget: HTMLInputElement }) => void setDueDate(event.currentTarget.value)} />
+              <input
+                style={controlStyle}
+                type="date"
+                value={dueDate}
+                onInput={(event: { currentTarget: HTMLInputElement }) => void setDueDate(event.currentTarget.value)}
+              />
             </label>
           </div>
           <label style={fieldLabelStyle}>
@@ -214,8 +201,16 @@ export default function TodoComponent({
         </div>
       )}
 
-      <div style={{ color: palette.muted, fontSize: "10px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+      <div
-        {props.task_id}
+        style={{
+          color: palette.muted,
+          fontSize: "10px",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {props.data.$quixosRef}
       </div>
     </div>
   );

src/todo-react.impl.ts

@@ -1,52 +1,10 @@
-import fs from "node:fs/promises";
+import componentSource from "./todo-component.js?browser-source";
-import path from "node:path";
+import type { Contexts, Results } from "./gen/qx.js";
-import { fileURLToPath } from "node:url";
-import { derived, type RuntimeContext } from "@quixos/camino-package-runtime";
-
-const dirname = path.dirname(fileURLToPath(import.meta.url));
-const componentSourcePath = path.join(dirname, "todo-component.mjs");
-
-export const source = async () => await fs.readFile(componentSourcePath, "utf8");
-
-export const createComponent = (context: RuntimeContext) => context.objectId;
-
-export const props = derived(async (context: RuntimeContext) => {
-  const tasks = await context.edge("port:todo-react:subject").resolve();
-  if (tasks.length !== 1) {
-    throw new Error(`Task component ${context.objectId} has ${tasks.length} subjects`);
-  }
-  const titlePort = context.state<string>("port:todo-react:title");
-  const statusPort = context.state<string>("port:todo-react:status");
-  const priorityPort = context.state<string>("port:todo-react:priority");
-  const notesPort = context.state<string>("port:todo-react:notes");
-  const dueDatePort = context.state<string>("port:todo-react:due-date");
-  const energyPort = context.state<string>("port:todo-react:energy");
-  const [title, status, priority, titleLive, statusLive, priorityLive, notesLive, dueDateLive, energyLive] =
-    await Promise.all([
-      titlePort.get(),
-      statusPort.get(),
-      priorityPort.get(),
-      titlePort.live(),
-      statusPort.live(),
-      priorityPort.live(),
-      notesPort.live(),
-      dueDatePort.live(),
-      energyPort.live(),
-    ]);
-  const priorityText = priority && priority !== "NORMAL"
-    ? ` ${priority.toLowerCase()}`
-    : "";
-  return {
-    task_id: tasks[0],
-    component_id: context.objectId,
-    title: titleLive,
-    status: statusLive,
-    priority: priorityLive,
-    notes: notesLive,
-    due_date: dueDateLive,
-    energy: energyLive,
-    display_label: `[${status ?? "OPEN"}]${priorityText} ${title ?? "Untitled task"}`,
-  };
-});
 
+export const source = () => componentSource;
+export const createComponent = ({ objectId }: Contexts["createComponent"]) => objectId;
+export const props = {
+  kind: "derived" as const,
+  get: async ({ ports }: Contexts["propsGet"]): Promise<Results["propsGet"]> => ({ data: ports.data.objectId }),
+};
 export const stopWatch = () => null;

tsconfig.json

@@ -12,8 +12,7 @@
     "types": ["node"],
     "outDir": "dist",
     "rootDir": "src",
-    "jsx": "react",
+    "jsx": "react-jsx"
-    "jsxFactory": "h"
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

yarn-project.nix

@@ -161,11 +161,17 @@ cacheEntries = {
 "@connectrpc/connect@npm:2.1.2" = { filename = "@connectrpc-connect-npm-2.1.2-ab34825de3-4e15000890.zip"; hash = "sha512-ThUACJAjt1Lv1E+pQKWuHh+gDhvrxLoM7ScruTWSDYw7hbd0UOZErUQruMqaJ1sMFxNviWuo7/A2F4Ex2wHWFQ=="; };
 "@esbuild/linux-arm64@npm:0.25.12" = { filename = "@esbuild-linux-arm64-npm-0.25.12-a5aaa0e70e-10c0.zip"; hash = "sha512-tm9zhnNR4GZv4A+Sgbt9jdCJ0iGlzvYxGCaxaScbhFH14mX7QWJRYaCvFCZB1dseApmaq6mNwbilL0wJnbB8tw=="; };
 "@esbuild/linux-x64@npm:0.25.12" = { filename = "@esbuild-linux-x64-npm-0.25.12-07c7c22cce-10c0.zip"; hash = "sha512-U2QGT8ZIZN8q2WPSFDC32+sZGKgp49gvnHzIf/vKVR4xIzjcgBbjAIKI+FqfGBmGBWu8eCpS7lR9JDXdUHOFkw=="; };
-"@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=a998690446ecf647e3af78e369492c1a3663b66d" = { filename = "@quixos-camino-package-runtime-https-683bcbf33c-c90d5d5c53.zip"; hash = "sha512-yQ1dXFMR2k+xbkka2rrhsAcrQFZlJAZEYM0hqwGzdV5RJ+fhQEh3BEgoPiL2yxrxulU4zg/jsj8BTBFRp1feyg=="; };
+"@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=cd2b04dc8c2daeea633bf8ecdd31d20fdc41f2ab" = { filename = "@quixos-camino-package-runtime-https-99aa94a9bf-7872db96f5.zip"; hash = "sha512-eHLblvUv7jzGJ45p9j7PY5UsK74OeyZp2Z36rC5ki0BlGUXgCHAzeJ6YvaWov64433kSLJT9NjkocOgUacVvZg=="; };
 "@types/node@npm:24.13.3" = { filename = "@types-node-npm-24.13.3-b512a0bbeb-a5bc08f49b.zip"; hash = "sha512-pbwI9JuVgdzcqQ4CzXcZejx5mECAdmSULlzVFhpVPU0q6AZPfjKUQQ10jX0Ji1wYSL5/pQwG8pxBk6sWvk5Z6w=="; };
+"@types/prop-types@npm:15.7.15" = { filename = "@types-prop-types-npm-15.7.15-cefe16a1fa-b59aad1ad1.zip"; hash = "sha512-tZqtGtGb8XM89ST9TmGBlsbHaQ9I7nCjJ+tFCkKquOigY/vlnKClcBrr4tktWCKSwPuEXqV0dPahX2mUsOJgsg=="; };
+"@types/react@npm:18.3.31" = { filename = "@types-react-npm-18.3.31-d376eb19a5-44180549dd.zip"; hash = "sha512-RBgFSd0EX1Nuzs0545qs34KOdq3BxKkLEy9FPiPMNwxGSNkQKuQBFy69j9ixl3qQGjniFOU+x3FxsnUUtYjBeQ=="; };
 "@typescript/typescript-linux-arm64@npm:7.0.2" = { filename = "@typescript-typescript-linux-arm64-npm-7.0.2-9cacfc53a0-10c0.zip"; hash = "sha512-s4c7nGT/lQIw6x0IfrL0b3ECy/D0g7UoDLdiIWJoM6EGXk5N/dmXdxUdA8Cr3hV/3nO2BYKTQ6Ai8/zGhiSQ3A=="; };
 "@typescript/typescript-linux-x64@npm:7.0.2" = { filename = "@typescript-typescript-linux-x64-npm-7.0.2-8dd7ff8d24-10c0.zip"; hash = "sha512-k9EUK5CZ3OOPnyslp8SAAonHJpnpPmlaulppI/NmFyCzNs3UN/TLPUkyQia3KIxgbyTzKoXI5L5fl8Uj9bJ7Cg=="; };
+"csstype@npm:3.2.3" = { filename = "csstype-npm-3.2.3-741053244e-cd29c51e70.zip"; hash = "sha512-zSnFHnD6gi8c7NhkGhRFvtcGNpdGnTVjO1FuYP6MG94EsI9sW2AiE2u2abZMY9QXOvVIZFEPu07iMoGAGEGjzg=="; };
 "esbuild@npm:0.25.12" = { filename = "esbuild-npm-0.25.12-352393c4bd-c205357531.zip"; hash = "sha512-wgU1dTFCMiCp3o4ebGUUJCvJsWZudizWfM34/f3D8dC9dvjZODlYuXrUyVPv23tujB+cpZUc0rfFI16HVbNKaw=="; };
+"js-tokens@npm:4.0.0" = { filename = "js-tokens-npm-4.0.0-0ac852e9e2-e248708d37.zip"; hash = "sha512-4khwjTd6oFjqzyA3sH3thHeQ5t6JK7rT2sCrui51nLnxIbAAmaZRlWFrrctuyo0U2XXLPonrHP2mRHVkAsiu7Q=="; };
+"loose-envify@npm:1.4.0" = { filename = "loose-envify-npm-1.4.0-6307b72ccf-655d110220.zip"; hash = "sha512-ZV0RAiCYPBpLnAxnmi6AFtS2f26ce1Q1/1l57Nsg0IE/TewKCGdPy91IRqPwftu1CjaBH9N5MLlKqg2drOsBfg=="; };
+"react@npm:18.3.1" = { filename = "react-npm-18.3.1-af38f3c1ae-283e8c5efc.zip"; hash = "sha512-KD6MXvzzeALJ0c52fzAt1Wndl6cNm7jHvnmnibmQJFHg0WM0sF1zKZsg8EjLw8fSiLu94QtwH6GU4gicI32+ow=="; };
 "typescript@npm:7.0.2" = { filename = "typescript-npm-7.0.2-0bde2bcec5-3dcee51ec8.zip"; hash = "sha512-Pc7lHsjDMkkjJbzb999ItmZodR8SfmIq59QbbHFusZGEQkpF4U93UPUPNAIyOItp5ih4WRVfBqXOLfdvEssxzw=="; };
 "typescript@patch:typescript@npm%3A7.0.2#optional!builtin<compat/typescript>::version=7.0.2&hash=3bafbf" = { filename = "typescript-patch-4859cbaf66-6b3cdc369c.zip"; hash = "sha512-azzcNpzYKdRuAHNOpkIz7oRBnCglrY/kCJFa3ed6vO1LeiQB9+7VF9VKek9dHBhpdTy5kBjfHCFZx2HZ8zSDpg=="; };
 "undici-types@npm:7.18.2" = { filename = "undici-types-npm-7.18.2-3e6d69d829-85a7918911.zip"; hash = "sha512-haeRiRE6I4lZ16ZHNo5PfFVZw6QE69uPxEiBRc6UJvzYIlKoRKMCeY38Djfm+xeP9IHtA7xMr2NMV1fZ70NSHQ=="; };

yarn.lock

@@ -213,14 +213,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=a998690446ecf647e3af78e369492c1a3663b66d":
+"@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=cd2b04dc8c2daeea633bf8ecdd31d20fdc41f2ab":
   version: 0.1.0
-  resolution: "@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=a998690446ecf647e3af78e369492c1a3663b66d"
+  resolution: "@quixos/camino-package-runtime@https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=cd2b04dc8c2daeea633bf8ecdd31d20fdc41f2ab"
   dependencies:
     "@bufbuild/protobuf": "npm:^2.12.1"
     "@connectrpc/connect": "npm:^2.1.2"
     "@connectrpc/connect-node": "npm:^2.1.2"
-  checksum: 10c0/c90d5d5c5311da4fb16e491adabae1b0072b40566524064460cd21ab01b3755e5127e7e14048770448283e22f6cb1af1ba5538ce0fe3b23f014c1151a757deca
+  checksum: 10c0/7872db96f52fee3cc6278e69f63ecf63952c2bbe0e7b2669d99dfaac2e648b40651945e0087033789e98bda5a8bfae38df79122c94fd36392870e81469c56f66
   languageName: node
   linkType: hard
 
@@ -228,9 +228,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@quixos/todo-react-runtime@workspace:."
   dependencies:
-    "@quixos/camino-package-runtime": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=a998690446ecf647e3af78e369492c1a3663b66d"
+    "@quixos/camino-package-runtime": "https://gitea-external.egads.tutti.syntaxblitz.net/quixos/camino-package-runtime.git#commit=cd2b04dc8c2daeea633bf8ecdd31d20fdc41f2ab"
     "@types/node": "npm:^24"
+    "@types/react": "npm:^18.3.12"
     esbuild: "npm:^0.25.12"
+    react: "npm:^18.3.1"
     typescript: "npm:^7.0.2"
   bin:
     server: dist/server.js
@@ -246,6 +248,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:*":
+  version: 15.7.15
+  resolution: "@types/prop-types@npm:15.7.15"
+  checksum: 10c0/b59aad1ad19bf1733cf524fd4e618196c6c7690f48ee70a327eb450a42aab8e8a063fbe59ca0a5701aebe2d92d582292c0fb845ea57474f6a15f6994b0e260b2
+  languageName: node
+  linkType: hard
+
+"@types/react@npm:^18.3.12":
+  version: 18.3.31
+  resolution: "@types/react@npm:18.3.31"
+  dependencies:
+    "@types/prop-types": "npm:*"
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/44180549dd045f536ececd39e39aacdf828e76adc1c4a90b132f453e23cc370c4648d9102ae401172ebd8fd8b1977a901a39e214e53ec77171b27514b588c179
+  languageName: node
+  linkType: hard
+
 "@typescript/typescript-aix-ppc64@npm:7.0.2":
   version: 7.0.2
   resolution: "@typescript/typescript-aix-ppc64@npm:7.0.2"
@@ -386,6 +405,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
+  languageName: node
+  linkType: hard
+
 "esbuild@npm:^0.25.12":
   version: 0.25.12
   resolution: "esbuild@npm:0.25.12"
@@ -475,6 +501,33 @@ __metadata:
   languageName: node
   linkType: hard
 
+"js-tokens@npm:^3.0.0 || ^4.0.0":
+  version: 4.0.0
+  resolution: "js-tokens@npm:4.0.0"
+  checksum: 10c0/e248708d377aa058eacf2037b07ded847790e6de892bbad3dac0abba2e759cb9f121b00099a65195616badcb6eca8d14d975cb3e89eb1cfda644756402c8aeed
+  languageName: node
+  linkType: hard
+
+"loose-envify@npm:^1.1.0":
+  version: 1.4.0
+  resolution: "loose-envify@npm:1.4.0"
+  dependencies:
+    js-tokens: "npm:^3.0.0 || ^4.0.0"
+  bin:
+    loose-envify: cli.js
+  checksum: 10c0/655d110220983c1a4b9c0c679a2e8016d4b67f6e9c7b5435ff5979ecdb20d0813f4dec0a08674fcbdd4846a3f07edbb50a36811fd37930b94aaa0d9daceb017e
+  languageName: node
+  linkType: hard
+
+"react@npm:^18.3.1":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
+  languageName: node
+  linkType: hard
+
 "typescript@npm:^7.0.2":
   version: 7.0.2
   resolution: "typescript@npm:7.0.2"