meno-core 1.0.54 → 1.1.0

package/lib/shared/registry/NodeTypeDefinition.ts

@@ -6,7 +6,6 @@
 import type { ReactElement } from 'react';
 import type { ZodType } from 'zod';
 import type { ComponentNode } from '../types/nodes';
-import type { StyleValue } from '../types/styles';
 
 /**
  * Tree icon types for node display
@@ -21,7 +20,8 @@ export type TreeIcon =
   | 'ARRAY'
   | 'UNKNOWN'
   | 'FORM'
-  | 'LINK';
+  | 'LINK'
+  | 'CODE';
 
 /**
  * Node category for grouping in command palette

package/lib/shared/registry/SSRRegistry.ts

@@ -4,7 +4,6 @@
  */
 
 import { BaseComponentRegistry } from './ComponentRegistry';
-import type { ComponentDefinition } from '../types';
 
 export class SSRRegistry extends BaseComponentRegistry {
   /**

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/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/HtmlNodeType.ts

@@ -51,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') {

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/ListNodeType.ts

@@ -41,14 +41,38 @@ const ListNodeSchemaInternal = z
      * Data source type:
      * - 'prop': Read items from component props (default)
      * - 'collection': Query items from CMS collection
+     * - 'remote': Fetch items from a public HTTP/JSON endpoint at build/SSR time
+     * - 'sanity': Fetch a Sanity document type via GROQ at build/SSR time (read-only, public dataset)
+     * - 'expression': Iterate a verbatim JS expression (`source`) that yields an array — a
+     *   `.map()` over arbitrary frontmatter data (e.g. an Astro Action / supabase query) the
+     *   dialect can't model as a prop/collection. The item template (`children` + `itemAs`) IS
+     *   editable; the source itself is a read-only black box (edit it in the .astro frontmatter).
+     *   The editor has no data for it, so it renders empty in the design canvas (real Astro play
+     *   renders it for real at build/SSR).
      */
-    sourceType: z.enum(['prop', 'collection']).default('prop'),
+    sourceType: z.enum(['prop', 'collection', 'remote', 'sanity', 'expression']).default('prop'),
     /**
-     * Source identifier:
+     * Source identifier (sourceType 'prop'/'collection'/'expression'; 'remote' uses `url`):
      * - For sourceType 'prop': Prop name (e.g., "items") or template expression (e.g., "{{category.items}}")
      * - For sourceType 'collection': Collection name (e.g., "posts", "authors")
+     * - For sourceType 'expression': the verbatim JS expression iterated by `.map()` (e.g. "notes?")
      */
-    source: z.string(),
+    source: z.string().optional(),
+
+    // Remote-only options (sourceType: 'remote')
+    /** HTTP(S) endpoint returning JSON, fetched at build/SSR time (e.g. a public REST API). */
+    url: z.string().optional(),
+    /**
+     * Dot-path into the JSON response to reach the items array (e.g. "data.items").
+     * Empty/absent = the response body is itself the array.
+     */
+    path: z.string().optional(),
+
+    // Sanity-only options (sourceType: 'sanity')
+    /** Sanity document `_type` to fetch (`*[_type == "<documentType>"]`). projectId/dataset come from project config. */
+    documentType: z.string().optional(),
+    /** Field used as the URL slug (for synthesizing item links); defaults to 'slug'. */
+    slugField: z.string().optional(),
     label: z.string().optional(), // Custom label displayed in structure tree
     if: IfConditionSchema.optional(), // Conditional rendering - skip node when false
     /**
@@ -111,8 +135,19 @@ export const ListNodeType = createNodeType({
     getLabel: (node) => {
       const listNode = node as ListNode;
       const sourceType = listNode.sourceType || 'prop';
-      const prefix = sourceType === 'collection' ? 'CMS List' : 'List';
-      return listNode.source ? `${prefix}: ${listNode.source}` : prefix;
+      const prefix =
+        sourceType === 'collection'
+          ? 'CMS List'
+          : sourceType === 'remote'
+            ? 'Remote List'
+            : sourceType === 'sanity'
+              ? 'Sanity List'
+              : sourceType === 'expression'
+                ? 'Loop'
+                : 'List';
+      const src =
+        sourceType === 'remote' ? listNode.url : sourceType === 'sanity' ? listNode.documentType : listNode.source;
+      return src ? `${prefix}: ${src}` : prefix;
     },
   },
 
@@ -132,7 +167,8 @@ export const ListNodeType = createNodeType({
         key: context.key,
         'data-list': 'true',
         'data-source-type': sourceType,
-        'data-source': listNode.source,
+        'data-source':
+          sourceType === 'remote' ? listNode.url : sourceType === 'sanity' ? listNode.documentType : listNode.source,
         style: {
           padding: '8px 12px',
           background: bgColor,
@@ -162,7 +198,7 @@ export const ListNodeType = createNodeType({
       label: 'Source Type',
       type: 'select',
       required: false,
-      options: ['prop', 'collection'],
+      options: ['prop', 'collection', 'remote', 'sanity'],
     },
     {
       name: 'source',

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

@@ -0,0 +1,78 @@
+/**
+ * Markdown Node Type Definition
+ * Renders a verbatim Markdown source string as HTML (Astro `.md`-style authoring).
+ *
+ * The body is stored byte-exact in `node.source` (whitespace-significant Markdown). meno-core
+ * renders it via `renderMarkdown` for the canvas + SSR; the meno-astro codec hoists the source
+ * to a backtick const and renders it through the runtime `renderMarkdown` at build (see
+ * dialect/emit/emitNode.ts:renderMarkdown). Modeled on the Embed node (verbatim payload).
+ */
+
+import { z } from 'zod';
+import { createElement as h } from 'react';
+import { renderMarkdown } from '../../markdown';
+import { StyleValueSchema, InteractiveStylesSchema, IfConditionSchema } from '../../validation/schemas';
+import { createNodeType } from '../createNodeType';
+import { textareaField } from '../fieldPresets';
+
+// Schema is the SINGLE source of truth
+const MarkdownNodeSchemaInternal = z
+  .object({
+    type: z.literal('markdown'),
+    source: z.string(), // verbatim Markdown source (whitespace-significant)
+    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(),
+    generateElementClass: z.boolean().optional(),
+    attributes: z.record(z.string(), z.union([z.string(), z.number(), z.boolean()])).optional(),
+  })
+  .passthrough();
+
+// TypeScript type inferred from schema
+export type MarkdownNode = z.infer<typeof MarkdownNodeSchemaInternal>;
+
+// Export schema for validation/schemas.ts
+export const MarkdownNodeSchema = MarkdownNodeSchemaInternal;
+
+export const MarkdownNodeType = createNodeType({
+  type: 'markdown',
+  displayName: 'Markdown',
+  category: 'content',
+  schema: MarkdownNodeSchemaInternal,
+
+  defaultValues: {
+    source: '',
+    style: { base: {} },
+  },
+
+  treeDisplay: {
+    icon: 'HTML_ELEMENT',
+    getLabel: () => 'Markdown',
+  },
+
+  editableFields: [
+    textareaField({
+      name: 'source',
+      label: 'Markdown',
+      required: true,
+      placeholder: '# Heading\n\nWrite **markdown** here…',
+    }),
+  ],
+
+  clientRenderer: (node, context) => {
+    return h('div', {
+      key: context.key,
+      dangerouslySetInnerHTML: { __html: renderMarkdown((node as { source?: unknown }).source) },
+    });
+  },
+
+  ssrRenderer: (node, _context) => {
+    return `<div>${renderMarkdown((node as { source?: unknown }).source)}</div>`;
+  },
+
+  capabilities: {
+    canHaveChildren: false,
+    requiresProps: ['source'],
+  },
+});

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

@@ -32,7 +32,12 @@ export const SlotMarkerType = createNodeType({
 
   treeDisplay: {
     icon: 'SLOT_MARKER',
-    getLabel: () => 'slot',
+    // Show the slot's name so multiple named slots in a component are distinguishable
+    // (e.g. `slot: header`). Unnamed (default) slots stay just `slot`.
+    getLabel: (node) => {
+      const name = (node as { name?: unknown }).name;
+      return typeof name === 'string' && name ? `slot: ${name}` : 'slot';
+    },
   },
 
   clientRenderer: (_node, _context) => {

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

@@ -21,6 +21,9 @@ import { EmbedNodeType, EmbedNodeSchema, type EmbedNode } from './EmbedNodeType'
 import { LinkNodeType, LinkNodeSchema, type LinkNode } from './LinkNodeType';
 import { LocaleListNodeType, LocaleListNodeSchema, type LocaleListNode } from './LocaleListNodeType';
 import { ListNodeType, ListNodeSchema, type ListNode } from './ListNodeType';
+import { IslandNodeType, IslandNodeSchema, type IslandNode } from './IslandNodeType';
+import { MarkdownNodeType, MarkdownNodeSchema, type MarkdownNode } from './MarkdownNodeType';
+import { CustomNodeType, CustomNodeSchema, type CustomNode } from './CustomNodeType';
 
 /**
  * All built-in node type definitions
@@ -34,6 +37,9 @@ export const builtInNodeTypes: NodeTypeDefinition[] = [
   LinkNodeType as NodeTypeDefinition,
   LocaleListNodeType as NodeTypeDefinition,
   ListNodeType as NodeTypeDefinition,
+  IslandNodeType as NodeTypeDefinition,
+  MarkdownNodeType as NodeTypeDefinition,
+  CustomNodeType as NodeTypeDefinition,
 ];
 
 /**
@@ -47,6 +53,9 @@ export const nodeSchemas = {
   link: LinkNodeSchema,
   localeList: LocaleListNodeSchema,
   list: ListNodeSchema,
+  island: IslandNodeSchema,
+  markdown: MarkdownNodeSchema,
+  custom: CustomNodeSchema,
 };
 
 /**
@@ -69,6 +78,9 @@ export { EmbedNodeType, EmbedNodeSchema, type EmbedNode } from './EmbedNodeType'
 export { LinkNodeType, LinkNodeSchema, type LinkNode } from './LinkNodeType';
 export { LocaleListNodeType, LocaleListNodeSchema, type LocaleListNode } from './LocaleListNodeType';
 export { ListNodeType, ListNodeSchema, type ListNode } from './ListNodeType';
+export { IslandNodeType, IslandNodeSchema, type IslandNode } from './IslandNodeType';
+export { MarkdownNodeType, MarkdownNodeSchema, type MarkdownNode } from './MarkdownNodeType';
+export { CustomNodeType, CustomNodeSchema, type CustomNode } from './CustomNodeType';
 
 /**
  * Discriminated union of all component node types
@@ -81,4 +93,7 @@ export type ComponentNode =
   | EmbedNode
   | LinkNode
   | LocaleListNode
-  | ListNode;
+  | ListNode
+  | IslandNode
+  | MarkdownNode
+  | CustomNode;

package/lib/shared/responsiveScaling.test.ts

@@ -15,8 +15,6 @@ import {
   buildSiteMarginClamp,
   getSmallestBreakpointName,
   type ResponsiveScales,
-  type CSSPropertyType,
-  type BreakpointScales,
 } from './responsiveScaling';
 
 describe('responsiveScaling', () => {
@@ -454,7 +452,7 @@ describe('responsiveScaling', () => {
     test('multi-value padding "20px 40px" → both tokens scaled', () => {
       const out = buildFluidPropertyValue('20px 40px', 0.5, 320, 1440);
       expect(out).not.toBeNull();
-      const parts = out!.split(' ');
+      const _parts = out!.split(' ');
       // The two tokens get joined by space — but each clamp() also has spaces inside.
       // Check both clamp(...) substrings present.
       expect((out!.match(/clamp\(/g) ?? []).length).toBe(2);

package/lib/shared/responsiveScaling.ts

@@ -111,8 +111,8 @@ export function parseValue(valueStr: string): { value: number; unit: string } |
   const match = valueStr.trim().match(/^(-?[\d.]+)(px|rem|em|%|pt)$/);
   if (!match) return null;
   return {
-    value: parseFloat(match[1]),
-    unit: match[2],
+    value: parseFloat(match[1] ?? ''),
+    unit: match[2] ?? '',
   };
 }
 
@@ -339,9 +339,10 @@ export function getSmallestBreakpointName(
 ): string | null {
   if (!breakpoints) return null;
   const entries = Object.entries(breakpoints);
-  if (entries.length === 0) return null;
-  let smallestName = entries[0][0];
-  let smallestWidth = entries[0][1].breakpoint;
+  const firstEntry = entries[0];
+  if (entries.length === 0 || firstEntry === undefined) return null;
+  let smallestName = firstEntry[0];
+  let smallestWidth = firstEntry[1].breakpoint;
   for (const [name, cfg] of entries) {
     if (cfg.breakpoint < smallestWidth) {
       smallestWidth = cfg.breakpoint;

package/lib/shared/responsiveStyleUtils.test.ts

@@ -4,7 +4,6 @@ import {
   normalizeStyle,
   getAvailableBreakpoints,
   breakpointToViewportWidth,
-  type MergeStrategy,
 } from './responsiveStyleUtils';
 import type { ResponsiveStyleObject, StyleObject } from './types';
 import type { BreakpointConfig } from './breakpoints';