Merge pull request #16 from builder-group/15-editor-sections

Move head-metadata

Author: bennobuilder

.gitignore

@@ -38,3 +38,4 @@ yarn-error.log*
 .DS_Store
 *.pem
 .todo
+.local

apps/web/package.json

@@ -29,7 +29,7 @@
 		"@lit/react": "^1.0.7",
 		"@mdx-js/loader": "^3.1.0",
 		"@mdx-js/react": "^3.1.0",
-		"@next/mdx": "^15.3.2",
+		"@next/mdx": "^15.3.3",
 		"@radix-ui/react-compose-refs": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.14",
 		"@radix-ui/react-label": "^2.1.7",
@@ -40,7 +40,6 @@
 		"@radix-ui/react-tooltip": "^1.2.7",
 		"@radix-ui/react-visually-hidden": "^1.2.3",
 		"@repo/api-core": "workspace:*",
-		"@repo/head-metadata": "workspace:*",
 		"@repo/widgets": "workspace:*",
 		"@vercel/analytics": "^1.5.0",
 		"@vercel/speed-insights": "^1.2.0",
@@ -52,11 +51,12 @@
 		"feature-logger": "^0.0.42",
 		"feature-react": "^0.0.51",
 		"feature-state": "^0.0.51",
-		"framer-motion": "^12.12.1",
+		"framer-motion": "^12.15.0",
+		"head-metadata": "0.0.4",
 		"hono": "^4.7.10",
 		"input-otp": "^1.4.2",
 		"lucide-react": "^0.511.0",
-		"next": "^15.3.2",
+		"next": "^15.3.3",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",
 		"react-hot-toast": "^2.5.2",
@@ -74,14 +74,14 @@
 	"devDependencies": {
 		"@blgc/types": "^0.0.17",
 		"@repo/types": "workspace:*",
-		"@tailwindcss/postcss": "^4.1.7",
+		"@tailwindcss/postcss": "^4.1.8",
 		"@tailwindcss/typography": "^0.5.16",
 		"@types/canvas-confetti": "^1.9.0",
 		"@types/mdx": "^2.0.13",
-		"@types/node": "^22.15.21",
-		"@types/react": "19.1.5",
+		"@types/node": "^22.15.29",
+		"@types/react": "19.1.6",
 		"@types/react-dom": "19.1.5",
-		"postcss": "^8.5.3",
-		"tailwindcss": "^4.1.7"
+		"postcss": "^8.5.4",
+		"tailwindcss": "^4.1.8"
 	}
 }

apps/web/src/features/editor/lib/plugins/grid-node/types.ts

@@ -15,6 +15,7 @@ export type TGridNodeECSPlugin = TECSPlugin<{
 		// Markers
 		AbsoluteLayout: TCAbsoluteLayout;
 		AnimateGridRegion: TCAnimateGridRegion;
+
 		// Mixins
 		GridSectionLayoutMixin: TCGridSectionLayoutMixin[];
 		GridSectionRegionMixin: TCGridSectionRegionMixin[];

apps/web/src/features/editor/lib/plugins/section-node/README.md

@@ -0,0 +1,58 @@
+# Editor State and Layout Management
+
+In our Editor, each Node is an entity within an Entity Component System (ECS). Each Node can have multiple components assigned to it, which may include functions, classes, or entity references. Due to the nature of these components, they cannot be stored directly in a database. Instead, each Node entity defines a mapper to a storable object, ensuring a persistable format through serialization and deserialization functions, similar to Rust's serde crate.
+
+## Layout Management
+
+Previously, layout data was stored separately from the Node, with each Node's position defined in a grid layout. This approach was limited to grid-based layouts and did not support other layout types.
+
+### New Layout Format
+
+The new format integrates layout data directly within each Node, allowing for more flexible layout management. Each Node can define its layout using a CSS-like approach, supporting multiple layout types such as Grid, Absolute, and potentially Flex in the future. Each Node specifies its layout regions directly, with a default layout for fallback purposes.
+
+### Example
+
+**Old Format**
+
+```json
+Node
+{
+    id: 'A'
+}
+
+Layout
+lg: [
+    { id: 'A', region: { start: [0, 0], size: [4, 2] } },
+],
+md: [
+    { id: 'A', region: { start: [0, 0], size: [2, 2] } },
+],
+```
+
+**New Format**
+
+```json
+Node
+{
+    id: 'A',
+    region: {
+        default: 'lg',
+        lg: {
+           start: [0, 0], size: [4, 2]
+        },
+        md: {
+            start: [0, 0], size: [2, 2]
+        }
+    }
+}
+```
+
+### Generic Layout Type
+
+```ts
+type TBreakpointObject<TBase extends object, TKeys extends string> = {
+	default: TKeys;
+} & {
+	[K in TKeys]: TBase;
+};
+```

apps/web/src/features/editor/lib/plugins/section-node/section-node-plugin.ts

@@ -0,0 +1,22 @@
+import { TECSApp, TECSAppContext } from '../../ecs';
+import { TEditorECSPlugin } from '../editor';
+import { TSectionNodeECSPlugin } from './types';
+
+export function gridNodePlugin(): TSectionNodeECSPlugin {
+	return {
+		name: 'section-node',
+		components: {
+			SectionNode: [],
+
+			SectionNodeGridLayoutMixin: [],
+			SectionNodeGridChildMixin: [],
+			SectionNodeGridAnimateRegionMixin: [],
+			SectionNodeGridPendingMoveMixin: [],
+			SectionNodeGridLastMoveMixin: [],
+			SectionNodeAbsoluteLayoutMixin: [],
+			SectionNodeAbsoluteChildMixin: []
+		},
+		setup(app: TECSApp<TECSAppContext<[TEditorECSPlugin, TSectionNodeECSPlugin]>>) {},
+		appExtensions: {}
+	};
+}

apps/web/src/features/editor/lib/plugins/section-node/systems.ts

@@ -0,0 +1,99 @@
+import { TCIdMixinId, TECSPlugin, TEntity } from '../../ecs';
+import { TSize } from '../../types';
+import { TBaseGridLayout, TGridPosition, TGridRegion } from '../grid-node';
+
+// =========================================================================
+// Plugin
+// =========================================================================
+
+export type TSectionNodeECSPlugin = TECSPlugin<{
+	name: 'section-node';
+	components: {
+		// Nodes
+		SectionNode: TCSectionNode[];
+
+		// Mixins
+		SectionNodeGridLayoutMixin: TCSectionNodeGridLayoutMixin[];
+		SectionNodeGridChildMixin: TCSectionNodeGridChildMixin[];
+		SectionNodeGridAnimateRegionMixin: TCSectionNodeGridAnimateRegionMixin[];
+		SectionNodeGridPendingMoveMixin: TCSectionNodeGridPendingMoveMixin[];
+		SectionNodeGridLastMoveMixin: TCSectionNodeGridLastMoveMixin[];
+		SectionNodeAbsoluteLayoutMixin: TCSectionNodeAbsoluteLayoutMixin[];
+		SectionNodeAbsoluteChildMixin: TCSectionNodeAbsoluteChildMixin[];
+	};
+	resources: {};
+	events: {};
+	appExtensions: {};
+	systemSets: ['First', 'Update', 'Last'];
+	customTypes: {};
+}>;
+
+export interface TAddSectionNodeOptions {
+	id?: TCIdMixinId;
+	registerChildren?: (parentEid: TEntity) => void;
+	layout?: TAddSectionNodeLayout;
+	clipsContent?: boolean;
+	root?: boolean;
+	locked?: boolean;
+}
+
+type TAddSectionNodeLayout =
+	| {
+			mode: 'grid';
+			cellSize?: TSize;
+			gapSize?: TSize;
+			// initialLayout?: { id: TCIdMixinId; region: TGridRegion }[];
+	  }
+	| {
+			mode: 'absolute';
+	  };
+
+// =========================================================================
+// Components
+// =========================================================================
+
+export interface TCSectionNode {
+	layoutMode: TSectionNodeLayoutMode;
+	clipsContent: boolean;
+}
+
+type TSectionNodeLayoutMode = 'grid' | 'absolute';
+
+// Grid
+
+export interface TCSectionNodeGridLayoutMixin {
+	mode: 'grid';
+	grid: TBaseGridLayout;
+	cellSize: TSize;
+	gapSize: TSize;
+}
+
+export interface TCSectionNodeGridChildMixin {
+	mode: 'grid';
+	region: TGridRegion;
+}
+
+export interface TCSectionNodeGridAnimateRegionMixin {
+	targetRegion: TGridRegion;
+	duration: number;
+	easing?: string;
+}
+
+export interface TCSectionNodeGridPendingMoveMixin {
+	position: TGridPosition;
+	timeout: NodeJS.Timeout;
+}
+
+export interface TCSectionNodeGridLastMoveMixin {
+	position: TGridPosition;
+}
+
+// Absolute
+
+export interface TCSectionNodeAbsoluteLayoutMixin {
+	mode: 'absolute';
+}
+
+export interface TCSectionNodeAbsoluteChildMixin {
+	mode: 'absolute';
+}

apps/web/src/features/editor/lib/plugins/section-node/types.ts

@@ -37,22 +37,22 @@
 		"update:latest": "pnpm update --latest"
 	},
 	"dependencies": {
-		"@asteasolutions/zod-to-openapi": "^7.3.0",
-		"@aws-sdk/client-s3": "^3.815.0",
-		"@aws-sdk/s3-request-presigner": "^3.815.0",
+		"@asteasolutions/zod-to-openapi": "^7.3.2",
+		"@aws-sdk/client-s3": "^3.821.0",
+		"@aws-sdk/s3-request-presigner": "^3.821.0",
 		"@blgc/utils": "^0.0.52",
-		"@hono/zod-openapi": "^0.19.6",
-		"@hono/zod-validator": "^0.5.0",
-		"@repo/head-metadata": "workspace:*",
+		"@hono/zod-openapi": "^0.19.8",
+		"@hono/zod-validator": "^0.7.0",
 		"@repo/hono-utils": "workspace:*",
 		"@repo/transactional": "workspace:*",
 		"arctic": "^3.7.0",
 		"blurhash": "^2.0.5",
 		"decode-ico": "^0.4.1",
-		"drizzle-orm": "^0.43.1",
-		"drizzle-zod": "^0.8.1",
+		"drizzle-orm": "^0.44.1",
+		"drizzle-zod": "^0.7.1",
 		"feature-fetch": "^0.0.43",
 		"feature-logger": "^0.0.42",
+		"head-metadata": "0.0.4",
 		"hono": "^4.7.10",
 		"ico-endec": "^0.1.6",
 		"jose": "^6.0.11",
@@ -63,16 +63,16 @@
 		"sharp": "^0.34.2",
 		"validatenv": "^0.0.35",
 		"validation-adapters": "^0.0.25",
-		"zod": "3.25.20"
+		"zod": "3.25.42"
 	},
 	"devDependencies": {
 		"@blgc/types": "^0.0.17",
-		"@hono/node-server": "^1.14.2",
+		"@hono/node-server": "^1.14.3",
 		"@rollup/plugin-replace": "^6.0.2",
-		"@types/mime-types": "^2.1.4",
-		"@types/node": "^22.15.21",
+		"@types/mime-types": "^3.0.0",
+		"@types/node": "^22.15.29",
 		"@types/pg": "^8.15.2",
-		"@types/react": "^19.1.5",
+		"@types/react": "^19.1.6",
 		"dotenv": "^16.5.0",
 		"drizzle-kit": "^0.31.1"
 	}

packages/api-core/package.json

@@ -1,11 +1,6 @@
-import {
-	extractHeadMetadata,
-	linkExtractor,
-	metaExtractor,
-	titleExtractor
-} from '@repo/head-metadata';
 import { AppError } from '@repo/hono-utils';
 import { RequestError } from 'feature-fetch';
+import { extractHeadMetadata, linkExtractor, metaExtractor, titleExtractor } from 'head-metadata';
 import { router } from '@/app/router';
 import { fetchClient } from '@/environment';
 import { GetMetatagsRoute, TMetatagsDto } from './schema';

packages/api-core/src/app/routes/v1.metatags/index.ts

@@ -1,7 +1,7 @@
+import { SPageLayoutTable, SPageTable, SPageWidgetTable, SWidgetTable } from '@/environment';
 import { createRoute } from '@hono/zod-openapi';
 import { ErrorResponse, JsonSuccessResponse } from '@repo/hono-utils';
 import { z } from 'zod';
-import { SPageLayoutTable, SPageTable, SPageWidgetTable, SWidgetTable } from '@/environment';
 
 export const SPageWidgetDto = z.object({
 	id: SWidgetTable.shape.id,