@pixerate/editor-react 0.15.0 → 0.16.0

package/dist/generation/index.cjs

@@ -0,0 +1,235 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/generation/index.ts
+var generation_exports = {};
+__export(generation_exports, {
+  GenerationSettings: () => GenerationSettings,
+  JobProgress: () => JobProgress,
+  useGenerationPlan: () => useGenerationPlan,
+  useJobProgress: () => useJobProgress
+});
+module.exports = __toCommonJS(generation_exports);
+
+// src/generation/useGenerationPlan.ts
+var import_react = require("react");
+var import_generation = require("@pixerate/editor/generation");
+function useGenerationPlan(request, capabilities, options = {}) {
+  const key = JSON.stringify([request, capabilities, options]);
+  return (0, import_react.useMemo)(() => (0, import_generation.planGenerationRequest)(request, capabilities, options), [key]);
+}
+function useJobProgress(options) {
+  const { startedAt, expectedMs, done, now, intervalMs = 1e3 } = options;
+  const [tick, setTick] = (0, import_react.useState)(() => Date.now());
+  const ticking = !done && now === void 0;
+  (0, import_react.useEffect)(() => {
+    if (!ticking) return;
+    setTick(Date.now());
+    const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));
+    return () => clearInterval(id);
+  }, [ticking, intervalMs]);
+  return (0, import_generation.estimateJobProgress)({ startedAt, expectedMs, done, now: now ?? tick });
+}
+
+// src/generation/GenerationSettings.tsx
+var import_react2 = require("react");
+var import_generation2 = require("@pixerate/editor/generation");
+var import_jsx_runtime = require("react/jsx-runtime");
+var inputClass = "w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring";
+function Control({
+  control,
+  value,
+  id,
+  onValue
+}) {
+  const shown = value ?? control.defaultValue;
+  if (control.kind === "checkbox") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        "data-field": control.key,
+        checked: Boolean(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.checked))
+      }
+    );
+  }
+  if (control.kind === "select") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "select",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        value: shown === void 0 ? "" : String(shown),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value)),
+        children: [
+          shown === void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: "Default" }),
+          control.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: String(option.value), children: option.label }, String(option.value)))
+        ]
+      }
+    );
+  }
+  if (control.kind === "textarea") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        id,
+        "data-field": control.key,
+        className: inputClass,
+        rows: 2,
+        maxLength: control.maxLength,
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    );
+  }
+  const numeric = typeof shown === "number" ? shown : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        id,
+        type: control.kind === "range" ? "range" : "number",
+        "data-field": control.key,
+        className: control.kind === "range" ? "flex-1" : inputClass,
+        min: control.min,
+        max: control.max,
+        step: control.step ?? "any",
+        value: numeric ?? (control.kind === "range" ? control.min ?? 0 : ""),
+        onChange: (e) => onValue((0, import_generation2.parseControlValue)(control, e.target.value))
+      }
+    ),
+    control.kind === "range" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "w-10 text-right tabular-nums text-muted-foreground", "data-field-value": "", children: numeric ?? "\u2013" })
+  ] });
+}
+var GenerationSettings = ({
+  capabilities,
+  value,
+  onChange,
+  plan: planProp,
+  strategy,
+  showAdjustments = true,
+  onAddReference,
+  renderReference,
+  className = ""
+}) => {
+  const baseId = (0, import_react2.useId)();
+  const controls = (0, import_react2.useMemo)(() => (0, import_generation2.getGenerationControls)(capabilities), [capabilities]);
+  const computed = useGenerationPlan(value, capabilities, { strategy });
+  const plan = planProp ?? computed;
+  const slots = (0, import_generation2.getReferenceSlots)(capabilities, value);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex flex-col gap-3 text-sm ${className}`, "data-generation-settings": "", "data-model": capabilities.id, children: [
+    controls.map((control) => {
+      const id = `${baseId}-${control.key}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col gap-1", "data-control": control.key, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", { htmlFor: id, className: "text-xs font-medium text-muted-foreground", title: control.description, children: control.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          Control,
+          {
+            control,
+            id,
+            value: (0, import_generation2.getRequestValue)(value, control.key),
+            onValue: (next) => onChange((0, import_generation2.setRequestValue)(value, control.key, next))
+          }
+        )
+      ] }, control.key);
+    }),
+    slots.map((slot) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", { className: "flex flex-col gap-1", "data-reference-role": slot.role, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("legend", { className: "text-xs font-medium text-muted-foreground", title: slot.description, children: [
+        slot.label,
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", "data-reference-count": "", children: [
+          "(",
+          slot.references.length,
+          "/",
+          slot.max,
+          ")"
+        ] }),
+        slot.min > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-destructive", children: " *" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { className: "flex flex-wrap gap-1", children: [
+        slot.references.map((ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-1 rounded border border-border px-1.5 py-0.5", "data-reference-id": ref.id, children: [
+          renderReference ? renderReference(ref) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "max-w-[10rem] truncate", children: ref.id }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": `Remove ${slot.label} ${ref.id}`,
+              className: "text-muted-foreground hover:text-foreground",
+              onClick: () => onChange((0, import_generation2.removeReference)(value, slot.role, ref.id)),
+              children: "\xD7"
+            }
+          )
+        ] }, ref.id)),
+        onAddReference && slot.canAdd && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "rounded border border-dashed border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground",
+            onClick: () => onAddReference(slot.role),
+            children: "Add"
+          }
+        ) })
+      ] })
+    ] }, slot.role)),
+    showAdjustments && plan.adjustments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: "status", className: "flex flex-col gap-0.5 text-xs text-muted-foreground", "data-generation-adjustments": "", children: plan.adjustments.map((adjustment, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-adjustment-field": adjustment.field, "data-adjustment-kind": adjustment.kind, children: adjustment.reason }, index)) }),
+    showAdjustments && plan.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { role: "alert", className: "flex flex-col gap-0.5 text-xs text-destructive", "data-generation-errors": "", children: plan.errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { "data-error-field": error.field, children: error.message }, index)) })
+  ] });
+};
+
+// src/generation/JobProgress.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var JobProgress = ({ title, className = "", ...options }) => {
+  const progress = useJobProgress(options);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex flex-col gap-1 text-sm ${className}`, "data-job-progress": "", "data-done": options.done ? "" : void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center justify-between gap-2 text-muted-foreground", children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "truncate text-foreground", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-job-progress-label": "", "aria-live": "polite", children: progress.label })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        role: "progressbar",
+        "aria-label": title ?? "Generation progress",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": progress.percent,
+        "aria-valuetext": `${progress.percent}%, ${progress.label}`,
+        className: "h-1.5 w-full overflow-hidden rounded-full bg-muted",
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "h-full rounded-full bg-primary transition-[width] duration-500",
+            style: { width: `${progress.percent}%`, background: "var(--primary, currentColor)" }
+          }
+        )
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useJobProgress
+});
+//# sourceMappingURL=index.cjs.map

package/dist/generation/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/generation/index.ts","../../src/generation/useGenerationPlan.ts","../../src/generation/GenerationSettings.tsx","../../src/generation/JobProgress.tsx"],"sourcesContent":["export * from './useGenerationPlan';\nexport * from './GenerationSettings';\nexport * from './JobProgress';\n","import { useEffect, useMemo, useState } from 'react';\nimport {\n  estimateJobProgress,\n  planGenerationRequest,\n  type GenerationPlan,\n  type GenerationRequest,\n  type JobProgressEstimate,\n  type ModelCapabilities,\n  type PlanOptions,\n} from '@pixerate/editor/generation';\n\n/**\n * Plans `request` against `capabilities` (see `planGenerationRequest`) and\n * returns the adjusted request, adjustments and errors. Recomputed only when\n * the request, capabilities or options change by value, so inline objects are fine.\n */\nexport function useGenerationPlan(\n  request: GenerationRequest,\n  capabilities: ModelCapabilities,\n  options: PlanOptions = {},\n): GenerationPlan {\n  const key = JSON.stringify([request, capabilities, options]);\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useMemo(() => planGenerationRequest(request, capabilities, options), [key]);\n}\n\nexport interface UseJobProgressOptions {\n  startedAt: number | Date | string;\n  expectedMs?: number;\n  done?: boolean;\n  /** Fixed current time (disables ticking; useful for SSR and tests). */\n  now?: number | Date | string;\n  /** Re-render interval while running in ms (default 1000). */\n  intervalMs?: number;\n}\n\n/** Ticking `estimateJobProgress` for a running job; stops ticking when `done`. */\nexport function useJobProgress(options: UseJobProgressOptions): JobProgressEstimate {\n  const { startedAt, expectedMs, done, now, intervalMs = 1000 } = options;\n  const [tick, setTick] = useState(() => Date.now());\n  const ticking = !done && now === undefined;\n  useEffect(() => {\n    if (!ticking) return;\n    setTick(Date.now());\n    const id = setInterval(() => setTick(Date.now()), Math.max(16, intervalMs));\n    return () => clearInterval(id);\n  }, [ticking, intervalMs]);\n  return estimateJobProgress({ startedAt, expectedMs, done, now: now ?? tick });\n}\n","import React, { useId, useMemo } from 'react';\nimport {\n  getGenerationControls,\n  getReferenceSlots,\n  getRequestValue,\n  parseControlValue,\n  removeReference,\n  setRequestValue,\n  type GenerationControl,\n  type GenerationPlan,\n  type GenerationReference,\n  type GenerationRequest,\n  type ModelCapabilities,\n  type PlanStrategy,\n  type ReferenceRole,\n} from '@pixerate/editor/generation';\nimport { useGenerationPlan } from './useGenerationPlan';\n\nexport interface GenerationSettingsProps {\n  capabilities: ModelCapabilities;\n  /** The request being edited (controlled). */\n  value: GenerationRequest;\n  onChange: (next: GenerationRequest) => void;\n  /** A plan computed elsewhere; otherwise one is computed with `strategy`. */\n  plan?: GenerationPlan;\n  /** Strategy for the built-in plan (default `nearest`). */\n  strategy?: PlanStrategy;\n  /** List plan adjustments and errors under the controls (default `true`). */\n  showAdjustments?: boolean;\n  /** Shows an \"Add\" button per reference role; you pick the asset and call `onChange`. */\n  onAddReference?: (role: ReferenceRole) => void;\n  /** Custom rendering of a reference chip (default: its id). */\n  renderReference?: (reference: GenerationReference) => React.ReactNode;\n  className?: string;\n}\n\nconst inputClass =\n  'w-full rounded-md border border-border bg-background px-2 py-1 text-sm outline-none focus:ring-1 focus:ring-ring';\n\nfunction Control({\n  control,\n  value,\n  id,\n  onValue,\n}: {\n  control: GenerationControl;\n  value: unknown;\n  id: string;\n  onValue: (value: unknown) => void;\n}) {\n  const shown = value ?? control.defaultValue;\n  if (control.kind === 'checkbox') {\n    return (\n      <input\n        id={id}\n        type=\"checkbox\"\n        data-field={control.key}\n        checked={Boolean(shown)}\n        onChange={(e) => onValue(parseControlValue(control, e.target.checked))}\n      />\n    );\n  }\n  if (control.kind === 'select') {\n    return (\n      <select\n        id={id}\n        data-field={control.key}\n        className={inputClass}\n        value={shown === undefined ? '' : String(shown)}\n        onChange={(e) => onValue(parseControlValue(control, e.target.value))}\n      >\n        {shown === undefined && <option value=\"\">Default</option>}\n        {control.options!.map((option) => (\n          <option key={String(option.value)} value={String(option.value)}>\n            {option.label}\n          </option>\n        ))}\n      </select>\n    );\n  }\n  if (control.kind === 'textarea') {\n    return (\n      <textarea\n        id={id}\n        data-field={control.key}\n        className={inputClass}\n        rows={2}\n        maxLength={control.maxLength}\n        value={typeof value === 'string' ? value : ''}\n        onChange={(e) => onValue(parseControlValue(control, e.target.value))}\n      />\n    );\n  }\n  const numeric = typeof shown === 'number' ? shown : undefined;\n  return (\n    <div className=\"flex items-center gap-2\">\n      <input\n        id={id}\n        type={control.kind === 'range' ? 'range' : 'number'}\n        data-field={control.key}\n        className={control.kind === 'range' ? 'flex-1' : inputClass}\n        min={control.min}\n        max={control.max}\n        step={control.step ?? 'any'}\n        value={numeric ?? (control.kind === 'range' ? (control.min ?? 0) : '')}\n        onChange={(e) => onValue(parseControlValue(control, e.target.value))}\n      />\n      {control.kind === 'range' && (\n        <span className=\"w-10 text-right tabular-nums text-muted-foreground\" data-field-value=\"\">\n          {numeric ?? '–'}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/**\n * Headless-styled settings form generated from a model's capabilities:\n * selects for choices, sliders/number inputs for ranges, text areas for\n * negative/system prompts, checkboxes for boolean params, reference slots by\n * role, and the plan's adjustments and errors. Controlled via `value` / `onChange`.\n */\nexport const GenerationSettings: React.FC<GenerationSettingsProps> = ({\n  capabilities,\n  value,\n  onChange,\n  plan: planProp,\n  strategy,\n  showAdjustments = true,\n  onAddReference,\n  renderReference,\n  className = '',\n}) => {\n  const baseId = useId();\n  const controls = useMemo(() => getGenerationControls(capabilities), [capabilities]);\n  const computed = useGenerationPlan(value, capabilities, { strategy });\n  const plan = planProp ?? computed;\n  const slots = getReferenceSlots(capabilities, value);\n\n  return (\n    <div className={`flex flex-col gap-3 text-sm ${className}`} data-generation-settings=\"\" data-model={capabilities.id}>\n      {controls.map((control) => {\n        const id = `${baseId}-${control.key}`;\n        return (\n          <div key={control.key} className=\"flex flex-col gap-1\" data-control={control.key}>\n            <label htmlFor={id} className=\"text-xs font-medium text-muted-foreground\" title={control.description}>\n              {control.label}\n            </label>\n            <Control\n              control={control}\n              id={id}\n              value={getRequestValue(value, control.key)}\n              onValue={(next) => onChange(setRequestValue(value, control.key, next))}\n            />\n          </div>\n        );\n      })}\n\n      {slots.map((slot) => (\n        <fieldset key={slot.role} className=\"flex flex-col gap-1\" data-reference-role={slot.role}>\n          <legend className=\"text-xs font-medium text-muted-foreground\" title={slot.description}>\n            {slot.label}{' '}\n            <span className=\"tabular-nums\" data-reference-count=\"\">\n              ({slot.references.length}/{slot.max})\n            </span>\n            {slot.min > 0 && <span className=\"text-destructive\"> *</span>}\n          </legend>\n          <ul className=\"flex flex-wrap gap-1\">\n            {slot.references.map((ref) => (\n              <li key={ref.id} className=\"flex items-center gap-1 rounded border border-border px-1.5 py-0.5\" data-reference-id={ref.id}>\n                {renderReference ? renderReference(ref) : <span className=\"max-w-[10rem] truncate\">{ref.id}</span>}\n                <button\n                  type=\"button\"\n                  aria-label={`Remove ${slot.label} ${ref.id}`}\n                  className=\"text-muted-foreground hover:text-foreground\"\n                  onClick={() => onChange(removeReference(value, slot.role, ref.id))}\n                >\n                  ×\n                </button>\n              </li>\n            ))}\n            {onAddReference && slot.canAdd && (\n              <li>\n                <button\n                  type=\"button\"\n                  className=\"rounded border border-dashed border-border px-1.5 py-0.5 text-muted-foreground hover:text-foreground\"\n                  onClick={() => onAddReference(slot.role)}\n                >\n                  Add\n                </button>\n              </li>\n            )}\n          </ul>\n        </fieldset>\n      ))}\n\n      {showAdjustments && plan.adjustments.length > 0 && (\n        <ul role=\"status\" className=\"flex flex-col gap-0.5 text-xs text-muted-foreground\" data-generation-adjustments=\"\">\n          {plan.adjustments.map((adjustment, index) => (\n            <li key={index} data-adjustment-field={adjustment.field} data-adjustment-kind={adjustment.kind}>\n              {adjustment.reason}\n            </li>\n          ))}\n        </ul>\n      )}\n      {showAdjustments && plan.errors.length > 0 && (\n        <ul role=\"alert\" className=\"flex flex-col gap-0.5 text-xs text-destructive\" data-generation-errors=\"\">\n          {plan.errors.map((error, index) => (\n            <li key={index} data-error-field={error.field}>\n              {error.message}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n","import React from 'react';\nimport { useJobProgress, type UseJobProgressOptions } from './useGenerationPlan';\n\nexport interface JobProgressProps extends UseJobProgressOptions {\n  /** Text shown before the time label, e.g. the model name. */\n  title?: string;\n  /** Extra classes for the root. */\n  className?: string;\n}\n\n/**\n * Headless-styled progress bar for a generation job that reports no progress\n * of its own: time-based percent (held at 95% until `done`) with a\n * \"~2m left\" / \"Almost done…\" label. Exposes `role=\"progressbar\"`.\n */\nexport const JobProgress: React.FC<JobProgressProps> = ({ title, className = '', ...options }) => {\n  const progress = useJobProgress(options);\n  return (\n    <div className={`flex flex-col gap-1 text-sm ${className}`} data-job-progress=\"\" data-done={options.done ? '' : undefined}>\n      <div className=\"flex items-center justify-between gap-2 text-muted-foreground\">\n        {title && <span className=\"truncate text-foreground\">{title}</span>}\n        <span data-job-progress-label=\"\" aria-live=\"polite\">\n          {progress.label}\n        </span>\n      </div>\n      <div\n        role=\"progressbar\"\n        aria-label={title ?? 'Generation progress'}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={progress.percent}\n        aria-valuetext={`${progress.percent}%, ${progress.label}`}\n        className=\"h-1.5 w-full overflow-hidden rounded-full bg-muted\"\n      >\n        <div\n          className=\"h-full rounded-full bg-primary transition-[width] duration-500\"\n          style={{ width: `${progress.percent}%`, background: 'var(--primary, currentColor)' }}\n        />\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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","names":["import_react","import_generation","import_jsx_runtime"]}

package/dist/generation/index.d.cts

@@ -0,0 +1,60 @@
+import { GenerationRequest, ModelCapabilities, PlanOptions, GenerationPlan, JobProgressEstimate, PlanStrategy, ReferenceRole, GenerationReference } from '@pixerate/editor/generation';
+import React__default from 'react';
+
+/**
+ * Plans `request` against `capabilities` (see `planGenerationRequest`) and
+ * returns the adjusted request, adjustments and errors. Recomputed only when
+ * the request, capabilities or options change by value, so inline objects are fine.
+ */
+declare function useGenerationPlan(request: GenerationRequest, capabilities: ModelCapabilities, options?: PlanOptions): GenerationPlan;
+interface UseJobProgressOptions {
+    startedAt: number | Date | string;
+    expectedMs?: number;
+    done?: boolean;
+    /** Fixed current time (disables ticking; useful for SSR and tests). */
+    now?: number | Date | string;
+    /** Re-render interval while running in ms (default 1000). */
+    intervalMs?: number;
+}
+/** Ticking `estimateJobProgress` for a running job; stops ticking when `done`. */
+declare function useJobProgress(options: UseJobProgressOptions): JobProgressEstimate;
+
+interface GenerationSettingsProps {
+    capabilities: ModelCapabilities;
+    /** The request being edited (controlled). */
+    value: GenerationRequest;
+    onChange: (next: GenerationRequest) => void;
+    /** A plan computed elsewhere; otherwise one is computed with `strategy`. */
+    plan?: GenerationPlan;
+    /** Strategy for the built-in plan (default `nearest`). */
+    strategy?: PlanStrategy;
+    /** List plan adjustments and errors under the controls (default `true`). */
+    showAdjustments?: boolean;
+    /** Shows an "Add" button per reference role; you pick the asset and call `onChange`. */
+    onAddReference?: (role: ReferenceRole) => void;
+    /** Custom rendering of a reference chip (default: its id). */
+    renderReference?: (reference: GenerationReference) => React__default.ReactNode;
+    className?: string;
+}
+/**
+ * Headless-styled settings form generated from a model's capabilities:
+ * selects for choices, sliders/number inputs for ranges, text areas for
+ * negative/system prompts, checkboxes for boolean params, reference slots by
+ * role, and the plan's adjustments and errors. Controlled via `value` / `onChange`.
+ */
+declare const GenerationSettings: React__default.FC<GenerationSettingsProps>;
+
+interface JobProgressProps extends UseJobProgressOptions {
+    /** Text shown before the time label, e.g. the model name. */
+    title?: string;
+    /** Extra classes for the root. */
+    className?: string;
+}
+/**
+ * Headless-styled progress bar for a generation job that reports no progress
+ * of its own: time-based percent (held at 95% until `done`) with a
+ * "~2m left" / "Almost done…" label. Exposes `role="progressbar"`.
+ */
+declare const JobProgress: React__default.FC<JobProgressProps>;
+
+export { GenerationSettings, type GenerationSettingsProps, JobProgress, type JobProgressProps, type UseJobProgressOptions, useGenerationPlan, useJobProgress };

package/dist/generation/index.d.ts

@@ -0,0 +1,60 @@
+import { GenerationRequest, ModelCapabilities, PlanOptions, GenerationPlan, JobProgressEstimate, PlanStrategy, ReferenceRole, GenerationReference } from '@pixerate/editor/generation';
+import React__default from 'react';
+
+/**
+ * Plans `request` against `capabilities` (see `planGenerationRequest`) and
+ * returns the adjusted request, adjustments and errors. Recomputed only when
+ * the request, capabilities or options change by value, so inline objects are fine.
+ */
+declare function useGenerationPlan(request: GenerationRequest, capabilities: ModelCapabilities, options?: PlanOptions): GenerationPlan;
+interface UseJobProgressOptions {
+    startedAt: number | Date | string;
+    expectedMs?: number;
+    done?: boolean;
+    /** Fixed current time (disables ticking; useful for SSR and tests). */
+    now?: number | Date | string;
+    /** Re-render interval while running in ms (default 1000). */
+    intervalMs?: number;
+}
+/** Ticking `estimateJobProgress` for a running job; stops ticking when `done`. */
+declare function useJobProgress(options: UseJobProgressOptions): JobProgressEstimate;
+
+interface GenerationSettingsProps {
+    capabilities: ModelCapabilities;
+    /** The request being edited (controlled). */
+    value: GenerationRequest;
+    onChange: (next: GenerationRequest) => void;
+    /** A plan computed elsewhere; otherwise one is computed with `strategy`. */
+    plan?: GenerationPlan;
+    /** Strategy for the built-in plan (default `nearest`). */
+    strategy?: PlanStrategy;
+    /** List plan adjustments and errors under the controls (default `true`). */
+    showAdjustments?: boolean;
+    /** Shows an "Add" button per reference role; you pick the asset and call `onChange`. */
+    onAddReference?: (role: ReferenceRole) => void;
+    /** Custom rendering of a reference chip (default: its id). */
+    renderReference?: (reference: GenerationReference) => React__default.ReactNode;
+    className?: string;
+}
+/**
+ * Headless-styled settings form generated from a model's capabilities:
+ * selects for choices, sliders/number inputs for ranges, text areas for
+ * negative/system prompts, checkboxes for boolean params, reference slots by
+ * role, and the plan's adjustments and errors. Controlled via `value` / `onChange`.
+ */
+declare const GenerationSettings: React__default.FC<GenerationSettingsProps>;
+
+interface JobProgressProps extends UseJobProgressOptions {
+    /** Text shown before the time label, e.g. the model name. */
+    title?: string;
+    /** Extra classes for the root. */
+    className?: string;
+}
+/**
+ * Headless-styled progress bar for a generation job that reports no progress
+ * of its own: time-based percent (held at 95% until `done`) with a
+ * "~2m left" / "Almost done…" label. Exposes `role="progressbar"`.
+ */
+declare const JobProgress: React__default.FC<JobProgressProps>;
+
+export { GenerationSettings, type GenerationSettingsProps, JobProgress, type JobProgressProps, type UseJobProgressOptions, useGenerationPlan, useJobProgress };

package/dist/generation/index.js

@@ -0,0 +1,13 @@
+import {
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useJobProgress
+} from "../chunk-7SPRQZ6H.js";
+export {
+  GenerationSettings,
+  JobProgress,
+  useGenerationPlan,
+  useJobProgress
+};
+//# sourceMappingURL=index.js.map

package/dist/generation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}