@startsimpli/ui 0.4.160 → 0.4.161

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.160",
+  "version": "0.4.161",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -152,8 +152,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/realtime": "0.0.2",
-    "@startsimpli/i18n": "0.1.3"
+    "@startsimpli/i18n": "0.1.3",
+    "@startsimpli/realtime": "0.0.2"
   },
   "keywords": [
     "ui",

package/src/components/collection/ReviewDrawer.tsx

@@ -299,7 +299,9 @@ function ReviewDrawerInner({
                   {status.replace(/_/g, ' ')}
                 </span>
               ) : null
-            ) : cfg.statusChoices.length > 0 ? (
+            ) : mode !== 'edit' && cfg.statusChoices.length > 0 ? (
+              // Not while editing fields: the form carries the same status field,
+              // and two controls for one value can be set apart (bd startsim-uc9fz).
               <Select value={status || undefined} onValueChange={overrideStatus}>
                 <SelectTrigger className="h-7 w-auto gap-1 border-border text-xs capitalize">
                   <SelectValue placeholder="State…" />
@@ -379,7 +381,7 @@ function ReviewDrawerInner({
               <h2 className="text-lg font-semibold leading-snug text-foreground">{title}</h2>
 
               <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
-                {rank ? (
+                {rank && Number(rank) !== 0 ? (
                   <span className="rounded-full bg-primary/10 px-2 py-0.5 font-semibold text-primary">
                     rank {rank}
                   </span>
@@ -514,19 +516,10 @@ function DecisionButton({
         <Icon className="h-4 w-4" />
         {busy ? 'Saving…' : decision.label}
       </span>
-      <span className={cn('text-[10px] font-normal', decision.tone === 'good' ? 'text-white/80' : 'opacity-70')}>
-        {decisionHint(decision)}
-      </span>
     </button>
   );
 }
 
-/** The tiny "→ ready · good" outcome hint under a decision. */
-function decisionHint(d: ReviewDecision): string {
-  const parts = [d.status ? `→ ${d.status}` : null, d.verdict].filter(Boolean);
-  return parts.join(' · ');
-}
-
 /** Source chips: host + optional tier badge, linked when a url is present. */
 function ReviewSources({
   data,

package/src/components/collection/__tests__/review-drawer-chips.test.tsx

@@ -0,0 +1,88 @@
+/**
+ * The topic drawer's header chips and decision buttons read as plain words
+ * (bd startsim-piff1): a rank of 0 is no rank, and the buttons no longer carry
+ * the raw "→ ready · good" status/verdict hint.
+ */
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ReviewDrawer } from '../ReviewDrawer';
+import type { CollectionClient, EntityRecord, EntityTypeDef, Paginated } from '../types';
+
+const TOPIC_TYPE: EntityTypeDef = {
+  id: 1,
+  key: 'topic',
+  label: 'Topic',
+  attributes: [
+    { id: 'status', name: 'status', dataType: 'enum', required: false, config: { choices: ['suggested', 'ready', 'written', 'rejected'] } },
+    { id: 'ai_rank', name: 'ai_rank', dataType: 'number', required: false, config: {} },
+    { id: 'team_verdict', name: 'team_verdict', dataType: 'text', required: false, config: {} },
+  ],
+};
+
+function topic(rank: unknown): EntityRecord {
+  return {
+    id: 1,
+    entityType: 'topic',
+    externalId: null,
+    name: 'Topic 1',
+    data: { status: 'suggested', ai_rank: rank },
+    createdAt: '2026-09-01T00:00:00Z',
+  };
+}
+
+function page<T>(results: T[]): Paginated<T> {
+  return { count: results.length, next: null, previous: null, results };
+}
+
+function client(): CollectionClient {
+  return {
+    listTypes: jest.fn(async () => page([TOPIC_TYPE])),
+    listAllEntities: jest.fn(async () => []),
+    updateEntity: jest.fn(),
+  } as unknown as CollectionClient;
+}
+
+function renderDrawer(rank: unknown) {
+  const r = topic(rank);
+  render(
+    <ReviewDrawer
+      client={client()}
+      type={TOPIC_TYPE}
+      records={[r]}
+      record={r}
+      onClose={jest.fn()}
+      onNavigate={jest.fn()}
+      renderEditFields={() => <p>the form</p>}
+    />,
+  );
+}
+
+describe('ReviewDrawer header chips', () => {
+  it('hides a rank of 0', () => {
+    renderDrawer(0);
+    expect(screen.queryByText(/rank 0/)).toBeNull();
+  });
+
+  it('still shows a real rank', () => {
+    renderDrawer(7);
+    expect(screen.getByText('rank 7')).toBeInTheDocument();
+  });
+
+  it('decision buttons carry no raw status/verdict hint', () => {
+    renderDrawer(7);
+    expect(screen.queryByText(/→/)).toBeNull();
+  });
+});
+
+describe('ReviewDrawer edit mode (bd startsim-uc9fz)', () => {
+  it('drops the header State select while the field form is open', async () => {
+    const user = userEvent.setup();
+    renderDrawer(7);
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: /Edit fields/ }));
+    expect(screen.getByText('the form')).toBeInTheDocument();
+    expect(screen.queryByRole('combobox')).toBeNull();
+  });
+});

package/src/components/document-editor/DocumentEditor.tsx

@@ -352,6 +352,16 @@ function TextSection({
   );
 }
 
+/** "primaryKeyword" / "meta_description" → "Primary keyword" / "Meta description". */
+function structuredFieldLabel(key: string): string {
+  const spaced = key
+    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .trim()
+    .toLowerCase();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
 function StructuredSection({
   section,
   readOnly,
@@ -377,7 +387,7 @@ function StructuredSection({
           return (
             <div key={field} className="grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:items-start sm:gap-3">
               <label htmlFor={`${section.key}-${field}`} className="pt-1.5 text-xs font-medium text-muted-foreground">
-                {field.replace(/[_-]+/g, ' ')}
+                {structuredFieldLabel(field)}
               </label>
               <div>
                 {readOnly ? (

package/src/components/document-editor/__tests__/DocumentEditor.test.tsx

@@ -73,12 +73,12 @@ describe('DocumentEditor', () => {
 
   it('structured section renders a field input and an SEO char meter on meta_description', () => {
     render(<Harness />);
-    const metaInput = screen.getByLabelText('meta description') as HTMLInputElement;
+    const metaInput = screen.getByLabelText('Meta description') as HTMLInputElement;
     expect(metaInput.value).toBe('short');
     // the meta meter surfaces the aim band
     expect(screen.getByText(/aim 150/)).toBeInTheDocument();
     fireEvent.change(metaInput, { target: { value: 'new description' } });
-    expect((screen.getByLabelText('meta description') as HTMLInputElement).value).toBe('new description');
+    expect((screen.getByLabelText('Meta description') as HTMLInputElement).value).toBe('new description');
   });
 
   it('list section adds, edits and removes items', () => {
@@ -123,3 +123,17 @@ describe('DocumentEditor', () => {
     expect(onSave).not.toHaveBeenCalled();
   });
 });
+
+describe('DocumentEditor structured labels (bd startsim-5w5p6)', () => {
+  it('labels camelCase and snake_case keys in plain words', () => {
+    render(
+      <DocumentEditor
+        sections={[{ key: 'seo', label: 'SEO', kind: 'structured', value: { primaryKeyword: 'kw', meta_description: 'm', tags: 't' } }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.getByText('Primary keyword')).toBeInTheDocument();
+    expect(screen.getByText('Meta description')).toBeInTheDocument();
+    expect(screen.getByText('Tags')).toBeInTheDocument();
+  });
+});

package/src/components/history/RecordHistoryPanel.tsx

@@ -169,6 +169,9 @@ export interface RecordHistoryPanelProps {
   headerAside?: ReactNode;
   /** Map a wire field name to a reader-facing label. */
   fieldLabel?: (field: string) => string;
+  /** Leave a field out of every entry — its row, and the entry's field count —
+   *  e.g. a host's system bookkeeping keys (`_run_id`). Nothing hidden by default. */
+  hideField?: (field: string) => boolean;
   /** Group entries under day headings. On by default — a record's history is
    *  read by date far more often than as a flat list. */
   groupByDay?: boolean;
@@ -226,6 +229,19 @@ export interface RecordHistoryPanelProps {
   classNames?: RecordHistoryPanelClassNames;
 }
 
+/** A sitting with the host's hidden fields taken out, so the headline's count
+ *  and the rows under it agree. */
+function withoutFields(sitting: RevisionSitting, hide: (field: string) => boolean): RevisionSitting {
+  const keep = (f: string) => !hide(f);
+  return {
+    ...sitting,
+    changed: Object.fromEntries(Object.entries(sitting.changed).filter(([f]) => keep(f))),
+    preserved: sitting.preserved.filter(keep),
+    regenerate: sitting.regenerate.filter(keep),
+    redacted: sitting.redacted.filter(keep),
+  };
+}
+
 export function RecordHistoryPanel({
   client,
   queryKey = ['record-history'],
@@ -236,6 +252,7 @@ export function RecordHistoryPanel({
   description = 'Who changed which field, from what to what, newest first.',
   headerAside,
   fieldLabel = (field) => field,
+  hideField,
   groupByDay = true,
   emptyTitle = 'No edits recorded for this record',
   // NOT "this record has never changed" — see sentence 3 in the header.
@@ -427,7 +444,10 @@ export function RecordHistoryPanel({
   }, []);
 
   // THE FOLD RUNS OVER THE ACCUMULATION, never per page. See the header.
-  const sittings = useMemo(() => foldRevisions(revisions, windowMs), [revisions, windowMs]);
+  const sittings = useMemo(() => {
+    const folded = foldRevisions(revisions, windowMs);
+    return hideField ? folded.map((s) => withoutFields(s, hideField)) : folded;
+  }, [revisions, windowMs, hideField]);
 
   const items = useMemo<ActivityTimelineItem[]>(
     () =>

package/src/components/history/__tests__/record-history-panel.test.tsx

@@ -458,3 +458,34 @@ describe('RecordHistoryPanel — the unrecorded-kind sentence is scoped (bd star
     expect(note.textContent).toMatch(/for the rest/i)
   })
 })
+
+describe('RecordHistoryPanel — hideField (bd startsim-mpjbi, startsim-l1ya5)', () => {
+  it('leaves hidden fields out of the rows AND the entry count', async () => {
+    mount(
+      <RecordHistoryPanel
+        hideField={(f) => f.startsWith('_')}
+        fieldLabel={(f) => (f === 'team_verdict' ? 'Team verdict' : f)}
+        client={clientFor(
+          page([
+            rev({
+              version: 1,
+              action: 'created',
+              metadata: {
+                changed: {
+                  _run_id: { before: null, after: 'r1' },
+                  _origin: { before: null, after: 'n8n' },
+                  blog: { before: null, after: 'x' },
+                  team_verdict: { before: null, after: 'good' },
+                },
+              },
+            }),
+          ]),
+        )}
+      />,
+    )
+    await screen.findByTestId('record-history-panel')
+    expect(await screen.findByText(/Created the record with 2 fields/)).toBeInTheDocument()
+    expect(screen.queryByText('_run_id')).toBeNull()
+    expect(screen.queryByText('_origin')).toBeNull()
+  })
+})

package/src/components/history/stale-save-dialog-default-class-names.ts

@@ -41,5 +41,7 @@ export const STALE_SAVE_DIALOG_DEFAULTS: Required<StaleSaveDialogClassNames> = {
   // Underplayed ON PURPOSE. It is the only control here that destroys the text
   // this dialog exists to protect, so it must never be the thing a hurried
   // reviewer clicks by muscle memory.
-  destructiveAction: 'text-xs text-muted-foreground underline underline-offset-2',
+  // Red so it does not read as a help link, and pushed to the far left, apart
+  // from the two safe buttons.
+  destructiveAction: 'me-auto text-xs text-destructive underline underline-offset-2 disabled:opacity-50',
 };

package/src/components/navigation/__tests__/grouped-nav.test.tsx

@@ -67,3 +67,12 @@ describe('GroupedNav', () => {
     expect(link).toHaveAttribute('data-router-link', '1')
   })
 })
+
+describe('GroupedNav: a group holding the current page (bd startsim-m7fdm.39)', () => {
+  it('draws its header as a plain heading, not a collapse button that does nothing', () => {
+    render(<GroupedNav items={items} activeHref="/t/general" />)
+    expect(screen.queryByRole('button', { name: /Content/ })).toBeNull()
+    expect(screen.getByText('Content')).toBeInTheDocument()
+    expect(screen.getByText('General')).toBeInTheDocument()
+  })
+})

package/src/components/navigation/grouped-nav.tsx

@@ -170,7 +170,9 @@ function NavGroup({
 
   return (
     <div className="pt-3 first:pt-0">
-      {collapsible ? (
+      {/* A group holding the current page cannot close, so its header is not
+          drawn as a control that does nothing (bd startsim-m7fdm.39). */}
+      {collapsible && !hasActiveChild ? (
         <button
           type="button"
           onClick={() => setOpen((o) => !o)}

package/src/components/track-changes/ChangesRail.tsx

@@ -184,12 +184,12 @@ export function ChangesRail(props: ChangesRailProps) {
         </h3>
         <div className="flex flex-wrap gap-1">
           {onPrevChange && (
-            <button type="button" className={btn} onClick={onPrevChange} title="Shift+F8 in the text">
+            <button type="button" className={btn} onClick={onPrevChange} disabled={open.length === 0} title="Shift+F8 in the text">
               Previous
             </button>
           )}
           {onNextChange && (
-            <button type="button" className={btn} onClick={onNextChange} title="F8 in the text">
+            <button type="button" className={btn} onClick={onNextChange} disabled={open.length === 0} title="F8 in the text">
               Next change
             </button>
           )}

package/src/components/track-changes/TrackedTextEditor.tsx

@@ -531,7 +531,9 @@ export const TrackedTextEditor = forwardRef<TrackedTextEditorHandle, TrackedText
             : undefined;
 
     let proposalLine: string | null = null;
-    if (mode === 'suggesting' && canSuggest) {
+    // Nothing typed and nothing in flight: no line. "0 changes" read as a count
+    // of saved suggestions sitting right above the rail's own count.
+    if (mode === 'suggesting' && canSuggest && (localCount > 0 || proposal.state !== 'idle')) {
       const n = `${localCount} ${localCount === 1 ? 'change' : 'changes'}`;
       proposalLine =
         proposal.state === 'error'

package/src/components/track-changes/__tests__/rails.test.tsx

@@ -624,3 +624,20 @@ describe('TrackedField', () => {
     )
   })
 })
+
+describe('ChangesRail: nothing to step to (bd startsim-5378r)', () => {
+  it('disables Previous and Next change when there are no open items', () => {
+    render(
+      <ChangesRail fieldLabel="Blog" currentActorSub="ada" suggestions={[]} threads={[]} onPrevChange={jest.fn()} onNextChange={jest.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: 'Previous' })).toBeDisabled()
+    expect(screen.getByRole('button', { name: 'Next change' })).toBeDisabled()
+  })
+
+  it('enables them when there is something to step to', () => {
+    render(
+      <ChangesRail fieldLabel="Blog" currentActorSub="ada" suggestions={[sugg('s1', 'Hello', 'Hi')]} threads={[]} onPrevChange={jest.fn()} onNextChange={jest.fn()} />,
+    )
+    expect(screen.getByRole('button', { name: 'Next change' })).toBeEnabled()
+  })
+})

package/src/components/track-changes/__tests__/tracked-text-editor.test.tsx

@@ -82,6 +82,13 @@ describe('suggesting mode', () => {
     return { ...utils, ref, onChange, onPropose }
   }
 
+  it('shows no "0 changes" line before anything is typed (bd startsim-9is5h)', () => {
+    const { ref } = mountSuggesting()
+    expect(screen.queryByTestId('proposal-state')).toBeNull()
+    typeAt(ref.current!, 6, 'big ')
+    expect(screen.getByTestId('proposal-state')).toHaveTextContent(/not sent yet/)
+  })
+
   it('never reports an edit to the host, and posts the whole proposed text after a 5 s pause', async () => {
     const { ref, onChange, onPropose } = mountSuggesting()
     typeAt(ref.current!, 6, 'big ')