@adcops/autocore-react 3.5.5 → 3.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adcops/autocore-react",
-  "version": "3.5.5",
+  "version": "3.5.9",
   "description": "A React component library for industrial user interfaces.",
   "private": false,
   "type": "module",
@@ -12,6 +12,7 @@
     "generate-docs": "typedoc",
     "build": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs && npm run build-themes && npm run minify",
     "build:dev": "npm run clean && tsc && node ./tools/copy-distribution-files.cjs",
+    "test:tis-editor": "vite build --config tools/tests/vite.config.mjs && node tools/tests/tis-editor.test.mjs",
     "dev": "vite",
     "playground": "vite",
     "playground:build": "vite build",
@@ -82,6 +83,7 @@
     "@types/react-dom": "^18.2.7",
     "@types/react-transition-group": "^4.4.12",
     "@vitejs/plugin-react": "^6.0.2",
+    "jsdom": "^22.1.0",
     "primereact": "^10.9.7",
     "rimraf": "^6.0.1",
     "terser": "^5.44.0",

package/src/components/ams/AssetRegistryTable.tsx

@@ -164,6 +164,14 @@ export const AssetRegistryTable: React.FC = () => {
     const [filterType, setFilterType] = useState<string | null>(null);
     const [filterStatus, setFilterStatus] = useState<string | null>(null);
     const [addState, setAddState] = useState<AddDialogState>(EMPTY_ADD);
+    /** True from the moment Create is pressed until `ams.create_asset`
+     *  has answered and the registry has been refreshed. Creation is a
+     *  server round-trip, and with the buttons still live an operator
+     *  who saw no feedback would press Create again — registering the
+     *  same asset two or three times. While this is set the footer
+     *  shows a spinner instead of the buttons and the dialog refuses to
+     *  close, so there is no second press to swallow. */
+    const [creating, setCreating] = useState(false);
 
     // <MissingAssetsBanner> fires the `ams:prefill-add` custom event
     // when an operator clicks Register on one of its rows. Catch it
@@ -243,7 +251,10 @@ export const AssetRegistryTable: React.FC = () => {
     }, [assets, filterType, filterStatus]);
 
     const onCreate = async () => {
-        if (!addState.assetType) return;
+        // Re-entry guard: belt to the footer's braces. The footer hides
+        // the button while `creating`, but a queued click (or a stray
+        // Enter key) must not post a second create.
+        if (!addState.assetType || creating) return;
         // Coerce the per-field strings to their declared types. Numbers
         // become JSON numbers, bools become bools; empty strings drop
         // out so the asset_json doesn't get noisy with empty values.
@@ -296,6 +307,7 @@ export const AssetRegistryTable: React.FC = () => {
             payload.sub_locations = subLocations;
         }
 
+        setCreating(true);
         try {
             const resp: any = await invoke('ams.create_asset' as any, MessageType.Request, payload);
             if (resp?.success) {
@@ -309,6 +321,11 @@ export const AssetRegistryTable: React.FC = () => {
             }
         } catch (e) {
             console.error('[AssetRegistryTable] create_asset threw:', e);
+        } finally {
+            // Always clear, including on the failure paths above — the
+            // dialog stays open with the operator's entries intact and
+            // the buttons come back so they can retry or cancel.
+            setCreating(false);
         }
     };
 
@@ -466,15 +483,29 @@ export const AssetRegistryTable: React.FC = () => {
                 header="Add New Asset"
                 visible={addState.open}
                 style={{ width: '32rem' }}
-                onHide={() => setAddState(EMPTY_ADD)}
+                /* No escape hatches while the create is in flight: the
+                   header X, the Escape key and the mask click all route
+                   through onHide, and closing mid-flight would drop the
+                   operator back to a table that has not refreshed yet. */
+                closable={!creating}
+                closeOnEscape={!creating}
+                onHide={() => { if (!creating) setAddState(EMPTY_ADD); }}
                 footer={
-                    <>
-                        <Button label="Cancel" severity="secondary" onClick={() => setAddState(EMPTY_ADD)} />
-                        <Button label="Create" icon="pi pi-check"
-                            onClick={onCreate}
-                            disabled={createDisabled}
-                        />
-                    </>
+                    creating ? (
+                        <div style={{ display: 'flex', justifyContent: 'flex-end',
+                                      alignItems: 'center', gap: '0.5rem' }}>
+                            <i className="pi pi-spin pi-spinner" />
+                            <span>Creating asset…</span>
+                        </div>
+                    ) : (
+                        <>
+                            <Button label="Cancel" severity="secondary" onClick={() => setAddState(EMPTY_ADD)} />
+                            <Button label="Create" icon="pi pi-check"
+                                onClick={onCreate}
+                                disabled={createDisabled}
+                            />
+                        </>
+                    )
                 }
             >
                 <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem', alignItems: 'center' }}>

package/src/components/index.ts

@@ -38,6 +38,9 @@ export type { TestSetupFormProps } from './tis/TestSetupForm';
 export { TestSetupView }       from './tis/TestSetupView';
 export type { TestSetupViewProps } from './tis/TestSetupView';
 
+export { orderedViews, renumberViews, moveView } from './tis/chartViews';
+export type { NamedView, OrderableView } from './tis/chartViews';
+
 export { TestFieldRow }        from './tis/TestFieldRow';
 export type { TestFieldRowProps, CycleConfigScope } from './tis/TestFieldRow';
 

package/src/components/tis/TestDataView.tsx

@@ -47,6 +47,7 @@ import { AutoCoreTagContext } from '../../core/AutoCoreTagContext';
 import { formatScaled } from '../../core/formatScaled';
 import type { ScaleConfig } from '../../core/AutoCoreTagTypes';
 import { useRawCycleData } from './useRawCycleData';
+import { orderedViews } from './chartViews';
 import { ScienceTable } from './ScienceTable';
 import type { ScienceColumn } from './ScienceTable';
 
@@ -171,6 +172,14 @@ export interface ChartView  {
      * table, CSV export and every calculation still see the full value.
      */
     x_decimals?: number;
+    /**
+     * Position in the view picker, ascending — the view with the lowest
+     * `order` is the one this panel opens on. Written by the TIS editor's
+     * Move up / Move down. See `chartViews.ts`: the keys of `views` arrive
+     * sorted by id, so the order an author chose has to be carried
+     * explicitly.
+     */
+    order?: number;
     /**
      * Optional shaded X-range bands drawn over the plot, declared per view
      * in project.json (static). These are drawn on every cycle.
@@ -336,16 +345,13 @@ export const TestDataView: React.FC<TestDataViewProps> = (props) => {
     const [availableCycles, setAvailableCycles] = useState<number[]>([]);
     const [selectedCycle, setSelectedCycle]     = useState<number | null>(null);
 
-    // All views, any type, in declaration order. The dropdown lists
-    // every one; the chart area dispatches on `view.type` to render
-    // either a scatter or a raw_trace chart from the appropriate data.
-    const allViews = useMemo(() => {
-        const out: { name: string; view: ChartView }[] = [];
-        for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            out.push({ name, view: v as ChartView });
-        }
-        return out;
-    }, [schema]);
+    // All views, any type, in the author's order (see `orderedViews`). The
+    // dropdown lists every one; the chart area dispatches on `view.type` to
+    // render either a scatter or a raw_trace chart from the appropriate data.
+    const allViews = useMemo(
+        () => orderedViews(schema?.views as Record<string, ChartView> | undefined),
+        [schema],
+    );
 
     const [selectedView, setSelectedView] = useState<string | null>(
         allViews.length > 0 ? allViews[0].name : null,

package/src/components/tis/TestRawDataView.tsx

@@ -24,6 +24,7 @@ import { Line } from 'react-chartjs-2';
 import type { ChartView, TestMethod } from './TestDataView';
 import { useTis } from './TisProvider';
 import { useRawCycleData } from './useRawCycleData';
+import { orderedViews } from './chartViews';
 
 ChartJS.register(
     CategoryScale, LinearScale, PointElement, LineElement,
@@ -55,13 +56,11 @@ export const TestRawDataView: React.FC<TestRawDataViewProps> = (props) => {
     const chartRef              = useRef<any>(null);
 
     // raw_trace-capable views only — cycle scatter lives in <TestDataView>.
-    const traceViews = useMemo(() => {
-        const out: { name: string; view: ChartView }[] = [];
-        for (const [name, v] of Object.entries(schema?.views ?? {})) {
-            if ((v as ChartView).type === 'raw_trace') out.push({ name, view: v as ChartView });
-        }
-        return out;
-    }, [schema]);
+    // In the author's order, same as the unified panel's picker.
+    const traceViews = useMemo(
+        () => orderedViews(schema?.views as Record<string, ChartView> | undefined, 'raw_trace'),
+        [schema],
+    );
 
     const [selectedView, setSelectedView] = useState<string | null>(
         traceViews.length > 0 ? traceViews[0].name : null,

package/src/components/tis/chartViews.ts

@@ -0,0 +1,104 @@
+/**
+ * Chart-view ordering.
+ *
+ * `views` is a JSON object and the server holds it in a `BTreeMap`, so what
+ * reaches the HMI is sorted by view id — never by the order anyone chose. That
+ * order is a real setting: the Data tab opens on the FIRST view, so whichever
+ * id happens to sort first becomes the default chart. Renaming views to spell
+ * an order is not an option (the id is the wire key, and codegen emits it).
+ *
+ * So the order is carried explicitly, per view, as `order`: an integer,
+ * ascending, renumbered densely by the editor's Move up / Move down.
+ *
+ * `order` is deliberately NOT modelled by the Rust `ChartView`. It rides in
+ * that struct's flattened `extra` map, the way `x_decimals`, `smooth` and
+ * `regions` already do, so a `tis.put_method` → `tis.save_config` round-trip
+ * preserves it with no server-side change to deploy.
+ *
+ * A view with no `order` sorts after every ordered one, by id — so a method
+ * that has never been through the editor keeps exactly the order it shows
+ * today, and a newly added view lands last instead of jumping to the front.
+ */
+
+/** Minimal shape this module needs; both the editor's and the runtime's
+ *  `ChartView` satisfy it. */
+export interface OrderableView {
+    order?: number;
+    type?: string;
+}
+
+/** A view together with its id — the id is the wire key, not a field. */
+export interface NamedView<V> {
+    name: string;
+    view: V;
+}
+
+/** Sort key for a view that declares no `order`: after all ordered views. */
+const UNORDERED = Number.MAX_SAFE_INTEGER;
+
+const orderOf = (v: OrderableView | undefined): number =>
+    typeof v?.order === 'number' && Number.isFinite(v.order) ? v.order : UNORDERED;
+
+/**
+ * The method's views in display order: by `order` ascending, then by id.
+ *
+ * @param views    The method's `views` map, as received from the server.
+ * @param ofType   Optional `type` filter (e.g. `'raw_trace'`).
+ */
+export function orderedViews<V extends OrderableView>(
+    views?: Record<string, V> | null,
+    ofType?: string,
+): NamedView<V>[] {
+    const out: NamedView<V>[] = [];
+    for (const [name, view] of Object.entries(views ?? {})) {
+        if (ofType && view?.type !== ofType) continue;
+        out.push({ name, view });
+    }
+    out.sort((a, b) => {
+        const d = orderOf(a.view) - orderOf(b.view);
+        return d !== 0 ? d : a.name.localeCompare(b.name);
+    });
+    return out;
+}
+
+/**
+ * Stamp `order` 0..n-1 onto `views` following `orderedIds`.
+ *
+ * Every view is renumbered, not just the moved one: dense integers mean the
+ * next move is a swap of two adjacent numbers, and a method that was
+ * previously unordered comes out fully ordered after one Move rather than
+ * half-and-half.
+ *
+ * Ids in `views` but missing from `orderedIds` keep their existing `order`
+ * and land after the renumbered ones.
+ */
+export function renumberViews<V extends OrderableView>(
+    views: Record<string, V>,
+    orderedIds: string[],
+): Record<string, V> {
+    const out: Record<string, V> = {};
+    orderedIds.forEach((id, i) => {
+        const v = views[id];
+        if (v) out[id] = { ...v, order: i };
+    });
+    for (const [id, v] of Object.entries(views)) {
+        if (!(id in out)) out[id] = v;
+    }
+    return out;
+}
+
+/**
+ * Move the view at `index` by `dir` (-1 up, +1 down) and renumber.
+ * Out-of-range moves return the map unchanged.
+ */
+export function moveView<V extends OrderableView>(
+    views: Record<string, V>,
+    index: number,
+    dir: -1 | 1,
+): Record<string, V> {
+    const ids = orderedViews(views).map(v => v.name);
+    const j = index + dir;
+    if (index < 0 || index >= ids.length || j < 0 || j >= ids.length) return views;
+    [ids[index], ids[j]] = [ids[j], ids[index]];
+    return renumberViews(views, ids);
+}

package/src/components/tis-editor/editor/ChartViewDialog.tsx

@@ -5,6 +5,7 @@ import { InputText } from 'primereact/inputtext';
 import { Dropdown } from 'primereact/dropdown';
 import { InputNumber } from 'primereact/inputnumber';
 import { FormRow } from '../../forms/FormRow';
+import { useEditDraft } from '../../forms/useEditDraft';
 import { DEFAULT_X_DECIMALS } from '../../tis/TestDataView';
 import type { ChartAxis, ChartSeries, ChartView } from '../types';
 
@@ -43,17 +44,30 @@ const blank = (): ChartView => ({
 export const ChartViewDialog: React.FC<ChartViewDialogProps> = ({
     visible, initial, onCancel, onSave, knownKeys, siblingIds,
 }) => {
-    const [viewId, setViewId] = useState<string>('');
-    const [draft, setDraft] = useState<ChartView>(blank());
-    const [error, setError] = useState<string | null>(null);
+    // One draft covering both edited values (the id is editable too), seeded
+    // once per open. Keyed on the view id rather than on `initial` — the
+    // parent rebuilds that object on every render of its own, and this editor
+    // re-renders with the live tag traffic underneath it, so an identity-keyed
+    // reseed threw away every keystroke as it was typed.
+    const { draft: form, setDraft: setForm, token } = useEditDraft(
+        visible,
+        initial?.viewId ?? '',
+        () => ({
+            viewId: initial?.viewId ?? '',
+            view: initial
+                ? (JSON.parse(JSON.stringify(initial.view)) as ChartView)
+                : blank(),
+        }),
+    );
+    const viewId = form.viewId;
+    const draft  = form.view;
+    const setViewId = (id: string) => setForm(f => ({ ...f, viewId: id }));
+    const setDraft  = (view: ChartView) => setForm(f => ({ ...f, view }));
 
-    useEffect(() => {
-        if (visible) {
-            setViewId(initial?.viewId ?? '');
-            setDraft(initial ? JSON.parse(JSON.stringify(initial.view)) : blank());
-            setError(null);
-        }
-    }, [visible, initial]);
+    const [error, setError] = useState<string | null>(null);
+    // Clears on open and on a switch to another view — `token` changes on
+    // exactly those transitions and on no other render.
+    useEffect(() => { setError(null); }, [token]);
 
     const validate = (): string | null => {
         if (!viewId.trim()) return 'View ID is required.';

package/src/components/tis-editor/editor/TestFieldDialog.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
 import { Dialog } from 'primereact/dialog';
 import { Button } from 'primereact/button';
 import { InputText } from 'primereact/inputtext';
@@ -7,10 +7,12 @@ import { Dropdown } from 'primereact/dropdown';
 import { Checkbox } from 'primereact/checkbox';
 import { InputNumber } from 'primereact/inputnumber';
 import { FormRow } from '../../forms/FormRow';
+import { useEditDraft } from '../../forms/useEditDraft';
 import type { TestField, AggFn, AggFrom, AggScope, AggregateSpec } from '../types';
 // One home for bound parsing/formatting — shared with the operator-facing
 // form so the editor and the runtime can never disagree on what a bound is.
 import { boundText, parseBound, boundInvalid } from '../../tis/TestFieldRow';
+import { AutoCoreTagContext } from '../../../core/AutoCoreTagContext';
 
 
 const FIELD_TYPES: { label: string; value: string }[] = [
@@ -81,19 +83,42 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
     isResultsField = false, isCycleConfigField = false,
     cycleFieldNames = [], resultsFieldNames = [],
 }) => {
-    const [draft, setDraft] = useState<TestField>(blank);
-    // `default` is edited as free text so a numeric literal, a string, or an
-    // `${fqdn}` token can all be entered in one field; it's coerced on save.
-    const [defaultText, setDefaultText] = useState<string>('');
+    // The field under edit plus its free-text Default, as one draft seeded
+    // once per open. `default` is edited as free text so a numeric literal, a
+    // string, or an `${fqdn}` token can all be entered in one field; it's
+    // coerced on save.
+    //
+    // Keyed on the field NAME, not on the `initial` object: this editor
+    // re-renders with the live tag traffic underneath it, and an
+    // identity-keyed reseed discards the operator's typing (see
+    // useEditDraft).
+    const { draft: form, setDraft: setForm, token } = useEditDraft(
+        visible,
+        initial?.name ?? '',
+        () => ({
+            field: initial ? { ...initial } : { ...blank },
+            defaultText: initial?.default == null ? '' : String(initial.default),
+        }),
+    );
+    const draft       = form.field;
+    const defaultText = form.defaultText;
+    const setDraft       = (field: TestField) => setForm(f => ({ ...f, field }));
+    const setDefaultText = (defaultText: string) => setForm(f => ({ ...f, defaultText }));
+
     const [error, setError] = useState<string | null>(null);
+    // Clears on open and on a switch to another field, and on no other render.
+    useEffect(() => { setError(null); }, [token]);
 
-    useEffect(() => {
-        if (visible) {
-            setDraft(initial ? { ...initial } : { ...blank });
-            setDefaultText(initial?.default == null ? '' : String(initial.default));
-            setError(null);
-        }
-    }, [visible, initial]);
+    // The quantity names this machine actually declares, from the resolved
+    // units table. Offered as a dropdown so an author picks a row that exists
+    // instead of typing one that silently never resolves — but `editable`, so a
+    // method can still be authored against a quantity the bench machine has yet
+    // to declare.
+    const { scales } = useContext(AutoCoreTagContext);
+    const quantityOptions = useMemo(
+        () => Object.keys(scales ?? {}).sort().map(q => ({ label: q, value: q })),
+        [scales],
+    );
 
     // Turn the free-text Default into its stored form: an `${fqdn}` token and
     // other non-numerics stay strings; numeric/bool literals are stored typed.
@@ -200,7 +225,23 @@ export const TestFieldDialog: React.FC<TestFieldDialogProps> = ({
                     editable
                 />
             </FormRow>
-            <FormRow label="Units" hint="Display label, appended to form labels (e.g. m/s).">
+            <FormRow
+                label="Quantity"
+                hint="Ties this field to a row of the machine's units.json, so it follows the operator's Metric/Imperial choice and takes its unit label from the active system. Set this in preference to Units/Scale, which are fixed."
+            >
+                <Dropdown
+                    value={draft.quantity ?? ''}
+                    options={quantityOptions}
+                    onChange={(e) => setDraft({ ...draft, quantity: e.value || undefined })}
+                    placeholder="— none (fixed Units/Scale below) —"
+                    showClear
+                    editable
+                />
+            </FormRow>
+            <FormRow
+                label="Units"
+                hint="Fixed display label appended to form labels (e.g. m/s). Ignored when Quantity is set — the active unit system supplies the label."
+            >
                 <InputText
                     value={draft.units ?? ''}
                     onChange={(e) => setDraft({ ...draft, units: e.target.value || undefined })}

package/src/components/tis-editor/editor/ViewsEditor.tsx

@@ -3,6 +3,7 @@ import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
 import { Button } from 'primereact/button';
 import { FormSection } from '../../forms/FormSection';
+import { moveView, orderedViews } from '../../tis/chartViews';
 import { ChartViewDialog } from './ChartViewDialog';
 import type { ChartView, TestField, TestMethod } from '../types';
 
@@ -19,8 +20,11 @@ interface ViewRow {
 
 export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) => {
     const views = (method.views as Record<string, ChartView>) ?? {};
-    const rows: ViewRow[] = Object.entries(views).map(([id, v]) => ({
-        id, title: v.title ?? '', type: v.type ?? '',
+    // Display order, not id order — the operator sets it with the arrows and
+    // the runtime reads the same `order` key. The first row is the view the
+    // Data tab opens on.
+    const rows: ViewRow[] = orderedViews(views).map(({ name, view }) => ({
+        id: name, title: view.title ?? '', type: view.type ?? '',
     }));
 
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -57,6 +61,14 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         setDialogOpen(false);
     };
 
+    // Move up / down renumbers `order` densely across every view, so the next
+    // move is a swap of adjacent integers whatever the method started as.
+    const handleMove = (idx: number, dir: -1 | 1) => {
+        const next = moveView(views, idx, dir);
+        if (next === views) return;
+        onChange({ ...method, views: next });
+    };
+
     const handleRemove = (id: string) => {
         if (!window.confirm(`Remove view "${id}"?`)) return;
         const next = { ...views };
@@ -64,8 +76,22 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         onChange({ ...method, views: next });
     };
 
-    const rowActions = (r: ViewRow) => (
+    const rowActions = (r: ViewRow, opts: { rowIndex: number }) => (
         <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button
+                icon="pi pi-arrow-up"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === 0}
+                onClick={() => handleMove(opts.rowIndex, -1)}
+                aria-label="Move up"
+            />
+            <Button
+                icon="pi pi-arrow-down"
+                className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === rows.length - 1}
+                onClick={() => handleMove(opts.rowIndex, 1)}
+                aria-label="Move down"
+            />
             <Button
                 icon="pi pi-pencil"
                 className="p-button-text p-button-sm"
@@ -85,14 +111,14 @@ export const ViewsEditor: React.FC<ViewsEditorProps> = ({ method, onChange }) =>
         <>
             <FormSection
                 title="Views"
-                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace)."
+                description="Named chart definitions rendered by <TestDataView> (cycle_scatter) and <TestRawDataView> (raw_trace). Top to bottom is the order the operator sees in the view picker, and the first one is the chart the Data tab opens on."
                 actions={<Button label="Add view" icon="pi pi-plus" size="small" onClick={openNew} />}
             >
                 <DataTable value={rows} dataKey="id" emptyMessage="No views defined.">
                     <Column field="id" header="View ID" />
                     <Column field="title" header="Title" />
                     <Column field="type" header="Type" style={{ width: '8rem' }} />
-                    <Column header="" body={rowActions} style={{ width: '6rem' }} />
+                    <Column header="" body={rowActions} style={{ width: '10rem' }} />
                 </DataTable>
             </FormSection>
             <ChartViewDialog

package/src/components/tis-editor/types.ts

@@ -15,6 +15,11 @@ export type FieldType =
 export interface TestField {
     name: string;
     type: FieldType | string;
+    /** Scale-group name from the machine's `units.json` ("force", "position",
+     *  …). What makes this field follow the operator's Metric/Imperial choice;
+     *  supersedes `units` / `scale`. Declared here so the editor round-trips it
+     *  — see `TestFieldDialog`'s Quantity row. */
+    quantity?: string;
     units?: string;
     required?: boolean;
     source?: string;
@@ -99,6 +104,12 @@ export interface ChartView {
      * prints 17-digit ticks.
      */
     x_decimals?: number;
+    /**
+     * Position in the view picker, ascending. Set by the editor's Move
+     * up / Move down; see `components/tis/chartViews.ts` for why the order
+     * cannot just be the order of the keys.
+     */
+    order?: number;
 }
 
 export type RawColumnSource = 'time' | 'derived' | string; // also `ni.<daq>.channels.<name>`

package/tools/tests/dist/tis-editor.entry.css

@@ -0,0 +1,90 @@
+.ac-formsection {
+    border: 1px solid var(--surface-d, #e2e8f0);
+    border-radius: 6px;
+    background: var(--surface-card, #fff);
+    margin-bottom: 1rem;
+}
+
+.ac-formsection__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-formsection__title {
+    margin: 0;
+    font-size: 0.95rem;
+    font-weight: 600;
+}
+
+.ac-formsection__desc {
+    color: var(--text-color-secondary, #64748b);
+    display: block;
+    margin-top: 0.15rem;
+}
+
+.ac-formsection__actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.ac-formsection__body {
+    padding: 0.75rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.ac-formrow {
+    display: grid;
+    grid-template-columns: minmax(8rem, 14rem) 1fr;
+    gap: 0.5rem 1rem;
+    align-items: start;
+}
+
+.ac-formrow--error .ac-formrow__field input,
+.ac-formrow--error .ac-formrow__field .p-inputtext {
+    border-color: #dc2626;
+}
+
+.ac-formrow__label {
+    font-weight: 500;
+    padding-top: 0.4rem;
+    display: flex;
+    flex-direction: column;
+}
+
+.ac-formrow__required {
+    color: #dc2626;
+}
+
+.ac-formrow__hint {
+    color: var(--text-color-secondary, #64748b);
+    font-weight: 400;
+    font-size: 0.75rem;
+    margin-top: 0.15rem;
+}
+
+.ac-formrow__field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.ac-formrow__field > input,
+.ac-formrow__field > .p-inputtext,
+.ac-formrow__field > .p-dropdown,
+.ac-formrow__field > .p-inputtextarea {
+    width: 100%;
+}
+
+.ac-formrow__error {
+    color: #dc2626;
+    font-size: 0.75rem;
+}
+/*$vite$:1*/