@formicoidea/labre-framework-edgy 0.23.0 → 0.23.1

package/dist/toolbar/edgy-menu.js

@@ -0,0 +1,195 @@
+import { DefaultTool } from '@formicoidea/labre-core/blocks/surface';
+import { createGroupCommand } from '@formicoidea/labre-core/gfx/group';
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { FontFamily, ShapeStyle } from '@formicoidea/labre-core/model';
+import { TelemetryProvider } from '@formicoidea/labre-core/shared/services';
+import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
+import { Bound } from '@formicoidea/labre-core/global/gfx';
+import { css, html, LitElement } from 'lit';
+import { REF_H, REF_W } from '../consts';
+import { ACTIVITY_VERTICES, INNER_FONT_SIZE, LABEL_FONT_SIZE, LABEL_GAP, NODE_FILL, NODE_LABEL, NODE_SIZE, NODE_STROKE, NODE_STROKE_WIDTH, OUTCOME_RADIUS, } from '../node/consts';
+import { edgyActivityIcon, edgyFacetsIcon, edgyObjectIcon, edgyOutcomeIcon, edgyPeopleIcon, } from './icons';
+/** Default facets-diagram size (REF aspect, scaled up so it reads on canvas). */
+const FACETS_SCALE = 1.5;
+/** Height of the native People free-text label. */
+const LABEL_H = LABEL_FONT_SIZE + 8;
+/**
+ * The popover above the toolbar for the EDGY toolbox. Items create the facets
+ * diagram (the on-click Venn) and the four base-element prefab shapes — all
+ * native shapes so they stay editable.
+ */
+export class EdgelessEdgyMenu extends EdgelessToolbarToolMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
+    :host {
+      position: absolute;
+      display: flex;
+      z-index: -1;
+    }
+    .menu-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .button-group-container {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      fill: var(--affine-icon-color);
+    }
+    .button-group-container svg {
+      width: 24px;
+      height: 24px;
+    }
+  `; }
+    /** Create the Enterprise Design Facets diagram centred on the viewport. */
+    _createFacets() {
+        const { gfx } = this;
+        if (!gfx.surface)
+            return;
+        const width = REF_W * FACETS_SCALE;
+        const height = REF_H * FACETS_SCALE;
+        const { centerX, centerY } = gfx.viewport;
+        const id = gfx.surface.addElement({
+            type: 'edgy',
+            xywh: new Bound(centerX - width / 2, centerY - height / 2, width, height).serialize(),
+        });
+        this._track('facets');
+        this._finish(id);
+    }
+    /** Add a native free-text label (Inter), used for the People node. */
+    _addLabel(surface, text, x, y) {
+        return surface.addElement({
+            type: 'text',
+            text,
+            fontFamily: FontFamily.Inter,
+            fontSize: LABEL_FONT_SIZE,
+            color: NODE_STROKE,
+            textAlign: 'center',
+            xywh: new Bound(x, y, 120, LABEL_H).serialize(),
+        });
+    }
+    _group(ids) {
+        const [, result] = this.edgeless.std.command.exec(createGroupCommand, {
+            elements: ids,
+        });
+        return result.groupId || ids[0];
+    }
+    /** Shared props for an EDGY node shape. */
+    _baseShapeProps(kind) {
+        return {
+            type: 'edgyNode',
+            kind,
+            filled: true,
+            fillColor: NODE_FILL,
+            strokeColor: NODE_STROKE,
+            shapeStyle: ShapeStyle.General,
+            roughness: 0,
+        };
+    }
+    /** Create a box base element (outcome / object / activity) with inner text. */
+    _createBox(kind) {
+        const surface = this.gfx.surface;
+        if (!surface)
+            return;
+        const { w, h } = NODE_SIZE[kind];
+        const { centerX: cx, centerY: cy } = this.gfx.viewport;
+        const shapeType = kind === 'activity' ? 'polygon' : 'rect';
+        const id = surface.addElement({
+            ...this._baseShapeProps(kind),
+            shapeType,
+            strokeWidth: NODE_STROKE_WIDTH,
+            radius: kind === 'outcome' ? OUTCOME_RADIUS : 0,
+            vertices: kind === 'activity' ? ACTIVITY_VERTICES : null,
+            text: NODE_LABEL[kind],
+            color: NODE_STROKE,
+            fontFamily: FontFamily.Inter,
+            fontSize: INNER_FONT_SIZE,
+            textAlign: 'center',
+            xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+        });
+        this._track(`node:${kind}`);
+        this._finish(id);
+    }
+    /**
+     * Create the People base element: an (invisible) ellipse decorated with the
+     * person glyph by the renderer, plus a native text label below, grouped.
+     */
+    _createPeople() {
+        const surface = this.gfx.surface;
+        if (!surface)
+            return;
+        const { w, h } = NODE_SIZE.people;
+        const { centerX: cx, centerY: cy } = this.gfx.viewport;
+        const nodeId = surface.addElement({
+            ...this._baseShapeProps('people'),
+            shapeType: 'ellipse',
+            // No visible outline — People is just the glyph; the ellipse is the bound.
+            strokeWidth: 0,
+            xywh: new Bound(cx - w / 2, cy - h / 2, w, h).serialize(),
+        });
+        const labelId = this._addLabel(surface, NODE_LABEL.people, cx - 60, cy + h / 2 + LABEL_GAP);
+        this._track('node:people');
+        this._finish(this._group([nodeId, labelId]));
+    }
+    _finish(id) {
+        const { gfx } = this;
+        gfx.doc.captureSync();
+        gfx.tool.setTool(DefaultTool);
+        gfx.selection.set({ elements: [id], editing: false });
+        // Keep the palette open (native sub-menu behaviour).
+    }
+    _track(element) {
+        this.edgeless.std.getOptional(TelemetryProvider)?.track('FrameworkElementAdded', {
+            framework: 'edgy',
+            element,
+            page: 'whiteboard editor',
+            segment: 'edgy toolbox',
+            module: 'edgy menu',
+        });
+    }
+    render() {
+        return html `
+      <edgeless-slide-menu>
+        <div class="menu-content">
+          <div class="button-group-container">
+            <edgeless-tool-icon-button
+              .tooltip=${'Enterprise Design facets'}
+              @click=${this._createFacets}
+            >
+              ${edgyFacetsIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'People'}
+              @click=${this._createPeople}
+            >
+              ${edgyPeopleIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Outcome'}
+              @click=${() => this._createBox('outcome')}
+            >
+              ${edgyOutcomeIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Object'}
+              @click=${() => this._createBox('object')}
+            >
+              ${edgyObjectIcon}
+            </edgeless-tool-icon-button>
+            <edgeless-tool-icon-button
+              .tooltip=${'Activity'}
+              @click=${() => this._createBox('activity')}
+            >
+              ${edgyActivityIcon}
+            </edgeless-tool-icon-button>
+          </div>
+        </div>
+      </edgeless-slide-menu>
+    `;
+    }
+}
+//# sourceMappingURL=edgy-menu.js.map

package/dist/toolbar/edgy-senior-button.d.ts

@@ -0,0 +1,16 @@
+import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
+import { LitElement } from 'lit';
+declare const EdgelessEdgySeniorButton_base: typeof LitElement & import("@formicoidea/labre-core/global/utils").Constructor<import("@formicoidea/labre-core/widgets/edgeless-toolbar").EdgelessToolbarToolClass>;
+/**
+ * Main toolbar button (colored facets glyph) that opens the EDGY toolbox
+ * sub-menu above the toolbar. Mirrors the Wardley senior button.
+ */
+export declare class EdgelessEdgySeniorButton extends EdgelessEdgySeniorButton_base {
+    static styles: import("lit").CSSResult;
+    enableActiveBackground: boolean;
+    type: typeof EmptyTool;
+    private _toggleMenu;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=edgy-senior-button.d.ts.map

package/{src/toolbar/edgy-senior-button.ts → dist/toolbar/edgy-senior-button.js}

@@ -3,17 +3,18 @@ import { EmptyTool } from '@formicoidea/labre-core/gfx/pointer';
 import { EdgelessToolbarToolMixin } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { SignalWatcher } from '@formicoidea/labre-core/global/lit';
 import { css, html, LitElement } from 'lit';
-
 import { edgyToolbarIcon } from './icons';
-
 /**
  * Main toolbar button (colored facets glyph) that opens the EDGY toolbox
  * sub-menu above the toolbar. Mirrors the Wardley senior button.
  */
-export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(
-  SignalWatcher(LitElement)
-) {
-  static override styles = css`
+export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(SignalWatcher(LitElement)) {
+    constructor() {
+        super(...arguments);
+        this.enableActiveBackground = true;
+        this.type = EmptyTool;
+    }
+    static { this.styles = css `
     :host,
     .edgy-button {
       display: block;
@@ -56,38 +57,31 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(
       --y: -10px;
       --s: 1.07;
     }
-  `;
-
-  override enableActiveBackground = true;
-
-  override type = EmptyTool;
-
-  private _toggleMenu() {
-    if (this.popper) {
-      this.popper.dispose();
-      this.popper = null;
-      return;
-    }
-    this.setEdgelessTool(DefaultTool);
-    const menu = this.createPopper('edgeless-edgy-menu', this);
-    menu.element.edgeless = this.edgeless;
-
-    const el = menu.element as HTMLElement;
-    const wrap = el.parentElement;
-    if (wrap) {
-      wrap.style.overflow = 'visible';
-      wrap.style.justifyContent = 'flex-end';
+  `; }
+    _toggleMenu() {
+        if (this.popper) {
+            this.popper.dispose();
+            this.popper = null;
+            return;
+        }
+        this.setEdgelessTool(DefaultTool);
+        const menu = this.createPopper('edgeless-edgy-menu', this);
+        menu.element.edgeless = this.edgeless;
+        const el = menu.element;
+        const wrap = el.parentElement;
+        if (wrap) {
+            wrap.style.overflow = 'visible';
+            wrap.style.justifyContent = 'flex-end';
+        }
+        Object.assign(el.style, {
+            position: 'static',
+            width: 'max-content',
+            maxWidth: 'calc(100vw - 16px)',
+            marginLeft: '0',
+        });
     }
-    Object.assign(el.style, {
-      position: 'static',
-      width: 'max-content',
-      maxWidth: 'calc(100vw - 16px)',
-      marginLeft: '0',
-    });
-  }
-
-  override render() {
-    return html`<edgeless-toolbar-button
+    render() {
+        return html `<edgeless-toolbar-button
       class="edgy-button"
       .tooltip=${this.popper ? '' : 'EDGY'}
       .tooltipOffset=${4}
@@ -98,5 +92,6 @@ export class EdgelessEdgySeniorButton extends EdgelessToolbarToolMixin(
         <div class="edgy-card">${edgyToolbarIcon}</div>
       </div>
     </edgeless-toolbar-button>`;
-  }
+    }
 }
+//# sourceMappingURL=edgy-senior-button.js.map

package/dist/toolbar/icons.d.ts

@@ -0,0 +1,13 @@
+/** Colored EDGY facets glyph for the main toolbar button (3 overlapping circles). */
+export declare const edgyToolbarIcon: import("lit-html").TemplateResult<2>;
+/** Menu icon — the facets diagram (colored mini Venn). */
+export declare const edgyFacetsIcon: import("lit-html").TemplateResult<2>;
+/** People — person glyph (official Icon-People), uses currentColor. */
+export declare const edgyPeopleIcon: import("lit-html").TemplateResult<2>;
+/** Outcome — lightly rounded rectangle. */
+export declare const edgyOutcomeIcon: import("lit-html").TemplateResult<2>;
+/** Object — plain rectangle. */
+export declare const edgyObjectIcon: import("lit-html").TemplateResult<2>;
+/** Activity — right-pointing chevron. */
+export declare const edgyActivityIcon: import("lit-html").TemplateResult<2>;
+//# sourceMappingURL=icons.d.ts.map

package/{src/toolbar/icons.ts → dist/toolbar/icons.js}

@@ -1,38 +1,33 @@
-import { svg } from 'lit';
-
-/** Colored EDGY facets glyph for the main toolbar button (3 overlapping circles). */
-export const edgyToolbarIcon = svg`<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+import { svg } from 'lit';
+/** Colored EDGY facets glyph for the main toolbar button (3 overlapping circles). */
+export const edgyToolbarIcon = svg `<svg width="100%" height="100%" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
   <g opacity="0.95">
     <circle cx="22" cy="24" r="13" fill="#00ea4e"/>
     <circle cx="34" cy="24" r="13" fill="#034cee"/>
     <circle cx="28" cy="34" r="13" fill="#ff0056"/>
   </g>
-</svg>`;
-
-/** Menu icon — the facets diagram (colored mini Venn). */
-export const edgyFacetsIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Menu icon — the facets diagram (colored mini Venn). */
+export const edgyFacetsIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <circle cx="9.5" cy="10" r="6" fill="#00ea4e" opacity="0.92"/>
   <circle cx="14.5" cy="10" r="6" fill="#034cee" opacity="0.92"/>
   <circle cx="12" cy="14.5" r="6" fill="#ff0056" opacity="0.92"/>
-</svg>`;
-
-/** People — person glyph (official Icon-People), uses currentColor. */
-export const edgyPeopleIcon = svg`<svg width="24" height="24" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** People — person glyph (official Icon-People), uses currentColor. */
+export const edgyPeopleIcon = svg `<svg width="24" height="24" viewBox="0 0 32 32" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path d="m16,19c-3.308,0-6-2.692-6-6v-4c0-3.308,2.692-6,6-6s6,2.692,6,6v4c0,3.308-2.692,6-6,6Zm0-14c-2.206,0-4,1.794-4,4v4c0,2.206,1.794,4,4,4s4-1.794,4-4v-4c0-2.206-1.794-4-4-4Z"/>
   <path d="m29,30H3v-3.5c0-3.308,2.692-6,6-6h14c3.308,0,6,2.692,6,6v3.5Zm-24-2h22v-1.5c0-2.206-1.794-4-4-4h-14c-2.206,0-4,1.794-4,4v1.5Z"/>
-</svg>`;
-
-/** Outcome — lightly rounded rectangle. */
-export const edgyOutcomeIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Outcome — lightly rounded rectangle. */
+export const edgyOutcomeIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" rx="2" stroke="currentColor" stroke-width="1.6"/>
-</svg>`;
-
-/** Object — plain rectangle. */
-export const edgyObjectIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Object — plain rectangle. */
+export const edgyObjectIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <rect x="3.5" y="6.5" width="17" height="11" stroke="currentColor" stroke-width="1.6"/>
-</svg>`;
-
-/** Activity — right-pointing chevron. */
-export const edgyActivityIcon = svg`<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+</svg>`;
+/** Activity — right-pointing chevron. */
+export const edgyActivityIcon = svg `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
   <path d="M3.5 6.5 H15 L20.5 12 L15 17.5 H3.5 Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
-</svg>`;
+</svg>`;
+//# sourceMappingURL=icons.js.map

package/dist/toolbar/node-config.d.ts

@@ -0,0 +1,2 @@
+export declare const edgyNodeToolbarExtension: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=node-config.d.ts.map

package/dist/toolbar/node-config.js

@@ -0,0 +1,162 @@
+import { EdgelessCRUDIdentifier } from '@formicoidea/labre-core/blocks/surface';
+import { packColor, } from '@formicoidea/labre-core/components/color-picker';
+import { shapeToolbarConfig } from '@formicoidea/labre-core/gfx/shape';
+import { DefaultTheme, isTransparent, LineWidth, resolveColor, ShapeElementModel, StrokeStyle, } from '@formicoidea/labre-core/model';
+import { ToolbarModuleExtension, } from '@formicoidea/labre-core/shared/services';
+import { getMostCommonValue } from '@formicoidea/labre-core/shared/utils';
+import { BlockFlavourIdentifier } from '@formicoidea/labre-core/std';
+import { html } from 'lit';
+/**
+ * The typical EDGY palette, surfaced as ready-made swatches in the EDGY node
+ * color picker (facet + intersection colours, saturated then pastel), followed
+ * by the default editor palette.
+ */
+const EDGY_PALETTES = [
+    { key: 'Identity', value: '#00ea4e' },
+    { key: 'Architecture', value: '#034cee' },
+    { key: 'Experience', value: '#ff0056' },
+    { key: 'Organisation', value: '#00caf4' },
+    { key: 'Brand', value: '#ffa500' },
+    { key: 'Product', value: '#cf00ff' },
+    { key: 'Identity light', value: '#80ffb7' },
+    { key: 'Architecture light', value: '#a6c0ff' },
+    { key: 'Experience light', value: '#ff99bd' },
+    { key: 'Organisation light', value: '#80eaff' },
+    { key: 'Brand light', value: '#ffd580' },
+    { key: 'Product light', value: '#e599ff' },
+];
+/**
+ * From the default editor palette we keep ONLY the neutrals (greys, white,
+ * black, transparent) — the historical colours are dropped in favour of the
+ * EDGY swatches above.
+ */
+const NEUTRAL_KEY = /grey|gray|white|black|transparent/i;
+const EDGY_PALETTE_LIST = [
+    ...EDGY_PALETTES,
+    ...DefaultTheme.Palettes.filter(p => NEUTRAL_KEY.test(p.key)),
+];
+// Mirror of the shape color action's text-color rule.
+function getTextColor(fillColor) {
+    if (fillColor === DefaultTheme.black)
+        return DefaultTheme.white;
+    if (fillColor === DefaultTheme.white)
+        return DefaultTheme.black;
+    return DefaultTheme.shapeTextColor;
+}
+/**
+ * EDGY fill / stroke colour picker — identical to the shape one but seeded with
+ * the EDGY palette swatches (`.palettes`).
+ */
+const edgyColorAction = {
+    id: 'e.color',
+    when(ctx) {
+        return ctx.getSurfaceModelsByType(ShapeElementModel).length > 0;
+    },
+    content(ctx) {
+        const models = ctx.getSurfaceModelsByType(ShapeElementModel);
+        if (!models.length)
+            return null;
+        const enableCustomColor = ctx.features.getFlag('enable_color_picker');
+        const theme = ctx.theme.edgeless$.value;
+        const firstModel = models[0];
+        const originalFillColor = firstModel.fillColor;
+        const originalStrokeColor = firstModel.strokeColor;
+        const mapped = models.map(({ filled, fillColor, strokeColor, strokeWidth, strokeStyle }) => ({
+            fillColor: filled
+                ? resolveColor(fillColor, theme)
+                : DefaultTheme.transparent,
+            strokeColor: resolveColor(strokeColor, theme),
+            strokeWidth,
+            strokeStyle,
+        }));
+        const fillColor = getMostCommonValue(mapped, 'fillColor') ??
+            resolveColor(DefaultTheme.shapeFillColor, theme);
+        const strokeColor = getMostCommonValue(mapped, 'strokeColor') ??
+            resolveColor(DefaultTheme.shapeStrokeColor, theme);
+        const strokeWidth = getMostCommonValue(mapped, 'strokeWidth') ?? LineWidth.Four;
+        const strokeStyle = getMostCommonValue(mapped, 'strokeStyle') ?? StrokeStyle.Solid;
+        const pickColorWrapper = (field, pickCallback) => (e) => {
+            e.stopPropagation();
+            switch (e.detail.type) {
+                case 'pick':
+                    pickCallback(e.detail.detail);
+                    break;
+                case 'start':
+                    ctx.store.captureSync();
+                    models.forEach(model => model.stash(field));
+                    break;
+                case 'end':
+                    ctx.store.transact(() => {
+                        models.forEach(model => model.pop(field));
+                    });
+            }
+        };
+        const onPickFillColor = pickColorWrapper('fillColor', palette => {
+            const value = palette.value;
+            const filled = isTransparent(value);
+            const props = packColor('fillColor', value);
+            const crud = ctx.std.get(EdgelessCRUDIdentifier);
+            models.forEach(model => {
+                if (filled && !model.filled) {
+                    const color = getTextColor(value);
+                    Object.assign(props, { filled, color });
+                }
+                crud.updateElement(model.id, props);
+            });
+        });
+        const onPickStrokeColor = pickColorWrapper('strokeColor', palette => {
+            const props = packColor('strokeColor', palette.value);
+            const crud = ctx.std.get(EdgelessCRUDIdentifier);
+            models.forEach(model => crud.updateElement(model.id, props));
+        });
+        const onPickStrokeStyle = (e) => {
+            e.stopPropagation();
+            const { type, value } = e.detail;
+            const crud = ctx.std.get(EdgelessCRUDIdentifier);
+            const props = type === 'size'
+                ? { strokeWidth: value }
+                : { strokeStyle: value };
+            for (const model of models) {
+                crud.updateElement(model.id, props);
+            }
+        };
+        return html `
+      <edgeless-shape-color-picker
+        @pickFillColor=${onPickFillColor}
+        @pickStrokeColor=${onPickStrokeColor}
+        @pickStrokeStyle=${onPickStrokeStyle}
+        .palettes=${EDGY_PALETTE_LIST}
+        .payload=${{
+            fillColor,
+            strokeColor,
+            strokeWidth,
+            strokeStyle,
+            originalFillColor,
+            originalStrokeColor,
+            theme,
+            enableCustomColor,
+        }}
+      >
+      </edgeless-shape-color-picker>
+    `;
+    },
+};
+/**
+ * EDGY nodes are {@link ShapeElementModel} subclasses, so the shape toolbar's
+ * actions operate on them directly. We reuse the line-style + text actions, add
+ * the EDGY-seeded color picker, and drop the actions that don't fit an EDGY base
+ * shape (switch shape type, edit polygon vertices).
+ */
+const KEEP_FROM_SHAPE = (id) => id === 'd.style' || id === 'f.text' || id.startsWith('g.text-');
+const edgyNodeToolbarConfig = {
+    actions: [
+        ...shapeToolbarConfig.actions.filter(action => KEEP_FROM_SHAPE(action.id)),
+        edgyColorAction,
+    ],
+    when: shapeToolbarConfig.when,
+};
+export const edgyNodeToolbarExtension = ToolbarModuleExtension({
+    id: BlockFlavourIdentifier('affine:surface:edgyNode'),
+    config: edgyNodeToolbarConfig,
+});
+//# sourceMappingURL=node-config.js.map

package/dist/toolbar/senior-tool.d.ts

@@ -0,0 +1,2 @@
+export declare const edgySeniorTool: import("@formicoidea/labre-core/store").ExtensionType;
+//# sourceMappingURL=senior-tool.d.ts.map

package/{src/toolbar/senior-tool.ts → dist/toolbar/senior-tool.js}

@@ -1,11 +1,11 @@
 import { SeniorToolExtension } from '@formicoidea/labre-core/widgets/edgeless-toolbar';
 import { html } from 'lit';
-
 export const edgySeniorTool = SeniorToolExtension('edgy', ({ block }) => {
-  return {
-    name: 'EDGY',
-    content: html`<edgeless-edgy-senior-button
+    return {
+        name: 'EDGY',
+        content: html `<edgeless-edgy-senior-button
       .edgeless=${block}
     ></edgeless-edgy-senior-button>`,
-  };
+    };
 });
+//# sourceMappingURL=senior-tool.js.map

package/dist/view.d.ts

@@ -0,0 +1,7 @@
+import { type ViewExtensionContext, ViewExtensionProvider } from '@formicoidea/labre-core/ext-loader';
+export declare class EdgyViewExtension extends ViewExtensionProvider {
+    name: string;
+    effect(): void;
+    setup(context: ViewExtensionContext): void;
+}
+//# sourceMappingURL=view.d.ts.map

package/dist/view.js

@@ -0,0 +1,36 @@
+import { ViewExtensionProvider, } from '@formicoidea/labre-core/ext-loader';
+import { extendTemplateCategory } from '@formicoidea/labre-core/gfx/template';
+import { effects } from './effects';
+import { edgyTemplateCategory } from './templates';
+import { EdgyFacetsRendererExtension } from './element-renderer';
+import { EdgyInteraction, EdgyView } from './element-view';
+import { EdgyNodeRendererExtension } from './node/node-renderer';
+import { EdgyNodeView } from './node/node-view';
+import { edgyToolbarExtension } from './toolbar/config';
+import { edgyNodeToolbarExtension } from './toolbar/node-config';
+import { edgySeniorTool } from './toolbar/senior-tool';
+export class EdgyViewExtension extends ViewExtensionProvider {
+    constructor() {
+        super(...arguments);
+        this.name = 'affine-edgy-gfx';
+    }
+    effect() {
+        super.effect();
+        effects();
+        extendTemplateCategory(edgyTemplateCategory);
+    }
+    setup(context) {
+        super.setup(context);
+        context.register(EdgyView);
+        context.register(EdgyFacetsRendererExtension);
+        context.register(EdgyNodeView);
+        context.register(EdgyNodeRendererExtension);
+        if (this.isEdgeless(context.scope)) {
+            context.register(EdgyInteraction);
+            context.register(edgySeniorTool);
+            context.register(edgyToolbarExtension);
+            context.register(edgyNodeToolbarExtension);
+        }
+    }
+}
+//# sourceMappingURL=view.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formicoidea/labre-framework-edgy",
   "description": "Labre edgy framework for @formicoidea/labre-core.",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "type": "module",
   "sideEffects": false,
   "author": "lajola",
@@ -10,15 +10,24 @@
   ],
   "license": "MPL-2.0",
   "exports": {
-    ".": "./src/index.ts",
-    "./view": "./src/view.ts",
-    "./descriptor": "./src/descriptor.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./view": {
+      "types": "./dist/view.d.ts",
+      "import": "./dist/view.js"
+    },
+    "./descriptor": {
+      "types": "./dist/descriptor.d.ts",
+      "import": "./dist/descriptor.js"
+    }
   },
   "files": [
-    "src"
+    "dist"
   ],
   "dependencies": {
-    "@formicoidea/labre-core": "0.23.0",
+    "@formicoidea/labre-core": "0.23.1",
     "lit": "^3.2.0"
   }
 }