@pantheon-systems/puck-css 0.4.2 → 0.4.3

package/dist/pds/components/PageNavigator.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * PageNavigator component.
  *
@@ -13,11 +13,25 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import styles from './PageNavigator.module.css';
-export function PageNavigator({ documents, currentDocument, onSelect, onClose, open, isMainBranch, onCreateDocument, portalStyle, }) {
+export function PageNavigator({ documents, currentDocument, onSelect, onClose, open, isMainBranch, onCreateDocument, templates, templatesLoading, portalStyle, }) {
     const [query, setQuery] = useState('');
-    const [isCreating, setIsCreating] = useState(false);
+    const [creationStep, setCreationStep] = useState('idle');
+    const [selectedTemplate, setSelectedTemplate] = useState(null);
     const [newPath, setNewPath] = useState('');
     const [createError, setCreateError] = useState(null);
+    const hasTemplates = templates && templates.length > 0;
+    const handleNewPageClick = useCallback(() => {
+        if (hasTemplates) {
+            setCreationStep('template');
+        }
+        else {
+            setCreationStep('path');
+        }
+    }, [hasTemplates]);
+    const handleTemplateSelect = useCallback((template) => {
+        setSelectedTemplate(template);
+        setCreationStep('path');
+    }, []);
     const handleCreate = useCallback(async (e) => {
         e.preventDefault();
         if (!newPath.trim() || !onCreateDocument)
@@ -26,9 +40,10 @@ export function PageNavigator({ documents, currentDocument, onSelect, onClose, o
         const normalizedPath = path.startsWith('/') ? path : `/${path}`;
         setCreateError(null);
         try {
-            await onCreateDocument(path);
+            await onCreateDocument(path, selectedTemplate);
             setNewPath('');
-            setIsCreating(false);
+            setCreationStep('idle');
+            setSelectedTemplate(null);
             // Navigate to the newly created page
             onSelect({ id: normalizedPath, path: normalizedPath, archived: false });
             onClose();
@@ -36,7 +51,13 @@ export function PageNavigator({ documents, currentDocument, onSelect, onClose, o
         catch (err) {
             setCreateError(err instanceof Error ? err.message : 'Failed to create page');
         }
-    }, [newPath, onCreateDocument, onSelect, onClose]);
+    }, [newPath, onCreateDocument, selectedTemplate, onSelect, onClose]);
+    const handleCancel = useCallback(() => {
+        setCreationStep('idle');
+        setNewPath('');
+        setCreateError(null);
+        setSelectedTemplate(null);
+    }, []);
     if (!open)
         return null;
     // Filter: exclude archived, exclude internal _* paths (e.g. /_registry/, _registry/)
@@ -54,7 +75,7 @@ export function PageNavigator({ documents, currentDocument, onSelect, onClose, o
                         const isCurrent = currentDocument !== null && doc.id === currentDocument.id;
                         const isLiveOnly = isMainBranch === false && doc.inherited === true;
                         return (_jsx("li", { children: _jsx("button", { type: "button", "data-testid": "page-navigator-item", "data-inherited": isLiveOnly ? 'true' : undefined, className: `${styles.item}${isCurrent ? ` ${styles.itemCurrent}` : ''}${isLiveOnly ? ` ${styles.itemInherited}` : ''}`, onClick: () => { onSelect(doc); setQuery(''); }, "aria-current": isCurrent ? 'page' : undefined, children: doc.path }) }, doc.id));
-                    }), filtered.length === 0 && (_jsx("li", { className: styles.empty, children: "No pages found" }))] }), _jsx("div", { className: styles.footer, children: isCreating ? (_jsxs("form", { "data-testid": "page-navigator-create-form", className: styles.createForm, onSubmit: handleCreate, children: [_jsx("input", { autoFocus: true, type: "text", "data-testid": "page-navigator-create-input", className: styles.createInput, placeholder: "page-path", value: newPath, onChange: (e) => setNewPath(e.target.value) }), _jsxs("div", { className: styles.createActions, children: [_jsx("button", { type: "submit", className: styles.createSubmit, children: "Create" }), _jsx("button", { type: "button", "data-testid": "page-navigator-create-cancel", className: styles.createCancel, onClick: () => { setIsCreating(false); setNewPath(''); setCreateError(null); }, children: "Cancel" })] }), createError && (_jsx("div", { "data-testid": "page-navigator-create-error", className: styles.createError, children: createError }))] })) : (_jsx("button", { type: "button", "data-testid": "page-navigator-new", className: styles.newButton, onClick: onCreateDocument ? () => setIsCreating(true) : undefined, children: "+ New page" })) })] }));
+                    }), filtered.length === 0 && (_jsx("li", { className: styles.empty, children: "No pages found" }))] }), _jsx("div", { className: styles.footer, children: creationStep === 'template' ? (_jsx("div", { "data-testid": "template-selector", className: styles.templateSelector, children: templatesLoading ? (_jsx("div", { "data-testid": "template-selector-loading", className: styles.templateSelectorLoading, children: "Loading templates..." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.templateSelectorHeader, children: "Choose a template" }), _jsxs("div", { className: styles.templateSelectorGrid, children: [_jsxs("button", { type: "button", className: styles.templateOption, onClick: () => handleTemplateSelect(null), children: [_jsx("span", { className: styles.templateOptionLabel, children: "Blank Page" }), _jsx("span", { className: styles.templateOptionDesc, children: "Start from scratch" })] }), (templates ?? []).map((t) => (_jsxs("button", { type: "button", className: styles.templateOption, onClick: () => handleTemplateSelect(t), children: [_jsx("span", { className: styles.templateOptionLabel, children: t.label || t.name }), t.description && (_jsx("span", { className: styles.templateOptionDesc, children: t.description }))] }, t.id)))] }), _jsx("button", { type: "button", className: styles.createCancel, onClick: handleCancel, children: "Cancel" })] })) })) : creationStep === 'path' ? (_jsxs("form", { "data-testid": "page-navigator-create-form", className: styles.createForm, onSubmit: handleCreate, children: [selectedTemplate && (_jsxs("div", { className: styles.selectedTemplateBadge, children: ["Template: ", selectedTemplate.label || selectedTemplate.name] })), _jsx("input", { autoFocus: true, type: "text", "data-testid": "page-navigator-create-input", className: styles.createInput, placeholder: "page-path", value: newPath, onChange: (e) => setNewPath(e.target.value) }), _jsxs("div", { className: styles.createActions, children: [_jsx("button", { type: "submit", className: styles.createSubmit, children: "Create" }), _jsx("button", { type: "button", "data-testid": "page-navigator-create-cancel", className: styles.createCancel, onClick: handleCancel, children: "Cancel" })] }), createError && (_jsx("div", { "data-testid": "page-navigator-create-error", className: styles.createError, children: createError }))] })) : (_jsx("button", { type: "button", "data-testid": "page-navigator-new", className: styles.newButton, onClick: onCreateDocument ? handleNewPageClick : undefined, children: "+ New page" })) })] }));
     return portalStyle ? createPortal(content, document.body) : content;
 }
 //# sourceMappingURL=PageNavigator.js.map

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

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

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

@@ -253,6 +253,76 @@
   background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
 }
 
+/* ── Template selector ─────────────────────────────────────────────────── */
+
+.templateSelector {
+  width: 100%;
+}
+
+.templateSelectorHeader {
+  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));
+  margin-bottom: 0.512rem;
+}
+
+.templateSelectorGrid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-bottom: 0.512rem;
+}
+
+.templateSelectorLoading {
+  padding: 0.64rem;
+  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-secondary, oklch(0.5103 0 0));
+  font-style: italic;
+}
+
+.templateOption {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+  padding: 0.5rem 0.64rem;
+  background: var(--pds-color-bg-default, oklch(1.0000 0 0));
+  border: 1px solid var(--pds-color-border-input, oklch(0.8853 0 0));
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+}
+
+.templateOption:hover {
+  background: var(--pds-color-bg-default-secondary, oklch(0.9702 0 0));
+  border-color: var(--pds-color-interactive-focus, oklch(0.5558 0.2372 267.79));
+}
+
+.templateOptionLabel {
+  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));
+}
+
+.templateOptionDesc {
+  font-size: var(--pds-typography-size-xs, 0.75rem);
+  color: var(--pds-color-fg-default-secondary, oklch(0.5103 0 0));
+}
+
+.selectedTemplateBadge {
+  font-family: var(--pds-typography-ff-default, 'Inter', sans-serif);
+  font-size: var(--pds-typography-size-xs, 0.75rem);
+  color: var(--pds-color-interactive-link-default, oklch(0.5558 0.2372 267.79));
+  background: var(--pds-color-status-info-background, oklch(0.9683 0.0161 245.08));
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--pds-border-radius-default, 0.188rem);
+  margin-bottom: 0.25rem;
+}
+
 /* ── Mobile: full-width dropdown with horizontal scroll for long paths ── */
 
 @media (max-width: 767px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/puck-css",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Puck editor integration with Collaborative State System",
   "publishConfig": {
     "access": "public",
@@ -76,7 +76,7 @@
     "fast-json-patch": "^3.1.1",
     "jsep": "^1.4.0",
     "yjs": "^13.6.29",
-    "@pantheon-systems/css-client": "0.4.2"
+    "@pantheon-systems/css-client": "0.4.3"
   },
   "devDependencies": {
     "@floating-ui/react": "^0.27.19",
@@ -108,7 +108,7 @@
   "license": "MIT",
   "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": "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",
     "lint": "eslint src",
     "test": "vitest run",

package/src/styles.css

@@ -2397,3 +2397,334 @@ svg.lucide-layers {
 
 /* 5. Nav tooltips are handled purely by PuckEditorTheme.css — Puck's own
       _NavItem-linkLabel_ spans are restyled as hover tooltips. */
+
+/* ============================================
+   Template Selector
+   ============================================ */
+
+.template-selector {
+  width: 100%;
+}
+
+.template-selector__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+  padding: 16px 0;
+}
+
+.template-selector__option {
+  /* Extend PDS button styles */
+  min-height: 100px;
+  text-align: left;
+  padding: 16px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 2px solid var(--puck-css-border);
+  border-radius: 8px;
+  transition: all 0.2s ease;
+}
+
+.template-selector__option:hover {
+  border-color: var(--puck-css-primary);
+  background-color: var(--puck-css-bg-secondary);
+}
+
+.template-selector__option[aria-pressed="true"] {
+  border-color: var(--puck-css-primary);
+  background-color: var(--puck-css-primary);
+  color: white;
+}
+
+.template-selector__option[aria-pressed="true"] .template-selector__option-description {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.template-selector__option-content {
+  width: 100%;
+}
+
+.template-selector__option-label {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.template-selector__option-description {
+  font-size: 14px;
+  color: var(--puck-css-text-secondary);
+  line-height: 1.4;
+}
+
+.template-selector--loading,
+.template-selector--error {
+  padding: 32px;
+  text-align: center;
+}
+
+.template-selector__loading-message {
+  font-size: 16px;
+  color: var(--puck-css-text-secondary);
+}
+
+.template-selector__error-message {
+  color: var(--puck-css-diff-removed);
+}
+
+.template-selector__error-message strong {
+  display: block;
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+
+.template-selector__error-message p {
+  font-size: 14px;
+  margin: 0;
+}
+
+/* ── Template Manager Overlay ─────────────────────────────────────────── */
+
+.template-manager-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10001;
+  background: var(--pds-color-bg-default, #fff);
+  display: flex;
+  flex-direction: column;
+}
+
+.template-manager-overlay__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1.5rem;
+  border-bottom: 1px solid var(--pds-color-border-default, #e5e7eb);
+  flex-shrink: 0;
+}
+
+.template-manager-overlay__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.template-manager-overlay__close {
+  background: none;
+  border: none;
+  font-size: 1rem;
+  cursor: pointer;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  padding: 0.25rem 0.5rem;
+}
+
+.template-manager-overlay__close:hover {
+  color: var(--pds-color-fg-default, #1f2937);
+}
+
+.template-manager-overlay__error {
+  padding: 0.5rem 1.5rem;
+  background: #fef2f2;
+  color: #991b1b;
+  font-size: 0.875rem;
+}
+
+.template-manager-overlay__list {
+  padding: 1.5rem;
+  overflow-y: auto;
+  flex: 1;
+  max-width: 800px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.template-manager-overlay__loading,
+.template-manager-overlay__empty {
+  padding: 2rem;
+  text-align: center;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  font-size: 0.875rem;
+}
+
+.template-manager-overlay__template-list {
+  list-style: none;
+  padding: 0;
+  margin: 1rem 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.template-manager-overlay__template-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border: 1px solid var(--pds-color-border-default, #e5e7eb);
+  border-radius: 0.375rem;
+}
+
+.template-manager-overlay__template-item:hover {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+}
+
+.template-manager-overlay__template-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.template-manager-overlay__template-label {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.template-manager-overlay__template-meta {
+  font-size: 0.75rem;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+}
+
+.template-manager-overlay__template-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+
+/* ── Template Editor (create/edit mode) ───────────────────────────────── */
+
+.template-manager-overlay__editor {
+  display: grid;
+  grid-template-columns: 300px 1fr;
+  flex: 1;
+  overflow: hidden;
+}
+
+.template-manager-overlay__editor-sidebar {
+  border-right: 1px solid var(--pds-color-border-default, #e5e7eb);
+  padding: 1rem;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.template-manager-overlay__editor-canvas {
+  overflow: hidden;
+}
+
+.template-manager-overlay__metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.template-manager-overlay__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.template-manager-overlay__field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.template-manager-overlay__input,
+.template-manager-overlay__textarea {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--pds-color-border-default, #e5e7eb);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  font-family: inherit;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.template-manager-overlay__input:focus,
+.template-manager-overlay__textarea:focus {
+  outline: none;
+  border-color: var(--pds-color-interactive-focus, #3b82f6);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
+}
+
+.template-manager-overlay__input:disabled {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+}
+
+.template-manager-overlay__save-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: auto;
+  padding-top: 1rem;
+  border-top: 1px solid var(--pds-color-border-default, #e5e7eb);
+}
+
+.template-manager-overlay__puck-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+}
+
+/* ── Template Pin Panel ───────────────────────────────────────────────── */
+
+.template-pin-panel {
+  border: 1px solid var(--pds-color-border-default, #e5e7eb);
+  border-radius: 0.375rem;
+  padding: 0.75rem;
+}
+
+.template-pin-panel--empty {
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  font-size: 0.8125rem;
+  font-style: italic;
+}
+
+.template-pin-panel__header {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 0.5rem;
+}
+
+.template-pin-panel__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.template-pin-panel__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.8125rem;
+}
+
+.template-pin-panel__item:hover {
+  background: var(--pds-color-bg-default-secondary, #f9fafb);
+}
+
+.template-pin-panel__type {
+  font-weight: 500;
+}
+
+.template-pin-panel__pin-label {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+  color: var(--pds-color-fg-default-secondary, #6b7280);
+  cursor: pointer;
+}