@pantheon-systems/puck-css 0.4.0

package/dist/pds/components/WorkstreamSwitcher.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * WorkstreamSwitcher component.
+ *
+ * Displays the current branch in a trigger button and opens a dropdown that
+ * lists all branches, supports search filtering, exposes a "Compare with
+ * Live" action when the viewer is not on the main branch, and provides an
+ * inline "New workstream" create form in the footer.
+ *
+ * The dropdown uses createPortal + position:fixed so it escapes any
+ * overflow:hidden or z-index constraints on ancestor elements (e.g. Puck's
+ * header container or sidebar panels).
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon, Button, StatusIndicator } from '@pantheon-systems/pds-toolkit-react';
+import styles from './WorkstreamSwitcher.module.css';
+export function WorkstreamSwitcher({ branches, currentBranch, onSwitch, onCompareWithLive, hideCompareButton = false, onCreateBranch, }) {
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const [dropdownStyle, setDropdownStyle] = useState({});
+    const [isCreating, setIsCreating] = useState(false);
+    const [newName, setNewName] = useState('');
+    const [createError, setCreateError] = useState(null);
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const triggerLabel = currentBranch?.isMain ? 'Live' : (currentBranch?.name ?? 'Select branch');
+    const isOnMain = currentBranch?.isMain ?? false;
+    const matched = query
+        ? branches.filter((b) => b.name.toLowerCase().includes(query.toLowerCase()))
+        : branches;
+    // Main branch ("Live") always sorts to the top
+    const filtered = [...matched].sort((a, b) => {
+        if (a.isMain)
+            return -1;
+        if (b.isMain)
+            return 1;
+        return 0;
+    });
+    const updatePosition = useCallback(() => {
+        if (triggerRef.current) {
+            const rect = triggerRef.current.getBoundingClientRect();
+            const isMobile = window.innerWidth < 768;
+            if (isMobile) {
+                setDropdownStyle({
+                    position: 'fixed',
+                    top: rect.bottom + 6,
+                    left: 0,
+                    width: window.innerWidth,
+                    zIndex: 9999,
+                });
+            }
+            else {
+                const availableWidth = window.innerWidth - 16;
+                setDropdownStyle({
+                    position: 'fixed',
+                    top: rect.bottom + 6,
+                    left: Math.min(rect.left, window.innerWidth - Math.min(400, availableWidth) - 8),
+                    width: Math.min(Math.max(rect.width, 280), availableWidth),
+                    zIndex: 9999,
+                });
+            }
+        }
+    }, []);
+    function closeDropdown() {
+        setOpen(false);
+        setIsCreating(false);
+        setNewName('');
+        setCreateError(null);
+    }
+    function handleTrigger() {
+        if (!open) {
+            updatePosition();
+            setOpen(true);
+        }
+        else {
+            closeDropdown();
+        }
+    }
+    function handleBranchClick(branch) {
+        if (currentBranch && branch.id === currentBranch.id)
+            return;
+        onSwitch(branch.id);
+        closeDropdown();
+    }
+    const handleCreate = useCallback(async (e) => {
+        e.preventDefault();
+        if (!newName.trim() || !onCreateBranch)
+            return;
+        setCreateError(null);
+        try {
+            await onCreateBranch(newName.trim());
+            setNewName('');
+            setIsCreating(false);
+        }
+        catch (err) {
+            setCreateError(err instanceof Error ? err.message : 'Failed to create workstream');
+        }
+    }, [newName, onCreateBranch]);
+    // Close on outside click.
+    //
+    // Uses pointerdown with { capture: true } so the handler runs early in the
+    // event lifecycle. If the click target is inside the trigger button OR inside
+    // the portal dropdown (dropdownRef), we skip closing — this lets branch
+    // buttons inside the portal fire their onClick before the dropdown unmounts.
+    useEffect(() => {
+        if (!open)
+            return;
+        function handleClickOutside(e) {
+            const target = e.target;
+            if (triggerRef.current?.contains(target) ||
+                dropdownRef.current?.contains(target)) {
+                return; // click is inside trigger or dropdown — don't close
+            }
+            closeDropdown();
+        }
+        document.addEventListener('pointerdown', handleClickOutside, { capture: true });
+        return () => document.removeEventListener('pointerdown', handleClickOutside, { capture: true });
+    }, [open]);
+    // Reposition on scroll/resize
+    useEffect(() => {
+        if (!open)
+            return;
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [open, updatePosition]);
+    return (_jsxs("div", { className: styles.root, children: [_jsxs("button", { ref: triggerRef, type: "button", "data-testid": "workstream-trigger", className: `${styles.trigger}${open ? ` ${styles.triggerOpen}` : ''}`, onClick: handleTrigger, "aria-haspopup": "listbox", "aria-expanded": open, children: [_jsx(Icon, { iconName: "codeBranch", iconSize: "s", "aria-hidden": "true" }), _jsxs("span", { className: styles.labelText, children: [triggerLabel, _jsx(Icon, { iconName: "angleDown", iconSize: "s", "aria-hidden": "true" })] })] }), !isOnMain && !hideCompareButton && (_jsx(Button, { "data-testid": "compare-with-live", label: "Compare with Live", variant: "secondary", size: "sm", onClick: onCompareWithLive, buttonType: "button" })), open &&
+                createPortal(_jsxs("div", { ref: dropdownRef, "data-testid": "workstream-dropdown", className: styles.dropdown, role: "listbox", style: dropdownStyle, children: [_jsxs("div", { className: styles.header, children: [_jsx("input", { autoFocus: true, type: "text", "data-testid": "workstream-search", className: styles.search, placeholder: "Search workstreams\u2026", value: query, onChange: (e) => setQuery(e.target.value) }), _jsx("button", { type: "button", "data-testid": "workstream-close", className: styles.closeButton, onClick: closeDropdown, "aria-label": "Close", children: "\u00D7" })] }), _jsx("ul", { "data-testid": "workstream-list", className: styles.list, children: filtered.map((branch) => (_jsx("li", { className: styles.item, children: _jsx("button", { type: "button", className: styles.branchButton, onClick: () => handleBranchClick(branch), "aria-selected": currentBranch ? branch.id === currentBranch.id : false, children: branch.isMain ? (_jsx(StatusIndicator, { "data-testid": "workstream-live-label", type: "discovery", label: "Live", size: "s", className: styles.liveIndicator })) : (branch.name) }) }, branch.id))) }), _jsx("div", { className: styles.footer, children: isCreating ? (_jsxs("form", { "data-testid": "workstream-create-form", className: styles.createForm, onSubmit: handleCreate, children: [_jsx("input", { autoFocus: true, type: "text", "data-testid": "workstream-create-input", className: styles.createInput, placeholder: "workstream-name", value: newName, onChange: (e) => setNewName(e.target.value) }), _jsxs("div", { className: styles.createActions, children: [_jsx("button", { type: "submit", className: styles.createSubmit, children: "Create" }), _jsx("button", { type: "button", "data-testid": "workstream-create-cancel", className: styles.createCancel, onClick: () => { setIsCreating(false); setNewName(''); setCreateError(null); }, children: "Cancel" })] }), createError && (_jsx("div", { "data-testid": "workstream-create-error", className: styles.createError, children: createError }))] })) : (_jsx("button", { type: "button", "data-testid": "workstream-new", className: styles.newButton, onClick: onCreateBranch ? () => setIsCreating(true) : undefined, children: "+ New workstream" })) })] }), document.body)] }));
+}
+//# sourceMappingURL=WorkstreamSwitcher.js.map

package/dist/pds/components/WorkstreamSwitcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkstreamSwitcher.js","sourceRoot":"","sources":["../../../src/pds/components/WorkstreamSwitcher.tsx"],"names":[],"mappings":"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"}

package/dist/pds/components/WorkstreamSwitcher.module.css

@@ -0,0 +1,320 @@
+/* ============================================================================
+ * WorkstreamSwitcher — CSS Module
+ *
+ * Maps to the WorkstreamSwitcher component in the PDS v2 prototype.
+ * All colour / spacing / radius values use --pds-* CSS variables with
+ * oklch fallbacks derived from the prototype's `c` and `t` objects.
+ * ============================================================================ */
+
+/* ------------------------------------------------------------------
+ * Root wrapper — positions the dropdown relative to the trigger
+ * ------------------------------------------------------------------ */
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pds-spacing-xs, 0.625rem);
+}
+
+/* ------------------------------------------------------------------
+ * Trigger button — shows current branch name in code font
+ * Height 2rem, code font for the branch name, subtle border.
+ * ------------------------------------------------------------------ */
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pds-spacing-2xs, 0.5rem);
+  height: 2rem;
+  padding: 0.5rem 0.64rem;
+  background: transparent;
+  border: 1px solid oklch(0.96 0 0); /* borderSubtle */
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  font-weight: var(--pds-typography-fw-medium, 500);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  line-height: 1;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.2s cubic-bezier(0.2, 0, 0, 1),
+              border-color 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.trigger:hover,
+.trigger[aria-expanded='true'] {
+  background: oklch(0.96 0 0); /* bgSubtle */
+  border-color: oklch(0.75 0 0); /* borderStrong */
+}
+
+.triggerOpen {
+  background: oklch(0.96 0 0); /* bgSubtle */
+  border-color: oklch(0.75 0 0); /* borderStrong */
+}
+
+/* ------------------------------------------------------------------
+ * Dropdown panel — portal-rendered, positioned with inline style
+ * Width min 400px, elevation-overlay shadow, container border-radius.
+ * ------------------------------------------------------------------ */
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  background: var(--pds-color-bg-default, oklch(1 0 0));
+  border: 1px solid oklch(0.96 0 0); /* borderSubtle */
+  border-radius: var(--pds-border-radius-container, 0.375rem);
+  box-shadow: var(
+    --pds-elevation-overlay,
+    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
+    0px 1px 1px 0px rgba(0, 0, 0, 0.02),
+    0px 8px 16px -4px rgba(0, 0, 0, 0.04),
+    0px 24px 32px -8px rgba(0, 0, 0, 0.06)
+  );
+  overflow: hidden;
+  /* z-index and top/left/width are set via inline style from the portal effect */
+}
+
+/* ------------------------------------------------------------------
+ * Header row — search input + close button
+ * ------------------------------------------------------------------ */
+.header {
+  display: flex;
+  align-items: center;
+  padding: var(--pds-spacing-xs, 0.625rem);
+  border-bottom: 1px solid oklch(0.96 0 0); /* borderSubtle */
+  gap: 0.512rem;
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+}
+
+/* ------------------------------------------------------------------
+ * Search input
+ * ------------------------------------------------------------------ */
+.search {
+  flex: 1;
+  border: 1px solid var(--pds-color-border-input, oklch(0.8853 0 0));
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  outline: none;
+  padding: 0.5rem 0.64rem;
+  background: var(--pds-color-bg-default, oklch(1 0 0));
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  height: 2rem;
+  line-height: 1;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.search::placeholder {
+  color: oklch(0.65 0 0); /* fgSubtle */
+}
+
+.search:focus {
+  border-color: var(--pds-color-interactive-focus, oklch(0.5558 0.2372 267.79));
+  box-shadow: 0 0 0 2px oklch(0.5558 0.2372 267.79 / 0.15);
+}
+
+/* ------------------------------------------------------------------
+ * Close button
+ * ------------------------------------------------------------------ */
+.closeButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--pds-color-fg-default-secondary, oklch(0.5103 0 0));
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  flex-shrink: 0;
+}
+
+.closeButton:hover {
+  background: oklch(0.96 0 0); /* bgSubtle */
+}
+
+/* ------------------------------------------------------------------
+ * Scrollable list area
+ * ------------------------------------------------------------------ */
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0.41rem;
+  overflow-y: auto;
+  max-height: 360px;
+  flex: 1;
+}
+
+.item {
+  display: flex;
+}
+
+/* Individual branch row button */
+.branchButton {
+  display: flex;
+  align-items: center;
+  gap: 0.64rem;
+  width: 100%;
+  text-align: left;
+  padding: 0.512rem 0.64rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.branchButton:hover {
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+}
+
+.branchButton[aria-selected='true'] {
+  background: var(
+    --pds-color-status-discovery-background,
+    oklch(0.9635 0.022 312.19)
+  );
+}
+
+/* "Live" StatusIndicator on the main branch row */
+.liveIndicator :global(.pds-status-indicator__label) {
+  font-weight: var(--pds-typography-fw-semibold, 600);
+}
+
+/* ------------------------------------------------------------------
+ * Footer — New workstream / create form
+ * ------------------------------------------------------------------ */
+.footer {
+  padding: 0.512rem 0.64rem;
+  border-top: 1px solid oklch(0.96 0 0); /* borderSubtle */
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+  display: flex;
+  align-items: center;
+}
+
+/* "New workstream" button — matches PageNavigator's .newButton style */
+.newButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.41rem;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid oklch(0.8853 0 0); /* btnSecondaryBorder */
+  border-radius: var(--pds-border-radius-button, 3.5rem);
+  padding: 0.5rem 0.625rem;
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  font-weight: var(--pds-typography-fw-semibold, 600);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  height: 2rem;
+  line-height: 1;
+  letter-spacing: 0.025em;
+  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
+}
+
+.newButton:hover {
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+}
+
+/* ------------------------------------------------------------------
+ * Inline create form (replaces footer content when isCreating)
+ * ------------------------------------------------------------------ */
+.createForm {
+  display: flex;
+  flex-direction: column;
+  gap: 0.41rem;
+  width: 100%;
+}
+
+.createInput {
+  flex: 1;
+  border: 1px solid var(--pds-color-border-input, oklch(0.8853 0 0));
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  outline: none;
+  padding: 0.375rem 0.5rem;
+  background: var(--pds-color-bg-default, oklch(1 0 0));
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.createInput:focus {
+  border-color: var(--pds-color-interactive-focus, oklch(0.5558 0.2372 267.79));
+  box-shadow: 0 0 0 2px oklch(0.5558 0.2372 267.79 / 0.15);
+}
+
+.createActions {
+  display: flex;
+  gap: 0.41rem;
+}
+
+.createSubmit {
+  flex: 1;
+  padding: 0.375rem 0.5rem;
+  background: var(--pds-color-interactive-default, oklch(0.5558 0.2372 267.79));
+  color: oklch(1 0 0);
+  border: none;
+  border-radius: var(--pds-border-radius-button, 3.5rem);
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  font-weight: var(--pds-typography-fw-semibold, 600);
+  cursor: pointer;
+}
+
+.createSubmit:hover {
+  background: var(--pds-color-interactive-hover, oklch(0.4558 0.2372 267.79));
+}
+
+.createCancel {
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  border: 1px solid oklch(0.8853 0 0);
+  border-radius: var(--pds-border-radius-button, 3.5rem);
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-fg-default, oklch(0.2046 0 0));
+  cursor: pointer;
+}
+
+.createCancel:hover {
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+}
+
+.createError {
+  font-size: var(--pds-typography-size-xs, 0.75rem);
+  color: var(--pds-color-status-critical-foreground, oklch(0.5274 0.2069 27.33));
+}
+
+/* ── Responsive label text ──────────────────────────────────────────── */
+/* Wraps branch name + chevron in trigger; hidden on mobile for icon-only mode */
+
+.labelText {
+  display: contents;
+}
+
+@media (max-width: 767px) {
+  .labelText {
+    display: none;
+  }
+
+  .dropdown {
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+
+  .list {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .branchButton {
+    width: max-content;
+    min-width: 100%;
+  }
+}

package/dist/pds/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * PDS v2 theme integration for the Puck editor.
+ *
+ * Provides the CSS class name that remaps Puck's internal design tokens
+ * (`--puck-*`) to PDSv2 CSS custom properties (`--pds-*`), plus stub
+ * exports for backward-compatible imports from consuming apps.
+ */
+export declare const puckEditorThemeClass: "puck-editor-theme";
+/**
+ * No-op hook — returns an empty object so destructured overrides
+ * (fieldTypes, components, outline, header, headerActions) are all
+ * `undefined` and Puck's native UI renders unmodified.
+ */
+export declare function usePDSEditorOverrides(_options?: any): Record<string, undefined>;
+/**
+ * Returns a minimal no-op Puck plugin.  Consuming apps that still
+ * reference `createHistoryPlugin()` won't break at runtime.
+ */
+export declare function createHistoryPlugin(): {
+    name: string;
+};
+export type { DocState, PDSEditorOverridesOptions } from './types.js';
+export { P1EditorHeader } from './components/P1EditorHeader.js';
+export type { PageNavigatorDocument } from './components/P1EditorHeader.js';
+export { P1EditorSubheader } from './components/P1EditorSubheader.js';
+export { WorkstreamSwitcher } from './components/WorkstreamSwitcher.js';
+export { PageNavigator } from './components/PageNavigator.js';
+export { AgentChip } from './components/AgentChip.js';
+export { PresenceStack } from './components/PresenceStack.js';
+export { DocStateBadge } from './components/DocStateBadge.js';
+export { PublishControl } from './components/PublishControl.js';
+export { deriveDocState } from './utils/deriveDocState.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/pds/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pds/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,eAAO,MAAM,oBAAoB,EAAG,mBAA4B,CAAC;AAMjE;;;;GAIG;AAEH,wBAAgB,qBAAqB,CAAC,QAAQ,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAE/E;AAED;;;GAGG;AACH,wBAAgB,mBAAmB;;EAElC;AAMD,YAAY,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAMtE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,YAAY,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAMhE,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/pds/index.js

@@ -0,0 +1,46 @@
+/**
+ * PDS v2 theme integration for the Puck editor.
+ *
+ * Provides the CSS class name that remaps Puck's internal design tokens
+ * (`--puck-*`) to PDSv2 CSS custom properties (`--pds-*`), plus stub
+ * exports for backward-compatible imports from consuming apps.
+ */
+// ---------------------------------------------------------------------------
+// Theme class
+// ---------------------------------------------------------------------------
+export const puckEditorThemeClass = 'puck-editor-theme';
+// ---------------------------------------------------------------------------
+// Backward-compatible stubs
+// ---------------------------------------------------------------------------
+/**
+ * No-op hook — returns an empty object so destructured overrides
+ * (fieldTypes, components, outline, header, headerActions) are all
+ * `undefined` and Puck's native UI renders unmodified.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function usePDSEditorOverrides(_options) {
+    return {};
+}
+/**
+ * Returns a minimal no-op Puck plugin.  Consuming apps that still
+ * reference `createHistoryPlugin()` won't break at runtime.
+ */
+export function createHistoryPlugin() {
+    return { name: 'pds-history' };
+}
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+export { P1EditorHeader } from './components/P1EditorHeader.js';
+export { P1EditorSubheader } from './components/P1EditorSubheader.js';
+export { WorkstreamSwitcher } from './components/WorkstreamSwitcher.js';
+export { PageNavigator } from './components/PageNavigator.js';
+export { AgentChip } from './components/AgentChip.js';
+export { PresenceStack } from './components/PresenceStack.js';
+export { DocStateBadge } from './components/DocStateBadge.js';
+export { PublishControl } from './components/PublishControl.js';
+// ---------------------------------------------------------------------------
+// Utils
+// ---------------------------------------------------------------------------
+export { deriveDocState } from './utils/deriveDocState.js';
+//# sourceMappingURL=index.js.map

package/dist/pds/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/pds/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,8EAA8E;AAC9E,cAAc;AACd,8EAA8E;AAE9E,MAAM,CAAC,MAAM,oBAAoB,GAAG,mBAA4B,CAAC;AAEjE,8EAA8E;AAC9E,4BAA4B;AAC5B,8EAA8E;AAE9E;;;;GAIG;AACH,8DAA8D;AAC9D,MAAM,UAAU,qBAAqB,CAAC,QAAc;IAClD,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;AACjC,CAAC;AAQD,8EAA8E;AAC9E,aAAa;AACb,8EAA8E;AAE9E,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,8EAA8E;AAC9E,QAAQ;AACR,8EAA8E;AAE9E,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC"}