@adcops/autocore-react 3.3.84 → 3.3.87

package/src/components/ams/AssetEditDialog.tsx

@@ -1,27 +1,40 @@
 /*
- * <AssetEditDialog> — modal for editing an existing asset's role,
- * nameplate (custom fields), and per-axis sub_locations matrix.
+ * <AssetEditDialog> — modal for editing an existing asset.
  *
- * The server's `ams.update_asset` treats `asset_id`, `asset_type`,
- * `serial`, and `install_date` as immutable; this dialog mirrors that
- * by rendering those four as read-only context up top. Status stays
- * out of the form because the Retire button on <AssetDetailView>
- * already owns that transition — keeping the dialog focused on
- * "fix the values".
+ * Two tabs:
+ *   1. "Asset" — role, nameplate (custom fields), and per-axis
+ *      sub_locations matrix. Posts via `ams.update_asset`.
+ *   2. "Calibration" — performed_by, expires_at, cert_ref, notes, and
+ *      the calibration values (flat or per-axis). Enabled only when
+ *      `asset.current_calibration_id` is non-null. Posts via
+ *      `ams.update_calibration` (server enforces "current only"). Tab
+ *      is hidden entirely for assets that never had a calibration —
+ *      "+ Calibration" on <AssetDetailView> is the path to add one.
  *
- * Sibling <AssetRegistryTable>'s Add dialog covers creation. The two
- * forms have similar shape but enough divergent rules (which fields
- * are editable; role becomes a dropdown vs. read-only; etc.) that
- * sharing one component would be more confusing than two focused
- * dialogs. If we ever add a third mode the right answer is to
- * extract a shared <AssetFieldsForm> sub-component then.
+ * The server treats `asset_id`, `asset_type`, `serial`, and
+ * `install_date` as immutable; the read-only header strip mirrors
+ * that. Status stays out of this dialog because the Retire button on
+ * <AssetDetailView> already owns that transition.
+ *
+ * Save commits the Asset tab first, then (if a calibration is loaded)
+ * the Calibration tab. Either failure surfaces inline and stops; the
+ * dialog stays open so the operator can fix the input and retry.
+ *
+ * Sibling <CalibrationEntryDialog> still covers add-new-calibration
+ * and the in-place edit launched from the History table's pencil
+ * icon — this dialog overlaps the latter on purpose, since operators
+ * naturally expect calibration metadata to live alongside the asset
+ * they're editing.
  */
 
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Button } from 'primereact/button';
+import { Calendar } from 'primereact/calendar';
 import { Dialog } from 'primereact/dialog';
 import { Dropdown } from 'primereact/dropdown';
 import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { TabPanel, TabView } from 'primereact/tabview';
 import { EventEmitterContext } from '../../core/EventEmitterContext';
 import { MessageType } from '../../hub/CommandMessage';
 import { useAms, type AmsRole } from './AmsProvider';
@@ -70,6 +83,26 @@ function subLocationsFor(schemas: any, assetType: string): SubLocationsSchema |
     return sl as SubLocationsSchema;
 }
 
+/** Flat top-level calibration_fields declared on the asset_type, if any.
+ *  Empty array when the type uses the per-axis form or declares no
+ *  calibration values at all. */
+function calibrationFieldsFor(schemas: any, assetType: string): SchemaField[] {
+    const arr = schemas?.[assetType]?.calibration_fields;
+    return Array.isArray(arr) ? arr as SchemaField[] : [];
+}
+
+/** Per-axis calibration_fields declared on the asset_type's
+ *  sub_locations schema, if any. The asset_type uses *one* of:
+ *  flat top-level `calibration_fields`, or per-axis
+ *  `sub_locations.calibration_fields`. We render whichever is
+ *  non-empty (top-level wins on collision since
+ *  CalibrationEntryDialog handles them the same way). */
+function perAxisCalibrationFieldsFor(
+    sub: SubLocationsSchema | null,
+): SchemaField[] {
+    return (sub?.calibration_fields ?? []) as SchemaField[];
+}
+
 /** Coerce a per-cell string back to the field's declared type.
  *  Mirrors the Add dialog's helper so empty strings drop out, numbers
  *  come back as JSON numbers, bools as bools. */
@@ -102,7 +135,7 @@ function seedFromCustom(custom: Record<string, any> | undefined, name: string):
 export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
     visible, asset, onHide, onSaved,
 }) => {
-    const { schemas, roles } = useAms();
+    const { schemas, roles, readCalibration } = useAms();
     const { invoke } = useContext(EventEmitterContext);
 
     const assetType = asset?.asset_type ?? '';
@@ -110,6 +143,19 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
     const subLocationsSchema = useMemo(
         () => subLocationsFor(schemas, assetType), [schemas, assetType],
     );
+    const calibrationFields = useMemo(
+        () => calibrationFieldsFor(schemas, assetType), [schemas, assetType],
+    );
+    const perAxisCalibrationFields = useMemo(
+        () => perAxisCalibrationFieldsFor(subLocationsSchema), [subLocationsSchema],
+    );
+    /** Asset has per-axis calibration if its sub_locations schema
+     *  declares calibration_fields. Otherwise it's flat (or has no
+     *  cal values at all). Mirrors the rule CalibrationEntryDialog
+     *  uses to pick its UI mode. */
+    const isPerAxisCalibration = perAxisCalibrationFields.length > 0;
+    const hasAnyCalibrationFields =
+        isPerAxisCalibration || calibrationFields.length > 0;
     const rolesForType: AmsRole[] = useMemo(
         () => (assetType ? roles[assetType] ?? [] : []),
         [assetType, roles],
@@ -136,6 +182,30 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
     const [submitting, setSubmitting] = useState(false);
     const [error, setError] = useState<string | null>(null);
 
+    // Active tab. Defaults to the Asset tab on open. Stored in state
+    // so a parent re-render doesn't reset it while the operator is
+    // mid-edit on the Calibration tab.
+    const [activeTab, setActiveTab] = useState<number>(0);
+
+    // ── Calibration tab state ────────────────────────────────────────
+    // Loaded from `ams.read_calibration` when the dialog opens and the
+    // asset has a current calibration. `null` means "no current cal —
+    // tab is hidden." The operator can edit the meta fields and the
+    // values; on Save we POST `ams.update_calibration` with the
+    // current cal_id pinned. The server enforces that this matches
+    // the asset's current_calibration_id, so the tab only ever edits
+    // the cal currently in effect — older history is frozen.
+    const [calRecord, setCalRecord] = useState<any | null>(null);
+    const [calPerformedBy, setCalPerformedBy] = useState<string>('');
+    const [calExpiresAt, setCalExpiresAt] = useState<Date | null>(null);
+    const [calCertRef, setCalCertRef] = useState<string>('');
+    const [calNotes, setCalNotes] = useState<string>('');
+    /** Flat-schema cal values, e.g. `{ scale: 9.81, offset: 0 }`. */
+    const [calValues, setCalValues] = useState<Record<string, string>>({});
+    /** Per-axis cal matrix, `{ fx: { scale: "9.81", offset: "0" }, ... }`. */
+    const [calPerAxisValues, setCalPerAxisValues] =
+        useState<Record<string, Record<string, string>>>({});
+
     // Seed every input from the asset when the dialog opens. Re-seeds
     // on every open so editing one asset, cancelling, then opening
     // another doesn't carry the previous values forward.
@@ -143,6 +213,7 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
         if (!visible || !asset) return;
         setError(null);
         setSubmitting(false);
+        setActiveTab(0);
 
         // Role: pick the dropdown option when the asset's location
         // matches a declared role; otherwise route into ROLE_OTHER so
@@ -185,7 +256,66 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
             }
         }
         setSubLocationFields(seededSub);
-    }, [visible, asset, fields, subLocationsSchema, rolesForType]);
+
+        // ── Calibration tab: load the current cal record (if any)
+        //    and seed every input from it. Wiped between opens by the
+        //    initial setters below — handles "asset has no cal" and
+        //    "edit a different asset" cleanly without leftover state.
+        setCalRecord(null);
+        setCalPerformedBy('');
+        setCalExpiresAt(null);
+        setCalCertRef('');
+        setCalNotes('');
+        setCalValues({});
+        setCalPerAxisValues({});
+
+        const calId = typeof asset.current_calibration_id === 'string'
+            ? asset.current_calibration_id : '';
+        if (!calId) return;
+
+        let cancelled = false;
+        (async () => {
+            const rec = await readCalibration(asset.asset_id, calId);
+            if (cancelled || !rec) return;
+            setCalRecord(rec);
+            setCalPerformedBy(typeof rec.performed_by === 'string' ? rec.performed_by : '');
+            setCalCertRef(typeof rec.cert_ref === 'string' ? rec.cert_ref : '');
+            setCalNotes(typeof rec.notes === 'string' ? rec.notes : '');
+            setCalExpiresAt(rec.expires_at ? new Date(rec.expires_at) : null);
+
+            // Cal values come in the same shape we render. For a
+            // per-axis schema, we expect `values.<key>.<field>`; for
+            // a flat schema, `values.<field>` directly.
+            const values = (rec.values && typeof rec.values === 'object')
+                ? rec.values as Record<string, any> : {};
+            if (isPerAxisCalibration && subLocationsSchema) {
+                const seededPa: Record<string, Record<string, string>> = {};
+                for (const key of subLocationsSchema.keys) {
+                    const row = (values[key] && typeof values[key] === 'object')
+                        ? values[key] as Record<string, any> : {};
+                    const r: Record<string, string> = {};
+                    for (const f of perAxisCalibrationFields) {
+                        const v = row[f.name];
+                        r[f.name] = (v === undefined || v === null) ? '' : String(v);
+                    }
+                    seededPa[key] = r;
+                }
+                setCalPerAxisValues(seededPa);
+            } else {
+                const seededFlat: Record<string, string> = {};
+                for (const f of calibrationFields) {
+                    const v = values[f.name];
+                    seededFlat[f.name] = (v === undefined || v === null) ? '' : String(v);
+                }
+                setCalValues(seededFlat);
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [
+        visible, asset, fields, subLocationsSchema, rolesForType,
+        calibrationFields, perAxisCalibrationFields, isPerAxisCalibration,
+        readCalibration,
+    ]);
 
     const onRoleChange = (value: string) => {
         if (value === ROLE_OTHER) {
@@ -243,12 +373,41 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
             const resp: any = await invoke(
                 'ams.update_asset' as any, MessageType.Request, payload,
             );
-            if (resp?.success) {
-                onSaved?.();
-                onHide();
-            } else {
+            if (!resp?.success) {
                 setError(resp?.error_message ?? 'update_asset failed');
+                return;
+            }
+
+            // If a calibration is loaded, save it too. Sequential is
+            // intentional — if the asset update succeeded but cal
+            // failed, the operator should retry the cal alone rather
+            // than re-submit the asset. The server enforces "cal_id
+            // must equal current_calibration_id", which guards against
+            // a stale dialog editing a cal that's since been replaced.
+            if (calRecord) {
+                const calPayload: any = {
+                    asset_id: asset.asset_id,
+                    cal_id:   calRecord.cal_id,
+                    performed_by: calPerformedBy,
+                    expires_at:   calExpiresAt ? calExpiresAt.toISOString() : null,
+                    cert_ref:     calCertRef,
+                    notes:        calNotes,
+                    values:       calValuesPayload(),
+                };
+                const calResp: any = await invoke(
+                    'ams.update_calibration' as any, MessageType.Request, calPayload,
+                );
+                if (!calResp?.success) {
+                    setError(calResp?.error_message ?? 'update_calibration failed');
+                    // Switch the operator to the Calibration tab so
+                    // they see the inputs that the error refers to.
+                    setActiveTab(1);
+                    return;
+                }
             }
+
+            onSaved?.();
+            onHide();
         } catch (e: any) {
             setError(String(e?.message ?? e));
         } finally {
@@ -256,6 +415,33 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
         }
     };
 
+    /** Build the `values` field for `ams.update_calibration`. Picks
+     *  the per-axis matrix or the flat map based on the asset_type's
+     *  schema; cells with empty input drop out so the on-disk record
+     *  doesn't accumulate empty strings. */
+    const calValuesPayload = (): any => {
+        if (isPerAxisCalibration && subLocationsSchema) {
+            const out: Record<string, Record<string, any>> = {};
+            for (const key of subLocationsSchema.keys) {
+                const row: Record<string, any> = {};
+                for (const f of perAxisCalibrationFields) {
+                    const raw = calPerAxisValues[key]?.[f.name] ?? '';
+                    const coerced = coerceField(f, raw);
+                    if (coerced !== undefined) row[f.name] = coerced;
+                }
+                out[key] = row;
+            }
+            return out;
+        }
+        const out: Record<string, any> = {};
+        for (const f of calibrationFields) {
+            const raw = calValues[f.name];
+            const coerced = coerceField(f, raw ?? '');
+            if (coerced !== undefined) out[f.name] = coerced;
+        }
+        return out;
+    };
+
     // Gate Save on the same required-field rules the Add dialog uses,
     // applied to the *current* (possibly edited) values. The server
     // re-validates and we surface its error if anything slips through.
@@ -315,6 +501,8 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
                 )}
             </div>
 
+            <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
+                <TabPanel header="Asset">
             <div style={{ display: 'grid',
                           gridTemplateColumns: 'auto 1fr',
                           gap: '0.5rem 1rem',
@@ -452,6 +640,155 @@ export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
                     </div>
                 </div>
             )}
+                </TabPanel>
+
+                {/* Calibration tab — present only when the asset has
+                    a current calibration. We hide the tab entirely
+                    rather than showing it disabled because operators
+                    asked for the affordance to be visually obvious
+                    when it's available, not a permanent grey tease
+                    of "you can't edit this yet". Adding a first cal
+                    flows through `+ Calibration` on the parent. */}
+                {calRecord && (
+                    <TabPanel header={`Calibration (${calRecord.cal_id})`}>
+                        {/* Meta fields — performed_by, expires_at,
+                            cert_ref, notes. Same shape as the entry
+                            dialog so operators see consistent inputs
+                            either way they reach the cal form. */}
+                        <div style={{ display: 'grid',
+                                      gridTemplateColumns: 'auto 1fr',
+                                      gap: '0.5rem 1rem',
+                                      alignItems: 'center' }}>
+                            <label>Performed by</label>
+                            <InputText value={calPerformedBy}
+                                onChange={(e) => setCalPerformedBy(e.target.value)} />
+
+                            <label>Expires at</label>
+                            <Calendar value={calExpiresAt}
+                                onChange={(e) => setCalExpiresAt((e.value as Date) ?? null)}
+                                showIcon dateFormat="yy-mm-dd" />
+
+                            <label>Certificate ref</label>
+                            <InputText value={calCertRef}
+                                onChange={(e) => setCalCertRef(e.target.value)}
+                                placeholder="e.g. ADC-CAL-2026-1043"
+                            />
+
+                            <label>Notes</label>
+                            <InputTextarea value={calNotes} rows={3}
+                                onChange={(e) => setCalNotes(e.target.value)}
+                                autoResize />
+                        </div>
+
+                        {/* Cal values. Per-axis when the schema
+                            declares them; otherwise the flat field
+                            list. Skipped entirely when the asset_type
+                            declares no calibration_fields — the meta
+                            fields above still let the operator fix
+                            cert_ref / notes / expiry on a values-less
+                            calibration. */}
+                        {hasAnyCalibrationFields && (
+                            <div style={{ marginTop: '1rem' }}>
+                                <h4 style={{ margin: '0 0 0.5rem 0' }}>
+                                    {isPerAxisCalibration
+                                        ? (subLocationsSchema?.label ?? 'Per-axis calibration')
+                                        : 'Calibration values'}
+                                </h4>
+                                {isPerAxisCalibration && subLocationsSchema ? (
+                                    <div style={{ overflowX: 'auto' }}>
+                                        <table style={{ width: '100%', borderCollapse: 'collapse',
+                                                        fontSize: '0.875rem' }}>
+                                            <thead>
+                                                <tr>
+                                                    <th style={{ textAlign: 'left',
+                                                                 padding: '0.25rem 0.5rem',
+                                                                 borderBottom: '1px solid var(--surface-border)' }}>
+                                                        {subLocationsSchema.key_label ?? 'Key'}
+                                                    </th>
+                                                    {perAxisCalibrationFields.map(f => (
+                                                        <th key={f.name}
+                                                            title={f.description ?? undefined}
+                                                            style={{ textAlign: 'left',
+                                                                     padding: '0.25rem 0.5rem',
+                                                                     borderBottom: '1px solid var(--surface-border)' }}>
+                                                            {(f.label ?? f.name)}
+                                                            {f.units ? ` [${f.units}]` : ''}
+                                                            {f.required ? ' *' : ''}
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {subLocationsSchema.keys.map(key => (
+                                                    <tr key={key}>
+                                                        <td style={{ padding: '0.25rem 0.5rem', fontWeight: 600 }}>
+                                                            {key}
+                                                        </td>
+                                                        {perAxisCalibrationFields.map(field => {
+                                                            const cellValue =
+                                                                calPerAxisValues[key]?.[field.name] ?? '';
+                                                            const isNum =
+                                                                field.type !== 'string' && field.type !== 'bool';
+                                                            return (
+                                                                <td key={field.name}
+                                                                    style={{ padding: '0.25rem 0.5rem' }}>
+                                                                    <InputText
+                                                                        value={cellValue}
+                                                                        keyfilter={isNum ? 'num' : undefined}
+                                                                        onChange={(e) => {
+                                                                            const v = e.target.value;
+                                                                            setCalPerAxisValues(s => ({
+                                                                                ...s,
+                                                                                [key]: {
+                                                                                    ...(s[key] ?? {}),
+                                                                                    [field.name]: v,
+                                                                                },
+                                                                            }));
+                                                                        }}
+                                                                        style={{ width: '100%' }}
+                                                                    />
+                                                                </td>
+                                                            );
+                                                        })}
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                ) : (
+                                    <div style={{ display: 'grid',
+                                                  gridTemplateColumns: 'auto 1fr',
+                                                  gap: '0.5rem 1rem',
+                                                  alignItems: 'center' }}>
+                                        {calibrationFields.map(field => {
+                                            const label = field.label ?? field.name;
+                                            const fullLabel = field.units
+                                                ? `${label} [${field.units}]${field.required ? ' *' : ''}`
+                                                : `${label}${field.required ? ' *' : ''}`;
+                                            const isNum = field.type !== 'string'
+                                                       && field.type !== 'bool';
+                                            return (
+                                                <React.Fragment key={field.name}>
+                                                    <label title={field.description ?? undefined}>
+                                                        {fullLabel}
+                                                    </label>
+                                                    <InputText
+                                                        value={calValues[field.name] ?? ''}
+                                                        keyfilter={isNum ? 'num' : undefined}
+                                                        onChange={(e) => setCalValues(s => ({
+                                                            ...s, [field.name]: e.target.value,
+                                                        }))}
+                                                    />
+                                                </React.Fragment>
+                                            );
+                                        })}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+                    </TabPanel>
+                )}
+            </TabView>
 
             {error && (
                 <div style={{ marginTop: '1rem', color: '#ef4444' }}>

package/src/components/forms/FormRow.tsx

@@ -0,0 +1,37 @@
+/**
+ * FormRow — grid-aligned label/input pair with optional required marker
+ * and inline error text. Drop inside a FormSection.
+ */
+
+import * as React from 'react';
+import './forms.css';
+
+export interface FormRowProps {
+    label: React.ReactNode;
+    required?: boolean;
+    /** Optional descriptive hint shown beneath the label. */
+    hint?: React.ReactNode;
+    /** Inline error text shown beneath the input. */
+    error?: React.ReactNode;
+    /** Optional `htmlFor` association on the label tag. */
+    htmlFor?: string;
+    children?: React.ReactNode;
+}
+
+export const FormRow: React.FC<FormRowProps> = ({ label, required, hint, error, htmlFor, children }) => {
+    return (
+        <div className={`ac-form-row${error ? ' ac-form-row--error' : ''}`}>
+            <label className="ac-form-row__label" htmlFor={htmlFor}>
+                {label}
+                {required && <span className="ac-form-row__required" aria-hidden> *</span>}
+                {hint && <small className="ac-form-row__hint">{hint}</small>}
+            </label>
+            <div className="ac-form-row__field">
+                {children}
+                {error && <small className="ac-form-row__error">{error}</small>}
+            </div>
+        </div>
+    );
+};
+
+export default FormRow;

package/src/components/forms/FormSection.tsx

@@ -0,0 +1,39 @@
+/**
+ * FormSection — labeled bordered region containing a group of FormRow rows.
+ *
+ * Used by the TIS editor subforms and intended for app-level settings
+ * pages. Replaces the ad-hoc `.ac-form-grid` divs scattered across project
+ * settings views.
+ */
+
+import * as React from 'react';
+import './forms.css';
+
+export interface FormSectionProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children?: React.ReactNode;
+    /** Right-aligned controls (buttons, dirty pill, etc.). */
+    actions?: React.ReactNode;
+}
+
+export const FormSection: React.FC<FormSectionProps> = ({ title, description, actions, children }) => {
+    return (
+        <section className="ac-form-section">
+            {(title || actions) && (
+                <header className="ac-form-section__header">
+                    <div>
+                        {title && <h3 className="ac-form-section__title">{title}</h3>}
+                        {description && <small className="ac-form-section__desc">{description}</small>}
+                    </div>
+                    {actions && <div className="ac-form-section__actions">{actions}</div>}
+                </header>
+            )}
+            <div className="ac-form-section__body">
+                {children}
+            </div>
+        </section>
+    );
+};
+
+export default FormSection;

package/src/components/forms/forms.css

@@ -0,0 +1,89 @@
+.ac-form-section {
+    border: 1px solid var(--surface-d, #e2e8f0);
+    border-radius: 6px;
+    background: var(--surface-card, #fff);
+    margin-bottom: 1rem;
+}
+
+.ac-form-section__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    padding: 0.5rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    background: var(--surface-b, #f8fafc);
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+}
+
+.ac-form-section__title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.ac-form-section__desc {
+    color: var(--text-color-secondary, #64748b);
+    display: block;
+    margin-top: 0.15rem;
+}
+
+.ac-form-section__actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.ac-form-section__body {
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ac-form-row {
+    display: grid;
+    grid-template-columns: minmax(8rem, 14rem) 1fr;
+    gap: 0.5rem 1rem;
+    align-items: start;
+}
+
+.ac-form-row--error .ac-form-row__field input,
+.ac-form-row--error .ac-form-row__field .p-inputtext {
+    border-color: #dc2626;
+}
+
+.ac-form-row__label {
+    font-weight: 500;
+    padding-top: 0.4rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-form-row__required {
+    color: #dc2626;
+}
+
+.ac-form-row__hint {
+    color: var(--text-color-secondary, #64748b);
+    font-weight: 400;
+    font-size: 0.75rem;
+    margin-top: 0.15rem;
+}
+
+.ac-form-row__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ac-form-row__field > input,
+.ac-form-row__field > .p-inputtext,
+.ac-form-row__field > .p-dropdown,
+.ac-form-row__field > .p-inputtextarea {
+    width: 100%;
+}
+
+.ac-form-row__error {
+    color: #dc2626;
+    font-size: 0.75rem;
+}

package/src/components/forms/index.ts

@@ -0,0 +1,2 @@
+export { FormSection, type FormSectionProps } from './FormSection';
+export { FormRow, type FormRowProps } from './FormRow';