@crewlethq/ui 0.43.0 → 0.44.0

package/README.md

@@ -204,6 +204,16 @@ places:
 - A surface that pans or zooms dispatches `LAYER_REPOSITION_EVENT` on its host
   when the content beneath it moves, and every panel anchored inside follows.
 
+## Changes in 0.44.0
+
+The pieces of the engine's Company › Integrations home, a summary of what a company has in use beside the directory of everything it could.
+
+**`DirectoryList` lines stand at the rail's row step**: each line is exactly `--size-nav-row` (30px) in the rail's compact type, its mark at the glyph step (16px, `md`), its `hint` inline after the label in the quiet ink, giving way before the label in a narrow column, and its state held inside the row, so no line stands taller than the rest. Groups stand one small step (`--spacing-3`) apart.
+
+**`CatalogTile` takes `density="compact"`**, a summary's tile at about half the height: the mark, the name, its state, its fact (`meta`) and the one action on the header line, and the sentence on one line under it, cut to fit with the whole of it in its title. The default, `comfortable`, is unchanged.
+
+**`Section` takes `spacing="tight"`**: one small step (`--spacing-2`) between a heading and what it introduces, titled or not. A heading may carry the kit's `Count` of what is under it (`title={<>In use <Count value={4} /></>}`).
+
 ## Changes in 0.43.0
 
 The parts of the engine's Company › Integrations page, a directory of everything a company works in beside the detail of the one chosen.

package/dist/AgentHandoffPanel/index.js

@@ -1,6 +1,6 @@
-export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-BO7Q6JP6.js';
+export { AGENT_HANDOFF_LABELS, AgentHandoffPanel } from '../chunk-N3SHQ3VU.js';
 import '../chunk-AUQPBL4O.js';
-import '../chunk-3TFDQLW3.js';
+import '../chunk-JQ7IFSF6.js';
 import '../chunk-OGXHZHRX.js';
 import '../chunk-7CXGSS7D.js';
 import '../chunk-NBDN5JZV.js';

package/dist/ArrangeFrame/index.js

@@ -1,5 +1,5 @@
-export { ArrangeFrame, useGridResize } from '../chunk-LKBZV5IT.js';
-import '../chunk-LACA4JGC.js';
+export { ArrangeFrame, useGridResize } from '../chunk-VWYT3GVV.js';
 import '../chunk-RSAQOKH3.js';
+import '../chunk-LACA4JGC.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ArrangeList/index.js

@@ -4,8 +4,8 @@ import '../chunk-XJ2QEBMM.js';
 import '../chunk-EY7LACIR.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/AvatarPicker/index.js

@@ -1,13 +1,13 @@
-export { AvatarPicker } from '../chunk-PLLYOPS4.js';
+export { AvatarPicker } from '../chunk-Q7HLZH32.js';
 import '../chunk-QOP7QYUW.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
+import '../chunk-SNQRGH4A.js';
 import '../chunk-BF5WV7NM.js';
 import '../chunk-KA75QPFM.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-BHHIIK3M.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';

package/dist/CatalogTile/CatalogTile.d.ts

@@ -1,6 +1,15 @@
 import { type HTMLAttributes, type ReactNode } from 'react';
 import { type HeadingLevel } from '../utils/headingLevel.js';
 export type CatalogTileElement = 'article' | 'li' | 'div';
+/**
+ * How much room a tile takes. `comfortable` (the default) is the catalogue's
+ * tile: a mark well, a name with its state under it, a reserved two-line
+ * sentence and a ruled foot. `compact` is a summary's: one header line (the
+ * mark, the name, its state and the fact, then the action at its end) over
+ * one line of sentence, about half the height, for a page that lists what is
+ * already in use rather than offers a choice.
+ */
+export type CatalogTileDensity = 'comfortable' | 'compact';
 export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     /** The element the tile is: an `li` in a `TileGrid as="ul"`. */
     as?: CatalogTileElement | undefined;
@@ -33,6 +42,8 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
      * strength, because a tile not yet set up is the one a reader came to set up.
      */
     quiet?: boolean | undefined;
+    /** How much room the tile takes; see [CatalogTileDensity]. */
+    density?: CatalogTileDensity | undefined;
 }
 /**
  * One entry in a catalogue: its mark, its name, its state when it has one, a
@@ -44,4 +55,4 @@ export interface CatalogTileProps extends Omit<HTMLAttributes<HTMLElement>, 'tit
  * action draws no foot at all, since a rule with nothing under it reads as a
  * missing control.
  */
-export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, className, ...rest }: CatalogTileProps): import("react").JSX.Element;
+export declare function CatalogTile({ as: Element, mark, title, headingLevel, status, description, meta, action, quiet, density, className, ...rest }: CatalogTileProps): import("react").JSX.Element;

package/dist/CatalogTile/index.d.ts

@@ -1,3 +1,3 @@
 import './CatalogTile.css';
 export { CatalogTile } from './CatalogTile.js';
-export type { CatalogTileElement, CatalogTileProps } from './CatalogTile.js';
+export type { CatalogTileDensity, CatalogTileElement, CatalogTileProps } from './CatalogTile.js';

package/dist/CatalogTile/index.js

@@ -1,3 +1,3 @@
-export { CatalogTile } from '../chunk-PCT47E7O.js';
+export { CatalogTile } from '../chunk-5GNA4RKP.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{CatalogTile-XL4XLFUH.css → CatalogTile-VPSLCKJE.css}

@@ -133,3 +133,58 @@
     min-height: 0;
   }
 }
+
+/*
+ * COMPACT: a summary's tile, about half the comfortable one's height. One
+ * header line holds the mark (the row step's well, 28px), the name, its state
+ * and its fact, and the action at the end; the sentence is one line under it,
+ * aligned to the name, cut to fit. No reserve and no foot, because a summary
+ * has no row of feet to line up.
+ */
+.crewlet-catalog-tile--compact {
+  gap: var(--spacing-1);
+  padding: var(--spacing-3);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__head {
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__mark {
+  width: var(--size-row-sm);
+  height: var(--size-row-sm);
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__title {
+  flex: 1 1 auto;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding-top: 0;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__name {
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__status {
+  flex: none;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__meta {
+  flex: 0 1 auto;
+}
+
+.crewlet-catalog-tile--compact .crewlet-catalog-tile__description {
+  flex: none;
+  min-height: 0;
+  padding-left: calc(var(--size-row-sm) + var(--spacing-2));
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/dist/CharacterPicker/index.js

@@ -1,5 +1,5 @@
 import '../chunk-3L5NHASN.js';
-export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-VZICPYGR.js';
-import '../chunk-PZKHBB7D.js';
+export { CHARACTER_PICKER_COLUMNS, CharacterPicker } from '../chunk-SNQRGH4A.js';
 import '../chunk-EGMQURBR.js';
+import '../chunk-PZKHBB7D.js';
 import '../chunk-ODEQTPFM.js';

package/dist/CommentThread/index.js

@@ -1,10 +1,10 @@
-export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-AGNZIT3Z.js';
+export { COMMENT_THREAD_LABELS, CommentThread } from '../chunk-NVMZQ3Y4.js';
+import '../chunk-PWG3VHRQ.js';
 import '../chunk-CI3VPIJN.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-PWG3VHRQ.js';
 import '../chunk-7CXGSS7D.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-SMBKXWML.js';

package/dist/DataView/index.js

@@ -1,7 +1,7 @@
-export { DATA_VIEW_TOOLBAR_LABELS, DataView, DataViewToolbar, FILTER_AXIS_LABELS, FilterAxisBar, FilterAxisChip, applyColumnFilters, applyFilters, blankFilterValue, defaultOperator, filterDefsFromColumns, filterHasValue, filterPredicate, formatFilterValue, operatorOf, tableColumns } from '../chunk-NCM73C34.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-AACPFUZW.js';
 import '../chunk-HOXGBLEY.js';
-import '../chunk-GI3S6RMM.js';
 import '../chunk-UFXLNC2N.js';
+import '../chunk-GI3S6RMM.js';
 import '../chunk-STJ7QBC3.js';
 import '../chunk-DTIW4CHZ.js';
 import '../chunk-FYINAYAJ.js';

package/dist/DatasetSource/index.js

@@ -1,8 +1,8 @@
 export { DATASET_SOURCE_KINDS, DatasetSource, DatasetSourceList } from '../chunk-HQJ24WPM.js';
 import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-2YTOOH3A.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/DirectoryList/DirectoryList.d.ts

@@ -5,10 +5,13 @@ export interface DirectoryItem {
     key: string;
     /** Where the line goes: the item's own page. */
     href: string;
-    /** The item's mark: a vendor's, a product's. Decorative, since the label names it. */
+    /**
+     * The item's mark: a vendor's, a product's, at the glyph step (16px, `md`).
+     * Decorative, since the label names it.
+     */
     mark?: ReactNode;
     label: ReactNode;
-    /** A quieter line under the label: the app a product belongs to. */
+    /** A quieter word after the label, on its line: the app a product belongs to. */
     hint?: ReactNode;
     /** The item's state where it has one: a status dot and word, or a pill. */
     status?: ReactNode;
@@ -43,8 +46,10 @@ export interface DirectoryListProps {
  * A NAVIGATION LANDMARK of lists under headings, so a screen reader can jump
  * group to group and is told how many lines each holds. The chosen line is
  * `aria-current="page"` and drawn on the selected ground. A line carries its
- * mark, its label (and a quieter hint under it) and its state where it has
- * one; a line with no state says nothing rather than "none".
+ * mark, its label (and a quieter hint after it) and its state where it has
+ * one; a line with no state says nothing rather than "none". A LINE STANDS
+ * AT THE RAIL'S ROW STEP (30px), in the rail's compact type, because a
+ * directory is navigation beside the page as the rail is beside the app.
  *
  * IT FILLS THE HEIGHT IT IS GIVEN. The groups take the room and scroll on
  * their own when they outgrow it, and the foot holds the bottom, one small

package/dist/DirectoryList/index.js

@@ -1,3 +1,3 @@
-export { DirectoryList } from '../chunk-SJ6DMG4R.js';
+export { DirectoryList } from '../chunk-4AA6WPQU.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{DirectoryList-EESYMH2U.css → DirectoryList-7OXXN47X.css}

@@ -22,7 +22,9 @@
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--spacing-5);
+  /* One small step between groups, so a heading reads as the head of the lines
+     under it rather than a band between two runs of them. */
+  gap: var(--spacing-3);
   min-height: 0;
   overflow-y: auto;
 }
@@ -53,16 +55,24 @@
   list-style: none;
 }
 
+/*
+ * THE RAIL'S ROW STEP, 30px (--size-nav-row): a directory is navigation beside
+ * the page as the rail is beside the app, so its lines stand at the rail's
+ * height and in its compact type. Everything a line says fits that one line:
+ * a mark the size of the rail's glyph box, the hint inline after the label,
+ * and the state compact at the end.
+ */
 .crewlet-directory__item {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--spacing-2);
-  min-height: var(--size-row-md);
-  padding: var(--spacing-1) var(--spacing-2);
+  height: var(--size-nav-row);
+  padding: 0 var(--spacing-2);
   border-radius: var(--radius-md);
   color: var(--color-text-primary);
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-compact);
+  line-height: var(--font-line-height-tight);
   text-decoration: none;
 }
 
@@ -80,22 +90,28 @@
   outline-offset: 1px;
 }
 
+/* The box takes its mark, as the rail's glyph box does: a mark at the glyph's
+   own step (16px, `md`) sits in the row with room to spare. */
 .crewlet-directory__mark {
   display: inline-flex;
   flex: none;
   align-items: center;
   justify-content: center;
-  width: var(--size-row-sm);
-  height: var(--size-row-sm);
 }
 
+/* ONE LINE: the label, then the hint after it in the quiet ink. The hint gives
+   way first, so a narrow column cuts "Atlassian" before it cuts "Confluence". */
 .crewlet-directory__text {
   display: flex;
-  flex-direction: column;
+  align-items: baseline;
+  gap: var(--spacing-1);
   min-width: 0;
 }
 
 .crewlet-directory__label {
+  flex: 0 0 auto;
+  max-width: 100%;
+  min-width: 0;
   overflow: hidden;
   font-weight: var(--font-weight-medium);
   text-overflow: ellipsis;
@@ -103,6 +119,8 @@
 }
 
 .crewlet-directory__hint {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   font-size: var(--font-size-xs);
   color: var(--color-text-tertiary);
@@ -110,10 +128,15 @@
   white-space: nowrap;
 }
 
+/* THE STATE IS COMPACT: a pill or a dot and its word in the small step, held
+   inside the row so a state never makes one line taller than the rest. */
 .crewlet-directory__status {
   display: inline-flex;
   flex: none;
+  align-items: center;
+  max-height: calc(var(--size-nav-row) - var(--spacing-2));
   font-size: var(--font-size-xs);
+  line-height: 1;
   color: var(--color-text-secondary);
 }
 

package/dist/DocTabsEditor/index.js

@@ -2,12 +2,12 @@ export { DOC_TABS_EDITOR_LABELS, DocTabsEditor } from '../chunk-W53CWWX3.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/ListInput/index.js

@@ -1,11 +1,11 @@
-export { ListInput } from '../chunk-Z5WMCBHR.js';
+export { ListInput } from '../chunk-NMYGJJJK.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-SMBKXWML.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/RichEditor/index.js

@@ -1,4 +1,4 @@
-export { RichEditor, preloadRichEditor } from '../chunk-JF3TJUBU.js';
+export { RichEditor, preloadRichEditor } from '../chunk-TVSHR35W.js';
 export { RICH_EDITOR_LABELS, richEditorLabels } from '../chunk-CSQTDGTS.js';
 import '../chunk-BAKPMH3S.js';
 import '../chunk-SZZRIHGT.js';

package/dist/Section/Section.d.ts

@@ -9,6 +9,12 @@ export type SectionSpacing =
  * marketing band between each pair of panels puts one panel per viewport.
  */
  | 'compact'
+/**
+ * The console band at its tightest: one small step between the heading and
+ * what it introduces, for a summary whose sections stand close, as a list's
+ * group headings do.
+ */
+ | 'tight'
 /** A marketing band. State one: a page of them is a deliberate page. */
  | 'sm' | 'md' | 'lg';
 export type SectionElement = 'section' | 'div' | 'header' | 'footer' | 'article';

package/dist/Section/index.js

@@ -1,3 +1,3 @@
-export { Section } from '../chunk-3TFDQLW3.js';
+export { Section } from '../chunk-JQ7IFSF6.js';
 import '../chunk-PQADV6P6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{Section-O5AHGSOG.css → Section-M7SG6NP2.css}

@@ -23,6 +23,14 @@
   padding-block: 0;
 }
 
+/* The console band at its tightest: a group heading's step to what it names. */
+.crewlet-section--tight {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  padding-block: 0;
+}
+
 .crewlet-section--sm {
   padding-block: var(--spacing-9);
 }
@@ -106,6 +114,12 @@
   gap: var(--spacing-3);
 }
 
+/* A tight band keeps its one small step with a title too: the titled column's
+   gap would otherwise win, being later in the sheet. */
+.crewlet-section--tight.crewlet-section--titled {
+  gap: var(--spacing-2);
+}
+
 @media (max-width: 768px) {
   .crewlet-section--sm {
     padding-block: var(--spacing-7);

package/dist/SheetGrid/index.js

@@ -1,24 +1,24 @@
-export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OVHJTOKW.js';
+export { CellDisplay, CellEditor, CheckboxCell, DateCell, LongTextCell, MultiSelectCell, NumberCell, PersonCell, RatingCell, SelectCell, SheetCell, SheetGrid, StatusCell, TextCell, UrlCell } from '../chunk-OWIGEE2Y.js';
 import '../chunk-O2EGEONV.js';
 import '../chunk-CENOOTAV.js';
+import '../chunk-KYIAFNU7.js';
 import '../chunk-3BYIWOTV.js';
 import '../chunk-I6POAB4V.js';
-import '../chunk-KYIAFNU7.js';
 import '../chunk-66X5WDKE.js';
 import '../chunk-LFSIKGRQ.js';
 import '../chunk-Z7JYG5TF.js';
 import '../chunk-KHJIEPZV.js';
 import '../chunk-AYKXMIOR.js';
-import '../chunk-5AQBPHZD.js';
-import '../chunk-PZKHBB7D.js';
 import '../chunk-WIATRXEJ.js';
 import '../chunk-I33UIUZD.js';
+import '../chunk-5AQBPHZD.js';
+import '../chunk-PZKHBB7D.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/SlideFilmstrip/index.js

@@ -2,12 +2,12 @@ export { SlideFilmstrip } from '../chunk-MCOC3KQA.js';
 import '../chunk-RMEBFYL7.js';
 import '../chunk-XJ2QEBMM.js';
 import '../chunk-SMBKXWML.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-PCI7ZJ6Z.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Switcher/index.js

@@ -1,4 +1,4 @@
-export { Switcher } from '../chunk-524GGA67.js';
+export { Switcher } from '../chunk-NF6SWHQI.js';
 import '../chunk-FYINAYAJ.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-KHJIEPZV.js';
@@ -6,12 +6,12 @@ import '../chunk-FYTIJM2T.js';
 import '../chunk-TEUQWOWZ.js';
 import '../chunk-ZI5G5RS7.js';
 import '../chunk-PQADV6P6.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-RTPQDNW3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-OG6CL3EB.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TableCells/index.js

@@ -1,10 +1,10 @@
 export { TABLE_TAGS_CELL_LABELS, TableDateCell, TableEntityCell, TableKeyCell, TableNumberCell, TableStatusCell, TableTagsCell, TableTextCell } from '../chunk-4BJK7FE5.js';
 import '../chunk-FBSEJO2C.js';
 import '../chunk-KYIAFNU7.js';
+import '../chunk-WIATRXEJ.js';
 import '../chunk-3CZ7XAVY.js';
 import '../chunk-EUCC37WY.js';
 import '../chunk-5AQBPHZD.js';
 import '../chunk-PZKHBB7D.js';
-import '../chunk-WIATRXEJ.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TagsInput/index.js

@@ -1,11 +1,11 @@
-export { TagsInput } from '../chunk-IVAR7NRW.js';
+export { TagsInput } from '../chunk-SXBJMBSV.js';
 import '../chunk-KYIAFNU7.js';
 import '../chunk-7KHM2FZH.js';
 import '../chunk-WIATRXEJ.js';
+import '../chunk-RSAQOKH3.js';
 import '../chunk-OMV5W53A.js';
 import '../chunk-H5XTJ7GJ.js';
 import '../chunk-LACA4JGC.js';
 import '../chunk-NUZHC6MM.js';
-import '../chunk-RSAQOKH3.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/{chunk-SJ6DMG4R.js → chunk-4AA6WPQU.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './DirectoryList-EESYMH2U.css';
+import './DirectoryList-7OXXN47X.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-PCT47E7O.js → chunk-5GNA4RKP.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './CatalogTile-XL4XLFUH.css';
+import './CatalogTile-VPSLCKJE.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -14,6 +14,7 @@ function CatalogTile({
   meta,
   action,
   quiet = false,
+  density = "comfortable",
   className,
   ...rest
 }) {
@@ -21,6 +22,40 @@ function CatalogTile({
   const Heading = headingTag(headingLevel ?? level);
   const titleId = useId();
   const foot = meta !== void 0 || action !== void 0;
+  if (density === "compact") {
+    return /* @__PURE__ */ jsxs(
+      Element,
+      {
+        "aria-labelledby": Element === "article" ? titleId : void 0,
+        ...rest,
+        className: cx(
+          "crewlet-catalog-tile",
+          "crewlet-catalog-tile--compact",
+          quiet && "crewlet-catalog-tile--quiet",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "crewlet-catalog-tile__head", children: [
+            /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__mark", "aria-hidden": "true", children: mark }),
+            /* @__PURE__ */ jsxs("span", { className: "crewlet-catalog-tile__title", children: [
+              /* @__PURE__ */ jsx(Heading, { id: titleId, className: "crewlet-catalog-tile__name", children: title }),
+              status === void 0 || status === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__status", children: status }),
+              meta === void 0 || meta === null ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__meta", children: meta })
+            ] }),
+            action === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-catalog-tile__action", children: action })
+          ] }),
+          description === void 0 ? null : /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "crewlet-catalog-tile__description",
+              title: typeof description === "string" ? description : void 0,
+              children: description
+            }
+          )
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     Element,
     {

package/dist/{chunk-3TFDQLW3.js → chunk-JQ7IFSF6.js}

@@ -1,6 +1,6 @@
 import { useHeadingLevel, headingTag, HeadingLevelProvider, nextHeadingLevel } from './chunk-PQADV6P6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Section-O5AHGSOG.css';
+import './Section-M7SG6NP2.css';
 import { useId } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-BO7Q6JP6.js → chunk-N3SHQ3VU.js}

@@ -1,5 +1,5 @@
 import { Timeline } from './chunk-AUQPBL4O.js';
-import { Section } from './chunk-3TFDQLW3.js';
+import { Section } from './chunk-JQ7IFSF6.js';
 import { Disclosure } from './chunk-OGXHZHRX.js';
 import { Composer } from './chunk-7CXGSS7D.js';
 import { ArtifactPanel } from './chunk-NBDN5JZV.js';

package/dist/{chunk-PLLYOPS4.js → chunk-Q7HLZH32.js}

@@ -1,7 +1,7 @@
 import { HuePicker } from './chunk-QOP7QYUW.js';
 import { Popover } from './chunk-KHJIEPZV.js';
 import { NODE_HUE_NAMES } from './chunk-AYKXMIOR.js';
-import { CharacterPicker } from './chunk-VZICPYGR.js';
+import { CharacterPicker } from './chunk-SNQRGH4A.js';
 import { Avatar } from './chunk-PZKHBB7D.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './AvatarPicker-PREY36MG.css';

package/dist/{chunk-JF3TJUBU.js → chunk-TVSHR35W.js}

@@ -9,7 +9,7 @@ import { jsx } from 'react/jsx-runtime';
 var engine = null;
 var loading = null;
 function loadEngine() {
-  loading ??= import('./Editor-AMO2B54T.js').then(
+  loading ??= import('./Editor-FXO2JVWK.js').then(
     (module) => {
       engine = module.Editor;
       return engine;