@ankhorage/studio 0.0.3 → 0.0.5

package/dist/index.js

@@ -5,6 +5,7 @@ export const STUDIO_PACKAGE_BOUNDARY = {
         'Studio product contracts',
         'Studio manifest editing contracts',
         'Studio command and event contracts',
+        'Studio authoring model helpers',
     ],
     consumes: [
         '@ankhorage/contracts',
@@ -34,5 +35,814 @@ export const STUDIO_PUBLIC_CONTRACTS = [
     'ActionDefinition',
     'StudioCommand',
     'StudioEvent',
+    'StudioComponentMetaRegistry',
+    'ACTION_REGISTRY',
+    'TPL_SCREEN_EMPTY',
+    'resolveDefaultInsertPlacement',
+    'buildInsertCatalogEntries',
 ];
+export const ACTION_REGISTRY = {
+    navigate: {
+        type: 'navigate',
+        label: 'Navigate',
+        description: 'Navigate to another screen or route',
+        requiresPayload: true,
+        payloadSchema: {
+            route: {
+                type: 'string',
+                label: 'Route',
+                required: true,
+            },
+            params: {
+                type: 'object',
+                label: 'Parameters',
+            },
+        },
+    },
+    alert: {
+        type: 'alert',
+        label: 'Alert',
+        description: 'Show an alert dialog',
+        requiresPayload: false,
+        payloadSchema: {
+            message: {
+                type: 'string',
+                label: 'Message',
+            },
+        },
+    },
+    console: {
+        type: 'console',
+        label: 'Console Log',
+        description: 'Log a message to the console',
+        requiresPayload: false,
+    },
+    toggleDarkMode: {
+        type: 'toggleDarkMode',
+        label: 'Toggle Dark Mode',
+        description: 'Toggle between light and dark theme modes',
+        requiresPayload: false,
+    },
+    setLanguage: {
+        type: 'setLanguage',
+        label: 'Set Language',
+        description: 'Change the application language',
+        requiresPayload: true,
+        payloadSchema: {
+            locale: {
+                type: 'string',
+                label: 'Locale',
+                required: true,
+            },
+        },
+    },
+    search: {
+        type: 'search',
+        label: 'Search',
+        description: 'Search for content by text and metadata',
+        requiresPayload: true,
+        payloadSchema: {
+            query: {
+                type: 'string',
+                label: 'Search Query',
+                required: true,
+            },
+            scope: {
+                type: 'string',
+                label: 'Search Scope',
+            },
+        },
+    },
+    filter: {
+        type: 'filter',
+        label: 'Filter',
+        description: 'Filter content by key-value pairs',
+        requiresPayload: true,
+        payloadSchema: {
+            filterKey: {
+                type: 'string',
+                label: 'Filter Key',
+                required: true,
+            },
+            filterValue: {
+                type: 'string',
+                label: 'Filter Value',
+                required: true,
+            },
+        },
+    },
+};
+export const TPL_SCREEN_EMPTY = {
+    id: 'tpl-screen-empty',
+    type: 'Screen',
+    props: {
+        width: 'wide',
+    },
+    children: [
+        {
+            id: 'tpl-screen-empty-header',
+            type: 'SectionHeader',
+            props: {
+                title: 'New Screen',
+                description: 'Start authoring with ZORA layouts and patterns.',
+            },
+        },
+        {
+            id: 'tpl-screen-empty-section',
+            type: 'ScreenSection',
+            props: {
+                title: 'Build the first section',
+                description: 'Insert panels, forms, or content patterns to start authoring.',
+            },
+            children: [
+                {
+                    id: 'tpl-screen-empty-state',
+                    type: 'EmptyState',
+                    props: {
+                        title: 'Canvas is ready',
+                        description: 'Use Insert to add components and layouts.',
+                    },
+                },
+            ],
+        },
+        {
+            id: 'tpl-screen-empty-action',
+            type: 'Button',
+            props: {
+                children: 'Add first section',
+                tone: 'primary',
+                emphasis: 'solid',
+            },
+        },
+    ],
+};
+/**
+ * Generates a unique ID for Studio-authored nodes and entities.
+ */
+export const generateStudioId = (prefix) => {
+    const timestamp = Date.now().toString(36);
+    const random = Math.random().toString(36).substring(2, 11);
+    const id = `${timestamp}-${random}`;
+    return prefix ? `${prefix.toLowerCase()}-${id}` : id;
+};
+export const cloneWithNewIds = (node, createId = generateStudioId) => {
+    const clonedNode = {
+        ...node,
+        id: createId(node.type),
+        props: node.props ? { ...node.props } : node.props,
+    };
+    if (node.children) {
+        clonedNode.children = node.children.map((child) => cloneWithNewIds(child, createId));
+    }
+    return clonedNode;
+};
+export const findNodeById = (root, id) => {
+    if (root.id === id)
+        return root;
+    if (!root.children)
+        return null;
+    for (const child of root.children) {
+        const found = findNodeById(child, id);
+        if (found)
+            return found;
+    }
+    return null;
+};
+export const updateNodeInTree = (root, id, newProps) => {
+    if (root.id === id) {
+        const { alias, style, ...rest } = newProps;
+        const aliasUpdate = typeof alias === 'string' ? { alias } : {};
+        const styleUpdate = isStyleRecord(style) ? { style } : {};
+        return {
+            ...root,
+            ...aliasUpdate,
+            ...styleUpdate,
+            props: { ...(root.props ?? {}), ...rest },
+        };
+    }
+    if (!root.children) {
+        return root;
+    }
+    return {
+        ...root,
+        children: root.children.map((child) => updateNodeInTree(child, id, newProps)),
+    };
+};
+export const removeNodeFromTree = (root, nodeId) => {
+    if (root.id === nodeId)
+        return null;
+    if (!root.children) {
+        return root;
+    }
+    const filteredChildren = root.children.filter((child) => child.id !== nodeId);
+    if (filteredChildren.length !== root.children.length) {
+        return { ...root, children: filteredChildren };
+    }
+    const nextChildren = root.children.map((child) => removeNodeFromTree(child, nodeId) ?? child);
+    const hasChanged = nextChildren.some((child, index) => child !== root.children?.[index]);
+    return hasChanged ? { ...root, children: nextChildren } : root;
+};
+export const addNodeToTree = (args) => {
+    const { root, targetId, newNode, componentMeta, mode = 'append' } = args;
+    if (root.id === targetId) {
+        if (!canAcceptChild({ parentType: root.type, childType: newNode.type, componentMeta })) {
+            return root;
+        }
+        const children = root.children ?? [];
+        return {
+            ...root,
+            children: mode === 'prepend' ? [newNode, ...children] : [...children, newNode],
+        };
+    }
+    if (!root.children) {
+        return root;
+    }
+    const nextChildren = root.children.map((child) => addNodeToTree({ root: child, targetId, newNode, componentMeta, mode }));
+    const hasChanged = nextChildren.some((child, index) => child !== root.children?.[index]);
+    return hasChanged ? { ...root, children: nextChildren } : root;
+};
+export const moveNodeInTree = (root, nodeId, direction) => {
+    if (root.id === nodeId || !root.children)
+        return root;
+    const index = root.children.findIndex((child) => child.id === nodeId);
+    if (index !== -1) {
+        const targetIndex = direction === 'up' ? index - 1 : index + 1;
+        if (targetIndex < 0 || targetIndex >= root.children.length) {
+            return root;
+        }
+        const currentNode = root.children[index];
+        const targetNode = root.children[targetIndex];
+        if (!currentNode || !targetNode) {
+            return root;
+        }
+        const nextChildren = [...root.children];
+        nextChildren[index] = targetNode;
+        nextChildren[targetIndex] = currentNode;
+        return { ...root, children: nextChildren };
+    }
+    const nextChildren = root.children.map((child) => moveNodeInTree(child, nodeId, direction));
+    const hasChanged = nextChildren.some((child, childIndex) => child !== root.children?.[childIndex]);
+    return hasChanged ? { ...root, children: nextChildren } : root;
+};
+function findNodeWithParent(root, nodeId) {
+    if (root.id === nodeId) {
+        return { node: root, parent: null, index: -1 };
+    }
+    const visit = (node) => {
+        const children = node.children ?? [];
+        for (const [index, child] of children.entries()) {
+            if (child.id === nodeId) {
+                return { node: child, parent: node, index };
+            }
+            const nested = visit(child);
+            if (nested) {
+                return nested;
+            }
+        }
+        return null;
+    };
+    return visit(root);
+}
+function isDescendantNode(node, descendantId) {
+    const children = node.children ?? [];
+    for (const child of children) {
+        if (child.id === descendantId || isDescendantNode(child, descendantId)) {
+            return true;
+        }
+    }
+    return false;
+}
+function removeNodeForMove(args) {
+    const { node, nodeId } = args;
+    const children = node.children ?? [];
+    const directIndex = children.findIndex((child) => child.id === nodeId);
+    if (directIndex !== -1) {
+        const removedNode = children[directIndex];
+        if (!removedNode) {
+            return { node, removedNode: null };
+        }
+        return {
+            node: {
+                ...node,
+                children: children.filter((child) => child.id !== nodeId),
+            },
+            removedNode,
+        };
+    }
+    const nextChildren = [];
+    let removedNode = null;
+    for (const child of children) {
+        if (removedNode) {
+            nextChildren.push(child);
+            continue;
+        }
+        const { node: nextChild, removedNode: nextRemovedNode } = removeNodeForMove({
+            node: child,
+            nodeId,
+        });
+        if (nextRemovedNode) {
+            removedNode = nextRemovedNode;
+        }
+        nextChildren.push(nextChild);
+    }
+    if (!removedNode) {
+        return { node, removedNode: null };
+    }
+    return {
+        node: {
+            ...node,
+            children: nextChildren,
+        },
+        removedNode,
+    };
+}
+export function canAcceptChild(args) {
+    const { parentType, childType, componentMeta } = args;
+    const meta = componentMeta[parentType];
+    if (!meta)
+        return false;
+    return meta.allowedChildren.includes(childType);
+}
+export function validateNodePlacement(args) {
+    const { root, placement, childType, componentMeta } = args;
+    const parent = findNodeById(root, placement.parentId);
+    if (!parent) {
+        return {
+            ok: false,
+            reason: {
+                code: 'missing-parent',
+                message: `Parent node ${placement.parentId} was not found.`,
+            },
+        };
+    }
+    if (!canAcceptChild({ parentType: parent.type, childType, componentMeta })) {
+        return {
+            ok: false,
+            reason: {
+                code: 'child-not-allowed',
+                message: `Parent ${parent.type} does not allow ${childType} children.`,
+            },
+        };
+    }
+    const children = parent.children ?? [];
+    if (placement.referenceId) {
+        const hasReference = children.some((child) => child.id === placement.referenceId);
+        if (!hasReference) {
+            return {
+                ok: false,
+                reason: {
+                    code: 'missing-target',
+                    message: `Reference node ${placement.referenceId} was not found under ${parent.id}.`,
+                },
+            };
+        }
+    }
+    if (placement.index < 0 || placement.index > children.length) {
+        return {
+            ok: false,
+            reason: {
+                code: 'invalid-index',
+                message: `Index ${placement.index} is out of bounds for ${parent.id}.`,
+            },
+        };
+    }
+    return { ok: true };
+}
+export function resolveInsertPlacement(args) {
+    const { root, targetNodeId, childType, componentMeta, kind } = args;
+    const target = findNodeWithParent(root, targetNodeId);
+    if (!target) {
+        return {
+            ok: false,
+            reason: {
+                code: 'missing-target',
+                message: `Target node ${targetNodeId} was not found.`,
+            },
+        };
+    }
+    if (kind === 'inside') {
+        const parent = target.node;
+        const children = parent.children ?? [];
+        const placement = {
+            parentId: parent.id,
+            index: children.length,
+            kind,
+        };
+        const validation = validateNodePlacement({ root, placement, childType, componentMeta });
+        if (!validation.ok) {
+            return validation;
+        }
+        return { ok: true, placement };
+    }
+    const { parent } = target;
+    if (!parent) {
+        return {
+            ok: false,
+            reason: {
+                code: 'missing-parent',
+                message: `Target node ${targetNodeId} has no parent.`,
+            },
+        };
+    }
+    const index = kind === 'before' ? target.index : target.index + 1;
+    const placement = {
+        parentId: parent.id,
+        index,
+        kind,
+        referenceId: target.node.id,
+    };
+    const validation = validateNodePlacement({ root, placement, childType, componentMeta });
+    if (!validation.ok) {
+        return validation;
+    }
+    return { ok: true, placement };
+}
+export function resolveDefaultInsertPlacement(args) {
+    const { root, selectedNodeId, childType, componentMeta } = args;
+    if (selectedNodeId) {
+        const inside = resolveInsertPlacement({
+            root,
+            targetNodeId: selectedNodeId,
+            childType,
+            componentMeta,
+            kind: 'inside',
+        });
+        if (inside.ok)
+            return inside;
+        const after = resolveInsertPlacement({
+            root,
+            targetNodeId: selectedNodeId,
+            childType,
+            componentMeta,
+            kind: 'after',
+        });
+        if (after.ok)
+            return after;
+    }
+    const atRoot = resolveInsertPlacement({
+        root,
+        targetNodeId: root.id,
+        childType,
+        componentMeta,
+        kind: 'inside',
+    });
+    if (atRoot.ok)
+        return atRoot;
+    return {
+        ok: false,
+        reason: {
+            code: 'no-valid-target',
+            message: `No valid insertion target found for ${childType}.`,
+        },
+    };
+}
+function insertChildAtIndex(args) {
+    const { node, parentId, index, newNode } = args;
+    if (node.id === parentId) {
+        const children = node.children ?? [];
+        if (index < 0 || index > children.length) {
+            return { node, inserted: false };
+        }
+        const nextChildren = [...children.slice(0, index), newNode, ...children.slice(index)];
+        return {
+            node: {
+                ...node,
+                children: nextChildren,
+            },
+            inserted: true,
+        };
+    }
+    if (!node.children || node.children.length === 0) {
+        return { node, inserted: false };
+    }
+    const results = node.children.map((child) => insertChildAtIndex({ node: child, parentId, index, newNode }));
+    const inserted = results.some((result) => result.inserted);
+    if (!inserted) {
+        return { node, inserted: false };
+    }
+    return {
+        node: {
+            ...node,
+            children: results.map((result) => result.node),
+        },
+        inserted: true,
+    };
+}
+export function insertNodeAtPlacement(args) {
+    const { root, placement, componentMeta, makeNode } = args;
+    const newNode = makeNode();
+    const validation = validateNodePlacement({
+        root,
+        placement,
+        childType: newNode.type,
+        componentMeta,
+    });
+    if (!validation.ok) {
+        return null;
+    }
+    const result = insertChildAtIndex({
+        node: root,
+        parentId: placement.parentId,
+        index: placement.index,
+        newNode,
+    });
+    if (!result.inserted)
+        return null;
+    return { root: result.node, insertedNodeId: newNode.id };
+}
+function getAdjustedMovePlacement(args) {
+    const { source, placement } = args;
+    if (!source.parent) {
+        return null;
+    }
+    if (placement.referenceId === source.node.id) {
+        return null;
+    }
+    const sourceParentId = source.parent.id;
+    if (placement.parentId !== sourceParentId) {
+        return placement;
+    }
+    const adjustedIndex = source.index < placement.index ? placement.index - 1 : placement.index;
+    if (adjustedIndex === source.index) {
+        return null;
+    }
+    return {
+        ...placement,
+        index: adjustedIndex,
+    };
+}
+export function moveNodeToPlacement(args) {
+    const { root, nodeId, placement, componentMeta } = args;
+    const source = findNodeWithParent(root, nodeId);
+    if (!source) {
+        return null;
+    }
+    if (!source.parent) {
+        return null;
+    }
+    if (placement.parentId === nodeId) {
+        return null;
+    }
+    if (isDescendantNode(source.node, placement.parentId)) {
+        return null;
+    }
+    const adjustedPlacement = getAdjustedMovePlacement({ source, placement });
+    if (!adjustedPlacement) {
+        return null;
+    }
+    const removed = removeNodeForMove({ node: root, nodeId });
+    if (!removed.removedNode) {
+        return null;
+    }
+    const validation = validateNodePlacement({
+        root: removed.node,
+        placement: adjustedPlacement,
+        childType: removed.removedNode.type,
+        componentMeta,
+    });
+    if (!validation.ok) {
+        return null;
+    }
+    const inserted = insertChildAtIndex({
+        node: removed.node,
+        parentId: adjustedPlacement.parentId,
+        index: adjustedPlacement.index,
+        newNode: removed.removedNode,
+    });
+    if (!inserted.inserted) {
+        return null;
+    }
+    return {
+        root: inserted.node,
+        movedNodeId: removed.removedNode.id,
+    };
+}
+const CATEGORY_LABELS = {
+    layout: 'Layouts',
+    pattern: 'Patterns',
+    component: 'Components',
+    foundation: 'Foundation',
+    recipe: 'Recipes',
+};
+const CATEGORY_ORDER = ['layout', 'pattern', 'component', 'foundation', 'recipe'];
+export const STUDIO_INSERT_RECIPES = [
+    {
+        id: 'screen-section',
+        label: 'Screen section',
+        description: 'A screen section with a starter heading.',
+        category: 'recipe',
+        root: {
+            type: 'ScreenSection',
+            children: [{ type: 'Heading' }],
+        },
+    },
+    {
+        id: 'panel-stack',
+        label: 'Panel stack',
+        description: 'Panel with a stack starter.',
+        category: 'recipe',
+        root: {
+            type: 'Panel',
+            children: [{ type: 'Stack' }],
+        },
+    },
+    {
+        id: 'card-heading',
+        label: 'Card heading',
+        description: 'Card with a headline.',
+        category: 'recipe',
+        root: {
+            type: 'Card',
+            children: [{ type: 'Heading' }],
+        },
+    },
+];
+export function getInsertCatalogCategoryLabel(category) {
+    return CATEGORY_LABELS[category] ?? category;
+}
+function resolveCategoryOrder(category) {
+    const index = CATEGORY_ORDER.indexOf(category);
+    return index === -1 ? CATEGORY_ORDER.length : index;
+}
+function describeInsertRecipeIssue(issue) {
+    if (issue.code === 'missing-meta') {
+        return `Missing component metadata for ${issue.nodeType}.`;
+    }
+    return `Child ${issue.childType ?? 'unknown'} is not allowed under ${issue.nodeType}.`;
+}
+export function validateInsertRecipe(recipe, componentMeta) {
+    const visit = (node, path) => {
+        const meta = componentMeta[node.type];
+        if (!meta) {
+            return {
+                code: 'missing-meta',
+                path,
+                nodeType: node.type,
+            };
+        }
+        const children = node.children ?? [];
+        for (const child of children) {
+            if (!meta.allowedChildren.includes(child.type)) {
+                return {
+                    code: 'child-not-allowed',
+                    path,
+                    nodeType: node.type,
+                    childType: child.type,
+                };
+            }
+            const nested = visit(child, [...path, child.type]);
+            if (nested) {
+                return nested;
+            }
+        }
+        return null;
+    };
+    return visit(recipe.root, [recipe.root.type]);
+}
+function createNodeFromRecipe(recipe, componentMeta, createId) {
+    const buildNode = (node) => {
+        const meta = componentMeta[node.type];
+        const defaultProps = meta?.blueprint?.defaultProps;
+        return {
+            id: createId(node.type),
+            type: node.type,
+            props: defaultProps ? { ...defaultProps } : {},
+            children: (node.children ?? []).map(buildNode),
+        };
+    };
+    return buildNode(recipe.root);
+}
+export function createNodeFromCatalogEntry(entry, componentMeta, createId = generateStudioId) {
+    if (entry.kind === 'recipe') {
+        return createNodeFromRecipe(entry.recipe, componentMeta, createId);
+    }
+    const meta = componentMeta[entry.componentType];
+    const defaultProps = meta?.blueprint?.defaultProps;
+    return {
+        id: createId(entry.componentType),
+        type: entry.componentType,
+        props: defaultProps ? { ...defaultProps } : {},
+        children: [],
+    };
+}
+function createComponentEntry(componentType, meta) {
+    const isDirect = meta.directManifestNode === true;
+    return {
+        id: `component:${componentType}`,
+        label: meta.blueprint?.label ?? componentType,
+        category: meta.category,
+        rootType: componentType,
+        kind: 'component',
+        componentType,
+        status: isDirect ? 'enabled' : 'disabled',
+        disabledReason: isDirect
+            ? undefined
+            : {
+                code: 'not-direct',
+                detail: 'Not a direct manifest node.',
+            },
+    };
+}
+function createRecipeEntry(recipe, componentMeta) {
+    const issue = validateInsertRecipe(recipe, componentMeta);
+    if (issue) {
+        const code = issue.code === 'missing-meta' ? 'missing-meta' : 'invalid-recipe';
+        return {
+            id: `recipe:${recipe.id}`,
+            label: recipe.label,
+            description: recipe.description,
+            category: 'recipe',
+            rootType: recipe.root.type,
+            kind: 'recipe',
+            recipe,
+            status: 'disabled',
+            disabledReason: {
+                code,
+                detail: describeInsertRecipeIssue(issue),
+                issue,
+            },
+        };
+    }
+    return {
+        id: `recipe:${recipe.id}`,
+        label: recipe.label,
+        description: recipe.description,
+        category: 'recipe',
+        rootType: recipe.root.type,
+        kind: 'recipe',
+        recipe,
+        status: 'enabled',
+    };
+}
+export function buildInsertCatalogEntries(args) {
+    const { componentMeta, recipes = STUDIO_INSERT_RECIPES } = args;
+    const componentEntries = [];
+    for (const [type, meta] of Object.entries(componentMeta)) {
+        if (meta) {
+            componentEntries.push(createComponentEntry(type, meta));
+        }
+    }
+    const recipeEntries = recipes.map((recipe) => createRecipeEntry(recipe, componentMeta));
+    return [...componentEntries, ...recipeEntries].sort((left, right) => {
+        const leftOrder = resolveCategoryOrder(left.category);
+        const rightOrder = resolveCategoryOrder(right.category);
+        if (leftOrder !== rightOrder) {
+            return leftOrder - rightOrder;
+        }
+        return left.label.localeCompare(right.label);
+    });
+}
+function resolvePlacementForEntry(args) {
+    const { entry, root, selectedNodeId, componentMeta } = args;
+    return resolveDefaultInsertPlacement({
+        root,
+        selectedNodeId,
+        childType: entry.rootType,
+        componentMeta,
+    });
+}
+export function resolveInsertCatalogEntries(args) {
+    const { entries, root, selectedNodeId, componentMeta } = args;
+    return entries.map((entry) => {
+        if (entry.status === 'disabled') {
+            return entry;
+        }
+        if (!root) {
+            return {
+                ...entry,
+                status: 'disabled',
+                disabledReason: {
+                    code: 'no-placement',
+                    detail: 'No active screen available.',
+                },
+            };
+        }
+        const placement = resolvePlacementForEntry({
+            entry,
+            root,
+            selectedNodeId,
+            componentMeta,
+        });
+        if (!placement.ok) {
+            return {
+                ...entry,
+                status: 'disabled',
+                disabledReason: {
+                    code: 'no-placement',
+                    detail: placement.reason.message,
+                },
+            };
+        }
+        return {
+            ...entry,
+            status: 'enabled',
+            placement: placement.placement,
+        };
+    });
+}
+function isStyleRecord(value) {
+    if (typeof value !== 'object' || value === null || Array.isArray(value))
+        return false;
+    return Object.values(value).every((entry) => typeof entry === 'string' || typeof entry === 'number');
+}
 //# sourceMappingURL=index.js.map