@akinon/pz-theme 2.0.0-beta.21

package/CHANGELOG.md

@@ -0,0 +1,17 @@
+# @akinon/pz-theme
+
+## 2.0.0-beta.21
+
+### Patch Changes
+
+- 5d44ff77: ZERO-4312: Extract ThemePlaceholder system into new @akinon/pz-theme package and strip native widget code
+
+  Introduce a dedicated `@akinon/pz-theme` package that contains the ThemePlaceholder system (CMS-driven sections/blocks, designer features, utilities). Remove native widget registration infrastructure from both `@akinon/pz-theme` and `projectzeronext` so the beta branch can be merged to main with only stable ThemePlaceholder functionality. Native widget integrations will be reintroduced via `@akinon/pz-theme` once they stabilize on the `theme-editor` branch.
+
+  Consumers should update imports:
+
+  - `@akinon/next/components/theme-editor/*` -> `@akinon/pz-theme/src/*`
+  - Add `@akinon/pz-theme` to package.json dependencies (matching `@akinon/next` version)
+
+- Updated dependencies [5d44ff77]
+  - @akinon/next@2.0.0-beta.21

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@akinon/pz-theme",
+  "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
+  "version": "2.0.0-beta.21",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "peerDependencies": {
+    "@akinon/next": "2.0.0-beta.21",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "clsx": "2.1.1",
+    "lottie-web": "^5.13.0",
+    "tailwind-merge": "^2.5.4"
+  },
+  "devDependencies": {
+    "@akinon/next": "2.0.0-beta.21",
+    "@types/node": "^18.7.8",
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6",
+    "prettier": "^3.0.3",
+    "react": "19.2.5",
+    "react-dom": "19.2.5",
+    "typescript": "^5.2.2"
+  }
+}

package/readme.md

@@ -0,0 +1,23 @@
+# @akinon/pz-theme
+
+Theme package for Project Zero Next. Contains the ThemePlaceholder system and theme editor infrastructure.
+
+## Installation
+
+```bash
+yarn add @akinon/pz-theme
+```
+
+## Usage
+
+### ThemePlaceholder
+
+Render CMS-driven sections on a page:
+
+```tsx
+import ThemePlaceholder from '@akinon/pz-theme/theme-placeholder';
+
+export default async function Page() {
+  return <ThemePlaceholder slug="homepage-body" />;
+}
+```

package/src/blocks/accordion-block.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import ThemeBlock from '../theme-block';
+
+const AccordionBlock: React.FC<BlockRendererProps> = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}) => {
+  const childBlocks = block.blocks || [];
+
+  const defaultOpen = block.properties?.defaultOpen === true;
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+
+  const headingBlock = childBlocks.find((b) => b.label === 'Accordion Heading');
+  const contentBlock = childBlocks.find((b) => b.label === 'Accordion Content');
+
+  if (!headingBlock && !contentBlock) {
+    return (
+      <div className="p-4 text-gray-400 border border-dashed border-gray-300 rounded">
+        No accordion content
+      </div>
+    );
+  }
+
+  const renderHeading = () => {
+    if (!headingBlock) return null;
+
+    return headingBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        const modifiedBlock =
+          childBlock.type === 'icon'
+            ? {
+                ...childBlock,
+                styles: {
+                  ...childBlock.styles,
+                  transform: {
+                    desktop: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
+                    mobile: isOpen ? 'rotate(180deg)' : 'rotate(0deg)'
+                  },
+                  transition: {
+                    desktop: 'transform 0.3s ease-in-out',
+                    mobile: 'transform 0.3s ease-in-out'
+                  }
+                }
+              }
+            : childBlock;
+
+        return (
+          <ThemeBlock
+            key={childBlock.id || `heading-block-${index}`}
+            block={modifiedBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const renderContent = () => {
+    if (!contentBlock) return null;
+
+    return contentBlock.blocks
+      ?.filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+      .sort((a, b) => (a.order || 0) - (b.order || 0))
+      .map((childBlock, index) => {
+        return (
+          <ThemeBlock
+            key={childBlock.id || `content-block-${index}`}
+            block={childBlock}
+            placeholderId={placeholderId}
+            sectionId={sectionId}
+            isDesigner={isDesigner}
+            isSelected={selectedBlockId === childBlock.id}
+            selectedBlockId={selectedBlockId}
+            currentBreakpoint={currentBreakpoint}
+            onMoveUp={undefined}
+            onMoveDown={undefined}
+            onDuplicate={undefined}
+            onToggleVisibility={undefined}
+            onDelete={undefined}
+            onRename={undefined}
+          />
+        );
+      });
+  };
+
+  const toggleAccordion = (e: React.MouseEvent) => {
+    if (isDesigner) {
+      const target = e.target as HTMLElement;
+      if (
+        target.closest('[data-action-toolbar]') ||
+        target.closest('button') ||
+        target.closest('input')
+      ) {
+        return;
+      }
+    }
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <>
+      <div style={{ cursor: 'pointer' }} onClick={toggleAccordion}>
+        {renderHeading()}
+      </div>
+
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateRows: isOpen ? '1fr' : '0fr',
+          transition: 'grid-template-rows 0.3s ease-in-out'
+        }}
+      >
+        <div style={{ overflow: 'hidden' }}>{renderContent()}</div>
+      </div>
+    </>
+  );
+};
+
+export default AccordionBlock;

package/src/blocks/block-renderer-registry.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Block } from '../theme-block';
+import TextBlock from './text-block';
+import ImageBlock from './image-block';
+import DividerBlock from './divider-block';
+import GroupBlock from './group-block';
+import ButtonBlock from './button-block';
+import IconBlock from './icon-block';
+import VideoBlock from './video-block';
+import AccordionBlock from './accordion-block';
+import TabBlock from './tab-block';
+import CounterBlock from './counter-block';
+import ImageGalleryBlock from './image-gallery-block';
+import InputBlock from './input-block';
+import SliderBlock from './slider-block';
+import HotspotBlock from './hotspot-block';
+import LinkBlock from './link-block';
+import LottieBlock from './lottie-block';
+import EmbedBlock from './embed-block';
+import MapBlock from './map-block';
+
+export interface BlockRendererProps {
+  block: Block;
+  placeholderId: string;
+  sectionId: string;
+  isDesigner: boolean;
+  isSelected?: boolean;
+  selectedBlockId?: string | null;
+  currentBreakpoint?: string;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  onDuplicate?: () => void;
+  onToggleVisibility?: () => void;
+  onDelete?: () => void;
+  onRename?: (newLabel: string) => void;
+}
+
+type BlockRenderer = React.ComponentType<BlockRendererProps>;
+
+class BlockRendererRegistry {
+  private renderers: Map<string, BlockRenderer> = new Map();
+
+  register(type: string, renderer: BlockRenderer) {
+    this.renderers.set(type, renderer);
+  }
+
+  getRenderer(type: string): BlockRenderer | undefined {
+    return this.renderers.get(type);
+  }
+
+  hasRenderer(type: string): boolean {
+    return this.renderers.has(type);
+  }
+}
+
+const blockRendererRegistry = new BlockRendererRegistry();
+
+blockRendererRegistry.register('text', TextBlock);
+blockRendererRegistry.register('image', ImageBlock);
+blockRendererRegistry.register('divider', DividerBlock);
+blockRendererRegistry.register('group', GroupBlock);
+blockRendererRegistry.register('button', ButtonBlock);
+blockRendererRegistry.register('icon', IconBlock);
+blockRendererRegistry.register('video', VideoBlock);
+blockRendererRegistry.register('accordion', AccordionBlock);
+blockRendererRegistry.register('tab', TabBlock);
+blockRendererRegistry.register('counter', CounterBlock);
+blockRendererRegistry.register('image-gallery', ImageGalleryBlock);
+blockRendererRegistry.register('input', InputBlock);
+blockRendererRegistry.register('slider', SliderBlock);
+blockRendererRegistry.register('hotspot', HotspotBlock);
+blockRendererRegistry.register('link', LinkBlock);
+blockRendererRegistry.register('lottie', LottieBlock);
+blockRendererRegistry.register('embed', EmbedBlock);
+blockRendererRegistry.register('map', MapBlock);
+
+export default blockRendererRegistry;