entangle-ui 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # entangle-ui
 
+## 0.7.0
+
+### Minor Changes
+
+- [#44](https://github.com/SebastianWebdev/entangle-ui/pull/44) [`5529de0`](https://github.com/SebastianWebdev/entangle-ui/commit/5529de0c0eebb780e117f361997c52733ff8b66a) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - **v0.7.0 release — addresses the agent-ui audit findings.**
+
+  ### New components
+  - **Badge** (primitives): inline status indicator with `subtle`, `solid`, `outline`, and `dot` variants; named or raw colors; optional icon and remove button.
+  - **TextArea** (primitives): multi-line input with label / helper text / auto-resize (`minRows`/`maxRows`), char counter, and monospace mode. Visual parity with `Input`.
+  - **Divider** (layout): horizontal/vertical rule with `solid` / `dashed` / `dotted` variants and an optional centered label.
+  - **Spinner** (feedback): `ring` / `dots` / `pulse` variants; `xs`–`lg` sizes; honors `prefers-reduced-motion`.
+  - **EmptyState** (feedback): title + description + icon + action slots, `default`/`compact` variants, and a `loading` swap that renders a `Spinner`.
+  - **PageHeader** (layout): semantic `<header>` with icon, title, subtitle, breadcrumbs, and right-aligned actions.
+  - **Code** (primitives): small inline `<code>` primitive backed by the new `background.inset` token.
+  - **ListItem** (layout): list row with leading/trailing slots, selected/active/disabled states, keyboard-activatable when `onClick` is provided.
+  - **ChatMarkdownRenderer**: opt-in markdown renderer for `ChatMessage.renderContent` (bold/italic/code, lists, blockquotes, fenced code, GFM tables, safe links).
+
+  ### Bug fixes
+  - `ChatInput` now allows attachments-only submit — both controlled and uncontrolled paths check `attachments.length` in addition to the trimmed value; the send button stays enabled when attachments are queued.
+  - `ChatMessageList` auto-scroll is now streaming-aware: `useChatScroll` observes the content element's height via `ResizeObserver`, so the list stays pinned to the bottom when the last message grows token-by-token.
+  - `SplitPanePanel` now fills its wrapper (`width: 100%; height: 100%; minWidth: 0; minHeight: 0; box-sizing: border-box`) so nested `PanelSurface` / `ScrollArea` children with `height: 100%` lay out correctly.
+
+  ### New props & APIs
+  - `ChatMessage.maxWidth` and `ChatPanel.messageMaxWidth` — per-message and panel-level bubble width control via the new public `--etui-chat-message-max-width` CSS variable.
+  - `ChatMessageList.scrollApiRef` — imperative handle exposing `scrollToBottom`, `scrollTo`, `scrollToElement`, and `isAtBottom` for driving scroll from outside (search results, "jump to top" actions, etc.).
+  - `useChatScroll` now returns `scrollContentRef`, `scrollTo`, and `scrollToElement` alongside the existing API.
+  - `useChatInput` accepts `attachmentsCount` for attachments-only submit support.
+  - `Tabs.keepMounted` — parent-level cascade so every `TabPanel` stays mounted unless a child explicitly sets `keepMounted={false}`.
+
+  ### New theme tokens
+  - `colors.background.inset` — sunken surface for inline code, textarea backgrounds, and recessed preview areas.
+  - `colors.surface.row` / `colors.surface.rowHover` — list-row backgrounds that are lighter than `surface.hover` (which is reserved for interactive controls like buttons).
+
+  ### Developer experience
+  - `ThemeProvider` now accepts `globalScrollbars` (opt-in) which toggles consistent dark-theme scrollbar styling on `document.body`.
+  - Shared animation utilities (`animSpin`, `animPulse`, `animBlink`, `animFadeIn`) and keyframes (`spinKeyframe`, `pulseKeyframe`, `blinkKeyframe`, `fadeInKeyframe`) exported from the root. Each utility honors `prefers-reduced-motion`.
+
+  No breaking changes.
+
+## 0.6.3
+
+### Patch Changes
+
+- [#42](https://github.com/SebastianWebdev/entangle-ui/pull/42) [`e728388`](https://github.com/SebastianWebdev/entangle-ui/commit/e7283883d5323ff9eba8764991dd6b6af393b09a) Thanks [@SebastianWebdev](https://github.com/SebastianWebdev)! - Update README: remove alpha tag, add missing peer dependencies, export createCustomTheme from main entry point
+
 ## 0.6.2
 
 ### Patch Changes

package/README.md

@@ -11,15 +11,15 @@ React + TypeScript component library for building editor-style interfaces.
 
 ## Status
 
-This package is in alpha and still evolving.
+This package is still evolving.
 
-- API can change between alpha releases.
+- API can change between minor releases.
 - Use in production only if you are comfortable with rapid iteration.
 
 ## Installation
 
 ```bash
-npm install entangle-ui@alpha
+npm install entangle-ui
 ```
 
 Peer dependencies:
@@ -28,6 +28,8 @@ Peer dependencies:
 - `react-dom >= 19.1.0`
 - `@base-ui/react ^1.1.0`
 - `@floating-ui/react ^0.27.17`
+- `@vanilla-extract/dynamic ^2.1.5`
+- `@vanilla-extract/recipes ^0.5.7`
 
 ## Quick Start
 

package/dist/esm/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { getDefaultExportFromCjs };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/esm/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/_virtual/cssesc.js

@@ -1,4 +1,8 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { __require as requireCssesc } from '../node_modules/cssesc/cssesc.js';
 
-requireCssesc();
+var cssescExports = requireCssesc();
+var cssesc = /*@__PURE__*/getDefaultExportFromCjs(cssescExports);
+
+export { cssesc as default };
 //# sourceMappingURL=cssesc.js.map

package/dist/esm/_virtual/cssesc.js.map

@@ -1 +1 @@
-{"version":3,"file":"cssesc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"cssesc.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/_virtual/picocolors.js

@@ -0,0 +1,8 @@
+import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { __require as requirePicocolors } from '../node_modules/picocolors/picocolors.js';
+
+var picocolorsExports = /*@__PURE__*/ requirePicocolors();
+var pc = /*@__PURE__*/getDefaultExportFromCjs(picocolorsExports);
+
+export { pc as default };
+//# sourceMappingURL=picocolors.js.map

package/dist/esm/_virtual/picocolors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picocolors.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/esm/_virtual/picocolors2.js

@@ -0,0 +1,4 @@
+var picocolors = {exports: {}};
+
+export { picocolors as __module };
+//# sourceMappingURL=picocolors2.js.map

package/dist/esm/_virtual/picocolors2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"picocolors2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/assets/src/components/editor/ChatPanel/{ChatPanel.css.ts.vanilla-DPIGnZ4A.css → ChatPanel.css.ts.vanilla-BI5569ZO.css}

@@ -78,7 +78,7 @@
   flex-direction: column;
   gap: var(--etui-spacing-xs);
   min-width: 0;
-  max-width: 85%;
+  max-width: var(--etui-chat-message-max-width, 85%);
 }
 .ChatPanel_messageAvatarStyle__1c3e77rb {
   width: 24px;
@@ -686,6 +686,86 @@
   gap: var(--etui-spacing-sm);
   padding-top: var(--etui-spacing-xs);
 }
+.ChatPanel_markdownRootStyle__1c3e77r2c {
+  font-family: var(--etui-font-family-sans);
+  color: var(--etui-color-text-primary);
+  line-height: var(--etui-line-height-normal);
+  font-size: inherit;
+  word-break: break-word;
+}
+.ChatPanel_markdownParagraphStyle__1c3e77r2d {
+  margin: 0 0 var(--etui-spacing-sm) 0;
+}
+.ChatPanel_markdownParagraphStyle__1c3e77r2d:last-child {
+  margin-bottom: 0;
+}
+.ChatPanel_markdownHeadingStyle__1c3e77r2e {
+  margin: var(--etui-spacing-md) 0 var(--etui-spacing-sm) 0;
+  font-weight: var(--etui-font-weight-semibold);
+  line-height: var(--etui-line-height-tight);
+}
+.ChatPanel_markdownHeadingStyle__1c3e77r2e:first-child {
+  margin-top: 0;
+}
+.ChatPanel_markdownListStyle__1c3e77r2f {
+  margin: 0 0 var(--etui-spacing-sm) 0;
+  padding-left: var(--etui-spacing-xl);
+}
+.ChatPanel_markdownListStyle__1c3e77r2f:last-child {
+  margin-bottom: 0;
+}
+.ChatPanel_markdownListItemStyle__1c3e77r2g {
+  margin: 0;
+  padding: 0;
+}
+.ChatPanel_markdownLinkStyle__1c3e77r2h {
+  color: var(--etui-color-accent-primary);
+  text-decoration: none;
+}
+.ChatPanel_markdownLinkStyle__1c3e77r2h:hover {
+  text-decoration: underline;
+}
+.ChatPanel_markdownLinkStyle__1c3e77r2h:focus-visible {
+  outline: 1px solid var(--etui-color-border-focus);
+}
+.ChatPanel_markdownBlockquoteStyle__1c3e77r2i {
+  margin: 0 0 var(--etui-spacing-sm) 0;
+  padding: var(--etui-spacing-xs) var(--etui-spacing-md);
+  border-left: 3px solid var(--etui-color-border-default);
+  color: var(--etui-color-text-secondary);
+  background: var(--etui-color-bg-inset);
+  border-radius: var(--etui-radius-sm);
+}
+.ChatPanel_markdownBlockquoteStyle__1c3e77r2i:last-child {
+  margin-bottom: 0;
+}
+.ChatPanel_markdownHrStyle__1c3e77r2j {
+  border: 0;
+  height: 1px;
+  background: var(--etui-color-border-default);
+  margin: var(--etui-spacing-md) 0;
+}
+.ChatPanel_markdownTableStyle__1c3e77r2k {
+  border-collapse: collapse;
+  width: 100%;
+  font-size: var(--etui-font-size-sm);
+  margin: 0 0 var(--etui-spacing-sm) 0;
+}
+.ChatPanel_markdownTableStyle__1c3e77r2k:last-child {
+  margin-bottom: 0;
+}
+.ChatPanel_markdownThStyle__1c3e77r2l {
+  background: var(--etui-color-bg-secondary);
+  color: var(--etui-color-text-primary);
+  text-align: left;
+  font-weight: var(--etui-font-weight-semibold);
+  padding: var(--etui-spacing-xs) var(--etui-spacing-md);
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
+.ChatPanel_markdownTdStyle__1c3e77r2m {
+  padding: var(--etui-spacing-xs) var(--etui-spacing-md);
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
 @media (prefers-reduced-motion: reduce) {
   .ChatPanel_typingIndicatorStyle__1c3e77rz {
     animation-duration: 0s;

package/dist/esm/assets/src/components/feedback/EmptyState/EmptyState.css.ts.vanilla-B_TWsTOW.css

@@ -0,0 +1,58 @@
+.EmptyState_emptyStateRecipe__1ihe8h10 {
+  display: flex;
+  font-family: var(--etui-font-family-sans);
+  color: var(--etui-color-text-primary);
+}
+.EmptyState_emptyStateRecipe_variant_default__1ihe8h11 {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--etui-spacing-md);
+  padding: var(--etui-spacing-xxl);
+  text-align: center;
+}
+.EmptyState_emptyStateRecipe_variant_compact__1ihe8h12 {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--etui-spacing-md);
+  padding: var(--etui-spacing-sm) var(--etui-spacing-md);
+  text-align: left;
+}
+.EmptyState_emptyStateIconStyle__1ihe8h13 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--etui-color-text-muted);
+}
+.EmptyState_emptyStateTitleStyle__1ihe8h14 {
+  margin: 0;
+  font-size: var(--etui-font-size-lg);
+  font-weight: var(--etui-font-weight-semibold);
+  line-height: var(--etui-line-height-tight);
+  color: var(--etui-color-text-primary);
+}
+.EmptyState_emptyStateDescriptionStyle__1ihe8h15 {
+  margin: 0;
+  font-size: var(--etui-font-size-sm);
+  line-height: var(--etui-line-height-normal);
+  color: var(--etui-color-text-muted);
+  max-width: 48ch;
+}
+.EmptyState_emptyStateTextColumnStyle__1ihe8h16 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--etui-spacing-xs);
+  align-items: center;
+}
+.EmptyState_emptyStateTextColumnCompactStyle__1ihe8h17 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--etui-spacing-xs);
+  align-items: flex-start;
+  flex: 1;
+}
+.EmptyState_emptyStateActionStyle__1ihe8h18 {
+  margin-top: var(--etui-spacing-md);
+  display: inline-flex;
+  gap: var(--etui-spacing-sm);
+}

package/dist/esm/assets/src/components/feedback/Spinner/Spinner.css.ts.vanilla-DEUewqdK.css

@@ -0,0 +1,80 @@
+.Spinner_spinnerRootStyle__670vre2 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--etui-spacing-sm);
+  color: var(--spinnerColorVar__670vre0);
+}
+.Spinner_spinnerRingStyle__670vre3 {
+  width: var(--spinnerSizeVar__670vre1);
+  height: var(--spinnerSizeVar__670vre1);
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: animations_spinKeyframe__1boy3ak0 1s linear infinite;
+}
+.Spinner_spinnerDotsWrapperStyle__670vre4 {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.Spinner_spinnerDotRecipe__670vre5 {
+  width: 25%;
+  height: 25%;
+  min-width: 3px;
+  min-height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+  animation: animations_pulseKeyframe__1boy3ak1 1.2s ease-in-out infinite;
+}
+.Spinner_spinnerDotRecipe_delay_0__670vre6 {
+  animation-delay: 0ms;
+}
+.Spinner_spinnerDotRecipe_delay_1__670vre7 {
+  animation-delay: 160ms;
+}
+.Spinner_spinnerDotRecipe_delay_2__670vre8 {
+  animation-delay: 320ms;
+}
+.Spinner_spinnerDotsSizerStyle__670vre9 {
+  display: inline-flex;
+  align-items: center;
+  gap: 15%;
+  width: var(--spinnerSizeVar__670vre1);
+  height: var(--spinnerSizeVar__670vre1);
+}
+.Spinner_spinnerPulseStyle__670vrea {
+  width: var(--spinnerSizeVar__670vre1);
+  height: var(--spinnerSizeVar__670vre1);
+  border-radius: 50%;
+  background: currentColor;
+  animation: animations_pulseKeyframe__1boy3ak1 1.2s ease-in-out infinite;
+}
+.Spinner_spinnerLabelStyle__670vreb {
+  font-size: var(--etui-font-size-sm);
+  color: var(--etui-color-text-secondary);
+}
+.Spinner_visuallyHiddenStyle__670vrec {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .Spinner_spinnerRingStyle__670vre3 {
+    animation: none;
+    opacity: 0.6;
+  }
+  .Spinner_spinnerDotRecipe__670vre5 {
+    animation: none;
+    opacity: 0.6;
+  }
+  .Spinner_spinnerPulseStyle__670vrea {
+    animation: none;
+    opacity: 0.6;
+  }
+}

package/dist/esm/assets/src/components/layout/Divider/Divider.css.ts.vanilla-CPvd_RW9.css

@@ -0,0 +1,72 @@
+.Divider_dividerRecipe__1desuf10 {
+  border: 0;
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+.Divider_dividerRecipe_orientation_horizontal__1desuf11 {
+  width: 100%;
+  height: 1px;
+}
+.Divider_dividerRecipe_orientation_vertical__1desuf12 {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+}
+.Divider_dividerRecipe_variant_solid__1desuf13 {
+  background: var(--etui-color-border-default);
+}
+.Divider_dividerRecipe_variant_dashed__1desuf14 {
+  background: transparent;
+  border-top-width: 1px;
+  border-top-style: dashed;
+  border-top-color: var(--etui-color-border-default);
+}
+.Divider_dividerRecipe_variant_dotted__1desuf15 {
+  background: transparent;
+  border-top-width: 1px;
+  border-top-style: dotted;
+  border-top-color: var(--etui-color-border-default);
+}
+.Divider_dividerRecipe_compound_0__1desuf16 {
+  background: transparent;
+  border-top: 0;
+  border-left-width: 1px;
+  border-left-style: dashed;
+  border-left-color: var(--etui-color-border-default);
+}
+.Divider_dividerRecipe_compound_1__1desuf17 {
+  background: transparent;
+  border-top: 0;
+  border-left-width: 1px;
+  border-left-style: dotted;
+  border-left-color: var(--etui-color-border-default);
+}
+.Divider_dividerWithLabelRecipe__1desuf18 {
+  display: flex;
+  align-items: center;
+  gap: var(--etui-spacing-md);
+  width: 100%;
+  color: var(--etui-color-text-muted);
+  font-family: var(--etui-font-family-sans);
+  font-size: var(--etui-font-size-xxs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: var(--etui-font-weight-semibold);
+}
+.Divider_dividerWithLabelRecipe__1desuf18::before, .Divider_dividerWithLabelRecipe__1desuf18::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--etui-color-border-default);
+}
+.Divider_dividerWithLabelRecipe_variant_dashed__1desuf1a::before, .Divider_dividerWithLabelRecipe_variant_dashed__1desuf1a::after {
+  background: transparent;
+  border-top: 1px dashed var(--etui-color-border-default);
+}
+.Divider_dividerWithLabelRecipe_variant_dotted__1desuf1b::before, .Divider_dividerWithLabelRecipe_variant_dotted__1desuf1b::after {
+  background: transparent;
+  border-top: 1px dotted var(--etui-color-border-default);
+}
+.Divider_dividerLabelTextStyle__1desuf1c {
+  flex-shrink: 0;
+}

package/dist/esm/assets/src/components/layout/ListItem/ListItem.css.ts.vanilla-BwAZrX2f.css

@@ -0,0 +1,68 @@
+.ListItem_listItemRecipe__9m667i0 {
+  display: flex;
+  align-items: center;
+  gap: var(--etui-spacing-md);
+  padding: 0 var(--etui-spacing-md);
+  background: var(--etui-color-surface-row);
+  color: var(--etui-color-text-primary);
+  font-family: var(--etui-font-family-sans);
+  font-size: var(--etui-font-size-md);
+  line-height: var(--etui-line-height-tight);
+  border-radius: var(--etui-radius-sm);
+  box-sizing: border-box;
+  width: 100%;
+  transition: background-color var(--etui-transition-fast);
+  outline: none;
+}
+.ListItem_listItemRecipe__9m667i0:hover:not([data-disabled="true"]) {
+  background: var(--etui-color-surface-row-hover);
+}
+.ListItem_listItemRecipe__9m667i0:focus-visible {
+  box-shadow: var(--etui-shadow-focus);
+}
+.ListItem_listItemRecipe_density_compact__9m667i1 {
+  height: 24px;
+  font-size: var(--etui-font-size-sm);
+}
+.ListItem_listItemRecipe_density_comfortable__9m667i2 {
+  height: 32px;
+}
+.ListItem_listItemRecipe_clickable_true__9m667i3 {
+  cursor: pointer;
+  user-select: none;
+}
+.ListItem_listItemRecipe_selected_true__9m667i5 {
+  background: color-mix(in srgb, var(--etui-color-accent-primary) 12%, transparent);
+}
+.ListItem_listItemRecipe_selected_true__9m667i5:hover:not([data-disabled="true"]) {
+  background: color-mix(in srgb, var(--etui-color-accent-primary) 16%, transparent);
+}
+.ListItem_listItemRecipe_active_true__9m667i7 {
+  background: color-mix(in srgb, var(--etui-color-accent-primary) 20%, transparent);
+}
+.ListItem_listItemRecipe_disabled_true__9m667i9 {
+  opacity: 0.5;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+.ListItem_listItemLeadingStyle__9m667ib {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--etui-color-text-secondary);
+  flex-shrink: 0;
+}
+.ListItem_listItemContentStyle__9m667ic {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ListItem_listItemTrailingStyle__9m667id {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--etui-spacing-sm);
+  color: var(--etui-color-text-muted);
+  flex-shrink: 0;
+}

package/dist/esm/assets/src/components/layout/PageHeader/PageHeader.css.ts.vanilla-DdbyyWAN.css

@@ -0,0 +1,70 @@
+.PageHeader_pageHeaderRecipe__1uiranp0 {
+  display: flex;
+  align-items: center;
+  font-family: var(--etui-font-family-sans);
+  color: var(--etui-color-text-primary);
+  gap: var(--etui-spacing-md);
+  box-sizing: border-box;
+  width: 100%;
+}
+.PageHeader_pageHeaderRecipe_size_sm__1uiranp1 {
+  padding: var(--etui-spacing-sm) var(--etui-spacing-md);
+}
+.PageHeader_pageHeaderRecipe_size_md__1uiranp2 {
+  padding: var(--etui-spacing-md) var(--etui-spacing-lg);
+}
+.PageHeader_pageHeaderRecipe_size_lg__1uiranp3 {
+  padding: var(--etui-spacing-lg) var(--etui-spacing-xl);
+}
+.PageHeader_pageHeaderRecipe_bordered_true__1uiranp4 {
+  border-bottom: 1px solid var(--etui-color-border-default);
+}
+.PageHeader_pageHeaderIconStyle__1uiranp6 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--etui-color-text-secondary);
+  flex-shrink: 0;
+}
+.PageHeader_pageHeaderTitleColumnStyle__1uiranp7 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--etui-spacing-xs);
+  min-width: 0;
+  flex: 1;
+}
+.PageHeader_pageHeaderTitleRecipe__1uiranp8 {
+  margin: 0;
+  line-height: var(--etui-line-height-tight);
+  font-weight: var(--etui-font-weight-semibold);
+  color: var(--etui-color-text-primary);
+}
+.PageHeader_pageHeaderTitleRecipe_size_sm__1uiranp9 {
+  font-size: var(--etui-font-size-md);
+}
+.PageHeader_pageHeaderTitleRecipe_size_md__1uiranpa {
+  font-size: var(--etui-font-size-lg);
+}
+.PageHeader_pageHeaderTitleRecipe_size_lg__1uiranpb {
+  font-size: var(--etui-font-size-xl);
+}
+.PageHeader_pageHeaderSubtitleStyle__1uiranpc {
+  margin: 0;
+  font-size: var(--etui-font-size-sm);
+  color: var(--etui-color-text-muted);
+  line-height: var(--etui-line-height-normal);
+}
+.PageHeader_pageHeaderBreadcrumbsStyle__1uiranpd {
+  display: flex;
+  align-items: center;
+  gap: var(--etui-spacing-xs);
+  font-size: var(--etui-font-size-xs);
+  color: var(--etui-color-text-muted);
+}
+.PageHeader_pageHeaderActionsStyle__1uiranpe {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--etui-spacing-sm);
+  flex-shrink: 0;
+}

package/dist/esm/assets/src/components/layout/SplitPane/{SplitPane.css.ts.vanilla-BFxdvwyI.css → SplitPane.css.ts.vanilla-BGFZ7zDa.css}

@@ -41,4 +41,9 @@
 }
 .SplitPane_panelStyle__13xgg0i8 {
   overflow: auto;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
 }

package/dist/esm/assets/src/components/primitives/Badge/Badge.css.ts.vanilla-DxCUcxYW.css

@@ -0,0 +1,95 @@
+.Badge_badgeRecipe__6943by2 {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--etui-spacing-sm);
+  font-family: var(--etui-font-family-sans);
+  font-weight: var(--etui-font-weight-semibold);
+  border-radius: var(--etui-radius-sm);
+  white-space: nowrap;
+  line-height: 1;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+}
+.Badge_badgeRecipe_size_xs__6943by3 {
+  height: 14px;
+  padding: 0 var(--etui-spacing-sm);
+  font-size: var(--etui-font-size-xxs);
+}
+.Badge_badgeRecipe_size_sm__6943by4 {
+  height: 16px;
+  padding: 0 var(--etui-spacing-sm);
+  font-size: var(--etui-font-size-xxs);
+}
+.Badge_badgeRecipe_size_md__6943by5 {
+  height: 20px;
+  padding: 0 var(--etui-spacing-md);
+  font-size: var(--etui-font-size-xs);
+}
+.Badge_badgeRecipe_size_lg__6943by6 {
+  height: 24px;
+  padding: 0 var(--etui-spacing-md);
+  font-size: var(--etui-font-size-sm);
+}
+.Badge_badgeRecipe_variant_subtle__6943by7 {
+  background: color-mix(in srgb, var(--badgeColorVar__6943by0) 15%, transparent);
+  color: var(--badgeColorVar__6943by0);
+  border-color: transparent;
+}
+.Badge_badgeRecipe_variant_solid__6943by8 {
+  background: var(--badgeColorVar__6943by0);
+  color: var(--badgeContrastVar__6943by1);
+  border-color: var(--badgeColorVar__6943by0);
+}
+.Badge_badgeRecipe_variant_outline__6943by9 {
+  background: transparent;
+  color: var(--badgeColorVar__6943by0);
+  border-color: var(--badgeColorVar__6943by0);
+}
+.Badge_badgeRecipe_variant_dot__6943bya {
+  background: transparent;
+  color: var(--etui-color-text-primary);
+  border-color: transparent;
+  padding: 0;
+}
+.Badge_badgeRecipe_uppercase_true__6943byb {
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.Badge_badgeIconStyle__6943byc {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.Badge_badgeDotStyle__6943byd {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--badgeColorVar__6943by0);
+  flex-shrink: 0;
+}
+.Badge_badgeRemoveButtonStyle__6943bye {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: inherit;
+  padding: 0;
+  margin-left: var(--etui-spacing-xs);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--etui-radius-sm);
+  opacity: 0.7;
+  transition: opacity var(--etui-transition-fast);
+}
+.Badge_badgeRemoveButtonStyle__6943bye:hover {
+  opacity: 1;
+}
+.Badge_badgeRemoveButtonStyle__6943bye:focus-visible {
+  outline: 1px solid var(--etui-color-border-focus);
+  outline-offset: 1px;
+  opacity: 1;
+}