@autobusal/common 1.27.5 → 1.29.0

package/AiAssist/AiFieldAssist.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import { useAiAvailable } from './services';
+import AiReviewModal from './AiReviewModal';
+import { Trigger } from './styles';
+
+interface Props {
+  /** The field's own current value - the base text for "Improve". */
+  text?: string
+  /** The English source text, for a "Translate from EN" trigger. */
+  sourceText?: string
+  /** This field's locale, e.g. "sq" - required for the translate trigger. */
+  targetLocale?: string
+  onInsert: (content: string) => void
+  t: TFunction<'common'>
+}
+
+/**
+ * Sits next to one content field (a 'component'-type Viewer row - see
+ * Data.tsx's render-prop support for that type) and renders nothing at all
+ * when no AI provider is enabled for this label, which is the whole
+ * visibility gate the plan calls for - no separate flag to keep in sync.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-08
+ */
+const AiFieldAssist = ({ text, sourceText, targetLocale, onInsert, t }: Props): JSX.Element | null => {
+  const { data: available } = useAiAvailable();
+
+  const [ mode, setMode ] = useState<'generate' | 'improve' | 'translate' | null>(null);
+
+  if (!available || Object.keys(available).length === 0) {
+    return null;
+  }
+
+  const hasText = (text ?? '').trim() !== '';
+  const canTranslate = (sourceText ?? '').trim() !== '' && !!targetLocale;
+
+  return (
+    <>
+      <Trigger>
+        <button type="button" onClick={ () => setMode('generate') }>
+          { t('ai_assist.trigger.generate') }
+        </button>
+
+        { hasText && (
+          <button type="button" onClick={ () => setMode('improve') }>
+            { t('ai_assist.trigger.improve') }
+          </button>
+        ) }
+
+        { canTranslate && (
+          <button type="button" onClick={ () => setMode('translate') }>
+            { t('ai_assist.trigger.translate') }
+          </button>
+        ) }
+      </Trigger>
+
+      { mode && (
+        <AiReviewModal
+          mode={ mode }
+          text={ mode === 'translate' ? sourceText : text }
+          targetLocale={ targetLocale }
+          onInsert={ onInsert }
+          onClose={ () => setMode(null) }
+          t={ t }
+        />
+      ) }
+    </>
+  );
+};
+
+export default AiFieldAssist;

package/AiAssist/AiReviewModal.tsx

@@ -0,0 +1,191 @@
+import { useState } from 'react';
+import { TFunction } from 'i18next';
+import Modal from '../Modal/Modal';
+import { useAiAvailable, useAiGenerate, useAiTranslate, useAiImprove } from './services';
+import { Row, Field, Compare, Pane, Draft, Actions, Error } from './styles';
+
+interface Props {
+  mode: 'generate' | 'improve' | 'translate'
+  text?: string
+  targetLocale?: string
+  sourceLocale?: string
+  onInsert: (content: string) => void
+  onClose: () => void
+  t: TFunction<'common'>
+}
+
+/**
+ * The one AI-review surface every content admin form shares - a draft
+ * NEVER lands in a field on its own. It renders in here first, the admin
+ * can hand-edit it or ask for a revision (which re-runs improve() with the
+ * CURRENT draft as the base text, regardless of what mode this opened in),
+ * and only an explicit Insert writes it back to the caller's field. Cancel
+ * discards everything; the form's own Save is a separate, second step.
+ *
+ * Ferjolt Ozuni - Date: 2026-08-08
+ */
+const AiReviewModal = ({ mode, text, targetLocale, sourceLocale, onInsert, onClose, t }: Props): JSX.Element => {
+  const { data: available, isLoading: loadingAvailable } = useAiAvailable();
+
+  const providers = Object.keys(available ?? {});
+
+  const [ provider, setProvider ] = useState<string>('');
+  const [ model, setModel ] = useState<string>('');
+  const [ instruction, setInstruction ] = useState<string>('');
+  const [ draft, setDraft ] = useState<string | null>(null);
+  const [ error, setError ] = useState<string | null>(null);
+
+  const activeProvider = provider || providers[0] || '';
+  const activeModel = model || available?.[activeProvider]?.default_model || '';
+
+  const { mutate: Generate, isPending: generating } = useAiGenerate();
+  const { mutate: Translate, isPending: translating } = useAiTranslate();
+  const { mutate: Improve, isPending: improving } = useAiImprove();
+
+  const running = generating || translating || improving;
+
+  const onRun = (): void => {
+    setError(null);
+
+    const onError = (err: Error): void => setError(err.message);
+    const onSuccess = (result: { content: string }): void => {
+      setDraft(result.content);
+      setInstruction('');
+    };
+
+    // Once a draft exists, EVERY run (regardless of the mode this modal
+    // opened in) is a revision on that draft - improve() is the one
+    // endpoint that takes existing text + an instruction, which is exactly
+    // what a revision is.
+    if (draft !== null) {
+      Improve({ provider: activeProvider, model: activeModel, text: draft, instruction }, { onSuccess, onError });
+
+      return;
+    }
+
+    if (mode === 'generate') {
+      Generate({ provider: activeProvider, model: activeModel, prompt: instruction }, { onSuccess, onError });
+
+      return;
+    }
+
+    if (mode === 'translate') {
+      Translate({
+        provider: activeProvider,
+        model: activeModel,
+        text: text ?? '',
+        target_locale: targetLocale ?? '',
+        source_locale: sourceLocale
+      }, { onSuccess, onError });
+
+      return;
+    }
+
+    Improve({ provider: activeProvider, model: activeModel, text: text ?? '', instruction }, { onSuccess, onError });
+  };
+
+  const onInsertClick = (): void => {
+    if (draft !== null) {
+      onInsert(draft);
+    }
+
+    onClose();
+  };
+
+  const content = (
+    <>
+      { error && <Error>{ error }</Error> }
+
+      <Row>
+        <Field>
+          { t('ai_assist.provider') }
+
+          <select value={ activeProvider } onChange={ event => { setProvider(event.target.value); setModel(''); } }>
+            { providers.map(key => <option key={ key } value={ key }>{ key }</option>) }
+          </select>
+        </Field>
+
+        <Field>
+          { t('ai_assist.model') }
+
+          <select value={ activeModel } onChange={ event => setModel(event.target.value) }>
+            { (available?.[activeProvider]?.models ?? []).map(name => <option key={ name } value={ name }>{ name }</option>) }
+          </select>
+        </Field>
+      </Row>
+
+      { mode !== 'translate' && (
+        <Row>
+          <Field>
+            { draft !== null
+              ? t('ai_assist.revise_instruction')
+              : (mode === 'generate' ? t('ai_assist.generate_prompt') : t('ai_assist.improve_instruction')) }
+
+            <input
+              type="text"
+              value={ instruction }
+              onChange={ event => setInstruction(event.target.value) }
+              placeholder={ draft !== null ? t('ai_assist.revise_placeholder') : undefined }
+            />
+          </Field>
+        </Row>
+      ) }
+
+      { draft === null && mode === 'translate' && (
+        <Pane>
+          <h4>{ t('ai_assist.source') }</h4>
+
+          <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+        </Pane>
+      ) }
+
+      { draft !== null && mode === 'translate' && (
+        <Compare>
+          <Pane>
+            <h4>{ t('ai_assist.source') }</h4>
+
+            <div dangerouslySetInnerHTML={ { __html: text ?? '' } } />
+          </Pane>
+
+          <Pane>
+            <h4>{ t('ai_assist.draft') }</h4>
+
+            <div dangerouslySetInnerHTML={ { __html: draft } } />
+          </Pane>
+        </Compare>
+      ) }
+
+      { draft !== null && (
+        <Draft value={ draft } onChange={ event => setDraft(event.target.value) } />
+      ) }
+
+      <Actions>
+        <button type="button" onClick={ onClose } disabled={ running }>
+          { t('ai_assist.cancel') }
+        </button>
+
+        <button type="button" onClick={ onRun } disabled={ running || !activeProvider || (mode !== 'translate' && draft === null && instruction.trim() === '') }>
+          { draft !== null ? t('ai_assist.revise') : t('ai_assist.run') }
+        </button>
+
+        { draft !== null && (
+          <button type="button" onClick={ onInsertClick } disabled={ running }>
+            { t('ai_assist.insert') }
+          </button>
+        ) }
+      </Actions>
+    </>
+  );
+
+  return (
+    <Modal
+      loading={ loadingAvailable }
+      width={ 720 }
+      title={ t(`ai_assist.title.${ mode }`) }
+      content={ content }
+      onClose={ onClose }
+    />
+  );
+};
+
+export default AiReviewModal;

package/AiAssist/services.ts

@@ -0,0 +1,84 @@
+import { useQuery, UseQueryResult, useMutation, UseMutationResult } from '@tanstack/react-query';
+import { apiClient } from '@autobusal/providers';
+import { AiAvailable, AiCompletion } from './types';
+
+/**
+ * The providers+models this label may actually use right now - empty means
+ * no provider is enabled, which is the signal every AI-assist entry point
+ * hides itself on. Cached briefly (not Infinity like the settings query -
+ * this is admin-only and an admin who just enabled a provider should not
+ * have to reload the whole app to see it).
+ */
+export const useAiAvailable = (): UseQueryResult<AiAvailable> => (
+  useQuery({
+    queryKey: [ 'ai-available' ],
+    queryFn: async () => (
+      await apiClient
+        .get('/api/ai/admin/available')
+        .then(response => (
+          response.data
+        ))
+    ),
+    staleTime: 60000
+  })
+);
+
+interface GenerateInput {
+  provider?: string
+  model?: string
+  prompt: string
+}
+
+export const useAiGenerate = (): UseMutationResult<AiCompletion, Error, GenerateInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-generate' ],
+    mutationFn: async (data: GenerateInput) => (
+      await apiClient
+        .post('/api/ai/admin/generate', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+interface TranslateInput {
+  provider?: string
+  model?: string
+  text: string
+  target_locale: string
+  source_locale?: string
+}
+
+export const useAiTranslate = (): UseMutationResult<AiCompletion, Error, TranslateInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-translate' ],
+    mutationFn: async (data: TranslateInput) => (
+      await apiClient
+        .post('/api/ai/admin/translate', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);
+
+interface ImproveInput {
+  provider?: string
+  model?: string
+  text: string
+  instruction: string
+}
+
+export const useAiImprove = (): UseMutationResult<AiCompletion, Error, ImproveInput, unknown> => (
+  useMutation({
+    mutationKey: [ 'ai-improve' ],
+    mutationFn: async (data: ImproveInput) => (
+      await apiClient
+        .post('/api/ai/admin/improve', data)
+        .then(response => (
+          response.data
+        ))
+    )
+  })
+);

package/AiAssist/styles.ts

@@ -0,0 +1,94 @@
+import styled from 'styled-components';
+
+export const Trigger = styled.div`
+  display: flex;
+  gap: 6px;
+  margin: 6px 0 12px;
+
+  button {
+    font-size: ${ props => props.theme.size.xs };
+    padding: 4px 10px;
+    border-radius: ${ props => props.theme.borderRadius };
+    border: 1px solid ${ props => props.theme.inputs.border };
+    background: ${ props => props.theme.background.box };
+    cursor: pointer;
+
+    &:hover {
+      background: ${ props => props.theme.background.neutral };
+    }
+  }
+`;
+
+export const Row = styled.div`
+  display: flex;
+  gap: 10px;
+  align-items: flex-end;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+`;
+
+export const Field = styled.label`
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: ${ props => props.theme.size.s };
+  flex: 1;
+  min-width: 160px;
+
+  select, input, textarea {
+    padding: 8px 10px;
+    border: 1px solid ${ props => props.theme.inputs.border };
+    border-radius: ${ props => props.theme.borderRadius };
+    font-size: ${ props => props.theme.size.s };
+  }
+`;
+
+export const Compare = styled.div`
+  display: flex;
+  gap: 16px;
+  margin-bottom: 14px;
+
+  > div {
+    flex: 1;
+    min-width: 0;
+  }
+`;
+
+export const Pane = styled.div`
+  border: 1px solid ${ props => props.theme.inputs.border };
+  border-radius: ${ props => props.theme.borderRadius };
+  padding: 10px;
+  max-height: 320px;
+  overflow-y: auto;
+  font-size: ${ props => props.theme.size.s };
+
+  h4 {
+    margin: 0 0 8px;
+    color: ${ props => props.theme.font.faded };
+    font-size: ${ props => props.theme.size.xs };
+    text-transform: uppercase;
+  }
+`;
+
+export const Draft = styled.textarea`
+  width: 100%;
+  min-height: 260px;
+  padding: 10px;
+  border: 1px solid ${ props => props.theme.inputs.border };
+  border-radius: ${ props => props.theme.borderRadius };
+  font-family: monospace;
+  font-size: ${ props => props.theme.size.s };
+  margin-bottom: 14px;
+`;
+
+export const Actions = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+`;
+
+export const Error = styled.p`
+  color: ${ props => props.theme.font.error };
+  font-size: ${ props => props.theme.size.s };
+  margin-bottom: 10px;
+`;

package/AiAssist/types.ts

@@ -0,0 +1,12 @@
+export interface AiProviderOption {
+  models: string[]
+  default_model: string
+}
+
+export type AiAvailable = Record<string, AiProviderOption>;
+
+export interface AiCompletion {
+  content: string
+  provider: string
+  model: string
+}

package/CHANGELOG.md

@@ -1,6 +1,36 @@
 # Changelog
 
 
+## 1.29.0
+
+### Added
+
+- **`AiFieldAssist` + the AI review modal.** The one AI-review surface every
+  content admin form shares - Generate/Improve/Translate triggers that open
+  a modal where a draft is always reviewed (and can be hand-edited or
+  revised on a follow-up instruction) before an explicit Insert writes it
+  into the calling field. Renders nothing at all when no AI provider is
+  enabled for the label - the visibility gate the AI plan calls for, with
+  no separate flag to keep in sync.
+- **`Viewer`'s `'component'` field type accepts a function** of the form's
+  own `setValue`, not just plain JSX - the only way a component embedded in
+  the field list (AiFieldAssist writing a draft into a SIBLING field like
+  content_en) can reach state Viewer has always kept internal. Existing
+  callers passing plain JSX are unaffected.
+
+## 1.28.0
+
+### Added
+
+- **`Row` takes an optional `actions`**, overriding the table's list for that
+  row. The table-level prop is one array for every row, which cannot express
+  an action only some rows have earned - a ticket download belongs to a paid
+  order and to no other. `Rows` falls back to the table's list, so every
+  existing caller is unaffected.
+- **`print` and `invoice` row-action icons.** Distinct from the existing
+  generic `download`.
+
+
 ## 1.27.5
 
 ### Added

package/Table/Actions/Icon.tsx

@@ -4,7 +4,8 @@ import { BiEditAlt, BiTransfer, BiTrash } from 'react-icons/bi';
 import { FaTrash } from 'react-icons/fa';
 import { GiMoneyStack } from 'react-icons/gi';
 import { IoDocumentLockOutline } from 'react-icons/io5';
-import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiReplyLine } from 'react-icons/ri';
+import { FaFileInvoice } from 'react-icons/fa';
+import { RiBusLine, RiExternalLinkLine, RiEyeLine, RiLoginCircleLine, RiPrinterLine, RiReplyLine } from 'react-icons/ri';
 
 interface Props {
   type: string
@@ -57,6 +58,16 @@ const Icon = ({ type, t }: Props): (JSX.Element | null) => {
     case 'download':
       return <AiOutlineCloudDownload  title={ t('table.actions.custom.download', { ns: 'common' }) }  />;
 
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // The ticket and its invoice, for tables that can hand both over
+    // directly - the order listing does. Distinct from 'download' above,
+    // which is the generic one already spoken for by the invoice queue.
+    case 'print':
+      return <RiPrinterLine title={ t('table.actions.custom.print', { ns: 'common' }) } />;
+
+    case 'invoice':
+      return <FaFileInvoice title={ t('table.actions.custom.invoice', { ns: 'common' }) } />;
+
     case 'bus':
       return <RiBusLine  title={ t('table.actions.custom.bus', { ns: 'common' }) }  />;
 

package/Table/Row.tsx

@@ -2,6 +2,18 @@ import { Td } from './styles';
 
 interface Props {
   id?: number
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   *
+   * Options for THIS row, overriding the table's own list. The table-level
+   * `actions` prop is one array for every row, which cannot express an
+   * action that only some rows have earned - a ticket download belongs to a
+   * paid order and to no other.
+   *
+   * Read by Rows/Rows.tsx off this element's props; Row itself renders only
+   * the data cells, so it does not use the value.
+   */
+  actions?: string[]
   data: any[]
 }
 

package/Table/Rows/NotFound.tsx

@@ -4,15 +4,17 @@ import { ContainerNotFound } from './styles';
 
 interface Props {
   length: number
+  // An explanation, where there is one worth giving - see Table's `empty`.
+  message?: string
   t: TFunction<'common'>
 }
 
-const NotFound = ({ length, t }: Props): JSX.Element => (
+const NotFound = ({ length, message, t }: Props): JSX.Element => (
   <tbody>
     <tr>
       <td colSpan={ length }>
         <ContainerNotFound>
-          <RiEmotionUnhappyLine />{ t('table.no_data', { ns: 'common' }) }
+          <RiEmotionUnhappyLine />{ message ?? t('table.no_data', { ns: 'common' }) }
         </ContainerNotFound>
       </td>
     </tr>

package/Table/Rows/Rows.tsx

@@ -13,19 +13,20 @@ interface Props {
   loading: boolean
   fetching: boolean
   colLength: number
+  empty?: string
   t: TFunction<'common'>
   actions?: string[]
   handlers?: any
   navigate: NavigateFunction
 }
 
-const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, handlers, navigate }: Props): JSX.Element => {
+const Rows = ({ url, urlWith, data, loading, fetching, colLength, empty, t, actions, handlers, navigate }: Props): JSX.Element => {
   if (loading) {
     return <Loading length={ colLength } t={ t } />;
   }
 
   if (data?.length === 0) {
-    return <NotFound length={ colLength } t={ t } />;
+    return <NotFound length={ colLength } message={ empty } t={ t } />;
   }
 
   const isViewable = actions?.includes('view');
@@ -36,23 +37,30 @@ const Rows = ({ url, urlWith, data, loading, fetching, colLength, t, actions, ha
     }
   };
 
-  const columns = data?.map((item, index) => (
+  const columns = data?.map((item, index) => {
+    // Edited: Ferjolt Ozuni - Date: 2026-08-07
+    // A row may name its own options - see Row.tsx. Falls back to the
+    // table's list, which is what every existing caller relies on.
+    const available = item.props.actions ?? actions;
+
+    return (
     <Tr key={ index } $viewable={ isViewable } onClick={ () => onClick(item.props.id) }>
       { item }
 
-      { rowActions(actions).length > 0 && (
+      { rowActions(available).length > 0 && (
         <Actions
           id={ item.props.id }
           url={ url }
           urlWith={ urlWith }
-          available={ actions }
+          available={ available }
           t={ t }
           handlers={ handlers }
           navigate={ navigate }
         />
       ) }
     </Tr>
-  ));
+    );
+  });
 
   return (
     <Tbody $fetching={ fetching }>

package/Table/Table.tsx

@@ -21,10 +21,21 @@ interface Props {
   t: TFunction<'common'>
   actions?: string[]
   extra?: JSX.Element
+  /*
+   * Edited: Ferjolt Ozuni - Date: 2026-08-07
+   * What to say when the table is empty for a REASON, rather than merely
+   * empty. "No data found" is right for a search that matched nothing and
+   * useless for a screen that will stay empty until somebody else acts -
+   * a new agency's route list reads as a broken page rather than as one
+   * waiting on an admin to grant it operators.
+   *
+   * Optional: a table that does not pass one keeps the generic message.
+   */
+  empty?: string
   handlers?: any
 }
 
-const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, handlers }: Props): JSX.Element => {
+const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, fetching, t, actions, extra, empty, handlers }: Props): JSX.Element => {
   const navigate = useNavigate();
 
   const colLength = columns.length + 1;
@@ -59,6 +70,7 @@ const Table = ({ url, urlWith, columns, rows, pages, sorting, search, loading, f
               loading={ loading }
               fetching={ fetching }
               colLength={ colLength }
+              empty={ empty }
               t={ t }
               actions={ actions }
               handlers={ handlers }

package/Viewer/Data.tsx

@@ -66,7 +66,11 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       );
 
     case 'component':
-      return <div className="row-data">{ item.value }</div>;
+      return (
+        <div className="row-data">
+          { typeof item.value === 'function' ? item.value(onUpdate) : item.value }
+        </div>
+      );
 
     case 'display':
       return <Display className="row-data">{ value.string }</Display>;
@@ -115,7 +119,9 @@ const Data = ({ id, item, refs, t, onUpdate }: Props): (JSX.Element | null) => {
       return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } step="0.01" />;
 
     case 'link':
-      return <Linked id={ id } value={ item.value } url={ item.url } />;
+      // The function-value variant only ever arrives on a 'component' row -
+      // see ViewData.value's docblock.
+      return <Linked id={ id } value={ item.value as (string | number | JSX.Element | undefined) } url={ item.url } />;
 
     case 'number':
       return <input type="number" defaultValue={ value.number } { ...refs(item.name, Validate(String(item.rules), t)) } />

package/Viewer/Item.tsx

@@ -1,7 +1,7 @@
 import { FieldErrors, UseFormRegister, UseFormSetValue } from 'react-hook-form';
 import { Display } from '@autobusal/utilities';
 import Data from './Data';
-import { Notice } from './styles';
+import { Notice, Label, Required } from './styles';
 import { ViewData } from './types';
 import { TFunction } from 'i18next';
 
@@ -16,7 +16,28 @@ interface Props {
 
 const Item = ({ id, data, refs, t, errors, onUpdate }: Props): JSX.Element => (
   <div className={ `row row-${ data.type } ${ data.label === undefined && 'spacer' }` }>
-    { data.label }
+    {/*
+      * Edited: Ferjolt Ozuni - Date: 2026-08-07
+      *
+      * Required fields say so. Read straight off the validation rules rather
+      * than a second flag per field, so a label cannot promise something the
+      * form does not enforce - or stay silent about something it does.
+      *
+      * Label and asterisk share ONE element on purpose. The row is a flex
+      * COLUMN, so a bare text node beside a sibling span makes two flex
+      * items and the asterisk drops onto a line of its own underneath.
+      *
+      * Only rendered when there is a label at all - a row without one is the
+      * spacer, and an empty element there would take a flex slot and open a
+      * gap where the divider should be.
+      */}
+    { data.label !== undefined && (
+      <Label>
+        { data.label }
+
+        { data.rules?.includes('required') && <Required aria-hidden="true">*</Required> }
+      </Label>
+    ) }
 
     <Data
       id={ id }

package/Viewer/styles.ts

@@ -25,6 +25,17 @@ export const Container = styled.div`
       height: 1px;
       background: ${ props => props.theme.background.neutral };
     }
+
+    /*
+     * Edited: Ferjolt Ozuni - Date: 2026-08-07
+     * A rich-text editor gets the full row. At a third of the width it has
+     * less room for its own toolbar than for the text, and every consumer
+     * that uses one wants it wide - so this belongs here rather than as a
+     * flag each caller has to remember to pass.
+     */
+    & > div.row-textarea-html {
+      flex-basis: 100% !important;
+    }
   }
 
   @media (min-width: 1300px) {
@@ -55,4 +66,17 @@ export const Notice = styled.div`
   font-size: ${ props => props.theme.size.xxs };
   color: ${ props => props.theme.font.info };
   font-weight: 400;
-`;
+`;
+/*
+ * Edited: Ferjolt Ozuni - Date: 2026-08-07
+ * The asterisk beside a required field's label. aria-hidden where it is
+ * used - the requirement is already carried to assistive tech by the
+ * field's own validation, and a lone "*" read aloud says nothing.
+ */
+export const Label = styled.span``;
+
+export const Required = styled.span`
+  margin-left: 3px;
+  color: ${ props => props.theme.font.error };
+  font-weight: 700;
+`;

package/Viewer/types.ts

@@ -1,10 +1,19 @@
+import { UseFormSetValue } from 'react-hook-form';
 import { DropdownData } from '@autobusal/providers/types/other';
 
 export interface ViewData {
   label?: string
   name?: string
   type?: 'text' | 'select' | 'date' | 'dob' | 'picker' | 'textarea' | 'textarea-html' | 'file' | 'files' | 'email' | 'password' | 'display' | 'component' | 'checkbox' | 'checkbox-list' | 'checkbox-list-all' | 'link' | 'number' | 'float' | 'date-picker'
-  value?: string | number | JSX.Element
+  /**
+   * Edited: Ferjolt Ozuni - Date: 2026-08-08
+   * A 'component' row's value may be a function of the form's own
+   * setValue instead of plain JSX - the only way a component embedded in
+   * the field list (e.g. AiFieldAssist, writing an AI draft into a
+   * SIBLING field like content_en) can reach the Viewer's internal
+   * react-hook-form state, which nothing outside Viewer has access to.
+   */
+  value?: string | number | JSX.Element | ((onUpdate: UseFormSetValue<any>) => JSX.Element)
   /**
    * Edited: Ferjolt Ozuni - Date: 2026-08-06
    * Leading empty option for a select, for "nothing chosen". Without one a

package/index.ts

@@ -1,3 +1,4 @@
+import AiFieldAssist from './AiAssist/AiFieldAssist';
 import ApiDetails from './ApiDetails/ApiDetails';
 import Autocomplete from './Autocomplete/Autocomplete';
 import Avatar from './Avatar';
@@ -45,6 +46,7 @@ import useUnderConstruction from './UnderConstruction/useUnderConstruction';
 import Viewer from './Viewer/Viewer';
 
 export {
+  AiFieldAssist,
   ApiDetails,
   Autocomplete,
   Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@autobusal/common",
-  "version": "1.27.5",
+  "version": "1.29.0",
   "author": "Ferjolt Ozuni",
   "type": "module",
   "main": "index.ts"