@versa-stack/v-craft 1.1.0-alpha.1 → 1.1.0-alpha.3

package/dist/types/components/index.d.ts

@@ -8,9 +8,11 @@ import { default as CraftEditorPanelBlueprints } from './CraftEditorPanelBluepri
 import { default as CraftEditorPanelForm } from './CraftEditorPanelForm.vue';
 import { default as CraftEditorPanelLayers } from './CraftEditorPanelLayers.vue';
 import { default as CraftEditorPanelLayout } from './CraftEditorPanelLayout.vue';
+import { default as CraftEditorPanelNodeDataSourceSettings } from './CraftEditorPanelNodeDataSourceSettings.vue';
 import { default as CraftEditorPanelNodeEventsSettings } from './CraftEditorPanelNodeEventsSettings.vue';
 import { default as CraftEditorPanelNodeLayer } from './CraftEditorPanelNodeLayer.vue';
 import { default as CraftEditorPanelNodeSettings } from './CraftEditorPanelNodeSettings.vue';
+import { default as CraftEditorPanelNodeSlotPropsSettings } from './CraftEditorPanelNodeSlotPropsSettings.vue';
 import { default as CraftEditorPanelSettings } from './CraftEditorPanelSettings.vue';
 import { default as CraftFrame } from './CraftFrame.vue';
 import { default as CraftNodeEditor } from './CraftNodeEditor.vue';
@@ -18,7 +20,7 @@ import { default as CraftNodeViewer } from './CraftNodeViewer.vue';
 import { default as CraftIframe } from './CraftIframe.vue';
 import { default as CraftStaticRenderer } from './CraftStaticRenderer.vue';
 import * as Utils from "./utils";
-export { CraftCanvas, CraftComponentSimpleText, CraftEditor, CraftEditorBlueprint, CraftEditorBlueprintsList, CraftEditorPanelBlueprints, CraftEditorPanelForm, CraftEditorPanelLayers, CraftEditorPanelLayout, CraftEditorPanelNodeEventsSettings, CraftEditorPanelNodeLayer, CraftEditorPanelNodeSettings, CraftEditorPanelSettings, CraftFrame, CraftIframe, CraftNodeEditor, CraftNodeViewer, CraftStaticRenderer, Utils, };
+export { CraftCanvas, CraftComponentSimpleText, CraftEditor, CraftEditorBlueprint, CraftEditorBlueprintsList, CraftEditorPanelBlueprints, CraftEditorPanelForm, CraftEditorPanelLayers, CraftEditorPanelLayout, CraftEditorPanelNodeDataSourceSettings, CraftEditorPanelNodeEventsSettings, CraftEditorPanelNodeLayer, CraftEditorPanelNodeSettings, CraftEditorPanelNodeSlotPropsSettings, CraftEditorPanelSettings, CraftFrame, CraftIframe, CraftNodeEditor, CraftNodeViewer, CraftStaticRenderer, Utils, };
 export type CraftDataListItem = {
     dataItem: any;
     dataIndex: number;

package/dist/types/components/utils.d.ts

@@ -5,6 +5,7 @@ import { FormKitSchemaDefinition } from '@formkit/core';
 export declare const blueprintsWithDefaults: <T extends FormKitSchemaDefinition>(group: BlueprintGroup, resolver: CraftNodeResolver<T>) => {
     props: any;
     slots: Record<string, CraftNode[]> & Record<string, import('../lib/model').Blueprint[]>;
+    slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
     componentName: string;
     rules?: import('../lib/craftNode').CraftNodeRules | undefined;
     visible?: boolean | undefined;

package/dist/types/lib/CraftNodeResolver.d.ts

@@ -10,6 +10,7 @@ export type CraftNodeComponentMap<T extends FormKitSchemaDefinition = FormKitSch
     defaultProps?: Record<string, any>;
     rules?: CraftNodeRules;
     slots?: string[];
+    slotsProps?: Record<string, string[]>;
 };
 export type CraftNodeResolverMap<T extends FormKitSchemaDefinition = FormKitSchemaDefinition> = Record<string, CraftNodeComponentMap<T>>;
 export type ResolveComponentHook = (craftNode: CraftNode, defaultResolver: (name: string) => Component | undefined) => Component | undefined;
@@ -26,5 +27,6 @@ export declare class CraftNodeResolver<T extends FormKitSchemaDefinition = FormK
     getSchema(craftNode: CraftNode): T;
     getEventsSchema(craftNode: CraftNode): T;
     getRules(craftNode: CraftNode): CraftNodeRules;
+    getSlotsProps(craftNode: CraftNode): Record<string, string[]>;
 }
 export default CraftNodeResolver;

package/dist/types/lib/craftNode.d.ts

@@ -8,6 +8,7 @@ export type CraftNodeRules = {
 };
 export type CraftNode = {
     slots: Record<string, CraftNode[]>;
+    slotsPropsPropsMap?: Record<string, Record<string, string>>;
     componentName: string;
     parentUuid?: string | null;
     props: any;

package/dist/types/lib/extractSchemaFieldNames.d.ts

@@ -0,0 +1,11 @@
+import { FormKitSchemaDefinition } from '@formkit/core';
+export type SchemaFieldOption = {
+    value: string;
+    label: string;
+};
+/**
+ * Reads the flat `propsSchema`/`eventsSchema` array shape used throughout
+ * this project's resolvers (each entry a FormKit node carrying `name` and
+ * an optional `label`) and turns it into options for a target-prop picker.
+ */
+export declare const extractSchemaFieldNames: (schema: FormKitSchemaDefinition | undefined | null) => SchemaFieldOption[];

package/dist/types/store/editor.d.ts

@@ -13,11 +13,16 @@ export interface EditorState {
     eventsContext: Record<string, any>;
     nodeDataMap: Record<string, CraftNodeDatasource | null>;
     draggingDisabled: boolean;
+    /** Live runtime props written by event handlers or captured from value-bearing nodes, by uuid. */
+    nodeRuntimeProps: Record<string, Record<string, any>>;
+    /** Page-scoped bag shared across event handlers, e.g. a pending flag. */
+    pageState: Record<string, any>;
 }
 export declare const useEditor: import('pinia').StoreDefinition<"editor", EditorState, {
     hasNodes: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -36,6 +41,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -63,14 +69,18 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => boolean;
     selectedNode: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -89,6 +99,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -116,14 +127,18 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => CraftNode | null;
     selectedRef: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -142,6 +157,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -169,14 +185,18 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => HTMLElement | null;
     getRef: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -195,6 +215,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -222,14 +243,18 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => (uuid: string) => HTMLElement;
     allNodes: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -248,6 +273,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -275,14 +301,18 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => CraftNode[];
     getDraggedNode: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -301,6 +331,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -328,12 +359,16 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => {
         slots: Record<string, CraftNode[]>;
+        slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
         componentName: string;
         parentUuid?: string | null | undefined;
         props: any;
@@ -351,6 +386,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
     nodeTree: (state: {
         nodeMap: Map<string, {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -369,6 +405,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
         selectedUuid: string | null;
         draggedNode: {
             slots: Record<string, CraftNode[]>;
+            slotsPropsPropsMap?: Record<string, Record<string, string>> | undefined;
             componentName: string;
             parentUuid?: string | null | undefined;
             props: any;
@@ -396,10 +433,13 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
             getSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getEventsSchema: (craftNode: CraftNode) => FormKitSchemaDefinition;
             getRules: (craftNode: CraftNode) => import('../lib/craftNode').CraftNodeRules;
+            getSlotsProps: (craftNode: CraftNode) => Record<string, string[]>;
         } | null;
         eventsContext: Record<string, any>;
         nodeDataMap: Record<string, CraftNodeDatasource | null>;
         draggingDisabled: boolean;
+        nodeRuntimeProps: Record<string, Record<string, any>>;
+        pageState: Record<string, any>;
     } & import('pinia').PiniaCustomStateProperties<EditorState>) => CraftNode[];
 }, {
     clear(): void;
@@ -413,6 +453,7 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
     setNodeData(uuid: string, data: CraftNodeDatasource | null): void;
     updateNodeProps(nodeUuid: string, newProps: Record<string, any>): void;
     updateNodeEvents(nodeUuid: string, newEvents: Record<string, string>): void;
+    updateNodeSlotsPropsPropsMap(nodeUuid: string, slotsPropsPropsMap: Record<string, Record<string, string>>): void;
     setNodes(nodes: CraftNode[]): void;
     addNodeRecursively(node: CraftNode, parentUuid?: string | null): void;
     selectNode(craftNode: CraftNode | null): void;
@@ -425,4 +466,5 @@ export declare const useEditor: import('pinia').StoreDefinition<"editor", Editor
     insertNodeBefore(node: CraftNode, targetNode: CraftNode, slotName?: string): void;
     insertNodeAfter(node: CraftNode, targetNode: CraftNode, slotName?: string): void;
     setEventsContext(context: Record<string, any>): void;
+    setNodeRuntimeProps(uuid: string, patch: Record<string, any>): void;
 }>;

package/dist/v-craft.css

@@ -1 +1 @@
-.pre-wrap{white-space:pre-wrap}.editable-text.is-editable:hover{background-color:#0000000d;cursor:pointer}.editable-text.is-editing{display:inline-block;width:100%}.editable-text__textarea{font:inherit;border:none;background:none;outline:none;width:100%;resize:none;overflow:hidden;min-height:1em;line-height:inherit;padding:.12em;margin:0}.editable-text__textarea:focus{border:none}.v-craft-blueprints-panel[data-v-a6de4dca]{min-width:15em;max-width:15em;width:15em}.v-craft-blueprints-panel[data-v-a6de4dca] .v-craft-blueprint{text-align:center;padding:.25em;position:relative;border:1px solid var(--v-craft-gray-medium);border-radius:3px;display:flex;align-items:center;cursor:pointer;background-color:var(--v-craft-background-color-lighter-10)}.v-craft-blueprints-panel[data-v-a6de4dca] .v-craft-blueprint-label{font-size:.8em;text-transform:uppercase;font-weight:700;color:var(--v-craft-gray-darker)}.v-craft-blueprints-panel h4[data-v-a6de4dca]{font-size:.8em;text-transform:uppercase;font-weight:700;color:var(--v-craft-gray-medium);margin-bottom:.75em;margin-top:2em}.v-craft-panel.v-craft-layers-panel[data-v-ab795ec3]{padding:10px;display:flex;flex-direction:column;height:auto;position:relative;width:23rem}.v-craft-layers[data-v-ab795ec3]{overflow-y:auto}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar{width:8px}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-track{background:var(--v-craft-scrollbar-track)}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-thumb{background:var(--v-craft-scrollbar-thumb);border-radius:4px}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-thumb:hover{background:var(--v-craft-scrollbar-thumb-hover)}.v-craft-layers[data-v-ab795ec3]{max-height:300px;overflow-y:auto;margin-top:10px}ul.v-craft-node-layers[data-v-ab795ec3]{margin:0;padding:0;list-style-type:none}.v-craft-panel-manager .v-craft-panel[data-v-81a2200d]{padding:.75em;margin-bottom:1.25em;box-shadow:0 2px 2px #00000009,0 4px 4px #0000000c,0 6px 6px #0000000f,0 8px 8px #00000012,0 10px 10px #00000016,0 15px 15px #0000001f;border-radius:3px}.v-craft-panel-manager[data-v-81a2200d] .v-craft-panel .v-craft-title{margin:0;padding:.125em;border-bottom:1px solid var(--v-craft-gray-medium)}.v-craft-node-layer[data-v-208a4e02]{padding:5px 0;border-bottom:1px solid var(--v-craft-gray-dark);list-style-type:none}.v-craft-node-layer.v-craft-node-layer-selected>.v-craft-component-layer-face[data-v-208a4e02]{background-color:var(--v-craft-blue-lighter-5)}.v-craft-node-layer.v-craft-node-layer-selected>.v-craft-component-layer-face[data-v-208a4e02]:hover{background-color:var(--v-craft-blue-lighter-15)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face{display:flex;align-items:center;padding:2px 5px;background-color:var(--v-craft-gray-medium);border-radius:3px;transition:background-color .2s ease;position:relative}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face:before{position:absolute;background-color:var(--v-craft-gray-medium);width:.5em;height:1px;top:50%;left:-.5em;content:" "}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face:hover{background-color:var(--v-craft-gray-medium-lighter-15)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-name{flex-grow:1;font-size:12px;cursor:pointer}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon{font-size:12px;cursor:pointer;margin-left:5px;transition:color .2s ease}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon:hover{color:var(--v-craft-blue)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon{border:none;padding:.12em}.v-craft-node-layer[data-v-208a4e02] .nested-layers{margin-left:15px;border-left:1px solid var(--v-craft-gray-medium);padding-left:5px}:root{--v-craft-indicator-bg-allowed: var(--v-craft-green);--v-craft-indicator-bg-forbidden: var(--v-craft-red);--v-craft-indicator-transition-duration: .125s;--v-craft-indicator-z-index: 10000}.v-craft-indicator{position:fixed;background-color:var(--v-craft-indicator-bg-allowed);transition:top var(--v-craft-indicator-transition-duration) ease,left var(--v-craft-indicator-transition-duration) ease,right var(--v-craft-indicator-transition-duration) ease,bottom var(--v-craft-indicator-transition-duration) ease,width var(--v-craft-indicator-transition-duration) ease,height var(--v-craft-indicator-transition-duration) ease,background-color var(--v-craft-indicator-transition-duration) ease-in-out;z-index:var(--v-craft-indicator-z-index)}.v-craft-indicator:after{content:" "}.v-craft-indicator.v-craft-forbidden{background-color:var(--v-craft-indicator-bg-forbidden)}.v-craft-node{position:relative;transition:all var(--v-craft-transition-duration) ease;cursor:pointer;box-sizing:border-box}.v-craft-node:after{content:"";position:absolute;top:calc(-1 * var(--v-craft-node-editor-border-padding));left:calc(-1 * var(--v-craft-node-editor-border-padding));right:calc(-1 * var(--v-craft-node-editor-border-padding));bottom:calc(-1 * var(--v-craft-node-editor-border-padding));border:1px solid transparent;border-radius:4px;transition:border-color var(--v-craft-transition-duration) ease-in-out,box-shadow var(--v-craft-transition-duration) ease-in-out;pointer-events:none;z-index:10}.v-craft-node:before{content:"";align-items:center;background-color:var(--node-color, var(--v-craft-blue));bottom:calc(-20px - var(--v-craft-node-editor-border-padding));color:var(--v-craft-white);display:flex;font-family:Arial,sans-serif;font-size:12px;font-weight:400;height:20px;left:calc(-1 * var(--v-craft-node-editor-border-padding) + 3px);line-height:1.4em;opacity:0;padding:0 5px!important;pointer-events:none;position:absolute;text-align:center;text-transform:none;transition:opacity var(--v-craft-transition-duration) ease-in-out;z-index:100}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged:before{opacity:.5}.v-craft-node:hover:not(:has(.v-craft-node:hover)):not(.v-craft-node-selected):before{opacity:1}.v-craft-node-selected:before{opacity:1}.v-craft-node:hover:not(:has(.v-craft-node:hover)):after{border-color:var(--node-color, var(--v-craft-blue-lighter-20));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.dark .v-craft-node:hover:not(:has(.v-craft-node:hover)):after{border-color:var(--node-color, var(--v-craft-blue-darker-25));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas:hover:not(:has(.v-craft-node:hover)):not(.v-craft-node-selected):after{box-shadow:0 0 .5em .1em rgba(var(--node-color),.2)}.v-craft-node-selected:not(:hover):after{border:1px solid var(--node-color, var(--v-craft-blue));box-shadow:0 0 .5em .1em rgba(var(--node-color),.2)}.v-craft-node-selected:after{border:1px solid var(--node-color, var(--v-craft-blue));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged:after{border:2px dashed var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas .v-craft-drop-text{border:2px dashed var(--v-craft-gray-medium);color:var(--v-craft-text-color);padding:1.25em;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;min-height:60px;box-sizing:border-box;pointer-events:auto;position:relative;margin:4px 0}.v-craft-node.v-craft-canvas .v-craft-slot-name{position:absolute;bottom:4px;left:8px;font-weight:400;font-size:.75em;color:var(--v-craft-gray-medium);text-transform:uppercase;letter-spacing:.05em}.v-craft-node.v-craft-canvas .v-craft-drop-text-label{font-size:.85em;color:var(--v-craft-gray-medium)}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged{padding:10px!important;margin-bottom:25px!important}.v-craft-node-selected{z-index:1}.v-craft-node.v-craft-drag-over{box-shadow:0 0 0 2px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-dragging{opacity:.7}.v-craft-node:before{content:attr(data-node-name)}:root{--v-craft-blue: #1473e6;--v-craft-red: #ff3366;--v-craft-green: rgb(15, 177, 88);--v-craft-gray-dark: #f8f8f8;--v-craft-gray-medium: rgb(202.5, 202.5, 202.5);--v-craft-gray-light: rgb(167.5, 167.5, 167.5);--v-craft-gray-darkest: hsl(0, 0%, 101.7647058824%);--v-craft-white: #ffffff;--v-craft-background-color: hsl(0, 0%, 106.7647058824%);--v-craft-background-color-lighter-10: #ffffff;--v-craft-background-color-darker-10: hsl(0, 0%, 101.7647058824%);--v-craft-input-background: hsl(0, 0%, 109.7647058824%);--v-craft-input-border: #eaeaea;--v-craft-text-color: rgb(55.5, 55.5, 55.5);--v-craft-text-color-blue: #e0e0e0;--v-craft-error-color: #ff3366;--v-craft-blue-darker-25: rgb(9.8, 56.35, 112.7);--v-craft-blue-darker-30: rgb(7.76, 44.62, 89.24);--v-craft-blue-lighter-5: rgb(39.26, 128.37, 236.24);--v-craft-blue-lighter-10: rgb(62.72, 142.14, 238.28);--v-craft-blue-lighter-15: rgb(86.18, 155.91, 240.32);--v-craft-blue-lighter-20: rgb(109.64, 169.68, 242.36);--v-craft-blue-transparent-70: rgba(20, 115, 230, .7);--v-craft-blue-transparent-20: rgba(20, 115, 230, .2);--v-craft-gray-dark-darker-10: rgb(222.5, 222.5, 222.5);--v-craft-gray-dark-darker-5: rgb(235.25, 235.25, 235.25);--v-craft-gray-dark-lighter-10: hsl(0, 0%, 107.2549019608%);--v-craft-gray-dark-transparent-50: rgba(248, 248, 248, .5);--v-craft-gray-medium-darker-10: #b1b1b1;--v-craft-gray-medium-lighter-15: rgb(240.75, 240.75, 240.75);--v-craft-transition-duration: .3s;--v-craft-node-editor-border-padding: .2rem}html.dark{--v-craft-blue: #1473e6;--v-craft-red: #ff3366;--v-craft-green: rgb(15, 177, 88);--v-craft-gray-dark: #2c2c2c;--v-craft-gray-medium: #4b4b4b;--v-craft-gray-light: #8e8e8e;--v-craft-gray-darkest: #1e1e1e;--v-craft-white: #ffffff;--v-craft-background-color: #1e1e1e;--v-craft-background-color-lighter-10: rgb(55.5, 55.5, 55.5);--v-craft-background-color-darker-10: rgb(4.5, 4.5, 4.5);--v-craft-input-background: #2d2d2d;--v-craft-input-border: #3a3a3a;--v-craft-text-color: #e0e0e0;--v-craft-text-color-blue: #e0e0e0;--v-craft-error-color: #ff3366;--v-craft-blue-darker-25: rgb(9.8, 56.35, 112.7);--v-craft-blue-darker-30: rgb(7.76, 44.62, 89.24);--v-craft-blue-lighter-5: rgb(39.26, 128.37, 236.24);--v-craft-blue-lighter-10: rgb(62.72, 142.14, 238.28);--v-craft-blue-lighter-15: rgb(86.18, 155.91, 240.32);--v-craft-blue-lighter-20: rgb(109.64, 169.68, 242.36);--v-craft-blue-transparent-20: rgba(20, 115, 230, .2);--v-craft-blue-transparent-70: rgba(20, 115, 230, .7);--v-craft-gray-dark-darker-10: rgb(18.5, 18.5, 18.5);--v-craft-gray-dark-darker-5: rgb(31.25, 31.25, 31.25);--v-craft-gray-dark-lighter-10: rgb(69.5, 69.5, 69.5);--v-craft-gray-dark-transparent-50: rgba(44, 44, 44, .5);--v-craft-gray-medium-darker-10: rgb(49.5, 49.5, 49.5);--v-craft-gray-medium-lighter-15: rgb(113.25, 113.25, 113.25)}
+.pre-wrap{white-space:pre-wrap}.editable-text.is-editable:hover{background-color:#0000000d;cursor:pointer}.editable-text.is-editing{display:inline-block;width:100%}.editable-text__textarea{font:inherit;border:none;background:none;outline:none;width:100%;resize:none;overflow:hidden;min-height:1em;line-height:inherit;padding:.12em;margin:0}.editable-text__textarea:focus{border:none}.v-craft-blueprints-panel[data-v-a6de4dca]{min-width:15em;max-width:15em;width:15em}.v-craft-blueprints-panel[data-v-a6de4dca] .v-craft-blueprint{text-align:center;padding:.25em;position:relative;border:1px solid var(--v-craft-gray-medium);border-radius:3px;display:flex;align-items:center;cursor:pointer;background-color:var(--v-craft-background-color-lighter-10)}.v-craft-blueprints-panel[data-v-a6de4dca] .v-craft-blueprint-label{font-size:.8em;text-transform:uppercase;font-weight:700;color:var(--v-craft-gray-darker)}.v-craft-blueprints-panel h4[data-v-a6de4dca]{font-size:.8em;text-transform:uppercase;font-weight:700;color:var(--v-craft-gray-medium);margin-bottom:.75em;margin-top:2em}.v-craft-panel.v-craft-layers-panel[data-v-ab795ec3]{padding:10px;display:flex;flex-direction:column;height:auto;position:relative;width:23rem}.v-craft-layers[data-v-ab795ec3]{overflow-y:auto}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar{width:8px}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-track{background:var(--v-craft-scrollbar-track)}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-thumb{background:var(--v-craft-scrollbar-thumb);border-radius:4px}.v-craft-layers[data-v-ab795ec3]::-webkit-scrollbar-thumb:hover{background:var(--v-craft-scrollbar-thumb-hover)}.v-craft-layers[data-v-ab795ec3]{max-height:300px;overflow-y:auto;margin-top:10px}ul.v-craft-node-layers[data-v-ab795ec3]{margin:0;padding:0;list-style-type:none}.v-craft-panel-manager .v-craft-panel[data-v-7dd1d43b]{padding:.75em;margin-bottom:1.25em;box-shadow:0 2px 2px #00000009,0 4px 4px #0000000c,0 6px 6px #0000000f,0 8px 8px #00000012,0 10px 10px #00000016,0 15px 15px #0000001f;border-radius:3px}.v-craft-panel-manager[data-v-7dd1d43b] .v-craft-panel .v-craft-title{margin:0;padding:.125em;border-bottom:1px solid var(--v-craft-gray-medium)}.v-craft-data-source-error[data-v-7c1c5696]{color:var(--v-craft-red, #e5484d)}.v-craft-node-layer[data-v-208a4e02]{padding:5px 0;border-bottom:1px solid var(--v-craft-gray-dark);list-style-type:none}.v-craft-node-layer.v-craft-node-layer-selected>.v-craft-component-layer-face[data-v-208a4e02]{background-color:var(--v-craft-blue-lighter-5)}.v-craft-node-layer.v-craft-node-layer-selected>.v-craft-component-layer-face[data-v-208a4e02]:hover{background-color:var(--v-craft-blue-lighter-15)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face{display:flex;align-items:center;padding:2px 5px;background-color:var(--v-craft-gray-medium);border-radius:3px;transition:background-color .2s ease;position:relative}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face:before{position:absolute;background-color:var(--v-craft-gray-medium);width:.5em;height:1px;top:50%;left:-.5em;content:" "}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-layer-face:hover{background-color:var(--v-craft-gray-medium-lighter-15)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-name{flex-grow:1;font-size:12px;cursor:pointer}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon{font-size:12px;cursor:pointer;margin-left:5px;transition:color .2s ease}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon:hover{color:var(--v-craft-blue)}.v-craft-node-layer[data-v-208a4e02] .v-craft-component-icon{border:none;padding:.12em}.v-craft-node-layer[data-v-208a4e02] .nested-layers{margin-left:15px;border-left:1px solid var(--v-craft-gray-medium);padding-left:5px}.v-craft-slot-props-map-group[data-v-f762baf8]{border:1px solid var(--v-craft-gray-medium, #ccc);border-radius:4px;padding:.75em;margin-bottom:1em}.v-craft-slot-props-remove[data-v-f762baf8],.v-craft-slot-props-add[data-v-f762baf8]{width:100%;margin-top:.25em}:root{--v-craft-indicator-bg-allowed: var(--v-craft-green);--v-craft-indicator-bg-forbidden: var(--v-craft-red);--v-craft-indicator-transition-duration: .125s;--v-craft-indicator-z-index: 10000}.v-craft-indicator{position:fixed;background-color:var(--v-craft-indicator-bg-allowed);transition:top var(--v-craft-indicator-transition-duration) ease,left var(--v-craft-indicator-transition-duration) ease,right var(--v-craft-indicator-transition-duration) ease,bottom var(--v-craft-indicator-transition-duration) ease,width var(--v-craft-indicator-transition-duration) ease,height var(--v-craft-indicator-transition-duration) ease,background-color var(--v-craft-indicator-transition-duration) ease-in-out;z-index:var(--v-craft-indicator-z-index)}.v-craft-indicator:after{content:" "}.v-craft-indicator.v-craft-forbidden{background-color:var(--v-craft-indicator-bg-forbidden)}.v-craft-node{position:relative;transition:all var(--v-craft-transition-duration) ease;cursor:pointer;box-sizing:border-box}.v-craft-node:after{content:"";position:absolute;top:calc(-1 * var(--v-craft-node-editor-border-padding));left:calc(-1 * var(--v-craft-node-editor-border-padding));right:calc(-1 * var(--v-craft-node-editor-border-padding));bottom:calc(-1 * var(--v-craft-node-editor-border-padding));border:1px solid transparent;border-radius:4px;transition:border-color var(--v-craft-transition-duration) ease-in-out,box-shadow var(--v-craft-transition-duration) ease-in-out;pointer-events:none;z-index:10}.v-craft-node:before{content:"";align-items:center;background-color:var(--node-color, var(--v-craft-blue));bottom:calc(-20px - var(--v-craft-node-editor-border-padding));color:var(--v-craft-white);display:flex;font-family:Arial,sans-serif;font-size:12px;font-weight:400;height:20px;left:calc(-1 * var(--v-craft-node-editor-border-padding) + 3px);line-height:1.4em;opacity:0;padding:0 5px!important;pointer-events:none;position:absolute;text-align:center;text-transform:none;transition:opacity var(--v-craft-transition-duration) ease-in-out;z-index:100}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged:before{opacity:.5}.v-craft-node:hover:not(:has(.v-craft-node:hover)):not(.v-craft-node-selected):before{opacity:1}.v-craft-node-selected:before{opacity:1}.v-craft-node:hover:not(:has(.v-craft-node:hover)):after{border-color:var(--node-color, var(--v-craft-blue-lighter-20));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.dark .v-craft-node:hover:not(:has(.v-craft-node:hover)):after{border-color:var(--node-color, var(--v-craft-blue-darker-25));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas:hover:not(:has(.v-craft-node:hover)):not(.v-craft-node-selected):after{box-shadow:0 0 .5em .1em rgba(var(--node-color),.2)}.v-craft-node-selected:not(:hover):after{border:1px solid var(--node-color, var(--v-craft-blue));box-shadow:0 0 .5em .1em rgba(var(--node-color),.2)}.v-craft-node-selected:after{border:1px solid var(--node-color, var(--v-craft-blue));box-shadow:0 0 0 1px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged:after{border:2px dashed var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-canvas .v-craft-drop-text{border:2px dashed var(--v-craft-gray-medium);color:var(--v-craft-text-color);padding:1.25em;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;min-height:60px;box-sizing:border-box;pointer-events:auto;position:relative;margin:4px 0}.v-craft-node.v-craft-canvas .v-craft-slot-name{position:absolute;bottom:4px;left:8px;font-weight:400;font-size:.75em;color:var(--v-craft-gray-medium);text-transform:uppercase;letter-spacing:.05em}.v-craft-node.v-craft-canvas .v-craft-drop-text-label{font-size:.85em;color:var(--v-craft-gray-medium)}.v-craft-node.v-craft-canvas.v-craft-other-node-dragged{padding:10px!important;margin-bottom:25px!important}.v-craft-node-selected{z-index:1}.v-craft-node.v-craft-drag-over{box-shadow:0 0 0 2px var(--node-color, var(--v-craft-blue))}.v-craft-node.v-craft-dragging{opacity:.7}.v-craft-node:before{content:attr(data-node-name)}:root{--v-craft-blue: #1473e6;--v-craft-red: #ff3366;--v-craft-green: rgb(15, 177, 88);--v-craft-gray-dark: #f8f8f8;--v-craft-gray-medium: rgb(202.5, 202.5, 202.5);--v-craft-gray-light: rgb(167.5, 167.5, 167.5);--v-craft-gray-darkest: hsl(0, 0%, 101.7647058824%);--v-craft-white: #ffffff;--v-craft-background-color: hsl(0, 0%, 106.7647058824%);--v-craft-background-color-lighter-10: #ffffff;--v-craft-background-color-darker-10: hsl(0, 0%, 101.7647058824%);--v-craft-input-background: hsl(0, 0%, 109.7647058824%);--v-craft-input-border: #eaeaea;--v-craft-text-color: rgb(55.5, 55.5, 55.5);--v-craft-text-color-blue: #e0e0e0;--v-craft-error-color: #ff3366;--v-craft-blue-darker-25: rgb(9.8, 56.35, 112.7);--v-craft-blue-darker-30: rgb(7.76, 44.62, 89.24);--v-craft-blue-lighter-5: rgb(39.26, 128.37, 236.24);--v-craft-blue-lighter-10: rgb(62.72, 142.14, 238.28);--v-craft-blue-lighter-15: rgb(86.18, 155.91, 240.32);--v-craft-blue-lighter-20: rgb(109.64, 169.68, 242.36);--v-craft-blue-transparent-70: rgba(20, 115, 230, .7);--v-craft-blue-transparent-20: rgba(20, 115, 230, .2);--v-craft-gray-dark-darker-10: rgb(222.5, 222.5, 222.5);--v-craft-gray-dark-darker-5: rgb(235.25, 235.25, 235.25);--v-craft-gray-dark-lighter-10: hsl(0, 0%, 107.2549019608%);--v-craft-gray-dark-transparent-50: rgba(248, 248, 248, .5);--v-craft-gray-medium-darker-10: #b1b1b1;--v-craft-gray-medium-lighter-15: rgb(240.75, 240.75, 240.75);--v-craft-transition-duration: .3s;--v-craft-node-editor-border-padding: .2rem}html.dark{--v-craft-blue: #1473e6;--v-craft-red: #ff3366;--v-craft-green: rgb(15, 177, 88);--v-craft-gray-dark: #2c2c2c;--v-craft-gray-medium: #4b4b4b;--v-craft-gray-light: #8e8e8e;--v-craft-gray-darkest: #1e1e1e;--v-craft-white: #ffffff;--v-craft-background-color: #1e1e1e;--v-craft-background-color-lighter-10: rgb(55.5, 55.5, 55.5);--v-craft-background-color-darker-10: rgb(4.5, 4.5, 4.5);--v-craft-input-background: #2d2d2d;--v-craft-input-border: #3a3a3a;--v-craft-text-color: #e0e0e0;--v-craft-text-color-blue: #e0e0e0;--v-craft-error-color: #ff3366;--v-craft-blue-darker-25: rgb(9.8, 56.35, 112.7);--v-craft-blue-darker-30: rgb(7.76, 44.62, 89.24);--v-craft-blue-lighter-5: rgb(39.26, 128.37, 236.24);--v-craft-blue-lighter-10: rgb(62.72, 142.14, 238.28);--v-craft-blue-lighter-15: rgb(86.18, 155.91, 240.32);--v-craft-blue-lighter-20: rgb(109.64, 169.68, 242.36);--v-craft-blue-transparent-20: rgba(20, 115, 230, .2);--v-craft-blue-transparent-70: rgba(20, 115, 230, .7);--v-craft-gray-dark-darker-10: rgb(18.5, 18.5, 18.5);--v-craft-gray-dark-darker-5: rgb(31.25, 31.25, 31.25);--v-craft-gray-dark-lighter-10: rgb(69.5, 69.5, 69.5);--v-craft-gray-dark-transparent-50: rgba(44, 44, 44, .5);--v-craft-gray-medium-darker-10: rgb(49.5, 49.5, 49.5);--v-craft-gray-medium-lighter-15: rgb(113.25, 113.25, 113.25)}