@blokkli/editor 1.0.3 → 1.1.0

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

@@ -87,6 +87,7 @@ export type DefineBlokkliContext<T extends BlockDefinitionOptionsInput = BlockDe
 type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined> = {
     options: (T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object);
     parentType: BlockBundleWithNested | undefined;
+    fieldListType: ValidFieldListTypes;
     props: Record<string, any>;
     entity: AdapterContext;
 };
@@ -191,14 +192,41 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
      * appears to be selectable/draggable.
      */
     getDraggableElement?: (el: HTMLElement) => Element | undefined | null;
+    /**
+     * Define how the nested fields should be structured when the block is
+     * rendered without its component, for example when using
+     * `:proxy-mode="true"` on <BlokkliField>.
+     *
+     * Each array should define an array of field names.
+     *
+     * @example
+     * ```typescript
+     * defineBlokkli({
+     *   bundle: 'three_columns',
+     *   editor: {
+     *     fieldLayout: [
+     *       ['header'],
+     *       ['left', 'center', 'right'],
+     *     ]
+     *   }
+     * })
+     * ```
+     */
+    fieldLayout?: string[][];
 };
 export type BlockDefinitionRenderForParent = {
     parentBundle: BlockBundleWithNested;
 };
-export type BlockDefinitionRenderForFieldListType = {
+export type BlockDefinitionRenderForFieldList = {
+    /**
+     * @deprecated Use `fieldListType` instead.
+     */
     fieldList: ValidFieldListTypes;
 };
-export type BlockDefinitionRenderFor = BlockDefinitionRenderForParent | BlockDefinitionRenderForFieldListType;
+export type BlockDefinitionRenderForFieldListType = {
+    fieldListType: ValidFieldListTypes;
+};
+export type BlockDefinitionRenderFor = BlockDefinitionRenderForParent | BlockDefinitionRenderForFieldList | BlockDefinitionRenderForFieldListType;
 export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = {
     /**
      * The bundle ID of the block, e.g. "text" or "section_title".
@@ -279,6 +307,12 @@ export type EntityContext = {
     type: string;
     bundle: string;
 };
+export type BlokkliProviderEntityContext = {
+    uuid: string;
+    type: string;
+    bundle: string;
+    language?: string;
+};
 export type EditEntity = {
     label?: string;
     status?: boolean;
@@ -735,6 +769,7 @@ export type BlokkliFieldElement = {
     name: string;
     label: string;
     isNested: boolean;
+    nestingLevel: number;
     fieldListType: ValidFieldListTypes;
     hostEntityType: string;
     hostEntityBundle: string;
@@ -834,7 +869,7 @@ export type EventbusEvents = {
     'block:append': BlockAppendEvent;
     'item:doubleClick': DraggableExistingBlock;
     scrollIntoView: ScrollIntoViewEvent;
-    'animationFrame:before': undefined;
+    'animationFrame:before': number;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
@@ -847,6 +882,7 @@ export type EventbusEvents = {
     'droppable:focus': DroppableEntityField;
     'drop:clipboardItem': DropClipboardItemEvent;
     'sidebar:close': undefined;
+    'sidebar:open': string;
     'action:placed': ActionPlacedEvent;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "Interactive page building experience for Nuxt",
   "repository": "blokkli/editor",
   "type": "module",
@@ -19,15 +19,15 @@
   "scripts": {
     "prepack": "nuxt-module-build build && find dist/ -type f -name '*.*' | grep '.spec.' | xargs rm -f",
     "dev": "nuxi dev playground --host",
-    "typecheck": "nuxi typecheck",
+    "typecheck": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit",
     "dev:minimal": "nuxi dev playground-minimal --host",
     "dev:content": "nuxi dev playground-content --host",
     "styles:build": "postcss ./css/index.css -o ./src/runtime/css/output.css",
     "styles:watch": "postcss ./css/index.css -o ./src/runtime/css/output.css --watch",
-    "dev:build": "nuxi generate playground",
+    "dev:build": "npm run dev:prepare && nuxi generate playground",
     "dev:start": "npx serve playground/.output/public",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "release": "npm run lint && npm run prepack && changelogen --release",
     "texts": "node ./scripts/texts/index.cjs",
     "generate-types": "node ./scripts/generateTypes/index.cjs",
     "lint": "eslint ./src",
@@ -49,6 +49,7 @@
   "license": "MIT",
   "dependencies": {
     "@nuxt/kit": "^3.13.1",
+    "artboard-deluxe": "^0.0.1",
     "estree-walker-ts": "^1.0.1",
     "fzf": "^0.5.2",
     "get-video-id": "^4.1.7",
@@ -95,7 +96,8 @@
     "tailwindcss": "^3.4.11",
     "vite-plugin-glsl": "^1.3.0",
     "vitepress": "^1.3.4",
-    "vitest": "^2.0.5"
+    "vitest": "^2.0.5",
+    "vue-tsc": "^2.1.6"
   },
   "overrides": {
     "@parcel/watcher": "~2.1.0"

package/dist/runtime/components/Edit/Features/Artboard/Manager/Artboard.d.ts

@@ -1,204 +0,0 @@
-import type { Coord, Size, Rectangle } from '#blokkli/types';
-type TouchDirection = 'horizontal' | 'vertical' | 'both' | 'none';
-/**
- * Implements a time-based queue.
- */
-declare class Queue<T> {
-    queue: T[];
-    timeQueue: number[];
-    reset(): void;
-    pruneQueue(ms: number): void;
-    add(position: T): void;
-}
-/**
- * Implements a queue to calculate the velocity of 2D coordinates.
- */
-declare class VelocityQueue extends Queue<Coord> {
-    max: number;
-    constructor(max: number);
-    getVelocity(): Coord;
-    private limit;
-}
-declare class ScaleVelocityQueue extends Queue<number> {
-    getVelocity(): number;
-}
-type PossibleDragEventPosition = Array<Touch | MouseEvent> | TouchList;
-export type ArtboardOptions = {
-    x?: number;
-    y?: number;
-    scale?: number;
-    padding?: number;
-    scrollSpeed?: number;
-    minScale?: number;
-    maxScale?: number;
-    maxVelocity?: number;
-    getBlockingRects?: () => Rectangle[];
-};
-type AnimationTarget = Coord & {
-    scale: number;
-    alpha: number;
-    speed: number;
-};
-export declare class Artboard {
-    /**
-     * The element containing the artboard that can be moved and zoomed.
-     */
-    artboardEl: HTMLElement;
-    /**
-     * The parent/root element that defines the area in which the artboard can be interacted with.
-     */
-    rootEl: HTMLElement;
-    /**
-     * The minimum scale amount.
-     */
-    minScale: number;
-    /**
-     * The maximum scale amount.
-     */
-    maxScale: number;
-    /**
-     * The maximum move velocity.
-     */
-    maxVelocity: number;
-    /**
-     * The current scale of the artboard.
-     */
-    scale: number;
-    /**
-     * The padding area inside the root element.
-     */
-    padding: number;
-    /**
-     * The multiplier for scrolling using the mouse wheel.
-     */
-    scrollSpeed: number;
-    /**
-     * The current arboard offset/translation.
-     */
-    offset: Coord;
-    /**
-     * The native size of the artboard (without any scaling).
-     */
-    artboardSize: Size;
-    /**
-     * The native size of the root element.
-     */
-    rootSize: Size;
-    /**
-     * The target state for the current animation.
-     */
-    animationTarget: AnimationTarget | null;
-    /**
-     * The last touch coordinate (or the midpoint of two touches when scaling).
-     */
-    lastTouch: Coord | null;
-    /**
-     * Whether the user is currently dragging the artboard.
-     */
-    isDragging: boolean;
-    /**
-     * Whether the user is currently scaling the artboard using touch gestures.
-     */
-    isScaling: boolean;
-    /**
-     * The calculated velocity of a drag gesture.
-     */
-    velocity: Coord;
-    /**
-     * The queue containing the last touches to calculate the velocity.
-     */
-    velocityQueue: VelocityQueue;
-    /**
-     * The calculated scale velocity.
-     */
-    scaleVelocity: number;
-    /**
-     * The queue containing the last scaling values during a scale gesture.
-     */
-    scaleVelocityQueue: ScaleVelocityQueue;
-    /**
-     * Whether the animation loop is performing momentum scrolling.
-     */
-    isMomentumScrolling: boolean;
-    /**
-     * The detected touch direction.
-     */
-    touchDirection: TouchDirection;
-    /**
-     * The coordinate at which the first touch event fired.
-     */
-    initialTouchPoint: Coord | null;
-    /**
-     * The offset at the time the first touch event fired.
-     */
-    initialOffset: Coord;
-    scaleMidpoint: Coord | null;
-    initialTouchDistance: number;
-    initialScale: number;
-    moveStartOffset: Coord | null;
-    moveStartCoords: Coord | null;
-    isPressingSpace: boolean;
-    /**
-     * Whether the user is currently touching the artboard with at least one finger.
-     */
-    isTouching: boolean;
-    getBlockingRects: (() => Rectangle[]) | null;
-    listeners: Record<string, any>;
-    resizeObserver: ResizeObserver;
-    scaleStartCoords: Coord | null;
-    lastScaleTimestamp: number;
-    /**
-     * The timestamp of the last call to animateTo().
-     */
-    lastAnimateToTimestamp: number;
-    /**
-     * Construct a new Artboard.
-     */
-    constructor(el: HTMLElement, rootEl: HTMLElement, options?: ArtboardOptions);
-    setOptions(options: ArtboardOptions): void;
-    initListeners(): void;
-    onKeyDown(e: KeyboardEvent): void;
-    onKeyUp(): void;
-    onMouseDown(e: MouseEvent): void;
-    onMouseUp(): void;
-    onMouseMove(e: MouseEvent): void;
-    getDistance(a: Coord, b: Coord): number;
-    getTouchDistance(touches: PossibleDragEventPosition): number;
-    getMidpoint(touches: PossibleDragEventPosition): Coord;
-    onDragStart(touches: PossibleDragEventPosition): void;
-    onDragMove(touches: PossibleDragEventPosition): void;
-    resetDraggingState(): void;
-    onDragEnd(): void;
-    onTouchStart(e: TouchEvent): void;
-    onTouchMove(e: TouchEvent): void;
-    onTouchEnd(e: TouchEvent): void;
-    destroy(): void;
-    loop(): void;
-    getCenterX(targetScale?: number): number;
-    animateTo(x: number, y: number, targetScale?: number): void;
-    getEndY(): number;
-    animateOrJumpBy(y: number): void;
-    animateOrJumpTo(y: number): void;
-    scrollPageUp(): void;
-    scrollPageDown(): void;
-    scrollPageLeft(): void;
-    scrollPageRight(): void;
-    scrollToTop(): void;
-    scrollToEnd(): void;
-    scaleToFit(): void;
-    resetZoom(): void;
-    updateStyles(): void;
-    getBoundaries(providedScale?: number): {
-        xMin: number;
-        xMax: number;
-        yMin: number;
-        yMax: number;
-    };
-    setScale(newScale: number): void;
-    setOffset(x: number, y: number): void;
-    stopAnimate(): void;
-    scaleAroundPoint(x: number, y: number, newScale: number): void;
-    doZoom(x: number, y: number, delta: number): void;
-    onWheel(e: WheelEvent): void;
-}
-export {};