@craftile/editor 0.1.0

package/dist/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { I18n } from '../types';
+export declare const en: I18n;

package/dist/managers/devices.d.ts

@@ -0,0 +1,25 @@
+export interface DevicePreset {
+    id: string;
+    label: string;
+    width: number;
+    icon?: string;
+}
+interface DevicesState {
+    currentDevice: string;
+    savedCustomDevices: DevicePreset[];
+}
+export interface DevicesManagerOptions {
+    presets?: DevicePreset[];
+    default?: string;
+}
+export declare class DevicesManager {
+    readonly state: DevicesState;
+    readonly devicePresets: DevicePreset[];
+    constructor(options?: DevicesManagerOptions);
+    getCurrentDeviceData(): DevicePreset;
+    setDeviceMode(deviceId: string): void;
+    addCustomDevice(device: DevicePreset): void;
+    removeCustomDevice(deviceId: string): void;
+    getAllDevices(): DevicePreset[];
+}
+export {};

package/dist/managers/inspector.d.ts

@@ -0,0 +1,28 @@
+import { EventBus } from '@craftile/event-bus';
+import { PreviewManager } from './preview';
+import { UIManager } from './ui';
+export interface InspectorState {
+    enabled: boolean;
+    hoveredBlockId: string | null;
+    hoveredBlockRect: DOMRect | null;
+    hoveredParentRect: DOMRect | null;
+    parentFlexDirection: 'row' | 'column';
+    selectedBlockId: string | null;
+    selectedBlockRect: DOMRect | null;
+    iframeRect: DOMRect | null;
+}
+export declare class InspectorManager {
+    readonly state: InspectorState;
+    private events;
+    private preview;
+    private ui;
+    constructor(events: EventBus, preview: PreviewManager, ui: UIManager);
+    enable(): void;
+    disable(): void;
+    toggle(): void;
+    setHoveredBlock(blockId: string, blockRect: DOMRect, parentRect?: DOMRect): void;
+    setSelectedBlock(blockId: string, blockRect: DOMRect): void;
+    clearHoveredBlock(): void;
+    clearSelectedBlock(): void;
+    setIframeRect(rect: DOMRect): void;
+}

package/dist/managers/plugins.d.ts

@@ -0,0 +1,12 @@
+import { App } from 'vue';
+import { CraftileEditor } from '../editor';
+import { CraftileEditorPlugin } from '../types/plugin';
+export declare class PluginsManager {
+    private editor;
+    private plugins;
+    constructor(editor: CraftileEditor);
+    setupPlugins(vueApp: App): void;
+    register(plugin: CraftileEditorPlugin): PluginsManager;
+    unregister(plugin: CraftileEditorPlugin): PluginsManager;
+    getAllPlugins(): CraftileEditorPlugin[];
+}

package/dist/managers/preview.d.ts

@@ -0,0 +1,25 @@
+import { TypedMessage } from '@craftile/messenger';
+import { WindowMessages } from '@craftile/types';
+export interface PreviewState {
+    previewUrl: string;
+    previewFrame: HTMLIFrameElement | null;
+    isIframeReady: boolean;
+    messageQueue: TypedMessage[];
+}
+export declare class PreviewManager {
+    readonly state: PreviewState;
+    private messenger;
+    private readyListenerInitialized;
+    private readyCallbacks;
+    constructor();
+    loadUrl(url: string): void;
+    loadFromHtml(html: string): void;
+    reload(): void;
+    getFrame(): HTMLIFrameElement | null;
+    _registerFrame(frame: HTMLIFrameElement): void;
+    sendMessage<T extends keyof WindowMessages>(type: T, payload?: WindowMessages[T]): void;
+    onMessage<T extends keyof WindowMessages>(type: T, handler: (data: WindowMessages[T], event: MessageEvent) => void): () => void;
+    onReady(fn: () => void): void;
+    runReadyCallbacks(): void;
+    private flushMessageQueue;
+}

package/dist/managers/ui.d.ts

@@ -0,0 +1,41 @@
+import { createToaster } from '@ark-ui/vue/toast';
+import { EventBus } from '@craftile/event-bus';
+import { ConfigurationPanel, HeaderAction, KeyboardShortcut, ModalConfig, PropertyFieldConfig, SidebarPanel } from './../types/ui';
+export interface UIState {
+    activeSidebarPanel: string;
+    sidebarPanels: Map<string, SidebarPanel>;
+    headerActions: Map<string, HeaderAction>;
+    configurationPanels: Map<string, ConfigurationPanel>;
+    modals: Map<string, ModalConfig>;
+    openModals: string[];
+    keyboardShortcuts: Map<string, KeyboardShortcut>;
+    propertyFields: Map<string, PropertyFieldConfig>;
+    selectedBlockId: string | null;
+    layersPanel: {
+        expandedBlocks: Set<string>;
+    };
+}
+export declare class UIManager {
+    private events;
+    readonly state: UIState;
+    readonly toaster: ReturnType<typeof createToaster>;
+    constructor(events: EventBus);
+    private generateId;
+    setSelectedBlock(blockId: string | null): void;
+    clearSelectedBlock(): void;
+    toast(titleOrOptions: string | Parameters<typeof this.toaster.create>[0]): void;
+    registerSidebarPanel(config: SidebarPanel): void;
+    removeSidebarPanel(panelId: string): void;
+    registerHeaderAction(config: HeaderAction): void;
+    removeHeaderAction(actionId: string): void;
+    registerConfigurationPanel(config: ConfigurationPanel): void;
+    removeConfigurationPanel(panelId: string): void;
+    registerPropertyField(config: PropertyFieldConfig): void;
+    removePropertyField(type: string): void;
+    registerModal(config: ModalConfig): void;
+    unregisterModal(id: string): void;
+    openModal(id: string): void;
+    closeModal(id: string): void;
+    registerKeyboardShortcut(config: KeyboardShortcut): void;
+    removeKeyboardShortcut(key: string): void;
+}

package/dist/types/i18n.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Internationalization (i18n) grouped string definitions for the editor
+ */
+export interface I18n {
+    header: {
+        undo: string;
+        redo: string;
+        auto: string;
+        apply: string;
+        devicePreview: string;
+        customDeviceSize: string;
+        deviceWidthPx: string;
+        savedCustomDevices: string;
+        enableInspector: string;
+        disableInspector: string;
+    };
+    block: {
+        show: string;
+        hide: string;
+        duplicate: string;
+        remove: string;
+        moveToNext: string;
+        moveToPrevious: string;
+        enable: string;
+        disable: string;
+    };
+    layers: {
+        title: string;
+        header: string;
+        collapseAll: string;
+        addBlockToBlock: string;
+    };
+    blocksPopover: {
+        searchPlaceholder: string;
+        tabBlocks: string;
+        tabSaved: string;
+        noBlocksAvailable: string;
+        noBlocksFound: string;
+    };
+    configPanels: {
+        properties: string;
+        selectedBlock: string;
+        noProperties: string;
+        unknownFieldType: string;
+    };
+    common: {
+        block: string;
+        custom: string;
+        close: string;
+        default: string;
+    };
+}
+/**
+ * Deep partial type for nested i18n configuration
+ */
+type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/**
+ * Partial i18n configuration - allows users to override only specific strings
+ */
+export type I18nConfig = DeepPartial<I18n>;
+/**
+ * Type for translation keys using dot notation
+ */
+export type TranslationKey = `header.${keyof I18n['header']}` | `block.${keyof I18n['block']}` | `layers.${keyof I18n['layers']}` | `blocksPopover.${keyof I18n['blocksPopover']}` | `configPanels.${keyof I18n['configPanels']}` | `common.${keyof I18n['common']}`;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ui';
+export * from './i18n';
+export * from './plugin';

package/dist/types/plugin.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { CraftileEditor } from '../editor';
+export interface PluginContext {
+    vueApp: App;
+    editor: CraftileEditor;
+}
+export type CraftileEditorPlugin = (context: PluginContext) => void;

package/dist/types/ui.d.ts

@@ -0,0 +1,53 @@
+import { CraftileEditor } from './../editor';
+import { PropertyField } from '@craftile/types';
+import { Component } from 'vue';
+export interface UiRenderFunctionContext {
+    editor: CraftileEditor;
+}
+export type UiRenderFunction = Component | string | ((context: UiRenderFunctionContext) => HTMLElement);
+export interface SidebarPanel {
+    id?: string;
+    title: string;
+    render: UiRenderFunction;
+    icon?: UiRenderFunction;
+    order?: number;
+}
+export interface HeaderActionButton {
+    text: string;
+    variant?: 'default' | 'primary' | 'destructive' | 'secondary' | 'accent';
+    onClick: () => void;
+}
+export interface HeaderAction {
+    id?: string;
+    slot: 'left' | 'center' | 'right';
+    render?: UiRenderFunction;
+    button?: HeaderActionButton;
+    order?: number;
+}
+export interface ConfigurationPanel {
+    id?: string;
+    title: string;
+    icon?: UiRenderFunction;
+    render: UiRenderFunction;
+    order?: number;
+}
+export interface ModalConfig {
+    id?: string;
+    title?: string;
+    render: UiRenderFunction;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+}
+export interface KeyboardShortcut {
+    key: string;
+    handler: (context: UiRenderFunctionContext) => void;
+}
+export interface FieldRenderProps {
+    field: PropertyField;
+    value: unknown;
+    onChange: (value: unknown) => void;
+    onBlur?: () => void;
+}
+export interface PropertyFieldConfig {
+    type: string;
+    render: string | Component | ((props: FieldRenderProps) => HTMLElement);
+}

package/dist/utils.d.ts

@@ -0,0 +1,7 @@
+import { Component } from 'vue';
+/**
+ * Check if a render value is a Vue component
+ */
+export declare function isVueComponent(render: any): render is Component;
+export declare function isComponentString(render: any): render is string;
+export declare function isHtmlRenderFunction(render: any): render is (context: any) => HTMLElement;

package/dist/watch-engine-updates.d.ts

@@ -0,0 +1,15 @@
+import { Engine } from '@craftile/core';
+import { UpdatesEvent } from '@craftile/types';
+export interface WatchEngineUpdatesOptions {
+    debounceMs?: number;
+    onUpdates: (updates: UpdatesEvent) => void;
+}
+/**
+ * Watch engine events and emit aggregated updates
+ *
+ * @param engine The Craftile engine instance
+ * @param options Configuration options
+ *
+ * @returns Cleanup function to remove all listeners
+ */
+export declare function watchEngineUpdates(engine: Engine, options?: WatchEngineUpdatesOptions): () => void;

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@craftile/editor",
+  "version": "0.1.0",
+  "description": "Vue.js-based editor UI components for craftile blocks engine",
+  "keywords": [
+    "craftile",
+    "vue",
+    "editor",
+    "ui",
+    "components"
+  ],
+  "license": "MIT",
+  "authors": [
+    {
+      "name": "Eldo Magan",
+      "email": "magan.eldo@gmail.com"
+    }
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "vue": "^3.5.17",
+    "vue-draggable-plus": "^0.6.0",
+    "@craftile/core": "0.1.0",
+    "@craftile/event-bus": "0.1.0",
+    "@craftile/messenger": "0.1.0",
+    "@craftile/types": "0.1.0"
+  },
+  "devDependencies": {
+    "@ark-ui/vue": "^5.24.1",
+    "@iconify-json/heroicons": "^1.2.2",
+    "@tailwindcss/vite": "^4.1.11",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "postcss-prefixwrap": "^1.56.2",
+    "tailwindcss": "^4.1.11",
+    "typescript": "~5.8.3",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-icons": "^22.1.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^7.0.0",
+    "vite-plugin-css-injected-by-js": "^3.5.2",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/craftile/editor.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "build": "tsc && vite build"
+  }
+}