@norskvideo/ctl-sdk 0.1.29 → 0.1.31

package/components/ProductTemplateBuildForm.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 /**
  * Configure-iframe form. Produces a *product template*, NOT a running instance.
  * Two submit paths:
@@ -29,7 +30,7 @@ export type ProductTemplateBuildOutcome<TProductTemplate> = {
     ok: false;
     error: string;
 };
-export declare function ProductTemplateBuildForm<TProductTemplate>({ productName, configScreenUrl, onClose, onSubmit, onSaved, onSavedAndLaunch, onRequirements, }: {
+export declare function ProductTemplateBuildForm<TProductTemplate>({ productName, configScreenUrl, onClose, sections, onSubmit, onSaved, onSavedAndLaunch, onRequirements, }: {
     productName: string;
     configScreenUrl: string | null;
     onClose: () => void;
@@ -41,6 +42,13 @@ export declare function ProductTemplateBuildForm<TProductTemplate>({ productName
      * runner stores on disk; manager submits to manager-daemon. Returns the
      * resulting product-template record (consumer-defined shape) on success.
      */
+    /** Runner-owned sections (placement policy, template variables, assets)
+     *  rendered BETWEEN the product's config screen and Custom defaults — after
+     *  what the product asks for, before the runner's advanced knobs. They live
+     *  inside this form rather than above it so the whole create flow reads as
+     *  one thing; floating them above the panel made them look unrelated to the
+     *  form they are part of. */
+    sections?: ReactNode;
     onSubmit: (req: ProductTemplateBuildRequest) => Promise<ProductTemplateBuildOutcome<TProductTemplate>>;
     /** Save-only: product template persisted, form closes. */
     onSaved?: (productTemplate: TProductTemplate) => void;

package/components/ProductTemplateBuildForm.js

@@ -34,7 +34,7 @@ function assembleAdvancedDefaults(d) {
         out.openFileLimit = { default: limit };
     return Object.keys(out).length > 0 ? out : undefined;
 }
-export function ProductTemplateBuildForm({ productName, configScreenUrl, onClose, onSubmit, onSaved, onSavedAndLaunch, onRequirements, }) {
+export function ProductTemplateBuildForm({ productName, configScreenUrl, onClose, sections, onSubmit, onSaved, onSavedAndLaunch, onRequirements, }) {
     const { Button, Input, Label } = useUIPrimitives();
     const [productTemplateName, setProductTemplateName] = useState("");
     // The iframe can suggest a name derived from its current choices (#317).
@@ -118,5 +118,5 @@ export function ProductTemplateBuildForm({ productName, configScreenUrl, onClose
     return (_jsxs("div", { className: "mb-6 rounded-lg border border-zinc-700 bg-zinc-900 p-4", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("div", { children: [_jsxs("h4", { className: "text-sm font-semibold text-zinc-100", children: ["Create ", productName, " product template"] }), _jsx("p", { className: "text-xs text-zinc-500 mt-0.5", children: "Saves a reusable product template. Launch instances from it later." })] }), _jsx("button", { type: "button", onClick: onClose, className: "text-zinc-500 hover:text-zinc-300", children: _jsx(X, { size: 14 }) })] }), _jsxs("form", { onSubmit: handleSave, className: "space-y-4", children: [_jsxs("div", { children: [_jsx(Label, { children: "Product template name *" }), _jsx(Input, { value: productTemplateName, onChange: (e) => {
                                     setNameTouched(true);
                                     setProductTemplateName(e.target.value);
-                                }, placeholder: suggestedName || `e.g. ${productName}-prod`, required: true }), productTemplateNameError ? (_jsx("p", { className: "text-xs text-red-400 mt-1", children: productTemplateNameError })) : (_jsx("p", { className: "text-xs text-zinc-500 mt-1", children: "Lowercase letters, numbers, and hyphens only. Used to launch instances later." }))] }), configScreenUrl ? (_jsx(ProductIframe, { ref: iframeRef, productName: productName, configScreenUrl: configScreenUrl, onValidityChange: (v) => setIframeValid(v), onSuggestName: handleSuggestName, ...(onRequirements ? { onRequirements } : {}) })) : (_jsxs("p", { className: "text-xs text-zinc-500", children: ["Product manifest does not declare ", _jsx("code", { children: "ui.configScreenUrl" }), " \u2014 nothing to configure."] })), _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setDefaultsOpen((v) => !v), className: "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-zinc-500 hover:text-zinc-300", children: [defaultsOpen ? _jsx(ChevronDown, { size: 12 }) : _jsx(ChevronRight, { size: 12 }), "Custom defaults"] }), defaultsOpen && (_jsxs("div", { className: "mt-2", children: [_jsx("p", { className: "text-xs text-zinc-500 mb-2", children: "Launch-form defaults baked into this template's manifest. Operators can still override them per instance." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Network mode" }), _jsxs("select", { "aria-label": "Network mode", value: advancedDraft.networkMode, onChange: (e) => patchDraft({ networkMode: e.target.value }), className: "block rounded border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm text-zinc-100", children: [_jsx("option", { value: "", children: "product default" }), _jsx("option", { value: "docker", children: "docker" }), _jsx("option", { value: "hybrid", children: "hybrid" })] })] }), _jsxs("div", { className: "min-w-[14rem] flex-1", children: [_jsx(Label, { children: "Host ports" }), _jsx(Input, { "aria-label": "Host ports", placeholder: "e.g. 1935, 5001/udp, 9000:80@svc", value: advancedDraft.hostPorts, onChange: (e) => patchDraft({ hostPorts: e.target.value }) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Container user" }), _jsx(Input, { "aria-label": "Container user", placeholder: "uid:gid", value: advancedDraft.containerUser, onChange: (e) => patchDraft({ containerUser: e.target.value }), className: "w-28" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Shared memory size" }), _jsx(Input, { "aria-label": "Shared memory size", placeholder: "e.g. 8gb", value: advancedDraft.shmSize, onChange: (e) => patchDraft({ shmSize: e.target.value }), className: "w-24" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Open file limit" }), _jsx(Input, { "aria-label": "Open file limit", type: "number", min: 1024, max: 1048576, placeholder: "runner default", value: advancedDraft.openFileLimit, onChange: (e) => patchDraft({ openFileLimit: e.target.value }), className: "w-32" })] })] })] }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "primary", disabled: !canSubmit, onClick: handleSaveAndLaunch, children: submitting ? "Working…" : "Save & Launch…" }), _jsx(Button, { type: "submit", variant: "default", disabled: !canSubmit, children: "Save" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onClose, children: "Cancel" })] })] })] }));
+                                }, placeholder: suggestedName || `e.g. ${productName}-prod`, required: true }), productTemplateNameError ? (_jsx("p", { className: "text-xs text-red-400 mt-1", children: productTemplateNameError })) : (_jsx("p", { className: "text-xs text-zinc-500 mt-1", children: "Lowercase letters, numbers, and hyphens only. Used to launch instances later." }))] }), configScreenUrl ? (_jsx(ProductIframe, { ref: iframeRef, productName: productName, configScreenUrl: configScreenUrl, onValidityChange: (v) => setIframeValid(v), onSuggestName: handleSuggestName, ...(onRequirements ? { onRequirements } : {}) })) : (_jsxs("p", { className: "text-xs text-zinc-500", children: ["Product manifest does not declare ", _jsx("code", { children: "ui.configScreenUrl" }), " \u2014 nothing to configure."] })), sections, _jsxs("div", { children: [_jsxs("button", { type: "button", onClick: () => setDefaultsOpen((v) => !v), className: "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-widest text-zinc-500 hover:text-zinc-300", children: [defaultsOpen ? _jsx(ChevronDown, { size: 12 }) : _jsx(ChevronRight, { size: 12 }), "Custom defaults"] }), defaultsOpen && (_jsxs("div", { className: "mt-2", children: [_jsx("p", { className: "text-xs text-zinc-500 mb-2", children: "Launch-form defaults baked into this template's manifest. Operators can still override them per instance." }), _jsxs("div", { className: "flex flex-wrap gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: "Network mode" }), _jsxs("select", { "aria-label": "Network mode", value: advancedDraft.networkMode, onChange: (e) => patchDraft({ networkMode: e.target.value }), className: "block rounded border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm text-zinc-100", children: [_jsx("option", { value: "", children: "product default" }), _jsx("option", { value: "docker", children: "docker" }), _jsx("option", { value: "hybrid", children: "hybrid" })] })] }), _jsxs("div", { className: "min-w-[14rem] flex-1", children: [_jsx(Label, { children: "Host ports" }), _jsx(Input, { "aria-label": "Host ports", placeholder: "e.g. 1935, 5001/udp, 9000:80@svc", value: advancedDraft.hostPorts, onChange: (e) => patchDraft({ hostPorts: e.target.value }) })] }), _jsxs("div", { children: [_jsx(Label, { children: "Container user" }), _jsx(Input, { "aria-label": "Container user", placeholder: "uid:gid", value: advancedDraft.containerUser, onChange: (e) => patchDraft({ containerUser: e.target.value }), className: "w-28" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Shared memory size" }), _jsx(Input, { "aria-label": "Shared memory size", placeholder: "e.g. 8gb", value: advancedDraft.shmSize, onChange: (e) => patchDraft({ shmSize: e.target.value }), className: "w-24" })] }), _jsxs("div", { children: [_jsx(Label, { children: "Open file limit" }), _jsx(Input, { "aria-label": "Open file limit", type: "number", min: 1024, max: 1048576, placeholder: "runner default", value: advancedDraft.openFileLimit, onChange: (e) => patchDraft({ openFileLimit: e.target.value }), className: "w-32" })] })] })] }))] }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { type: "button", variant: "primary", disabled: !canSubmit, onClick: handleSaveAndLaunch, children: submitting ? "Working…" : "Save & Launch…" }), _jsx(Button, { type: "submit", variant: "default", disabled: !canSubmit, children: "Save" }), _jsx(Button, { type: "button", variant: "ghost", onClick: onClose, children: "Cancel" })] })] })] }));
 }

package/components/SectionFold.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+export interface SectionFoldProps {
+    name: string;
+    summary: string;
+    /** Amber the summary — an unsatisfied requirement, an invalid row. */
+    warn?: boolean;
+    defaultOpen?: boolean;
+    /** Rendered beside the header, OUTSIDE the toggle button (a button cannot
+     *  legally nest another one). */
+    action?: ReactNode;
+    children: ReactNode;
+}
+export declare function SectionFold({ name, summary, warn, defaultOpen, action, children, }: SectionFoldProps): ReactNode;

package/components/SectionFold.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A named, collapsible sub-editor whose header carries a one-line summary of
+// what is set inside ("summary-first sections").
+//
+// Shared because it is the visual grammar of every multi-section form in the
+// manager — the production composer's runtime cards, the product-template
+// create panel — and a form that does not use it reads as belonging to a
+// different application. norsk-ctl will want the same.
+//
+// The toggle is a button, so tests and keyboards address a section by name;
+// `action` sits beside it for controls that must not nest inside a button.
+//
+// `defaultOpen` is worth thinking about rather than defaulting: a closed
+// section whose summary names content the operator can edit reads as "here it
+// is, and you may not change it" — which is exactly how the Assets section was
+// reported as broken on 2026-09-02.
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { useState } from "react";
+export function SectionFold({ name, summary, warn, defaultOpen = false, action, children, }) {
+    const [open, setOpen] = useState(defaultOpen);
+    return (_jsxs("div", { className: "border-t border-zinc-800/60 first:border-t-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "-mx-1 flex w-full items-center gap-2 rounded px-1 py-2 text-left hover:bg-zinc-800/30", children: [open ? (_jsx(ChevronDown, { size: 12, className: "shrink-0 text-zinc-500" })) : (_jsx(ChevronRight, { size: 12, className: "shrink-0 text-zinc-500" })), _jsx("span", { className: "w-24 shrink-0 text-[10px] font-semibold uppercase tracking-widest text-zinc-400", children: name }), _jsx("span", { className: `min-w-0 flex-1 truncate text-xs ${warn ? "text-amber-400" : "text-zinc-500"}`, children: summary })] }), action] }), open && _jsx("div", { className: "pb-3 pl-5", children: children })] }));
+}

package/components/VariableRowsEditor.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+export interface VariableRow {
+    /** Stable across re-renders: rows are removable and the inputs are
+     *  controlled, so keying by index makes a removal move the row below into
+     *  the wrong state. */
+    id: string;
+    name: string;
+    value: string;
+    /** Only meaningful when `showBackup` is set; blank means "same as primary". */
+    backupValue?: string;
+}
+export declare function newVariableRow(): VariableRow;
+export interface VariableRowsEditorProps {
+    rows: VariableRow[];
+    onChange: (rows: VariableRow[]) => void;
+    /** Why this row's name is unusable, or undefined. Called per row in order,
+     *  so the implementation may track names it has already seen. */
+    nameError?: (name: string, index: number) => string | undefined;
+    /** Render the backup-value column (a production launching a backup copy). */
+    showBackup?: boolean;
+    addLabel?: string;
+    namePlaceholder?: string;
+}
+export declare function VariableRowsEditor({ rows, onChange, nameError, showBackup, addLabel, namePlaceholder, }: VariableRowsEditorProps): ReactNode;

package/components/VariableRowsEditor.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Free-form environment-variable rows: NAME, a value, and (optionally) the
+// value the backup replica should use instead.
+//
+// Shared because this is the same editor in two places that otherwise cannot
+// share a form. The production composer uses it for variables the operator adds
+// beyond what the product template declares; the product-template create panel
+// uses it for the whole template tier, because at CREATION TIME there is no
+// declared parameter list to tabulate — the tar has not been built yet. That
+// asymmetry is why the composer's parameter TABLE cannot be reused here, and
+// why this row editor is the part that can.
+//
+// Controlled, and name validation is injected: the reserved-prefix and
+// uniqueness rules are the manager's vocabulary, not the SDK's.
+import { Plus, Trash2 } from "lucide-react";
+import { useUIPrimitives } from "./ui-primitives.js";
+let seq = 0;
+export function newVariableRow() {
+    seq += 1;
+    return { id: `var-${seq}`, name: "", value: "" };
+}
+export function VariableRowsEditor({ rows, onChange, nameError, showBackup = false, addLabel = "Add variable", namePlaceholder = "MY_VAR", }) {
+    const { Button, Input } = useUIPrimitives();
+    const errors = rows.map((r, i) => nameError?.(r.name, i));
+    const update = (id, patch) => onChange(rows.map((r) => (r.id === id ? { ...r, ...patch } : r)));
+    return (_jsxs("div", { className: "space-y-1.5", children: [rows.map((row, i) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-48 shrink-0", children: _jsx(Input, { "aria-label": "variable name", className: "font-mono", placeholder: namePlaceholder, value: row.name, 
+                                    // Env-var names are conventionally upper-case; doing it here
+                                    // saves the operator shouting and keeps the two hosts identical.
+                                    onChange: (e) => update(row.id, { name: e.target.value.toUpperCase() }) }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Input, { "aria-label": `value for ${row.name || "new variable"}`, placeholder: "value", value: row.value, onChange: (e) => update(row.id, { value: e.target.value }) }) }), showBackup && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(Input, { "aria-label": `backup value for ${row.name || "new variable"}`, placeholder: "same as primary", value: row.backupValue ?? "", onChange: (e) => update(row.id, { backupValue: e.target.value }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `remove variable ${row.name || "row"}`, onClick: () => onChange(rows.filter((r) => r.id !== row.id)), children: _jsx(Trash2, { size: 13 }) })] }), errors[i] && _jsx("p", { className: "mt-0.5 text-xs text-amber-400", children: errors[i] })] }, row.id))), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onChange([...rows, newVariableRow()]), children: [_jsx(Plus, { size: 12 }), " ", addLabel] })] }));
+}

package/components/WorkdirAssetsEditor.d.ts

@@ -0,0 +1,64 @@
+import type { WorkdirFetchEntry } from "@norskvideo/ctl-product-template-schema/workdir-fetch";
+import { type ReactNode } from "react";
+/** Where Studio keeps the documents it can open. A workflow is just an asset
+ *  landing here — note `workflow.yml` exactly is the runner's read-only mount
+ *  and is therefore refused by the path check. */
+export declare const STUDIO_SAVE_FILES = "studio-save-files";
+/** Where the working directory appears inside the containers. */
+export declare const WORKDIR_MOUNT = "/data";
+/** What the host's upload returns: a stored blob the entry can point at. */
+export interface UploadedWorkdirAsset {
+    /** Reference the manager understands (`mgr:<sha256>`). */
+    url: string;
+    sha256: string;
+    filename: string;
+    sizeBytes: number;
+}
+/** An entry plus the two fields only the form needs. Both are stripped by
+ *  `toWorkdirFetchEntries`, so neither can ride the wire.
+ *
+ *  `rowId` exists because the destination is editable and rows are removable:
+ *  keying the list by index makes React reuse an input across a removal, so
+ *  deleting a middle row visibly moves the row below it into the wrong state. */
+export type WorkdirAssetRow = WorkdirFetchEntry & {
+    rowId: string;
+    sizeBytes?: number;
+};
+/** Stored entries -> editable rows. */
+export declare function toWorkdirAssetRows(entries: readonly WorkdirFetchEntry[] | undefined): WorkdirAssetRow[];
+/** Editable rows -> what the API stores. */
+export declare function toWorkdirFetchEntries(rows: readonly WorkdirAssetRow[]): WorkdirFetchEntry[];
+/** The path as the container sees it — what the operator actually cares about,
+ *  since that is what a product will open. */
+export declare function containerPath(path: string): string;
+export declare function describeWorkdirSource(url: string): string;
+export declare function formatBytes(n: number): string;
+/** Per-row problems, or undefined where the row is fine. Exported so a
+ *  containing form can gate its own submit on the same rules the server
+ *  applies — a form must not offer to save a list the API will reject. */
+export declare function workdirAssetRowErrors(rows: readonly WorkdirFetchEntry[]): (string | undefined)[];
+export interface WorkdirAssetsEditorProps {
+    rows: WorkdirAssetRow[];
+    onChange: (rows: WorkdirAssetRow[]) => void;
+    /** Store a file and return the reference an entry points at. The host owns
+     *  the transport (and its size cap); this form only decides destinations. */
+    onUpload: (file: File) => Promise<UploadedWorkdirAsset>;
+    /** Surface an upload failure in the host's own way (a toast, a banner). */
+    onError?: (message: string) => void;
+    /** Offer workflow upload (into the workdir's studio-save-files/). For Norsk
+     *  Studio itself; an appliance generates its one workflow and has nothing to
+     *  select. */
+    allowWorkflowUploads?: boolean;
+    /** Offer the working-directory asset rows at all. Absent = true: every
+     *  product gets a working directory, so the asset surface is universal and a
+     *  product opts OUT rather than in (manifest `supportsCustomAssets`). */
+    allowAssetUploads?: boolean;
+    /** `null` suppresses it — for a host whose SectionFold already names the
+     *  section, where a second heading is just noise. */
+    label?: string | null;
+    description?: ReactNode;
+    /** Rendered beside the URL field — hosts use it for a "what can I type here"
+     *  interpolation hint, which is manager vocabulary rather than SDK. */
+    urlHint?: ReactNode;
+}
+export declare function WorkdirAssetsEditor({ rows, onChange, onUpload, onError, allowWorkflowUploads, allowAssetUploads, label, description, urlHint, }: WorkdirAssetsEditorProps): ReactNode;

package/components/WorkdirAssetsEditor.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The zod-free half: a browser bundle validates destinations without pulling a
+// schema library in, while still using the exact rules the server enforces.
+import { checkWorkdirPath } from "@norskvideo/ctl-product-template-schema/workdir-path";
+import { FileUp, Link2, Trash2 } from "lucide-react";
+import { useRef, useState } from "react";
+import { useUIPrimitives } from "./ui-primitives.js";
+/** Where Studio keeps the documents it can open. A workflow is just an asset
+ *  landing here — note `workflow.yml` exactly is the runner's read-only mount
+ *  and is therefore refused by the path check. */
+export const STUDIO_SAVE_FILES = "studio-save-files";
+/** Where the working directory appears inside the containers. */
+export const WORKDIR_MOUNT = "/data";
+let rowSeq = 0;
+const nextRowId = () => {
+    rowSeq += 1;
+    return `asset-${rowSeq}`;
+};
+/** Stored entries -> editable rows. */
+export function toWorkdirAssetRows(entries) {
+    return (entries ?? []).map((e) => ({ ...e, rowId: nextRowId() }));
+}
+/** Editable rows -> what the API stores. */
+export function toWorkdirFetchEntries(rows) {
+    return rows.map(({ rowId: _rowId, sizeBytes: _sizeBytes, ...entry }) => entry);
+}
+/** The path as the container sees it — what the operator actually cares about,
+ *  since that is what a product will open. */
+export function containerPath(path) {
+    const checked = checkWorkdirPath(path);
+    return `${WORKDIR_MOUNT}/${checked.ok ? checked.path : path}`;
+}
+export function describeWorkdirSource(url) {
+    if (url.startsWith("mgr:"))
+        return "uploaded";
+    if (url.startsWith("s3://"))
+        return "S3";
+    return "URL";
+}
+export function formatBytes(n) {
+    if (n < 1024)
+        return `${n} B`;
+    const units = ["KB", "MB", "GB", "TB"];
+    let value = n / 1024;
+    let i = 0;
+    while (value >= 1024 && i < units.length - 1) {
+        value /= 1024;
+        i++;
+    }
+    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[i]}`;
+}
+const SOURCE_PATTERN = /^(mgr:|s3:\/\/|https:\/\/|http:\/\/)/;
+/** Per-row problems, or undefined where the row is fine. Exported so a
+ *  containing form can gate its own submit on the same rules the server
+ *  applies — a form must not offer to save a list the API will reject. */
+export function workdirAssetRowErrors(rows) {
+    const counts = new Map();
+    for (const r of rows) {
+        const checked = checkWorkdirPath(r.path);
+        const key = checked.ok ? checked.path : r.path;
+        counts.set(key, (counts.get(key) ?? 0) + 1);
+    }
+    return rows.map((r) => {
+        const checked = checkWorkdirPath(r.path);
+        if (!checked.ok)
+            return checked.problem.message;
+        // Within ONE tier a repeated destination is a mistake, not an override:
+        // there is no precedence to appeal to, so say so.
+        if ((counts.get(checked.path) ?? 0) > 1)
+            return "two assets target this destination";
+        if (!SOURCE_PATTERN.test(r.url))
+            return "source must be an s3:// or https:// URL";
+        return undefined;
+    });
+}
+export function WorkdirAssetsEditor({ rows, onChange, onUpload, onError, allowWorkflowUploads = false, allowAssetUploads = true, label = "Working-directory assets", description, urlHint, }) {
+    const { Button, Input, Label } = useUIPrimitives();
+    const [url, setUrl] = useState("");
+    const [uploading, setUploading] = useState(false);
+    const fileInput = useRef(null);
+    const workflowInput = useRef(null);
+    const errors = workdirAssetRowErrors(rows);
+    async function handleFiles(files, prefix, input) {
+        if (!files || files.length === 0)
+            return;
+        setUploading(true);
+        try {
+            const added = [];
+            for (const file of Array.from(files)) {
+                const stored = await onUpload(file);
+                // Default the destination to the bare filename, so it lands at
+                // /data/<file> — where a product's file picker looks. The studio
+                // section passes a prefix so workflows land where Studio lists them.
+                added.push({
+                    rowId: nextRowId(),
+                    path: `${prefix}${stored.filename}`,
+                    url: stored.url,
+                    name: stored.filename,
+                    sha256: stored.sha256,
+                    sizeBytes: stored.sizeBytes,
+                });
+            }
+            onChange([...rows, ...added]);
+        }
+        catch (e) {
+            onError?.(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            setUploading(false);
+            if (input)
+                input.value = "";
+        }
+    }
+    function addUrl() {
+        const trimmed = url.trim();
+        if (trimmed === "")
+            return;
+        const basename = trimmed.split("?")[0]?.split("/").pop() ?? "asset";
+        onChange([...rows, { rowId: nextRowId(), path: basename, url: trimmed }]);
+        setUrl("");
+    }
+    const update = (i, patch) => onChange(rows.map((r, j) => (j === i ? { ...r, ...patch } : r)));
+    return (_jsxs("div", { children: [label !== null && _jsx(Label, { children: label }), _jsx("p", { className: "mb-2 text-xs text-zinc-500", children: description ?? (_jsxs(_Fragment, { children: ["Files placed in the runtime's working directory before it starts. The working directory is mounted at", " ", _jsx("code", { className: "font-mono", children: WORKDIR_MOUNT }), " inside the containers."] })) }), rows.length === 0 && _jsx("p", { className: "mb-2 text-xs text-zinc-600", children: "Nothing attached." }), rows.length > 0 && (_jsx("div", { className: "mb-3 space-y-1.5", children: rows.map((row, i) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { "aria-label": `destination for ${row.name ?? row.url}`, className: "flex-1 font-mono", placeholder: "bumper.mp4", value: row.path, onChange: (e) => update(i, { path: e.target.value }) }), _jsx("span", { className: "shrink-0 text-[9px] uppercase tracking-widest text-zinc-500", children: describeWorkdirSource(row.url) }), row.sizeBytes !== undefined && (_jsx("span", { className: "shrink-0 text-xs text-zinc-500", children: formatBytes(row.sizeBytes) })), _jsxs("label", { className: "flex shrink-0 items-center gap-1 text-xs text-zinc-500", title: "A missing object is skipped instead of failing the launch \u2014 for a per-event URL that may not exist yet", children: [_jsx("input", { type: "checkbox", "aria-label": `${row.path} is optional`, checked: row.optional === true, onChange: (e) => update(i, { optional: e.target.checked }) }), "optional"] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", "aria-label": `remove asset ${row.path || "row"}`, onClick: () => onChange(rows.filter((_, j) => j !== i)), children: _jsx(Trash2, { size: 13 }) })] }), _jsxs("div", { className: "mt-0.5 flex gap-3 pl-1 text-xs", children: [errors[i] ? (_jsx("span", { className: "text-amber-400", children: errors[i] })) : (_jsx("span", { className: "font-mono text-zinc-600", children: containerPath(row.path) })), !row.url.startsWith("mgr:") && _jsxs("span", { className: "truncate text-zinc-600", children: ["\u2190 ", row.url] })] })] }, row.rowId))) })), allowAssetUploads && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("input", { ref: fileInput, type: "file", multiple: true, "aria-label": "upload assets", className: "hidden", onChange: (e) => void handleFiles(e.target.files, "", fileInput.current) }), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", disabled: uploading, onClick: () => fileInput.current?.click(), children: [_jsx(FileUp, { size: 12 }), " ", uploading ? "Uploading…" : "Upload file"] }), _jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsx(Input, { "aria-label": "asset URL", className: "flex-1 font-mono", placeholder: "s3://rundowns/${production}/media.ts", value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === "Enter") {
+                                        e.preventDefault();
+                                        addUrl();
+                                    }
+                                } }), urlHint, _jsxs(Button, { type: "button", size: "sm", variant: "ghost", disabled: url.trim() === "", onClick: addUrl, children: [_jsx(Link2, { size: 12 }), " Add URL"] })] })] })), allowAssetUploads && (_jsx("p", { className: "mt-1 text-xs text-zinc-600", children: "Large media belongs behind a URL \u2014 the node fetches it directly, and identical files are downloaded once per node however many runtimes share them. Uploads are for small files and are capped." })), allowWorkflowUploads && (_jsxs("div", { className: "mt-4 border-t border-zinc-800/60 pt-3", children: [_jsx(Label, { children: "Studio workflows" }), _jsxs("p", { className: "mb-2 text-xs text-zinc-500", children: ["Workflow documents land in", " ", _jsxs("code", { className: "font-mono", children: [WORKDIR_MOUNT, "/", STUDIO_SAVE_FILES] }), ", where Studio lists them for the operator to open."] }), _jsx("input", { ref: workflowInput, type: "file", multiple: true, accept: ".yml,.yaml,.json", "aria-label": "upload workflows", className: "hidden", onChange: (e) => void handleFiles(e.target.files, `${STUDIO_SAVE_FILES}/`, workflowInput.current) }), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", disabled: uploading, onClick: () => workflowInput.current?.click(), children: [_jsx(FileUp, { size: 12 }), " Upload workflow"] }), _jsxs("p", { className: "mt-1 text-xs text-zinc-600", children: [_jsxs("code", { className: "font-mono", children: [STUDIO_SAVE_FILES, "/workflow.yml"] }), " exactly is reserved: a product template that ships one mounts it read-only and runs Studio headless against it, so an upload cannot use that name."] })] }))] }));
+}

package/components/index.d.ts

@@ -1,6 +1,9 @@
 export { type ComposeLayer, ComposeLayerPreview, type ComposeLayerPreviewProps } from "./ComposeLayerPreview.js";
 export { ProductIframe, type ProductIframeHandle, type SubmitResult } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, type ProductTemplateBuildOutcome, type ProductTemplateBuildRequest, } from "./ProductTemplateBuildForm.js";
+export { SectionFold, type SectionFoldProps } from "./SectionFold.js";
 export { ShotBar, type ShotBarProps } from "./ShotBar.js";
 export { graphicResolvable, hideReasonLabel, type PrepareTakeOptions, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
 export { type ButtonProps, type ButtonSize, type ButtonVariant, type InputProps, type LabelProps, type UIPrimitives, UIPrimitivesProvider, useUIPrimitives, } from "./ui-primitives.js";
+export { newVariableRow, type VariableRow, VariableRowsEditor, type VariableRowsEditorProps, } from "./VariableRowsEditor.js";
+export { containerPath, describeWorkdirSource, formatBytes, STUDIO_SAVE_FILES, toWorkdirAssetRows, toWorkdirFetchEntries, type UploadedWorkdirAsset, WORKDIR_MOUNT, type WorkdirAssetRow, WorkdirAssetsEditor, type WorkdirAssetsEditorProps, workdirAssetRowErrors, } from "./WorkdirAssetsEditor.js";

package/components/index.js

@@ -1,6 +1,9 @@
 export { ComposeLayerPreview } from "./ComposeLayerPreview.js";
 export { ProductIframe } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, } from "./ProductTemplateBuildForm.js";
+export { SectionFold } from "./SectionFold.js";
 export { ShotBar } from "./ShotBar.js";
 export { graphicResolvable, hideReasonLabel, prepareTake, resolveGraphicUrl, } from "./shot-bar-view-model.js";
 export { UIPrimitivesProvider, useUIPrimitives, } from "./ui-primitives.js";
+export { newVariableRow, VariableRowsEditor, } from "./VariableRowsEditor.js";
+export { containerPath, describeWorkdirSource, formatBytes, STUDIO_SAVE_FILES, toWorkdirAssetRows, toWorkdirFetchEntries, WORKDIR_MOUNT, WorkdirAssetsEditor, workdirAssetRowErrors, } from "./WorkdirAssetsEditor.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-sdk",
-  "version": "0.1.29",
+  "version": "0.1.31",
   "type": "module",
   "exports": {
     ".": {
@@ -42,7 +42,7 @@
     "lucide-react": "^0.483.0",
     "react": "^19.0.0",
     "react-hot-toast": "^2.4.1",
-    "zod": "^4.3.6"
+    "zod": "4.4.3"
   },
   "publishConfig": {
     "access": "public"

package/product-template-parsing.js

@@ -1,4 +1,5 @@
 import { ProductTemplateManifestSchema } from "@norskvideo/ctl-product-template-schema";
+import { WorkdirFetchListSchema } from "@norskvideo/ctl-product-template-schema/workdir-fetch";
 export class ProductTemplatesParseError extends Error {
     constructor(path, reason) {
         super(`Failed to parse ${path}: ${reason}`);
@@ -57,6 +58,17 @@ export function parseProductTemplatesFile(raw, path) {
             entry.suggestedSecurityGroups.every((l) => typeof l === "string")) {
             rec.suggestedSecurityGroups = entry.suggestedSecurityGroups;
         }
+        // Assets are validated by the schema rather than shape-sniffed: a
+        // malformed entry here would launch a production silently missing its
+        // media, so a bad list is dropped loudly by the writer, not tolerated.
+        if (Array.isArray(entry.assets)) {
+            const assetsParse = WorkdirFetchListSchema.safeParse(entry.assets);
+            if (!assetsParse.success) {
+                throw new ProductTemplatesParseError(path, `${where}.assets is invalid: ${assetsParse.error.message}`);
+            }
+            if (assetsParse.data.length > 0)
+                rec.assets = assetsParse.data;
+        }
         if (isRecord(entry.source)) {
             if (entry.source.kind === "import" && typeof entry.source.fromFile === "string") {
                 rec.source = { kind: "import", fromFile: entry.source.fromFile };

package/product-template-record.d.ts

@@ -1,4 +1,5 @@
 import type { ProductTemplateManifest, ProductTemplateParameter } from "@norskvideo/ctl-product-template-schema";
+import type { WorkdirFetchList } from "@norskvideo/ctl-product-template-schema/workdir-fetch";
 /**
  * How a stored product template got here.
  *
@@ -63,4 +64,12 @@ export interface ProductTemplateRecord {
      *  can untick, never a pin, and never a wire field of its own: the
      *  confirmed selection rides the job as extraSecurityGroups ids. */
     suggestedSecurityGroups?: string[];
+    /** Template-author working-directory assets — the product-template tier of
+     *  the asset stack (working-directory-and-assets.md). Each entry names a
+     *  workdir-relative destination and where the bytes come from (an uploaded
+     *  blob served by the manager, or an s3:// / https:// URL the node fetches
+     *  directly). Merged beneath the production-template and launch tiers and
+     *  carried to the worker as the reserved NORSK_WORKDIR_FETCH parameter, so
+     *  the product template's own tar stays immutable. */
+    assets?: WorkdirFetchList;
 }