meno-core 1.0.53 → 1.1.0

package/lib/shared/registry/defineNodeType.ts

@@ -4,11 +4,7 @@
  */
 
 import type { ComponentNode } from '../types/nodes';
-import type {
-  NodeTypeDefinition,
-  NodeTypeDefinitionInput,
-  NodeCapabilities,
-} from './NodeTypeDefinition';
+import type { NodeTypeDefinition, NodeTypeDefinitionInput, NodeCapabilities } from './NodeTypeDefinition';
 
 /**
  * Default capabilities for node types
@@ -26,7 +22,7 @@ const DEFAULT_CAPABILITIES: NodeCapabilities = {
  * Provides type safety and validation at definition time
  */
 export function defineNodeType<TNode extends ComponentNode>(
-  input: NodeTypeDefinitionInput<TNode>
+  input: NodeTypeDefinitionInput<TNode>,
 ): NodeTypeDefinition<TNode> {
   // Validate required fields
   if (!input.type) {

package/lib/shared/registry/fieldPresets.ts

@@ -33,7 +33,9 @@ interface TextFieldConfig extends BaseFieldConfig {
 }
 
 interface SelectFieldConfig extends BaseFieldConfig {
-  options: string[];
+  // Bare strings are value-is-label options; the object form carries a distinct
+  // display label (e.g. an empty-value `{ value: '', label: 'None' }` entry).
+  options: (string | { value: string | boolean; label: string })[];
 }
 
 // ============================================

package/lib/shared/registry/index.ts

@@ -48,4 +48,3 @@ export {
   LinkNodeType,
   LocaleListNodeType,
 } from './nodeTypes';
-

package/lib/shared/registry/nodeTypes/ComponentInstanceNodeType.ts

@@ -12,21 +12,20 @@ import { createNodeType } from '../createNodeType';
 const ComponentNodeSchemaRef: z.ZodType<any> = z.lazy(() => z.any());
 
 // Schema is the SINGLE source of truth
-const ComponentInstanceNodeSchemaInternal = z.object({
-  type: z.literal('component'),
-  component: z.string(),
-  label: z.string().optional(), // Custom label displayed in structure tree
-  if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
-  props: z.record(z.string(), z.any()).optional(),
-  style: StyleValueSchema.optional(),
-  interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
-  generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
-  children: z.union([
-    z.array(z.union([ComponentNodeSchemaRef, z.string()])),
-    z.string(),
-  ]).optional(),
-}).passthrough();
+const ComponentInstanceNodeSchemaInternal = z
+  .object({
+    type: z.literal('component'),
+    component: z.string(),
+    label: z.string().optional(), // Custom label displayed in structure tree
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    props: z.record(z.string(), z.any()).optional(),
+    style: StyleValueSchema.optional(),
+    interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
+    generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
+    attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+    children: z.union([z.array(z.union([ComponentNodeSchemaRef, z.string()])), z.string()]).optional(),
+  })
+  .passthrough();
 
 // TypeScript type inferred from schema
 export type ComponentInstanceNode = z.infer<typeof ComponentInstanceNodeSchemaInternal>;

package/lib/shared/registry/nodeTypes/CustomNodeType.ts

@@ -0,0 +1,103 @@
+/**
+ * Custom Node Type Definition
+ *
+ * Represents a hand-authored, opaque `.astro` component (under `src/custom/`) that Meno
+ * treats as a BLACK BOX: it renders server-side in a real `astro build` / play preview
+ * (the meno-astro codec emits `<Fancy … />` + the import), but Meno doesn't model its
+ * internals — you can place it, pass props, and slot children, but not edit what's inside.
+ * The native-Astro sibling of an island (no framework renderer, no hydration).
+ *
+ * meno-core can't execute a foreign `.astro` file, so the editor canvas renders a quiet
+ * placeholder (its slotted children, or an inline marker) — real rendering is play/build
+ * only. The on-disk `.astro` form and the round-trip codec live in `meno-astro`; this file
+ * only models the node so it validates, persists, and renders a placeholder.
+ */
+
+import { z } from 'zod';
+import { createElement as h } from 'react';
+import type { ComponentNode } from '../../types/nodes';
+import { IfConditionSchema } from '../../validation/schemas';
+import { createNodeType } from '../createNodeType';
+import { textField } from '../fieldPresets';
+
+// Schema is the SINGLE source of truth
+const CustomNodeSchemaInternal = z
+  .object({
+    type: z.literal('custom'),
+    // Path to the hand-authored .astro component relative to `src/custom/`
+    // (e.g. "Fancy.astro", "widgets/Banner.astro").
+    src: z.string(),
+    props: z.record(z.string(), z.any()).optional(),
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    // Slotted children (rendered server-side into the component's default <slot/>).
+    children: z.union([z.array(z.any()), z.string()]).optional(),
+  })
+  .passthrough();
+
+// TypeScript type inferred from schema
+export type CustomNode = z.infer<typeof CustomNodeSchemaInternal>;
+
+// Export schema for validation/schemas.ts
+export const CustomNodeSchema = CustomNodeSchemaInternal;
+
+/** Basename of the custom source (drops directory + `.astro` extension) for display. */
+function customName(src: string): string {
+  const base = src.split('/').pop() ?? src;
+  return base.replace(/\.astro$/i, '') || base;
+}
+
+/** Slotted children, normalized to the shape `buildChildren`/`renderChildren` accept. */
+function customChildren(node: CustomNode): Array<ComponentNode | string> | string | undefined {
+  const { children } = node;
+  if (Array.isArray(children)) return children.length > 0 ? (children as Array<ComponentNode | string>) : undefined;
+  if (typeof children === 'string') return children.length > 0 ? children : undefined;
+  return undefined;
+}
+
+export const CustomNodeType = createNodeType({
+  type: 'custom',
+  displayName: 'Custom Component',
+  category: 'special',
+  schema: CustomNodeSchemaInternal,
+
+  defaultValues: {
+    src: '',
+  },
+
+  treeDisplay: {
+    icon: 'COMPONENT',
+    getLabel: (node) => `Custom: ${customName(node.src) || '?'}`,
+  },
+
+  editableFields: [textField({ name: 'src', label: 'Custom .astro file', required: true, placeholder: 'Fancy.astro' })],
+
+  // meno-core can't run a foreign `.astro` file. Render the slotted children as normal
+  // content and fall back to a quiet inline marker when there are none. The wrapper keeps
+  // `data-custom` for selection/identification only. Real rendering is play/build only.
+  clientRenderer: (node, context) => {
+    const children = customChildren(node);
+    const inner = children
+      ? context.buildChildren(children, context.elementPath)
+      : h('span', { style: { color: '#9ca3af', fontSize: '13px' } }, customName(node.src) || '?');
+    return h('div', { key: context.key, 'data-custom': node.src, style: { display: 'contents' } }, inner);
+  },
+
+  ssrRenderer: (node, context) => {
+    const children = customChildren(node);
+    const inner = children
+      ? context.renderChildren(children, context)
+      : `<span style="color:#9ca3af;font-size:13px">${escapeHtml(customName(node.src) || '?')}</span>`;
+    return `<div data-custom="${escapeHtml(node.src)}" style="display:contents">${inner}</div>`;
+  },
+
+  capabilities: {
+    canHaveChildren: true,
+    canHaveStyle: false,
+    canHaveAttributes: false,
+    requiresProps: ['src'],
+  },
+});
+
+function escapeHtml(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/lib/shared/registry/nodeTypes/EmbedNodeType.ts

@@ -5,21 +5,28 @@
 
 import { z } from 'zod';
 import { createElement as h } from 'react';
-import { StyleValueSchema, InteractiveStylesSchema, IfConditionSchema, HtmlMappingSchema } from '../../validation/schemas';
+import {
+  StyleValueSchema,
+  InteractiveStylesSchema,
+  IfConditionSchema,
+  HtmlMappingSchema,
+} from '../../validation/schemas';
 import { createNodeType } from '../createNodeType';
 import { textareaField } from '../fieldPresets';
 
 // Schema is the SINGLE source of truth
-const EmbedNodeSchemaInternal = z.object({
-  type: z.literal('embed'),
-  html: z.union([z.string(), HtmlMappingSchema]),
-  label: z.string().optional(), // Custom label displayed in structure tree
-  if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
-  style: StyleValueSchema.optional(),
-  interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
-  generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
-}).passthrough();
+const EmbedNodeSchemaInternal = z
+  .object({
+    type: z.literal('embed'),
+    html: z.union([z.string(), HtmlMappingSchema]),
+    label: z.string().optional(), // Custom label displayed in structure tree
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    style: StyleValueSchema.optional(),
+    interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
+    generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
+    attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  })
+  .passthrough();
 
 // TypeScript type inferred from schema
 export type EmbedNode = z.infer<typeof EmbedNodeSchemaInternal>;

package/lib/shared/registry/nodeTypes/HtmlNodeType.ts

@@ -12,21 +12,20 @@ import { createNodeType } from '../createNodeType';
 const ComponentNodeSchemaRef: z.ZodType<any> = z.lazy(() => z.any());
 
 // Schema is the SINGLE source of truth
-const HtmlNodeSchemaInternal = z.object({
-  type: z.literal('node'),
-  tag: z.string(),
-  label: z.string().optional(), // Custom label displayed in structure tree
-  if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
-  style: StyleValueSchema.optional(),
-  interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
-  generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
-  props: z.record(z.string(), z.any()).optional(), // Backward compatibility
-  children: z.union([
-    z.array(z.union([ComponentNodeSchemaRef, z.string()])),
-    z.string(),
-  ]).optional(),
-}).passthrough();
+const HtmlNodeSchemaInternal = z
+  .object({
+    type: z.literal('node'),
+    tag: z.string(),
+    label: z.string().optional(), // Custom label displayed in structure tree
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    style: StyleValueSchema.optional(),
+    interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
+    generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
+    attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+    props: z.record(z.string(), z.any()).optional(), // Backward compatibility
+    children: z.union([z.array(z.union([ComponentNodeSchemaRef, z.string()])), z.string()]).optional(),
+  })
+  .passthrough();
 
 // TypeScript type inferred from schema
 export type HtmlNode = z.infer<typeof HtmlNodeSchemaInternal>;
@@ -52,7 +51,7 @@ export const HtmlNodeType = createNodeType({
   },
 
   clientRenderer: (node, context) => {
-    const props: Record<string, any> = { key: context.key };
+    const props: Record<string, unknown> = { key: context.key };
 
     // Prevent form submission in editor
     if (node.tag === 'form') {
@@ -60,7 +59,22 @@ export const HtmlNodeType = createNodeType({
     }
 
     // Void elements cannot have children
-    const voidElements = ['img', 'br', 'hr', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr'];
+    const voidElements = [
+      'img',
+      'br',
+      'hr',
+      'input',
+      'meta',
+      'link',
+      'area',
+      'base',
+      'col',
+      'embed',
+      'param',
+      'source',
+      'track',
+      'wbr',
+    ];
     if (voidElements.includes(node.tag.toLowerCase())) {
       return h(node.tag, props);
     }
@@ -69,7 +83,7 @@ export const HtmlNodeType = createNodeType({
       node.children as any,
       context.elementPath,
       context.parentComponentName,
-      context.componentContext
+      context.componentContext,
     );
 
     return h(node.tag, props, children);
@@ -78,7 +92,22 @@ export const HtmlNodeType = createNodeType({
   ssrRenderer: (node, context) => {
     const childrenHTML = context.renderChildren(node.children as any, context);
     // Void elements don't have closing tags
-    const voidElements = ['img', 'br', 'hr', 'input', 'meta', 'link', 'area', 'base', 'col', 'embed', 'param', 'source', 'track', 'wbr'];
+    const voidElements = [
+      'img',
+      'br',
+      'hr',
+      'input',
+      'meta',
+      'link',
+      'area',
+      'base',
+      'col',
+      'embed',
+      'param',
+      'source',
+      'track',
+      'wbr',
+    ];
     if (voidElements.includes(node.tag.toLowerCase())) {
       return `<${node.tag} />`;
     }

package/lib/shared/registry/nodeTypes/IslandNodeType.ts

@@ -0,0 +1,129 @@
+/**
+ * Island Node Type Definition
+ *
+ * Represents a BYO framework component (React/Preact/Vue/Svelte) rendered as an
+ * Astro island. The actual hydration only happens in a real `astro build` / play
+ * preview (the meno-astro codec emits `<Counter client:visible … />`). meno-core
+ * itself can't run a framework component, so the editor canvas renders a visible
+ * placeholder — design-time positioning works, interactivity is play/build only.
+ *
+ * The on-disk `.astro` form and the round-trip codec live in `meno-astro`; this
+ * file only models the node so it validates, persists, and renders a placeholder.
+ */
+
+import { z } from 'zod';
+import { createElement as h } from 'react';
+import type { ComponentNode } from '../../types/nodes';
+import { IfConditionSchema } from '../../validation/schemas';
+import { createNodeType } from '../createNodeType';
+import { textField, selectField } from '../fieldPresets';
+
+/**
+ * Client (hydration) directive for an island.
+ * `directive` maps to Astro's `client:*` directive; `value` carries the media
+ * query (`client:media="(max-width: 50em)"`) or the framework name
+ * (`client:only="react"`). When omitted entirely, the island is server-rendered
+ * with no JS (a valid, zero-hydration Astro island).
+ */
+export const IslandClientDirectiveSchema = z
+  .object({
+    directive: z.enum(['load', 'idle', 'visible', 'media', 'only']),
+    value: z.string().optional(),
+  })
+  .passthrough();
+
+// Schema is the SINGLE source of truth
+const IslandNodeSchemaInternal = z
+  .object({
+    type: z.literal('island'),
+    // Path to the framework component file relative to `src/islands/`
+    // (e.g. "Counter.tsx", "widgets/Chart.vue"). The extension derives the
+    // framework, which drives the Astro integration that gets provisioned.
+    src: z.string(),
+    client: IslandClientDirectiveSchema.optional(),
+    props: z.record(z.string(), z.any()).optional(),
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    // Slotted children (rendered server-side into the island's <slot/>).
+    children: z.union([z.array(z.any()), z.string()]).optional(),
+  })
+  .passthrough();
+
+// TypeScript type inferred from schema
+export type IslandNode = z.infer<typeof IslandNodeSchemaInternal>;
+
+// Export schema for validation/schemas.ts
+export const IslandNodeSchema = IslandNodeSchemaInternal;
+
+/** Basename of the island source (drops directory + extension) for display. */
+function islandName(src: string): string {
+  const base = src.split('/').pop() ?? src;
+  return base.replace(/\.(tsx|jsx|vue|svelte)$/i, '') || base;
+}
+
+/** Slotted children, normalized to the shape `buildChildren`/`renderChildren` accept. */
+function islandChildren(node: IslandNode): Array<ComponentNode | string> | string | undefined {
+  const { children } = node;
+  if (Array.isArray(children)) return children.length > 0 ? (children as Array<ComponentNode | string>) : undefined;
+  if (typeof children === 'string') return children.length > 0 ? children : undefined;
+  return undefined;
+}
+
+export const IslandNodeType = createNodeType({
+  type: 'island',
+  displayName: 'Island',
+  category: 'special',
+  schema: IslandNodeSchemaInternal,
+
+  defaultValues: {
+    src: '',
+    client: { directive: 'load' },
+  },
+
+  treeDisplay: {
+    icon: 'COMPONENT',
+    getLabel: (node) => `Island: ${islandName(node.src) || '?'}`,
+  },
+
+  editableFields: [
+    textField({ name: 'src', label: 'Island file', required: true, placeholder: 'Counter.tsx' }),
+    selectField({
+      name: 'client.directive',
+      label: 'Hydration',
+      // The empty-value entry clears `client` entirely → a server-rendered island
+      // with zero JS (a valid Astro pattern); the rest map to `client:<directive>`.
+      options: [{ value: '', label: 'None (server-only, no JS)' }, 'load', 'idle', 'visible', 'media', 'only'],
+    }),
+  ],
+
+  // meno-core can't run a framework component. Instead of a loud highlight box
+  // (which made island-heavy pages unreadable), render the island's slotted
+  // children as normal content and fall back to a quiet inline marker when there
+  // are none. The wrapper keeps `data-island` for selection/identification only.
+  // Real hydration is play/build only.
+  clientRenderer: (node, context) => {
+    const children = islandChildren(node);
+    const inner = children
+      ? context.buildChildren(children, context.elementPath)
+      : h('span', { style: { color: '#9ca3af', fontSize: '13px' } }, islandName(node.src) || '?');
+    return h('div', { key: context.key, 'data-island': node.src, style: { display: 'contents' } }, inner);
+  },
+
+  ssrRenderer: (node, context) => {
+    const children = islandChildren(node);
+    const inner = children
+      ? context.renderChildren(children, context)
+      : `<span style="color:#9ca3af;font-size:13px">${escapeHtml(islandName(node.src) || '?')}</span>`;
+    return `<div data-island="${escapeHtml(node.src)}" style="display:contents">${inner}</div>`;
+  },
+
+  capabilities: {
+    canHaveChildren: true,
+    canHaveStyle: false,
+    canHaveAttributes: false,
+    requiresProps: ['src'],
+  },
+});
+
+function escapeHtml(value: string): string {
+  return value.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}

package/lib/shared/registry/nodeTypes/LinkNodeType.ts

@@ -5,7 +5,12 @@
 
 import { z } from 'zod';
 import { createElement as h } from 'react';
-import { StyleValueSchema, InteractiveStylesSchema, LinkMappingSchema, IfConditionSchema } from '../../validation/schemas';
+import {
+  StyleValueSchema,
+  InteractiveStylesSchema,
+  LinkMappingSchema,
+  IfConditionSchema,
+} from '../../validation/schemas';
 import { createNodeType } from '../createNodeType';
 import { urlField } from '../fieldPresets';
 
@@ -14,20 +19,19 @@ import { urlField } from '../fieldPresets';
 const ComponentNodeSchemaRef: z.ZodType<any> = z.lazy(() => z.any());
 
 // Schema is the SINGLE source of truth
-const LinkNodeSchemaInternal = z.object({
-  type: z.literal('link'),
-  href: z.union([z.string(), LinkMappingSchema]),
-  label: z.string().optional(), // Custom label displayed in structure tree
-  if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
-  style: StyleValueSchema.optional(),
-  interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
-  generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
-  attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
-  children: z.union([
-    z.array(z.union([ComponentNodeSchemaRef, z.string()])),
-    z.string(),
-  ]).optional(),
-}).passthrough();
+const LinkNodeSchemaInternal = z
+  .object({
+    type: z.literal('link'),
+    href: z.union([z.string(), LinkMappingSchema]),
+    label: z.string().optional(), // Custom label displayed in structure tree
+    if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
+    style: StyleValueSchema.optional(),
+    interactiveStyles: InteractiveStylesSchema.optional(), // Interactive CSS rules (hover, active, etc.)
+    generateElementClass: z.boolean().optional(), // Generate element class without styles (for custom CSS)
+    attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+    children: z.union([z.array(z.union([ComponentNodeSchemaRef, z.string()])), z.string()]).optional(),
+  })
+  .passthrough();
 
 // TypeScript type inferred from schema
 export type LinkNode = z.infer<typeof LinkNodeSchemaInternal>;
@@ -52,16 +56,14 @@ export const LinkNodeType = createNodeType({
     getLabel: () => 'Link',
   },
 
-  editableFields: [
-    urlField({ name: 'href', label: 'Link URL', required: true }),
-  ],
+  editableFields: [urlField({ name: 'href', label: 'Link URL', required: true })],
 
   clientRenderer: (node, context) => {
     const children = context.buildChildren(
       node.children as any,
       context.elementPath,
       context.parentComponentName,
-      context.componentContext
+      context.componentContext,
     );
     return h('div', { key: context.key }, children);
   },