@retailcrm/embed-ui-v1-components 0.9.26 → 0.9.28

package/dist/remote.cjs

@@ -2466,6 +2466,12 @@ const slotNeedsBodyCellWrapper = (children) => {
   }
   return !nodes.every(isCellVNode);
 };
+const hasSlotContent = (children) => {
+  if (!children) {
+    return false;
+  }
+  return normalizeNodes(children).length > 0;
+};
 const renderGroupHead = (slot, props) => {
   return slot?.(props) ?? [String(props.group.key)];
 };
@@ -2692,17 +2698,25 @@ const _sfc_main$6 = vue.defineComponent({
         const pageSize = slots["footer-page-size"]?.(footerData);
         const exportControl = slots["footer-export"]?.(footerData);
         const pagination = slots["footer-pagination"]?.(footerData);
+        const hasSummary = hasSlotContent(summary);
+        const hasPageSize = hasSlotContent(pageSize);
+        const hasExportControl = hasSlotContent(exportControl);
+        const hasPagination = hasSlotContent(pagination);
+        const hasAnyStructuredFooterContent = hasSummary || hasPageSize || hasExportControl || hasPagination;
+        if (!hasAnyStructuredFooterContent) {
+          return null;
+        }
         return vue.h(UiTableSection, { kind: "foot", key: "footer" }, () => vue.h(UiTableRow, () => vue.h(UiTableBodyCell, {
           colspan: columnsCount,
           class: "ui-v1-table__footer-cell"
         }, () => vue.h("div", { class: "ui-v1-table__footer" }, [
-          summary ? vue.h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
-          pageSize || exportControl || pagination ? vue.h("div", { class: "ui-v1-table__footer-controls" }, [
-            pageSize || exportControl ? vue.h("div", { class: "ui-v1-table__footer-main" }, [
+          hasSummary ? vue.h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          hasPageSize || hasExportControl || hasPagination ? vue.h("div", { class: "ui-v1-table__footer-controls" }, [
+            hasPageSize || hasExportControl ? vue.h("div", { class: "ui-v1-table__footer-main" }, [
               pageSize,
               exportControl
             ]) : null,
-            pagination ? vue.h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+            hasPagination ? vue.h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
           ]) : null
         ]))));
       }

package/dist/remote.js

@@ -2464,6 +2464,12 @@ const slotNeedsBodyCellWrapper = (children) => {
   }
   return !nodes.every(isCellVNode);
 };
+const hasSlotContent = (children) => {
+  if (!children) {
+    return false;
+  }
+  return normalizeNodes(children).length > 0;
+};
 const renderGroupHead = (slot, props) => {
   return slot?.(props) ?? [String(props.group.key)];
 };
@@ -2690,17 +2696,25 @@ const _sfc_main$6 = defineComponent({
         const pageSize = slots["footer-page-size"]?.(footerData);
         const exportControl = slots["footer-export"]?.(footerData);
         const pagination = slots["footer-pagination"]?.(footerData);
+        const hasSummary = hasSlotContent(summary);
+        const hasPageSize = hasSlotContent(pageSize);
+        const hasExportControl = hasSlotContent(exportControl);
+        const hasPagination = hasSlotContent(pagination);
+        const hasAnyStructuredFooterContent = hasSummary || hasPageSize || hasExportControl || hasPagination;
+        if (!hasAnyStructuredFooterContent) {
+          return null;
+        }
         return h(UiTableSection, { kind: "foot", key: "footer" }, () => h(UiTableRow, () => h(UiTableBodyCell, {
           colspan: columnsCount,
           class: "ui-v1-table__footer-cell"
         }, () => h("div", { class: "ui-v1-table__footer" }, [
-          summary ? h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
-          pageSize || exportControl || pagination ? h("div", { class: "ui-v1-table__footer-controls" }, [
-            pageSize || exportControl ? h("div", { class: "ui-v1-table__footer-main" }, [
+          hasSummary ? h("div", { class: "ui-v1-table__footer-meta" }, [summary]) : null,
+          hasPageSize || hasExportControl || hasPagination ? h("div", { class: "ui-v1-table__footer-controls" }, [
+            hasPageSize || hasExportControl ? h("div", { class: "ui-v1-table__footer-main" }, [
               pageSize,
               exportControl
             ]) : null,
-            pagination ? h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
+            hasPagination ? h("div", { class: "ui-v1-table__footer-side" }, [pagination]) : null
           ]) : null
         ]))));
       }

package/docs/AI.md

@@ -126,6 +126,10 @@ screen where users scan and refine datasets:
 - reset `page` to `1` when filters or sorting change;
 - debounce free-text search before writing query or fetching data;
 - use `UiTableSorter` for sortable headers;
+- for ordinary `UiTableColumn` cell customization, set header metadata through props such as `label`, `width`,
+  and `trim`, then use `v-slot` on `UiTableColumn` instead of `<template #cell>`;
+- use the `#cell` slot only when the column also needs another named slot such as `#label`, or when explicit
+  slot naming makes a complex column easier to read;
 - use `UiTable` footer slots for summary, page-size controls, export, and pagination;
 - compose table footer controls with `UiTableFooterSection` and `UiTableFooterButton`, not regular `UiButton`;
 - use chevron icon assets for table footer previous/next controls instead of text glyphs;

package/docs/profiles/components/UiError.yml

@@ -92,8 +92,10 @@ ai_notes:
   do:
     - Use for compact error presentation.
     - Keep the message short and specific.
+    - Put field-level errors inside the matching UiField instead of below the field wrapper.
   avoid:
     - Do not use for multi-paragraph explanations or page-level failures.
+    - Do not leave field-level errors disconnected from the control they describe.
 
 composition:
   works_well_with:
@@ -101,7 +103,9 @@ composition:
     - UiAlert
   patterns:
     - title: Field or section error
-      notes: Use where the user needs to see a concise local error message.
+      notes: >
+        Use where the user needs to see a concise local error message. For field-level validation,
+        render UiError inside the corresponding UiField default slot, directly after the control.
     - title: Page-level failure
       notes: Use UiAlert or UiInfobox instead when the error needs explanation and actions.
 

package/docs/profiles/components/UiField.yml

@@ -109,6 +109,56 @@ examples:
 
       const duration = ref(30)
       </script>
+  - title: Field validation with local error
+    notes:
+      - Keep the field-level error inside the UiField default slot, directly after the control it describes.
+      - Forward id and ARIA slot props into the real control; invalid styling alone is not enough for validation wiring.
+      - Add local margin to UiError when the design needs a visual gap below the control.
+    code: |
+      <template>
+          <UiField
+              id="specialist-name"
+              v-slot="field"
+              :invalid="Boolean(error)"
+              label="Name"
+              required
+          >
+              <UiTextbox
+                  :id="field.id"
+                  v-model:value="name"
+                  :invalid="field.invalid"
+                  :input-attributes="{
+                      'aria-labelledby': field.ariaLabelledby,
+                      'aria-invalid': field.ariaInvalid,
+                  }"
+              />
+
+              <UiError
+                  v-if="error"
+                  :class="$style['form-field-error']"
+                  :message="error"
+              />
+          </UiField>
+      </template>
+
+      <script lang="ts" setup>
+      import { ref } from 'vue'
+
+      import {
+        UiError,
+        UiField,
+        UiTextbox,
+      } from '@retailcrm/embed-ui-v1-components/remote'
+
+      const name = ref('')
+      const error = ref('Name is required')
+      </script>
+
+      <style lang="less" module>
+      .form-field-error {
+        margin-top: 4px;
+      }
+      </style>
 use_when:
   - You need a labeled form control with consistent field semantics.
   - You need to pass id, aria-labelledby, and aria-invalid into an inner control.
@@ -305,6 +355,10 @@ composition:
   patterns:
     - title: Safe field wiring
       notes: Use slot props for semantics, not just for visual wrapping.
+    - title: Field-level validation
+      notes: >
+        Place UiError inside the default slot immediately after the control, and complete id,
+        aria-labelledby, and aria-invalid wiring on the real control.
 
 
 ai_notes:
@@ -314,8 +368,11 @@ ai_notes:
     - Use v-slot on UiField when the field uses only the default slot.
     - Use UiField as a semantic wrapper for a single textbox, select, number, date, or time control.
     - Place validation errors inside the relevant field composition instead of rendering them as unrelated sibling blocks.
+    - Add local spacing to UiError itself when the error needs a visible gap from the control.
   avoid:
     - Do not use UiField as a generic visual container without control semantics.
     - Do not use UiField for UiSwitch settings rows; pair UiSwitch with a visible label and hint text instead.
     - Do not use UiField for simple UiCheckbox rows; pair UiCheckbox with a visible label and optional hint instead.
     - Do not ignore id and ariaLabelledby when accessibility matters.
+    - Do not render field-level UiError as a sibling immediately after the closing UiField.
+    - Do not rely only on the invalid prop when the control can receive field ARIA slot props.

package/docs/profiles/components/UiSelect.yml

@@ -213,7 +213,9 @@ api:
         - disabled
         - counter
         - accent
-      notes: Base selectable option node.
+      notes: >
+        Base selectable option node. Nullable values are allowed when they are meaningful to the model,
+        but Vue keys for repeated option nodes must be stable and non-null.
     - name: UiSelectOptionGroup
       key_props:
         - label

package/docs/profiles/components/UiSelectOption.yml

@@ -44,14 +44,19 @@ ai_notes:
     - Use as the default child node of UiSelect.
     - Provide stable value and human-readable label.
     - Use description for secondary explanation, not for long help text.
+    - Keep Vue `v-for` keys stable and non-null even when the option value itself can be null.
+    - Normalize persisted option DTOs to non-null ids, or use another stable domain key such as code, slug, or a temporary client id.
   avoid:
     - Do not put arbitrary controls inside options.
+    - Do not use nullable DTO ids directly as Vue keys.
+    - Do not use array index as the fallback key for dynamic options that can be sorted, filtered, inserted, or removed.
 
 behavior:
   notes:
     - disabled prevents selection while keeping the option visible.
     - counter and accent help scan dense option lists.
     - In filterable selects, label and description participate in matching.
+    - A nullable option value is valid for selection semantics, but the Vue key for a repeated option node must still be stable and non-null.
 
 composition:
   works_well_with:

package/docs/profiles/components/UiTable.yml

@@ -32,24 +32,18 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              <strong>{{ row.title }}</strong>
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            <strong>{{ row.title }}</strong>
           </UiTableColumn>
 
-          <UiTableColumn label="Customer" width="180">
-            <template #cell="{ row }">
-              {{ row.customer }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Customer" width="180">
+            {{ row.customer }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              <UiTag :background="statusBackgroundByName[row.status]" size="md" saturated :ticker="false">
-                {{ row.status }}
-              </UiTag>
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            <UiTag :background="statusBackgroundByName[row.status]" size="md" saturated :ticker="false">
+              {{ row.status }}
+            </UiTag>
           </UiTableColumn>
         </UiTable>
       </template>
@@ -78,14 +72,71 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Name">
-            <template #cell="{ row }">
-              {{ row.name }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Name">
+            {{ row.name }}
+          </UiTableColumn>
+
+          <UiTableColumn v-slot="{ row }" :width="48" label="" trim>
+            <UiPopperConnector>
+              <UiButton
+                :aria-label="`Edit ${row.name}`"
+                appearance="tertiary"
+                size="sm"
+                @click="edit(row)"
+              >
+                <IconEdit aria-hidden="true" />
+              </UiButton>
+
+              <UiTooltip>
+                Edit {{ row.name }}
+              </UiTooltip>
+            </UiPopperConnector>
           </UiTableColumn>
+        </UiTable>
+      </template>
+
+      <script lang="ts" setup>
+      import IconEdit from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/edit.svg'
+      import {
+        UiButton,
+        UiPopperConnector,
+        UiTable,
+        UiTableColumn,
+        UiTooltip,
+      } from '@retailcrm/embed-ui-v1-components/remote'
+
+      type Row = {
+        id: number
+        name: string
+      }
+
+      const rows: Row[] = [
+        { id: 101, name: 'Anna Smith' },
+        { id: 102, name: 'Ilya Johnson' },
+      ]
 
-          <UiTableColumn :width="48" label="" trim>
-            <template #cell="{ row }">
+      const edit = (row: Row) => {
+        console.log(row)
+      }
+      </script>
+  - title: Multiple row actions in one final column
+    notes:
+      - Use one stable final action column for several row commands unless the product task explicitly asks for separate semantic columns.
+      - Keep the action cell width fixed and prevent it from wrapping primary row content.
+      - Each icon-only action needs aria-label and UiTooltip text.
+    code: |
+      <template>
+        <UiTable
+          bordered
+          :rows="rows"
+          row-key="id"
+        >
+          <UiTableColumn v-slot="{ row }" label="Name">
+            {{ row.name }}
+          </UiTableColumn>
+
+          <UiTableColumn v-slot="{ row }" :width="104" label="" trim>
+            <div :class="$style['specialist-table__actions']">
               <UiPopperConnector>
                 <UiButton
                   :aria-label="`Edit ${row.name}`"
@@ -100,12 +151,29 @@ examples:
                   Edit {{ row.name }}
                 </UiTooltip>
               </UiPopperConnector>
-            </template>
+
+              <UiPopperConnector>
+                <UiButton
+                  :aria-label="`Delete ${row.name}`"
+                  appearance="tertiary"
+                  size="sm"
+                  variant="danger"
+                  @click="remove(row)"
+                >
+                  <IconDelete aria-hidden="true" />
+                </UiButton>
+
+                <UiTooltip>
+                  Delete {{ row.name }}
+                </UiTooltip>
+              </UiPopperConnector>
+            </div>
           </UiTableColumn>
         </UiTable>
       </template>
 
       <script lang="ts" setup>
+      import IconDelete from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/delete.svg'
       import IconEdit from '@retailcrm/embed-ui-v1-components/assets/sprites/ui/edit.svg'
       import {
         UiButton,
@@ -128,7 +196,21 @@ examples:
       const edit = (row: Row) => {
         console.log(row)
       }
+
+      const remove = (row: Row) => {
+        console.log(row)
+      }
       </script>
+
+      <style lang="less" module>
+      .specialist-table__actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: 8px;
+        white-space: nowrap;
+      }
+      </style>
   - title: Expandable rows table
     notes:
       - Use the expand slot and cell toggle helper for expandable row details.
@@ -139,18 +221,14 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn :width="44" label="" trim>
-            <template #cell="{ expanded, toggle }">
-              <button class="table-expand" type="button" @click="toggle">
-                {{ expanded ? '-' : '+' }}
-              </button>
-            </template>
+          <UiTableColumn v-slot="{ expanded, toggle }" :width="44" label="" trim>
+            <button class="table-expand" type="button" @click="toggle">
+              {{ expanded ? '-' : '+' }}
+            </button>
           </UiTableColumn>
 
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
           <template #expand="{ row }">
@@ -186,16 +264,12 @@ examples:
           row-key="id"
           :group-by="groupByStatus"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              {{ row.status }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            {{ row.status }}
           </UiTableColumn>
 
           <template #group-head="{ group }">
@@ -241,10 +315,8 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
           <template #footer-summary="{ rowsCount }">
@@ -440,16 +512,12 @@ examples:
           :rows="rows"
           row-key="id"
         >
-          <UiTableColumn label="Title">
-            <template #cell="{ row }">
-              {{ row.title }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Title">
+            {{ row.title }}
           </UiTableColumn>
 
-          <UiTableColumn label="Status" width="160">
-            <template #cell="{ row }">
-              {{ row.status }}
-            </template>
+          <UiTableColumn v-slot="{ row }" label="Status" width="160">
+            {{ row.status }}
           </UiTableColumn>
         </UiTable>
       </template>
@@ -649,6 +717,11 @@ composition:
       - Use UiTableSorter inside a UiTableColumn label slot for sortable columns.
       - Reset pagination to the first page when sorting changes.
       - Persist sort key and direction in URL query parameters when routing is available.
+  columns:
+    notes:
+      - Configure header metadata with UiTableColumn props such as label, width, align, valign, and trim.
+      - Prefer `v-slot` on UiTableColumn for ordinary cell content when the header is configured through props.
+      - Use `#cell` only when the column also needs another named slot such as `#label`, or when explicit naming improves readability.
   pagination:
     notes:
       - Use footer-summary, footer-page-size, footer-export, and footer-pagination slots for structured footer controls.
@@ -663,6 +736,9 @@ composition:
   actions:
     notes:
       - Prefer narrow action columns with icon-only UiButton controls for row commands.
+      - If a row has multiple actions, keep them together in one final action column by default.
+      - Split row actions into separate columns only when each column has a distinct user-facing meaning or the task explicitly requires it.
+      - Give the action column a stable width and an inner flex container so actions do not resize or wrap primary row content.
       - Keep visible button text out of dense table rows; provide aria-label and matching UiTooltip text.
       - Use package sprite icons and set aria-hidden on the icon itself.
       - Wrap action buttons and UiTooltip in UiPopperConnector. Add UiPopperTarget only for custom non-component targets.
@@ -676,14 +752,18 @@ ai_notes:
     - Compose footer controls with UiTableFooterSection and UiTableFooterButton.
     - Copy the Entity list table footer example when building a realistic entity-list footer.
     - Use UiTableSorter for sortable headers.
+    - Prefer UiTableColumn `v-slot` for ordinary custom cells when label and sizing are configured through props.
     - Use icon-only row action buttons with aria-label and UiTooltip in action columns.
+    - Put several row actions into one final action cell unless separate columns are explicitly required.
   avoid:
     - Do not hide table filters in page header actions.
     - Do not wrap UiTable in an additional white card, panel, or content-surface container.
     - Do not use UiButton inside table footer pagination.
     - Do not put visible text buttons in dense table action columns.
+    - Do not create several neighboring empty action columns for edit, delete, and similar compact row commands.
     - Do not put pagination only in local state when the screen has routable result sets.
     - Do not import table internals from host or src paths.
+    - Do not use `<template #cell>` for every column when the default slot would be simpler.
 
 behavior:
   notes:

package/docs/profiles/components/UiTableColumn.yml

@@ -11,6 +11,35 @@ public_import:
 related_components:
   - UiTable
 
+examples:
+  - title: Prop label with default cell slot
+    notes:
+      - Use this shape when header metadata is covered by props and only the cell body is custom.
+    code: |
+      <UiTableColumn v-slot="{ row }" label="Name" min-width="180">
+        <UiLink size="small">{{ row.name }}</UiLink>
+      </UiTableColumn>
+  - title: Custom label and explicit cell slot
+    notes:
+      - Use named slots when the column uses a custom label, for example a sorter.
+      - Keeping `#cell` explicit makes the two slot zones easier to scan.
+    code: |
+      <UiTableColumn min-width="180">
+        <template #label>
+          <UiTableSorter
+            :direction="sort.direction"
+            :active="sort.field === 'name'"
+            @click="setSort('name')"
+          >
+            Name
+          </UiTableSorter>
+        </template>
+
+        <template #cell="{ row }">
+          <UiLink size="small">{{ row.name }}</UiLink>
+        </template>
+      </UiTableColumn>
+
 use_when:
   - You define columns for UiTable.
 
@@ -30,12 +59,19 @@ api:
     - name: default
       zone: cell
       creates: Cell content.
+      notes: >
+        Prefer `v-slot` on UiTableColumn when the header label is already supplied by the `label`
+        prop and only the cell body is customized.
     - name: cell
       zone: cell
       creates: Explicit cell content.
+      notes: >
+        Use `#cell` when the column also needs another named slot such as `#label`, or when explicit
+        naming makes a complex column easier to read.
     - name: label
       zone: header-label
       creates: Header label content.
+      notes: Use only when the header label needs custom markup, for example UiTableSorter.
 
 rendered_structure:
   descriptive_only: true
@@ -60,6 +96,10 @@ composition:
       notes: Put the row's main UiLink in the first meaningful text column and set link size to small.
     - title: Sortable header
       notes: Use the label slot with UiTableSorter when the column supports sorting.
+    - title: Prop label plus custom cell
+      notes: Use `<UiTableColumn v-slot="{ row }" label="Name">` instead of `<template #cell>` when `label` prop is enough for the header.
+    - title: Custom label plus custom cell
+      notes: Use separate `<template #label>` and `<template #cell>` blocks when the header is built with a slot.
     - title: Status column
       notes: Use UiTag for categorical statuses instead of raw colored text.
 
@@ -68,8 +108,12 @@ ai_notes:
     - Set minWidth for important text columns so generated tables remain scannable.
     - Use align="right" for numbers, money, and percentages.
     - Use trim only for narrow checkbox, icon, or action columns.
+    - Prefer `v-slot` on UiTableColumn for ordinary custom cell content when the header is configured through props.
+    - Use the label slot only when the header itself needs custom markup.
+    - Use explicit `#cell` together with `#label` when both header and cell content are custom.
   avoid:
     - Do not place filters inside column labels; filters belong above the table.
+    - Do not wrap every cell body in `<template #cell>` when the default slot would express the same thing more simply.
 
 behavior:
   notes:

package/docs/profiles/pages/CardSettingsPage.yml

@@ -24,9 +24,15 @@ expected_structure:
   - The page root wrapper should not repeat that padding.
   - Content can include text, buttons, fields, checkboxes, radio groups, switches, and other form controls.
   - Textbox, select, number, date, and time controls usually live inside UiField.
+  - Field-level validation errors should be rendered as UiError inside the corresponding UiField, directly after the control.
+  - Bounded numeric settings, quantities, durations, limits, and ordering values should use UiNumberStepper instead of UiTextbox.
+  - UiTextbox with numeric input attributes is acceptable only when stepper controls do not fit the product interaction.
   - UiSwitch and simple UiCheckbox rows should use their own row layout with a visible label and optional hint, not UiField.
   - A bottom save panel is optional.
   - If a bottom save panel is used, its main save or apply action should be Success Primary.
+  - Show page-level API failures with UiAlert variant="danger".
+  - Show successful saves with a closable UiAlert variant="success" or another documented project success pattern.
+  - Use UiLoader when loading blocks the settings form; keep already loaded form chrome stable during save requests when possible.
 
 recommended_components:
   - name: UiPageHeader
@@ -37,8 +43,16 @@ recommended_components:
     profile: ../components/UiField.yml
   - name: UiTextbox
     profile: ../components/UiTextbox.yml
+  - name: UiNumberStepper
+    profile: ../components/UiNumberStepper.yml
   - name: UiSelect
     profile: ../components/UiSelect.yml
+  - name: UiError
+    profile: ../components/UiError.yml
+  - name: UiAlert
+    profile: ../components/UiAlert.yml
+  - name: UiLoader
+    profile: ../components/UiLoader.yml
   - name: UiCheckbox
     profile: ../components/UiCheckbox.yml
   - name: UiRadio
@@ -58,6 +72,8 @@ ai_notes:
   do:
     - Keep form controls grouped by task or semantic section.
     - Use UiField around labeled textbox, select, number, date, and time controls.
+    - Put UiError inside the UiField that owns the invalid control.
+    - Use UiNumberStepper for bounded numeric settings and values with meaningful increments.
     - Use UiSwitch for compact enable or disable settings.
     - Use UiCheckbox for checkbox groups, table selection, acknowledgements, and checkbox-shaped boolean choices.
     - Use tabs only when they reduce visible complexity without hiding required work.
@@ -68,3 +84,5 @@ ai_notes:
     - Do not put content-surface padding on the root page wrapper.
     - Do not use UiCheckbox as the default replacement for UiSwitch just because a setting is boolean.
     - Do not wrap UiSwitch or simple UiCheckbox rows in UiField.
+    - Do not implement bounded numeric settings as plain UiTextbox controls unless the exception is documented.
+    - Do not render field errors as unrelated sibling blocks outside UiField.

package/docs/profiles/pages/EntityListPage.yml

@@ -28,6 +28,12 @@ expected_structure:
   - UiTable should not be wrapped in an extra white content surface.
   - A wrapper around UiTable should only handle layout, width, or scrolling, without card chrome or content-surface padding.
   - Row action columns should use icon-only buttons with aria-label and UiTooltip instead of visible text buttons.
+  - Multiple row actions should live in one final action column with a stable width unless the task explicitly asks for separate columns.
+  - Settings-dependent columns should be conditional at the UiTableColumn level, not permanent columns that render empty values.
+  - If a setting disables a dependent column, avoid loading expensive data used only by that column.
+  - Show initial or blocking loading with UiLoader in the table/content area while keeping filters and page actions understandable.
+  - Show page-level API failures with UiAlert variant="danger".
+  - Use UiTable '#empty' for table-owned empty states; use UiInfobox when the empty state needs richer guidance or an action outside the table body.
   - The table may scroll and may support export.
 
 recommended_components:
@@ -51,6 +57,12 @@ recommended_components:
     profile: ../components/UiTableFooterSection.yml
   - name: UiTableFooterButton
     profile: ../components/UiTableFooterButton.yml
+  - name: UiLoader
+    profile: ../components/UiLoader.yml
+  - name: UiAlert
+    profile: ../components/UiAlert.yml
+  - name: UiInfobox
+    profile: ../components/UiInfobox.yml
 
 table_footer_rules:
   - Use UiTableFooterSection and UiTableFooterButton for table footer pagination.
@@ -66,10 +78,15 @@ ai_notes:
     - Persist filters, sorting, page, and page size in query parameters when routing is available.
     - Reset page to 1 when filters or sorting change.
     - Use narrow icon-only row action columns with matching aria-label and UiTooltip text.
+    - Put edit, delete, and similar compact row actions into one final action cell by default.
+    - Conditionally render settings-dependent columns at the column declaration, for example with `v-if` on UiTableColumn.
+    - Skip dependent API loads when the current settings make the dependent table data invisible.
     - Use tertiary for low-emphasis header or row-adjacent commands when a secondary button would be too visually heavy.
   avoid:
     - Do not hide filters in page header actions.
     - Do not put pagination only in local state when the result set is routable.
     - Do not place UiTable inside an additional white card or padded content surface.
     - Do not use visible text buttons for dense table row actions.
+    - Do not split compact row commands into several neighboring empty columns unless each column has a separate product meaning.
+    - Do not keep a settings-dependent column visible with blank cells when the setting is disabled.
     - Do not make every header action secondary when only one action should draw attention.

package/docs/profiles/pages/ModalSidebar.yml

@@ -151,6 +151,12 @@ expected_structure:
   - Destructive footer actions are often icon-only buttons aligned to the right edge.
   - Destructive icon-only actions should usually open UiPopconfirm with okVariant="danger"; its confirmation button is primary by default.
   - Content can be flexible, but should stay compact.
+  - Default sidebar forms use one form or grid container with a consistent gap.
+  - Each labeled textbox, select, number, date, or time control in a sidebar form should live in UiField.
+  - Field-level errors should use UiError inside the corresponding UiField, directly after the control.
+  - Bounded numeric sidebar fields should use UiNumberStepper unless stepper controls do not fit the product interaction.
+  - Footer actions should be placed through the UiModalSidebar footer slot, usually primary save and secondary or tertiary cancel.
+  - Sidebar titles should stay short enough for the available width.
   - Small tables can be placed in sidebars.
 
 recommended_components:
@@ -166,8 +172,14 @@ recommended_components:
     profile: ../components/UiField.yml
   - name: UiTextbox
     profile: ../components/UiTextbox.yml
+  - name: UiNumberStepper
+    profile: ../components/UiNumberStepper.yml
   - name: UiSelect
     profile: ../components/UiSelect.yml
+  - name: UiError
+    profile: ../components/UiError.yml
+  - name: UiAlert
+    profile: ../components/UiAlert.yml
   - name: UiTable
     profile: ../components/UiTable.yml
     notes: Use only for small, simple tables.
@@ -176,6 +188,9 @@ ai_notes:
   do:
     - Use for inspect, edit, or secondary workflows related to the current list or page.
     - Keep the flow compact.
+    - Use a single local form/grid container for sidebar forms.
+    - Put every labeled scalar form control in UiField and keep UiError inside that field.
+    - Use the footer slot for save/cancel actions rather than a page footer component.
     - Split footer actions into meaningful left and right groups when secondary or destructive actions need separation.
     - Use 12px or 16px gaps inside each footer action group.
     - Put destructive icon-only actions on the right and confirm them with UiPopconfirm okVariant="danger"; the confirmation button is primary by default.
@@ -183,4 +198,7 @@ ai_notes:
     - Do not use for bulky or complex interfaces.
     - Do not use collapse blocks inside sidebars.
     - Do not use two-column content on separate surfaces.
+    - Do not use a two-column form inside a sidebar unless the product task explicitly requires it and the content still fits.
+    - Do not place UiPageFooter inside UiModalSidebar.
+    - Do not mix unrelated spacing strategies inside one sidebar form; keep gaps owned by the form container and local error margins.
     - Use a full page or modal window for bulky flows.

package/docs/profiles/pages/PageComposition.yml

@@ -35,6 +35,12 @@ shared_rules:
   - Do not duplicate content-surface padding on the page root; outer page spacing is controlled by the CRM host layout.
   - Prefer public components from @retailcrm/embed-ui-v1-components/remote.
   - Do not invent custom chrome for pages, forms, tables, tabs, buttons, modals, or sidebars when a documented component fits.
+  - For Vue remote pages and page-like components, prefer local CSS Modules with `<style module lang="less">`; use shared global styles only as an intentional feature-level abstraction.
+  - Page-specific CSS Module class names should still describe the block they style, for example `entity-list__actions`, `settings-form__field-error`, or `modal-sidebar-form__footer`.
+  - Use UiLoader for loading states, UiAlert variant="danger" for page-level API failures, and UiAlert variant="success" or an approved local success pattern for successful saves.
+  - Use UiInfobox for richer explanatory empty states; use UiTable #empty when the empty state belongs directly to a table body.
+  - If a column or dependent UI exists only for an enabled setting, render the column conditionally instead of showing empty cells.
+  - Avoid loading expensive dependent API data when the setting that needs it is disabled.
 
 decision_guide:
   - need: Searchable, filterable registry.
@@ -63,9 +69,13 @@ ai_notes:
     - Keep operational CRM screens dense, scannable, and work-focused.
     - Prefer variant="success" for the main save/apply/create action and keep it visually dominant.
     - Prefer appearance="tertiary" for supportive actions that sit near content but should stay visually quiet.
+    - Keep page-specific layout styles in CSS Modules unless the task records a shared styling abstraction.
+    - Choose one documented loading, error, success, and empty-state pattern for the page before finishing.
   avoid:
     - Do not turn internal CRM work screens into marketing-style layouts.
     - Do not hide filters or primary workflow controls away from the content they affect.
     - Do not place multiple Success Primary, Default Primary, or Danger Primary actions with the same variant in the page-level scope or inside one collapse-box scope.
     - Do not default every non-primary action to appearance="secondary"; choose by local action importance.
     - Do not add page-surface padding to both the page root and the white content surface.
+    - Do not use a shared `admin.less` or other global page stylesheet only to avoid local composition styles.
+    - Do not show settings-dependent table columns as permanent empty placeholder columns.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@retailcrm/embed-ui-v1-components",
   "bin": "bin/embed-ui-v1-components.mjs",
   "type": "module",
-  "version": "0.9.26",
+  "version": "0.9.28",
   "license": "MIT",
   "author": "RetailDriverLLC <integration@retailcrm.ru>",
   "repository": {
@@ -82,8 +82,8 @@
     "@storybook/vue3": "^10.3.5",
     "@storybook/vue3-vite": "^10.3.5",
     "@vitejs/plugin-vue": "^6.0.2",
-    "@vitest/browser": "4.1.3",
-    "@vitest/browser-playwright": "4.1.3",
+    "@vitest/browser": "4.1.8",
+    "@vitest/browser-playwright": "4.1.8",
     "@vue/compiler-sfc": "^3.5.25",
     "@vue/test-utils": "^2.4.6",
     "@yandex/ymaps3-types": "^1.0.19072130",
@@ -100,7 +100,7 @@
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^4.1.3",
+    "vitest": "4.1.8",
     "vue": "^3.5.32",
     "vue-i18n": "10.0.8"
   }

package/templates/skills/embed-ui-v1-components-ui/SKILL.md.txt

@@ -32,6 +32,7 @@ Use this skill before changing frontend UI built with `@retailcrm/embed-ui-v1-co
 ## High-signal checks
 
 - For entity lists, use `UiTable`, `UiTableColumn`, and table footer slots.
+- For ordinary table cells, configure `UiTableColumn` headers through props and use `v-slot` on the column; reserve `#cell` for columns that also need another named slot or extra clarity.
 - For table pagination, follow the reference example in `UiTable.yml`: button sizes, active state, dividers, arrow assets, and scoped selector pattern.
 - For form fields, use `UiField` with the matching control and forward slot props such as `id` when the control accepts them.
 - Put validation errors inside the relevant field composition, not as unrelated sibling blocks.