@flamingo-stack/openframe-frontend-core 0.0.780 → 0.0.782

package/src/components/features/scripts/script-schedules-table.tsx

@@ -1,7 +1,10 @@
 'use client';
 
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { TextLineSkeleton } from '../../loading/unified-skeleton';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { TruncateText } from '../../ui/truncate-text';
 import { OSTypeBadgeGroup } from '../os-type-badge-group';
 import { ScheduleDateTimeCell, ScriptNameCell } from './script-cells';
@@ -40,6 +43,23 @@ export interface ScriptSchedulesTableProps {
 
 const VALUE_CLASS = 'text-ods-text-primary text-h4';
 
+/** A value of the row (its repeat, its device count); a bar while the row is read (a loading scope). */
+function ScheduleValueCell({ children }: { children: ReactNode }) {
+  if (useLoadingScope()) return <TextLineSkeleton type="h4" className="w-16" />;
+  return <span className={VALUE_CLASS}>{children}</span>;
+}
+
+/** A schedule still being read: a row the table keys, every field a cell shows empty (each draws its loading form). */
+const loadingSchedule = (id: string): ScriptScheduleTableRow => ({
+  id,
+  name: '',
+  supportedPlatforms: [],
+  startsAt: { date: '', time: '' },
+  repeat: '',
+  deviceCount: 0,
+  href: '',
+});
+
 /**
  * The script schedules as a table: what runs, on which operating systems,
  * when, how often and on how many devices.
@@ -53,8 +73,11 @@ export function ScriptSchedulesTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
 }: ScriptSchedulesTableProps) {
+  // ONE switch: the host's read (`isLoading`) or a page's loading scope draws the header and the body's skeleton
+  // rows alike.
+  const loading = useLoadingScope() || isLoading;
   const columns = useMemo<ColumnDef<ScriptScheduleTableRow>[]>(() => {
     const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptScheduleTableRow) => ReactNode) => ({
       id: layout.id,
@@ -76,25 +99,34 @@ export function ScriptSchedulesTable({
           <TruncateText tone="secondary">{row.trigger}</TruncateText>
         ) : null,
       ),
-      cell(SCHEDULE_COLUMNS.repeat, row => (row.repeat ? <span className={VALUE_CLASS}>{row.repeat}</span> : null)),
-      cell(SCHEDULE_COLUMNS.deviceCount, row => <span className={VALUE_CLASS}>{row.deviceCount}</span>),
+      cell(SCHEDULE_COLUMNS.repeat, row =>
+        row.repeat != null ? <ScheduleValueCell>{row.repeat}</ScheduleValueCell> : null,
+      ),
+      cell(SCHEDULE_COLUMNS.deviceCount, row => <ScheduleValueCell>{row.deviceCount}</ScheduleValueCell>),
     ];
     if (renderActions) {
       all.push(cell(SCHEDULE_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
     }
-    all.push(cell(SCHEDULE_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    all.push(
+      cell(SCHEDULE_COLUMNS.open, row => (row.href !== undefined ? <OpenInNewTabCell href={row.href} /> : null)),
+    );
     return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
   }, [hideColumns, renderActions]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingSchedule) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<ScriptScheduleTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: ScriptScheduleTableRow) => row.id,
     enableSorting: false,
   });
 
-  const rowHref = useCallback((row: ScriptScheduleTableRow) => row.href, []);
-  const showHeader = isLoading || rows.length > 0;
+  const rowHref = useCallback((row: ScriptScheduleTableRow) => row.href || undefined, []);
+  const showHeader = loading || rows.length > 0;
 
   return (
     <DataTable table={table}>
@@ -102,7 +134,8 @@ export function ScriptSchedulesTable({
         <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
       )}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         rowClassName="mb-1"

package/src/components/features/scripts/script-shell-badge.tsx

@@ -1,6 +1,8 @@
 'use client';
 
 import { cn } from '../../../utils/cn';
+import { TextLineSkeleton, UnifiedSkeleton } from '../../loading/unified-skeleton';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { scriptShellType } from './shell-types';
 
 export interface ScriptShellBadgeProps {
@@ -12,6 +14,15 @@ export interface ScriptShellBadgeProps {
 
 /** A script's shell: its icon and label from `SCRIPT_SHELL_TYPES`. */
 export function ScriptShellBadge({ value, className, iconClassName }: ScriptShellBadgeProps) {
+  // The shell is still being read (empty, in a loading scope): its icon box and its label as bars.
+  if (useLoadingScope() && !value) {
+    return (
+      <span className={cn('flex items-center gap-2', className)}>
+        <UnifiedSkeleton className={cn('h-5 w-5', iconClassName)} />
+        <TextLineSkeleton type="inherit" as="span" className="w-20" />
+      </span>
+    );
+  }
   const shell = scriptShellType(value);
   const Icon = shell?.icon;
 

package/src/components/features/scripts/scripts-table-shared.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 import { openInNewTab } from '../../../utils/open-in-new-tab';
 import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
 import { Button } from '../../ui/button';
+import { useLoadingScope } from '../../ui/loading-scope';
 import type { ScriptsTableColumnLayout } from './scripts-table-columns';
 
 /** A column's `meta` from its layout: the fields a live table and its skeleton agree on. */
@@ -26,12 +27,17 @@ export function RowActionsCell({ children }: { children: ReactNode }) {
   );
 }
 
-/** The last cell of a row: its page in a new tab. The row is a link itself, so this opens by script. */
+/**
+ * The last cell of a row: its page in a new tab. The row is a link itself, so this opens by script. While the row is
+ * read (a loading scope) the button is static chrome: drawn real and inert.
+ */
 export function OpenInNewTabCell({ href }: { href: string }) {
+  const loading = useLoadingScope();
   return (
     <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
       <Button
-        onClick={openInNewTab(href)}
+        onClick={loading ? undefined : openInNewTab(href)}
+        disabled={loading}
         variant="outline"
         size="icon"
         leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}

package/src/components/features/scripts/scripts-table.tsx

@@ -1,7 +1,9 @@
 'use client';
 
 import { type ReactNode, useCallback, useMemo } from 'react';
-import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { type ColumnDef, DataTable, dataTableLoadingRows, type Row, useDataTable } from '../../ui/data-table';
+import { DATA_TABLE_SKELETON_ROWS } from '../../ui/data-table/utils';
+import { useLoadingScope } from '../../ui/loading-scope';
 import { SquareAvatar } from '../../ui/square-avatar';
 import { TruncateText } from '../../ui/truncate-text';
 import { OSTypeBadgeGroup } from '../os-type-badge-group';
@@ -42,6 +44,16 @@ export interface ScriptsTableProps {
 
 const BADGE_ICON = 'h-4 w-4 content-md:h-6 content-md:w-6';
 
+/** A script still being read: a row the table keys, every field a cell shows empty (each cell draws its loading form). */
+const loadingScript = (id: string): ScriptTableRow => ({
+  id,
+  name: '',
+  shellType: '',
+  supportedPlatforms: [],
+  author: { name: '', initials: '' },
+  href: '',
+});
+
 /**
  * The script library as a table: name and description, shell, the operating
  * systems it runs on and who added it. Rows are a view-model the host maps its
@@ -56,8 +68,11 @@ export function ScriptsTable({
   stickyHeader = false,
   stickyHeaderOffset,
   rightSlot,
-  skeletonRows = 10,
+  skeletonRows,
 }: ScriptsTableProps) {
+  // ONE switch: the host's read (`isLoading`) or a page's loading scope draws the header and the body's skeleton
+  // rows alike.
+  const loading = useLoadingScope() || isLoading;
   const columns = useMemo<ColumnDef<ScriptTableRow>[]>(() => {
     const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptTableRow) => ReactNode) => ({
       id: layout.id,
@@ -93,19 +108,24 @@ export function ScriptsTable({
     if (renderActions) {
       all.push(cell(SCRIPT_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
     }
-    all.push(cell(SCRIPT_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    all.push(cell(SCRIPT_COLUMNS.open, row => (row.href !== undefined ? <OpenInNewTabCell href={row.href} /> : null)));
     return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
   }, [hideColumns, renderActions]);
 
+  // While loading the table holds one page of placeholder rows, drawn with the real cells (`loadingCells`).
+  const loadingRows = useMemo(
+    () => (loading ? dataTableLoadingRows(skeletonRows ?? DATA_TABLE_SKELETON_ROWS, loadingScript) : null),
+    [loading, skeletonRows],
+  );
   const table = useDataTable<ScriptTableRow>({
-    data: rows,
+    data: loadingRows ?? rows,
     columns,
     getRowId: (row: ScriptTableRow) => row.id,
     enableSorting: false,
   });
 
-  const rowHref = useCallback((row: ScriptTableRow) => row.href, []);
-  const showHeader = isLoading || rows.length > 0;
+  const rowHref = useCallback((row: ScriptTableRow) => row.href || undefined, []);
+  const showHeader = loading || rows.length > 0;
 
   return (
     <DataTable table={table}>
@@ -113,7 +133,8 @@ export function ScriptsTable({
         <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
       )}
       <DataTable.Body
-        loading={isLoading}
+        loading={loading}
+        loadingCells
         skeletonRows={skeletonRows}
         emptyMessage={emptyMessage}
         rowClassName="mb-1"

package/src/components/features/select-button.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import Image from '../../embed-shims/next-image';
 import { cn } from '../../utils/cn';
 import { CheckCircleIcon } from '../icons-v2-generated/signs-and-symbols/check-circle-icon';
+import { Button } from '../ui/button';
 import { Tag, type TagProps } from '../ui/tag';
 
 export interface SelectButtonProps {
@@ -39,26 +40,17 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
     ref,
   ) => {
     return (
-      <button
+      <Button
+        // A selectable option drawn as a field: the picked one (`aria-selected`) takes the accent border on the
+        // accent's light fill.
+        variant="field"
         ref={ref}
         type="button"
         role="option"
         aria-selected={selected}
         disabled={disabled}
         onClick={onClick}
-        className={cn(
-          'group flex h-11 items-center gap-1 rounded-[6px] border px-3 py-3 transition-colors duration-200 content-md:h-16 content-md:gap-2 content-md:px-4',
-          'w-full text-left font-body',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ods-focus',
-          'disabled:pointer-events-none disabled:opacity-50',
-          // Hover / active move the BACKGROUND only, like Input — the accent
-          // border is reserved for the selected state, so an unselected button
-          // no longer flashes "selected" under the cursor.
-          selected
-            ? 'border-ods-accent bg-ods-open-yellow-light hover:bg-ods-open-yellow-light-hover active:bg-ods-open-yellow-light-action'
-            : 'border-ods-border bg-ods-card hover:bg-ods-bg-hover active:bg-ods-bg-active',
-          className,
-        )}
+        className={cn('content-md:h-16', className)}
       >
         {icon && (
           <span
@@ -104,7 +96,7 @@ export const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProp
         {tag && <Tag variant={tagVariant} className="shrink-0" label={tag} />}
 
         {selected && <CheckCircleIcon className="size-4 shrink-0 text-ods-accent content-md:size-6" />}
-      </button>
+      </Button>
     );
   },
 );

package/src/components/features/status-filter-component.tsx

@@ -138,7 +138,7 @@ export function StatusFilterComponent({
  * `options` the page states for real, else `pills` option buttons as boxes of the buttons' size. With `showCount`
  * the count is a bar before "items".
  */
-export function StatusFilterComponentSkeleton({
+function StatusFilterComponentSkeleton({
   label = 'Status',
   options,
   pills = STATUS_FILTER_SKELETON_PILLS,

package/src/components/features/tags-selector.tsx

@@ -122,18 +122,19 @@ export function TagsSelector({
             >
               {tag.name}
               {!disabled && (
-                <button
+                <Button
+                  variant="bare"
+                  size="icon-inline"
                   type="button"
                   onClick={e => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleTagRemove(tag.id);
                   }}
-                  className="inline-flex h-4 w-4 items-center justify-center rounded-full text-ods-text-secondary transition-colors hover:bg-ods-accent/20 hover:text-ods-text-primary"
                   aria-label={`Remove ${tag.name}`}
                 >
-                  <X className="h-3 w-3" />
-                </button>
+                  <X />
+                </Button>
               )}
             </span>
           ))}

package/src/components/features/ticket-status-config-list/ticket-status-config-list.tsx

@@ -2,6 +2,8 @@
 
 import type { ReactNode } from 'react';
 import { cn } from '../../../utils/cn';
+import { LoadingItems, useLoadingScope } from '../../ui/loading-scope';
+import { TicketStatusConfigRow } from '../../ui/ticket-status-config-row';
 import { SortableList } from '../sortable-list/sortable-list';
 import { SortableMoveButtons } from '../sortable-list/sortable-move-buttons';
 import { type SortableDragHandleProps, useSortableItem } from '../sortable-list/use-sortable-item';
@@ -24,9 +26,23 @@ export interface TicketStatusConfigListProps<T extends { id: string }> {
   renderRow: (item: T, args: SortableRowRenderArgs) => ReactNode;
   /** Names a row for the live region and the move buttons, e.g. its status name. */
   getItemLabel?: (index: number) => string | undefined;
+  /**
+   * The rows are being read. With no rows yet the list draws `skeletonRows` row skeletons (a loading scope does the
+   * same); rows it already has draw themselves.
+   */
+  loading?: boolean;
+  /** Row skeletons while loading with no rows. Default `TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS`. */
+  skeletonRows?: number;
   className?: string;
 }
 
+/** Row skeletons a status list draws while it has none: a typical list (the list is not paged). */
+export const TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS = 4;
+
+const noop = () => {};
+
+const LIST_CLASS = 'flex w-full flex-col gap-[var(--spacing-system-xs)]';
+
 /**
  * A reorderable list of config rows (ticket statuses, AI quick actions), built
  * on {@link SortableList} — Pragmatic drag and drop on desktop, an explicit
@@ -40,14 +56,43 @@ export function TicketStatusConfigList<T extends { id: string }>({
   onReorder,
   renderRow,
   getItemLabel,
+  loading: loadingProp,
+  skeletonRows = TICKET_STATUS_CONFIG_LIST_SKELETON_ROWS,
   className,
 }: TicketStatusConfigListProps<T>) {
+  // ONE switch: in a page's loading state (or while the host reads the rows) an empty list is its skeleton.
+  const loading = useLoadingScope() || !!loadingProp;
+  if (loading && items.length === 0) {
+    return (
+      // The SAME sortable list and rows, inert: the reorder controls a row has (the grip, or the touch move pair) are
+      // drawn for real, and nothing in it can be dragged or pressed while it loads.
+      <div inert aria-hidden className="contents">
+        <SortableList onReorder={noop} className={cn(LIST_CLASS, className)}>
+          <LoadingItems count={skeletonRows}>
+            {index => (
+              <SortableRow index={index} count={skeletonRows}>
+                {args => (
+                  // The row's own loading form. A list that knows nothing yet draws `custom` rows (the kind a host can
+                  // recolor, so the Color column is drawn).
+                  <TicketStatusConfigRow
+                    variant="custom"
+                    statusKey=""
+                    name=""
+                    onColorChange={noop}
+                    dragHandleProps={args.dragHandleProps}
+                    moveButtons={args.moveButtons}
+                    loading
+                  />
+                )}
+              </SortableRow>
+            )}
+          </LoadingItems>
+        </SortableList>
+      </div>
+    );
+  }
   return (
-    <SortableList
-      onReorder={onReorder}
-      getItemLabel={getItemLabel}
-      className={cn('flex w-full flex-col gap-[var(--spacing-system-xs)]', className)}
-    >
+    <SortableList onReorder={onReorder} getItemLabel={getItemLabel} className={cn(LIST_CLASS, className)}>
       {items.map((item, index) => (
         <SortableRow key={item.id} index={index} count={items.length} label={getItemLabel?.(index)}>
           {args => renderRow(item, args)}
@@ -77,6 +122,8 @@ function SortableRow({
       // stacking follows DOM order, so a row dragged DOWN slides UNDER the rows
       // below it while a row dragged up correctly renders on top.
       className={isDragging ? 'relative z-10' : undefined}
+      // One row of a read list: how many there are is the record's (the height gate counts them).
+      data-loading-item
     >
       {children({
         dragHandleProps,

package/src/components/features/video-bites-strip.tsx

@@ -219,7 +219,7 @@ function biteMediaStyle(cssAspect: string, height?: number, heightMobile?: numbe
   };
 }
 
-export interface VideoBiteCardSkeletonProps {
+interface VideoBiteCardSkeletonProps {
   /** The bite's aspect ratio ('9:16' portrait by default). */
   aspect?: string;
   /** Fixed card height (strip); omitted, the card fills its cell and the aspect sets the height. */
@@ -232,12 +232,7 @@ export interface VideoBiteCardSkeletonProps {
  * A bite card while it is read: the card's own frame and its media box as the skeleton's surface. The title and
  * the speaker sit in the hover overlay, unseen at rest, so they are not drawn.
  */
-export function VideoBiteCardSkeleton({
-  aspect = '9:16',
-  height,
-  heightMobile,
-  className,
-}: VideoBiteCardSkeletonProps) {
+function VideoBiteCardSkeleton({ aspect = '9:16', height, heightMobile, className }: VideoBiteCardSkeletonProps) {
   const cssAspect = RATIO_TO_CSS_ASPECT[ratioToCategory(detectAspectRatio(aspect))];
   return (
     <div
@@ -255,7 +250,7 @@ export function VideoBiteCardSkeleton({
   );
 }
 
-export interface VideoBitesStripSkeletonProps {
+interface VideoBitesStripSkeletonProps {
   /** How many cards. Default `VIDEO_BITES_SKELETON_COUNT` (a full line); 0 draws nothing. */
   count?: number;
   /** The bites' aspect ratio ('9:16' by default). */
@@ -273,7 +268,7 @@ export interface VideoBitesStripSkeletonProps {
  * The strip while its bites are read: the same `CardsStrip` (its heading, track, gaps and edge bleed), with no
  * marquee, each card a `VideoBiteCardSkeleton`. `VideoBitesStrip` draws it in a loading scope.
  */
-export function VideoBitesStripSkeleton({
+function VideoBitesStripSkeleton({
   count = VIDEO_BITES_SKELETON_COUNT,
   aspect = '9:16',
   title = DEFAULT_VIDEO_BITES_TITLE,

package/src/components/features/video-shared.tsx

@@ -181,6 +181,9 @@ export interface VideoCommonProps {
    * want a minimal look. No-op for file (MP4/HLS) branches.
    */
   minimalControls?: boolean;
+  /** The record is still being read: the video draws its skeleton (its layout's box) and mounts no player. A loading
+   *  scope does the same while no `url` is given. */
+  loading?: boolean;
 }
 
 /**

package/src/components/features/video-source-selector.tsx

@@ -286,15 +286,17 @@ function DefaultVideoPreview({ videoUrl, onDelete, disabled }: DefaultVideoPrevi
       <div className="aspect-video max-h-[300px] w-full">
         <Video kind="file" url={videoUrl} />
       </div>
-      <button
+      <Button
+        variant="overlay"
+        size="icon-sm"
         type="button"
         onClick={onDelete}
         aria-label="Delete video"
-        className="absolute right-2 top-2 rounded-full bg-black/60 p-1.5 transition-colors hover:bg-black/80"
+        className="absolute right-2 top-2"
         disabled={disabled}
       >
-        <X className="h-4 w-4 text-ods-text-on-dark" />
-      </button>
+        <X />
+      </Button>
     </div>
   );
 }

package/src/components/features/video.tsx

@@ -46,6 +46,7 @@ import { useNearViewport } from '../../hooks/use-near-viewport';
 import { cn } from '../../utils/cn';
 import { fetchPriorityProp } from '../../utils/fetch-priority';
 import { UnifiedSkeleton } from '../loading/unified-skeleton';
+import { Button } from '../ui/button/button';
 import { useLoadingScope } from '../ui/loading-scope';
 import { VideoPlayBadge } from './video-center-badge';
 import type { FilePlayerProps } from './video-file-player';
@@ -225,7 +226,7 @@ export function Video(props: VideoProps): React.ReactElement | null {
   const layout = props.layout ?? 'native';
   // ONE switch: in a loading scope with no url yet (it is read) the video is its skeleton and no player is mounted;
   // a url it is given there is the page's own and plays as it is.
-  if (loading && !url) return <VideoSkeleton layout={layout} className={props.className} />;
+  if ((loading && !url) || props.loading) return <VideoSkeleton layout={layout} className={props.className} />;
   if (!url) return null;
 
   const effectiveKind = resolveKind(props, url);
@@ -305,7 +306,7 @@ function resolveKind(props: VideoProps, url: string): 'youtube' | 'file' {
  * A video while it is read: the player's box in the player's own layout wrapper (so its size and frame are the
  * player's), drawn as the skeleton's surface. `Video` draws it in a loading scope.
  */
-export function VideoSkeleton({ layout = 'native', className }: { layout?: VideoLayout; className?: string }) {
+function VideoSkeleton({ layout = 'native', className }: { layout?: VideoLayout; className?: string }) {
   return wrapWithLayout(<UnifiedSkeleton variant="rectangular" className={cn('h-full w-full', className)} />, layout);
 }
 
@@ -730,11 +731,12 @@ function YouTubeFacadeInner({
 
   return (
     <div className={wrapperClass} style={wrapperStyle}>
-      <button
+      <Button
+        variant="card"
         type="button"
         aria-label={`Play: ${title}`}
         onClick={() => setActivated(true)}
-        className="group absolute inset-0 m-0 cursor-pointer overflow-hidden rounded-lg border border-ods-border bg-ods-card p-0"
+        className="group absolute inset-0 h-full overflow-hidden"
       >
         <picture>
           <source type="image/webp" srcSet={posterWebp} />
@@ -764,7 +766,7 @@ function YouTubeFacadeInner({
             className="transition-transform duration-200 group-hover:scale-110 group-hover:text-ods-accent"
           />
         </div>
-      </button>
+      </Button>
     </div>
   );
 }

package/src/components/features/walkthrough-video.tsx

@@ -1342,6 +1342,6 @@ export function InlineWalkthroughVideo(props: InlineWalkthroughVideoProps): Reac
  * The inline video's loading state: the shared skeleton in the card's own box. The inline card draws it itself
  * until its player mounts; a host whose video data is still loading draws it in the same slot.
  */
-export function InlineWalkthroughVideoSkeleton({ className }: { className?: string }): React.ReactElement {
+function InlineWalkthroughVideoSkeleton({ className }: { className?: string }): React.ReactElement {
   return <UnifiedSkeleton className={cn(INLINE_CARD_BOX_CLASS, className)} />;
 }

package/src/components/filter-chip.tsx

@@ -2,6 +2,7 @@
 
 import { X } from 'lucide-react';
 import { cn } from '../utils/cn';
+import { Button } from './ui/button';
 
 // Unified FilterChip component for consistent styling across the application
 interface FilterChipProps {
@@ -83,7 +84,9 @@ export function FilterChip({
         {label}
       </span>
       {removable && onRemove && (
-        <button
+        <Button
+          variant="transparent"
+          size="icon-inline"
           type="button"
           onClick={e => {
             e.preventDefault();
@@ -91,24 +94,11 @@ export function FilterChip({
             if (!disabled) onRemove();
           }}
           disabled={disabled}
-          className={cn(
-            'flex h-4 w-4 items-center justify-center rounded-full md:h-4 md:w-4',
-            'shrink-0 transition-all duration-200',
-            'focus:outline-none focus:ring-2 focus:ring-offset-1 group-hover:scale-110',
-            variant === 'category'
-              ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-              : variant === 'subcategory'
-                ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-                : variant === 'tag'
-                  ? 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface'
-                  : 'text-ods-text-primary hover:bg-ods-bg-hover focus:ring-ods-border-focus focus:ring-offset-ods-bg-surface',
-            disabled && 'cursor-not-allowed opacity-50 hover:scale-100',
-          )}
           aria-label={`Remove ${label} filter`}
           tabIndex={disabled ? -1 : 0}
         >
-          <X className="h-2 w-2 md:h-2 md:w-2" />
-        </button>
+          <X />
+        </Button>
       )}
     </div>
   );