@norskvideo/ctl-sdk 0.1.56 → 0.1.57

package/components/LabelsEditor.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import { type VariableRow } from "./VariableRowsEditor.js";
+export declare function LabelsEditor({ rows, onChange, addLabel, }: {
+    rows: VariableRow[];
+    onChange: (rows: VariableRow[]) => void;
+    addLabel?: string;
+}): ReactNode;

package/components/LabelsEditor.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { labelNameError } from "./label-rows.js";
+import { VariableRowsEditor } from "./VariableRowsEditor.js";
+export function LabelsEditor({ rows, onChange, addLabel = "Add label", }) {
+    const seen = new Set();
+    return (_jsx(VariableRowsEditor, { rows: rows, onChange: onChange, nameCase: "as-typed", noun: "label", addLabel: addLabel, namePlaceholder: "env", valuePlaceholder: "qa", nameError: (name) => {
+            const error = labelNameError(name.trim(), seen);
+            if (name.trim() !== "")
+                seen.add(name.trim());
+            return error;
+        } }));
+}

package/components/ProductTemplateBuildForm.js

@@ -3,7 +3,8 @@ import { ChevronDown, ChevronRight, X } from "lucide-react";
 import { useRef, useState } from "react";
 import toast from "react-hot-toast";
 import { validateInstanceId } from "../validate.js";
-import { parseLabelsText } from "./labels-text.js";
+import { LabelsEditor } from "./LabelsEditor.js";
+import { readLabelRows } from "./label-rows.js";
 import { ProductIframe } from "./ProductIframe.js";
 import { useUIPrimitives } from "./ui-primitives.js";
 const emptyAdvancedDefaults = {
@@ -38,8 +39,8 @@ function assembleAdvancedDefaults(d) {
 export function ProductTemplateBuildForm({ productName, configScreenUrl, onClose, sections, onSubmit, onSaved, onSavedAndLaunch, onRequirements, withLabels = false, }) {
     const { Button, Input, Label } = useUIPrimitives();
     const [productTemplateName, setProductTemplateName] = useState("");
-    const [labelsDraft, setLabelsDraft] = useState("");
-    const labels = parseLabelsText(labelsDraft);
+    const [labelRowsDraft, setLabelRowsDraft] = useState([]);
+    const labels = readLabelRows(labelRowsDraft);
     // The iframe can suggest a name derived from its current choices (#317).
     // We prefill the field with it while the operator hasn't typed anything,
     // so changing template/release keeps the suggestion live; once they edit
@@ -130,5 +131,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." }))] }), withLabels && (_jsxs("div", { children: [_jsx(Label, { children: "Labels" }), _jsx(Input, { "aria-label": "Labels", value: labelsDraft, onChange: (e) => setLabelsDraft(e.target.value), placeholder: "e.g. env=qa,team=news" }), labels.ok ? (_jsx("p", { className: "text-xs text-zinc-500 mt-1", children: "name=value pairs joined by commas. Instances launched from it start with them; they decide who may see it, and what walls show it." })) : (_jsx("p", { className: "text-xs text-red-400 mt-1", children: labels.error }))] })), 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" })] })] })] }));
+                                }, 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." }))] }), withLabels && (_jsxs("div", { children: [_jsx(Label, { children: "Labels" }), _jsx(LabelsEditor, { rows: labelRowsDraft, onChange: setLabelRowsDraft }), labels.ok ? (_jsx("p", { className: "text-xs text-zinc-500 mt-1", children: "name=value pairs joined by commas. Instances launched from it start with them; they decide who may see it, and what walls show it." })) : (_jsx("p", { className: "text-xs text-red-400 mt-1", children: labels.error }))] })), 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/VariableRowsEditor.d.ts

@@ -20,5 +20,10 @@ export interface VariableRowsEditorProps {
     showBackup?: boolean;
     addLabel?: string;
     namePlaceholder?: string;
+    valuePlaceholder?: string;
+    /** Env-var names are upper-cased as typed; a label's are kept as typed. */
+    nameCase?: "upper" | "as-typed";
+    /** What a row is, for the controls' accessible names. */
+    noun?: string;
 }
-export declare function VariableRowsEditor({ rows, onChange, nameError, showBackup, addLabel, namePlaceholder, }: VariableRowsEditorProps): ReactNode;
+export declare function VariableRowsEditor({ rows, onChange, nameError, showBackup, addLabel, namePlaceholder, valuePlaceholder, nameCase, noun, }: VariableRowsEditorProps): ReactNode;

package/components/VariableRowsEditor.js

@@ -2,13 +2,13 @@ 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.
+// The one name/value editor (RFC 0008 §2): variables here, and labels through
+// LabelsEditor, which keeps names as typed and checks them as labels. 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
+// production composer's added variables are rows of its parameter table
+// instead (they share its columns with the declared parameters, and carry the
+// ask-at-launch box), so they are not this editor.
 //
 // Controlled, and name validation is injected: the reserved-prefix and
 // uniqueness rules are the manager's vocabulary, not the SDK's.
@@ -19,12 +19,12 @@ 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", }) {
+export function VariableRowsEditor({ rows, onChange, nameError, showBackup = false, addLabel = "Add variable", namePlaceholder = "MY_VAR", valuePlaceholder = "value", nameCase = "upper", noun = "variable", }) {
     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, 
+    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": `${noun} 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] })] }));
+                                    onChange: (e) => update(row.id, { name: nameCase === "upper" ? e.target.value.toUpperCase() : e.target.value }) }) }), _jsx("div", { className: "min-w-0 flex-1", children: _jsx(Input, { "aria-label": `value for ${row.name || `new ${noun}`}`, placeholder: valuePlaceholder, 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 ${noun}`}`, 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 ${noun} ${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/index.d.ts

@@ -1,4 +1,6 @@
 export { type ComposeLayer, ComposeLayerPreview, type ComposeLayerPreviewProps } from "./ComposeLayerPreview.js";
+export { LabelsEditor } from "./LabelsEditor.js";
+export { labelNameError, labelRows, readLabelRows } from "./label-rows.js";
 export { type LabelsTextResult, labelsText, parseLabelsText } from "./labels-text.js";
 export { ProductIframe, type ProductIframeHandle, type SubmitResult } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, type ProductTemplateBuildOutcome, type ProductTemplateBuildRequest, } from "./ProductTemplateBuildForm.js";

package/components/index.js

@@ -1,4 +1,6 @@
 export { ComposeLayerPreview } from "./ComposeLayerPreview.js";
+export { LabelsEditor } from "./LabelsEditor.js";
+export { labelNameError, labelRows, readLabelRows } from "./label-rows.js";
 export { labelsText, parseLabelsText } from "./labels-text.js";
 export { ProductIframe } from "./ProductIframe.js";
 export { ProductTemplateBuildForm, } from "./ProductTemplateBuildForm.js";

package/components/label-rows.d.ts

@@ -0,0 +1,7 @@
+import type { LabelsTextResult } from "./labels-text.js";
+import { type VariableRow } from "./VariableRowsEditor.js";
+/** Why `name` cannot be a label here, or undefined. `seen` holds the names
+ *  of the rows above it. An empty name is a row not yet filled in. */
+export declare function labelNameError(name: string, seen: ReadonlySet<string>): string | undefined;
+export declare function labelRows(labels: Readonly<Record<string, string>>): VariableRow[];
+export declare function readLabelRows(rows: readonly VariableRow[]): LabelsTextResult;

package/components/label-rows.js

@@ -0,0 +1,47 @@
+// Labels as rows of the name/value editor (RFC 0008 §2: one editor for
+// labels and variables alike). ADR-0015's rules, mirrored so the editor can
+// say what is wrong as it is typed; the platform still checks every set.
+import { newVariableRow } from "./VariableRowsEditor.js";
+const NAME = /^[A-Za-z0-9][A-Za-z0-9._/-]*$/;
+const MAX = 64;
+const VALUE_FORBIDDEN = /[,=[\]]/;
+/** Why `name` cannot be a label here, or undefined. `seen` holds the names
+ *  of the rows above it. An empty name is a row not yet filled in. */
+export function labelNameError(name, seen) {
+    if (name === "")
+        return undefined;
+    if (name.startsWith("norsk."))
+        return "names under norsk. are the platform's";
+    if (!NAME.test(name) || name.length > MAX)
+        return "letters, digits and . _ / -, at most 64";
+    if (seen.has(name))
+        return `'${name}' is named twice`;
+    return undefined;
+}
+export function labelRows(labels) {
+    return Object.entries(labels)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([name, value]) => ({ ...newVariableRow(), name, value }));
+}
+export function readLabelRows(rows) {
+    const labels = {};
+    const seen = new Set();
+    for (const { name, value } of rows) {
+        const n = name.trim();
+        const v = value.trim();
+        if (n === "" && v === "")
+            continue;
+        if (n === "")
+            return { ok: false, error: `the value '${v}' has no name` };
+        const problem = labelNameError(n, seen);
+        if (problem)
+            return { ok: false, error: `${n}: ${problem}` };
+        if (v === "")
+            return { ok: false, error: `${n} has no value` };
+        if (VALUE_FORBIDDEN.test(v) || v.length > MAX)
+            return { ok: false, error: `${n}: a value has no , = [ or ]` };
+        seen.add(n);
+        labels[n] = v;
+    }
+    return { ok: true, labels };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-sdk",
-  "version": "0.1.56",
+  "version": "0.1.57",
   "type": "module",
   "exports": {
     ".": {