@pantheon-systems/puck-css 0.8.0 → 0.10.0

package/dist/versioning/components/HistoricalVersionBanner.module.css

@@ -0,0 +1,174 @@
+/* `flex: none` keeps the banner at its own height inside the canvas column. */
+.slot {
+  flex: none;
+}
+
+/* Grid rather than flex so the actions can never wrap onto a second line as the
+   canvas narrows — the banner would change height and shove the canvas down.
+   The middle column absorbs the squeeze; `error` gets its own row. */
+.banner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--pds-spacing-s);
+  padding: var(--pds-spacing-xs) var(--pds-spacing-m);
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  border-top: 2px solid var(--pds-color-interactive-link-default, #3a5dfb);
+  border-bottom: var(--pds-border-width-default, 1px) solid var(--pds-color-border-secondary, #ececf0);
+  color: var(--pds-color-fg-default, #171717);
+  font-family: var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pds-color-interactive-link-default, #3a5dfb);
+}
+
+/* `display: block` rather than flex because text-overflow does not apply to flex
+   children — the two spans sit inline in one truncation context, so the
+   timestamp erodes before the version number without needing a breakpoint. */
+.content {
+  min-width: 0;
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.text {
+  font: 500 var(--pds-typography-size-s) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
+  color: var(--pds-color-fg-default, #171717);
+}
+
+.text strong {
+  font: 700 var(--pds-typography-size-s) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
+}
+
+.date {
+  font: 500 var(--pds-typography-size-s) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
+  color: var(--pds-color-fg-default, #171717);
+  margin-left: var(--pds-spacing-3xs);
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pds-spacing-2xs);
+}
+
+.exitBtn {
+  /* Reset browser button defaults without wiping font (all:unset kills font too) */
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--pds-border-width-default, 1px) solid var(--pds-color-border-default, #d4d4d4);
+  background: var(--pds-color-bg-surface, white);
+  border-radius: 9px;
+  padding: 9px 20px;
+  font: 600 var(--pds-typography-size-s) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
+  color: var(--pds-color-fg-default, #171717);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--pds-animation-transition-button);
+  line-height: 1;
+}
+
+.exitBtn:hover:not(:disabled) {
+  background: var(--pds-color-interactive-background-hover, #f5f5f5);
+}
+
+.exitBtn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.revertBtn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pds-spacing-button-gap-inline-m);
+  border: none;
+  border-radius: var(--pds-border-radius-button);
+  background: var(--pds-color-fg-default, #171717);
+  color: white;
+  font: 700 var(--pds-typography-size-s) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
+  padding: 11px 18px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: var(--pds-animation-transition-button);
+  line-height: 1;
+}
+
+.revertBtn:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.revertBtn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* Its own row, so a revert failure never competes with the actions for width. */
+.error {
+  grid-column: 1 / -1;
+  margin: 0;
+  padding: 0;
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-status-error-icon, #c0392b);
+}
+
+.spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+  flex: none;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.steppers {
+  display: flex;
+  gap: 2px;
+}
+
+/* PDS wraps the trigger in its own element; the inline padding would push the
+   steppers apart. */
+.steppers :global(.pds-tooltip) {
+  padding-inline: 0;
+}
+
+.stepperBtn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--pds-color-fg-default, #1a1a1a);
+  transition: background 100ms ease;
+}
+
+.stepperBtn:hover:not(:disabled) {
+  background: var(--pds-color-interactive-background-hover, #f5f5f5);
+}
+
+.stepperBtn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}

package/dist/versioning/components/VersionBannerActions.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { DocumentVersion } from '@pantheon-systems/css-client';
+export interface VersionBannerActionsProps {
+    version?: DocumentVersion;
+    onReturnToLatest: () => void;
+    onRestoreVersion?: (version: DocumentVersion) => Promise<void>;
+    canRevert?: boolean;
+    isReturning?: boolean;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    hasPrevious?: boolean;
+    hasNext?: boolean;
+}
+export declare function VersionBannerActions({ version, onReturnToLatest, onRestoreVersion, canRevert, isReturning, onPrevious, onNext, hasPrevious, hasNext, }: VersionBannerActionsProps): React.ReactElement;
+//# sourceMappingURL=VersionBannerActions.d.ts.map

package/dist/versioning/components/VersionBannerActions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VersionBannerActions.d.ts","sourceRoot":"","sources":["../../../src/versioning/components/VersionBannerActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAmBpE,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,gBAAgB,EAChB,gBAAgB,EAChB,SAAiB,EACjB,WAAmB,EACnB,UAAU,EACV,MAAM,EACN,WAAmB,EACnB,OAAe,GAChB,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAuGhD"}

package/dist/versioning/components/VersionBannerActions.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { Icon, Tooltip } from '@pantheon-systems/pds-toolkit-react';
+import styles from './HistoricalVersionBanner.module.css';
+const REVERT_ERROR_FALLBACK = 'Revert failed. Please try again.';
+function StepperTooltip({ content, disabled, children, }) {
+    if (disabled)
+        return children;
+    return _jsx(Tooltip, { content: content, preferredPlacement: "top", customTrigger: children });
+}
+export function VersionBannerActions({ version, onReturnToLatest, onRestoreVersion, canRevert = false, isReturning = false, onPrevious, onNext, hasPrevious = false, hasNext = false, }) {
+    const [isReverting, setIsReverting] = useState(false);
+    const [revertError, setRevertError] = useState(null);
+    const busy = isReverting || isReturning;
+    const prevDisabled = !hasPrevious || busy;
+    const nextDisabled = !hasNext || busy;
+    useEffect(() => { setRevertError(null); }, [version?.id]);
+    const handleRevert = async () => {
+        if (!onRestoreVersion || !version)
+            return;
+        setIsReverting(true);
+        setRevertError(null);
+        try {
+            await onRestoreVersion(version);
+        }
+        catch (err) {
+            // Cap server error messages to avoid leaking internal details or long stack traces.
+            setRevertError(err instanceof Error && err.message.length < 80
+                ? err.message
+                : REVERT_ERROR_FALLBACK);
+        }
+        finally {
+            setIsReverting(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: styles.actions, children: [(onPrevious || onNext) && (_jsxs("div", { className: styles.steppers, children: [onPrevious && (_jsx(StepperTooltip, { content: "Previous Version", disabled: prevDisabled, children: _jsx("button", { type: "button", className: styles.stepperBtn, "aria-label": "Previous version", disabled: prevDisabled, onClick: onPrevious, children: _jsx(Icon, { iconName: "angleLeft", size: "s", "aria-hidden": "true" }) }) })), onNext && (_jsx(StepperTooltip, { content: "Next Version", disabled: nextDisabled, children: _jsx("button", { type: "button", className: styles.stepperBtn, "aria-label": "Next version", disabled: nextDisabled, onClick: onNext, children: _jsx(Icon, { iconName: "angleRight", size: "s", "aria-hidden": "true" }) }) }))] })), _jsx("button", { type: "button", className: styles.exitBtn, disabled: isReverting || isReturning, "aria-busy": isReturning, onClick: onReturnToLatest, "aria-label": "Return to current", children: isReturning ? 'Returning…' : 'Exit preview' }), canRevert && onRestoreVersion && version && (_jsx("button", { type: "button", className: styles.revertBtn, disabled: isReverting || isReturning, "aria-busy": isReverting, onClick: () => { void handleRevert(); }, children: isReverting ? (_jsxs(_Fragment, { children: [_jsx("span", { className: styles.spinner, "aria-hidden": "true" }), "Reverting\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { iconName: "rotateLeft", size: "s", "aria-hidden": "true" }), "Revert to this version"] })) }))] }), revertError && (_jsx("p", { className: styles.error, role: "alert", children: revertError }))] }));
+}
+//# sourceMappingURL=VersionBannerActions.js.map

package/dist/versioning/components/VersionBannerActions.js.map

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

package/dist/versioning/components/VersionPublishedBadge.d.ts

@@ -1,5 +1,5 @@
 export interface VersionPublishedBadgeProps {
     isPublished?: boolean;
 }
-export declare function VersionPublishedBadge({ isPublished, }: VersionPublishedBadgeProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function VersionPublishedBadge({ isPublished, }: VersionPublishedBadgeProps): import("react").JSX.Element | null;
 //# sourceMappingURL=VersionPublishedBadge.d.ts.map

package/dist/versioning/components/VersionPublishedBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VersionPublishedBadge.d.ts","sourceRoot":"","sources":["../../../src/versioning/components/VersionPublishedBadge.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,WAAkB,GACnB,EAAE,0BAA0B,kDAU5B"}
+{"version":3,"file":"VersionPublishedBadge.d.ts","sourceRoot":"","sources":["../../../src/versioning/components/VersionPublishedBadge.tsx"],"names":[],"mappings":"AAAA,MAAM,WAAW,0BAA0B;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,WAAkB,GACnB,EAAE,0BAA0B,sCAU5B"}

package/dist/versioning/components/version-compare/VisualVersionCompare.d.ts

@@ -10,12 +10,12 @@ import type { ComponentDiffWithPosition } from '../../../core/types.js';
  * Puck Data structure (flexible to accept various sources)
  */
 interface PuckData {
-    content: Array<{
+    content: {
         type: string;
         props: Record<string, unknown> & {
             id: string;
         };
-    }>;
+    }[];
     root: {
         props?: Record<string, unknown>;
     };

package/dist/versioning/components/version-compare/VisualVersionCompare.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualVersionCompare.d.ts","sourceRoot":"","sources":["../../../../src/versioning/components/version-compare/VisualVersionCompare.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGxE;;GAEG;AACH,UAAU,QAAQ;IAChB,OAAO,EAAE,KAAK,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;KACjD,CAAC,CAAC;IACH,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;CAC3C;AAED;;;GAGG;AAEH,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEtC,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,MAAM,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,yBAAyB,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,YAAY,EACZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,SAAc,GACf,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAgFhD"}
+{"version":3,"file":"VisualVersionCompare.d.ts","sourceRoot":"","sources":["../../../../src/versioning/components/version-compare/VisualVersionCompare.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAGxE;;GAEG;AACH,UAAU,QAAQ;IAChB,OAAO,EAAE;QACP,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG;YAAE,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC;KACjD,EAAE,CAAC;IACJ,IAAI,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC;CAC3C;AAED;;;GAGG;AAEH,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AAEtC,MAAM,WAAW,yBAAyB;IACxC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,UAAU,EAAE,QAAQ,CAAC;IAErB;;OAEG;IACH,SAAS,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,MAAM,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,KAAK,EAAE,yBAAyB,EAAE,CAAC;IAEnC;;OAEG;IACH,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA+FD;;GAEG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,YAAY,EACZ,UAAU,EACV,SAAS,EACT,MAAM,EACN,KAAK,EACL,OAAO,EACP,SAAc,GACf,EAAE,yBAAyB,GAAG,KAAK,CAAC,YAAY,CAgFhD"}

package/dist/versioning/utils/formatVersionDate.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Formats a DocumentVersion createdAt date string for display in the editor UI.
+ * Returns an empty string for invalid/missing dates (safe to use as a falsy guard).
+ */
+export declare function formatVersionDate(dateString: string): string;
+/**
+ * Returns a human-readable day-group label for a version timestamp:
+ * 'Today', 'Yesterday', or a short date like 'Jul 15'.
+ *
+ * Day boundaries use local browser time. API timestamps are UTC ISO strings,
+ * so users near midnight in timezones ahead of UTC may see a version group
+ * under a different day than expected — this is intentional local-time behaviour.
+ */
+export declare function dayLabel(isoString: string): string;
+//# sourceMappingURL=formatVersionDate.d.ts.map

package/dist/versioning/utils/formatVersionDate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatVersionDate.d.ts","sourceRoot":"","sources":["../../../src/versioning/utils/formatVersionDate.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,CAS5D;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAmBlD"}

package/dist/versioning/utils/formatVersionDate.js

@@ -0,0 +1,41 @@
+/**
+ * Formats a DocumentVersion createdAt date string for display in the editor UI.
+ * Returns an empty string for invalid/missing dates (safe to use as a falsy guard).
+ */
+export function formatVersionDate(dateString) {
+    const date = new Date(dateString);
+    if (isNaN(date.getTime()))
+        return '';
+    return date.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+    });
+}
+/**
+ * Returns a human-readable day-group label for a version timestamp:
+ * 'Today', 'Yesterday', or a short date like 'Jul 15'.
+ *
+ * Day boundaries use local browser time. API timestamps are UTC ISO strings,
+ * so users near midnight in timezones ahead of UTC may see a version group
+ * under a different day than expected — this is intentional local-time behaviour.
+ */
+export function dayLabel(isoString) {
+    const date = new Date(isoString);
+    if (isNaN(date.getTime()))
+        return '';
+    const ref = new Date();
+    const startOfToday = new Date(ref);
+    startOfToday.setHours(0, 0, 0, 0);
+    const startOfYesterday = new Date(startOfToday);
+    startOfYesterday.setDate(startOfYesterday.getDate() - 1);
+    const startOfDate = new Date(date);
+    startOfDate.setHours(0, 0, 0, 0);
+    if (startOfDate.getTime() === startOfToday.getTime())
+        return 'Today';
+    if (startOfDate.getTime() === startOfYesterday.getTime())
+        return 'Yesterday';
+    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+}
+//# sourceMappingURL=formatVersionDate.js.map

package/dist/versioning/utils/formatVersionDate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatVersionDate.js","sourceRoot":"","sources":["../../../src/versioning/utils/formatVersionDate.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAAkB;IAClD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;IAClC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACrC,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACtC,KAAK,EAAE,OAAO;QACd,GAAG,EAAE,SAAS;QACd,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,SAAS;KAClB,CAAC,CAAC;AACL,CAAC;AAED;;;;;;;GAOG;AACH,MAAM,UAAU,QAAQ,CAAC,SAAiB;IACxC,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;IACjC,IAAI,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IAErC,MAAM,GAAG,GAAG,IAAI,IAAI,EAAE,CAAC;IAEvB,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;IACnC,YAAY,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAElC,MAAM,gBAAgB,GAAG,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC;IAChD,gBAAgB,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC;IAEzD,MAAM,WAAW,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,WAAW,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;IAEjC,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,YAAY,CAAC,OAAO,EAAE;QAAE,OAAO,OAAO,CAAC;IACrE,IAAI,WAAW,CAAC,OAAO,EAAE,KAAK,gBAAgB,CAAC,OAAO,EAAE;QAAE,OAAO,WAAW,CAAC;IAE7E,OAAO,IAAI,CAAC,kBAAkB,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;AAC9E,CAAC"}

package/dist/versioning/utils/versionKind.d.ts

@@ -0,0 +1,19 @@
+import type { DocumentVersion } from '@pantheon-systems/css-client';
+export type VersionKind = 'current' | 'published' | 'reverted' | 'autosave';
+export declare const VERSION_KIND_META: Record<VersionKind, {
+    tag: string | null;
+    badgeClass: string;
+    milestone: boolean;
+}>;
+/**
+ * Returns all applicable display kinds for a version.
+ * current, published, and reverted are independent labels that can coexist.
+ * Returns ['autosave'] when none of the three apply.
+ */
+export declare function versionKinds(version: DocumentVersion, currentVersionId: string | undefined): VersionKind[];
+/**
+ * Returns true for versions that represent a meaningful milestone:
+ * published checkpoints and revert points.
+ */
+export declare function isMilestone(version: DocumentVersion): boolean;
+//# sourceMappingURL=versionKind.d.ts.map

package/dist/versioning/utils/versionKind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"versionKind.d.ts","sourceRoot":"","sources":["../../../src/versioning/utils/versionKind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAEpE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CAAC;AAE5E,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,WAAW,EAAE;IAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,CAKjH,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,eAAe,EACxB,gBAAgB,EAAE,MAAM,GAAG,SAAS,GACnC,WAAW,EAAE,CAOf;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAE7D"}

package/dist/versioning/utils/versionKind.js

@@ -0,0 +1,30 @@
+export const VERSION_KIND_META = {
+    current: { tag: 'Current', badgeClass: '', milestone: false },
+    published: { tag: 'Published', badgeClass: 'pds-badge pds-badge--info pds-badge--s', milestone: true },
+    reverted: { tag: 'Reverted', badgeClass: 'pds-badge pds-badge--warning pds-badge--s', milestone: true },
+    autosave: { tag: null, badgeClass: '', milestone: false },
+};
+/**
+ * Returns all applicable display kinds for a version.
+ * current, published, and reverted are independent labels that can coexist.
+ * Returns ['autosave'] when none of the three apply.
+ */
+export function versionKinds(version, currentVersionId) {
+    const kinds = [];
+    // Order matters: kinds[0] drives the timeline dot color (highest → lowest priority).
+    if (version.id === currentVersionId)
+        kinds.push('current');
+    if (version.isPublished === true)
+        kinds.push('published');
+    if (version.source === 'revert')
+        kinds.push('reverted');
+    return kinds.length > 0 ? kinds : ['autosave'];
+}
+/**
+ * Returns true for versions that represent a meaningful milestone:
+ * published checkpoints and revert points.
+ */
+export function isMilestone(version) {
+    return versionKinds(version, undefined).some((k) => VERSION_KIND_META[k].milestone);
+}
+//# sourceMappingURL=versionKind.js.map

package/dist/versioning/utils/versionKind.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"versionKind.js","sourceRoot":"","sources":["../../../src/versioning/utils/versionKind.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,iBAAiB,GAAwF;IACpH,OAAO,EAAG,EAAE,GAAG,EAAE,SAAS,EAAI,UAAU,EAAE,EAAE,EAA0C,SAAS,EAAE,KAAK,EAAE;IACxG,SAAS,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,UAAU,EAAE,wCAAwC,EAAK,SAAS,EAAE,IAAI,EAAG;IAC1G,QAAQ,EAAG,EAAE,GAAG,EAAE,UAAU,EAAG,UAAU,EAAE,2CAA2C,EAAE,SAAS,EAAE,IAAI,EAAG;IAC1G,QAAQ,EAAG,EAAE,GAAG,EAAE,IAAI,EAAS,UAAU,EAAE,EAAE,EAA0C,SAAS,EAAE,KAAK,EAAE;CAC1G,CAAC;AAEF;;;;GAIG;AACH,MAAM,UAAU,YAAY,CAC1B,OAAwB,EACxB,gBAAoC;IAEpC,MAAM,KAAK,GAAkB,EAAE,CAAC;IAChC,qFAAqF;IACrF,IAAI,OAAO,CAAC,EAAE,KAAK,gBAAgB;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3D,IAAI,OAAO,CAAC,WAAW,KAAK,IAAI;QAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IAC1D,IAAI,OAAO,CAAC,MAAM,KAAK,QAAQ;QAAE,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IACxD,OAAO,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;AACjD,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,OAAwB;IAClD,OAAO,YAAY,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;AACtF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/puck-css",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Puck editor integration with Collaborative State System",
   "publishConfig": {
     "access": "public",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/pantheon-systems/puck-css-integration.git",
+    "url": "git+https://github.com/pantheon-systems/p1-platform.git",
     "directory": "packages/puck-css"
   },
   "type": "module",
@@ -87,7 +87,8 @@
   },
   "files": [
     "dist",
-    "src/styles.css",
+    "src/**/*.css",
+    "!src/**/*.module.css",
     "src/pds/theme"
   ],
   "dependencies": {
@@ -95,7 +96,7 @@
     "jsep": "^1.4.0",
     "lodash.isequal": "^4.5.0",
     "yjs": "^13.6.29",
-    "@pantheon-systems/css-client": "0.8.0"
+    "@pantheon-systems/css-client": "0.10.0"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.27.19",
@@ -107,7 +108,7 @@
     "@types/lodash.isequal": "^4.5.8",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^6.0.5",
     "jsdom": "^24.1.3",
     "react-toastify": "^11.0.5",
     "typescript": "^5.9.3",
@@ -126,12 +127,15 @@
     "node": ">=24.0.0"
   },
   "license": "MIT",
+  "homepage": "https://github.com/pantheon-systems/p1-platform/tree/main/packages/puck-css",
   "scripts": {
-    "dev": "vite --config vite.config.preview.ts",
-    "build": "tsc; find src -name '*.module.css' | while read f; do dest=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$dest\")\"; cp \"$f\" \"$dest\"; done; (cp node_modules/@pantheon-systems/pds-toolkit-react/dist/css/pds-core.css src/pds/theme/pds-core.css && node scripts/generate-pds-content.cjs) || true",
+    "build": "pnpm run clean && tsc && find src -name '*.module.css' | while read f; do dest=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$dest\")\"; cp \"$f\" \"$dest\"; done; (cp node_modules/@pantheon-systems/pds-toolkit-react/dist/css/pds-core.css src/pds/theme/pds-core.css && node scripts/generate-pds-content.cjs) || true",
     "clean": "rm -rf dist *.tsbuildinfo",
+    "dev": "vite --config vite.config.preview.ts",
     "lint": "eslint src",
+    "lint:fix": "eslint src --fix",
     "test": "vitest run",
+    "test:spike:3406": "vitest run --config spike/pcc-3406/vitest.config.ts",
     "test:watch": "vitest",
     "typecheck": "tsc --noEmit"
   }

package/src/pds/theme/PuckEditorTheme.css

@@ -142,6 +142,10 @@
   --puck-color-grey-04: var(--pds-color-fg-default);
 }
 
+.puck-editor-theme [class*="_Sidebar"] {
+  scrollbar-gutter: stable;
+}
+
 /* ── Plugin rail nav icon normalization ─────────────────────────────────── */
 /* All icons in the left nav rail must be a uniform 20×20px.
    Puck's native SVGs, PDS Icon SVGs, and our mask-image pseudo-elements
@@ -277,3 +281,80 @@
   background-color: #000000 !important;
   color: #ffffff !important;
 }
+
+/* ── Canvas: grey gutter around a rounded page ────────────────────────────
+   The canvas (_PuckCanvas_) already has a grey background (grey-11), but in
+   full-screen mode Puck zeroes its padding so the page fills it edge-to-edge
+   and the grey never shows. Restoring a little padding reveals that grey as
+   a gutter around the page; rounding the inner _PuckCanvas-root_ gives the
+   floating-page look. The [class*="_PuckCanvas_"] selector matches only the
+   outer element (children use a hyphen after "Canvas"); higher specificity
+   than Puck's own ._PuckCanvas--fullScreen_ so the padding wins. */
+.puck-editor-theme [class*="_PuckCanvas_"] {
+  padding: 8px;
+}
+.puck-editor-theme [class*="_PuckCanvas-root_"] {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* ── Editor chrome text/background reset (PCC-3456) ──────────────────────
+ *
+ * Root cause: recent design-library "dark-canon" token waves make the host
+ * app's own body dark (e.g. body { color: var(--color-text); background:
+ * var(--color-surface) }, resolving to white-on-black). Puck ships plenty of
+ * chrome elements — e.g. @puckeditor/core's ._DrawerItem-name_ — that declare
+ * no color of their own and simply inherit whatever the ambient text color
+ * is. Nothing between <body> and those elements (including Puck's own
+ * `._Puck_` root, which sets layout vars but no color) intercepts that
+ * inheritance, so the new dark host theme cascades straight through and
+ * turns chrome text white-on-light — unreadable.
+ *
+ * Fix: pin an explicit light foreground/background on `.puck-editor-theme`
+ * itself using the same PDS light-theme tokens already used elsewhere in
+ * this file (grey-11/12 above), matching the pds `data-rm-theme="light"`
+ * editor chrome regardless of whatever theme the host page's <body> is on.
+ * `color` inherits down through every chrome descendant that doesn't set
+ * its own, exactly reversing the leak.
+ *
+ * Scoping: this file is a real <style>/<link> stylesheet in the parent
+ * document (unlike pds-core.css, which is loaded via adoptedStyleSheets
+ * specifically to stay invisible to Puck — see P1App.tsx), so Puck's canvas
+ * iframe scanner (`collectStyles()`) DOES copy it into the preview iframe's
+ * document, same as every other rule here. Scoping to `.puck-editor-theme`
+ * (never a bare `body` selector) is what keeps that copy inert: the iframe
+ * renders the previewed page's own DOM, which has no `.puck-editor-theme`
+ * element in it, so the selector simply never matches there and the
+ * preview keeps the site's own (possibly dark) theme untouched. A bare
+ * `body { color: #111; background: #fff }` rule — as originally proposed —
+ * would instead match the iframe's own <body> directly once copied in,
+ * forcing every preview into a light theme regardless of the real site's
+ * design and reintroducing the same class of leak in the opposite
+ * direction.
+ */
+.puck-editor-theme {
+  color: var(--pds-color-fg-default, #23232d);
+  background: var(--pds-color-bg-default, #fff);
+}
+
+/* ── AI chat panel: fill the inspector rail ──────────────────────────────────
+ * `SidebarSection-content` is a block container and Puck's fields <form> has no
+ * height of its own, so the panel stopped at its content height with the
+ * composer floating mid-rail. Flex columns carry the rail's height down to it;
+ * `min-height: 0` keeps the scrolling inside the transcript.
+ *
+ * Scoped to the panel's marker attribute: the ordinary field list relies on
+ * natural flow in the rail's scroll container, and stretching it would clip.
+ */
+.puck-editor-theme [class*='_SidebarSection_']:has([data-p1-ai-panel]) {
+  height: 100%;
+  min-height: 0;
+}
+
+.puck-editor-theme [class*='_SidebarSection-content_']:has([data-p1-ai-panel]),
+.puck-editor-theme [class*='_PuckFields_']:has([data-p1-ai-panel]) {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+}

package/src/pds/theme/PuckEditorTheme.test.ts

@@ -9,10 +9,10 @@
  * right layer of confidence here.
  */
 
-import { describe, it, expect } from 'vitest';
 import { readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
+import { describe, it, expect } from 'vitest';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const p1Path = join(__dirname, 'PuckEditorTheme.css');
@@ -121,6 +121,21 @@ describe('PuckEditorTheme.css', () => {
     });
   });
 
+  describe('canvas layout', () => {
+    it('reveals the canvas grey background as a gutter via padding', () => {
+      const css = readThemeCSS();
+      // Matches only the outer _PuckCanvas_ element (children use a hyphen).
+      expect(css).toMatch(/\[class\*="_PuckCanvas_"\]\s*\{[^}]*padding:\s*8px/);
+    });
+
+    it('rounds and clips the inner page (_PuckCanvas-root_)', () => {
+      const css = readThemeCSS();
+      expect(css).toMatch(
+        /\[class\*="_PuckCanvas-root_"\]\s*\{[^}]*border-radius:\s*8px[^}]*overflow:\s*hidden/,
+      );
+    });
+  });
+
   describe('typography mappings', () => {
     it('maps --puck-font-family to PDS default font family', () => {
       const css = readThemeCSS();
@@ -134,4 +149,38 @@ describe('PuckEditorTheme.css', () => {
       expect(css).toContain('var(--pds-typography-ff-code)');
     });
   });
+
+  describe('editor chrome text/background reset (PCC-3456)', () => {
+    it('pins an explicit light foreground and background on .puck-editor-theme itself', () => {
+      const css = readThemeCSS();
+      // Must be the bare `.puck-editor-theme` selector (not an attribute-scoped
+      // descendant), so `color` inherits down to every chrome element that
+      // declares no color of its own (e.g. @puckeditor/core's _DrawerItem-name_).
+      expect(css).toMatch(
+        /(?<![^\s{};])\.puck-editor-theme\s*\{[^}]*color:\s*var\(--pds-color-fg-default[^)]*\)[^}]*background:\s*var\(--pds-color-bg-default[^)]*\)[^}]*\}/,
+      );
+    });
+
+    it('reserves the sidebar scrollbar gutter so expanding a field group does not reflow', () => {
+      const css = readThemeCSS();
+      // The sidebar is the scroll container, so an arriving scrollbar reclaims
+      // its width and shifts every field. Reserving the gutter is what keeps a
+      // collapsible field group from moving the panel when it expands.
+      expect(css).toMatch(
+        /\.puck-editor-theme \[class\*="_Sidebar"\]\s*\{[^}]*scrollbar-gutter:\s*stable[^}]*\}/,
+      );
+    });
+
+    it('does not use a bare body selector, which would leak into the preview iframe', () => {
+      const css = readThemeCSS();
+      // The preview iframe renders its own <body>. Because this stylesheet is a
+      // real <style>/<link> tag that Puck's collectStyles() copies into that
+      // iframe, a bare `body { ... }` rule here would match the iframe's body
+      // directly and force every previewed page into this light theme.
+      // Strip comments first — the file's explanatory comments intentionally
+      // quote a `body { ... }` example of what NOT to do.
+      const cssWithoutComments = css.replace(/\/\*[\s\S]*?\*\//g, '');
+      expect(cssWithoutComments).not.toMatch(/(^|\s|\})body\s*\{/);
+    });
+  });
 });