npm - agentic-ds-kit - Versions diffs - 0.2.1 → 0.2.2 - Mend

agentic-ds-kit 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md +10 -0
package/contracts/scoreboard.json +2 -2
package/contracts/section.json +9 -5
package/dist/ui/Scoreboard/Scoreboard.kit.css +19 -17
package/dist/ui/Scoreboard/Scoreboard.module.js +4 -4
package/dist/ui/Scoreboard/Scoreboard.module.js.map +1 -1
package/dist/ui/Section/Section.kit.css +27 -20
package/dist/ui/Section/Section.module.js +10 -10
package/dist/ui/Section/Section.module.js.map +1 -1
package/dist/ui/patterns/ActivityPattern/ActivityPattern.js +0 -1
package/dist/ui/patterns/ActivityPattern/ActivityPattern.js.map +1 -1
package/dist/ui/patterns/DashboardPattern/DashboardPattern.js +0 -1
package/dist/ui/patterns/DashboardPattern/DashboardPattern.js.map +1 -1
package/dist/ui/patterns/InboxPattern/InboxPattern.js +0 -1
package/dist/ui/patterns/InboxPattern/InboxPattern.js.map +1 -1
package/dist/ui/shared/ChartFrame.js +1 -1
package/dist/ui/shared/ChartFrame.js.map +1 -1
package/dist/ui/shared/ChartFrame.kit.css +55 -41
package/dist/ui/shared/ChartFrame.module.js +33 -32
package/dist/ui/shared/ChartFrame.module.js.map +1 -1
package/package.json +1 -1

package/README.md CHANGED Viewed

@@ -35,3 +35,13 @@ Contracts live in the package: `agentic-ds-kit/contracts/index.json`. Copy `AGEN
 ```bash
 npm run generate:tokens -w agentic-ds-kit
 ```
+Components consume **semantic** variables (`--surface-page`, `--action-primary`, `--radius-control-md`). Primitive `--color-*` ramps are the source scale only.
+## Theming
+Override semantic tokens in your CSS after tokens load. Do not rewrite component classes.
+- Light is `:root`. Dark is `[data-theme="dark"]` on `html` (not a `.dark` class).
+- Brand overlays: omit `data-color` for blue, or set `data-color="violet"` / `data-color="teal"`.
+- For another hue, reassign brand, action, and focus roles to primitive ramps — not hex in React.

package/contracts/scoreboard.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "id": "scoreboard",
   "status": "stable",
-  "intent": "Metrics strip of kit Scorecards. Two to four fill the row. More than four compose Carousel.",
+  "intent": "Metrics strip of kit Scorecards. Two to four fill the row; four stay in one row until the strip narrows. More than four compose Carousel.",
   "useWhen": [
     "Showing two or more KPIs side by side at the top of a dashboard",
     "Replacing ad-hoc flex rows of metric boxes"
@@ -20,7 +20,7 @@
       "itemContract": "scorecard",
       "required": true,
       "minItems": 2,
-      "note": "2\u20134 fill equal columns. More than 4 pages four-up in kit Carousel."
+      "note": "2\u20134 fill equal columns. Four stay four-up until the strip narrows. More than 4 pages four-up in kit Carousel."
     }
   },
   "tokens": [

package/contracts/section.json CHANGED Viewed

@@ -1,14 +1,14 @@
 {
   "id": "section",
   "status": "stable",
-  "intent": "Grouped page block with optional heading, description, and actions. Collapsible, chevron before the title.",
+  "intent": "Grouped page block with optional heading, description, and actions on one surface. Pass collapsible false to keep the body always open.",
   "useWhen": [
     "Separating metrics, tables, or form groups on a page",
     "Under PageHeader to structure dashboard or settings content"
   ],
   "doNotUseWhen": [
     "Whole page title \u2014 use PageHeader",
-    "Framed tiles \u2014 use Card",
+    "Compact tiles with image or footer \u2014 use Card",
     "Form legends and grouped fields \u2014 use FieldSet",
     "Modal body layout \u2014 keep content minimal inside Modal",
     "App-wide navigation \u2014 use AppNav",
@@ -45,7 +45,7 @@
     "collapsible": {
       "type": "boolean",
       "default": true,
-      "note": "When title is set, a chevron sits before the title and toggles the body. False keeps the body always open."
+      "note": "Default true: chevron before the title toggles the body. False is always open, no chevron. Requires title."
     },
     "defaultOpen": {
       "type": "boolean",
@@ -63,6 +63,10 @@
     }
   },
   "tokens": [
+    "surface.card",
+    "border.faint",
+    "radius.surface.md",
+    "shadow.sm",
     "text.primary",
     "text.secondary",
     "type.size.heading",
@@ -86,12 +90,12 @@
   "doNot": [
     "Do not invent a local Section or SectionHeader",
     "Do not use raw hex",
-    "Do not frame Section \u2014 that is Card",
+    "Do not use Section as a compact marketing tile \u2014 that is Card",
     "Do not use Section as the page title \u2014 that is PageHeader",
     "Do not embed one-off metric flex rows \u2014 use Scoreboard",
     "Actions must be kit Buttons",
     "Do not compose Accordion or Collapsible for page sections \u2014 Section owns collapse"
   ],
-  "snippet": "<Section title=\"Recent activity\" description=\"Last 30 days\" actions={<Button variant=\"secondary\" size=\"sm\">View all</Button>}><Table ... /></Section>",
+  "snippet": "<Section title=\"Recent activity\" description=\"Last 30 days\" collapsible={false}><Table ... /></Section>",
   "contains": []
 }

package/dist/ui/Scoreboard/Scoreboard.kit.css CHANGED Viewed

@@ -1,11 +1,11 @@
-._scoreboard_v3qsg_1 {
+._scoreboard_jqkyj_1 {
   width: 100%;
   min-width: 0;
   container-type: inline-size;
   container-name: scoreboard;
 }
-._grid_v3qsg_8 {
+._grid_jqkyj_8 {
   display: grid;
   gap: var(--space-4);
   width: 100%;
@@ -13,39 +13,41 @@
   align-items: stretch;
 }
-._count1_v3qsg_16 {
+._count1_jqkyj_16 {
   grid-template-columns: minmax(0, 1fr);
 }
-._count2_v3qsg_20,
-._count4_v3qsg_21 {
+._count2_jqkyj_20 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-._count3_v3qsg_25 {
+._count3_jqkyj_24 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-@container scoreboard (max-width: calc(2 * var(--layout-metrics-min) + var(--space-4))) {
-  ._count2_v3qsg_20,
-  ._count4_v3qsg_21 {
-    grid-template-columns: minmax(0, 1fr);
-  }
+._count4_jqkyj_28 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-@container scoreboard (max-width: calc(3 * var(--layout-metrics-min) + 2 * var(--space-4))) {
-  ._count3_v3qsg_25 {
+/* Collapse as the strip narrows. Lengths match tokens: metrics-min 12rem, space-4 1rem. Container queries cannot use calc(var()). */
+@container scoreboard (max-width: 38rem) {
+  ._count3_jqkyj_24 {
     grid-template-columns: minmax(0, 1fr);
   }
+  ._count4_jqkyj_28 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
-@container scoreboard (min-width: calc(4 * var(--layout-metrics-min) + 3 * var(--space-4))) {
-  ._count4_v3qsg_21 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
+@container scoreboard (max-width: 25rem) {
+  ._count2_jqkyj_20,
+  ._count4_jqkyj_28 {
+    grid-template-columns: minmax(0, 1fr);
   }
 }
-._overflow_v3qsg_48 {
+._overflow_jqkyj_50 {
   width: 100%;
   min-width: 0;
   padding-inline: var(--space-12);

package/dist/ui/Scoreboard/Scoreboard.module.js CHANGED Viewed

@@ -1,15 +1,15 @@
 import "./Scoreboard.kit.css";
 //#region ui/Scoreboard/Scoreboard.module.css
-var e = "_scoreboard_v3qsg_1", t = "_grid_v3qsg_8", n = "_count1_v3qsg_16", r = "_count2_v3qsg_20", i = "_count4_v3qsg_21", a = "_count3_v3qsg_25", o = "_overflow_v3qsg_48", s = {
+var e = "_scoreboard_jqkyj_1", t = "_grid_jqkyj_8", n = "_count1_jqkyj_16", r = "_count2_jqkyj_20", i = "_count3_jqkyj_24", a = "_count4_jqkyj_28", o = "_overflow_jqkyj_50", s = {
 	scoreboard: e,
 	grid: t,
 	count1: n,
 	count2: r,
-	count4: i,
-	count3: a,
+	count3: i,
+	count4: a,
 	overflow: o
 };
 //#endregion
-export { n as count1, r as count2, a as count3, i as count4, s as default, t as grid, o as overflow, e as scoreboard };
+export { n as count1, r as count2, i as count3, a as count4, s as default, t as grid, o as overflow, e as scoreboard };
 //# sourceMappingURL=Scoreboard.module.js.map

package/dist/ui/Scoreboard/Scoreboard.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Scoreboard.module.js","names":[],"sources":["../../../ui/Scoreboard/Scoreboard.module.css"],"sourcesContent":[".scoreboard {\n width: 100%;\n min-width: 0;\n container-type: inline-size;\n container-name: scoreboard;\n}\n\n.grid {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n min-width: 0;\n align-items: stretch;\n}\n\n.count1 {\n grid-template-columns: minmax(0, 1fr);\n}\n\n.count2~~,\n.count4~~ {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.count3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n~~@container~~ ~~scoreboard (max~~-~~width~~: ~~calc~~(2 * ~~var(--layout-~~metrics-min) + ~~var(--~~space-4))) {\n .~~count2,\n .count4~~ {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n~~\n@container scoreboard (max-width: calc(3 * var(--layout-metrics-min) + 2 * var(--space-4))) {\n~~ .~~count3~~ {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n@container scoreboard (~~min~~-width: ~~calc(4 * var(--layout-metrics-min~~) ~~+ 3 * var(--space-4)))~~ {\n .count4 {\n grid-template-columns: ~~repeat(4,~~ minmax(0, 1fr));\n }\n}\n\n.overflow {\n width: 100%;\n min-width: 0;\n padding-inline: var(--space-12);\n box-sizing: border-box;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Scoreboard.module.js","names":[],"sources":["../../../ui/Scoreboard/Scoreboard.module.css"],"sourcesContent":[".scoreboard {\n width: 100%;\n min-width: 0;\n container-type: inline-size;\n container-name: scoreboard;\n}\n\n.grid {\n display: grid;\n gap: var(--space-4);\n width: 100%;\n min-width: 0;\n align-items: stretch;\n}\n\n.count1 {\n grid-template-columns: minmax(0, 1fr);\n}\n\n.count2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n.count3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n}\n\n.count4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n}\n\n/* Collapse as the strip narrows. Lengths match tokens: metrics-min 12rem, space-4 1rem. Container queries cannot use calc(var()). */\n@container scoreboard (max-width: 38rem) {\n .count3 {\n grid-template-columns: minmax(0, 1fr);\n }\n\n .count4 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n\n@container scoreboard (max-width: 25rem) {\n .count2,\n .count4 {\n grid-template-columns: minmax(0, 1fr);\n }\n}\n\n.overflow {\n width: 100%;\n min-width: 0;\n padding-inline: var(--space-12);\n box-sizing: border-box;\n}\n"],"mappings":""}

package/dist/ui/Section/Section.kit.css CHANGED Viewed

@@ -1,48 +1,55 @@
-._section_16lix_1 {
+._section_roa75_1 {
   --section-space: var(--space-section-md);
-  --section-header-gap: var(--space-stack-sm);
+  --section-header-gap: var(--space-stack-md);
+  --section-inset: var(--space-6);
+  display: grid;
+  gap: var(--section-header-gap);
   width: 100%;
   min-width: 0;
   margin: 0 0 var(--section-space);
+  padding: var(--section-inset);
+  box-sizing: border-box;
+  background: var(--surface-card);
+  border: var(--border-width-thin) solid var(--border-faint);
+  border-radius: var(--radius-surface-md);
+  box-shadow: var(--shadow-sm);
 }
-._sm_16lix_9 {
+._sm_roa75_18 {
   --section-space: var(--space-section-sm);
   --section-header-gap: var(--space-stack-sm);
+  --section-inset: var(--space-4);
 }
-._md_16lix_14 {
+._md_roa75_24 {
   --section-space: var(--space-section-md);
   --section-header-gap: var(--space-stack-md);
+  --section-inset: var(--space-6);
 }
-._lg_16lix_19 {
+._lg_roa75_30 {
   --section-space: var(--space-section-lg);
   --section-header-gap: var(--space-stack-lg);
+  --section-inset: var(--space-8);
 }
-._header_16lix_24 {
+._header_roa75_36 {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--space-inline-sm) var(--space-inline-lg);
   margin: 0;
-  padding-bottom: var(--section-header-gap);
-}
-._collapsible_16lix_34:has(> ._body_16lix_34[hidden]) ._header_16lix_24 {
-  padding-bottom: 0;
 }
-._heading_16lix_38 {
+._heading_roa75_45 {
   display: grid;
   gap: var(--space-stack-xs);
   min-width: 0;
   flex: 1;
 }
-._title_16lix_45 {
+._title_roa75_52 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-heading);
@@ -51,7 +58,7 @@
   color: var(--text-primary);
 }
-._trigger_16lix_54 {
+._trigger_roa75_61 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
@@ -66,22 +73,22 @@
   cursor: pointer;
 }
-._trigger_16lix_54:focus-visible {
+._trigger_roa75_61:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
   border-radius: var(--radius-control-sm);
 }
-._chevron_16lix_75 {
+._chevron_roa75_82 {
   flex-shrink: 0;
   color: var(--icon-muted);
 }
-._collapsible_16lix_34 ._description_16lix_80 {
+._collapsible_roa75_87 ._description_roa75_87 {
   padding-inline-start: calc(18px + var(--space-2));
 }
-._description_16lix_80 {
+._description_roa75_87 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-body-sm);
@@ -89,7 +96,7 @@
   color: var(--text-secondary);
 }
-._actions_16lix_92 {
+._actions_roa75_99 {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -97,7 +104,7 @@
   flex-shrink: 0;
 }
-._body_16lix_34 {
+._body_roa75_107 {
   width: 100%;
   min-width: 0;
 }

package/dist/ui/Section/Section.module.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import "./Section.kit.css";
 //#region ui/Section/Section.module.css
-var e = "_section_16lix_1", t = "_sm_16lix_9", n = "_md_16lix_14", r = "_lg_16lix_19", i = "_header_16lix_24", a = "_collapsible_16lix_34", o = "_body_16lix_34", s = "_heading_16lix_38", c = "_title_16lix_45", l = "_trigger_16lix_54", u = "_chevron_16lix_75", d = "_description_16lix_80", f = "_actions_16lix_92", p = {
+var e = "_section_roa75_1", t = "_sm_roa75_18", n = "_md_roa75_24", r = "_lg_roa75_30", i = "_header_roa75_36", a = "_heading_roa75_45", o = "_title_roa75_52", s = "_trigger_roa75_61", c = "_chevron_roa75_82", l = "_collapsible_roa75_87", u = "_description_roa75_87", d = "_actions_roa75_99", f = "_body_roa75_107", p = {
 	section: e,
 	sm: t,
 	md: n,
 	lg: r,
 	header: i,
-	collapsible: a,
-	body: o,
-	heading: s,
-	title: c,
-	trigger: l,
-	chevron: u,
-	description: d,
-	actions: f
+	heading: a,
+	title: o,
+	trigger: s,
+	chevron: c,
+	collapsible: l,
+	description: u,
+	actions: d,
+	body: f
 };
 //#endregion
-export { f as actions, o as body, u as chevron, a as collapsible, p as default, d as description, i as header, s as heading, r as lg, n as md, e as section, t as sm, c as title, l as trigger };
+export { d as actions, f as body, c as chevron, l as collapsible, p as default, u as description, i as header, a as heading, r as lg, n as md, e as section, t as sm, o as title, s as trigger };
 //# sourceMappingURL=Section.module.js.map

package/dist/ui/Section/Section.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Section.module.js","names":[],"sources":["../../../ui/Section/Section.module.css"],"sourcesContent":[".section {\n --section-space: var(--space-section-md);\n --section-header-gap: var(--space-stack-sm);\n width: 100%;\n min-width: 0;\n margin: 0 0 var(--section-space);\n}\n\n.sm {\n --section-space: var(--space-section-sm);\n --section-header-gap: var(--space-stack-sm);\n}\n\n.md {\n --section-space: var(--space-section-md);\n --section-header-gap: var(--space-stack-md);\n}\n\n.lg {\n --section-space: var(--space-section-lg);\n --section-header-gap: var(--space-stack-lg);\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-inline-sm) var(--space-inline-lg);\n margin: 0;\n ~~padding-bottom: var(--section-header-gap);\n~~}\n\n.~~collapsible:has(> .body[hidden]) .header {\n padding-bottom: 0;\n}\n\n.~~heading {\n display: grid;\n gap: var(--space-stack-xs);\n min-width: 0;\n flex: 1;\n}\n\n.title {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-heading);\n font-weight: var(--type-weight-heading);\n line-height: var(--type-line-heading);\n color: var(--text-primary);\n}\n\n.trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n}\n\n.trigger:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n border-radius: var(--radius-control-sm);\n}\n\n.chevron {\n flex-shrink: 0;\n color: var(--icon-muted);\n}\n\n.collapsible .description {\n padding-inline-start: calc(18px + var(--space-2));\n}\n\n.description {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n line-height: var(--type-line-body);\n color: var(--text-secondary);\n}\n\n.actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-inline-sm);\n flex-shrink: 0;\n}\n\n.body {\n width: 100%;\n min-width: 0;\n}\n\n"],"mappings":""}
1	+ {"version":3,"file":"Section.module.js","names":[],"sources":["../../../ui/Section/Section.module.css"],"sourcesContent":[".section {\n --section-space: var(--space-section-md);\n --section-header-gap: var(--space-stack-md);\n --section-inset: var(--space-6);\n display: grid;\n gap: var(--section-header-gap);\n width: 100%;\n min-width: 0;\n margin: 0 0 var(--section-space);\n padding: var(--section-inset);\n box-sizing: border-box;\n background: var(--surface-card);\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-surface-md);\n box-shadow: var(--shadow-sm);\n}\n\n.sm {\n --section-space: var(--space-section-sm);\n --section-header-gap: var(--space-stack-sm);\n --section-inset: var(--space-4);\n}\n\n.md {\n --section-space: var(--space-section-md);\n --section-header-gap: var(--space-stack-md);\n --section-inset: var(--space-6);\n}\n\n.lg {\n --section-space: var(--space-section-lg);\n --section-header-gap: var(--space-stack-lg);\n --section-inset: var(--space-8);\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-inline-sm) var(--space-inline-lg);\n margin: 0;\n}\n\n.heading {\n display: grid;\n gap: var(--space-stack-xs);\n min-width: 0;\n flex: 1;\n}\n\n.title {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-heading);\n font-weight: var(--type-weight-heading);\n line-height: var(--type-line-heading);\n color: var(--text-primary);\n}\n\n.trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n max-width: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n}\n\n.trigger:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n border-radius: var(--radius-control-sm);\n}\n\n.chevron {\n flex-shrink: 0;\n color: var(--icon-muted);\n}\n\n.collapsible .description {\n padding-inline-start: calc(18px + var(--space-2));\n}\n\n.description {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n line-height: var(--type-line-body);\n color: var(--text-secondary);\n}\n\n.actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--space-inline-sm);\n flex-shrink: 0;\n}\n\n.body {\n width: 100%;\n min-width: 0;\n}\n\n"],"mappings":""}

package/dist/ui/patterns/ActivityPattern/ActivityPattern.js CHANGED Viewed

@@ -76,7 +76,6 @@ function g({ breadcrumbs: g }) {
 					/* @__PURE__ */ p(a, {
 						title: "This week",
 						children: /* @__PURE__ */ p(i, {
-							className: "layout-metrics layout-metrics--fixed-4",
 							"aria-label": "Activity this week",
 							items: h
 						})

package/dist/ui/patterns/ActivityPattern/ActivityPattern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActivityPattern.js","names":[],"sources":["../../../../ui/patterns/ActivityPattern/ActivityPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"../../Button\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { Empty } from \"../../Empty\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport { Tabs } from \"../../Tabs\";\nimport { ActivityFeed } from \"./ActivityFeed\";\nimport { TaskCards, TaskList } from \"./ActivityTasks\";\nimport { TASK_INSIGHTS, TaskDrawer } from \"./TaskDrawer\";\n\ntype TaskView = \"cards\" \| \"list\";\n\nconst ACTIVITY_METRICS = [\n { label: \"Today\", value: \"6\", delta: \"+2\", trend: \"up\" as const, hint: \"vs yesterday\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"success\" as const },\n { label: \"Comments\", value: \"5\", delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n { label: \"Status changes\", value: \"4\", delta: \"0\", trend: \"flat\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Ship\", badgeTone: \"brand\" as const },\n { label: \"Mentions\", value: \"2\", delta: \"+2\", trend: \"up\" as const, hint: \"need reply\", size: \"lg\" as const, badge: \"At risk\", badgeTone: \"danger\" as const },\n];\n\nexport interface ActivityPatternProps {\n breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n}\n\nexport function ActivityPattern({ breadcrumbs }: ActivityPatternProps) {\n const [dismissed, setDismissed] = useState<string[]>([]);\n const [openTaskId, setOpenTaskId] = useState<string \| null>(null);\n const [taskView, setTaskView] = useState<TaskView>(\"cards\");\n\n const tasks = TASK_INSIGHTS.filter((task) => !dismissed.includes(task.id));\n const openTask = TASK_INSIGHTS.find((task) => task.id === openTaskId) ?? null;\n const taskCount =\n tasks.length === 0\n ? \"All caught up\"\n : `${tasks.length} ${tasks.length === 1 ? \"needs\" : \"need\"} attention`;\n\n function dismissTask(id: string) {\n setDismissed((current) => [...current, id]);\n setOpenTaskId((current) => (current === id ? null : current));\n }\n\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Activity\"\n subtitle=\"What the team shipped, blocked, and commented on.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"This week\">\n <Scoreboard~~\n className=\"layout-metrics~~ ~~layout-metrics--fixed-4\"\n~~ aria-label=\"Activity this week\"\n items={ACTIVITY_METRICS}\n />\n </Section>\n <Section\n title=\"Tasks\"\n description={taskCount}\n actions={\n tasks.length > 0 ? (\n <ButtonGroup ariaLabel=\"Task layout\">\n <Button\n variant={taskView === \"cards\" ? \"secondary\" : \"tertiary\"}\n size=\"sm\"\n onClick={() => setTaskView(\"cards\")}\n >\n Cards\n </Button>\n <Button\n variant={taskView === \"list\" ? \"secondary\" : \"tertiary\"}\n size=\"sm\"\n onClick={() => setTaskView(\"list\")}\n >\n List\n </Button>\n </ButtonGroup>\n ) : undefined\n }\n >\n {tasks.length > 0 ? (\n taskView === \"cards\" ? (\n <TaskCards tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />\n ) : (\n <TaskList tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />\n )\n ) : (\n <Empty\n title=\"No open tasks\"\n description=\"Nothing in this sprint needs a look right now.\"\n icon=\"Check\"\n outlined\n />\n )}\n </Section>\n <Section title=\"Feed\" description=\"Newest first\">\n <Tabs\n ariaLabel=\"Activity type\"\n variant=\"line\"\n size=\"md\"\n defaultValue=\"all\"\n items={[\n { id: \"all\", label: \"All\", content: <ActivityFeed tab=\"all\" caption=\"All activity\" /> },\n { id: \"comments\", label: \"Comments\", content: <ActivityFeed tab=\"comments\" caption=\"Comments\" /> },\n { id: \"status\", label: \"Status\", content: <ActivityFeed tab=\"status\" caption=\"Status changes\" /> },\n { id: \"mentions\", label: \"Mentions\", content: <ActivityFeed tab=\"mentions\" caption=\"Mentions\" /> },\n ]}\n />\n </Section>\n </div>\n <TaskDrawer task={openTask} onClose={() => setOpenTaskId(null)} />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,IAAM,IAAmB;CACvB;EAAE,OAAO;EAAS,OAAO;EAAK,OAAO;EAAM,OAAO;EAAe,MAAM;EAAgB,MAAM;EAAe,OAAO;EAAQ,WAAW;CAAmB;CACzJ;EAAE,OAAO;EAAY,OAAO;EAAK,OAAO;EAAM,OAAO;EAAe,MAAM;EAAe,MAAM;EAAe,OAAO;EAAU,WAAW;CAAgB;CAC1J;EAAE,OAAO;EAAkB,OAAO;EAAK,OAAO;EAAK,OAAO;EAAiB,MAAM;EAAe,MAAM;EAAe,OAAO;EAAQ,WAAW;CAAiB;CAChK;EAAE,OAAO;EAAY,OAAO;EAAK,OAAO;EAAM,OAAO;EAAe,MAAM;EAAc,MAAM;EAAe,OAAO;EAAW,WAAW;CAAkB;AAC9J;AAMA,SAAgB,EAAgB,EAAE,kBAAqC;CACrE,IAAM,CAAC,GAAW,KAAgB,EAAmB,CAAC,CAAC,GACjD,CAAC,GAAY,KAAiB,EAAwB,IAAI,GAC1D,CAAC,GAAU,KAAe,EAAmB,OAAO,GAEpD,IAAQ,EAAc,QAAQ,MAAS,CAAC,EAAU,SAAS,EAAK,EAAE,CAAC,GACnE,IAAW,EAAc,MAAM,MAAS,EAAK,OAAO,CAAU,KAAK,MACnE,IACJ,EAAM,WAAW,IACb,kBACA,GAAG,EAAM,OAAO,GAAG,EAAM,WAAW,IAAI,UAAU,OAAO;CAE/D,SAAS,EAAY,GAAY;EAE/B,AADA,GAAc,MAAY,CAAC,GAAG,GAAS,CAAE,CAAC,GAC1C,GAAe,MAAa,MAAY,IAAK,OAAO,CAAQ;CAC9D;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACE,OAAM;KACN,UAAS;KACI;IACd,CAAA;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAS,OAAM;MACb,UAAA,kBAAC,GAAD;~~OACE~~,~~WAAU;OACV,~~cAAW;~~OACX~~,OAAO;~~MACR~~,CAAA;~~KACM~~,CAAA;KACT,kBAAC,GAAD;MACE,OAAM;MACN,aAAa;MACb,SACE,EAAM,SAAS,IACb,kBAAC,GAAD;OAAa,WAAU;OAAvB,UAAA,CACE,kBAAC,GAAD;QACE,SAAS,MAAa,UAAU,cAAc;QAC9C,MAAK;QACL,eAAe,EAAY,OAAO;QACnC,UAAA;OAEO,CAAA,GACR,kBAAC,GAAD;QACE,SAAS,MAAa,SAAS,cAAc;QAC7C,MAAK;QACL,eAAe,EAAY,MAAM;QAClC,UAAA;OAEO,CAAA,CACG;MACX,CAAA,IAAA,KAAA;MAGL,UAAA,EAAM,SAAS,IAEZ,EADF,MAAa,UACV,IAEA,GAFD;OAAkB;OAAO,QAAQ;OAAe,WAAW;MAAc,CAED,IAG1E,kBAAC,GAAD;OACE,OAAM;OACN,aAAY;OACZ,MAAK;OACL,UAAA;MACD,CAAA;KAEI,CAAA;KACT,kBAAC,GAAD;MAAS,OAAM;MAAO,aAAY;MAChC,UAAA,kBAAC,GAAD;OACE,WAAU;OACV,SAAQ;OACR,MAAK;OACL,cAAa;OACb,OAAO;QACL;SAAE,IAAI;SAAO,OAAO;SAAO,SAAS,kBAAC,GAAD;UAAc,KAAI;UAAM,SAAQ;SAAgB,CAAA;QAAE;QACtF;SAAE,IAAI;SAAY,OAAO;SAAY,SAAS,kBAAC,GAAD;UAAc,KAAI;UAAW,SAAQ;SAAY,CAAA;QAAE;QACjG;SAAE,IAAI;SAAU,OAAO;SAAU,SAAS,kBAAC,GAAD;UAAc,KAAI;UAAS,SAAQ;SAAkB,CAAA;QAAE;QACjG;SAAE,IAAI;SAAY,OAAO;SAAY,SAAS,kBAAC,GAAD;UAAc,KAAI;UAAW,SAAQ;SAAY,CAAA;QAAE;OACnG;MACD,CAAA;KACM,CAAA;IACN;;GACL,kBAAC,GAAD;IAAY,MAAM;IAAU,eAAe,EAAc,IAAI;GAAI,CAAA;EAC9D;;AAET"}
1	+ {"version":3,"file":"ActivityPattern.js","names":[],"sources":["../../../../ui/patterns/ActivityPattern/ActivityPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Button } from \"../../Button\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { Empty } from \"../../Empty\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport { Tabs } from \"../../Tabs\";\nimport { ActivityFeed } from \"./ActivityFeed\";\nimport { TaskCards, TaskList } from \"./ActivityTasks\";\nimport { TASK_INSIGHTS, TaskDrawer } from \"./TaskDrawer\";\n\ntype TaskView = \"cards\" \| \"list\";\n\nconst ACTIVITY_METRICS = [\n { label: \"Today\", value: \"6\", delta: \"+2\", trend: \"up\" as const, hint: \"vs yesterday\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"success\" as const },\n { label: \"Comments\", value: \"5\", delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n { label: \"Status changes\", value: \"4\", delta: \"0\", trend: \"flat\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Ship\", badgeTone: \"brand\" as const },\n { label: \"Mentions\", value: \"2\", delta: \"+2\", trend: \"up\" as const, hint: \"need reply\", size: \"lg\" as const, badge: \"At risk\", badgeTone: \"danger\" as const },\n];\n\nexport interface ActivityPatternProps {\n breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n}\n\nexport function ActivityPattern({ breadcrumbs }: ActivityPatternProps) {\n const [dismissed, setDismissed] = useState<string[]>([]);\n const [openTaskId, setOpenTaskId] = useState<string \| null>(null);\n const [taskView, setTaskView] = useState<TaskView>(\"cards\");\n\n const tasks = TASK_INSIGHTS.filter((task) => !dismissed.includes(task.id));\n const openTask = TASK_INSIGHTS.find((task) => task.id === openTaskId) ?? null;\n const taskCount =\n tasks.length === 0\n ? \"All caught up\"\n : `${tasks.length} ${tasks.length === 1 ? \"needs\" : \"need\"} attention`;\n\n function dismissTask(id: string) {\n setDismissed((current) => [...current, id]);\n setOpenTaskId((current) => (current === id ? null : current));\n }\n\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Activity\"\n subtitle=\"What the team shipped, blocked, and commented on.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"This week\">\n <Scoreboard aria-label=\"Activity this week\" items={ACTIVITY_METRICS} />\n </Section>\n <Section\n title=\"Tasks\"\n description={taskCount}\n actions={\n tasks.length > 0 ? (\n <ButtonGroup ariaLabel=\"Task layout\">\n <Button\n variant={taskView === \"cards\" ? \"secondary\" : \"tertiary\"}\n size=\"sm\"\n onClick={() => setTaskView(\"cards\")}\n >\n Cards\n </Button>\n <Button\n variant={taskView === \"list\" ? \"secondary\" : \"tertiary\"}\n size=\"sm\"\n onClick={() => setTaskView(\"list\")}\n >\n List\n </Button>\n </ButtonGroup>\n ) : undefined\n }\n >\n {tasks.length > 0 ? (\n taskView === \"cards\" ? (\n <TaskCards tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />\n ) : (\n <TaskList tasks={tasks} onOpen={setOpenTaskId} onDismiss={dismissTask} />\n )\n ) : (\n <Empty\n title=\"No open tasks\"\n description=\"Nothing in this sprint needs a look right now.\"\n icon=\"Check\"\n outlined\n />\n )}\n </Section>\n <Section title=\"Feed\" description=\"Newest first\">\n <Tabs\n ariaLabel=\"Activity type\"\n variant=\"line\"\n size=\"md\"\n defaultValue=\"all\"\n items={[\n { id: \"all\", label: \"All\", content: <ActivityFeed tab=\"all\" caption=\"All activity\" /> },\n { id: \"comments\", label: \"Comments\", content: <ActivityFeed tab=\"comments\" caption=\"Comments\" /> },\n { id: \"status\", label: \"Status\", content: <ActivityFeed tab=\"status\" caption=\"Status changes\" /> },\n { id: \"mentions\", label: \"Mentions\", content: <ActivityFeed tab=\"mentions\" caption=\"Mentions\" /> },\n ]}\n />\n </Section>\n </div>\n <TaskDrawer task={openTask} onClose={() => setOpenTaskId(null)} />\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/ui/patterns/DashboardPattern/DashboardPattern.js CHANGED Viewed

@@ -181,7 +181,6 @@ function d({ breadcrumbs: d }) {
 				/* @__PURE__ */ a(i, {
 					title: "Sprint metrics",
 					children: /* @__PURE__ */ a(r, {
-						className: "layout-metrics layout-metrics--fixed-4",
 						"aria-label": "Sprint metrics",
 						items: s
 					})

package/dist/ui/patterns/DashboardPattern/DashboardPattern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardPattern.js","names":[],"sources":["../../../../ui/patterns/DashboardPattern/DashboardPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { DataTable } from \"../../DataTable\";\nimport type { DataTableColumn, DataTableRow } from \"../../DataTable\";\nimport { LineChart } from \"../../LineChart\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport type { ChartDatum } from \"../../shared/chartMath\";\n\nconst SPRINT_METRICS = [\n { label: \"Weekly users\", value: \"1.44k\", delta: \"+6.2%\", trend: \"up\" as const, hint: \"vs last week\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"success\" as const },\n { label: \"Open tasks\", value: \"4\", delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n { label: \"Blocked\", value: \"1\", delta: \"0\", trend: \"flat\" as const, hint: \"need owner\", size: \"lg\" as const, badge: \"At risk\", badgeTone: \"danger\" as const },\n { label: \"Ready\", value: \"1\", delta: \"+1\", trend: \"up\" as const, hint: \"to ship\", size: \"lg\" as const, badge: \"Ship\", badgeTone: \"brand\" as const },\n];\n\nconst WEEKLY_USERS: ChartDatum[] = [\n { label: \"Mon\", value: 1280 },\n { label: \"Tue\", value: 1410 },\n { label: \"Wed\", value: 1320 },\n { label: \"Thu\", value: 1480 },\n { label: \"Fri\", value: 1360 },\n { label: \"Sat\", value: 1440 },\n { label: \"Sun\", value: 1390 },\n];\n\nconst TASK_COLUMNS: DataTableColumn[] = [\n { key: \"task\", header: \"Task\", sortable: true },\n { key: \"owner\", header: \"Owner\", sortable: true },\n { key: \"status\", header: \"Status\", sortable: true },\n];\n\nconst TASK_ROWS: DataTableRow[] = [\n {\n id: \"launch-brief\",\n task: { type: \"file\", label: \"Launch brief\" },\n owner: { type: \"avatar\", label: \"Maya Chen\", name: \"Maya Chen\", src: \"/faces/maya-chen.jpg\" },\n status: { type: \"badge\", label: \"In review\", tone: \"warning\" },\n },\n {\n id: \"qa-checklist\",\n task: { type: \"file\", label: \"QA checklist\" },\n owner: { type: \"avatar\", label: \"Unassigned\", name: \"Unassigned\" },\n status: { type: \"badge\", label: \"Blocked\", tone: \"danger\" },\n },\n {\n id: \"release-notes\",\n task: { type: \"file\", label: \"Release notes\" },\n owner: { type: \"avatar\", label: \"Jordan Lee\", name: \"Jordan Lee\", src: \"/faces/jordan-lee.jpg\" },\n status: { type: \"badge\", label: \"Ready\", tone: \"success\" },\n },\n {\n id: \"support-macros\",\n task: { type: \"file\", label: \"Support macros\" },\n owner: { type: \"avatar\", label: \"Alex Rivera\", name: \"Alex Rivera\", src: \"/faces/alex-rivera.jpg\" },\n status: { type: \"badge\", label: \"In progress\", tone: \"info\" },\n },\n];\n\nexport function DashboardPattern({ breadcrumbs }: { breadcrumbs?: PageHeaderProps[\"breadcrumbs\"] }) {\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Overview\"\n subtitle=\"Workspace overview for the current team.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"Sprint metrics\">\n <Scoreboard~~\n className=\"layout-metrics~~ ~~layout-metrics--fixed-4\"\n~~ aria-label=\"Sprint metrics\"\n items={SPRINT_METRICS}\n />\n </Section>\n <Section title=\"Weekly users\">\n <LineChart data={WEEKLY_USERS} variant=\"line\" showTable={false} />\n </Section>\n <Section title=\"Open tasks\" description=\"4 items need attention\">\n <DataTable\n caption=\"Sprint backlog\"\n selectable\n toolbar\n cellSize=\"sm\"\n searchPlaceholder=\"Search tasks...\"\n filters={[\n { key: \"status\", label: \"Status\" },\n { key: \"owner\", label: \"Owner\" },\n ]}\n columnSettings\n columns={TASK_COLUMNS}\n rows={TASK_ROWS}\n />\n </Section>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAiB;CACrB;EAAE,OAAO;EAAgB,OAAO;EAAS,OAAO;EAAS,OAAO;EAAe,MAAM;EAAgB,MAAM;EAAe,OAAO;EAAQ,WAAW;CAAmB;CACvK;EAAE,OAAO;EAAc,OAAO;EAAK,OAAO;EAAM,OAAO;EAAe,MAAM;EAAe,MAAM;EAAe,OAAO;EAAU,WAAW;CAAgB;CAC5J;EAAE,OAAO;EAAW,OAAO;EAAK,OAAO;EAAK,OAAO;EAAiB,MAAM;EAAc,MAAM;EAAe,OAAO;EAAW,WAAW;CAAkB;CAC5J;EAAE,OAAO;EAAS,OAAO;EAAK,OAAO;EAAM,OAAO;EAAe,MAAM;EAAW,MAAM;EAAe,OAAO;EAAQ,WAAW;CAAiB;AACpJ,GAEM,IAA6B;CACjC;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;CAC5B;EAAE,OAAO;EAAO,OAAO;CAAK;AAC9B,GAEM,IAAkC;CACtC;EAAE,KAAK;EAAQ,QAAQ;EAAQ,UAAU;CAAK;CAC9C;EAAE,KAAK;EAAS,QAAQ;EAAS,UAAU;CAAK;CAChD;EAAE,KAAK;EAAU,QAAQ;EAAU,UAAU;CAAK;AACpD,GAEM,IAA4B;CAChC;EACE,IAAI;EACJ,MAAM;GAAE,MAAM;GAAQ,OAAO;EAAe;EAC5C,OAAO;GAAE,MAAM;GAAU,OAAO;GAAa,MAAM;GAAa,KAAK;EAAuB;EAC5F,QAAQ;GAAE,MAAM;GAAS,OAAO;GAAa,MAAM;EAAU;CAC/D;CACA;EACE,IAAI;EACJ,MAAM;GAAE,MAAM;GAAQ,OAAO;EAAe;EAC5C,OAAO;GAAE,MAAM;GAAU,OAAO;GAAc,MAAM;EAAa;EACjE,QAAQ;GAAE,MAAM;GAAS,OAAO;GAAW,MAAM;EAAS;CAC5D;CACA;EACE,IAAI;EACJ,MAAM;GAAE,MAAM;GAAQ,OAAO;EAAgB;EAC7C,OAAO;GAAE,MAAM;GAAU,OAAO;GAAc,MAAM;GAAc,KAAK;EAAwB;EAC/F,QAAQ;GAAE,MAAM;GAAS,OAAO;GAAS,MAAM;EAAU;CAC3D;CACA;EACE,IAAI;EACJ,MAAM;GAAE,MAAM;GAAQ,OAAO;EAAiB;EAC9C,OAAO;GAAE,MAAM;GAAU,OAAO;GAAe,MAAM;GAAe,KAAK;EAAyB;EAClG,QAAQ;GAAE,MAAM;GAAS,OAAO;GAAe,MAAM;EAAO;CAC9D;AACF;AAEA,SAAgB,EAAiB,EAAE,kBAAiE;CAClG,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IACE,OAAM;IACN,UAAS;IACI;GACd,CAAA;EACE,CAAA,GACL,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,GAAD;KAAS,OAAM;KACb,UAAA,kBAAC,GAAD;~~MACE~~,~~WAAU;MACV,~~cAAW;~~MACX~~,OAAO;~~KACR~~,CAAA;~~IACM~~,CAAA;IACT,kBAAC,GAAD;KAAS,OAAM;KACb,UAAA,kBAAC,GAAD;MAAW,MAAM;MAAc,SAAQ;MAAO,WAAW;KAAQ,CAAA;IAC1D,CAAA;IACT,kBAAC,GAAD;KAAS,OAAM;KAAa,aAAY;KACtC,UAAA,kBAAC,GAAD;MACE,SAAQ;MACR,YAAA;MACA,SAAA;MACA,UAAS;MACT,mBAAkB;MAClB,SAAS,CACP;OAAE,KAAK;OAAU,OAAO;MAAS,GACjC;OAAE,KAAK;OAAS,OAAO;MAAQ,CACjC;MACA,gBAAA;MACA,SAAS;MACT,MAAM;KACP,CAAA;IACM,CAAA;GACN;EACF,CAAA,CAAA;;AAET"}
1	+ {"version":3,"file":"DashboardPattern.js","names":[],"sources":["../../../../ui/patterns/DashboardPattern/DashboardPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { DataTable } from \"../../DataTable\";\nimport type { DataTableColumn, DataTableRow } from \"../../DataTable\";\nimport { LineChart } from \"../../LineChart\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport type { ChartDatum } from \"../../shared/chartMath\";\n\nconst SPRINT_METRICS = [\n { label: \"Weekly users\", value: \"1.44k\", delta: \"+6.2%\", trend: \"up\" as const, hint: \"vs last week\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"success\" as const },\n { label: \"Open tasks\", value: \"4\", delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n { label: \"Blocked\", value: \"1\", delta: \"0\", trend: \"flat\" as const, hint: \"need owner\", size: \"lg\" as const, badge: \"At risk\", badgeTone: \"danger\" as const },\n { label: \"Ready\", value: \"1\", delta: \"+1\", trend: \"up\" as const, hint: \"to ship\", size: \"lg\" as const, badge: \"Ship\", badgeTone: \"brand\" as const },\n];\n\nconst WEEKLY_USERS: ChartDatum[] = [\n { label: \"Mon\", value: 1280 },\n { label: \"Tue\", value: 1410 },\n { label: \"Wed\", value: 1320 },\n { label: \"Thu\", value: 1480 },\n { label: \"Fri\", value: 1360 },\n { label: \"Sat\", value: 1440 },\n { label: \"Sun\", value: 1390 },\n];\n\nconst TASK_COLUMNS: DataTableColumn[] = [\n { key: \"task\", header: \"Task\", sortable: true },\n { key: \"owner\", header: \"Owner\", sortable: true },\n { key: \"status\", header: \"Status\", sortable: true },\n];\n\nconst TASK_ROWS: DataTableRow[] = [\n {\n id: \"launch-brief\",\n task: { type: \"file\", label: \"Launch brief\" },\n owner: { type: \"avatar\", label: \"Maya Chen\", name: \"Maya Chen\", src: \"/faces/maya-chen.jpg\" },\n status: { type: \"badge\", label: \"In review\", tone: \"warning\" },\n },\n {\n id: \"qa-checklist\",\n task: { type: \"file\", label: \"QA checklist\" },\n owner: { type: \"avatar\", label: \"Unassigned\", name: \"Unassigned\" },\n status: { type: \"badge\", label: \"Blocked\", tone: \"danger\" },\n },\n {\n id: \"release-notes\",\n task: { type: \"file\", label: \"Release notes\" },\n owner: { type: \"avatar\", label: \"Jordan Lee\", name: \"Jordan Lee\", src: \"/faces/jordan-lee.jpg\" },\n status: { type: \"badge\", label: \"Ready\", tone: \"success\" },\n },\n {\n id: \"support-macros\",\n task: { type: \"file\", label: \"Support macros\" },\n owner: { type: \"avatar\", label: \"Alex Rivera\", name: \"Alex Rivera\", src: \"/faces/alex-rivera.jpg\" },\n status: { type: \"badge\", label: \"In progress\", tone: \"info\" },\n },\n];\n\nexport function DashboardPattern({ breadcrumbs }: { breadcrumbs?: PageHeaderProps[\"breadcrumbs\"] }) {\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Overview\"\n subtitle=\"Workspace overview for the current team.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"Sprint metrics\">\n <Scoreboard aria-label=\"Sprint metrics\" items={SPRINT_METRICS} />\n </Section>\n <Section title=\"Weekly users\">\n <LineChart data={WEEKLY_USERS} variant=\"line\" showTable={false} />\n </Section>\n <Section title=\"Open tasks\" description=\"4 items need attention\">\n <DataTable\n caption=\"Sprint backlog\"\n selectable\n toolbar\n cellSize=\"sm\"\n searchPlaceholder=\"Search tasks...\"\n filters={[\n { key: \"status\", label: \"Status\" },\n { key: \"owner\", label: \"Owner\" },\n ]}\n columnSettings\n columns={TASK_COLUMNS}\n rows={TASK_ROWS}\n />\n </Section>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/ui/patterns/InboxPattern/InboxPattern.js CHANGED Viewed

@@ -108,7 +108,6 @@ function S({ breadcrumbs: r }) {
 					/* @__PURE__ */ v(s, {
 						title: "At a glance",
 						children: /* @__PURE__ */ v(o, {
-							className: "layout-metrics layout-metrics--fixed-4",
 							"aria-label": "Inbox this week",
 							items: [
 								{

package/dist/ui/patterns/InboxPattern/InboxPattern.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InboxPattern.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/InboxPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Avatar } from \"../../Avatar\";\nimport { Badge } from \"../../Badge\";\nimport { Button } from \"../../Button\";\nimport { Cell } from \"../../Cell\";\nimport { Empty } from \"../../Empty\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport { Table } from \"../../Table\";\nimport { Tabs } from \"../../Tabs\";\nimport { Toast } from \"../../Toast\";\nimport { filterMessages, INBOX, type InboxMessage } from \"./inbox-data\";\nimport { InboxReplyDrawer } from \"./InboxReplyDrawer\";\nimport styles from \"./InboxPattern.module.css\";\n\nconst COLUMNS = [\n { key: \"from\", header: \"From\", emphasis: true },\n { key: \"subject\", header: \"Subject\" },\n { key: \"kind\", header: \"Type\" },\n { key: \"when\", header: \"When\" },\n { key: \"open\", header: \"\" },\n];\n\nfunction InboxTable({\n messages,\n onOpen,\n}: {\n messages: InboxMessage[];\n onOpen: (id: string) => void;\n}) {\n return (\n <Table\n caption=\"Inbox\"\n size=\"sm\"\n emptyLabel=\"No messages in this filter.\"\n columns={COLUMNS}\n rows={messages.map((item) => ({\n from: <Cell type=\"avatar\" size=\"sm\" name={item.from} src={item.fromSrc} label={item.from} />,\n subject: item.subject,\n kind: <Badge tone={item.kindTone} size=\"sm\">{item.kind}</Badge>,\n when: item.when,\n open: (\n <Button variant=\"tertiary\" size=\"sm\" onClick={() => onOpen(item.id)}>\n Open\n </Button>\n ),\n }))}\n />\n );\n}\n\nexport interface InboxPatternProps {\n breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n}\n\nexport function InboxPattern({ breadcrumbs }: InboxPatternProps) {\n const [messages, setMessages] = useState(INBOX);\n const [tab, setTab] = useState(\"all\");\n const [selectedId, setSelectedId] = useState<string \| null>(INBOX[0]?.id ?? null);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [toastOpen, setToastOpen] = useState(false);\n\n const selected = messages.find((item) => item.id === selectedId) ?? null;\n const unread = messages.filter((item) => item.unread).length;\n\n useEffect(() => {\n const next = filterMessages(messages, tab);\n if (selectedId && next.some((item) => item.id === selectedId)) return;\n setSelectedId(next[0]?.id ?? null);\n setDrawerOpen(false);\n }, [selectedId, tab, messages]);\n\n function archive(id: string) {\n setMessages((current) => current.filter((item) => item.id !== id));\n setDrawerOpen(false);\n }\n\n function openMessage(id: string) {\n setSelectedId(id);\n setDrawerOpen(true);\n }\n\n function sendReply() {\n if (!selected) return;\n setMessages((current) =>\n current.map((item) => (item.id === selected.id ? { ...item, unread: false } : item)),\n );\n setToastOpen(true);\n }\n\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Inbox\"\n subtitle=\"Replies, mentions, and requests waiting on you.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"At a glance\">\n <Scoreboard\n className=\"layout-metrics layout-metrics--fixed-4\"\n aria-label=\"Inbox this week\"\n items={[\n { label: \"Unread\", value: String(unread), delta: `+${unread}`, trend: \"up\" as const, hint: \"need a look\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"danger\" as const },\n { label: \"Mentions\", value: String(messages.filter((item) => item.kind === \"Mention\").length), delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"You\", badgeTone: \"brand\" as const },\n { label: \"Requests\", value: String(messages.filter((item) => item.kind === \"Request\").length), delta: \"+2\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Review\", badgeTone: \"warning\" as const },\n { label: \"Open\", value: String(messages.length), delta: \"0\", trend: \"flat\" as const, hint: \"in inbox\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n ]}\n />\n </Section>\n <Section title=\"Messages\" description={`${unread} unread`}>\n <Tabs\n ariaLabel=\"Inbox type\"\n variant=\"line\"\n size=\"md\"\n value={tab}\n onChange={setTab}\n items={[\n { id: \"all\", label: \"All\", content: <InboxTable messages={filterMessages(messages, \"all\")} onOpen={openMessage} /> },\n { id: \"unread\", label: \"Unread\", content: <InboxTable messages={filterMessages(messages, \"unread\")} onOpen={openMessage} /> },\n { id: \"mentions\", label: \"Mentions\", content: <InboxTable messages={filterMessages(messages, \"mentions\")} onOpen={openMessage} /> },\n { id: \"requests\", label: \"Requests\", content: <InboxTable messages={filterMessages(messages, \"requests\")} onOpen={openMessage} /> },\n ]}\n />\n </Section>\n <Section\n title={selected?.subject ?? \"Message\"}\n description={selected ? `${selected.from} · ${selected.when}` : \"Select a row\"}\n actions={\n selected ? (\n <>\n <Button variant=\"secondary\" size=\"sm\" onClick={() => archive(selected.id)}>\n Archive\n </Button>\n <Button\n variant={drawerOpen ? \"secondary\" : \"primary\"}\n size=\"sm\"\n onClick={() => openMessage(selected.id)}\n >\n Reply\n </Button>\n </>\n ) : undefined\n }\n >\n {selected ? (\n <div className={styles.detail}>\n <div className={styles.meta}>\n <Avatar name={selected.from} src={selected.fromSrc} size=\"md\" />\n <div className={styles.copy}>\n <p className={styles.label}>From</p>\n <p className={styles.value}>{selected.from}</p>\n </div>\n <Badge tone={selected.kindTone}>{selected.kind}</Badge>\n </div>\n <p className={styles.body}>{selected.body}</p>\n </div>\n ) : (\n <Empty\n title=\"No message selected\"\n description=\"Open a row to read it here.\"\n icon=\"Mail\"\n outlined\n />\n )}\n </Section>\n </div>\n <InboxReplyDrawer\n key={selected?.id ?? \"none\"}\n message={selected}\n open={drawerOpen}\n onClose={() => setDrawerOpen(false)}\n onSend={sendReply}\n />\n <Toast\n open={toastOpen}\n title=\"Reply sent\"\n description=\"It will show up in the thread.\"\n status=\"success\"\n duration={3000}\n onClose={() => setToastOpen(false)}\n onOpenChange={setToastOpen}\n />\n </div>\n );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,IAAM,IAAU;CACd;EAAE,KAAK;EAAQ,QAAQ;EAAQ,UAAU;CAAK;CAC9C;EAAE,KAAK;EAAW,QAAQ;CAAU;CACpC;EAAE,KAAK;EAAQ,QAAQ;CAAO;CAC9B;EAAE,KAAK;EAAQ,QAAQ;CAAO;CAC9B;EAAE,KAAK;EAAQ,QAAQ;CAAG;AAC5B;AAEA,SAAS,EAAW,EAClB,aACA,aAIC;CACD,OACE,kBAAC,GAAD;EACE,SAAQ;EACR,MAAK;EACL,YAAW;EACX,SAAS;EACT,MAAM,EAAS,KAAK,OAAU;GAC5B,MAAM,kBAAC,GAAD;IAAM,MAAK;IAAS,MAAK;IAAK,MAAM,EAAK;IAAM,KAAK,EAAK;IAAS,OAAO,EAAK;GAAO,CAAA;GAC3F,SAAS,EAAK;GACd,MAAM,kBAAC,GAAD;IAAO,MAAM,EAAK;IAAU,MAAK;IAAM,UAAA,EAAK;GAAY,CAAA;GAC9D,MAAM,EAAK;GACX,MACE,kBAAC,GAAD;IAAQ,SAAQ;IAAW,MAAK;IAAK,eAAe,EAAO,EAAK,EAAE;IAAG,UAAA;GAE7D,CAAA;EAEZ,EAAE;CACH,CAAA;AAEL;AAMA,SAAgB,EAAa,EAAE,kBAAkC;CAC/D,IAAM,CAAC,GAAU,KAAe,EAAS,CAAK,GACxC,CAAC,GAAK,KAAU,EAAS,KAAK,GAC9B,CAAC,GAAY,KAAiB,EAAwB,EAAM,EAAE,EAAE,MAAM,IAAI,GAC1E,CAAC,GAAY,KAAiB,EAAS,EAAK,GAC5C,CAAC,GAAW,KAAgB,EAAS,EAAK,GAE1C,IAAW,EAAS,MAAM,MAAS,EAAK,OAAO,CAAU,KAAK,MAC9D,IAAS,EAAS,QAAQ,MAAS,EAAK,MAAM,CAAC,CAAC;CAEtD,QAAgB;EACd,IAAM,IAAO,EAAe,GAAU,CAAG;EACrC,KAAc,EAAK,MAAM,MAAS,EAAK,OAAO,CAAU,MAC5D,EAAc,EAAK,EAAE,EAAE,MAAM,IAAI,GACjC,EAAc,EAAK;CACrB,GAAG;EAAC;EAAY;EAAK;CAAQ,CAAC;CAE9B,SAAS,EAAQ,GAAY;EAE3B,AADA,GAAa,MAAY,EAAQ,QAAQ,MAAS,EAAK,OAAO,CAAE,CAAC,GACjE,EAAc,EAAK;CACrB;CAEA,SAAS,EAAY,GAAY;EAE/B,AADA,EAAc,CAAE,GAChB,EAAc,EAAI;CACpB;CAEA,SAAS,IAAY;EACd,MACL,GAAa,MACX,EAAQ,KAAK,MAAU,EAAK,OAAO,EAAS,KAAK;GAAE,GAAG;GAAM,QAAQ;EAAM,IAAI,CAAK,CACrF,GACA,EAAa,EAAI;CACnB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAAC,OAAD;IAAK,WAAU;IACb,UAAA,kBAAC,GAAD;KACE,OAAM;KACN,UAAS;KACI;IACd,CAAA;GACE,CAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,GAAD;MAAS,OAAM;MACb,UAAA,kBAAC,GAAD;OACE,WAAU;OACV,cAAW;OACX,OAAO;QACL;SAAE,OAAO;SAAU,OAAO,OAAO,CAAM;SAAG,OAAO,IAAI;SAAU,OAAO;SAAe,MAAM;SAAe,MAAM;SAAe,OAAO;SAAQ,WAAW;QAAkB;QAC3K;SAAE,OAAO;SAAY,OAAO,OAAO,EAAS,QAAQ,MAAS,EAAK,SAAS,SAAS,CAAC,CAAC,MAAM;SAAG,OAAO;SAAM,OAAO;SAAe,MAAM;SAAe,MAAM;SAAe,OAAO;SAAO,WAAW;QAAiB;QACtN;SAAE,OAAO;SAAY,OAAO,OAAO,EAAS,QAAQ,MAAS,EAAK,SAAS,SAAS,CAAC,CAAC,MAAM;SAAG,OAAO;SAAM,OAAO;SAAe,MAAM;SAAe,MAAM;SAAe,OAAO;SAAU,WAAW;QAAmB;QAC3N;SAAE,OAAO;SAAQ,OAAO,OAAO,EAAS,MAAM;SAAG,OAAO;SAAK,OAAO;SAAiB,MAAM;SAAY,MAAM;SAAe,OAAO;SAAU,WAAW;QAAgB;OAC1K;MACD,CAAA;KACM,CAAA;KACT,kBAAC,GAAD;MAAS,OAAM;MAAW,aAAa,GAAG,EAAO;MAC/C,UAAA,kBAAC,GAAD;OACE,WAAU;OACV,SAAQ;OACR,MAAK;OACL,OAAO;OACP,UAAU;OACV,OAAO;QACL;SAAE,IAAI;SAAO,OAAO;SAAO,SAAS,kBAAC,GAAD;UAAY,UAAU,EAAe,GAAU,KAAK;UAAG,QAAQ;SAAc,CAAA;QAAE;QACnH;SAAE,IAAI;SAAU,OAAO;SAAU,SAAS,kBAAC,GAAD;UAAY,UAAU,EAAe,GAAU,QAAQ;UAAG,QAAQ;SAAc,CAAA;QAAE;QAC5H;SAAE,IAAI;SAAY,OAAO;SAAY,SAAS,kBAAC,GAAD;UAAY,UAAU,EAAe,GAAU,UAAU;UAAG,QAAQ;SAAc,CAAA;QAAE;QAClI;SAAE,IAAI;SAAY,OAAO;SAAY,SAAS,kBAAC,GAAD;UAAY,UAAU,EAAe,GAAU,UAAU;UAAG,QAAQ;SAAc,CAAA;QAAE;OACpI;MACD,CAAA;KACM,CAAA;KACT,kBAAC,GAAD;MACE,OAAO,GAAU,WAAW;MAC5B,aAAa,IAAW,GAAG,EAAS,KAAK,KAAK,EAAS,SAAS;MAChE,SACE,IACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;OAAQ,SAAQ;OAAY,MAAK;OAAK,eAAe,EAAQ,EAAS,EAAE;OAAG,UAAA;MAEnE,CAAA,GACR,kBAAC,GAAD;OACE,SAAS,IAAa,cAAc;OACpC,MAAK;OACL,eAAe,EAAY,EAAS,EAAE;OACvC,UAAA;MAEO,CAAA,CACR,EAAA,CAAA,IACA,KAAA;MAGL,UAAA,IACC,kBAAC,OAAD;OAAK,WAAW,EAAO;OAAvB,UAAA,CACE,kBAAC,OAAD;QAAK,WAAW,EAAO;QAAvB,UAAA;SACE,kBAAC,GAAD;UAAQ,MAAM,EAAS;UAAM,KAAK,EAAS;UAAS,MAAK;SAAM,CAAA;SAC/D,kBAAC,OAAD;UAAK,WAAW,EAAO;UAAvB,UAAA,CACE,kBAAC,KAAD;WAAG,WAAW,EAAO;WAAO,UAAA;UAAO,CAAA,GACnC,kBAAC,KAAD;WAAG,WAAW,EAAO;WAAQ,UAAA,EAAS;UAAQ,CAAA,CAC3C;;SACL,kBAAC,GAAD;UAAO,MAAM,EAAS;UAAW,UAAA,EAAS;SAAY,CAAA;QACnD;OACL,CAAA,GAAA,kBAAC,KAAD;QAAG,WAAW,EAAO;QAAO,UAAA,EAAS;OAAQ,CAAA,CAC1C;MAEL,CAAA,IAAA,kBAAC,GAAD;OACE,OAAM;OACN,aAAY;OACZ,MAAK;OACL,UAAA;MACD,CAAA;KAEI,CAAA;IACN;;GACL,kBAAC,GAAD;IAEE,SAAS;IACT,MAAM;IACN,eAAe,EAAc,EAAK;IAClC,QAAQ;GACT,GALM,GAAU,MAAM,MAKtB;GACD,kBAAC,GAAD;IACE,MAAM;IACN,OAAM;IACN,aAAY;IACZ,QAAO;IACP,UAAU;IACV,eAAe,EAAa,EAAK;IACjC,cAAc;GACf,CAAA;EACE;;AAET"}
1	+ {"version":3,"file":"InboxPattern.js","names":[],"sources":["../../../../ui/patterns/InboxPattern/InboxPattern.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport { Avatar } from \"../../Avatar\";\nimport { Badge } from \"../../Badge\";\nimport { Button } from \"../../Button\";\nimport { Cell } from \"../../Cell\";\nimport { Empty } from \"../../Empty\";\nimport { PageHeader } from \"../../PageHeader\";\nimport type { PageHeaderProps } from \"../../PageHeader\";\nimport { Scoreboard } from \"../../Scoreboard\";\nimport { Section } from \"../../Section\";\nimport { Table } from \"../../Table\";\nimport { Tabs } from \"../../Tabs\";\nimport { Toast } from \"../../Toast\";\nimport { filterMessages, INBOX, type InboxMessage } from \"./inbox-data\";\nimport { InboxReplyDrawer } from \"./InboxReplyDrawer\";\nimport styles from \"./InboxPattern.module.css\";\n\nconst COLUMNS = [\n { key: \"from\", header: \"From\", emphasis: true },\n { key: \"subject\", header: \"Subject\" },\n { key: \"kind\", header: \"Type\" },\n { key: \"when\", header: \"When\" },\n { key: \"open\", header: \"\" },\n];\n\nfunction InboxTable({\n messages,\n onOpen,\n}: {\n messages: InboxMessage[];\n onOpen: (id: string) => void;\n}) {\n return (\n <Table\n caption=\"Inbox\"\n size=\"sm\"\n emptyLabel=\"No messages in this filter.\"\n columns={COLUMNS}\n rows={messages.map((item) => ({\n from: <Cell type=\"avatar\" size=\"sm\" name={item.from} src={item.fromSrc} label={item.from} />,\n subject: item.subject,\n kind: <Badge tone={item.kindTone} size=\"sm\">{item.kind}</Badge>,\n when: item.when,\n open: (\n <Button variant=\"tertiary\" size=\"sm\" onClick={() => onOpen(item.id)}>\n Open\n </Button>\n ),\n }))}\n />\n );\n}\n\nexport interface InboxPatternProps {\n breadcrumbs?: PageHeaderProps[\"breadcrumbs\"];\n}\n\nexport function InboxPattern({ breadcrumbs }: InboxPatternProps) {\n const [messages, setMessages] = useState(INBOX);\n const [tab, setTab] = useState(\"all\");\n const [selectedId, setSelectedId] = useState<string \| null>(INBOX[0]?.id ?? null);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [toastOpen, setToastOpen] = useState(false);\n\n const selected = messages.find((item) => item.id === selectedId) ?? null;\n const unread = messages.filter((item) => item.unread).length;\n\n useEffect(() => {\n const next = filterMessages(messages, tab);\n if (selectedId && next.some((item) => item.id === selectedId)) return;\n setSelectedId(next[0]?.id ?? null);\n setDrawerOpen(false);\n }, [selectedId, tab, messages]);\n\n function archive(id: string) {\n setMessages((current) => current.filter((item) => item.id !== id));\n setDrawerOpen(false);\n }\n\n function openMessage(id: string) {\n setSelectedId(id);\n setDrawerOpen(true);\n }\n\n function sendReply() {\n if (!selected) return;\n setMessages((current) =>\n current.map((item) => (item.id === selected.id ? { ...item, unread: false } : item)),\n );\n setToastOpen(true);\n }\n\n return (\n <div className=\"layout-canvas layout-canvas--sticky-header\">\n <div className=\"layout-header\">\n <PageHeader\n title=\"Inbox\"\n subtitle=\"Replies, mentions, and requests waiting on you.\"\n breadcrumbs={breadcrumbs}\n />\n </div>\n <div className=\"layout-content\">\n <Section title=\"At a glance\">\n <Scoreboard\n aria-label=\"Inbox this week\"\n items={[\n { label: \"Unread\", value: String(unread), delta: `+${unread}`, trend: \"up\" as const, hint: \"need a look\", size: \"lg\" as const, badge: \"Live\", badgeTone: \"danger\" as const },\n { label: \"Mentions\", value: String(messages.filter((item) => item.kind === \"Mention\").length), delta: \"+1\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"You\", badgeTone: \"brand\" as const },\n { label: \"Requests\", value: String(messages.filter((item) => item.kind === \"Request\").length), delta: \"+2\", trend: \"up\" as const, hint: \"this sprint\", size: \"lg\" as const, badge: \"Review\", badgeTone: \"warning\" as const },\n { label: \"Open\", value: String(messages.length), delta: \"0\", trend: \"flat\" as const, hint: \"in inbox\", size: \"lg\" as const, badge: \"Sprint\", badgeTone: \"info\" as const },\n ]}\n />\n </Section>\n <Section title=\"Messages\" description={`${unread} unread`}>\n <Tabs\n ariaLabel=\"Inbox type\"\n variant=\"line\"\n size=\"md\"\n value={tab}\n onChange={setTab}\n items={[\n { id: \"all\", label: \"All\", content: <InboxTable messages={filterMessages(messages, \"all\")} onOpen={openMessage} /> },\n { id: \"unread\", label: \"Unread\", content: <InboxTable messages={filterMessages(messages, \"unread\")} onOpen={openMessage} /> },\n { id: \"mentions\", label: \"Mentions\", content: <InboxTable messages={filterMessages(messages, \"mentions\")} onOpen={openMessage} /> },\n { id: \"requests\", label: \"Requests\", content: <InboxTable messages={filterMessages(messages, \"requests\")} onOpen={openMessage} /> },\n ]}\n />\n </Section>\n <Section\n title={selected?.subject ?? \"Message\"}\n description={selected ? `${selected.from} · ${selected.when}` : \"Select a row\"}\n actions={\n selected ? (\n <>\n <Button variant=\"secondary\" size=\"sm\" onClick={() => archive(selected.id)}>\n Archive\n </Button>\n <Button\n variant={drawerOpen ? \"secondary\" : \"primary\"}\n size=\"sm\"\n onClick={() => openMessage(selected.id)}\n >\n Reply\n </Button>\n </>\n ) : undefined\n }\n >\n {selected ? (\n <div className={styles.detail}>\n <div className={styles.meta}>\n <Avatar name={selected.from} src={selected.fromSrc} size=\"md\" />\n <div className={styles.copy}>\n <p className={styles.label}>From</p>\n <p className={styles.value}>{selected.from}</p>\n </div>\n <Badge tone={selected.kindTone}>{selected.kind}</Badge>\n </div>\n <p className={styles.body}>{selected.body}</p>\n </div>\n ) : (\n <Empty\n title=\"No message selected\"\n description=\"Open a row to read it here.\"\n icon=\"Mail\"\n outlined\n />\n )}\n </Section>\n </div>\n <InboxReplyDrawer\n key={selected?.id ?? \"none\"}\n message={selected}\n open={drawerOpen}\n onClose={() => setDrawerOpen(false)}\n onSend={sendReply}\n />\n <Toast\n open={toastOpen}\n title=\"Reply sent\"\n description=\"It will show up in the thread.\"\n status=\"success\"\n duration={3000}\n onClose={() => setToastOpen(false)}\n onOpenChange={setToastOpen}\n />\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/ui/shared/ChartFrame.js CHANGED Viewed

@@ -7,7 +7,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
 function s({ title: s, description: c, legend: l, children: u, table: d, footnote: f, isEmpty: p = !1, emptyLabel: m = "No data for this range", isLoading: h = !1, className: g = "" }) {
 	let [_, v] = n("chart"), y = t(), b = t(), x = t(), S = _ === "table" && !!d;
 	return /* @__PURE__ */ o("figure", {
-		className: `${e.frame} ${g}`.trim(),
+		className: `${s || c || d || f || l ? e.frame : e.flush} ${g}`.trim(),
 		"aria-labelledby": s ? y : void 0,
 		"aria-describedby": c ? b : void 0,
 		children: [

package/dist/ui/shared/ChartFrame.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartFrame.js","names":[],"sources":["../../../ui/shared/ChartFrame.tsx"],"sourcesContent":["\"use client\";\n\nimport { BarChart3, Table2 } from \"lucide-react\";\nimport { useId, useState, type ReactNode } from \"react\";\nimport styles from \"./ChartFrame.module.css\";\n\nexport interface ChartFrameProps {\n title?: string;\n description?: string;\n legend?: ReactNode;\n children: ReactNode;\n table?: ReactNode;\n footnote?: string;\n isEmpty?: boolean;\n emptyLabel?: string;\n isLoading?: boolean;\n className?: string;\n}\n\nexport function ChartFrame({\n title,\n description,\n legend,\n children,\n table,\n footnote,\n isEmpty = false,\n emptyLabel = \"No data for this range\",\n isLoading = false,\n className = \"\",\n}: ChartFrameProps) {\n const [view, setView] = useState<\"chart\" \| \"table\">(\"chart\");\n const titleId = useId();\n const descriptionId = useId();\n const panelId = useId();\n const showTable = view === \"table\" && Boolean(table);\n\n return (\n <figure\n className={`${styles.frame} ${className}`.trim()}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={description ? descriptionId : undefined}\n >\n {title \|\| table ? (\n <figcaption className={styles.header}>\n <div className={styles.heading}>\n {title ? (\n <h3 id={titleId} className={styles.title}>\n {title}\n </h3>\n ) : null}\n {description ? (\n <p id={descriptionId} className={styles.description}>\n {description}\n </p>\n ) : null}\n </div>\n {table ? (\n <div className={styles.actions}>\n <button\n type=\"button\"\n className={styles.toggle}\n onClick={() => setView(showTable ? \"chart\" : \"table\")}\n aria-expanded={showTable}\n aria-controls={panelId}\n >\n {showTable ? <BarChart3 aria-hidden=\"true\" size={14} /> : <Table2 aria-hidden=\"true\" size={14} />}\n <span>{showTable ? \"Chart\" : \"Table\"}</span>\n </button>\n </div>\n ) : null}\n </figcaption>\n ) : null}\n\n {legend}\n\n <div\n id={panelId}\n className={`${styles.body}${isLoading ? ` ${styles.loading}` : \"\"}`}\n >\n {isEmpty ? <p className={styles.empty}>{emptyLabel}</p> : showTable ? table : children}\n </div>\n\n {footnote ? <p className={styles.footnote}>{footnote}</p> : null}\n </figure>\n );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAW,EACzB,UACA,gBACA,WACA,aACA,UACA,aACA,aAAU,IACV,gBAAa,0BACb,eAAY,IACZ,eAAY,MACM;CAClB,IAAM,CAAC,GAAM,KAAW,EAA4B,OAAO,GACrD,IAAU,EAAM,GAChB,IAAgB,EAAM,GACtB,IAAU,EAAM,GAChB,IAAY,MAAS,WAAW,EAAQ;~~CAE9C~~,OACE,kBAAC,UAAD;EACE,WAAW,~~GAAG~~,EAAO,MAAM,GAAG,IAAY,KAAK;~~EAC/C~~,mBAAiB,IAAQ,IAAU,KAAA;EACnC,oBAAkB,IAAc,IAAgB,KAAA;EAHlD,UAAA;GAKG,KAAS,IACR,kBAAC,cAAD;IAAY,WAAW,EAAO;IAA9B,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAvB,UAAA,CACG,IACC,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAW,EAAO;MAChC,UAAA;KACC,CAAA,IACF,MACH,IACC,kBAAC,KAAD;MAAG,IAAI;MAAe,WAAW,EAAO;MACrC,UAAA;KACA,CAAA,IACD,IACD;IACJ,CAAA,GAAA,IACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KACrB,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,EAAQ,IAAY,UAAU,OAAO;MACpD,iBAAe;MACf,iBAAe;MALjB,UAAA,CAOe,EAAZ,IAAa,IAA6C,GAA9C;OAAW,eAAY;OAAO,MAAM;MAAK,CAA0C,GAChG,kBAAC,QAAD,EAAA,UAAO,IAAY,UAAU,QAAc,CAAA,CACrC;;IACL,CAAA,IACH,IACM;GACV,CAAA,IAAA;GAEH;GAED,kBAAC,OAAD;IACE,IAAI;IACJ,WAAW,GAAG,EAAO,OAAO,IAAY,IAAI,EAAO,YAAY;IAE9D,UAAA,IAAU,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAQ,UAAA;IAAc,CAAA,IAAI,IAAY,IAAQ;GAC3E,CAAA;GAEJ,IAAW,kBAAC,KAAD;IAAG,WAAW,EAAO;IAAW,UAAA;GAAY,CAAA,IAAI;EACtD;;AAEZ"}
1	+ {"version":3,"file":"ChartFrame.js","names":[],"sources":["../../../ui/shared/ChartFrame.tsx"],"sourcesContent":["\"use client\";\n\nimport { BarChart3, Table2 } from \"lucide-react\";\nimport { useId, useState, type ReactNode } from \"react\";\nimport styles from \"./ChartFrame.module.css\";\n\nexport interface ChartFrameProps {\n title?: string;\n description?: string;\n legend?: ReactNode;\n children: ReactNode;\n table?: ReactNode;\n footnote?: string;\n isEmpty?: boolean;\n emptyLabel?: string;\n isLoading?: boolean;\n className?: string;\n}\n\nexport function ChartFrame({\n title,\n description,\n legend,\n children,\n table,\n footnote,\n isEmpty = false,\n emptyLabel = \"No data for this range\",\n isLoading = false,\n className = \"\",\n}: ChartFrameProps) {\n const [view, setView] = useState<\"chart\" \| \"table\">(\"chart\");\n const titleId = useId();\n const descriptionId = useId();\n const panelId = useId();\n const showTable = view === \"table\" && Boolean(table);\n const hasChrome = Boolean(title \|\| description \|\| table \|\| footnote \|\| legend);\n\n return (\n <figure\n className={`${hasChrome ? styles.frame : styles.flush} ${className}`.trim()}\n aria-labelledby={title ? titleId : undefined}\n aria-describedby={description ? descriptionId : undefined}\n >\n {title \|\| table ? (\n <figcaption className={styles.header}>\n <div className={styles.heading}>\n {title ? (\n <h3 id={titleId} className={styles.title}>\n {title}\n </h3>\n ) : null}\n {description ? (\n <p id={descriptionId} className={styles.description}>\n {description}\n </p>\n ) : null}\n </div>\n {table ? (\n <div className={styles.actions}>\n <button\n type=\"button\"\n className={styles.toggle}\n onClick={() => setView(showTable ? \"chart\" : \"table\")}\n aria-expanded={showTable}\n aria-controls={panelId}\n >\n {showTable ? <BarChart3 aria-hidden=\"true\" size={14} /> : <Table2 aria-hidden=\"true\" size={14} />}\n <span>{showTable ? \"Chart\" : \"Table\"}</span>\n </button>\n </div>\n ) : null}\n </figcaption>\n ) : null}\n\n {legend}\n\n <div\n id={panelId}\n className={`${styles.body}${isLoading ? ` ${styles.loading}` : \"\"}`}\n >\n {isEmpty ? <p className={styles.empty}>{emptyLabel}</p> : showTable ? table : children}\n </div>\n\n {footnote ? <p className={styles.footnote}>{footnote}</p> : null}\n </figure>\n );\n}\n"],"mappings":";;;;;;AAmBA,SAAgB,EAAW,EACzB,UACA,gBACA,WACA,aACA,UACA,aACA,aAAU,IACV,gBAAa,0BACb,eAAY,IACZ,eAAY,MACM;CAClB,IAAM,CAAC,GAAM,KAAW,EAA4B,OAAO,GACrD,IAAU,EAAM,GAChB,IAAgB,EAAM,GACtB,IAAU,EAAM,GAChB,IAAY,MAAS,WAAW,EAAQ;CAG9C,OACE,kBAAC,UAAD;EACE,WAAW,GAJW,KAAS,KAAe,KAAS,KAAY,IAIzC,EAAO,QAAQ,EAAO,MAAM,GAAG,IAAY,KAAK;EAC1E,mBAAiB,IAAQ,IAAU,KAAA;EACnC,oBAAkB,IAAc,IAAgB,KAAA;EAHlD,UAAA;GAKG,KAAS,IACR,kBAAC,cAAD;IAAY,WAAW,EAAO;IAA9B,UAAA,CACE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAvB,UAAA,CACG,IACC,kBAAC,MAAD;MAAI,IAAI;MAAS,WAAW,EAAO;MAChC,UAAA;KACC,CAAA,IACF,MACH,IACC,kBAAC,KAAD;MAAG,IAAI;MAAe,WAAW,EAAO;MACrC,UAAA;KACA,CAAA,IACD,IACD;IACJ,CAAA,GAAA,IACC,kBAAC,OAAD;KAAK,WAAW,EAAO;KACrB,UAAA,kBAAC,UAAD;MACE,MAAK;MACL,WAAW,EAAO;MAClB,eAAe,EAAQ,IAAY,UAAU,OAAO;MACpD,iBAAe;MACf,iBAAe;MALjB,UAAA,CAOe,EAAZ,IAAa,IAA6C,GAA9C;OAAW,eAAY;OAAO,MAAM;MAAK,CAA0C,GAChG,kBAAC,QAAD,EAAA,UAAO,IAAY,UAAU,QAAc,CAAA,CACrC;;IACL,CAAA,IACH,IACM;GACV,CAAA,IAAA;GAEH;GAED,kBAAC,OAAD;IACE,IAAI;IACJ,WAAW,GAAG,EAAO,OAAO,IAAY,IAAI,EAAO,YAAY;IAE9D,UAAA,IAAU,kBAAC,KAAD;KAAG,WAAW,EAAO;KAAQ,UAAA;IAAc,CAAA,IAAI,IAAY,IAAQ;GAC3E,CAAA;GAEJ,IAAW,kBAAC,KAAD;IAAG,WAAW,EAAO;IAAW,UAAA;GAAY,CAAA,IAAI;EACtD;;AAEZ"}

package/dist/ui/shared/ChartFrame.kit.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._frame_ioq0h_1 {
+._frame_1gfzm_1 {
   display: grid;
   gap: var(--space-4);
   margin: 0;
@@ -13,7 +13,21 @@
   color: var(--text-primary);
 }
-._header_ioq0h_16 {
+._flush_1gfzm_16 {
+  display: grid;
+  gap: var(--space-4);
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--text-primary);
+}
+._header_1gfzm_30 {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-start;
@@ -22,13 +36,13 @@
   min-width: 0;
 }
-._heading_ioq0h_25 {
+._heading_1gfzm_39 {
   display: grid;
   gap: var(--space-1);
   min-width: 0;
 }
-._title_ioq0h_31 {
+._title_1gfzm_45 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-heading-sm);
@@ -37,7 +51,7 @@
   color: var(--text-primary);
 }
-._description_ioq0h_40 {
+._description_1gfzm_54 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-caption);
@@ -45,13 +59,13 @@
   color: var(--text-secondary);
 }
-._actions_ioq0h_48 {
+._actions_1gfzm_62 {
   display: flex;
   align-items: center;
   gap: var(--space-1);
 }
-._toggle_ioq0h_54 {
+._toggle_1gfzm_68 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
@@ -69,27 +83,27 @@
     border-color var(--motion-interaction-duration) var(--motion-interaction-easing);
 }
-._toggle_ioq0h_54:hover {
+._toggle_1gfzm_68:hover {
   border-color: var(--border-strong);
   color: var(--text-primary);
 }
-._toggle_ioq0h_54:focus-visible {
+._toggle_1gfzm_68:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
-._body_ioq0h_82 {
+._body_1gfzm_96 {
   min-width: 0;
   overflow: visible;
 }
-._loading_ioq0h_87 {
+._loading_1gfzm_101 {
   opacity: 0.6;
   transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);
 }
-._empty_ioq0h_92 {
+._empty_1gfzm_106 {
   display: grid;
   place-items: center;
   min-height: 15rem;
@@ -101,14 +115,14 @@
   color: var(--text-muted);
 }
-._footnote_ioq0h_104 {
+._footnote_1gfzm_118 {
   margin: 0;
   font-family: var(--font-sans);
   font-size: var(--type-size-caption);
   color: var(--text-muted);
 }
-._legend_ioq0h_111 {
+._legend_1gfzm_125 {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2) var(--space-4);
@@ -117,17 +131,17 @@
   list-style: none;
 }
-._legendInteractive_ioq0h_120 > li {
+._legendInteractive_1gfzm_134 > li {
   display: contents;
 }
-._legendVertical_ioq0h_124 {
+._legendVertical_1gfzm_138 {
   display: grid;
   gap: var(--space-2);
   align-content: center;
 }
-._legendItem_ioq0h_130 {
+._legendItem_1gfzm_144 {
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
@@ -136,7 +150,7 @@
   color: var(--text-secondary);
 }
-._legendVertical_ioq0h_124 ._legendItem_ioq0h_130 {
+._legendVertical_1gfzm_138 ._legendItem_1gfzm_144 {
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -144,7 +158,7 @@
   width: 100%;
 }
-._legendButton_ioq0h_147 {
+._legendButton_1gfzm_161 {
   margin: 0;
   padding: 0;
   border: 0;
@@ -157,40 +171,40 @@
   transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1);
 }
-._legendButton_ioq0h_147:focus-visible {
+._legendButton_1gfzm_161:focus-visible {
   outline: var(--border-focus-width) solid var(--focus-ring);
   outline-offset: var(--space-inset-2xs);
 }
-._legendItemDimmed_ioq0h_165 {
+._legendItemDimmed_1gfzm_179 {
   opacity: 0.45;
 }
-._legendSwatch_ioq0h_169 {
+._legendSwatch_1gfzm_183 {
   width: 0.625rem;
   height: 0.625rem;
   border-radius: var(--radius-control-sm);
   flex: none;
 }
-._legendSwatchPill_ioq0h_176 {
+._legendSwatchPill_1gfzm_190 {
   width: 0.5rem;
   height: 0.375rem;
   border-radius: var(--radius-pill);
 }
-._legendSwatchLine_ioq0h_182 {
+._legendSwatchLine_1gfzm_196 {
   width: 0.75rem;
   height: 0.156rem;
   border-radius: var(--radius-pill);
 }
-._legendMeta_ioq0h_188 {
+._legendMeta_1gfzm_202 {
   color: var(--text-muted);
   font-variant-numeric: tabular-nums;
 }
-._legendPercent_ioq0h_193 {
+._legendPercent_1gfzm_207 {
   color: var(--text-primary);
   font-variant-numeric: tabular-nums;
   font-weight: var(--type-weight-label);
@@ -198,16 +212,16 @@
 }
 @media (prefers-reduced-motion: reduce) {
-  ._legendButton_ioq0h_147 {
+  ._legendButton_1gfzm_161 {
     transition: none;
   }
 }
-._tableScroll_ioq0h_206 {
+._tableScroll_1gfzm_220 {
   overflow-x: auto;
 }
-._table_ioq0h_206 {
+._table_1gfzm_220 {
   width: 100%;
   border-collapse: collapse;
   font-family: var(--font-sans);
@@ -215,33 +229,33 @@
   line-height: var(--type-line-body);
 }
-._table_ioq0h_206 th,
-._table_ioq0h_206 td {
+._table_1gfzm_220 th,
+._table_1gfzm_220 td {
   padding: var(--space-1) var(--space-2);
   border-bottom: var(--border-width-thin) solid var(--border-faint);
   text-align: start;
   background-color: var(--surface-card);
 }
-._table_ioq0h_206 thead th {
+._table_1gfzm_220 thead th {
   color: var(--text-secondary);
   font-size: var(--type-size-caption);
   font-weight: var(--type-weight-label);
   white-space: nowrap;
 }
-._table_ioq0h_206 tbody th {
+._table_1gfzm_220 tbody th {
   color: var(--text-primary);
   font-weight: var(--type-weight-label);
 }
-._table_ioq0h_206 td {
+._table_1gfzm_220 td {
   color: var(--text-primary);
   font-variant-numeric: tabular-nums;
   text-align: end;
 }
-._tooltip_ioq0h_244 {
+._tooltip_1gfzm_258 {
   position: absolute;
   z-index: var(--z-tooltip);
   min-width: 9.5rem;
@@ -256,18 +270,18 @@
   transform: translate(0.5rem, -50%);
 }
-._tooltipFlip_ioq0h_259 {
+._tooltipFlip_1gfzm_273 {
   transform: translate(calc(-100% - 0.5rem), -50%);
 }
-._tooltipTitle_ioq0h_263 {
+._tooltipTitle_1gfzm_277 {
   margin: 0;
   font-size: var(--type-size-caption);
   font-weight: var(--type-weight-label);
   color: var(--text-primary);
 }
-._tooltipRow_ioq0h_270 {
+._tooltipRow_1gfzm_284 {
   display: flex;
   align-items: center;
   gap: var(--space-2);
@@ -276,19 +290,19 @@
   color: var(--text-secondary);
 }
-._tooltipKey_ioq0h_279 {
+._tooltipKey_1gfzm_293 {
   width: 0.5rem;
   height: 0.375rem;
   border-radius: var(--radius-pill);
   flex: none;
 }
-._tooltipShare_ioq0h_286 {
+._tooltipShare_1gfzm_300 {
   flex: 1;
   min-width: 0;
 }
-._tooltipValue_ioq0h_291 {
+._tooltipValue_1gfzm_305 {
   color: var(--text-primary);
   font-variant-numeric: tabular-nums;
   font-weight: var(--type-weight-label);

package/dist/ui/shared/ChartFrame.module.js CHANGED Viewed

@@ -1,39 +1,40 @@
 import "./ChartFrame.kit.css";
 //#region ui/shared/ChartFrame.module.css
-var e = "_frame_ioq0h_1", t = "_header_ioq0h_16", n = "_heading_ioq0h_25", r = "_title_ioq0h_31", i = "_description_ioq0h_40", a = "_actions_ioq0h_48", o = "_toggle_ioq0h_54", s = "_body_ioq0h_82", c = "_loading_ioq0h_87", l = "_empty_ioq0h_92", u = "_footnote_ioq0h_104", d = "_legend_ioq0h_111", f = "_legendInteractive_ioq0h_120", p = "_legendVertical_ioq0h_124", m = "_legendItem_ioq0h_130", h = "_legendButton_ioq0h_147", g = "_legendItemDimmed_ioq0h_165", _ = "_legendSwatch_ioq0h_169", v = "_legendSwatchPill_ioq0h_176", y = "_legendSwatchLine_ioq0h_182", b = "_legendMeta_ioq0h_188", x = "_legendPercent_ioq0h_193", S = "_tableScroll_ioq0h_206", C = "_table_ioq0h_206", w = "_tooltip_ioq0h_244", T = "_tooltipFlip_ioq0h_259", E = "_tooltipTitle_ioq0h_263", D = "_tooltipRow_ioq0h_270", O = "_tooltipKey_ioq0h_279", k = "_tooltipShare_ioq0h_286", A = "_tooltipValue_ioq0h_291", j = {
+var e = "_frame_1gfzm_1", t = "_flush_1gfzm_16", n = "_header_1gfzm_30", r = "_heading_1gfzm_39", i = "_title_1gfzm_45", a = "_description_1gfzm_54", o = "_actions_1gfzm_62", s = "_toggle_1gfzm_68", c = "_body_1gfzm_96", l = "_loading_1gfzm_101", u = "_empty_1gfzm_106", d = "_footnote_1gfzm_118", f = "_legend_1gfzm_125", p = "_legendInteractive_1gfzm_134", m = "_legendVertical_1gfzm_138", h = "_legendItem_1gfzm_144", g = "_legendButton_1gfzm_161", _ = "_legendItemDimmed_1gfzm_179", v = "_legendSwatch_1gfzm_183", y = "_legendSwatchPill_1gfzm_190", b = "_legendSwatchLine_1gfzm_196", x = "_legendMeta_1gfzm_202", S = "_legendPercent_1gfzm_207", C = "_tableScroll_1gfzm_220", w = "_table_1gfzm_220", T = "_tooltip_1gfzm_258", E = "_tooltipFlip_1gfzm_273", D = "_tooltipTitle_1gfzm_277", O = "_tooltipRow_1gfzm_284", k = "_tooltipKey_1gfzm_293", A = "_tooltipShare_1gfzm_300", j = "_tooltipValue_1gfzm_305", M = {
 	frame: e,
-	header: t,
-	heading: n,
-	title: r,
-	description: i,
-	actions: a,
-	toggle: o,
-	body: s,
-	loading: c,
-	empty: l,
-	footnote: u,
-	legend: d,
-	legendInteractive: f,
-	legendVertical: p,
-	legendItem: m,
-	legendButton: h,
-	legendItemDimmed: g,
-	legendSwatch: _,
-	legendSwatchPill: v,
-	legendSwatchLine: y,
-	legendMeta: b,
-	legendPercent: x,
-	tableScroll: S,
-	table: C,
-	tooltip: w,
-	tooltipFlip: T,
-	tooltipTitle: E,
-	tooltipRow: D,
-	tooltipKey: O,
-	tooltipShare: k,
-	tooltipValue: A
+	flush: t,
+	header: n,
+	heading: r,
+	title: i,
+	description: a,
+	actions: o,
+	toggle: s,
+	body: c,
+	loading: l,
+	empty: u,
+	footnote: d,
+	legend: f,
+	legendInteractive: p,
+	legendVertical: m,
+	legendItem: h,
+	legendButton: g,
+	legendItemDimmed: _,
+	legendSwatch: v,
+	legendSwatchPill: y,
+	legendSwatchLine: b,
+	legendMeta: x,
+	legendPercent: S,
+	tableScroll: C,
+	table: w,
+	tooltip: T,
+	tooltipFlip: E,
+	tooltipTitle: D,
+	tooltipRow: O,
+	tooltipKey: k,
+	tooltipShare: A,
+	tooltipValue: j
 };
 //#endregion
-export { a as actions, s as body, j as default, i as description, l as empty, u as footnote, e as frame, t as header, n as heading, d as legend, h as legendButton, f as legendInteractive, m as legendItem, g as legendItemDimmed, b as legendMeta, x as legendPercent, _ as legendSwatch, y as legendSwatchLine, v as legendSwatchPill, p as legendVertical, c as loading, C as table, S as tableScroll, r as title, o as toggle, w as tooltip, T as tooltipFlip, O as tooltipKey, D as tooltipRow, k as tooltipShare, E as tooltipTitle, A as tooltipValue };
+export { o as actions, c as body, M as default, a as description, u as empty, t as flush, d as footnote, e as frame, n as header, r as heading, f as legend, g as legendButton, p as legendInteractive, h as legendItem, _ as legendItemDimmed, x as legendMeta, S as legendPercent, v as legendSwatch, b as legendSwatchLine, y as legendSwatchPill, m as legendVertical, l as loading, w as table, C as tableScroll, i as title, s as toggle, T as tooltip, E as tooltipFlip, k as tooltipKey, O as tooltipRow, A as tooltipShare, D as tooltipTitle, j as tooltipValue };
 //# sourceMappingURL=ChartFrame.module.js.map

package/dist/ui/shared/ChartFrame.module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChartFrame.module.js","names":[],"sources":["../../../ui/shared/ChartFrame.module.css"],"sourcesContent":[".frame {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-6);\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-surface-md);\n background: var(--surface-card);\n box-shadow: var(--shadow-sm);\n color: var(--text-primary);\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-2);\n min-width: 0;\n}\n\n.heading {\n display: grid;\n gap: var(--space-1);\n min-width: 0;\n}\n\n.title {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-heading-sm);\n font-weight: var(--type-weight-heading);\n line-height: var(--type-line-heading);\n color: var(--text-primary);\n}\n\n.description {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n line-height: var(--type-line-body);\n color: var(--text-secondary);\n}\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n.toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-2);\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-control-sm);\n background: var(--surface-card);\n color: var(--text-secondary);\n cursor: pointer;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n transition:\n color var(--motion-interaction-duration) var(--motion-interaction-easing),\n border-color var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.toggle:hover {\n border-color: var(--border-strong);\n color: var(--text-primary);\n}\n\n.toggle:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n}\n\n.body {\n min-width: 0;\n overflow: visible;\n}\n\n.loading {\n opacity: 0.6;\n transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.empty {\n display: grid;\n place-items: center;\n min-height: 15rem;\n margin: 0;\n padding-inline: var(--space-4);\n text-align: center;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n color: var(--text-muted);\n}\n\n.footnote {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n color: var(--text-muted);\n}\n\n.legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.legendInteractive > li {\n display: contents;\n}\n\n.legendVertical {\n display: grid;\n gap: var(--space-2);\n align-content: center;\n}\n\n.legendItem {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n color: var(--text-secondary);\n}\n\n.legendVertical .legendItem {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n column-gap: var(--space-2);\n width: 100%;\n}\n\n.legendButton {\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n border-radius: var(--radius-control-sm);\n transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.legendButton:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n}\n\n.legendItemDimmed {\n opacity: 0.45;\n}\n\n.legendSwatch {\n width: 0.625rem;\n height: 0.625rem;\n border-radius: var(--radius-control-sm);\n flex: none;\n}\n\n.legendSwatchPill {\n width: 0.5rem;\n height: 0.375rem;\n border-radius: var(--radius-pill);\n}\n\n.legendSwatchLine {\n width: 0.75rem;\n height: 0.156rem;\n border-radius: var(--radius-pill);\n}\n\n.legendMeta {\n color: var(--text-muted);\n font-variant-numeric: tabular-nums;\n}\n\n.legendPercent {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n font-weight: var(--type-weight-label);\n text-align: end;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .legendButton {\n transition: none;\n }\n}\n\n.tableScroll {\n overflow-x: auto;\n}\n\n.table {\n width: 100%;\n border-collapse: collapse;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n line-height: var(--type-line-body);\n}\n\n.table th,\n.table td {\n padding: var(--space-1) var(--space-2);\n border-bottom: var(--border-width-thin) solid var(--border-faint);\n text-align: start;\n background-color: var(--surface-card);\n}\n\n.table thead th {\n color: var(--text-secondary);\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n white-space: nowrap;\n}\n\n.table tbody th {\n color: var(--text-primary);\n font-weight: var(--type-weight-label);\n}\n\n.table td {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n text-align: end;\n}\n\n.tooltip {\n position: absolute;\n z-index: var(--z-tooltip);\n min-width: 9.5rem;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-surface-md);\n background: var(--surface-card);\n box-shadow: var(--shadow-md);\n color: var(--text-primary);\n font-family: var(--font-sans);\n pointer-events: none;\n transform: translate(0.5rem, -50%);\n}\n\n.tooltipFlip {\n transform: translate(calc(-100% - 0.5rem), -50%);\n}\n\n.tooltipTitle {\n margin: 0;\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n color: var(--text-primary);\n}\n\n.tooltipRow {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-top: var(--space-1);\n font-size: var(--type-size-caption);\n color: var(--text-secondary);\n}\n\n.tooltipKey {\n width: 0.5rem;\n height: 0.375rem;\n border-radius: var(--radius-pill);\n flex: none;\n}\n\n.tooltipShare {\n flex: 1;\n min-width: 0;\n}\n\n.tooltipValue {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n font-weight: var(--type-weight-label);\n}\n"],"mappings":""}
1	+ {"version":3,"file":"ChartFrame.module.js","names":[],"sources":["../../../ui/shared/ChartFrame.module.css"],"sourcesContent":[".frame {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: var(--space-6);\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-surface-md);\n background: var(--surface-card);\n box-shadow: var(--shadow-sm);\n color: var(--text-primary);\n}\n\n.flush {\n display: grid;\n gap: var(--space-4);\n margin: 0;\n padding: 0;\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n border: 0;\n background: transparent;\n box-shadow: none;\n color: var(--text-primary);\n}\n\n.header {\n display: flex;\n flex-wrap: wrap;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--space-2);\n min-width: 0;\n}\n\n.heading {\n display: grid;\n gap: var(--space-1);\n min-width: 0;\n}\n\n.title {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-heading-sm);\n font-weight: var(--type-weight-heading);\n line-height: var(--type-line-heading);\n color: var(--text-primary);\n}\n\n.description {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n line-height: var(--type-line-body);\n color: var(--text-secondary);\n}\n\n.actions {\n display: flex;\n align-items: center;\n gap: var(--space-1);\n}\n\n.toggle {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-2);\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-control-sm);\n background: var(--surface-card);\n color: var(--text-secondary);\n cursor: pointer;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n transition:\n color var(--motion-interaction-duration) var(--motion-interaction-easing),\n border-color var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.toggle:hover {\n border-color: var(--border-strong);\n color: var(--text-primary);\n}\n\n.toggle:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n}\n\n.body {\n min-width: 0;\n overflow: visible;\n}\n\n.loading {\n opacity: 0.6;\n transition: opacity var(--motion-interaction-duration) var(--motion-interaction-easing);\n}\n\n.empty {\n display: grid;\n place-items: center;\n min-height: 15rem;\n margin: 0;\n padding-inline: var(--space-4);\n text-align: center;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n color: var(--text-muted);\n}\n\n.footnote {\n margin: 0;\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n color: var(--text-muted);\n}\n\n.legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-2) var(--space-4);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.legendInteractive > li {\n display: contents;\n}\n\n.legendVertical {\n display: grid;\n gap: var(--space-2);\n align-content: center;\n}\n\n.legendItem {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n font-family: var(--font-sans);\n font-size: var(--type-size-caption);\n color: var(--text-secondary);\n}\n\n.legendVertical .legendItem {\n display: grid;\n grid-template-columns: auto 1fr auto;\n align-items: center;\n column-gap: var(--space-2);\n width: 100%;\n}\n\n.legendButton {\n margin: 0;\n padding: 0;\n border: 0;\n background: transparent;\n font: inherit;\n color: inherit;\n text-align: inherit;\n cursor: pointer;\n border-radius: var(--radius-control-sm);\n transition: opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.legendButton:focus-visible {\n outline: var(--border-focus-width) solid var(--focus-ring);\n outline-offset: var(--space-inset-2xs);\n}\n\n.legendItemDimmed {\n opacity: 0.45;\n}\n\n.legendSwatch {\n width: 0.625rem;\n height: 0.625rem;\n border-radius: var(--radius-control-sm);\n flex: none;\n}\n\n.legendSwatchPill {\n width: 0.5rem;\n height: 0.375rem;\n border-radius: var(--radius-pill);\n}\n\n.legendSwatchLine {\n width: 0.75rem;\n height: 0.156rem;\n border-radius: var(--radius-pill);\n}\n\n.legendMeta {\n color: var(--text-muted);\n font-variant-numeric: tabular-nums;\n}\n\n.legendPercent {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n font-weight: var(--type-weight-label);\n text-align: end;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .legendButton {\n transition: none;\n }\n}\n\n.tableScroll {\n overflow-x: auto;\n}\n\n.table {\n width: 100%;\n border-collapse: collapse;\n font-family: var(--font-sans);\n font-size: var(--type-size-body-sm);\n line-height: var(--type-line-body);\n}\n\n.table th,\n.table td {\n padding: var(--space-1) var(--space-2);\n border-bottom: var(--border-width-thin) solid var(--border-faint);\n text-align: start;\n background-color: var(--surface-card);\n}\n\n.table thead th {\n color: var(--text-secondary);\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n white-space: nowrap;\n}\n\n.table tbody th {\n color: var(--text-primary);\n font-weight: var(--type-weight-label);\n}\n\n.table td {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n text-align: end;\n}\n\n.tooltip {\n position: absolute;\n z-index: var(--z-tooltip);\n min-width: 9.5rem;\n padding: var(--space-2) var(--space-3);\n border: var(--border-width-thin) solid var(--border-faint);\n border-radius: var(--radius-surface-md);\n background: var(--surface-card);\n box-shadow: var(--shadow-md);\n color: var(--text-primary);\n font-family: var(--font-sans);\n pointer-events: none;\n transform: translate(0.5rem, -50%);\n}\n\n.tooltipFlip {\n transform: translate(calc(-100% - 0.5rem), -50%);\n}\n\n.tooltipTitle {\n margin: 0;\n font-size: var(--type-size-caption);\n font-weight: var(--type-weight-label);\n color: var(--text-primary);\n}\n\n.tooltipRow {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n margin-top: var(--space-1);\n font-size: var(--type-size-caption);\n color: var(--text-secondary);\n}\n\n.tooltipKey {\n width: 0.5rem;\n height: 0.375rem;\n border-radius: var(--radius-pill);\n flex: none;\n}\n\n.tooltipShare {\n flex: 1;\n min-width: 0;\n}\n\n.tooltipValue {\n color: var(--text-primary);\n font-variant-numeric: tabular-nums;\n font-weight: var(--type-weight-label);\n}\n"],"mappings":""}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "agentic-ds-kit",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Code-only agentic design system: contracts, tokens, and React components.",
   "license": "MIT",
   "repository": {