@pipelex/mthds-form 0.1.0 → 0.2.0

package/dist/core/index.d.ts

@@ -109,7 +109,7 @@ interface Readiness {
  * a plural slot is never "absent" in MTHDS, its empty form IS the empty list,
  * and no method can declare "at least one item".
  *
- * **For a field the app built, the answer comes from `inputMustBeFilled`**
+ * **For a field this package built, the answer comes from `inputMustBeFilled`**
  * (`contracts.ts`) - the SAME predicate the method viewer's Run button, its ajv
  * `required` list and its missing-inputs toast all read. `buildRunFields`
  * stamps it onto `gating`. This used to be re-derived here as
@@ -121,8 +121,8 @@ interface Readiness {
  *
  * The shape heuristic survives only as the fallback for a **hand-authored**
  * `RunField` - story fixtures and unit tests, which have no contract to consult
- * and therefore nothing to disagree with. Every field the app renders comes from
- * `buildRunFields` and carries `gating`, so the app is on the contract's answer
+ * and therefore nothing to disagree with. Every field a host renders comes from
+ * `buildRunFields` and carries `gating`, so a host is on the contract's answer
  * alone.
  */
 declare function mustBeFilled(field: RunField): boolean;
@@ -130,10 +130,10 @@ declare function mustBeFilled(field: RunField): boolean;
 declare function computeReadiness(fields: RunField[], values: Record<string, unknown>): Readiness;
 
 /**
- * One validation error, in the shape the app reads (`property`, `message`,
+ * One validation error, in the shape hosts read (`property`, `message`,
  * `name`, `stack`, `params.format`). Structurally a superset-compatible twin of
- * RJSF's `RJSFValidationError`, so surfaces still holding RJSF form errors (the
- * method editor's Inputs panel) can hand them to the same message renderer.
+ * RJSF's `RJSFValidationError`, so a host surface still holding RJSF form errors
+ * (an RJSF-based inputs panel) can hand them to the same message renderer.
  */
 interface RunInputError {
     /** The ajv keyword that failed (`required`, `format`, `type`, …). */
@@ -218,7 +218,7 @@ declare function validateRunInputs(preparedData: Dict$1, inputs: Record<string,
 declare function apiInputsFromSchemaData(preparedData: Dict$1, inputs: Record<string, PipeInputContract>): Dict$1;
 
 /**
- * Bridges the `MethodRunner`'s field values to the rest of the app.
+ * Bridges the `MethodRunner`'s field values to the rest of the host.
  *
  * The method-store keeps inputs in the *simplified* format and runs send the
  * *full* RJSF form shape - both already handled by `inflate/deflateAllInputs`.
@@ -477,7 +477,7 @@ declare function toDateInputValue(value: string | undefined): string;
 declare function toStoredDateValue(day: string, datetime: boolean): string | undefined;
 
 /** The message keys this module renders, relative to the caller's namespace
- *  (the app passes its `method.editor` translator). */
+ *  (a host passes its own translator for that namespace). */
 type ValidationMessageKey = 'inputPanel.aDateField' | 'inputPanel.pickValidDate' | 'inputPanel.pickValidDateEmpty' | 'inputPanel.dateCarriesTime' | 'inputPanel.invalidValue' | 'inputPanel.invalidValueWithData';
 /**
  * The translate function the caller injects. Typed on the EXACT keys this

package/dist/core/index.js

@@ -1,3 +1,3 @@
-export { apiInputsFromRunValues, apiInputsFromSchemaData, asCalendarDate, buildPipeRef, buildRunFields, buildRunInputsSchema, collapseNullable, collectSchemaDefs, computeReadiness, conceptCategory, dayWithinDateTime, deflateAllInputs, deflateInput, derefSchema, describeValidationError, displayValue, fieldFilled, fieldsForContract, flattenAnyOf, getPipeIOContract, healStringWrappers, hoistDefsToRoot, inflateAllInputs, inflateInput, inputDataFromWorkingMemory, inputMustBeFilled, isAcceptableDate, isAcceptableDateTime, isFilled, isPluralInput, mustBeFilled, normalizeSchemaForRjsf, outputsFromPipeOutput, prepareRunInputs, prepareSchemaForRjsf, pruneEmptyOptionals, resolveConceptCode, resolveSchemaIndirection, rjsfDataFromRunValues, runValuesFromStore, schemaTypeOf, setValueAtPath, storeInputDataFromRunValues, toDateInputValue, toStoredDateValue, validateRunInputs, validateRunInputsSchema, valueAtProperty } from '../chunk-DAP47OGP.js';
+export { apiInputsFromRunValues, apiInputsFromSchemaData, asCalendarDate, buildPipeRef, buildRunFields, buildRunInputsSchema, collapseNullable, collectSchemaDefs, computeReadiness, conceptCategory, dayWithinDateTime, deflateAllInputs, deflateInput, derefSchema, describeValidationError, displayValue, fieldFilled, fieldsForContract, flattenAnyOf, getPipeIOContract, healStringWrappers, hoistDefsToRoot, inflateAllInputs, inflateInput, inputDataFromWorkingMemory, inputMustBeFilled, isAcceptableDate, isAcceptableDateTime, isFilled, isPluralInput, mustBeFilled, normalizeSchemaForRjsf, outputsFromPipeOutput, prepareRunInputs, prepareSchemaForRjsf, pruneEmptyOptionals, resolveConceptCode, resolveSchemaIndirection, rjsfDataFromRunValues, runValuesFromStore, schemaTypeOf, setValueAtPath, storeInputDataFromRunValues, toDateInputValue, toStoredDateValue, validateRunInputs, validateRunInputsSchema, valueAtProperty } from '../chunk-YWMUM7BC.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/react/index.d.ts

@@ -273,4 +273,34 @@ declare function FieldStringsProvider({ strings, children, }: {
 /** The strings the nearest provider supplies (English defaults when none does). */
 declare function useFieldStrings(): FieldStrings;
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, type FieldEnv, FieldRenderer, type FieldRendererProps, FieldShell, type FieldStrings, FieldStringsProvider, type FileValue, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, useFieldStrings };
+/**
+ * How a field's LABEL chrome should read. The control itself never changes.
+ *
+ * - `studio` (default): the field's name verbatim in mono, with its concept
+ *   pill. The name IS the identifier a builder writes in the `.mthds` file, so
+ *   showing it exactly - and typed - is the point.
+ * - `app`: the field's name as a human question in sans, no concept pill. Inside
+ *   a method app, `full_name` and `native.Text` are implementation detail; the
+ *   person filling the form has never seen the method's source.
+ *
+ * Deliberately a context rather than a prop or a `FieldEnv` flag: only the
+ * components that own label chrome read it - `FieldShell`, `ObjectField`,
+ * `BooleanField` and `ListField` - and threading a prop would have meant
+ * editing every field control and both recursive containers.
+ */
+type FieldPresentation = 'studio' | 'app';
+declare function FieldPresentationProvider({ presentation, children, }: {
+    presentation: FieldPresentation;
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useFieldPresentation(): FieldPresentation;
+/**
+ * `full_name` → `Full name`. Only the first word is capitalised: these are
+ * labels, not titles, and Title Case on every word reads as a form from 2009.
+ * Takes IDENTIFIERS only - snake_case or kebab-case names, where a separator
+ * is structure. An authored `title` never goes through here: it is already
+ * human-facing, and its hyphens are spelling (`E-mail address`), not structure.
+ */
+declare function humanizeFieldName(name: string): string;
+
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, type FieldEnv, type FieldPresentation, FieldPresentationProvider, FieldRenderer, type FieldRendererProps, FieldShell, type FieldStrings, FieldStringsProvider, type FileValue, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, humanizeFieldName, useFieldPresentation, useFieldStrings };

package/dist/react/index.js

@@ -1,11 +1,11 @@
 "use client";
-import { toStoredDateValue, toDateInputValue, isFilled } from '../chunk-DAP47OGP.js';
+import { toStoredDateValue, toDateInputValue, isFilled } from '../chunk-YWMUM7BC.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { ChevronDown, ChevronUp, Check, List, Braces, ListChecks, ToggleLeft, Hash, Image, FileText, CalendarDays, Type, Loader2, Upload, Link2, ImageOff, EyeOff, Eye, X, Minus, Plus, Trash2 } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React2 from 'react';
-import { createContext, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
+import { createContext, use, useMemo, useContext, useState, useRef, useCallback, useEffect } from 'react';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import { useDropzone } from 'react-dropzone';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -44,6 +44,25 @@ function ConceptPill({ conceptRef, category, className }) {
     }
   );
 }
+var FieldPresentationContext = createContext("studio");
+function FieldPresentationProvider({
+  presentation,
+  children
+}) {
+  return /* @__PURE__ */ jsx(FieldPresentationContext, { value: presentation, children });
+}
+function useFieldPresentation() {
+  return use(FieldPresentationContext);
+}
+function humanizeFieldName(name) {
+  const words = name.replace(/[_-]+/g, " ").trim();
+  if (words === "") return name;
+  return words.charAt(0).toUpperCase() + words.slice(1);
+}
+function fieldLabel(title, name, presentation) {
+  if (title !== void 0) return title;
+  return presentation === "app" ? humanizeFieldName(name) : name;
+}
 var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitives.Root,
   {
@@ -65,6 +84,8 @@ var Switch = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 function BooleanField({ field, value, onChange, id, disabled }) {
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -79,11 +100,14 @@ function BooleanField({ field, value, onChange, id, disabled }) {
               "label",
               {
                 htmlFor: id,
-                className: "font-mono text-[13px] font-medium leading-none text-foreground",
-                children: field.title ?? field.name
+                className: cn(
+                  "text-[13px] font-medium leading-none text-foreground",
+                  isApp ? "text-[13.5px]" : "font-mono"
+                ),
+                children: fieldLabel(field.title, field.name, presentation)
               }
             ),
-            /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
+            !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "boolean" })
           ] }),
           field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description })
         ] }),
@@ -151,8 +175,10 @@ function FieldShell({
   className
 }) {
   const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
   const Label2 = htmlFor ? "label" : "div";
-  const labelText = title !== void 0 ? title : name;
+  const labelText = fieldLabel(title, name, presentation);
   const showLabel = labelText.trim() !== "";
   return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
@@ -160,15 +186,18 @@ function FieldShell({
         Label2,
         {
           ...htmlFor ? { htmlFor } : {},
-          className: "font-mono text-[13px] font-medium leading-none text-foreground",
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
           children: labelText
         }
       ),
-      /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef, category }),
       !required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
     ] }),
     description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: description }),
-    children,
+    isApp && error ? /* @__PURE__ */ jsx("div", { className: "rounded-lg ring-1 ring-destructive/70 ring-offset-4 ring-offset-background", children }) : children,
     error && /* @__PURE__ */ jsx("p", { className: "flex items-center gap-1 text-[11px] text-destructive", role: "alert", children: error })
   ] });
 }
@@ -809,14 +838,25 @@ function OptionalToggle({ count, expanded, onToggle, noun = "field" }) {
 function ObjectField({ field, value, onChange, id, error, env }) {
   const s = useFieldStrings();
   const [showOptional, setShowOptional] = useState(false);
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
   const data = value ?? {};
   const setChild = (name, childValue) => onChange({ ...data, [name]: childValue });
   const optionalEmpty = field.fields.filter((f) => !f.required && !isFilled(data[f.name]));
   const visible = showOptional ? field.fields : field.fields.filter((f) => f.required || isFilled(data[f.name]));
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-mono text-[13px] font-medium leading-none text-foreground", children: field.title ?? field.name }),
-      /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
+          children: fieldLabel(field.title, field.name, presentation)
+        }
+      ),
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "structured" }),
       !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
     ] }),
     field.description && /* @__PURE__ */ jsx("p", { className: "text-[12px] leading-relaxed text-muted-foreground", children: field.description }),
@@ -856,6 +896,8 @@ function ObjectField({ field, value, onChange, id, error, env }) {
 }
 function ListField({ field, value, onChange, id, error, env }) {
   const s = useFieldStrings();
+  const presentation = useFieldPresentation();
+  const isApp = presentation === "app";
   const items = value ?? [];
   const setItem = (index, itemValue) => {
     const next = items.slice();
@@ -866,8 +908,17 @@ function ListField({ field, value, onChange, id, error, env }) {
   const addItem = () => onChange([...items, emptyValue(field.item)]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
-      /* @__PURE__ */ jsx("span", { className: "font-mono text-[13px] font-medium leading-none text-foreground", children: field.title ?? field.name }),
-      /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "text-[13px] font-medium leading-none text-foreground",
+            isApp ? "text-[13.5px]" : "font-mono"
+          ),
+          children: fieldLabel(field.title, field.name, presentation)
+        }
+      ),
+      !isApp && /* @__PURE__ */ jsx(ConceptPill, { conceptRef: field.conceptRef, category: "list" }),
       /* @__PURE__ */ jsx("span", { className: "font-mono text-[10.5px] text-muted-foreground", children: s.itemsCount(items.length) }),
       !field.required && /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono text-[10px] uppercase tracking-wider text-muted-foreground/70", children: s.optionalBadge })
     ] }),
@@ -1113,6 +1164,6 @@ function FieldRenderer({ field, value, onChange, id, error, env }) {
   }
 }
 
-export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldRenderer, FieldShell, FieldStringsProvider, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, useFieldStrings };
+export { BooleanField, ConceptPill, DEFAULT_FIELD_STRINGS, DateField, DocumentField, EnumField, FieldPresentationProvider, FieldRenderer, FieldShell, FieldStringsProvider, ImageField, ListField, NumberField, ObjectField, OptionalToggle, ProseField, TextField, UnknownField, fieldControlClass, humanizeFieldName, useFieldPresentation, useFieldStrings };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map