@hyperframes/studio 0.7.46 → 0.7.47

package/src/components/panels/VariablesDeclarationForm.tsx

@@ -0,0 +1,321 @@
+/**
+ * Add/edit form for a variable declaration. Builds a typed
+ * CompositionVariable from free-text drafts; structural validation beyond
+ * the field-level checks here is the SDK's job (can() on dispatch).
+ */
+
+import { useState } from "react";
+import type { CompositionVariable, CompositionVariableType } from "@hyperframes/sdk";
+import { VARIABLES_INPUT_CLASS } from "./VariablesValueControls";
+
+const VARIABLE_TYPES: CompositionVariableType[] = [
+  "string",
+  "number",
+  "color",
+  "boolean",
+  "enum",
+  "font",
+  "image",
+];
+
+export interface DeclarationDraft {
+  id: string;
+  label: string;
+  type: CompositionVariableType;
+  defaultRaw: string;
+  description: string;
+  min: string;
+  max: string;
+  step: string;
+  optionsRaw: string;
+}
+
+export const EMPTY_DRAFT: DeclarationDraft = {
+  id: "",
+  label: "",
+  type: "string",
+  defaultRaw: "",
+  description: "",
+  min: "",
+  max: "",
+  step: "",
+  optionsRaw: "",
+};
+
+// Per-type field mapping — one ternary per optional field.
+// fallow-ignore-next-line complexity
+export function draftFromDeclaration(decl: CompositionVariable): DeclarationDraft {
+  const numeric = decl.type === "number" ? decl : null;
+  return {
+    ...EMPTY_DRAFT,
+    id: decl.id,
+    label: decl.label,
+    type: decl.type,
+    defaultRaw: String(decl.default),
+    description: decl.description ?? "",
+    min: numeric?.min !== undefined ? String(numeric.min) : "",
+    max: numeric?.max !== undefined ? String(numeric.max) : "",
+    step: numeric?.step !== undefined ? String(numeric.step) : "",
+    optionsRaw:
+      decl.type === "enum" ? decl.options.map((o) => `${o.value}:${o.label}`).join("\n") : "",
+  };
+}
+
+function numberDeclFromDraft(
+  base: { id: string; label: string; description?: string },
+  draft: DeclarationDraft,
+): CompositionVariable | string {
+  const value = Number(draft.defaultRaw);
+  if (!Number.isFinite(value)) return "Default must be a number.";
+  const constraint = (key: "min" | "max" | "step") => {
+    const raw = draft[key].trim();
+    if (!raw) return {};
+    const parsed = Number(raw);
+    return Number.isFinite(parsed) ? { [key]: parsed } : {};
+  };
+  return {
+    ...base,
+    type: "number",
+    default: value,
+    ...constraint("min"),
+    ...constraint("max"),
+    ...constraint("step"),
+  };
+}
+
+// fallow-ignore-next-line complexity
+function enumDeclFromDraft(
+  base: { id: string; label: string; description?: string },
+  draft: DeclarationDraft,
+): CompositionVariable | string {
+  const options = draft.optionsRaw
+    .split("\n")
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const [value, ...rest] = line.split(":");
+      const v = (value ?? "").trim();
+      return { value: v, label: rest.join(":").trim() || v };
+    })
+    .filter((o) => o.value.length > 0);
+  if (options.length === 0) return "Enum needs at least one option (one per line, value:Label).";
+  const value = draft.defaultRaw.trim() || (options[0]?.value ?? "");
+  if (!options.some((o) => o.value === value)) return "Default must be one of the options.";
+  return { ...base, type: "enum", default: value, options };
+}
+
+/**
+ * Fields the form actually models. On an unchanged-type edit, every OTHER key
+ * of the original declaration (font source/default_name/default_source,
+ * brandRole, placeholder, maxLength, unit, …) must ride through untouched —
+ * updateVariableDeclaration replaces wholesale, so dropping them here would
+ * silently strip schema metadata on every Edit + Save.
+ */
+const FORM_OWNED_KEYS = new Set([
+  "id",
+  "label",
+  "type",
+  "default",
+  "description",
+  "min",
+  "max",
+  "step",
+  "options",
+]);
+
+export function mergeDeclarationEdit(
+  original: CompositionVariable,
+  edited: CompositionVariable,
+): CompositionVariable {
+  // Type changed → old type-specific metadata no longer applies.
+  if (original.type !== edited.type) return edited;
+  const passthrough: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(original)) {
+    if (!FORM_OWNED_KEYS.has(key)) passthrough[key] = value;
+  }
+  // Both sides are same-type declarations and edited owns every form key, so
+  // the merge preserves the declared shape.
+  return { ...passthrough, ...edited };
+}
+
+/** Build a typed declaration from the form draft; string on validation error. */
+// fallow-ignore-next-line complexity
+export function declarationFromDraft(draft: DeclarationDraft): CompositionVariable | string {
+  const id = draft.id.trim();
+  if (!id) return "Variable id is required.";
+  const label = draft.label.trim() || id;
+  const description = draft.description.trim() || undefined;
+  const base = { id, label, ...(description ? { description } : {}) };
+  switch (draft.type) {
+    case "number":
+      return numberDeclFromDraft(base, draft);
+    case "boolean":
+      return { ...base, type: "boolean", default: draft.defaultRaw.trim() === "true" };
+    case "enum":
+      return enumDeclFromDraft(base, draft);
+    default:
+      // string / color / font / image — string default, verbatim.
+      return { ...base, type: draft.type, default: draft.defaultRaw };
+  }
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1">
+      <label className="text-[9px] font-medium text-neutral-500">{label}</label>
+      {children}
+    </div>
+  );
+}
+
+function DefaultField({
+  draft,
+  onChange,
+}: {
+  draft: DeclarationDraft;
+  onChange: (defaultRaw: string) => void;
+}) {
+  if (draft.type === "boolean") {
+    return (
+      <select
+        value={draft.defaultRaw === "true" ? "true" : "false"}
+        onChange={(e) => onChange(e.target.value)}
+        className={VARIABLES_INPUT_CLASS}
+      >
+        <option value="false">false</option>
+        <option value="true">true</option>
+      </select>
+    );
+  }
+  return (
+    <input
+      type="text"
+      value={draft.defaultRaw}
+      onChange={(e) => onChange(e.target.value)}
+      className={VARIABLES_INPUT_CLASS}
+    />
+  );
+}
+
+export function DeclarationForm({
+  initial,
+  submitLabel,
+  onSubmit,
+  onCancel,
+}: {
+  initial: DeclarationDraft;
+  submitLabel: string;
+  onSubmit: (decl: CompositionVariable) => void;
+  onCancel: () => void;
+}) {
+  const [draft, setDraft] = useState<DeclarationDraft>(initial);
+  const [error, setError] = useState<string | null>(null);
+  const editingExisting = initial.id.length > 0;
+  const set = (patch: Partial<DeclarationDraft>) => setDraft((d) => ({ ...d, ...patch }));
+
+  const submit = () => {
+    const result = declarationFromDraft(draft);
+    if (typeof result === "string") {
+      setError(result);
+      return;
+    }
+    setError(null);
+    onSubmit(result);
+  };
+
+  return (
+    <div className="space-y-2 rounded-lg border border-neutral-800 bg-neutral-900/60 p-2">
+      <div className="grid grid-cols-2 gap-2">
+        <Field label="ID">
+          <input
+            type="text"
+            value={draft.id}
+            disabled={editingExisting}
+            onChange={(e) => set({ id: e.target.value })}
+            placeholder="title"
+            className={`${VARIABLES_INPUT_CLASS} font-mono disabled:opacity-50`}
+          />
+        </Field>
+        <Field label="Label">
+          <input
+            type="text"
+            value={draft.label}
+            onChange={(e) => set({ label: e.target.value })}
+            placeholder="Title"
+            className={VARIABLES_INPUT_CLASS}
+          />
+        </Field>
+      </div>
+      <div className="grid grid-cols-2 gap-2">
+        <Field label="Type">
+          <select
+            value={draft.type}
+            onChange={(e) => {
+              const type = VARIABLE_TYPES.find((t) => t === e.target.value);
+              if (type) set({ type });
+            }}
+            className={VARIABLES_INPUT_CLASS}
+          >
+            {VARIABLE_TYPES.map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        </Field>
+        <Field label="Default">
+          <DefaultField draft={draft} onChange={(defaultRaw) => set({ defaultRaw })} />
+        </Field>
+      </div>
+      {draft.type === "number" && (
+        <div className="grid grid-cols-3 gap-2">
+          {(["min", "max", "step"] as const).map((key) => (
+            <Field key={key} label={key}>
+              <input
+                type="text"
+                value={draft[key]}
+                onChange={(e) => set({ [key]: e.target.value })}
+                className={`${VARIABLES_INPUT_CLASS} tabular-nums`}
+              />
+            </Field>
+          ))}
+        </div>
+      )}
+      {draft.type === "enum" && (
+        <Field label="Options (one per line, value:Label)">
+          <textarea
+            value={draft.optionsRaw}
+            onChange={(e) => set({ optionsRaw: e.target.value })}
+            rows={3}
+            className={`${VARIABLES_INPUT_CLASS} resize-y font-mono`}
+          />
+        </Field>
+      )}
+      <Field label="Description (optional)">
+        <input
+          type="text"
+          value={draft.description}
+          onChange={(e) => set({ description: e.target.value })}
+          className={VARIABLES_INPUT_CLASS}
+        />
+      </Field>
+      {error && <p className="text-[10px] text-red-400">{error}</p>}
+      <div className="flex items-center justify-end gap-2 pt-1">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="h-6 rounded px-2 text-[10px] text-neutral-500 hover:text-neutral-300"
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          onClick={submit}
+          className="h-6 rounded bg-neutral-800 px-2 text-[10px] font-medium text-neutral-200 hover:bg-neutral-700"
+        >
+          {submitLabel}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/panels/VariablesOtherCompositions.tsx

@@ -0,0 +1,159 @@
+/**
+ * Variables tab section for compositions OTHER than the active one. A variable
+ * promoted into a sub-comp lives in that frame's file, not the active session —
+ * this surfaces every such file's declarations grouped by path, with per-file
+ * management (edit declaration / remove). Live-preview override for these is a
+ * follow-up (values are per-composition-scope), so no preview control is shown.
+ */
+
+import { useCallback, useState, type MutableRefObject } from "react";
+import type { Composition, CompositionVariable } from "@hyperframes/sdk";
+import {
+  useEditVariablesInFile,
+  useProjectCompositionVariables,
+  type CompositionVariableGroup,
+  type RecordEditFn,
+} from "../../hooks/useProjectCompositionVariables";
+import {
+  DeclarationForm,
+  draftFromDeclaration,
+  mergeDeclarationEdit,
+} from "./VariablesDeclarationForm";
+import { RowAction } from "./VariablesRowAction";
+
+function CompositionSection({
+  group,
+  editingKey,
+  onToggleEdit,
+  onSave,
+  onRemove,
+}: {
+  group: CompositionVariableGroup;
+  editingKey: string | null;
+  onToggleEdit: (key: string | null) => void;
+  onSave: (path: string, decl: CompositionVariable) => void;
+  onRemove: (path: string, id: string) => void;
+}) {
+  return (
+    <div className="space-y-1.5">
+      <p
+        className="truncate text-[9px] font-medium uppercase tracking-wider text-neutral-500"
+        title={group.path}
+      >
+        {group.path}
+      </p>
+      {group.variables.map((decl) => {
+        const key = `${group.path}::${decl.id}`;
+        const editing = editingKey === key;
+        return (
+          <div key={key} className="space-y-1.5 rounded-lg border border-neutral-800/70 p-2">
+            <div className="flex items-center gap-1.5">
+              <span className="truncate text-[10px] font-medium text-neutral-300">
+                {decl.label}
+              </span>
+              <span className="rounded bg-neutral-800 px-1 py-px font-mono text-[8px] text-neutral-500">
+                {decl.type}
+              </span>
+              <span className="ml-auto flex items-center gap-1">
+                <RowAction
+                  label="Edit"
+                  title="Edit declaration"
+                  onClick={() => onToggleEdit(editing ? null : key)}
+                />
+                <RowAction
+                  label="✕"
+                  title="Remove declaration"
+                  danger
+                  onClick={() => onRemove(group.path, decl.id)}
+                />
+              </span>
+            </div>
+            {decl.description && <p className="text-[9px] text-neutral-500">{decl.description}</p>}
+            {editing && (
+              <DeclarationForm
+                initial={draftFromDeclaration(decl)}
+                submitLabel="Save"
+                onSubmit={(edited) => onSave(group.path, mergeDeclarationEdit(decl, edited))}
+                onCancel={() => onToggleEdit(null)}
+              />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+export function VariablesOtherCompositions({
+  fileTree,
+  excludePath,
+  refreshKey,
+  readProjectFile,
+  writeProjectFile,
+  recordEdit,
+  reloadPreview,
+  domEditSaveTimestampRef,
+}: {
+  fileTree: string[];
+  excludePath: string;
+  refreshKey: unknown;
+  readProjectFile: (path: string) => Promise<string>;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: RecordEditFn;
+  reloadPreview: () => void;
+  domEditSaveTimestampRef: MutableRefObject<number>;
+}) {
+  const [selfRefresh, setSelfRefresh] = useState(0);
+  const groups = useProjectCompositionVariables(
+    fileTree,
+    excludePath,
+    readProjectFile,
+    `${refreshKey}:${selfRefresh}`,
+  );
+  const editInFile = useEditVariablesInFile({
+    readProjectFile,
+    writeProjectFile,
+    recordEdit,
+    reloadPreview,
+    domEditSaveTimestampRef,
+  });
+  const [editingKey, setEditingKey] = useState<string | null>(null);
+
+  const onSave = useCallback(
+    (path: string, decl: CompositionVariable) => {
+      setEditingKey(null);
+      void editInFile(path, `Update variable "${decl.id}"`, (s: Composition) =>
+        s.updateVariableDeclaration(decl.id, decl),
+      ).then(() => setSelfRefresh((r) => r + 1));
+    },
+    [editInFile],
+  );
+  const onRemove = useCallback(
+    (path: string, id: string) => {
+      void editInFile(path, `Remove variable "${id}"`, (s: Composition) =>
+        s.removeVariableDeclaration(id),
+      ).then(() => setSelfRefresh((r) => r + 1));
+    },
+    [editInFile],
+  );
+
+  if (groups.length === 0) return null;
+
+  return (
+    <div className="space-y-3 border-t border-neutral-800 pt-3">
+      <p className="text-[9px] font-medium uppercase tracking-wider text-neutral-600">
+        Other compositions
+      </p>
+      {groups.map((group) => (
+        <CompositionSection
+          key={group.path}
+          group={group}
+          editingKey={editingKey}
+          onToggleEdit={setEditingKey}
+          onSave={onSave}
+          onRemove={onRemove}
+        />
+      ))}
+    </div>
+  );
+}