@flamingo-stack/openframe-frontend-core 0.0.777 → 0.0.781

package/dist/components/features/logs/logs-page-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logs-page-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-page-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,iBAAiB;IAChC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,MAAM,EACN,cAAc,EACd,UAAkB,EAClB,aAAa,GACd,EAAE,iBAAiB,+BAsCnB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,sFAAsF;AACtF,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,MAAc,EAAE,QAAgB,EAAE,EAAE,sBAAsB,+BAYtG"}
+{"version":3,"file":"logs-page-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-page-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAMhD,MAAM,WAAW,iBAAiB;IAChC,iEAAiE;IACjE,QAAQ,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6GAA6G;IAC7G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yCAAyC;IACzC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,UAAU,EACV,SAAS,EACT,MAAM,EACN,cAAc,EACd,UAAkB,EAClB,aAAa,GACd,EAAE,iBAAiB,+BAuCnB;AAED,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,sFAAsF;AACtF,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,MAAc,EAAE,QAAgB,EAAE,EAAE,sBAAsB,+BAYtG"}

package/dist/components/features/logs/logs-page-view.js

@@ -31,6 +31,7 @@ function LogsPageView({
       /* @__PURE__ */ jsx(
         Input,
         {
+          userValue: true,
           placeholder: "Search for Logs",
           value: search,
           onChange: (e) => onSearchChange(e.target.value),

package/dist/components/features/logs/logs-table-columns.d.ts

@@ -1,7 +1,6 @@
 /**
- * Column widths of the logs table. Data-only, read by the live table and by
- * `LogsTableSkeleton`, so the header row cannot drift from the rows it stands in
- * for and a width is changed in one place.
+ * Column widths of the logs table. Data-only, read by the table's columns (loaded and loading alike, the table
+ * draws its own skeleton rows), so a width is changed in one place.
  */
 export declare const LOG_COLUMN_WIDTHS: {
     readonly logId: "w-[200px]";

package/dist/components/features/logs/logs-table-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logs-table-columns.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-table-columns.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,iBAAiB;;;;;;IAQ5B,uBAAuB;;CAEf,CAAC"}
+{"version":3,"file":"logs-table-columns.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-table-columns.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;IAQ5B,uBAAuB;;CAEf,CAAC"}

package/dist/components/features/logs/logs-table-view.d.ts

@@ -46,21 +46,15 @@ export interface LogsTableViewProps<T extends UiLogEntry = UiLogEntry> {
     guideButton?: LogsTableGuideButton;
     /** Columns left out (a narrow rendering). */
     hiddenColumns?: readonly LogsTableColumnId[];
+    /**
+     * How many logs one request loads (the host's page size). The loading body draws that many skeleton rows and the
+     * load-more footer one more page of them. Default: the table's own defaults (`DataTable.Body` / `InfiniteFooter`).
+     */
+    pageSize?: number;
 }
 /**
  * The logs table: its columns, rows, filters, empty and loading states. The host
  * loads the rows and owns the filter, search and date state.
  */
-export declare function LogsTableView<T extends UiLogEntry = UiLogEntry>({ logs, loading, facets, filters, onFilterChange, search, dateFilter, logIdHeader, deviceScoped, organizationLocked, getLogHref, renderCopyAction, onQuickView, hasNextPage, isFetchingNextPage, onLoadMore, mobileFilterOpen, onMobileFilterClose, onHideSearchChange, renderEmptyState, guideButton, hiddenColumns, }: LogsTableViewProps<T>): import("react").JSX.Element;
-export interface LogsTableSkeletonProps {
-    /** The Log ID header in its inert form, so the icon does not arrive with the data. */
-    logIdHeader?: ReactNode;
-    /** The loading state announces itself ("Loading results"). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}
-/**
- * Loading fallback of the logs table: an empty `DataTable` with the table's own
- * columns, so the header row and the column widths match the loaded table.
- */
-export declare function LogsTableSkeleton({ logIdHeader, region }: LogsTableSkeletonProps): import("react").JSX.Element;
+export declare function LogsTableView<T extends UiLogEntry = UiLogEntry>({ logs, loading: loadingProp, facets, filters, onFilterChange, search, dateFilter, logIdHeader, deviceScoped, organizationLocked, getLogHref, renderCopyAction, onQuickView, hasNextPage, isFetchingNextPage, onLoadMore, mobileFilterOpen, onMobileFilterClose, onHideSearchChange, renderEmptyState, guideButton, hiddenColumns, pageSize, }: LogsTableViewProps<T>): import("react").JSX.Element;
 //# sourceMappingURL=logs-table-view.d.ts.map

package/dist/components/features/logs/logs-table-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"logs-table-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-table-view.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"logs-table-view.d.ts","sourceRoot":"","sources":["../../../../src/components/features/logs/logs-table-view.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAmB,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAC;AAwBzF,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK5D,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAenG,6FAA6F;AAC7F,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,WAAW,EAAE,aAAa,GAAG,YAAY,GAAG,aAAa,GAAG,eAAe,CAAC,CAAC;AAMrH;;;GAGG;AACH,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU;IACnE,qEAAqE;IACrE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,eAAe,GAAG,IAAI,CAAC;IAChC,gEAAgE;IAChE,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC;IAClC,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC5D,6EAA6E;IAC7E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kGAAkG;IAClG,UAAU,CAAC,EAAE,mBAAmB,CAAC;IACjC,gGAAgG;IAChG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,wDAAwD;IACxD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,uEAAuE;IACvE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,CAAC;IAChC,6DAA6D;IAC7D,gBAAgB,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IACzC,+BAA+B;IAC/B,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,wEAAwE;IACxE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,kFAAkF;IAClF,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,SAAS,CAAC;IACrD,WAAW,CAAC,EAAE,oBAAoB,CAAC;IACnC,6CAA6C;IAC7C,aAAa,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAC;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAyDD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,UAAU,GAAG,UAAU,EAAE,EAC/D,IAAI,EACJ,OAAO,EAAE,WAAmB,EAC5B,MAAM,EACN,OAAO,EACP,cAAc,EACd,MAAM,EACN,UAAU,EACV,WAAW,EACX,YAAoB,EACpB,kBAA0B,EAC1B,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,WAAmB,EACnB,kBAA0B,EAC1B,UAAiB,EACjB,gBAAwB,EACxB,mBAA0B,EAC1B,kBAAkB,EAClB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,QAAQ,GACT,EAAE,kBAAkB,CAAC,CAAC,CAAC,+BA2RvB"}

package/dist/components/features/logs/logs-table-view.js

@@ -13,8 +13,15 @@ import {
 } from "../../icons-v2-generated/index.js";
 import { ToolBadge } from "../../platform/ToolBadge.js";
 import { Button } from "../../ui/button/index.js";
-import { DataTable, multiSelectFilterFn, useDataTable } from "../../ui/data-table/index.js";
+import {
+  DataTable,
+  dataTableLoadingRows,
+  multiSelectFilterFn,
+  useDataTable
+} from "../../ui/data-table/index.js";
+import { DATA_TABLE_SKELETON_ROWS } from "../../ui/data-table/utils.js";
 import { FilterModal } from "../../ui/filter-modal.js";
+import { useLoadingScope } from "../../ui/loading-scope.js";
 import { NoData } from "../../ui/no-data/index.js";
 import { Tag } from "../../ui/tag.js";
 import { TruncateText } from "../../ui/truncate-text.js";
@@ -27,9 +34,45 @@ const EMPTY_TITLE = "No logs yet";
 const EMPTY_DESCRIPTION = "A timeline of every action taken across the platform (scripts run, policies applied, devices connected, tickets updated) will be displayed here.";
 const noop = () => {
 };
+const loadingLog = (id) => ({
+  id,
+  logId: "",
+  timestamp: "",
+  status: { label: "" },
+  source: { name: "", toolType: "" },
+  device: { name: "" },
+  description: { title: "" }
+});
+function LogSourceCell({ device }) {
+  const loading = useLoadingScope();
+  const { deviceName, organization } = logSourceLabels(device);
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[60px] flex-col justify-center gap-1 py-2", children: [
+    (deviceName || loading) && /* @__PURE__ */ jsx(TruncateText, { children: deviceName }),
+    (organization || loading) && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: organization ?? "" })
+  ] });
+}
+function LogRowButton({
+  onClick,
+  icon,
+  label
+}) {
+  const loading = useLoadingScope();
+  return /* @__PURE__ */ jsx("div", { "data-no-row-click": true, className: "pointer-events-auto flex items-center justify-end", children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      onClick: loading ? void 0 : onClick,
+      disabled: loading,
+      variant: "outline",
+      size: "icon",
+      leftIcon: icon,
+      "aria-label": label,
+      className: "bg-ods-card"
+    }
+  ) });
+}
 function LogsTableView({
   logs,
-  loading = false,
+  loading: loadingProp = false,
   facets,
   filters,
   onFilterChange,
@@ -49,8 +92,10 @@ function LogsTableView({
   onHideSearchChange,
   renderEmptyState,
   guideButton,
-  hiddenColumns
+  hiddenColumns,
+  pageSize
 }) {
+  const loading = useLoadingScope() || loadingProp;
   const columns = useMemo(() => {
     const multiSelect = multiSelectFor();
     const all = [
@@ -108,13 +153,7 @@ function LogsTableView({
       {
         accessorKey: "source",
         header: "SOURCE",
-        cell: ({ row }) => {
-          const { deviceName, organization } = logSourceLabels(row.original.device);
-          return /* @__PURE__ */ jsxs("div", { className: "flex min-h-[60px] flex-col justify-center gap-1 py-2", children: [
-            deviceName && /* @__PURE__ */ jsx(TruncateText, { children: deviceName }),
-            organization && /* @__PURE__ */ jsx(TruncateText, { variant: "h6", tone: "secondary", children: organization })
-          ] });
-        },
+        cell: ({ row }) => /* @__PURE__ */ jsx(LogSourceCell, { device: row.original.device }),
         enableSorting: false,
         filterFn: multiSelect,
         meta: {
@@ -138,33 +177,27 @@ function LogsTableView({
       },
       {
         id: "quickView",
-        cell: ({ row }) => /* @__PURE__ */ jsx("div", { "data-no-row-click": true, className: "pointer-events-auto flex items-center justify-end", children: /* @__PURE__ */ jsx(
-          Button,
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          LogRowButton,
           {
             onClick: () => onQuickView?.(row.original),
-            variant: "outline",
-            size: "icon",
-            leftIcon: /* @__PURE__ */ jsx(EyeIcon, { className: "h-5 w-5" }),
-            "aria-label": "Quick view",
-            className: "bg-ods-card"
+            icon: /* @__PURE__ */ jsx(EyeIcon, { className: "h-5 w-5" }),
+            label: "Quick view"
           }
-        ) }),
+        ),
         enableSorting: false,
         meta: { width: LOG_COLUMN_WIDTHS.action, align: "right" }
       },
       {
         id: "open",
-        cell: ({ row }) => /* @__PURE__ */ jsx("div", { "data-no-row-click": true, className: "pointer-events-auto flex items-center justify-end", children: /* @__PURE__ */ jsx(
-          Button,
+        cell: ({ row }) => /* @__PURE__ */ jsx(
+          LogRowButton,
           {
             onClick: getLogHref ? openInNewTab(getLogHref(row.original)) : void 0,
-            variant: "outline",
-            size: "icon",
-            leftIcon: /* @__PURE__ */ jsx(ArrowRightUpIcon, { className: "h-5 w-5" }),
-            "aria-label": "Open in new tab",
-            className: "bg-ods-card"
+            icon: /* @__PURE__ */ jsx(ArrowRightUpIcon, { className: "h-5 w-5" }),
+            label: "Open in new tab"
           }
-        ) }),
+        ),
         enableSorting: false,
         meta: { width: LOG_COLUMN_WIDTHS.action, hideAt: "md", align: "right" }
       }
@@ -196,8 +229,12 @@ function LogsTableView({
     },
     [columnFilters, onFilterChange]
   );
+  const loadingRows = useMemo(
+    () => loading ? dataTableLoadingRows(pageSize ?? DATA_TABLE_SKELETON_ROWS, (id) => loadingLog(id)) : null,
+    [loading, pageSize]
+  );
   const table = useDataTable({
-    data: logs,
+    data: loadingRows ?? logs,
     columns,
     getRowId: (row) => row.id,
     enableSorting: false,
@@ -230,12 +267,20 @@ function LogsTableView({
   }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(DataTable, { table, children: [
-      !(scopedEmpty && !hasQuery) && /* @__PURE__ */ jsx(DataTable.Header, { stickyHeader: true, stickyHeaderOffset: "top-[96px]", rightSlot: /* @__PURE__ */ jsx(DataTable.RowCount, {}) }),
+      !(scopedEmpty && !hasQuery) && /* @__PURE__ */ jsx(
+        DataTable.Header,
+        {
+          stickyHeader: true,
+          stickyHeaderOffset: "top-[96px]",
+          rightSlot: /* @__PURE__ */ jsx(DataTable.RowCount, { loading })
+        }
+      ),
       /* @__PURE__ */ jsx(
         DataTable.Body,
         {
           loading,
-          skeletonRows: 10,
+          loadingCells: true,
+          skeletonRows: pageSize,
           ...scoped ? {
             emptyState: {
               icon: /* @__PURE__ */ jsx(ClipboardListIcon, {}),
@@ -253,7 +298,7 @@ function LogsTableView({
           hasNextPage,
           isFetchingNextPage,
           onLoadMore,
-          skeletonRows: 2
+          skeletonRows: pageSize
         }
       )
     ] }),
@@ -278,74 +323,6 @@ function LogsTableView({
 function columnId(column) {
   return String(column.id ?? column.accessorKey ?? "");
 }
-const EMPTY_LOG_ROWS = [];
-const PENDING_FILTER = { options: [], pending: true };
-function LogsTableSkeleton({ logIdHeader, region = true }) {
-  const columns = useMemo(() => {
-    const multiSelect = multiSelectFor();
-    return [
-      {
-        id: "logId",
-        header: logIdHeader ? () => logIdHeader : "Log ID",
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.logId, alwaysShowHeader: true }
-      },
-      {
-        id: "status",
-        header: "Status",
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.status, filter: PENDING_FILTER }
-      },
-      {
-        id: "tool",
-        header: "Tool",
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.tool, hideAt: "md", filter: PENDING_FILTER }
-      },
-      {
-        id: "source",
-        header: "SOURCE",
-        enableSorting: false,
-        filterFn: multiSelect,
-        meta: { width: LOG_COLUMN_WIDTHS.source, hideAt: "md", filter: PENDING_FILTER }
-      },
-      {
-        id: "description",
-        header: "Log Details",
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.description, hideAt: "lg" }
-      },
-      {
-        id: "copy",
-        enableSorting: false,
-        meta: { width: `${LOG_COLUMN_WIDTHS.action} ml-auto`, align: "right" }
-      },
-      {
-        id: "quickView",
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.action, align: "right" }
-      },
-      {
-        id: "open",
-        enableSorting: false,
-        meta: { width: LOG_COLUMN_WIDTHS.action, hideAt: "md", align: "right" }
-      }
-    ];
-  }, [logIdHeader]);
-  const table = useDataTable({
-    data: EMPTY_LOG_ROWS,
-    columns,
-    getRowId: () => "",
-    enableSorting: false
-  });
-  return /* @__PURE__ */ jsxs(DataTable, { table, children: [
-    /* @__PURE__ */ jsx(DataTable.Header, { stickyHeader: true, stickyHeaderOffset: "top-[96px]" }),
-    /* @__PURE__ */ jsx(DataTable.Body, { loading: true, loadingRegion: region, skeletonRows: 10, emptyMessage: "", rowClassName: "mb-1" })
-  ] });
-}
 export {
-  LogsTableSkeleton,
   LogsTableView
 };

package/dist/components/features/model-token-rates.d.ts

@@ -107,11 +107,6 @@ export declare function ModelTokenRatesPopover({ children, triggerClassName, ...
 export declare function ModelTokenRatesUnavailable({ className }: {
     className?: string;
 }): import("react").JSX.Element;
-/** The table's loading footprint: the provider tabs, the header and rows of the boxes the loaded rows use. */
-export declare function ModelTokenRatesSkeleton({ region, }?: {
-    /** The loading state announces itself (`LoadingRegion`). `false` inside another loading region. Default `true`. */
-    region?: boolean;
-}): import("react").JSX.Element;
 export interface ModelTokenExchangeProps {
     /** The model whose rate is shown: the one picked, once the host has read it. */
     rate?: ModelTokenRate | null;

package/dist/components/features/model-token-rates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"model-token-rates.d.ts","sourceRoot":"","sources":["../../../src/components/features/model-token-rates.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"model-token-rates.d.ts","sourceRoot":"","sources":["../../../src/components/features/model-token-rates.tsx"],"names":[],"mappings":"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"}

package/dist/components/features/model-token-rates.js

@@ -22,7 +22,8 @@ import { TextLineSkeleton, UnifiedSkeleton } from "../loading/unified-skeleton.j
 import { Autocomplete } from "../ui/autocomplete.js";
 import { Button } from "../ui/button/index.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
-import { useLoadingScope } from "../ui/loading-scope.js";
+import { Label } from "../ui/label.js";
+import { LoadingItems, useLoadingScope } from "../ui/loading-scope.js";
 import { Slider } from "../ui/slider.js";
 import { TabSelector } from "../ui/tab-selector.js";
 import { PushButtonSelector } from "./push-button-selector.js";
@@ -146,15 +147,14 @@ function ModelTokenRatesPopover({
 }) {
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "button",
+      Button,
       {
+        variant: "transparent",
+        size: "icon-sm",
         type: "button",
         "aria-label": MODEL_TOKEN_RATES_COPY.trigger,
-        className: cn(
-          "shrink-0 text-ods-text-secondary transition-colors hover:text-ods-text-primary",
-          triggerClassName
-        ),
-        children: /* @__PURE__ */ jsx(QuestionCircleIcon, { className: "size-6" })
+        className: cn("shrink-0", triggerClassName),
+        children: /* @__PURE__ */ jsx(QuestionCircleIcon, {})
       }
     ) }),
     /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 8, className: "border-0 bg-transparent p-0 shadow-none", children: children ?? /* @__PURE__ */ jsx(ModelTokenRates, { ...panel }) })
@@ -190,7 +190,7 @@ function ModelTokenRatesTable({ rates }) {
         /* @__PURE__ */ jsx("span", { role: "columnheader", className: NUMBER_CELL, children: MODEL_TOKEN_RATES_COPY.input }),
         /* @__PURE__ */ jsx("span", { role: "columnheader", className: NUMBER_CELL, children: MODEL_TOKEN_RATES_COPY.output })
       ] }),
-      /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "min-h-0 flex-1 overflow-y-auto", children: group.rates.map((rate) => /* @__PURE__ */ jsxs("div", { role: "row", className: BODY_ROW_CLASS, children: [
+      /* @__PURE__ */ jsx("div", { role: "rowgroup", className: "min-h-0 flex-1 overflow-y-auto", children: group.rates.map((rate) => /* @__PURE__ */ jsxs("div", { "data-loading-item": true, role: "row", className: BODY_ROW_CLASS, children: [
         /* @__PURE__ */ jsx("span", { role: "rowheader", className: "min-w-0 flex-1 truncate", children: rate.displayName || rate.modelName }),
         /* @__PURE__ */ jsx("span", { role: "cell", className: NUMBER_CELL, children: formatTokenRate(rate.inputTokenRate) }),
         /* @__PURE__ */ jsx("span", { role: "cell", className: NUMBER_CELL, children: formatTokenRate(rate.outputTokenRate) })
@@ -226,14 +226,11 @@ function ModelTokenRatesSkeleton({
       /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: MODEL_TOKEN_RATES_COPY.input }),
       /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: MODEL_TOKEN_RATES_COPY.output })
     ] }),
-    Array.from({ length: TABLE_SKELETON_ROWS }, (_, index) => (
-      // biome-ignore lint/suspicious/noArrayIndexKey: identical placeholder rows
-      /* @__PURE__ */ jsxs("div", { className: BODY_ROW_CLASS, children: [
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-36 max-w-full" }) }),
-        /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "ml-auto w-12" }) }),
-        /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "ml-auto w-12" }) })
-      ] }, index)
-    ))
+    /* @__PURE__ */ jsx(LoadingItems, { count: TABLE_SKELETON_ROWS, children: () => /* @__PURE__ */ jsxs("div", { "data-loading-item": true, className: BODY_ROW_CLASS, children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-36 max-w-full" }) }),
+      /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "ml-auto w-12" }) }),
+      /* @__PURE__ */ jsx("span", { className: NUMBER_CELL, children: /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "ml-auto w-12" }) })
+    ] }) })
   ] });
 }
 const MODEL_TOKEN_EXCHANGE_BALANCE = 1e6;
@@ -262,15 +259,16 @@ function ExchangeFigure({
   loading,
   size = "hero"
 }) {
+  const drawLoading = useLoadingScope() || loading;
   return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
     /* @__PURE__ */ jsx(
       "span",
       {
         className: cn("whitespace-nowrap tabular-nums text-ods-text-primary", size === "hero" ? "text-h1" : "text-h2"),
-        children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" }) : figure
+        children: drawLoading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-20" }) : figure
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "min-h-[2lh] text-ods-text-secondary text-h4", children: loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-full max-w-xs" }) : words })
+    /* @__PURE__ */ jsx("span", { className: "min-h-[2lh] text-ods-text-secondary text-h4", children: drawLoading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "inherit", as: "span", className: "w-full max-w-xs" }) : words })
   ] });
 }
 function ModelTokenExchange({
@@ -308,8 +306,9 @@ function ModelTokenExchange({
       /* @__PURE__ */ jsx(ExchangeFigure, { figure: balancePrice ?? tokens, words: balancePrice ? copy.buy.words(tokens) : copy.buy.unit }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--spacing-system-sf)]", children: [
         /* @__PURE__ */ jsxs(
-          "label",
+          Label,
           {
+            variant: "surface",
             htmlFor: sliderId,
             className: "flex items-baseline justify-between gap-[var(--spacing-system-sf)] text-ods-text-secondary text-h4",
             children: [
@@ -435,6 +434,5 @@ export {
   ModelTokenExchange,
   ModelTokenRates,
   ModelTokenRatesPopover,
-  ModelTokenRatesSkeleton,
   ModelTokenRatesUnavailable
 };

package/dist/components/features/notifications/index.d.ts

@@ -2,8 +2,8 @@ export { NotificationsProvider, useNotifications, useOptionalNotifications } fro
 export type { NotificationsProviderProps, NotificationsActions } from './notifications-context';
 export { NotificationDrawer } from './notification-drawer';
 export type { NotificationDrawerProps } from './notification-drawer';
-export { NotificationTile, NotificationTileSkeleton } from './notification-tile';
-export type { NotificationTileProps, NotificationTileSkeletonProps } from './notification-tile';
+export { NotificationTile } from './notification-tile';
+export type { NotificationTileProps } from './notification-tile';
 export { NotificationPopups } from './notification-popups';
 export type { NotificationPopupsProps, NotificationPopupsPosition } from './notification-popups';
 export { ApprovalRequestNotificationTile } from './approval-request-notification-tile';

package/dist/components/features/notifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC5G,YAAY,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AACjF,YAAY,EAAE,qBAAqB,EAAE,6BAA6B,EAAE,MAAM,qBAAqB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,YAAY,EAAE,oCAAoC,EAAE,MAAM,sCAAsC,CAAC;AACjG,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,0BAA0B,EAC1B,2BAA2B,EAC3B,kBAAkB,EAClB,4BAA4B,GAC7B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AAC5G,YAAY,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAChG,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,YAAY,EAAE,uBAAuB,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,+BAA+B,EAAE,MAAM,sCAAsC,CAAC;AACvF,YAAY,EAAE,oCAAoC,EAAE,MAAM,sCAAsC,CAAC;AACjG,OAAO,EACL,uBAAuB,EACvB,eAAe,EACf,sBAAsB,EACtB,0BAA0B,EAC1B,2BAA2B,EAC3B,kBAAkB,EAClB,4BAA4B,GAC7B,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,oBAAoB,EACpB,wBAAwB,EACxB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,SAAS,CAAC"}

package/dist/components/features/notifications/index.js

@@ -1,6 +1,6 @@
 import { NotificationsProvider, useNotifications, useOptionalNotifications } from "./notifications-context.js";
 import { NotificationDrawer } from "./notification-drawer.js";
-import { NotificationTile, NotificationTileSkeleton } from "./notification-tile.js";
+import { NotificationTile } from "./notification-tile.js";
 import { NotificationPopups } from "./notification-popups.js";
 import { ApprovalRequestNotificationTile } from "./approval-request-notification-tile.js";
 import {
@@ -18,7 +18,6 @@ export {
   NotificationDrawer,
   NotificationPopups,
   NotificationTile,
-  NotificationTileSkeleton,
   NotificationsProvider,
   TICKET_APPROVAL_REQUEST_TYPE,
   approvalMetaToBatchData,

package/dist/components/features/notifications/notification-drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/notification-drawer.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAgB,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,cAAc,EACd,kBAA4B,EAC5B,UAAU,EAAE,cAAc,GAC3B,EAAE,uBAAuB,sCA0HzB"}
+{"version":3,"file":"notification-drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/notification-drawer.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAgB,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEpE,MAAM,WAAW,uBAAuB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,cAAc,EACd,kBAA4B,EAC5B,UAAU,EAAE,cAAc,GAC3B,EAAE,uBAAuB,sCA6HzB"}

package/dist/components/features/notifications/notification-drawer.js

@@ -9,7 +9,7 @@ import { LoadingRegion } from "../../loading/loading-region.js";
 import { UnifiedSkeleton } from "../../loading/unified-skeleton.js";
 import { useAppLayoutDrawerContainer } from "../../navigation/app-layout-context.js";
 import { AppLayoutDrawer, AppLayoutDrawerContent } from "../../navigation/app-layout-drawer.js";
-import { SplitButton } from "../../ui/button/index.js";
+import { Button, SplitButton } from "../../ui/button/index.js";
 import { Drawer, DrawerContent, DrawerTitle } from "../../ui/drawer.js";
 import { Switch } from "../../ui/switch.js";
 import { NotificationTile } from "./notification-tile.js";
@@ -53,12 +53,15 @@ function NotificationDrawer({
         hideClose: true,
         className: "truncate",
         actions: /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            variant: "link",
+            size: "compact",
+            noPaddingX: true,
             type: "button",
             disabled: unreadCount === 0,
             onClick: markAllRead,
-            className: "self-center text-ods-text-secondary underline transition-colors text-h6 hover:text-ods-text-primary disabled:opacity-40 max-md:focus:outline-none max-md:focus-visible:outline-none",
+            className: "self-center",
             children: "Mark All Complete"
           }
         ),

package/dist/components/features/notifications/notification-tile.d.ts

@@ -1,9 +1,7 @@
 import { type ReactNode } from 'react';
 import type { Notification } from './types';
-export interface NotificationTileProps {
-    notification: Notification;
+interface NotificationTileOptions {
     liveDurationMs?: number;
-    onComplete: (id: string) => void;
     onSettle?: (id: string) => void;
     className?: string;
     /** Action row rendered below the body inside the padded section (e.g. approval buttons). */
@@ -35,8 +33,26 @@ export interface NotificationTileProps {
      * on screen: its notifications have just arrived for as long as it plays.
      */
     timeLabel?: string;
+    /** The loading form's description lines (default two). */
+    descriptionLines?: number;
 }
-export declare function NotificationTile({ notification, liveDurationMs, onComplete, onSettle, className, actions, children, paused, titleLines, presentation, timeLabel, }: NotificationTileProps): import("react").JSX.Element;
+/**
+ * The notification and what dismisses it, or `loading` while the host reads it: the tile then draws its own loading
+ * form, as it does in a loading scope (an approval tile, one given `actions`, draws its button row too).
+ */
+export type NotificationTileProps = NotificationTileOptions & ({
+    notification: Notification;
+    onComplete: (id: string) => void;
+    loading?: boolean;
+} | {
+    loading: true;
+    notification?: undefined;
+    onComplete?: undefined;
+    /** `approval`: the loading form draws the approval button row. Default: `approval` when `actions` is given. */
+    variant?: 'default' | 'approval';
+});
+/** A notification as a tile; ONE switch: in a loading scope (or `loading`) its own loading form. */
+export declare function NotificationTile(props: NotificationTileProps): import("react").JSX.Element;
 /**
  * The two buttons on a lock-screen approval tile: compact and their own width. Stretched to fill the tile they
  * dwarfed the notification wherever the tile is wide (a phone-width page shows it at the full content width). Shared
@@ -50,20 +66,5 @@ export declare const LOCKSCREEN_APPROVAL_BUTTON_CLASS = "h-9 min-w-24";
 export declare const APPROVAL_BUTTON_CLASS = "w-20";
 /** The card approval tile's trailing toggle (the command section's chevron). Shared by the tile and its skeleton. */
 export declare const APPROVAL_TOGGLE_BUTTON_CLASS = "ml-auto w-6 shrink-0 px-0 md:w-8";
-export interface NotificationTileSkeletonProps {
-    /** `approval`: the approval tile, which adds a row of small buttons under the body. */
-    variant?: 'default' | 'approval';
-    /** The tile's `presentation`: a lock screen has no trailing control and its approval buttons are compact. */
-    presentation?: 'card' | 'lockscreen';
-    /** The lines the description takes (2 by default: a host that rotates tiles in one cell is as tall as its tallest tile). */
-    descriptionLines?: number;
-    className?: string;
-}
-/**
- * A tile while its notification is read, box for box: the tile's frame and pad, the header (icon, type, time, and on
- * a card the trailing control), a one-line title over the description's lines, and for `approval` the button row.
- * Each text row is its text's own line box (`TextLineSkeleton` at the tile's type steps), so the skeleton is the
- * loaded tile's height at every breakpoint.
- */
-export declare function NotificationTileSkeleton({ variant, presentation, descriptionLines, className, }: NotificationTileSkeletonProps): import("react").JSX.Element;
+export {};
 //# sourceMappingURL=notification-tile.d.ts.map

package/dist/components/features/notifications/notification-tile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notification-tile.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/notification-tile.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,YAAY,EAA6C,MAAM,SAAS,CAAC;AAsCvF,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uGAAuG;IACvG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,YAAY,EACZ,cAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAc,EACd,UAAc,EACd,YAAqB,EACrB,SAAS,GACV,EAAE,qBAAqB,+BAiLvB;AAED;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,iBAAiB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,SAAS,CAAC;AAE5C,qHAAqH;AACrH,eAAO,MAAM,4BAA4B,qCAAqC,CAAC;AAE/E,MAAM,WAAW,6BAA6B;IAC5C,uFAAuF;IACvF,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,6GAA6G;IAC7G,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC,4HAA4H;IAC5H,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD;;;;;GAKG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,OAAmB,EACnB,YAAqB,EACrB,gBAAoB,EACpB,SAAS,GACV,EAAE,6BAA6B,+BAsC/B"}
+{"version":3,"file":"notification-tile.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/notification-tile.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAW5D,OAAO,KAAK,EAAE,YAAY,EAA6C,MAAM,SAAS,CAAC;AAsCvF,UAAU,uBAAuB;IAC/B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4FAA4F;IAC5F,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,uGAAuG;IACvG,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACrC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG,uBAAuB,GACzD,CACI;IAAE,YAAY,EAAE,YAAY,CAAC;IAAC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,GACnF;IACE,OAAO,EAAE,IAAI,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;CAClC,CACJ,CAAC;AAOJ,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,+BAa5D;AAmMD;;;;GAIG;AACH,eAAO,MAAM,gCAAgC,iBAAiB,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,qBAAqB,SAAS,CAAC;AAE5C,qHAAqH;AACrH,eAAO,MAAM,4BAA4B,qCAAqC,CAAC"}