@aginies/ui 0.2.0 → 0.3.0

package/dist/index.d.cts

@@ -763,8 +763,12 @@ export interface DataColumn<T = any> {
   sortValue?: (row: T) => any;
   /** right for numbers and amounts */
   align?: 'left' | 'right' | 'center';
+  /** Column width; also the room it needs when `minWidth` is absent (px numbers count for priority hiding) */
   width?: number | string;
+  /** Narrowest width the column may take; priority hiding sums these (default 120px) */
   minWidth?: number | string;
+  /** DataTable only: 1 = always shown (default), higher numbers hide first when the table's own width cannot fit every column */
+  priority?: number;
   /** Custom cell; receives (value, row, index) */
   render?: (value: any, row: T, index: number) => React.ReactNode;
   /** Inline edit on double-click, F2 or the pencil (needs onCellEdit) */
@@ -778,8 +782,8 @@ export interface DataColumn<T = any> {
   className?: string;
 }
 /** Visible strings of a DataTable, overridable per locale. */
-export interface DataTableLabels { empty?: string; emptyHint?: string; loading?: string; error?: string; errorHint?: string; retry?: string; selectAll?: string; selectRow?: string; actions?: string; sortedAsc?: string; sortedDesc?: string; edit?: string; }
-/** Dense record grid for agents, runs, approvals and tenants: sortable columns, selection with select-all, inline cell edit, row actions, sticky header, and the states error → loading → empty → rows. Rows are 32px compact and 44px comfortable. */
+export interface DataTableLabels { empty?: string; emptyHint?: string; loading?: string; error?: string; errorHint?: string; retry?: string; selectAll?: string; selectRow?: string; actions?: string; sortedAsc?: string; sortedDesc?: string; edit?: string; /** aria-label of the row-detail toggle while closed */ expandRow?: string; /** aria-label of the row-detail toggle while open */ collapseRow?: string; }
+/** Dense record grid for agents, runs, approvals and tenants: sortable columns, selection with select-all, inline cell edit, row actions, sticky header, and the states error → loading → empty → rows. Rows are 32px compact and 44px comfortable. At narrow widths it hides columns by `priority` against its own measured width and can pin the first column (`stickyFirst`). */
 export interface DataTableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'selected' | 'value'> {
   columns: DataColumn<T>[];
   rows: T[];
@@ -824,6 +828,10 @@ export interface DataTableProps<T = any> extends Omit<React.HTMLAttributes<HTMLD
   rowClassName?: (row: T, index: number) => string | false | undefined;
   /** Key of the row whose detail is open (side panel, split view): aria-current, --selection ground and a --signal edge. Independent of `selected` */
   activeKey?: string | number | null;
+  /** First data column (and the selection column) stays put while the table scrolls sideways, with a hairline shadow once scrolled */
+  stickyFirst?: boolean;
+  /** Called with the keys of the columns hidden by `priority` whenever that set changes ([] when all fit) */
+  onHiddenColumnsChange?: (keys: string[]) => void;
 }
 export declare function DataTable<T = any>(props: DataTableProps<T>): JSX.Element;
 
@@ -1809,6 +1817,40 @@ export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement
 }
 export declare function Stepper(props: StepperProps): JSX.Element;
 
+/** One view in an ActivityBar. */
+export interface ActivityBarItem {
+  /** Value passed to onSelect and matched against `active` */
+  id: string;
+  /** Lucide icon name (kebab-case), or a node such as <ProductIcon product="code" size={20} /> */
+  icon: string | React.ReactNode;
+  /** Accessible name and tooltip text */
+  label: string;
+  /** Small count Badge on the icon (a number, or a short word) */
+  badge?: number | string;
+  /** Shown dimmed, skipped by the arrow keys, not selectable */
+  disabled?: boolean;
+  /** id of the view panel this item opens (sets aria-controls) */
+  controls?: string;
+  /** id for the tab button, so the panel can point back with aria-labelledby */
+  tabId?: string;
+}
+/** Vertical 48px icon strip that switches the view beside it, like VS Code's activity bar or IntelliJ's tool-window bar: use it in IDE mocks and the web build of the Code panel. A vertical tablist with roving focus (↑ ↓ Home End, Enter or Space selects), tooltips with each label, a 2px --signal bar on the edge facing the view. */
+export interface ActivityBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /** Top group of views */
+  items: ActivityBarItem[];
+  /** Bottom group (accounts, settings), pushed to the foot of the bar */
+  footerItems?: ActivityBarItem[];
+  /** id of the selected item */
+  active?: string;
+  /** Called with the id and item when an item is clicked or chosen with Enter / Space */
+  onSelect?: (id: string, item: ActivityBarItem) => void;
+  /** Which side of the view the bar sits on; the active bar and the --line edge face the view (default left) */
+  side?: 'left' | 'right';
+  /** aria-label of the tablist (default "Views") */
+  labels?: { navigation?: string };
+}
+export declare function ActivityBar(props: ActivityBarProps): JSX.Element;
+
 // --- feedback ---
 /** The brand loader: the Aginies mark animated with CSS keyframes only. Use it wherever the product itself is working (boot, page data, an agent run); use Spinner for a single control. */
 export interface AginiesLoaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {

package/dist/index.d.ts

@@ -763,8 +763,12 @@ export interface DataColumn<T = any> {
   sortValue?: (row: T) => any;
   /** right for numbers and amounts */
   align?: 'left' | 'right' | 'center';
+  /** Column width; also the room it needs when `minWidth` is absent (px numbers count for priority hiding) */
   width?: number | string;
+  /** Narrowest width the column may take; priority hiding sums these (default 120px) */
   minWidth?: number | string;
+  /** DataTable only: 1 = always shown (default), higher numbers hide first when the table's own width cannot fit every column */
+  priority?: number;
   /** Custom cell; receives (value, row, index) */
   render?: (value: any, row: T, index: number) => React.ReactNode;
   /** Inline edit on double-click, F2 or the pencil (needs onCellEdit) */
@@ -778,8 +782,8 @@ export interface DataColumn<T = any> {
   className?: string;
 }
 /** Visible strings of a DataTable, overridable per locale. */
-export interface DataTableLabels { empty?: string; emptyHint?: string; loading?: string; error?: string; errorHint?: string; retry?: string; selectAll?: string; selectRow?: string; actions?: string; sortedAsc?: string; sortedDesc?: string; edit?: string; }
-/** Dense record grid for agents, runs, approvals and tenants: sortable columns, selection with select-all, inline cell edit, row actions, sticky header, and the states error → loading → empty → rows. Rows are 32px compact and 44px comfortable. */
+export interface DataTableLabels { empty?: string; emptyHint?: string; loading?: string; error?: string; errorHint?: string; retry?: string; selectAll?: string; selectRow?: string; actions?: string; sortedAsc?: string; sortedDesc?: string; edit?: string; /** aria-label of the row-detail toggle while closed */ expandRow?: string; /** aria-label of the row-detail toggle while open */ collapseRow?: string; }
+/** Dense record grid for agents, runs, approvals and tenants: sortable columns, selection with select-all, inline cell edit, row actions, sticky header, and the states error → loading → empty → rows. Rows are 32px compact and 44px comfortable. At narrow widths it hides columns by `priority` against its own measured width and can pin the first column (`stickyFirst`). */
 export interface DataTableProps<T = any> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'selected' | 'value'> {
   columns: DataColumn<T>[];
   rows: T[];
@@ -824,6 +828,10 @@ export interface DataTableProps<T = any> extends Omit<React.HTMLAttributes<HTMLD
   rowClassName?: (row: T, index: number) => string | false | undefined;
   /** Key of the row whose detail is open (side panel, split view): aria-current, --selection ground and a --signal edge. Independent of `selected` */
   activeKey?: string | number | null;
+  /** First data column (and the selection column) stays put while the table scrolls sideways, with a hairline shadow once scrolled */
+  stickyFirst?: boolean;
+  /** Called with the keys of the columns hidden by `priority` whenever that set changes ([] when all fit) */
+  onHiddenColumnsChange?: (keys: string[]) => void;
 }
 export declare function DataTable<T = any>(props: DataTableProps<T>): JSX.Element;
 
@@ -1809,6 +1817,40 @@ export interface StepperProps extends Omit<React.HTMLAttributes<HTMLOListElement
 }
 export declare function Stepper(props: StepperProps): JSX.Element;
 
+/** One view in an ActivityBar. */
+export interface ActivityBarItem {
+  /** Value passed to onSelect and matched against `active` */
+  id: string;
+  /** Lucide icon name (kebab-case), or a node such as <ProductIcon product="code" size={20} /> */
+  icon: string | React.ReactNode;
+  /** Accessible name and tooltip text */
+  label: string;
+  /** Small count Badge on the icon (a number, or a short word) */
+  badge?: number | string;
+  /** Shown dimmed, skipped by the arrow keys, not selectable */
+  disabled?: boolean;
+  /** id of the view panel this item opens (sets aria-controls) */
+  controls?: string;
+  /** id for the tab button, so the panel can point back with aria-labelledby */
+  tabId?: string;
+}
+/** Vertical 48px icon strip that switches the view beside it, like VS Code's activity bar or IntelliJ's tool-window bar: use it in IDE mocks and the web build of the Code panel. A vertical tablist with roving focus (↑ ↓ Home End, Enter or Space selects), tooltips with each label, a 2px --signal bar on the edge facing the view. */
+export interface ActivityBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+  /** Top group of views */
+  items: ActivityBarItem[];
+  /** Bottom group (accounts, settings), pushed to the foot of the bar */
+  footerItems?: ActivityBarItem[];
+  /** id of the selected item */
+  active?: string;
+  /** Called with the id and item when an item is clicked or chosen with Enter / Space */
+  onSelect?: (id: string, item: ActivityBarItem) => void;
+  /** Which side of the view the bar sits on; the active bar and the --line edge face the view (default left) */
+  side?: 'left' | 'right';
+  /** aria-label of the tablist (default "Views") */
+  labels?: { navigation?: string };
+}
+export declare function ActivityBar(props: ActivityBarProps): JSX.Element;
+
 // --- feedback ---
 /** The brand loader: the Aginies mark animated with CSS keyframes only. Use it wherever the product itself is working (boot, page data, an agent run); use Spinner for a single control. */
 export interface AginiesLoaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'label'> {