@pantheon-systems/puck-css 0.8.0 → 0.9.0

package/src/styles.css

@@ -37,6 +37,12 @@
   background: var(--pds-color-bg-default, oklch(1 0 0)) !important;
 }
 
+/* PanelShell must fill the Puck container flush. Zero out Puck's built-in 
+   16px so it doesn't stack on PanelShell's own 12px body padding. */
+[class*='_BlocksPlugin_'],[class*='_OutlinePlugin_'] {
+  padding: 0 !important;
+}
+
 /* Override all nested backgrounds in right sidebar */
 [class*='_Sidebar--right_'] [class*='_SidebarSection'],
 [class*='_Sidebar--right_'] [class*='_Breadcrumbs_'],
@@ -76,8 +82,12 @@
 
 /* Fields guard: dims all fields and removes interaction (inert attr handles the rest) */
 .p1-readonly-fields-guard {
-  opacity: 0.6;
+  opacity: 0.5;
   user-select: none;
+  pointer-events: none;
+}
+
+.p1-inspector-fields--readonly {
   cursor: not-allowed;
 }
 
@@ -200,7 +210,8 @@
    overflow:hidden on _Sidebar--right_ clips it to the correct sidebar height. */
 .p1-inspector-reopen-strip {
   width: 100%;
-  min-height: calc(100vh - 100px); /* 52px P1EditorHeader + 48px P1EditorSubheader */
+  /* Follows the header/subheader knobs (P1EditorHeader/P1EditorSubheader modules) */
+  min-height: calc(100vh - (var(--p1-header-h, 60px) + var(--p1-subheader-h, 48px)));
   background: var(--pds-color-bg-default, #fff);
   border-left: 1px solid var(--pds-color-border-default, oklch(0.9401 0 0));
   display: flex;
@@ -248,7 +259,6 @@
   overflow: hidden !important;
 }
 
-
 /* ============================================
    Utility: Visually Hidden (screen reader only)
    ============================================ */
@@ -958,61 +968,132 @@
 .historical-version-banner {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
-  padding: 0.5rem 1rem;
-  background: var(--puck-css-diff-modified-bg);
-  border: 1px solid var(--puck-css-diff-modified);
-  border-radius: 0.375rem;
-  color: var(--puck-css-text);
-  font-size: 0.875rem;
+  gap: var(--pds-spacing-xs);
+  padding: var(--pds-spacing-xs) var(--pds-spacing-l);
+  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);
+  min-height: var(--pds-spacing-button-height-m);
+  flex-wrap: wrap;
 }
 
 .historical-version-banner__icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--puck-css-diff-modified);
-  flex-shrink: 0;
+  color: var(--pds-color-interactive-link-default, #3A5DFB);
+  flex: none;
 }
 
 .historical-version-banner__content {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
-  flex: 1;
+  gap: var(--pds-spacing-3xs);
 }
 
 .historical-version-banner__text {
-  font-weight: 600;
+  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
+  color: var(--pds-color-fg-default, #171717);
+}
+
+.historical-version-banner__text strong {
+  font: 700 var(--pds-typography-size-m) var(--pds-typography-ff-compact, 'Inter Tight', 'Inter', system-ui, sans-serif);
 }
 
 .historical-version-banner__date {
-  color: var(--puck-css-text-secondary);
-  font-size: 0.75rem;
+  font: 500 var(--pds-typography-size-m) var(--pds-typography-ff-default, 'Inter', system-ui, sans-serif);
+  color: var(--pds-color-fg-default, #171717);
+}
+
+.historical-version-banner__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--pds-spacing-2xs);
+  margin-left: auto;
+  flex: none;
 }
 
-.historical-version-banner__locked {
+.historical-version-banner__exit-btn {
+  /* 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;
-  gap: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  background: var(--puck-css-diff-removed-bg);
-  color: var(--puck-css-diff-removed);
-  border-radius: 0.25rem;
-  font-size: 0.75rem;
-  font-weight: 600;
+  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-m) 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;
+}
+
+.historical-version-banner__exit-btn:hover:not(:disabled) {
+  background: var(--pds-color-interactive-background-hover, #f5f5f5);
 }
 
-.historical-version-banner__button {
+.historical-version-banner__exit-btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.historical-version-banner__revert-btn {
+  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-m) 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;
+}
+
+.historical-version-banner__revert-btn:hover:not(:disabled) {
+  filter: brightness(1.15);
+}
+
+.historical-version-banner__revert-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.historical-version-banner__error {
+  width: 100%;
+  margin: 4px 0 2px;
+  padding: 0;
+  font-size: var(--pds-typography-size-s, 0.875rem);
+  color: var(--pds-color-status-error-icon, #c0392b);
+}
+
+.historical-version-banner__spinner {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: css-plugin-version-spin 0.6s linear infinite;
+  flex: none;
 }
 
 /* ============================================
    CSS Plugin Panel
    ============================================ */
 .css-plugin-panel {
-  padding: 12px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
   font-size: 13px;
   color: var(--puck-css-text);
 }
@@ -1063,7 +1144,6 @@
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
 }
 
-
 .css-plugin-create-form {
   display: flex;
   flex-direction: column;
@@ -1124,11 +1204,13 @@
   padding: 8px 10px;
   cursor: pointer;
   transition: background 0.15s ease;
+}
+
+.css-plugin-doc-item {
   border-bottom: 1px solid var(--puck-css-border);
 }
 
-.css-plugin-doc-item:last-child,
-.css-plugin-version-item:last-child {
+.css-plugin-doc-item:last-child {
   border-bottom: none;
 }
 
@@ -1227,6 +1309,235 @@
   border-radius: 3px;
 }
 
+/* ============================================
+   Version History — p1-responsive timeline design
+   ============================================ */
+
+/* Wrapper: remove old border-box look, add padding + timeline track */
+.css-plugin-version-list.css-plugin-version-list--timeline {
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  padding: 4px 4px 4px 8px;
+  position: relative;
+}
+
+/* No vertical timeline track */
+.css-plugin-version-list.css-plugin-version-list--timeline::before {
+  content: none;
+}
+
+/* Individual row */
+.css-plugin-version-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+  border-radius: 9px;
+  /* Reserve the accent stripe on every row so selecting one doesn't shift layout. */
+  border-left: 3px solid transparent;
+  cursor: pointer;
+  transition: background 0.12s ease;
+  position: relative;
+}
+
+.css-plugin-version-row:hover {
+  background: var(--pds-color-interactive-background-hover, #f5f5f5);
+}
+
+.css-plugin-version-row--current {
+  cursor: default;
+}
+
+/* While previewing, the current row is clickable to exit preview. */
+.css-plugin-version-row--exits-preview {
+  cursor: pointer;
+}
+
+.css-plugin-version-row--selected {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  border-left: 3px solid var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+/* Timeline dot */
+.css-plugin-version-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: #c4c4c4;
+  flex: none;
+  margin-top: 4px;
+  z-index: 1;
+}
+
+.css-plugin-version-dot--current {
+  background: var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+.css-plugin-version-dot--published {
+  background: var(--pds-color-interactive-link-default, #3A5DFB);
+}
+
+.css-plugin-version-dot--reverted {
+  background: var(--pds-color-fg-default-secondary, #9a9a9a);
+}
+
+/* Content column */
+.css-plugin-version-content {
+  flex: 1;
+  min-width: 0;
+}
+
+/* Top row: version number + badge pills */
+.css-plugin-version-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.css-plugin-version-meta .css-plugin-version-number {
+  font-weight: 700;
+  font-size: 13px;
+  color: var(--pds-color-fg-default, var(--puck-css-text));
+}
+
+/* Kind tags: Current / Published / Reverted */
+.css-plugin-version-kind-tag {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 1px 7px;
+  border-radius: 5px;
+  line-height: 1.6;
+}
+
+.css-plugin-version-kind-tag--current {
+  color: var(--pds-color-status-success-icon, #217a37);
+  background: #eaf6f0;
+}
+
+.css-plugin-version-kind-tag--published {
+  color: var(--pds-color-interactive-link-default, #3A5DFB);
+  background: var(--iris-100, #EAF0FF);
+  border-color: transparent;
+}
+
+.css-plugin-version-kind-tag--reverted {
+  color: var(--pds-color-fg-default-secondary, #6b6b6b);
+  background: var(--pds-color-bg-default-secondary, #f0f0f0);
+}
+
+/* Day group headers */
+.css-plugin-version-day-group {
+  margin-bottom: 4px;
+}
+
+.css-plugin-version-day-header {
+  font-size: 10.5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  padding: 8px var(--pds-spacing-s, 12px) 4px;
+  position: sticky;
+  top: 0;
+  background: var(--pds-color-bg-default, #fff);
+  z-index: 1;
+}
+
+/* All versions / Milestones filter — uses PDS SegmentedButton */
+.css-plugin-version-filter {
+  padding: 4px var(--pds-spacing-s, 12px) 8px;
+}
+
+/* Stretch SegmentedButton to full panel width */
+.css-plugin-version-filter .pds-segmented-button {
+  display: block;
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__track {
+  display: flex;
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option {
+  flex: 1;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option label {
+  width: 100%;
+}
+
+.css-plugin-version-filter .pds-segmented-button__option:not(.pds-segmented-button__option--disabled):not(.pds-segmented-button__option--checked):hover label {
+  color: var(--pds-color-foreground-default);
+}
+
+/* Banner steppers */
+.historical-version-banner__steppers {
+  display: flex;
+  gap: 2px;
+}
+
+.historical-version-banner__stepper-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: 1px solid var(--pds-color-border-secondary, #ececf0);
+  background: transparent;
+  cursor: pointer;
+  color: var(--pds-color-fg-default, #1a1a1a);
+  transition: background 100ms ease;
+}
+
+.historical-version-banner__stepper-btn:hover:not(:disabled) {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+}
+
+.historical-version-banner__stepper-btn:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+/* Unpublished changes pill on current version row */
+.css-plugin-version-unpublished {
+  display: inline-block;
+  font-size: 10.5px;
+  font-weight: 600;
+  color: #B0840A;
+  background: #FFF3CC;
+  padding: 2px 7px;
+  border-radius: 5px;
+  margin-top: 6px;
+}
+
+/* Byline: date · author */
+.css-plugin-version-byline {
+  font-size: 11.5px;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  margin-top: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* "Reverted to v#" label under byline for revert versions */
+.css-plugin-version-revert-source {
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--pds-color-fg-default-secondary, #9a9a9a);
+  margin-top: 2px;
+}
+
+@keyframes css-plugin-version-spin {
+  to { transform: rotate(360deg); }
+}
 
 /* ============================================
    Toast Notifications
@@ -1841,7 +2152,6 @@
   flex-shrink: 0;
 }
 
-
 /* ============================================
    Focus Region Highlighting
    ============================================ */
@@ -2907,3 +3217,178 @@ svg.lucide-layers {
   color: var(--pds-color-fg-default-secondary, #6b7280);
   cursor: pointer;
 }
+
+/* Preview panel overlay — shown at top of Blocks / Outline panels during historical preview */
+.css-preview-panel-overlay__wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Banner — row when wide, button wraps below label when narrow */
+.css-preview-panel-overlay {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  background: var(--pds-color-bg-default-secondary);
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid var(--pds-color-border-default, #e5e7eb);
+}
+
+.css-preview-panel-overlay__label-wrap {
+  display: flex;
+  flex: 1 1 8rem;
+  min-width: 0;
+}
+
+.css-preview-panel-overlay__btn-wrap {
+  display: flex;
+  flex-shrink: 0;
+  max-width: 100%;
+}
+
+.css-preview-panel-overlay__content {
+  flex: 1;
+  overflow: auto;
+  min-height: 0;
+}
+
+/* Dim the block list when previewing a historical version */
+.css-preview-panel-overlay__content--dimmed {
+  opacity: 0.5;
+  pointer-events: none;
+  user-select: none;
+}
+
+.css-preview-panel-overlay__wrapper--readonly {
+  cursor: not-allowed;
+}
+
+.css-preview-panel-overlay__label {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--pds-color-fg-default, #171717);
+  font-family: Poppins, sans-serif;
+  word-break: break-word;
+}
+
+.css-preview-panel-overlay__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border-radius: 1.5rem;
+  border: none;
+  background: var(--pds-color-interactive-default, #1a1a1a);
+  color: #fff;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  font-family: Poppins, sans-serif;
+  word-break: break-word;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+
+.css-preview-panel-overlay__btn:hover {
+  background: var(--pds-color-interactive-hover, #333);
+}
+
+/* ============================================
+   Live Thumbnail Blocks Drawer
+   ============================================ */
+
+.p1-blocks-drawer__toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 4px 10px;
+}
+
+.p1-blocks-drawer__toolbar-label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--pds-color-text-secondary, var(--puck-css-text-secondary));
+}
+
+.p1-blocks-drawer__expand-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--pds-color-interactive-link-default, var(--puck-css-primary));
+  padding: 3px 6px;
+  border-radius: 5px;
+  transition: background 0.15s ease;
+  white-space: nowrap;
+}
+
+.p1-blocks-drawer__expand-btn svg {
+  width: 12px !important;
+  height: 12px !important;
+  flex-shrink: 0;
+}
+
+.p1-blocks-drawer__expand-btn:hover {
+  background: var(--pds-color-button-subtle-background-hover, #eaf0ff);
+}
+
+.p1-blocks-drawer__expand-btn:focus-visible {
+  outline: 2px solid var(--pds-color-interactive-primary, var(--puck-css-primary));
+  outline-offset: 2px;
+}
+
+.p1-blocks-drawer__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  padding: 4px 0 8px;
+  min-width: 0;
+}
+
+@keyframes p1-thumb-shimmer {
+  0% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+
+/* ThumbnailCard */
+.p1-thumb-card {
+  border: 1px solid var(--pds-color-border-default, #e5e7eb);
+  border-radius: 8px;
+  overflow: hidden;
+  background: var(--pds-color-bg-default, #fff);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: grab;
+}
+
+.p1-thumb-card:active {
+  cursor: grabbing;
+}
+
+.p1-thumb-card:hover {
+  border-color: var(--pds-color-interactive-primary, var(--puck-css-primary));
+  box-shadow: 0 0 0 1px var(--pds-color-interactive-primary, var(--puck-css-primary));
+}
+
+.p1-thumb-card__label {
+  padding: 8px 10px;
+  font-size: 13px;
+  font-weight: 500;
+  text-align: center;
+  border-top: 1px solid var(--pds-color-border-default, #e5e7eb);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--pds-color-text-primary, var(--puck-css-text));
+}
+