@lateralus-ai/shipping-ui 1.4.15 → 2.0.0-dev.0

package/src/stories/canvases/figma-icons-layout.ts

@@ -0,0 +1,318 @@
+import type { ArrowDirection, ChevronDirection, IconSize } from "../../icons/types";
+import type { IconName } from "../../icons/Icon";
+
+/** Figma Icons > Content area — 710×1833, 24px padding inside dashed frames */
+export const FIGMA_ICONS_CONTENT = {
+  width: 710,
+  height: 1833,
+  padding: 24,
+} as const;
+
+/** Icon symbol frames start below cursor sections in Figma Content */
+export const FIGMA_ICONS_GRID_TOP = 297;
+export const FIGMA_ICONS_GRID_HEIGHT =
+  FIGMA_ICONS_CONTENT.height - FIGMA_ICONS_GRID_TOP;
+
+/** Browser SVG rendering vs Figma export — nudge icons to match baseline alignment */
+export const FIGMA_ICON_RENDER_OFFSET = { x: -1, y: -1 } as const;
+
+type IconSlot = {
+  kind: "icon";
+  name: IconName;
+  size: IconSize;
+  filled?: boolean;
+  variant?: string;
+  x: number;
+  y: number;
+};
+
+type ArrowSlot = {
+  kind: "arrow";
+  direction: ArrowDirection;
+  x: number;
+  y: number;
+};
+
+type ChevronSlot = {
+  kind: "chevron";
+  direction: ChevronDirection;
+  x: number;
+  y: number;
+};
+
+export type IconFrameSlot = IconSlot | ArrowSlot | ChevronSlot;
+
+export type IconFrameLayout = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  slots: IconFrameSlot[];
+};
+
+const L = (
+  name: IconName,
+  size: IconSize,
+  x: number,
+  y: number,
+  filled?: boolean,
+  variant?: string,
+): IconSlot => ({
+  kind: "icon",
+  name,
+  size,
+  filled,
+  variant,
+  x,
+  y,
+});
+
+const outlinePair = (name: IconName): IconSlot[] => [
+  L(name, "large", 24, 24),
+  L(name, "small", 72, 28),
+];
+
+const filledPair = (name: IconName): IconSlot[] => [
+  L(name, "large", 24, 24),
+  L(name, "large", 72, 24, true),
+  L(name, "small", 120, 28),
+  L(name, "small", 160, 28, true),
+];
+
+const smallOnly = (name: IconName): IconSlot[] => [L(name, "small", 24, 24)];
+
+const largeOnly = (name: IconName): IconSlot[] => [L(name, "large", 24, 24)];
+
+/**
+ * Icon frames in Figma document order (top-to-bottom, left-to-right).
+ * Cursors sections omitted per design spec.
+ */
+export const FIGMA_ICON_FRAMES: IconFrameLayout[] = [
+  {
+    x: 24,
+    y: 297,
+    width: 120,
+    height: 72,
+    slots: [
+      { kind: "arrow", direction: "left", x: 24, y: 24 },
+      { kind: "arrow", direction: "right", x: 72, y: 24 },
+    ],
+  },
+  { x: 168, y: 297, width: 112, height: 72, slots: outlinePair("attachment") },
+  {
+    x: 304,
+    y: 297,
+    width: 224,
+    height: 64,
+    slots: [
+      { kind: "chevron", direction: "right", x: 24, y: 24 },
+      { kind: "chevron", direction: "left", x: 64, y: 24 },
+      { kind: "chevron", direction: "down", x: 104, y: 24 },
+      { kind: "chevron", direction: "up", x: 144, y: 24 },
+      { kind: "chevron", direction: "upDown", x: 184, y: 24 },
+    ],
+  },
+  {
+    x: 24,
+    y: 393,
+    width: 272,
+    height: 72,
+    slots: [
+      L("clear", "large", 24, 24),
+      L("clear", "small", 72, 28),
+      L("clear", "xs", 112, 30),
+      L("clear", "large", 148, 24, true),
+      L("clear", "small", 196, 28, true),
+      L("clear", "xs", 236, 30, true),
+    ],
+  },
+  { x: 320, y: 393, width: 112, height: 72, slots: outlinePair("microphone") },
+  { x: 456, y: 393, width: 200, height: 72, slots: filledPair("add") },
+  { x: 24, y: 489, width: 112, height: 72, slots: outlinePair("plus") },
+  { x: 160, y: 489, width: 112, height: 72, slots: outlinePair("done") },
+  { x: 296, y: 489, width: 112, height: 72, slots: outlinePair("minus") },
+  { x: 432, y: 489, width: 200, height: 72, slots: filledPair("send") },
+  { x: 24, y: 585, width: 112, height: 72, slots: outlinePair("search") },
+  { x: 160, y: 585, width: 112, height: 72, slots: outlinePair("star") },
+  { x: 296, y: 585, width: 112, height: 72, slots: outlinePair("heart") },
+  { x: 432, y: 585, width: 112, height: 72, slots: outlinePair("analytics") },
+  { x: 568, y: 585, width: 112, height: 72, slots: outlinePair("trash") },
+  { x: 24, y: 681, width: 112, height: 72, slots: outlinePair("chat") },
+  { x: 160, y: 681, width: 112, height: 72, slots: outlinePair("chatPro") },
+  { x: 296, y: 681, width: 112, height: 72, slots: outlinePair("filters") },
+  { x: 432, y: 681, width: 112, height: 72, slots: outlinePair("pen") },
+  {
+    x: 24,
+    y: 777,
+    width: 148,
+    height: 72,
+    slots: [
+      L("tick", "large", 24, 24),
+      L("tick", "small", 72, 28),
+      L("tick", "xs", 112, 30),
+    ],
+  },
+  { x: 196, y: 777, width: 112, height: 72, slots: outlinePair("document") },
+  { x: 332, y: 777, width: 64, height: 64, slots: smallOnly("sparkles") },
+  { x: 420, y: 777, width: 64, height: 64, slots: smallOnly("expand") },
+  { x: 508, y: 777, width: 64, height: 64, slots: smallOnly("speaker") },
+  { x: 596, y: 777, width: 64, height: 64, slots: smallOnly("copy") },
+  { x: 24, y: 873, width: 64, height: 64, slots: smallOnly("date") },
+  { x: 112, y: 873, width: 64, height: 64, slots: smallOnly("refresh") },
+  { x: 200, y: 873, width: 112, height: 72, slots: outlinePair("activity") },
+  { x: 336, y: 873, width: 72, height: 72, slots: largeOnly("menu") },
+  { x: 432, y: 873, width: 112, height: 72, slots: outlinePair("invite") },
+  { x: 568, y: 873, width: 72, height: 72, slots: largeOnly("report") },
+  {
+    x: 24,
+    y: 969,
+    width: 104,
+    height: 64,
+    slots: [
+      L("sidebar", "small", 24, 24, undefined, "expanded"),
+      L("sidebar", "small", 64, 24, undefined, "collapsed"),
+    ],
+  },
+  { x: 152, y: 969, width: 112, height: 72, slots: outlinePair("download") },
+  { x: 288, y: 969, width: 112, height: 72, slots: outlinePair("upload") },
+  { x: 424, y: 969, width: 112, height: 72, slots: outlinePair("preview") },
+  { x: 560, y: 969, width: 112, height: 72, slots: outlinePair("fixes") },
+  { x: 24, y: 1065, width: 72, height: 72, slots: largeOnly("issues") },
+  { x: 120, y: 1065, width: 112, height: 72, slots: outlinePair("more") },
+  {
+    x: 256,
+    y: 1065,
+    width: 160,
+    height: 72,
+    slots: [
+      L("bulb", "large", 24, 24),
+      L("bulb", "large", 72, 24, true),
+      L("bulb", "small", 120, 28),
+    ],
+  },
+  {
+    x: 440,
+    y: 1065,
+    width: 200,
+    height: 72,
+    slots: [
+      L("ship", "large", 24, 24),
+      L("ship", "large", 72, 24, undefined, "smart"),
+      L("ship", "small", 120, 28),
+      L("ship", "small", 160, 28, undefined, "smart"),
+    ],
+  },
+  { x: 24, y: 1161, width: 112, height: 72, slots: outlinePair("person") },
+  { x: 160, y: 1161, width: 112, height: 72, slots: outlinePair("archive") },
+  { x: 296, y: 1161, width: 112, height: 72, slots: outlinePair("logOut") },
+  { x: 432, y: 1161, width: 112, height: 72, slots: outlinePair("settings") },
+  { x: 568, y: 1161, width: 112, height: 72, slots: outlinePair("tasks") },
+  {
+    x: 24,
+    y: 1257,
+    width: 216,
+    height: 72,
+    slots: [
+      L("workflow", "large", 24, 24, undefined, "preparation"),
+      L("workflow", "large", 72, 24, undefined, "response"),
+      L("workflow", "large", 120, 24, undefined, "technical"),
+      L("workflow", "large", 168, 24, undefined, "inspection"),
+    ],
+  },
+  {
+    x: 264,
+    y: 1257,
+    width: 168,
+    height: 72,
+    slots: [
+      L("form", "large", 24, 24, undefined, "risk"),
+      L("form", "large", 72, 24, undefined, "accident"),
+      L("form", "large", 120, 24, undefined, "rootCause"),
+    ],
+  },
+  { x: 456, y: 1257, width: 72, height: 72, slots: largeOnly("actions") },
+  {
+    x: 552,
+    y: 1257,
+    width: 120,
+    height: 72,
+    slots: [
+      L("approval", "large", 24, 24, undefined, "approved"),
+      L("approval", "large", 72, 24, undefined, "partly"),
+    ],
+  },
+  {
+    x: 24,
+    y: 1353,
+    width: 208,
+    height: 72,
+    slots: [
+      L("forms", "large", 24, 24, undefined, "pending"),
+      L("forms", "large", 72, 24, undefined, "reviewed"),
+      L("forms", "small", 120, 28, undefined, "reviewed"),
+      L("forms", "large", 160, 24, undefined, "completed"),
+    ],
+  },
+  { x: 256, y: 1353, width: 112, height: 72, slots: outlinePair("book") },
+  { x: 392, y: 1353, width: 112, height: 72, slots: outlinePair("workflow") },
+  { x: 528, y: 1353, width: 112, height: 72, slots: outlinePair("mention") },
+  { x: 24, y: 1449, width: 112, height: 72, slots: outlinePair("critical") },
+  { x: 160, y: 1449, width: 112, height: 72, slots: outlinePair("information") },
+  { x: 296, y: 1449, width: 72, height: 72, slots: largeOnly("caution") },
+  { x: 392, y: 1449, width: 112, height: 72, slots: outlinePair("folder") },
+  { x: 528, y: 1449, width: 112, height: 72, slots: outlinePair("folderStarred") },
+  { x: 24, y: 1545, width: 72, height: 72, slots: largeOnly("quality") },
+  { x: 120, y: 1545, width: 72, height: 72, slots: largeOnly("location") },
+  { x: 216, y: 1545, width: 112, height: 72, slots: outlinePair("users") },
+  { x: 352, y: 1545, width: 112, height: 72, slots: outlinePair("undo") },
+  { x: 488, y: 1545, width: 72, height: 72, slots: largeOnly("spinner") },
+  { x: 584, y: 1545, width: 72, height: 72, slots: largeOnly("clock") },
+  { x: 24, y: 1641, width: 72, height: 72, slots: largeOnly("gap") },
+  { x: 120, y: 1641, width: 112, height: 72, slots: outlinePair("defectReport") },
+  { x: 256, y: 1641, width: 112, height: 72, slots: outlinePair("task") },
+  {
+    x: 392,
+    y: 1641,
+    width: 216,
+    height: 72,
+    slots: [
+      L("file", "large", 24, 24, undefined, "csv"),
+      L("file", "large", 72, 24, undefined, "doc"),
+      L("file", "large", 120, 24, undefined, "pdf"),
+      L("file", "large", 168, 24, undefined, "xls"),
+    ],
+  },
+  {
+    x: 24,
+    y: 1737,
+    width: 120,
+    height: 72,
+    slots: [
+      L("reportActions", "large", 24, 24, undefined, "view"),
+      L("reportActions", "large", 72, 24, undefined, "edit"),
+    ],
+  },
+  {
+    x: 168,
+    y: 1737,
+    width: 264,
+    height: 72,
+    slots: [
+      L("checkbox", "large", 24, 24, undefined, "unselected"),
+      L("checkbox", "large", 72, 24, undefined, "unselectedHover"),
+      L("checkbox", "large", 120, 24, undefined, "selected"),
+      L("checkbox", "large", 168, 24, undefined, "multi"),
+      L("checkbox", "large", 216, 24, undefined, "selectedHover"),
+    ],
+  },
+  {
+    x: 456,
+    y: 1737,
+    width: 104,
+    height: 64,
+    slots: [
+      L("status", "small", 24, 24, undefined, "open"),
+      L("status", "small", 64, 24, undefined, "closed"),
+    ],
+  },
+];

package/src/stories/canvases/figma-sidebar-layout.ts

@@ -0,0 +1,212 @@
+import type { Chief } from "../../patterns/Sidebar/Switcher";
+
+/** Figma Sidebar subcomponents > Content (`12:1255`) */
+export const FIGMA_SIDEBAR_CONTENT = {
+  width: 400,
+  height: 2824,
+  padding: 24,
+} as const;
+
+export const FIGMA_SIDEBAR_PAGE_WIDTH = 464;
+/** Page Title height offset — used only when cropping page screenshots to Content in baseline script. */
+export const FIGMA_SIDEBAR_PAGE_TOP = 188;
+
+export type NewChatSlot = {
+  kind: "newChat";
+  state?: "idle" | "hover";
+  collapsed?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type IndicatorSlot = {
+  kind: "indicator";
+  chief: Chief;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarLinkSlot = {
+  kind: "sidebarLink";
+  state?: "idle" | "hover" | "active";
+  collapsed?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarHeadingSlot = {
+  kind: "sidebarHeading";
+  state?: "idle" | "hover";
+  collapsed?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarEntrySlot = {
+  kind: "sidebarEntry";
+  state?: "idle" | "hover" | "selected";
+  showMenu?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type ShipsSlot = {
+  kind: "ships";
+  expanded?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type ActivitySlot = {
+  kind: "activity";
+  chief: Chief;
+  empty?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type AccountSlot = {
+  kind: "account";
+  state?: "idle" | "hover";
+  collapsed?: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarSubcomponentSlot =
+  | NewChatSlot
+  | IndicatorSlot
+  | SidebarLinkSlot
+  | SidebarHeadingSlot
+  | SidebarEntrySlot
+  | ShipsSlot
+  | ActivitySlot
+  | AccountSlot;
+
+export type SidebarSubcomponentFrame = {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  slots: SidebarSubcomponentSlot[];
+};
+
+/** Slot positions are relative to each dashed frame — from Figma metadata `12:1255`. */
+export const FIGMA_SIDEBAR_FRAMES: SidebarSubcomponentFrame[] = [
+  {
+    name: "New chat",
+    x: 24,
+    y: 24,
+    width: 352,
+    height: 280,
+    slots: [
+      { kind: "newChat", state: "idle", collapsed: false, x: 24, y: 24, width: 304, height: 40 },
+      { kind: "newChat", state: "hover", collapsed: false, x: 24, y: 88, width: 304, height: 40 },
+      { kind: "newChat", state: "idle", collapsed: true, x: 24, y: 152, width: 40, height: 40 },
+      { kind: "newChat", state: "hover", collapsed: true, x: 24, y: 216, width: 40, height: 40 },
+    ],
+  },
+  {
+    name: "Indicator",
+    x: 24,
+    y: 328,
+    width: 120,
+    height: 72,
+    slots: [
+      { kind: "indicator", chief: "technical", x: 24, y: 24, width: 24, height: 24 },
+      { kind: "indicator", chief: "compliance", x: 72, y: 24, width: 24, height: 24 },
+    ],
+  },
+  {
+    name: "Section",
+    x: 24,
+    y: 424,
+    width: 352,
+    height: 372,
+    slots: [
+      { kind: "sidebarLink", state: "idle", collapsed: false, x: 24, y: 24, width: 304, height: 36 },
+      { kind: "sidebarLink", state: "hover", collapsed: false, x: 24, y: 84, width: 304, height: 36 },
+      { kind: "sidebarLink", state: "active", collapsed: false, x: 24, y: 144, width: 304, height: 36 },
+      { kind: "sidebarLink", state: "idle", collapsed: true, x: 24, y: 204, width: 32, height: 32 },
+      { kind: "sidebarLink", state: "hover", collapsed: true, x: 24, y: 260, width: 32, height: 32 },
+      { kind: "sidebarLink", state: "active", collapsed: true, x: 24, y: 316, width: 32, height: 32 },
+    ],
+  },
+  {
+    name: "Heading",
+    x: 24,
+    y: 820,
+    width: 352,
+    height: 232,
+    slots: [
+      { kind: "sidebarHeading", state: "idle", collapsed: true, x: 24, y: 24, width: 304, height: 28 },
+      { kind: "sidebarHeading", state: "idle", collapsed: false, x: 24, y: 76, width: 304, height: 28 },
+      { kind: "sidebarHeading", state: "hover", collapsed: true, x: 24, y: 128, width: 304, height: 28 },
+      { kind: "sidebarHeading", state: "hover", collapsed: false, x: 24, y: 180, width: 304, height: 28 },
+    ],
+  },
+  {
+    name: "Entry",
+    x: 24,
+    y: 1076,
+    width: 352,
+    height: 204,
+    slots: [
+      { kind: "sidebarEntry", state: "idle", x: 24, y: 24, width: 304, height: 36 },
+      { kind: "sidebarEntry", state: "hover", showMenu: true, x: 24, y: 84, width: 304, height: 36 },
+      { kind: "sidebarEntry", state: "selected", x: 24, y: 144, width: 304, height: 36 },
+    ],
+  },
+  {
+    name: "Ships",
+    x: 24,
+    y: 1304,
+    width: 312,
+    height: 312,
+    slots: [
+      { kind: "ships", expanded: false, x: 24, y: 24, width: 264, height: 40 },
+      { kind: "ships", expanded: true, x: 24, y: 88, width: 264, height: 200 },
+    ],
+  },
+  {
+    name: "Activity",
+    x: 24,
+    y: 1640,
+    width: 296,
+    height: 924,
+    slots: [
+      { kind: "activity", chief: "technical", empty: true, x: 24, y: 24, width: 248, height: 36 },
+      { kind: "activity", chief: "technical", empty: false, x: 24, y: 84, width: 248, height: 396 },
+      { kind: "activity", chief: "compliance", empty: false, x: 24, y: 504, width: 248, height: 396 },
+    ],
+  },
+  {
+    name: "Account",
+    x: 24,
+    y: 2588,
+    width: 352,
+    height: 212,
+    slots: [
+      { kind: "account", state: "idle", collapsed: false, x: 24, y: 24, width: 304, height: 36 },
+      { kind: "account", state: "idle", collapsed: true, x: 24, y: 84, width: 40, height: 40 },
+      { kind: "account", state: "hover", collapsed: true, x: 24, y: 148, width: 40, height: 40 },
+    ],
+  },
+];

package/src/stories/canvases/figma-sidebar-layouts-layout.ts

@@ -0,0 +1,84 @@
+import type { Chief } from "../../patterns/Sidebar/Switcher";
+
+/** Figma Sidebar Layouts > Content (`14:840`) */
+export const FIGMA_SIDEBAR_LAYOUTS_CONTENT = {
+  width: 1368,
+  height: 2464,
+} as const;
+
+export const FIGMA_SIDEBAR_LAYOUTS_PAGE_WIDTH = 1432;
+/** Page Title height offset — used only when cropping page screenshots to Content in baseline script. */
+export const FIGMA_SIDEBAR_LAYOUTS_PAGE_TOP = 188;
+
+export type SwitcherSlot = {
+  kind: "switcher";
+  chief: Chief;
+  expanded: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarLayoutSlot = {
+  kind: "sidebarLayout";
+  chief: Chief;
+  activity: boolean;
+  ships: boolean;
+  collapsed: boolean;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+export type SidebarLayoutsFrameSlot = SwitcherSlot | SidebarLayoutSlot;
+
+export type SidebarLayoutsFrame = {
+  name: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  slots: SidebarLayoutsFrameSlot[];
+};
+
+export const FIGMA_SIDEBAR_EXPANDED_WIDTH = 280;
+export const FIGMA_SIDEBAR_COLLAPSED_WIDTH = 56;
+export const FIGMA_SIDEBAR_LAYOUT_HEIGHT = 1024;
+
+/** Slot positions relative to each dashed frame — from Figma metadata `14:840`. */
+export const FIGMA_SIDEBAR_LAYOUTS_FRAMES: SidebarLayoutsFrame[] = [
+  {
+    name: "Switcher",
+    x: 24,
+    y: 24,
+    width: 296,
+    height: 272,
+    slots: [
+      { kind: "switcher", chief: "technical", expanded: true, x: 24, y: 24, width: 248, height: 44 },
+      { kind: "switcher", chief: "compliance", expanded: true, x: 24, y: 92, width: 248, height: 44 },
+      { kind: "switcher", chief: "technical", expanded: false, x: 24, y: 160, width: 40, height: 32 },
+      { kind: "switcher", chief: "compliance", expanded: false, x: 24, y: 216, width: 40, height: 32 },
+    ],
+  },
+  {
+    name: "Sidebar",
+    x: 24,
+    y: 320,
+    width: 1320,
+    height: 2120,
+    slots: [
+      { kind: "sidebarLayout", chief: "technical", activity: false, ships: false, collapsed: false, x: 24, y: 24, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "technical", activity: false, ships: false, collapsed: true, x: 328, y: 24, width: 56, height: 1024 },
+      { kind: "sidebarLayout", chief: "technical", activity: true, ships: false, collapsed: false, x: 408, y: 24, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "technical", activity: true, ships: true, collapsed: false, x: 712, y: 24, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "technical", activity: false, ships: true, collapsed: false, x: 1016, y: 24, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "compliance", activity: false, ships: false, collapsed: false, x: 24, y: 1072, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "compliance", activity: false, ships: false, collapsed: true, x: 328, y: 1072, width: 56, height: 1024 },
+      { kind: "sidebarLayout", chief: "compliance", activity: true, ships: false, collapsed: false, x: 408, y: 1072, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "compliance", activity: true, ships: true, collapsed: false, x: 712, y: 1072, width: 280, height: 1024 },
+      { kind: "sidebarLayout", chief: "compliance", activity: false, ships: true, collapsed: false, x: 1016, y: 1072, width: 280, height: 1024 },
+    ],
+  },
+];

package/src/stories/canvases/figma-widths.ts

@@ -0,0 +1,28 @@
+/** Figma frame widths — source of truth for Storybook canvas pages */
+export const FIGMA_WIDTHS = {
+  colors: 3060,
+  colorTokens: 1064,
+  typography: 1064,
+  buttonsMatrix: 808,
+  raiseLevels: 760,
+  buttons: 526,
+  icons: 774,
+  core: 732,
+  illustrations: 1152,
+  sidebar: 464,
+  sidebarLayouts: 1432,
+  chat: 1558,
+  ships: 1280,
+  content: 1280,
+  forms: 564,
+  report: 770,
+  modals: 1434,
+  skeletons: 512,
+  reportLayout: 960,
+  search: 848,
+  settings: 1076,
+  workflows: 1536,
+  domainForms: 1488,
+  filters: 1232,
+  library: 1288,
+} as const;