@flanksource/clicky-ui 0.3.18 → 0.3.20

package/dist/profiles/profileFieldEditor.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { JSONPathField } from "../components/JSONPathField.js";
+import { Button } from "../components/button.js";
+import { PROFILE_COLUMN_FORMAT_OPTIONS, PROFILE_COLUMN_UNIT_OPTIONS, inferredFilterKind, PROFILE_FILTER_KIND_OPTIONS, PROFILE_FILTER_DEFAULT_LIMIT, PROFILE_FILTER_MAX_LIMIT, patchColumnFilter } from "./profileWizardModel.js";
+import { useJsonPathSampleRows, evaluateJsonPath } from "./jsonPathSample.js";
+const inputClassName = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/15";
+const profileFieldEditorEmptyMessage = "Add a column or run a sample to discover fields.";
+function ProfileFieldEditorActions({
+  canMoveUp,
+  canMoveDown,
+  selected,
+  onSelectedChange,
+  onMoveUp,
+  onMoveDown,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: !canMoveUp, onClick: onMoveUp, children: "Move up" }),
+    /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled: !canMoveDown, onClick: onMoveDown, children: "Move down" }),
+    /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: onRemove, children: "Remove" }),
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          checked: selected,
+          onChange: (event) => onSelectedChange(event.target.checked)
+        }
+      ),
+      "Include"
+    ] })
+  ] });
+}
+function ProfileFieldEditorForm({
+  field,
+  columns = 2,
+  onChange
+}) {
+  const wide = columns === 2 ? "sm:col-span-2" : "";
+  const rows = useJsonPathSampleRows();
+  return /* @__PURE__ */ jsxs("div", { className: `grid gap-4 ${columns === 2 ? "sm:grid-cols-2" : ""}`, children: [
+    /* @__PURE__ */ jsx(EditorField, { label: "Output name", help: "Public field name used by tables, filters, APIs, and every export.", children: /* @__PURE__ */ jsx("input", { value: field.name, className: inputClassName, onChange: (event) => onChange({ name: event.target.value }) }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Display label", help: "Optional table header; blank uses the field name.", children: /* @__PURE__ */ jsx("input", { value: field.label ?? "", className: inputClassName, placeholder: field.name, onChange: (event) => onChange({ label: event.target.value || void 0 }) }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Data type", help: "Value shape and default formatting; independent of Role.", children: /* @__PURE__ */ jsxs("select", { value: field.type ?? "", className: inputClassName, onChange: (event) => onChange({ type: event.target.value || void 0 }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "Auto detect" }),
+      ["string", "number", "boolean", "datetime", "duration", "bytes", "status", "health", "key_value", "key_values", "json"].map((type) => /* @__PURE__ */ jsx("option", { value: type, children: type }, type))
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Role", help: "Optional table behavior, independent of Type.", children: /* @__PURE__ */ jsxs("select", { value: field.kind ?? "", className: inputClassName, onChange: (event) => onChange({ kind: event.target.value || void 0 }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "Standard field" }),
+      /* @__PURE__ */ jsx("option", { value: "timestamp", children: "Timestamp" }),
+      /* @__PURE__ */ jsx("option", { value: "tags", children: "Tags" }),
+      /* @__PURE__ */ jsx("option", { value: "status", children: "Status" })
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Format", help: "Optional formatter; Unit takes precedence when both are set.", children: /* @__PURE__ */ jsxs("select", { value: field.format ?? "", className: inputClassName, onChange: (event) => onChange({ format: event.target.value || void 0 }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "From Type" }),
+      PROFILE_COLUMN_FORMAT_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Unit", help: "Numeric scaling for number, duration, or bytes Types.", children: /* @__PURE__ */ jsxs("select", { value: field.unit ?? "", className: inputClassName, onChange: (event) => onChange({ unit: event.target.value || void 0 }), children: [
+      /* @__PURE__ */ jsx("option", { value: "", children: "No unit" }),
+      PROFILE_COLUMN_UNIT_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: "Max width (characters)", help: "Maximum rendered width; blank uses the table default.", children: /* @__PURE__ */ jsx("input", { type: "number", min: 1, value: field.width ?? "", className: inputClassName, placeholder: "Auto", onChange: (event) => onChange({ width: event.target.value ? Number(event.target.value) : void 0 }) }) }),
+    /* @__PURE__ */ jsx("div", { className: wide, children: /* @__PURE__ */ jsx(EditorField, { label: "CEL expression", help: "Optional expression computing the value from row.", children: /* @__PURE__ */ jsx("textarea", { rows: 4, value: field.cel ?? "", className: `${inputClassName} resize-y font-mono text-xs`, placeholder: "Optional value transformation", onChange: (event) => onChange({ cel: event.target.value || void 0 }) }) }) }),
+    /* @__PURE__ */ jsx("div", { className: wide, children: /* @__PURE__ */ jsx(EditorField, { label: "JSONPath", help: "Optional path computing the value, rooted at the row or at Source; an alternative to CEL.", children: /* @__PURE__ */ jsx(
+      JSONPathField,
+      {
+        "aria-label": "JSONPath",
+        value: field.jsonpath ?? "",
+        onChange: (next) => onChange({ jsonpath: next || void 0 }),
+        onSelectPath: (next, { root }) => onChange({ jsonpath: next || void 0, source: root }),
+        ...field.source ? { source: field.source } : {},
+        ...rows.length === 0 ? {} : { json: rows[0], rows },
+        evaluate: evaluateJsonPath
+      }
+    ) }) }),
+    /* @__PURE__ */ jsxs("label", { className: `flex items-center gap-2 text-sm font-medium ${wide}`, children: [
+      /* @__PURE__ */ jsx("input", { type: "checkbox", checked: field.hidden ?? false, onChange: (event) => onChange({ hidden: event.target.checked }) }),
+      "Hide this field in the default table"
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: wide, children: /* @__PURE__ */ jsx(ProfileFieldFilterEditor, { field, columns, onChange }) })
+  ] });
+}
+function ProfileFieldFilterEditor({
+  field,
+  columns,
+  onChange
+}) {
+  var _a, _b;
+  const filter = field.filter ?? {};
+  const set = (patch) => onChange({ filter: patchColumnFilter(field.filter, patch) });
+  const kind = filter.kind ?? inferredFilterKind(field);
+  const picksFromAList = kind === "terms";
+  const enumerated = (((_a = filter.options) == null ? void 0 : _a.length) ?? 0) > 0;
+  const looksUp = picksFromAList && !enumerated && (filter.lookup ?? true);
+  return /* @__PURE__ */ jsxs("details", { className: "rounded-md border px-3 py-2", children: [
+    /* @__PURE__ */ jsxs("summary", { className: "cursor-pointer text-sm font-medium", children: [
+      "Filtering",
+      /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: filter.disabled ? "off" : summarizeFilter(kind, enumerated, looksUp, filter.limit) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: `mt-3 grid gap-4 ${columns === 2 ? "sm:grid-cols-2" : ""}`, children: [
+      /* @__PURE__ */ jsx(EditorField, { label: "Control", help: "Overrides the control derived from Type; set it where the rendered type and the backend storage disagree.", children: /* @__PURE__ */ jsxs("select", { value: filter.kind ?? "", className: inputClassName, onChange: (event) => set({ kind: event.target.value || void 0 }), children: [
+        /* @__PURE__ */ jsxs("option", { value: "", children: [
+          "From Type (",
+          ((_b = PROFILE_FILTER_KIND_OPTIONS.find((o) => o.value === kind)) == null ? void 0 : _b.label) ?? kind,
+          ")"
+        ] }),
+        PROFILE_FILTER_KIND_OPTIONS.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      ] }) }),
+      /* @__PURE__ */ jsx(EditorField, { label: "Backend field", help: "The indexed field for a document store, the result column for SQL; blank infers it from the column.", children: /* @__PURE__ */ jsx("input", { value: filter.field ?? "", className: inputClassName, placeholder: field.source || field.name, onChange: (event) => set({ field: event.target.value || void 0 }) }) }),
+      picksFromAList ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "sm:col-span-2", children: /* @__PURE__ */ jsx(EditorField, { label: "Values", help: "Comma-separated values to offer instead of asking the backend; leave blank to enumerate from the data.", children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: (filter.options ?? []).join(", "),
+            className: inputClassName,
+            placeholder: "Ask the backend",
+            onChange: (event) => set({ options: parseFilterOptions(event.target.value) })
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: looksUp,
+              disabled: enumerated,
+              onChange: (event) => set({ lookup: event.target.checked })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: enumerated ? "text-muted-foreground" : void 0, children: enumerated ? "Values are listed above" : "Look values up from the data" })
+        ] }),
+        /* @__PURE__ */ jsx(EditorField, { label: "Values offered", help: `How many distinct values the control lists before the rest have to be typed for. Blank uses ${PROFILE_FILTER_DEFAULT_LIMIT}.`, children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "number",
+            min: 1,
+            max: PROFILE_FILTER_MAX_LIMIT,
+            value: filter.limit ?? "",
+            disabled: !looksUp,
+            className: inputClassName,
+            placeholder: String(PROFILE_FILTER_DEFAULT_LIMIT),
+            onChange: (event) => set({ limit: event.target.value ? Number(event.target.value) : void 0 })
+          }
+        ) })
+      ] }) : null,
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: filter.multi ?? true, onChange: (event) => set({ multi: event.target.checked }) }),
+        "Allow several values at once"
+      ] }),
+      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-sm font-medium", children: [
+        /* @__PURE__ */ jsx("input", { type: "checkbox", checked: filter.disabled ?? false, onChange: (event) => set({ disabled: event.target.checked || void 0 }) }),
+        "Offer no filter for this column"
+      ] })
+    ] })
+  ] });
+}
+function parseFilterOptions(raw) {
+  const values = raw.split(",").map((value) => value.trim()).filter(Boolean);
+  return values.length ? values : void 0;
+}
+function summarizeFilter(kind, enumerated, looksUp, limit) {
+  var _a;
+  const control = ((_a = PROFILE_FILTER_KIND_OPTIONS.find((option) => option.value === kind)) == null ? void 0 : _a.label) ?? kind;
+  if (enumerated) return `${control}, listed`;
+  if (!looksUp) return control;
+  return `${control}, top ${limit ?? PROFILE_FILTER_DEFAULT_LIMIT}`;
+}
+function ProfileFieldEditor({
+  field,
+  onChange,
+  ...actions
+}) {
+  if (!field) {
+    return /* @__PURE__ */ jsx("section", { className: "grid min-h-64 place-items-center rounded-xl border border-dashed text-sm text-muted-foreground", children: profileFieldEditorEmptyMessage });
+  }
+  return /* @__PURE__ */ jsxs("section", { className: "overflow-auto rounded-xl border bg-card p-5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex flex-wrap items-start gap-2 border-b pb-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mr-auto min-w-0", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: "Field editor" }),
+        /* @__PURE__ */ jsx("h3", { className: "mt-1 truncate font-mono text-sm font-semibold", children: field.name })
+      ] }),
+      /* @__PURE__ */ jsx(ProfileFieldEditorActions, { ...actions })
+    ] }),
+    /* @__PURE__ */ jsx(ProfileFieldEditorForm, { field, onChange })
+  ] });
+}
+function EditorField({ label, help, children }) {
+  return /* @__PURE__ */ jsxs("label", { className: "grid gap-1.5 text-sm font-medium", children: [
+    /* @__PURE__ */ jsx("span", { children: label }),
+    children,
+    help ? /* @__PURE__ */ jsx("span", { className: "text-xs font-normal text-muted-foreground", children: help }) : null
+  ] });
+}
+export {
+  ProfileFieldEditor,
+  ProfileFieldEditorActions,
+  ProfileFieldEditorForm,
+  profileFieldEditorEmptyMessage
+};
+//# sourceMappingURL=profileFieldEditor.js.map

package/dist/profiles/profileFieldEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"profileFieldEditor.js","sources":["../../src/profiles/profileFieldEditor.tsx"],"sourcesContent":["import { JSONPathField } from \"../components/JSONPathField\";\nimport { Button } from \"../components/button\";\nimport type { ReactNode } from \"react\";\nimport {\n  inferredFilterKind,\n  patchColumnFilter,\n  PROFILE_COLUMN_FORMAT_OPTIONS,\n  PROFILE_COLUMN_UNIT_OPTIONS,\n  PROFILE_FILTER_DEFAULT_LIMIT,\n  PROFILE_FILTER_KIND_OPTIONS,\n  PROFILE_FILTER_MAX_LIMIT,\n  type Patch,\n  type ProfileColumn,\n  type ProfileColumnFilter,\n} from \"./profileWizardModel\";\nimport { evaluateJsonPath, useJsonPathSampleRows } from \"./jsonPathSample\";\n\nconst inputClassName =\n  \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/15\";\n\ntype FieldActions = {\n  selected: boolean;\n  canMoveUp: boolean;\n  canMoveDown: boolean;\n  onSelectedChange: (selected: boolean) => void;\n  onMoveUp: () => void;\n  onMoveDown: () => void;\n  onRemove: () => void;\n};\n\nexport const profileFieldEditorEmptyMessage =\n  \"Add a column or run a sample to discover fields.\";\n\n/** Ordering, removal and inclusion — the operations that act on the field as a\n *  whole rather than on one of its properties. */\nexport function ProfileFieldEditorActions({\n  canMoveUp,\n  canMoveDown,\n  selected,\n  onSelectedChange,\n  onMoveUp,\n  onMoveDown,\n  onRemove,\n}: FieldActions) {\n  return (\n    <>\n      <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={!canMoveUp} onClick={onMoveUp}>\n        Move up\n      </Button>\n      <Button type=\"button\" size=\"sm\" variant=\"ghost\" disabled={!canMoveDown} onClick={onMoveDown}>\n        Move down\n      </Button>\n      <Button type=\"button\" size=\"sm\" variant=\"ghost\" onClick={onRemove}>\n        Remove\n      </Button>\n      <label className=\"flex items-center gap-2 text-sm font-medium\">\n        <input\n          type=\"checkbox\"\n          checked={selected}\n          onChange={(event) => onSelectedChange(event.target.checked)}\n        />\n        Include\n      </label>\n    </>\n  );\n}\n\n/**\n * Everything about a column that a grid cell cannot hold: role, format, unit\n * and the CEL expression. `columns` is explicit rather than a `sm:` breakpoint\n * because the editor route mounts this in a ~380px pane on a wide viewport,\n * where viewport-based breakpoints would wrongly go two-up.\n */\nexport function ProfileFieldEditorForm({\n  field,\n  columns = 2,\n  onChange,\n}: {\n  field: ProfileColumn;\n  columns?: 1 | 2;\n  onChange: (patch: Patch<ProfileColumn>) => void;\n}) {\n  const wide = columns === 2 ? \"sm:col-span-2\" : \"\";\n  const rows = useJsonPathSampleRows();\n  return (\n    <div className={`grid gap-4 ${columns === 2 ? \"sm:grid-cols-2\" : \"\"}`}>\n      <EditorField label=\"Output name\" help=\"Public field name used by tables, filters, APIs, and every export.\">\n        <input value={field.name} className={inputClassName} onChange={(event) => onChange({ name: event.target.value })} />\n      </EditorField>\n      <EditorField label=\"Display label\" help=\"Optional table header; blank uses the field name.\">\n        <input value={field.label ?? \"\"} className={inputClassName} placeholder={field.name} onChange={(event) => onChange({ label: event.target.value || undefined })} />\n      </EditorField>\n      <EditorField label=\"Data type\" help=\"Value shape and default formatting; independent of Role.\">\n        <select value={field.type ?? \"\"} className={inputClassName} onChange={(event) => onChange({ type: event.target.value || undefined })}>\n          <option value=\"\">Auto detect</option>\n          {[\"string\", \"number\", \"boolean\", \"datetime\", \"duration\", \"bytes\", \"status\", \"health\", \"key_value\", \"key_values\", \"json\"].map((type) => (\n            <option key={type} value={type}>{type}</option>\n          ))}\n        </select>\n      </EditorField>\n      <EditorField label=\"Role\" help=\"Optional table behavior, independent of Type.\">\n        <select value={field.kind ?? \"\"} className={inputClassName} onChange={(event) => onChange({ kind: event.target.value || undefined })}>\n          <option value=\"\">Standard field</option>\n          <option value=\"timestamp\">Timestamp</option>\n          <option value=\"tags\">Tags</option>\n          <option value=\"status\">Status</option>\n        </select>\n      </EditorField>\n      <EditorField label=\"Format\" help=\"Optional formatter; Unit takes precedence when both are set.\">\n        <select value={field.format ?? \"\"} className={inputClassName} onChange={(event) => onChange({ format: event.target.value || undefined })}>\n          <option value=\"\">From Type</option>\n          {PROFILE_COLUMN_FORMAT_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}\n        </select>\n      </EditorField>\n      <EditorField label=\"Unit\" help=\"Numeric scaling for number, duration, or bytes Types.\">\n        <select value={field.unit ?? \"\"} className={inputClassName} onChange={(event) => onChange({ unit: event.target.value || undefined })}>\n          <option value=\"\">No unit</option>\n          {PROFILE_COLUMN_UNIT_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}\n        </select>\n      </EditorField>\n      <EditorField label=\"Max width (characters)\" help=\"Maximum rendered width; blank uses the table default.\">\n        <input type=\"number\" min={1} value={field.width ?? \"\"} className={inputClassName} placeholder=\"Auto\" onChange={(event) => onChange({ width: event.target.value ? Number(event.target.value) : undefined })} />\n      </EditorField>\n      <div className={wide}>\n        <EditorField label=\"CEL expression\" help=\"Optional expression computing the value from row.\">\n          <textarea rows={4} value={field.cel ?? \"\"} className={`${inputClassName} resize-y font-mono text-xs`} placeholder=\"Optional value transformation\" onChange={(event) => onChange({ cel: event.target.value || undefined })} />\n        </EditorField>\n      </div>\n      <div className={wide}>\n        <EditorField label=\"JSONPath\" help=\"Optional path computing the value, rooted at the row or at Source; an alternative to CEL.\">\n          <JSONPathField\n            aria-label=\"JSONPath\"\n            value={field.jsonpath ?? \"\"}\n            onChange={(next) => onChange({ jsonpath: next || undefined })}\n            // This editor owns the whole column, so a path picked out of a\n            // JSON-encoded column sets the Source it needs in the same edit\n            // rather than leaving the author to pair the two by hand. A path\n            // picked outside one clears it: alongside a jsonpath, Source is the\n            // root, and a stale root re-roots the new path at a column it was\n            // never written against.\n            onSelectPath={(next, { root }) =>\n              onChange({ jsonpath: next || undefined, source: root })\n            }\n            {...(field.source ? { source: field.source } : {})}\n            {...(rows.length === 0 ? {} : { json: rows[0], rows })}\n            evaluate={evaluateJsonPath}\n          />\n        </EditorField>\n      </div>\n      <label className={`flex items-center gap-2 text-sm font-medium ${wide}`}>\n        <input type=\"checkbox\" checked={field.hidden ?? false} onChange={(event) => onChange({ hidden: event.target.checked })} />\n        Hide this field in the default table\n      </label>\n      <div className={wide}>\n        <ProfileFieldFilterEditor field={field} columns={columns} onChange={onChange} />\n      </div>\n    </div>\n  );\n}\n\n/**\n * How this column is filtered. Collapsed by default: every field here overrides\n * an inference the server already makes correctly for most columns, so opening\n * it should be a deliberate act rather than the price of editing a label.\n */\nfunction ProfileFieldFilterEditor({\n  field,\n  columns,\n  onChange,\n}: {\n  field: ProfileColumn;\n  columns: 1 | 2;\n  onChange: (patch: Patch<ProfileColumn>) => void;\n}) {\n  const filter = field.filter ?? {};\n  const set = (patch: Patch<ProfileColumnFilter>) =>\n    onChange({ filter: patchColumnFilter(field.filter, patch) });\n\n  // A value selection is the only kind with a list to enumerate; a range, a\n  // toggle and a substring are typed rather than picked.\n  const kind = filter.kind ?? inferredFilterKind(field);\n  const picksFromAList = kind === \"terms\";\n  const enumerated = (filter.options?.length ?? 0) > 0;\n  // Declaring the values IS the answer the lookup would go and fetch, so the two\n  // are mutually exclusive — the server enforces this and the form mirrors it.\n  const looksUp = picksFromAList && !enumerated && (filter.lookup ?? true);\n\n  return (\n    <details className=\"rounded-md border px-3 py-2\">\n      <summary className=\"cursor-pointer text-sm font-medium\">\n        Filtering\n        <span className=\"ml-2 text-xs font-normal text-muted-foreground\">\n          {filter.disabled ? \"off\" : summarizeFilter(kind, enumerated, looksUp, filter.limit)}\n        </span>\n      </summary>\n      <div className={`mt-3 grid gap-4 ${columns === 2 ? \"sm:grid-cols-2\" : \"\"}`}>\n        <EditorField label=\"Control\" help=\"Overrides the control derived from Type; set it where the rendered type and the backend storage disagree.\">\n          <select value={filter.kind ?? \"\"} className={inputClassName} onChange={(event) => set({ kind: event.target.value || undefined })}>\n            <option value=\"\">From Type ({PROFILE_FILTER_KIND_OPTIONS.find((o) => o.value === kind)?.label ?? kind})</option>\n            {PROFILE_FILTER_KIND_OPTIONS.map((option) => (\n              <option key={option.value} value={option.value}>{option.label}</option>\n            ))}\n          </select>\n        </EditorField>\n        <EditorField label=\"Backend field\" help=\"The indexed field for a document store, the result column for SQL; blank infers it from the column.\">\n          <input value={filter.field ?? \"\"} className={inputClassName} placeholder={field.source || field.name} onChange={(event) => set({ field: event.target.value || undefined })} />\n        </EditorField>\n        {picksFromAList ? (\n          <>\n            <div className=\"sm:col-span-2\">\n              <EditorField label=\"Values\" help=\"Comma-separated values to offer instead of asking the backend; leave blank to enumerate from the data.\">\n                <input\n                  value={(filter.options ?? []).join(\", \")}\n                  className={inputClassName}\n                  placeholder=\"Ask the backend\"\n                  onChange={(event) => set({ options: parseFilterOptions(event.target.value) })}\n                />\n              </EditorField>\n            </div>\n            <label className=\"flex items-center gap-2 text-sm font-medium\">\n              <input\n                type=\"checkbox\"\n                checked={looksUp}\n                disabled={enumerated}\n                onChange={(event) => set({ lookup: event.target.checked })}\n              />\n              <span className={enumerated ? \"text-muted-foreground\" : undefined}>\n                {enumerated ? \"Values are listed above\" : \"Look values up from the data\"}\n              </span>\n            </label>\n            <EditorField label=\"Values offered\" help={`How many distinct values the control lists before the rest have to be typed for. Blank uses ${PROFILE_FILTER_DEFAULT_LIMIT}.`}>\n              <input\n                type=\"number\"\n                min={1}\n                max={PROFILE_FILTER_MAX_LIMIT}\n                value={filter.limit ?? \"\"}\n                disabled={!looksUp}\n                className={inputClassName}\n                placeholder={String(PROFILE_FILTER_DEFAULT_LIMIT)}\n                onChange={(event) => set({ limit: event.target.value ? Number(event.target.value) : undefined })}\n              />\n            </EditorField>\n          </>\n        ) : null}\n        <label className=\"flex items-center gap-2 text-sm font-medium\">\n          <input type=\"checkbox\" checked={filter.multi ?? true} onChange={(event) => set({ multi: event.target.checked })} />\n          Allow several values at once\n        </label>\n        <label className=\"flex items-center gap-2 text-sm font-medium\">\n          <input type=\"checkbox\" checked={filter.disabled ?? false} onChange={(event) => set({ disabled: event.target.checked || undefined })} />\n          Offer no filter for this column\n        </label>\n      </div>\n    </details>\n  );\n}\n\nfunction parseFilterOptions(raw: string): string[] | undefined {\n  const values = raw.split(\",\").map((value) => value.trim()).filter(Boolean);\n  return values.length ? values : undefined;\n}\n\nfunction summarizeFilter(kind: string, enumerated: boolean, looksUp: boolean, limit?: number) {\n  const control = PROFILE_FILTER_KIND_OPTIONS.find((option) => option.value === kind)?.label ?? kind;\n  if (enumerated) return `${control}, listed`;\n  if (!looksUp) return control;\n  return `${control}, top ${limit ?? PROFILE_FILTER_DEFAULT_LIMIT}`;\n}\n\n/** The wizard's carded inspector: names the field itself, because its field\n *  list has no header to do it. The editor route composes the parts instead,\n *  since its Workspace pane header already carries the name. */\nexport function ProfileFieldEditor({\n  field,\n  onChange,\n  ...actions\n}: FieldActions & {\n  field?: ProfileColumn | undefined;\n  onChange: (patch: Patch<ProfileColumn>) => void;\n}) {\n  if (!field) {\n    return (\n      <section className=\"grid min-h-64 place-items-center rounded-xl border border-dashed text-sm text-muted-foreground\">\n        {profileFieldEditorEmptyMessage}\n      </section>\n    );\n  }\n\n  return (\n    <section className=\"overflow-auto rounded-xl border bg-card p-5\">\n      <div className=\"mb-5 flex flex-wrap items-start gap-2 border-b pb-4\">\n        <div className=\"mr-auto min-w-0\">\n          <p className=\"text-xs font-semibold uppercase tracking-wide text-muted-foreground\">\n            Field editor\n          </p>\n          <h3 className=\"mt-1 truncate font-mono text-sm font-semibold\">\n            {field.name}\n          </h3>\n        </div>\n        <ProfileFieldEditorActions {...actions} />\n      </div>\n      <ProfileFieldEditorForm field={field} onChange={onChange} />\n    </section>\n  );\n}\n\nfunction EditorField({ label, help, children }: { label: string; help?: string; children: ReactNode }) {\n  return (\n    <label className=\"grid gap-1.5 text-sm font-medium\">\n      <span>{label}</span>\n      {children}\n      {help ? <span className=\"text-xs font-normal text-muted-foreground\">{help}</span> : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/profiles/profileFieldGrid.cjs

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const IconButton = require("../components/IconButton.cjs");
+const profileFieldTypes = require("./profileFieldTypes.cjs");
+const UiDotsVertical = require("../icons/components/UiDotsVertical.cjs");
+const UiEye = require("../icons/components/UiEye.cjs");
+const UiEyeClosed = require("../icons/components/UiEyeClosed.cjs");
+const UiTrash = require("../icons/components/UiTrash.cjs");
+const inputClassName = "w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/15";
+const inputClassNameSm = "w-full rounded-md border border-input bg-background px-2 py-1 text-xs outline-none focus:border-primary focus:ring-2 focus:ring-primary/15";
+function ProfileFieldFilters({
+  state,
+  compact = false
+}) {
+  const className = compact ? inputClassNameSm : inputClassName;
+  const patch = (next) => state.setFilter((current) => ({ ...current, ...next }));
+  const search = /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "search",
+      value: state.filter.query,
+      onChange: (event) => patch({ query: event.target.value }),
+      placeholder: `Search ${state.available.length} fields`,
+      "aria-label": "Search fields",
+      className
+    }
+  );
+  const selects = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        value: state.filter.type,
+        "aria-label": "Filter by field type",
+        className: compact ? `${className} w-auto` : className,
+        onChange: (event) => patch({ type: event.target.value }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "All types" }),
+          state.types.map((type) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type, children: type }, type))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "select",
+      {
+        value: state.filter.selection,
+        "aria-label": "Filter by selection",
+        className: compact ? `${className} w-auto` : className,
+        onChange: (event) => patch({ selection: event.target.value }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "all", children: "All fields" }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "selected", children: "Selected" }),
+          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "unselected", children: "Not selected" })
+        ]
+      }
+    )
+  ] });
+  if (compact) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-[1fr_auto_auto] gap-2", children: [
+      search,
+      selects
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+    search,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-2", children: selects })
+  ] });
+}
+function ProfileFieldGrid({ state }) {
+  const [source, setSource] = react.useState("");
+  const [target, setTarget] = react.useState("");
+  const order = state.visibleFields.map((field) => field.name);
+  const end = () => {
+    setSource("");
+    setTarget("");
+  };
+  const drag = {
+    source,
+    edgeFor: (name) => !source || target !== name || source === name ? null : order.indexOf(source) < order.indexOf(name) ? "bottom" : "top",
+    start: setSource,
+    over: setTarget,
+    drop: (name) => {
+      state.reorderField(source, name);
+      end();
+    },
+    end
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-h-0 flex-1 overflow-auto", role: "list", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-fit border-collapse text-left", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "sticky top-0 z-10 bg-muted/70 backdrop-blur", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: ["Actions", "Field", "Display label", "Type", "CEL"].map((heading) => /* @__PURE__ */ jsxRuntime.jsx(
+        "th",
+        {
+          className: "whitespace-nowrap border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
+          children: heading
+        },
+        heading
+      )) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: state.visibleFields.map((field) => {
+        var _a;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ProfileFieldGridRow,
+          {
+            field,
+            state,
+            drag,
+            selected: state.selectedNames.has(field.name),
+            active: ((_a = state.activeField) == null ? void 0 : _a.name) === field.name
+          },
+          field.name
+        );
+      }) })
+    ] }),
+    state.visibleFields.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "p-8 text-center text-sm text-muted-foreground", children: "No fields match these filters." }) : null
+  ] });
+}
+const dropEdgeClassName = {
+  top: "[&>td]:shadow-[inset_0_2px_0_0_var(--color-primary)]",
+  bottom: "[&>td]:shadow-[inset_0_-2px_0_0_var(--color-primary)]"
+};
+function ProfileFieldGridRow({
+  field,
+  state,
+  drag,
+  selected,
+  active
+}) {
+  const [grabbed, setGrabbed] = react.useState(false);
+  const fieldState = !selected ? "deleted" : field.hidden ? "hidden" : "visible";
+  const stateClassName = fieldState === "deleted" ? "text-muted-foreground line-through opacity-60 [&_input]:line-through [&_select]:line-through" : fieldState === "hidden" ? "text-muted-foreground opacity-60" : "";
+  const dragging = drag.source === field.name;
+  const droppable = selected && Boolean(drag.source) && !dragging;
+  const edge = droppable ? drag.edgeFor(field.name) : null;
+  const release = () => {
+    setGrabbed(false);
+    drag.end();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      role: "listitem",
+      "data-field-state": fieldState,
+      "data-drop-edge": edge ?? void 0,
+      draggable: grabbed,
+      onDragStart: (event) => {
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", field.name);
+        drag.start(field.name);
+      },
+      onDragOver: (event) => {
+        if (!droppable) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = "move";
+        drag.over(field.name);
+      },
+      onDrop: (event) => {
+        if (!droppable) return;
+        event.preventDefault();
+        setGrabbed(false);
+        drag.drop(field.name);
+      },
+      onDragEnd: release,
+      className: [
+        "border-b border-border",
+        active ? "bg-primary/10" : "hover:bg-muted/40",
+        stateClassName,
+        dragging ? "opacity-40" : "",
+        edge ? dropEdgeClassName[edge] : ""
+      ].filter(Boolean).join(" "),
+      onClick: () => state.setActiveName(field.name),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-1", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              icon: UiDotsVertical.UiDotsVertical,
+              label: `Reorder ${field.name}`,
+              disabled: !selected,
+              className: "cursor-grab active:cursor-grabbing",
+              onMouseDown: () => setGrabbed(true),
+              onMouseUp: release,
+              onKeyDown: (event) => {
+                const offset = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+                if (!offset) return;
+                event.preventDefault();
+                state.moveField(field, offset);
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              icon: field.hidden ? UiEye.UiEye : UiEyeClosed.UiEyeClosed,
+              label: `${field.hidden ? "Show" : "Hide"} ${field.name}`,
+              disabled: !selected,
+              onClick: () => state.patchField(field, { hidden: !field.hidden })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconButton.IconButton,
+            {
+              icon: UiTrash.UiTrash,
+              label: `Delete ${field.name}`,
+              disabled: !selected,
+              className: "text-destructive hover:text-destructive",
+              onClick: () => state.removeField(field)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: field.name,
+            "aria-label": `Rename ${field.name}`,
+            disabled: !selected,
+            className: `${inputClassNameSm} min-w-[10rem] font-mono`,
+            onChange: (event) => state.patchField(field, { name: event.target.value })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            value: field.label ?? "",
+            placeholder: field.name,
+            "aria-label": `Label for ${field.name}`,
+            className: `${inputClassNameSm} min-w-[9rem]`,
+            onChange: (event) => state.patchField(field, { label: event.target.value || void 0 })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "select",
+          {
+            value: field.type ?? "",
+            "aria-label": `Type for ${field.name}`,
+            className: `${inputClassNameSm} w-auto`,
+            onChange: (event) => state.patchField(field, { type: event.target.value || void 0 }),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "auto" }),
+              profileFieldTypes.PROFILE_FIELD_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: type, children: type }, type))
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("td", { className: "px-3 py-1", children: field.cel ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] text-primary", children: "set" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: "—" }) })
+      ]
+    }
+  );
+}
+exports.ProfileFieldFilters = ProfileFieldFilters;
+exports.ProfileFieldGrid = ProfileFieldGrid;
+//# sourceMappingURL=profileFieldGrid.cjs.map

package/dist/profiles/profileFieldGrid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"profileFieldGrid.cjs","sources":["../../src/profiles/profileFieldGrid.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { IconButton } from \"../components/IconButton\";\nimport {\n  UiDotsVertical,\n  UiEye,\n  UiEyeClosed,\n  UiTrash,\n} from \"../icons\";\nimport type { ProfileFieldState } from \"./profileFieldState\";\nimport type { ProfileColumn, ProfileFieldFilter } from \"./profileWizardModel\";\nimport { PROFILE_FIELD_TYPES } from \"./profileFieldTypes\";\n\nconst inputClassName =\n  \"w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-2 focus:ring-primary/15\";\n\nconst inputClassNameSm =\n  \"w-full rounded-md border border-input bg-background px-2 py-1 text-xs outline-none focus:border-primary focus:ring-2 focus:ring-primary/15\";\n\n/** Search, type and selection filters. `compact` lays them out on one row for\n * the editor route's pinned toolbar; the wizard stacks them in its card. */\nexport function ProfileFieldFilters({\n  state,\n  compact = false,\n}: {\n  state: ProfileFieldState;\n  compact?: boolean;\n}) {\n  const className = compact ? inputClassNameSm : inputClassName;\n  const patch = (next: Partial<ProfileFieldFilter>) =>\n    state.setFilter((current) => ({ ...current, ...next }));\n  const search = (\n    <input\n      type=\"search\"\n      value={state.filter.query}\n      onChange={(event) => patch({ query: event.target.value })}\n      placeholder={`Search ${state.available.length} fields`}\n      aria-label=\"Search fields\"\n      className={className}\n    />\n  );\n  const selects = (\n    <>\n      <select\n        value={state.filter.type}\n        aria-label=\"Filter by field type\"\n        className={compact ? `${className} w-auto` : className}\n        onChange={(event) => patch({ type: event.target.value })}\n      >\n        <option value=\"\">All types</option>\n        {state.types.map((type) => (\n          <option key={type} value={type}>{type}</option>\n        ))}\n      </select>\n      <select\n        value={state.filter.selection}\n        aria-label=\"Filter by selection\"\n        className={compact ? `${className} w-auto` : className}\n        onChange={(event) =>\n          patch({ selection: event.target.value as ProfileFieldFilter[\"selection\"] })\n        }\n      >\n        <option value=\"all\">All fields</option>\n        <option value=\"selected\">Selected</option>\n        <option value=\"unselected\">Not selected</option>\n      </select>\n    </>\n  );\n  if (compact) {\n    return <div className=\"grid grid-cols-[1fr_auto_auto] gap-2\">{search}{selects}</div>;\n  }\n  return (\n    <div className=\"space-y-3\">\n      {search}\n      <div className=\"grid grid-cols-2 gap-2\">{selects}</div>\n    </div>\n  );\n}\n\n/** The in-flight row drag, shared by every row so a row can tell whether it is\n *  the one being dragged and which of its edges the drop would land on. */\ntype ProfileFieldDrag = {\n  /** Name of the field being dragged, or \"\" when no drag is in flight. */\n  source: string;\n  /** Which edge of `name` an insertion line belongs on, if any. */\n  edgeFor: (name: string) => \"top\" | \"bottom\" | null;\n  start: (name: string) => void;\n  over: (name: string) => void;\n  drop: (name: string) => void;\n  end: () => void;\n};\n\n/**\n * Spreadsheet-style column list: include, label and type are edited in place,\n * with quick visibility and delete actions on every row. Anything that does not\n * fit a grid cell — role, format, unit, width, CEL — stays in the inspector pane.\n *\n * Rows are dragged by their handle to reorder the profile's columns. Only\n * configured fields take part: a deleted one has no position of its own, so it\n * is neither draggable nor a drop target.\n */\nexport function ProfileFieldGrid({ state }: { state: ProfileFieldState }) {\n  const [source, setSource] = useState(\"\");\n  const [target, setTarget] = useState(\"\");\n  const order = state.visibleFields.map((field) => field.name);\n  const end = () => {\n    setSource(\"\");\n    setTarget(\"\");\n  };\n  const drag: ProfileFieldDrag = {\n    source,\n    edgeFor: (name) =>\n      !source || target !== name || source === name\n        ? null\n        : order.indexOf(source) < order.indexOf(name)\n          ? \"bottom\"\n          : \"top\",\n    start: setSource,\n    over: setTarget,\n    drop: (name) => {\n      state.reorderField(source, name);\n      end();\n    },\n    end,\n  };\n  return (\n    <div className=\"min-h-0 flex-1 overflow-auto\" role=\"list\">\n      <table className=\"w-fit border-collapse text-left\">\n        <thead className=\"sticky top-0 z-10 bg-muted/70 backdrop-blur\">\n          <tr>\n            {[\"Actions\", \"Field\", \"Display label\", \"Type\", \"CEL\"].map((heading) => (\n              <th\n                key={heading}\n                className=\"whitespace-nowrap border-b border-border px-3 py-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground\"\n              >\n                {heading}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {state.visibleFields.map((field) => (\n            <ProfileFieldGridRow\n              key={field.name}\n              field={field}\n              state={state}\n              drag={drag}\n              selected={state.selectedNames.has(field.name)}\n              active={state.activeField?.name === field.name}\n            />\n          ))}\n        </tbody>\n      </table>\n      {state.visibleFields.length === 0 ? (\n        <p className=\"p-8 text-center text-sm text-muted-foreground\">\n          No fields match these filters.\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nconst dropEdgeClassName = {\n  top: \"[&>td]:shadow-[inset_0_2px_0_0_var(--color-primary)]\",\n  bottom: \"[&>td]:shadow-[inset_0_-2px_0_0_var(--color-primary)]\",\n} as const;\n\nfunction ProfileFieldGridRow({\n  field,\n  state,\n  drag,\n  selected,\n  active,\n}: {\n  field: ProfileColumn;\n  state: ProfileFieldState;\n  drag: ProfileFieldDrag;\n  selected: boolean;\n  active: boolean;\n}) {\n  // The row carries text inputs, so it stays undraggable until the handle is\n  // pressed — otherwise selecting text in a cell starts a reorder.\n  const [grabbed, setGrabbed] = useState(false);\n  const fieldState = !selected ? \"deleted\" : field.hidden ? \"hidden\" : \"visible\";\n  const stateClassName =\n    fieldState === \"deleted\"\n      ? \"text-muted-foreground line-through opacity-60 [&_input]:line-through [&_select]:line-through\"\n      : fieldState === \"hidden\"\n        ? \"text-muted-foreground opacity-60\"\n        : \"\";\n  const dragging = drag.source === field.name;\n  const droppable = selected && Boolean(drag.source) && !dragging;\n  const edge = droppable ? drag.edgeFor(field.name) : null;\n  const release = () => {\n    setGrabbed(false);\n    drag.end();\n  };\n  return (\n    <tr\n      role=\"listitem\"\n      data-field-state={fieldState}\n      data-drop-edge={edge ?? undefined}\n      draggable={grabbed}\n      onDragStart={(event) => {\n        event.dataTransfer.effectAllowed = \"move\";\n        event.dataTransfer.setData(\"text/plain\", field.name);\n        drag.start(field.name);\n      }}\n      onDragOver={(event) => {\n        if (!droppable) return;\n        event.preventDefault();\n        event.dataTransfer.dropEffect = \"move\";\n        drag.over(field.name);\n      }}\n      onDrop={(event) => {\n        if (!droppable) return;\n        event.preventDefault();\n        setGrabbed(false);\n        drag.drop(field.name);\n      }}\n      onDragEnd={release}\n      className={[\n        \"border-b border-border\",\n        active ? \"bg-primary/10\" : \"hover:bg-muted/40\",\n        stateClassName,\n        dragging ? \"opacity-40\" : \"\",\n        edge ? dropEdgeClassName[edge] : \"\",\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onClick={() => state.setActiveName(field.name)}\n    >\n      <td className=\"px-3 py-1\" onClick={(event) => event.stopPropagation()}>\n        <div className=\"flex items-center gap-1\">\n          <IconButton\n            icon={UiDotsVertical}\n            label={`Reorder ${field.name}`}\n            disabled={!selected}\n            className=\"cursor-grab active:cursor-grabbing\"\n            onMouseDown={() => setGrabbed(true)}\n            onMouseUp={release}\n            onKeyDown={(event) => {\n              const offset =\n                event.key === \"ArrowUp\" ? -1 : event.key === \"ArrowDown\" ? 1 : 0;\n              if (!offset) return;\n              event.preventDefault();\n              state.moveField(field, offset);\n            }}\n          />\n          <IconButton\n            icon={field.hidden ? UiEye : UiEyeClosed}\n            label={`${field.hidden ? \"Show\" : \"Hide\"} ${field.name}`}\n            disabled={!selected}\n            onClick={() => state.patchField(field, { hidden: !field.hidden })}\n          />\n          <IconButton\n            icon={UiTrash}\n            label={`Delete ${field.name}`}\n            disabled={!selected}\n            className=\"text-destructive hover:text-destructive\"\n            onClick={() => state.removeField(field)}\n          />\n        </div>\n      </td>\n      <td className=\"px-3 py-1\">\n        <input\n          value={field.name}\n          aria-label={`Rename ${field.name}`}\n          disabled={!selected}\n          className={`${inputClassNameSm} min-w-[10rem] font-mono`}\n          onChange={(event) =>\n            state.patchField(field, { name: event.target.value })\n          }\n        />\n      </td>\n      <td className=\"px-3 py-1\">\n        <input\n          value={field.label ?? \"\"}\n          placeholder={field.name}\n          aria-label={`Label for ${field.name}`}\n          className={`${inputClassNameSm} min-w-[9rem]`}\n          onChange={(event) =>\n            state.patchField(field, { label: event.target.value || undefined })\n          }\n        />\n      </td>\n      <td className=\"px-3 py-1\">\n        <select\n          value={field.type ?? \"\"}\n          aria-label={`Type for ${field.name}`}\n          className={`${inputClassNameSm} w-auto`}\n          onChange={(event) =>\n            state.patchField(field, { type: event.target.value || undefined })\n          }\n        >\n          <option value=\"\">auto</option>\n          {PROFILE_FIELD_TYPES.map((type) => (\n            <option key={type} value={type}>{type}</option>\n          ))}\n        </select>\n      </td>\n      <td className=\"px-3 py-1\">\n        {field.cel ? (\n          <span className=\"rounded bg-primary/10 px-1.5 py-0.5 font-mono text-[10px] text-primary\">\n            set\n          </span>\n        ) : (\n          <span className=\"text-[11px] text-muted-foreground\">—</span>\n        )}\n      </td>\n    </tr>\n  );\n}\n"],"names":["jsx","jsxs","Fragment","useState","IconButton","UiDotsVertical","UiEye","UiEyeClosed","UiTrash","PROFILE_FIELD_TYPES"],"mappings":"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"}

package/dist/profiles/profileFieldGrid.d.ts

@@ -0,0 +1,20 @@
+import { ProfileFieldState } from './profileFieldState';
+/** Search, type and selection filters. `compact` lays them out on one row for
+ * the editor route's pinned toolbar; the wizard stacks them in its card. */
+export declare function ProfileFieldFilters({ state, compact, }: {
+    state: ProfileFieldState;
+    compact?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Spreadsheet-style column list: include, label and type are edited in place,
+ * with quick visibility and delete actions on every row. Anything that does not
+ * fit a grid cell — role, format, unit, width, CEL — stays in the inspector pane.
+ *
+ * Rows are dragged by their handle to reorder the profile's columns. Only
+ * configured fields take part: a deleted one has no position of its own, so it
+ * is neither draggable nor a drop target.
+ */
+export declare function ProfileFieldGrid({ state }: {
+    state: ProfileFieldState;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=profileFieldGrid.d.ts.map

package/dist/profiles/profileFieldGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profileFieldGrid.d.ts","sourceRoot":"","sources":["../../src/profiles/profileFieldGrid.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAU7D;4EAC4E;AAC5E,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAe,GAChB,EAAE;IACD,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,2CAkDA;AAeD;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,iBAAiB,CAAA;CAAE,2CA2DvE"}