@crewlethq/ui 0.17.1 → 0.19.0

package/dist/ThemeSwitcher/preferences.d.ts

@@ -1,22 +1,5 @@
-/** What a reader can ask the palette to be. `system` follows the platform. */
-export type ThemePreference = 'system' | 'light' | 'dark';
-/** How much room the interface gives itself. `normal` is the unscaled step. */
-export type DensityPreference = 'normal' | 'compact' | 'comfortable';
-/**
- * Puts the theme on the root element.
- *
- * `system` REMOVES the attribute rather than writing a third value, because
- * following the system IS the absence of a choice, and the stylesheet's own
- * default is the system's: a document with no attribute is dark, or light
- * where the platform asks for light. What beats the system is an explicit
- * value, in both directions: `light` by a block of its own, `dark` by keeping
- * the light media block from matching. A `data-theme="system"` names no
- * palette, so it would be a choice only to the code that asks whether the
- * attribute is there at all, which is the wrong answer to give it.
- */
-export declare function applyTheme(theme: ThemePreference): void;
-/** Puts the density on the root element. `normal` removes the attribute. */
-export declare function applyDensity(density: DensityPreference): void;
+import { type DensityPreference, type ThemePreference } from './apply.js';
+export type { DensityPreference, ThemePreference } from './apply.js';
 export interface PreferenceOptions {
     /** Where the choice is kept. An application picks its own name. */
     storageKey: string;

package/dist/ThemeToggle/index.js

@@ -1,5 +1,6 @@
-export { ThemeToggle } from '../chunk-6TSZCBID.js';
-import '../chunk-K3OWD7BJ.js';
+export { ThemeToggle } from '../chunk-NP2C4Y4E.js';
+import '../chunk-Z24ZUSTX.js';
+import '../chunk-ZXXDZJQN.js';
 import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TimeWindowPicker/index.js

@@ -1,13 +1,13 @@
-export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-JF7X673Z.js';
+export { DEFAULT_TIME_WINDOW_LABELS, TIME_WINDOW_SPANS, TimeWindowPicker, describeTimeWindow, isTimeWindowSet, parseTimeWindowDuration, resolveTimeWindow, timeWindowMatchesPreset } from '../chunk-EIGEIT4O.js';
 import '../chunk-FC4YTTFJ.js';
 import '../chunk-F73MC7EZ.js';
-import '../chunk-4GB57WIT.js';
 import '../chunk-GXQ3B46I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
-import '../chunk-PQADV6P6.js';
+import '../chunk-Q55TXPA3.js';
 import '../chunk-BWRGFKJP.js';
+import '../chunk-PQADV6P6.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/Timeline/Timeline.d.ts

@@ -38,8 +38,13 @@ export interface TimelineItemProps extends LiHTMLAttributes<HTMLLIElement> {
      * numbered ledger wants; a glyph where the step has an identity of its own.
      */
     marker?: ReactNode;
-    /** Overrides the hidden label, for a step whose name is not its number. */
-    label?: string | undefined;
+    /**
+     * Overrides the hidden label, for a step whose name is not its number.
+     * `false` draws no hidden label at all, for an item whose own content
+     * already says what it is: a hidden "Version 12" in front of a visible
+     * "Version 12" is read twice.
+     */
+    label?: string | false | undefined;
 }
 /**
  * One step.

package/dist/Timeline/index.js

@@ -1,3 +1,3 @@
-export { Timeline, TimelineItem } from '../chunk-O67VF5MS.js';
+export { Timeline, TimelineItem } from '../chunk-AUQPBL4O.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeCanvas/index.js

@@ -1,10 +1,10 @@
-export { TreeCanvas } from '../chunk-2OLCUNG7.js';
+export { TreeCanvas } from '../chunk-TBIZSQHB.js';
 import '../chunk-MY374UUD.js';
-import '../chunk-AMH67MLM.js';
+import '../chunk-TXAFKH2A.js';
 import '../chunk-VYOKRN2I.js';
 import '../chunk-OG6CL3EB.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/TreeGrid/index.js

@@ -1,8 +1,8 @@
-export { TreeGrid } from '../chunk-B2Z2CDM5.js';
+export { TreeGrid } from '../chunk-T5TFZ2JB.js';
 import '../chunk-MY374UUD.js';
 import '../chunk-VYOKRN2I.js';
-import '../chunk-4FQT6ZAY.js';
 import '../chunk-HMPFGIWM.js';
 import '../chunk-R25RGPUB.js';
+import '../chunk-4FQT6ZAY.js';
 import '../chunk-BZFWDIV6.js';
 import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline/VersionTimeline.d.ts

@@ -0,0 +1,76 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { type Principal } from '../Principal/index.js';
+import { type TimeValue } from '../RelativeTime/index.js';
+/**
+ * What made a version.
+ *
+ * A schema or a capability change has a row of its own, because it changes
+ * what the page CAN DO rather than what it shows. A restore is a publish of an
+ * old version as a new one, never a rewrite of history, so it names the
+ * version it brought back.
+ */
+export type VersionKind = 'publish' | 'restore' | 'schema' | 'capabilities';
+export interface VersionItem {
+    version: number;
+    kind?: VersionKind | undefined;
+    /** A name somebody gave this version ("Review draft"). */
+    label?: string | undefined;
+    /** What changed, in the author's words or the engine's ("Added totals row"). */
+    summary?: string | undefined;
+    author: Principal;
+    at: TimeValue;
+    /** Where it came from: a task and a turn, as a link or as words. */
+    source?: ReactNode;
+    /** For a restore: the version it brought back. */
+    restoredFrom?: number | undefined;
+}
+export interface VersionTimelineLabels {
+    list: string;
+    version: (version: number) => string;
+    latest: string;
+    publish: string;
+    restore: (from: number | undefined) => string;
+    schema: string;
+    capabilities: string;
+    compare: string;
+    /** The compare control's accessible name; it is a toggle, pressed while this version is compared. */
+    compareWith: (version: number) => string;
+    restoreAction: string;
+    restoreVersion: (version: number) => string;
+    labelAction: string;
+    labelVersion: (version: number) => string;
+    /** The line for versions the engine no longer keeps, given the oldest it does. */
+    retention: (oldestKept: number) => string;
+}
+export interface VersionTimelineProps extends Omit<HTMLAttributes<HTMLElement>, 'onSelect'> {
+    /** Newest first. */
+    versions: readonly VersionItem[];
+    /** The newest version. The highest one listed when left out. */
+    latest?: number | undefined;
+    /** The version on show. */
+    selected: number;
+    /** The version the one on show is compared with, if any. */
+    against?: number | undefined;
+    onSelect: (version: number) => void;
+    /** Compares the version on show with this one; `null` stops comparing. Without it there is no compare control. */
+    onCompare?: ((version: number | null) => void) | undefined;
+    /** Publishes this version again as a new one. Without it there is no restore control. */
+    onRestore?: ((version: number) => void) | undefined;
+    /** Names this version. Without it there is no name control. */
+    onLabel?: ((version: number) => void) | undefined;
+    /** The oldest version the engine still keeps; anything below it is said to be past retention. */
+    oldestKept?: number | undefined;
+    /** Overrides the shared clock, for a story or a suite. */
+    now?: number | undefined;
+    labels?: Partial<VersionTimelineLabels> | undefined;
+}
+/**
+ * An artifact's versions, newest first, with the one on show and the one it is
+ * compared with marked.
+ *
+ * SELECTING IS NOT RESTORING. Choosing a row shows that version; Restore is a
+ * separate control, and it publishes the old version as a new one, so nothing
+ * a reader does here rewrites history. The newest version offers no Restore,
+ * because it is already what everybody sees.
+ */
+export declare function VersionTimeline({ versions, latest, selected, against, onSelect, onCompare, onRestore, onLabel, oldestKept, now, labels, className, ...rest }: VersionTimelineProps): import("react").JSX.Element;

package/dist/VersionTimeline/index.d.ts

@@ -0,0 +1,3 @@
+import './VersionTimeline.css';
+export { VersionTimeline } from './VersionTimeline.js';
+export type { VersionItem, VersionKind, VersionTimelineLabels, VersionTimelineProps } from './VersionTimeline.js';

package/dist/VersionTimeline/index.js

@@ -0,0 +1,10 @@
+export { VersionTimeline } from '../chunk-WXAULPBH.js';
+import '../chunk-AUQPBL4O.js';
+import '../chunk-OG6CL3EB.js';
+import '../chunk-4KP4RC3O.js';
+import '../chunk-3CZ7XAVY.js';
+import '../chunk-EUCC37WY.js';
+import '../chunk-UAN5NE7M.js';
+import '../chunk-5OM447RW.js';
+import '../chunk-BZFWDIV6.js';
+import '../chunk-ODEQTPFM.js';

package/dist/VersionTimeline-EBJ6MIPJ.css

@@ -0,0 +1,108 @@
+/*
+ * A version list beside the version on show. The row's main line is the
+ * button that shows it; the controls sit under the facts, so a reader scanning
+ * the list reads numbers and names rather than a column of buttons.
+ */
+
+.crewlet-version-timeline {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  min-width: 0;
+}
+
+.crewlet-version-timeline__select {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-1);
+  width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-primary);
+  font: inherit;
+  text-align: start;
+  cursor: pointer;
+}
+
+.crewlet-version-timeline__select:hover {
+  background: var(--color-surface-hover);
+}
+
+/* The version on show. The accent means "where the reader is", which is
+   exactly what this row is. */
+.crewlet-version-timeline__select[aria-current='true'] {
+  background: var(--color-brand-accent-soft);
+  box-shadow: inset 2px 0 0 var(--color-brand-accent);
+}
+
+.crewlet-version-timeline__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--spacing-2);
+}
+
+.crewlet-version-timeline__number {
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+}
+
+.crewlet-version-timeline__latest,
+.crewlet-version-timeline__label {
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-xs);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__latest {
+  background: var(--color-surface-inset);
+  color: var(--color-text-secondary);
+}
+
+.crewlet-version-timeline__label {
+  border: 1px solid var(--color-border-default);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-timeline__summary {
+  color: var(--color-text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.crewlet-version-timeline__meta,
+.crewlet-version-timeline__source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-2);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}
+
+.crewlet-version-timeline__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-1);
+  padding-inline: var(--spacing-1);
+}
+
+/* The version compared against carries the same edge in the strong neutral:
+   it is the other side of the comparison, not where the reader is, so it does
+   not take the accent. */
+.is-compared > .crewlet-timeline__body > .crewlet-version-timeline__select {
+  box-shadow: inset 2px 0 0 var(--color-border-strong);
+}
+
+.crewlet-version-timeline__gap {
+  margin: 0;
+  padding: var(--spacing-2) var(--spacing-3);
+  border: 1px dashed var(--color-border-default);
+  border-radius: var(--radius-md);
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+}

package/dist/{chunk-SBRE7IML.js → chunk-2ONWEDQT.js}

@@ -1,4 +1,4 @@
-import { useThemePreference, useDensityPreference } from './chunk-K3OWD7BJ.js';
+import { useThemePreference, useDensityPreference } from './chunk-Z24ZUSTX.js';
 import { SegmentedControl } from './chunk-26PEPONN.js';
 import { SunGlyph, MonitorGlyph, MoonGlyph } from '@crewlethq/icons/glyphs';
 import { jsx } from 'react/jsx-runtime';

package/dist/chunk-35XVR5JQ.js

@@ -0,0 +1,81 @@
+import { Count } from './chunk-BHHIIK3M.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './ArrangeGroup-SHFHA7BE.css';
+import { useId } from 'react';
+import { ChevronDownGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PLACEHOLDER = "Name this group";
+function ArrangeGroup({
+  title,
+  tone = "none",
+  collapsed,
+  onCollapsedChange,
+  count,
+  onTitleChange,
+  bodyProps,
+  empty,
+  columns = 12,
+  actions,
+  className,
+  children,
+  ...rest
+}) {
+  const bodyId = `${useId()}-body`;
+  const { className: bodyClass, style: bodyStyle, ...body } = bodyProps ?? {};
+  const hasChildren = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cx("crewlet-arrange-group", `crewlet-arrange-group--${tone}`, collapsed && "is-collapsed", className),
+      "aria-label": title || "Untitled group",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "crewlet-arrange-group__head", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cx("crewlet-arrange-group__toggle", onTitleChange && "is-icon"),
+              "aria-expanded": !collapsed,
+              "aria-controls": bodyId,
+              "aria-label": onTitleChange ? `${collapsed ? "Expand" : "Collapse"} ${title || "group"}` : void 0,
+              onClick: () => onCollapsedChange(!collapsed),
+              children: [
+                /* @__PURE__ */ jsx(ChevronDownGlyph, { size: "sm", className: "crewlet-arrange-group__chevron" }),
+                onTitleChange ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-group__title", children: title || "Untitled group" })
+              ]
+            }
+          ),
+          onTitleChange ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "crewlet-arrange-group__title-field",
+              "aria-label": "Group name",
+              value: title,
+              maxLength: 60,
+              placeholder: PLACEHOLDER,
+              size: Math.max(3, (title || PLACEHOLDER).length),
+              onChange: (e) => onTitleChange(e.target.value)
+            }
+          ) : null,
+          count !== void 0 ? /* @__PURE__ */ jsx(Count, { value: count, className: "crewlet-arrange-group__count" }) : null,
+          actions ? /* @__PURE__ */ jsx("span", { className: "crewlet-arrange-group__actions", children: actions }) : null
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: bodyId,
+            className: cx("crewlet-arrange-group__body", bodyClass),
+            style: { ...bodyStyle, ["--crewlet-arrange-columns"]: columns },
+            hidden: collapsed,
+            ...body,
+            children: hasChildren ? children : empty ? /* @__PURE__ */ jsx("div", { className: "crewlet-arrange-group__empty", children: empty }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { ArrangeGroup };

package/dist/chunk-3BYIWOTV.js

@@ -0,0 +1,29 @@
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './CursorFlag-AJQJBUGY.css';
+import { PencilGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function CursorFlag({ name, hue, kind = "human", editing = false, placement = "top-end", className, ...rest }) {
+  const text = typeof name === "string" ? name : name.join(", ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...rest,
+      "aria-hidden": "true",
+      className: cx(
+        "crewlet-cursor-flag",
+        presenceHueClass(hue),
+        `crewlet-cursor-flag--${kind}`,
+        `crewlet-cursor-flag--${placement}`,
+        className
+      ),
+      children: [
+        editing ? /* @__PURE__ */ jsx(PencilGlyph, { size: "xs", className: "crewlet-cursor-flag__glyph" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "crewlet-cursor-flag__name", children: text })
+      ]
+    }
+  );
+}
+
+export { CursorFlag };

package/dist/chunk-4KP4RC3O.js

@@ -0,0 +1,25 @@
+import { Avatar } from './chunk-5OM447RW.js';
+import { UsersGlyph } from '@crewlethq/icons/glyphs';
+import { jsx } from 'react/jsx-runtime';
+
+var PRINCIPAL_KINDS = ["person", "agent", "team"];
+function PrincipalAvatar({ principal, size = "sm", decorative = true }) {
+  const { kind, name, character, hue, src } = principal;
+  if (kind === "team") {
+    return /* @__PURE__ */ jsx(Avatar, { name, size, kind: "agent", icon: /* @__PURE__ */ jsx(UsersGlyph, {}), decorative });
+  }
+  return /* @__PURE__ */ jsx(
+    Avatar,
+    {
+      name,
+      size,
+      kind: kind === "person" ? "human" : "agent",
+      character: kind === "agent" ? character : void 0,
+      hue: kind === "agent" ? hue : void 0,
+      src,
+      decorative
+    }
+  );
+}
+
+export { PRINCIPAL_KINDS, PrincipalAvatar };

package/dist/chunk-5XACKNYR.js

@@ -0,0 +1,53 @@
+import { CursorFlag } from './chunk-3BYIWOTV.js';
+import { presenceHueClass } from './chunk-I6POAB4V.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './LiveCursor-DZHGIYWE.css';
+import { useState, useEffect } from 'react';
+import { MousePointer2Glyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var LIVE_CURSOR_REST_MS = 5e3;
+var LIVE_CURSOR_HIDE_MS = 3e4;
+function LiveCursor({
+  x,
+  y,
+  name,
+  hue,
+  kind = "human",
+  idleAfterMs = LIVE_CURSOR_REST_MS,
+  hideAfterMs = LIVE_CURSOR_HIDE_MS,
+  interpolate = true,
+  className
+}) {
+  const [phase, setPhase] = useState("live");
+  useEffect(() => {
+    setPhase("live");
+    const rest = setTimeout(() => setPhase("resting"), idleAfterMs);
+    const hide = setTimeout(() => setPhase("gone"), hideAfterMs);
+    return () => {
+      clearTimeout(rest);
+      clearTimeout(hide);
+    };
+  }, [x, y, idleAfterMs, hideAfterMs]);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-phase": phase,
+      className: cx(
+        "crewlet-live-cursor",
+        presenceHueClass(hue),
+        interpolate && "crewlet-live-cursor--glide",
+        phase !== "live" && `crewlet-live-cursor--${phase}`,
+        className
+      ),
+      style: { transform: `translate(${x}px, ${y}px)` },
+      children: [
+        /* @__PURE__ */ jsx(MousePointer2Glyph, { size: "lg", filled: true, className: "crewlet-live-cursor__pointer" }),
+        /* @__PURE__ */ jsx(CursorFlag, { name, hue, kind, placement: "inline", className: "crewlet-live-cursor__flag" })
+      ]
+    }
+  );
+}
+
+export { LIVE_CURSOR_HIDE_MS, LIVE_CURSOR_REST_MS, LiveCursor };

package/dist/chunk-63WJLRB2.js

@@ -0,0 +1,24 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Note-RT4L6VUT.css';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var Note = forwardRef(function Note2({ tone = "amber", align = "start", size = "md", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx(
+        "crewlet-note",
+        `crewlet-note--${tone}`,
+        align === "center" && "crewlet-note--center",
+        size === "lg" && "crewlet-note--lg",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+
+export { Note };

package/dist/{chunk-L4ZLXYPO.js → chunk-6A7P6II6.js}

@@ -1,4 +1,4 @@
-import { TreeGrid } from './chunk-B2Z2CDM5.js';
+import { TreeGrid } from './chunk-T5TFZ2JB.js';
 import { createTreeModel, treeParent } from './chunk-MY374UUD.js';
 import { OrgLabel } from './chunk-AKEZ3G5V.js';
 import { AddPill } from './chunk-TROLVEZY.js';

package/dist/chunk-6KWNXIDE.js

@@ -0,0 +1,18 @@
+import { cx } from './chunk-ODEQTPFM.js';
+import './Divider-3Z77ZAJH.css';
+import { jsx } from 'react/jsx-runtime';
+
+function Divider({ label, align = "start", className, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "aria-label": label || void 0,
+      className: cx("crewlet-divider", label && "crewlet-divider--labelled", label && align === "center" && "crewlet-divider--center", className),
+      ...rest,
+      children: label ? /* @__PURE__ */ jsx("span", { className: "crewlet-divider__label", children: label }) : null
+    }
+  );
+}
+
+export { Divider };

package/dist/chunk-6MIXD6IW.js

@@ -0,0 +1,49 @@
+import { IconButton } from './chunk-4FQT6ZAY.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './PinTile-IIA25MNZ.css';
+import { forwardRef } from 'react';
+import { GripVerticalGlyph, PinGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var PinTile = forwardRef(function PinTile2({ title, href, kind, meta, leading, status, figure, onUnpin, handle, className, ...rest }, ref) {
+  const { "aria-label": handleName, ...handleRest } = handle ?? { "aria-label": "" };
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx("crewlet-pin-tile", className), ...rest, children: [
+    handle ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "crewlet-pin-tile__handle",
+        label: handleName,
+        icon: /* @__PURE__ */ jsx(GripVerticalGlyph, { size: "sm" }),
+        ...handleRest
+      }
+    ) : null,
+    leading ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__leading", "aria-hidden": "true", children: leading }) : null,
+    /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__head", children: [
+        /* @__PURE__ */ jsx("a", { className: "crewlet-pin-tile__link", href, children: title }),
+        status ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__status", children: status }) : null
+      ] }),
+      kind || meta ? /* @__PURE__ */ jsxs("span", { className: "crewlet-pin-tile__meta", children: [
+        kind ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__kind", children: kind }) : null,
+        kind && meta ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
+        meta
+      ] }) : null
+    ] }),
+    figure !== void 0 && figure !== null ? /* @__PURE__ */ jsx("span", { className: "crewlet-pin-tile__figure", children: figure }) : null,
+    onUnpin ? /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        variant: "ghost",
+        className: "crewlet-pin-tile__unpin",
+        label: `Unpin ${title}`,
+        icon: /* @__PURE__ */ jsx(PinGlyph, { size: "sm" }),
+        onClick: onUnpin
+      }
+    ) : null
+  ] });
+});
+
+export { PinTile };

package/dist/{chunk-FA2V2VT6.js → chunk-7FQEUNHX.js}

@@ -1,12 +1,12 @@
 import { Skeleton } from './chunk-W5J7R5EB.js';
-import { Modal } from './chunk-DEEVA6TV.js';
+import { Modal } from './chunk-7IJARUIF.js';
 import { useListbox, useOptionKeys } from './chunk-F73MC7EZ.js';
-import { Input } from './chunk-4GB57WIT.js';
+import { Input } from './chunk-Q55TXPA3.js';
+import { Popover } from './chunk-BWRGFKJP.js';
 import { KeyChip, highlightMatch } from './chunk-FYTIJM2T.js';
-import { announce } from './chunk-RSAQOKH3.js';
 import { useMediaMatch } from './chunk-IG75YMUN.js';
-import { Popover } from './chunk-BWRGFKJP.js';
 import { focusables, isComposing } from './chunk-R25RGPUB.js';
+import { announce } from './chunk-RSAQOKH3.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
 import './Switcher-B44Q4WF4.css';