@crewlethq/ui 0.28.0 → 0.29.0

package/dist/ArtifactPanel/ArtifactPanel.d.ts

@@ -0,0 +1,81 @@
+import { type ReactNode, type Ref } from 'react';
+/** How wide a panel rests beside the artifact: facts, a list, or a table. */
+export type ArtifactPanelSize = 'sm' | 'md' | 'lg';
+export interface ArtifactPanelLabels {
+    close: (title: string) => string;
+    expand: string;
+    collapse: string;
+}
+export declare const ARTIFACT_PANEL_LABELS: ArtifactPanelLabels;
+export interface ArtifactPanelProps {
+    title: string;
+    /** A glyph before the title: the one on the bar's control that opened it. */
+    icon?: ReactNode;
+    onClose: () => void;
+    size?: ArtifactPanelSize | undefined;
+    /**
+     * The panel takes the whole workspace, the artifact hidden behind it, for a
+     * table or a comparison the side's width cannot hold. With `onExpandedChange`
+     * the head carries the control that toggles it.
+     */
+    expanded?: boolean | undefined;
+    onExpandedChange?: ((expanded: boolean) => void) | undefined;
+    /** Controls in the head, before expand and close. */
+    actions?: ReactNode;
+    /**
+     * Whether focus moves to the panel's heading when it opens. True when the
+     * reader opened it; false for a panel a link opened on arrival, which must
+     * not take focus from wherever the page put it.
+     */
+    focusOnOpen?: boolean | undefined;
+    labels?: Partial<ArtifactPanelLabels> | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * A panel at the artifact's side: its details, its history, its data, who is
+ * here, its settings. One at a time, opened from the bar's controls.
+ *
+ * A COMPLEMENTARY REGION, NOT A DIALOG. The artifact beside it stays live and
+ * reachable, so the panel is an `aside` named by its heading and never traps
+ * focus; the reader moves between the two with Tab as between any two parts
+ * of a page.
+ *
+ * FOCUS IS STILL MANAGED, because a panel opened from a control that is then
+ * pressed again, or closed from inside, would otherwise leave focus on nothing.
+ * Opening moves focus to the heading, so a screen reader announces what
+ * opened; closing with focus inside hands it back to whatever held it before
+ * (the bar's control, as a rule), and leaves it alone otherwise.
+ *
+ * ESCAPE CLOSES IT from anywhere inside, a field included, unless something
+ * inside answered the press first: a menu or a dialog opened from the panel is
+ * portalled out of it, and the press that closes one of them never reaches
+ * this.
+ */
+export declare function ArtifactPanel({ title, icon, onClose, size, expanded, onExpandedChange, actions, focusOnOpen, labels, className, children, }: ArtifactPanelProps): import("react").JSX.Element;
+export interface ArtifactWorkspaceProps {
+    /** The open panel, if any: an [ArtifactPanel]. */
+    panel?: ReactNode;
+    /** Whether the open panel takes the whole workspace. */
+    expanded?: boolean | undefined;
+    /** The artifact's own body: the element a caller scrolls, measures or listens on. */
+    bodyRef?: Ref<HTMLDivElement> | undefined;
+    bodyClassName?: string | undefined;
+    /** Names the body region: the artifact's title. */
+    bodyLabel?: string | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}
+/**
+ * The artifact's body and its one open panel, side by side.
+ *
+ * THE PANEL IS A COLUMN WHERE THERE IS ROOM FOR TWO, AND A DRAWER WHERE THERE
+ * IS NOT. Measured on the workspace itself (a container query), since a
+ * sidebar beside it decides its room: wide, the artifact narrows to make room
+ * and the two are read together, which is the point of a panel of history or
+ * of who is here; narrower than two useful columns, the panel slides over the
+ * artifact's end edge; on a phone it covers the artifact whole. An expanded
+ * panel takes the workspace at every width, with the artifact kept mounted
+ * behind it so a page's state survives the look at its data.
+ */
+export declare function ArtifactWorkspace({ panel, expanded, bodyRef, bodyClassName, bodyLabel, className, children, }: ArtifactWorkspaceProps): import("react").JSX.Element;

package/dist/ArtifactPanel/index.d.ts

@@ -0,0 +1,3 @@
+import './ArtifactPanel.css';
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from './ArtifactPanel.js';
+export type { ArtifactPanelLabels, ArtifactPanelProps, ArtifactPanelSize, ArtifactWorkspaceProps, } from './ArtifactPanel.js';

package/dist/ArtifactPanel/index.js

@@ -0,0 +1,5 @@
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace } from '../chunk-I3BSQUKN.js';
+import '../chunk-PQADV6P6.js';
+import '../chunk-4FQT6ZAY.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/ArtifactPanel-YFXT5O77.css

@@ -0,0 +1,132 @@
+/*
+ * The workspace is a row: the artifact's body, then at most one panel. The
+ * body scrolls itself, so a panel beside it stays in view however far the
+ * artifact is read; the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * workspace's own edges: whatever frames the workspace already draws those.
+ */
+
+.crewlet-artifact-workspace {
+  container: crewlet-artifact-workspace / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-artifact-workspace__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
+.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
+  display: none;
+}
+
+.crewlet-artifact-panel {
+  --crewlet-artifact-panel-width: 25rem;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-artifact-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+.crewlet-artifact-panel--sm {
+  --crewlet-artifact-panel-width: 20rem;
+}
+
+.crewlet-artifact-panel--lg {
+  --crewlet-artifact-panel-width: 36rem;
+}
+
+.crewlet-artifact-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+.crewlet-artifact-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-panel__title:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-artifact-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-panel__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
+   raised off it, rather than squeezing the artifact under a useful width. */
+@container crewlet-artifact-workspace (width < 960px) {
+  .crewlet-artifact-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-artifact-panel-width), 100%);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .crewlet-artifact-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the screen until it is closed. */
+@container crewlet-artifact-workspace (width < 640px) {
+  .crewlet-artifact-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}

package/dist/AuthLayout/index.js

@@ -1,8 +1,8 @@
-export { AuthLayout } from '../chunk-WHZFDS62.js';
+export { AuthLayout } from '../chunk-VDPJGP4Q.js';
 import '../chunk-7KBNFFM3.js';
-import '../chunk-YZCJ63JF.js';
+import '../chunk-ACA27MZH.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,10 +1,10 @@
-export { AvatarPicker } from '../chunk-PRNX5AFE.js';
-import '../chunk-SGIQCI6Y.js';
-import '../chunk-RCQXUT5K.js';
-import '../chunk-HJEVSQN6.js';
+export { AvatarPicker } from '../chunk-TGYDROIB.js';
+import '../chunk-LIXSV5YI.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-AYKXMIOR.js';
 import '../chunk-HVIX5ECM.js';
+import '../chunk-RCQXUT5K.js';
+import '../chunk-HJEVSQN6.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-BHHIIK3M.js';

package/dist/Card/index.js

@@ -1,6 +1,6 @@
-export { Card } from '../chunk-YZCJ63JF.js';
+export { Card } from '../chunk-ACA27MZH.js';
 export { useCardHeaderSlot } from '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ChangeMark/index.js

@@ -1,8 +1,8 @@
 export { ChangeMark } from '../chunk-YEKYVJQR.js';
 import '../chunk-NHBP2XS5.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-QWOPX2MN.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-QWOPX2MN.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommandPalette/index.js

@@ -1,10 +1,10 @@
-export { CommandPalette } from '../chunk-HCKJGBQH.js';
+export { CommandPalette } from '../chunk-VVRL27HM.js';
 import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-6QFAK2WV.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
 import '../chunk-OG6CL3EB.js';

package/dist/CommentThread/index.js

@@ -1,15 +1,15 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-M2VJGNCD.js';
-import '../chunk-RIEDQSA4.js';
-import '../chunk-SMBKXWML.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-FKULOLKG.js';
+import '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-WI6K5M5X.js';
 import '../chunk-4KP4RC3O.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/Composer/index.js

@@ -1,6 +1,6 @@
-export { COMPOSER_COUNTER_AT, Composer } from '../chunk-RIEDQSA4.js';
-import '../chunk-SMBKXWML.js';
+export { COMPOSER_COUNTER_AT, Composer } from '../chunk-7DZDSSJS.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';

package/dist/DataView/index.js

@@ -1,22 +1,22 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-VOMYRJV5.js';
+export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-RODMM35O.js';
 import '../chunk-HOXGBLEY.js';
 import '../chunk-PGRPNDWM.js';
-import '../chunk-EBJREOKS.js';
 import '../chunk-Y5NQ2LMS.js';
+import '../chunk-EBJREOKS.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-I3KKZ2O3.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-SMBKXWML.js';
 import '../chunk-BWRGFKJP.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-7T42VQQT.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-AV2DXAEL.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-2HIOJ4YZ.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/Disclosure/index.js

@@ -1,6 +1,6 @@
-export { Disclosure } from '../chunk-S4RCG44T.js';
-export { DisclosureAnatomy } from '../chunk-ENJUPIND.js';
-import '../chunk-PQADV6P6.js';
+export { Disclosure } from '../chunk-MICH6QSJ.js';
+export { DisclosureAnatomy } from '../chunk-FZVJDJFN.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/HuePicker/index.js

@@ -1,8 +1,8 @@
 import '../chunk-FFMCMSJB.js';
-export { HuePicker } from '../chunk-SGIQCI6Y.js';
+export { HuePicker } from '../chunk-LIXSV5YI.js';
+import '../chunk-AYKXMIOR.js';
 import '../chunk-RCQXUT5K.js';
 import '../chunk-HJEVSQN6.js';
-import '../chunk-AYKXMIOR.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-BZFWDIV6.js';

package/dist/ListInput/index.js

@@ -1,6 +1,6 @@
-export { ListInput } from '../chunk-D5JZN3ML.js';
-import '../chunk-SMBKXWML.js';
+export { ListInput } from '../chunk-Z6VW6CXX.js';
 import '../chunk-6QFAK2WV.js';
+import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';

package/dist/MarkdownEditor/index.js

@@ -1,6 +1,6 @@
 export { MARKDOWN_FORMATS, MarkdownEditor, formatMarkdown, insertMarkdown, markdownWords } from '../chunk-LZHLSQYK.js';
-import '../chunk-FQCLKD7U.js';
 import '../chunk-PGRPNDWM.js';
+import '../chunk-FQCLKD7U.js';
 import '../chunk-RCQXUT5K.js';
 import '../chunk-HJEVSQN6.js';
 import '../chunk-RKKO7QHH.js';

package/dist/PeopleRail/PeopleRail.d.ts

@@ -30,6 +30,13 @@ export interface PeopleRailProps {
     /** Further controls for one member, before Follow: "Open turn" for an agent at work. */
     actions?: ((member: PresenceMember) => ReactNode) | undefined;
     labels?: Partial<PeopleRailLabels> | undefined;
+    /**
+     * `card` is the rail on its own: a bordered card with its heading and its
+     * close. `plain` is its list alone, for a host that already frames and
+     * names it (an artifact's side panel), so the two are never a box drawn in
+     * a box with the same title twice.
+     */
+    variant?: 'card' | 'plain' | undefined;
     className?: string | undefined;
 }
 /** What identifies a member for following: the seat, so a second tab of the same person stays followed. */
@@ -49,4 +56,4 @@ export declare function peopleRailKey(member: Pick<PresenceMember, 'id' | 'seat'
  * is a column of identical controls to a screen reader. The strip that says
  * the reader is following is `FollowBanner`, which the host draws.
  */
-export declare function PeopleRail({ members, self, following, onFollow, onClose, actions, labels: overrides, className, }: PeopleRailProps): import("react").JSX.Element;
+export declare function PeopleRail({ members, self, following, onFollow, onClose, actions, labels: overrides, variant, className, }: PeopleRailProps): import("react").JSX.Element;

package/dist/PeopleRail/index.js

@@ -1,4 +1,4 @@
-export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-FVLCTCMV.js';
+export { PEOPLE_RAIL_LABELS, PeopleRail, peopleRailKey } from '../chunk-UQHKFF2N.js';
 import '../chunk-CENOOTAV.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-AYKXMIOR.js';

package/dist/{PeopleRail-R64WVOSH.css → PeopleRail-SZGHZXVT.css}

@@ -11,6 +11,14 @@
   background: var(--color-surface-elevated);
 }
 
+/* PLAIN: the list alone, in a host that frames and names it. */
+.crewlet-people-rail--plain {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .crewlet-people-rail__head {
   display: flex;
   align-items: center;

package/dist/SheetGrid/index.js

@@ -8,8 +8,8 @@ import '../chunk-WIATRXEJ.js';
 import '../chunk-YEKYVJQR.js';
 import '../chunk-NHBP2XS5.js';
 import '../chunk-Z7JYG5TF.js';
-import '../chunk-QWOPX2MN.js';
 import '../chunk-AYKXMIOR.js';
+import '../chunk-QWOPX2MN.js';
 import '../chunk-UAN5NE7M.js';
 import '../chunk-5OM447RW.js';
 import '../chunk-2HIOJ4YZ.js';

package/dist/ThemeSwitcher/index.js

@@ -1,7 +1,7 @@
 export { DensitySwitcher, ThemeSwitcher } from '../chunk-WJDQ7XQA.js';
 export { applyStoredPreferences, resolveTheme, useDensityPreference, useSystemTheme, useThemePreference } from '../chunk-Z24ZUSTX.js';
-import '../chunk-FQCLKD7U.js';
 export { DENSITY_PREFERENCES, PALETTE_ID, THEME_PREFERENCES, applyDensity, applyPalette, applyTheme, isDensityPreference, isPaletteId, isThemePreference } from '../chunk-ZXXDZJQN.js';
+import '../chunk-FQCLKD7U.js';
 import '../chunk-RCQXUT5K.js';
 import '../chunk-HJEVSQN6.js';
 import '../chunk-RKKO7QHH.js';

package/dist/VersionCompare/index.js

@@ -1,11 +1,11 @@
 export { VERSION_COMPARE_LABELS, VERSION_COMPARE_LENSES, VersionCompare } from '../chunk-EHQTPVV4.js';
-import '../chunk-FQCLKD7U.js';
 import '../chunk-BVWSLXTY.js';
+import '../chunk-FQCLKD7U.js';
 import '../chunk-RCQXUT5K.js';
 import '../chunk-HJEVSQN6.js';
 import '../chunk-RKKO7QHH.js';
 import '../chunk-RA2ULG6H.js';
-import '../chunk-PQADV6P6.js';
 import '../chunk-BHHIIK3M.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-V2Z24W2Z.js → chunk-4JUKWWUD.js}

@@ -1,4 +1,4 @@
-import { ArtifactKindGlyph } from './chunk-6J35F334.js';
+import { ArtifactKindGlyph } from './chunk-GOSQXEZU.js';
 import { ShieldGlyph, ActivityGlyph, GaugeGlyph, PackageGlyph, FolderGlyph, ClockGlyph, DatabaseGlyph, Settings2Glyph, BookOpenGlyph, FlagGlyph, StarGlyph, WandSparklesGlyph, BugGlyph, TargetGlyph, ImageGlyph, CodeGlyph, CoinsGlyph, UserGlyph, UsersGlyph, ChartNoAxesGanttGlyph, SquareKanbanGlyph, ListChecksGlyph, ListGlyph, GlobeGlyph, CompassGlyph, FileTextGlyph, TableGlyph, CalendarGlyph, LayoutDashboardGlyph, ChartPieGlyph, ChartColumnGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-WENCSQ47.js → chunk-EBNI36UQ.js}

@@ -4,7 +4,7 @@ import { useModalLayer, focusables } from './chunk-R25RGPUB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './AppShell-APHZKJYH.css';
+import './AppShell-GCM4TDVY.css';
 import { createContext, forwardRef, useContext, useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
 import { breakpoint } from '@crewlethq/tokens';
 import { ChevronUpGlyph, ChevronsUpDownGlyph, ChevronRightGlyph, MenuGlyph } from '@crewlethq/icons/glyphs';

package/dist/{chunk-M2VJGNCD.js → chunk-FKULOLKG.js}

@@ -1,9 +1,9 @@
-import { Composer } from './chunk-RIEDQSA4.js';
+import { Composer } from './chunk-7DZDSSJS.js';
 import { Document } from './chunk-WI6K5M5X.js';
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { toInstant, RelativeTime, formatExact, toISO } from './chunk-3CZ7XAVY.js';
-import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Count } from './chunk-BHHIIK3M.js';
+import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { cx } from './chunk-ODEQTPFM.js';

package/dist/{chunk-6J35F334.js → chunk-GOSQXEZU.js}

@@ -1,7 +1,7 @@
 import { PrincipalAvatar } from './chunk-4KP4RC3O.js';
 import { RelativeTime } from './chunk-3CZ7XAVY.js';
 import { AvatarStack } from './chunk-UAN5NE7M.js';
-import { Card } from './chunk-YZCJ63JF.js';
+import { Card } from './chunk-ACA27MZH.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './ArtifactCard-EXVAEBV6.css';

package/dist/chunk-I3BSQUKN.js

@@ -0,0 +1,121 @@
+import { HeadingLevelProvider } from './chunk-PQADV6P6.js';
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArtifactPanel-YFXT5O77.css';
+import { useId, useRef, useLayoutEffect, useEffect } from 'react';
+import { MinimizeGlyph, MaximizeGlyph, XGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ARTIFACT_PANEL_LABELS = {
+  close: (title) => `Close ${title.toLowerCase()}`,
+  expand: "Expand to the full view",
+  collapse: "Back to the side"
+};
+function ArtifactPanel({
+  title,
+  icon,
+  onClose,
+  size = "md",
+  expanded = false,
+  onExpandedChange,
+  actions,
+  focusOnOpen = true,
+  labels,
+  className,
+  children
+}) {
+  const words = { ...ARTIFACT_PANEL_LABELS, ...labels };
+  const titleId = useId();
+  const root = useRef(null);
+  const heading = useRef(null);
+  const before = useRef(null);
+  const focusing = useRef(focusOnOpen);
+  useLayoutEffect(() => {
+    const panel = root.current;
+    before.current = document.activeElement;
+    if (focusing.current) heading.current?.focus({ preventScroll: true });
+    return () => {
+      const back = before.current;
+      if (panel?.contains(document.activeElement) && back instanceof HTMLElement && back.isConnected) {
+        back.focus({ preventScroll: true });
+      }
+    };
+  }, []);
+  const close = useRef(onClose);
+  close.current = onClose;
+  useEffect(() => {
+    const panel = root.current;
+    if (!panel) return void 0;
+    const doc = panel.ownerDocument;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      if (!(event.target instanceof Node) || !panel.contains(event.target)) return;
+      event.preventDefault();
+      close.current();
+    };
+    doc.addEventListener("keydown", onKeyDown);
+    return () => doc.removeEventListener("keydown", onKeyDown);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "aside",
+    {
+      ref: root,
+      className: cx("crewlet-artifact-panel", `crewlet-artifact-panel--${size}`, className),
+      "aria-labelledby": titleId,
+      "data-expanded": expanded || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-artifact-panel__head", children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "crewlet-artifact-panel__icon", "aria-hidden": true, children: icon }) : null,
+          /* @__PURE__ */ jsx("h2", { ref: heading, id: titleId, className: "crewlet-artifact-panel__title", tabIndex: -1, children: title }),
+          /* @__PURE__ */ jsxs("span", { className: "crewlet-artifact-panel__actions", children: [
+            actions,
+            onExpandedChange ? /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                label: expanded ? words.collapse : words.expand,
+                icon: expanded ? /* @__PURE__ */ jsx(MinimizeGlyph, { size: "sm" }) : /* @__PURE__ */ jsx(MaximizeGlyph, { size: "sm" }),
+                size: "sm",
+                variant: "ghost",
+                onClick: () => onExpandedChange(!expanded)
+              }
+            ) : null,
+            /* @__PURE__ */ jsx(IconButton, { label: words.close(title), icon: /* @__PURE__ */ jsx(XGlyph, { size: "sm" }), size: "sm", variant: "ghost", onClick: onClose })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "crewlet-artifact-panel__body", children: /* @__PURE__ */ jsx(HeadingLevelProvider, { level: 3, children }) })
+      ]
+    }
+  );
+}
+function ArtifactWorkspace({
+  panel,
+  expanded = false,
+  bodyRef,
+  bodyClassName,
+  bodyLabel,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-artifact-workspace", className),
+      "data-panel": panel ? expanded ? "expanded" : "open" : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: bodyRef,
+            className: cx("crewlet-artifact-workspace__body", bodyClassName),
+            role: bodyLabel ? "region" : void 0,
+            "aria-label": bodyLabel,
+            children
+          }
+        ),
+        panel
+      ]
+    }
+  );
+}
+
+export { ARTIFACT_PANEL_LABELS, ArtifactPanel, ArtifactWorkspace };

package/dist/{chunk-S4RCG44T.js → chunk-MICH6QSJ.js}

@@ -1,4 +1,4 @@
-import { DisclosureAnatomy } from './chunk-ENJUPIND.js';
+import { DisclosureAnatomy } from './chunk-FZVJDJFN.js';
 import { useHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Disclosure-VKBJJIZ7.css';