@jimka/typescript-ui 0.1.0

package/dist/lib/component/container.es.js

@@ -0,0 +1,2 @@
+import{n as e,t,u as n}from"../Position-B-WfZYAJ.js";import{f as r,t as i}from"../Component-BR2f0Itb.js";import{t as a}from"../Scrollbar-DchfiFKC.js";import{t as o}from"../Container-3KsvsJ6S.js";import{t as s}from"../Fit-CFIr4P9R.js";import{t as c}from"../Text-D1RrBY52.js";import{t as l}from"../HBox-Q8y1PHlk.js";import{c as u,h as d,m as f,o as p,s as m,u as h}from"../LayoutSizes-BW4wyGDI.js";import{n as g,r as _}from"../Border-oZC_SDy8.js";import{t as v}from"../LayoutConstraints-CHI2lhPd.js";import{n as y,r as b}from"../Menu-Wz4MK6sA.js";import{a as x,i as S,n as C,r as w,t as T}from"../GridConstraints-Q3wvuovN.js";import{t as E}from"../Grid-Czux--Mr.js";import{t as D}from"../Spacer-BVQncB5B.js";import{t as O}from"../VirtualScroller-BPDmO1ir.js";var k=r(class Legend extends c{static LEFT_MARGIN=10;constructor(e){super(void 0,{...e??{},tag:`legend`}),this.setPosition(t.STATIC)}applyStyle(e){return super.applyStyle(e),this.setElementCSSRule(`marginLeft`,`${Legend.LEFT_MARGIN}px`),this}}),A={tag:`fieldset`,border:`var(--ts-ui-input-border)`,borderRadius:`var(--ts-ui-border-radius, 4px)`,insets:new e(5,8,8,8),preferredSize:{width:200,height:200},minSize:{width:100,height:100}},j=class FieldSet extends i{static LEGEND_CLEARANCE_FALLBACK=16;_legend=new k;_legendClearance=null;constructor(e=``,t,n){super(t,{...A,...n??{}}),this._legend.setText(e),this._legend.setDisplayed(e!==``)}applyOptions(e){return super.applyOptions(e),e.legend!==void 0&&this.setTitle(e.legend),this}getTitle(){return this._legend.getText()}setTitle(e){return this._legend.setText(e),this._legend.setDisplayed(e!==``),this.clampLegendWidth(),this}clampLegendWidth(){if(this.getTitle()===``)return this;let e=this.getWidth();if(e<=0)return this;let t=this.getPerimeterSize(),n=t.left+t.right,r=Math.max(0,e-n);return this._legend.setMaxSize(r,Number.MAX_VALUE),this}getMinSize(){if(this.getTitle()===``)return super.getMinSize();let e=super.getMinSize(),t=this._legend.getMinSize();if(!t)return e;let n=this.getPerimeterSize(),r=n.left+n.right,i=t.width+r;return e?{width:Math.max(e.width,i),height:e.height}:{width:i,height:0}}getPerimeterSize(){let e=super.getPerimeterSize();return e.top+=this.legendClearance(),e}legendClearance(){if(this.getTitle()===``)return 0;if(this._legendClearance!=null)return this._legendClearance;if(n.source.isModelled())return FieldSet.LEGEND_CLEARANCE_FALLBACK;let e=this._legend.getElement();if(e&&n.source.isConnected(e)){let t=n.source.getOffsetSize(e).offsetHeight;if(t>0)return this._legendClearance=t,this._legendClearance}return FieldSet.LEGEND_CLEARANCE_FALLBACK}doLayout(){return super.doLayout(),this.clampLegendWidth(),this}render(){let e=super.render();return n.sink.appendChild(e,this._legend.getElement(!0)),e}},M=r(j),N=8,LabeledGrid=class extends o{_columns;_grid;_flowCol=0;_rowCount=0;constructor(e){super(e),this._columns=e?.columns??1,this._grid=new E({baselineAlign:!0,columns:2*this._columns,spacing:e?.fieldSpacing??N,columnTracks:this.buildColumnTracks(),rows:0,rowTracks:[]}),this.setLayoutManager(this._grid),e?.rows&&this.applyRows(e.rows)}addField(e,t){return this.openRow(),this.addComponent(new c(e)),this.addComponent(t),this._flowCol+=2,this._flowCol>=2*this._columns&&(this._flowCol=0),this}addRow(e){this.finishRow();for(let t of e)this.addField(t.title,t.component);return this.finishRow(),this}addFullWidthRow(e){this.finishRow(),this.openRow();let t=new T;return t.colSpan=2*this._columns,this.addComponent(e,t),this}getColumns(){return this._columns}buildColumnTracks(){let e=[];for(let t=0;t<this._columns;t++)e.push({mode:`content`}),e.push({mode:`weight`,value:1});return e}applyRows(e){for(let t of e)Array.isArray(t)?this.addRow(t):this.addFullWidthRow(t.component)}openRow(){this._flowCol===0&&(this._rowCount++,this.growRows())}finishRow(){if(this._flowCol===0)return;let e=2*this._columns-this._flowCol;for(let t=0;t<e;t++)this.addComponent(new i);this._flowCol=0}growRows(){this._grid.setRows(this._rowCount),this._grid.setRowTracks(Array.from({length:this._rowCount},()=>({mode:`content`})))}},P=r(LabeledGrid),F={preferredSize:void 0,minSize:void 0},LabeledFieldSet=class extends j{_labeledGrid;constructor(e=``,t,n){super(e,t,{...F,...n??{}}),this._labeledGrid=new P({columns:t?.columns,fieldSpacing:t?.fieldSpacing,rows:t?.rows}),this.setLayoutManager(new s),this.addComponent(this._labeledGrid)}addField(e,t){return this._labeledGrid.addField(e,t),this}addRow(e){return this._labeledGrid.addRow(e),this}addFullWidthRow(e){return this._labeledGrid.addFullWidthRow(e),this}getColumns(){return this._labeledGrid.getColumns()}getGrid(){return this._labeledGrid}},I=r(LabeledFieldSet),L=22,R=1,z=4,B={insets:new e(0,6,0,6)},StatusBar=class extends o{_message=``;_defaultMessage=``;_messageTimer=null;_messageText;_spacer;constructor(e){super(e,B);let t=new l;t.setComponentSpacing(z),this.setLayoutManager(t),this.setBackgroundColor(`var(--ts-ui-statusbar-bg, rgb(245, 245, 245))`),this.setForegroundColor(`var(--ts-ui-statusbar-color, rgb(60, 60, 60))`),this.setBorder({borderTop:`${R}px solid var(--ts-ui-statusbar-border, rgb(220, 220, 220))`}),this.setMinSize(0,22),this.setMaxSize(2**53-1,22),this._messageText=new c(``),this._messageText.centerInHeight(22-R),this._spacer=D.flex(),this.addComponent(this._messageText),this.addComponent(this._spacer),this.getAria().setRole(`status`),this.getAria().setLive(`polite`),this._options.defaultMessage!==void 0&&(this._defaultMessage=this._options.defaultMessage),this._options.message===void 0?this._defaultMessage!==``&&(this._message=this._defaultMessage,this._messageText.setText(this._defaultMessage)):this.setMessage(this._options.message)}applyOptions(e){return super.applyOptions(e),e.message!==void 0&&(this._options.message=e.message),e.defaultMessage!==void 0&&(this._options.defaultMessage=e.defaultMessage),this}addLeft(e){return this.insertComponent(e,this.getComponents().indexOf(this._spacer)),this}addRight(e){return this.addComponent(e),this}removeLeft(e){return this.removeComponent(e),this}removeRight(e){return this.removeComponent(e),this}setMessage(e,t){return this._messageTimer!==null&&(clearTimeout(this._messageTimer),this._messageTimer=null),this._message=e,this._messageText.setText(e),t!==void 0&&t>0&&(this._messageTimer=setTimeout(()=>{this._messageTimer=null,this._message=this._defaultMessage,this._messageText.setText(this._defaultMessage)},t)),this}getMessage(){return this._message}clearMessage(){return this.setMessage(this._defaultMessage)}setDefaultMessage(e){return this._defaultMessage=e,this._messageTimer===null&&(this._message=e,this._messageText.setText(e)),this}getDefaultMessage(){return this._defaultMessage}destructor(){this._messageTimer!==null&&(clearTimeout(this._messageTimer),this._messageTimer=null),super.destructor()}},V=r(StatusBar),TabPanel=class extends o{constructor(e){if(super(e),this.setLayoutManager(new p(e?.tabOptions)),e?.tabs)for(let t of e.tabs)this.addTab(t.component,t.label,{closeable:t.closeable,glyph:t.glyph});e?.onTabClose&&this.getTab().on(`tabclose`,e.onTabClose)}addTab(e,t,n){let r=new v;return r.name=t,r.closeable=n?.closeable??!1,r.glyph=n?.glyph??null,this.addComponent(e,r),this}addLazyTab(e,t,n){let r=new v;return r.name=t,r.closeable=n?.closeable??!1,r.glyph=n?.glyph??null,this.getTab().addLazyTab(e,t,r),this}getTab(){return this.getLayoutManager()}},H=r(TabPanel),AccordionPanel=class extends o{constructor(e){if(super(e),this.setLayoutManager(new w),e?.singleOpen!==void 0&&this.getAccordion().setSingleOpen(e.singleOpen),e?.resizable!==void 0&&this.getAccordion().setResizable(e.resizable),e?.sections)for(let t of e.sections)this.addSection(t.component,t.label,t.initiallyOpen,t.glyph,t.tools,t.weight);e?.onSectionToggle&&this.getAccordion().on(`sectiontoggle`,e.onSectionToggle)}addSection(e,t,n,r,i,a){let o=new C(t,n,r,i);return a!==void 0&&(o.weight=a),this.addComponent(e,o),this}getAccordion(){return this.getLayoutManager()}},U=r(AccordionPanel);export{S as AccordionHeader,x as AccordionIndicator,U as AccordionPanel,_ as CollapseButton,f as Direction,M as FieldSet,I as LabeledFieldSet,P as LabeledGrid,k as Legend,b as MenuItem,y as MenuSeparator,L as STATUS_BAR_HEIGHT,u as ScrollStrip,a as Scrollbar,D as Spacer,g as SplitGutter,V as StatusBar,m as TabBar,H as TabPanel,O as VirtualScroller,d as WindowBorder,h as WindowHeader};
+//# sourceMappingURL=container.es.js.map

package/dist/lib/component/container.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.es.js","names":[],"sources":["../../../src/typescript/lib/component/container/Legend.ts","../../../src/typescript/lib/component/container/FieldSet.ts","../../../src/typescript/lib/component/container/LabeledGrid.ts","../../../src/typescript/lib/component/container/LabeledFieldSet.ts","../../../src/typescript/lib/component/container/StatusBar.ts","../../../src/typescript/lib/component/container/TabPanel.ts","../../../src/typescript/lib/component/container/AccordionPanel.ts"],"sourcesContent":["// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Text, TextOptions } from \"~/component/input/Text.js\"\nimport { Position } from \"~/primitive/Position.js\";\nimport { callable } from \"~/core/Callable.js\";\nimport type { Handle } from \"~/core/DOM.js\";\n\n/**\n * Construction-time options for {@link Legend}.\n *\n * @category Components\n */\nexport interface LegendOptions extends TextOptions {\n}\n\n/**\n * A legend component backed by a `<legend>` element.\n *\n * Uses static CSS positioning so the browser can render the title text inside a fieldset border.\n *\n * @category Components\n */\nclass Legend extends Text<LegendOptions> {\n\n    /** Left inset (px) so the title clears the fieldset's left border corner. */\n    private static readonly LEFT_MARGIN = 10;\n\n    constructor(options?: LegendOptions) {\n        // `tag` is structural — the element type is by definition `<legend>`.\n        super(undefined, {\n            ...(options ?? {}),\n            tag: \"legend\",\n        });\n\n        // `<legend>` only renders inside its fieldset's notch when positioned\n        // statically — the framework's \"every component is absolute\" rule\n        // would float the legend out of the border. Documented HTML-semantics\n        // exception alongside `FIXED` floating overlays. See\n        // ARCHITECTURE.md §Positioning.\n        this.setPosition(Position.STATIC);\n    }\n\n    /**\n     * Applies base styles, then re-asserts a left margin so the legend clears\n     * the fieldset's left border corner instead of hugging it. `Component`'s\n     * `applyStyle` zeroes the `margin` shorthand on every component, which\n     * strips the browser's default `<legend>` inset; this longhand write runs\n     * after `super` and overrides only the left side.\n     *\n     * @param element - The element handle to apply styles to.\n     */\n    applyStyle(element: Handle): this {\n        super.applyStyle(element);\n\n        this.setElementCSSRule(\"marginLeft\", `${Legend.LEFT_MARGIN}px`);\n\n        return this;\n    }\n}\n\nconst LegendCallable = callable(Legend);\ntype LegendCallable = Legend;\nexport {\n    Legend         as _Legend,\n    LegendCallable as Legend\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component, ComponentOptions } from \"~/core/Component.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport { Legend } from \"~/component/container/Legend.js\";\nimport { Insets } from \"~/primitive/Insets.js\";\nimport { Size } from \"~/primitive/Size.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Construction-time options for {@link FieldSet}.\n *\n * @category Components\n */\nexport interface FieldSetOptions extends ComponentOptions {\n    legend?: string;\n}\n\n/**\n * Subclass defaults layered into `Component._defaultOptions` via the second\n * super arg. Any field the caller omits falls back to one of these values via\n * the getters / `applyStyle`, which consult `_defaultOptions` directly — the\n * default is never dispatched into `_options`.\n */\nconst _defaultFieldSetOptions: Partial<FieldSetOptions> = {\n    tag:           \"fieldset\",\n    border:        \"var(--ts-ui-input-border)\",\n    borderRadius:  \"var(--ts-ui-border-radius, 4px)\",\n    // Intrinsic chrome carried as insets, not CSS padding. Top (5) is the gap\n    // above content; the legend's own reserved height is added separately in\n    // getPerimeterSize so it counts toward the box height without also pushing\n    // the child origin (a <fieldset> already offsets its absolutely positioned\n    // children below the legend). Sides/bottom (8) are the inner gutter.\n    insets:        new Insets(5, 8, 8, 8),\n    preferredSize: { width: 200, height: 200 },\n    minSize:       { width: 100, height: 100 },\n};\n\n/**\n * A fieldset component with an embedded legend title.\n *\n * Renders a `<fieldset>` element and prepends a Legend child for the group title.\n *\n * @category Components\n */\nclass FieldSet extends Component {\n\n    /** Legend clearance (px) used before the legend element can be measured. */\n    private static readonly LEGEND_CLEARANCE_FALLBACK = 16;\n\n    private _legend: Legend = new Legend();\n\n    /** Cached measured legend height; null until a positive measurement lands. */\n    private _legendClearance: number | null = null;\n\n    constructor(title: string = \"\", options?: FieldSetOptions, subclassDefaults?: Partial<FieldSetOptions>) {\n        super(options, { ..._defaultFieldSetOptions, ...(subclassDefaults ?? {}) });\n\n        this._legend.setText(title);\n        this._legend.setDisplayed(title !== \"\");\n    }\n\n    /**\n     * Applies a {@link FieldSetOptions} bag, dispatching the legend title text\n     * after inherited Component fields.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: FieldSetOptions): this {\n        super.applyOptions(options);\n\n        if (options.legend !== undefined) {\n            this.setTitle(options.legend);\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns the fieldset legend title text.\n     *\n     * @returns The current legend text string.\n     */\n    getTitle() {\n        return this._legend.getText();\n    }\n\n    /**\n     * Sets the fieldset legend title text.\n     *\n     * @param title - The text to display in the legend.\n     */\n    setTitle(title: string) : this {\n        this._legend.setText(title);\n        this._legend.setDisplayed(title !== \"\");\n        this.clampLegendWidth();\n\n        return this;\n    }\n\n    /**\n     * Clamps the legend's `max-width` to the fieldset's current inner width so\n     * a long title ellipsises inside the border notch instead of spilling out.\n     * The legend already carries `overflow:hidden; text-overflow:ellipsis;\n     * white-space:nowrap` (from `Text`'s `truncate:true`), so a `max-width` is\n     * the only missing piece for the ellipsis to engage.\n     *\n     * @returns This component, for method chaining.\n     *\n     * @remarks No-op until the first layout pass commits a width — `getWidth()`\n     * returns 0 on a detached / unsized fieldset. `doLayout()` re-runs the\n     * clamp once a width exists.\n     */\n    private clampLegendWidth(): this {\n        if (this.getTitle() === \"\") {\n            return this;\n        }\n\n        const width = this.getWidth();\n        if (width <= 0) {\n            return this;\n        }\n\n        const perim   = this.getPerimeterSize();\n        const chromeW = perim.left + perim.right;\n        const innerW  = Math.max(0, width - chromeW);\n\n        this._legend.setMaxSize(innerW, Number.MAX_VALUE);\n\n        return this;\n    }\n\n    /**\n     * Returns the minimum size, augmented to include the legend's measured\n     * width so the legend never spills out of the border notch. The legend is\n     * rendered statically by the browser (it's not in the framework layout\n     * tree), so `super.getMinSize()` from the layout manager doesn't see it.\n     *\n     * @returns The minimum `{width, height}`, ensuring the legend's text fits.\n     */\n    getMinSize(): Size | null {\n        if (this.getTitle() === \"\") {\n            return super.getMinSize();\n        }\n\n        const baseMin   = super.getMinSize();\n        const legendMin = this._legend.getMinSize();\n        if (!legendMin) {\n            return baseMin;\n        }\n\n        const perim   = this.getPerimeterSize();\n        const chromeW = perim.left + perim.right;\n\n        const fieldsetW = legendMin.width + chromeW;\n        if (!baseMin) {\n            return { width: fieldsetW, height: 0 };\n        }\n\n        return {\n            width:  Math.max(baseMin.width, fieldsetW),\n            height: baseMin.height,\n        };\n    }\n\n    /**\n     * Augments the top perimeter with the legend's reserved vertical space.\n     *\n     * A `<fieldset>` reserves room for its `<legend>` at the top of its content\n     * box automatically: absolutely positioned children begin below the legend\n     * regardless of the framework's insets, and the browser supplies that\n     * offset itself. {@link getInnerSize} must account for the same space or\n     * the bottom row overflows the border, so this adds the legend's height to\n     * the `top` perimeter. The child origin is deliberately left untouched —\n     * the content-inset origin derives from insets alone, and the browser\n     * already provides the matching downward offset, so adding it to the\n     * origin too would double-count it.\n     *\n     * The legend is browser-rendered chrome, not a framework-layout child, so\n     * its height is read from the element and cached. The measurement slightly\n     * over-reserves when the legend is raised into the border notch, which errs\n     * toward extra bottom space rather than clipping. Before the element can be\n     * measured a constant fallback is used and not cached, so the real height\n     * supersedes it on the first connected pass.\n     *\n     * @returns The base perimeter with the legend clearance added to `top`.\n     */\n    getPerimeterSize() {\n        const perim = super.getPerimeterSize();\n\n        perim.top += this.legendClearance();\n\n        return perim;\n    }\n\n    /**\n     * Returns the legend's reserved top clearance in pixels: the measured\n     * legend height once it is connected and laid out (cached after the first\n     * positive measurement), or {@link LEGEND_CLEARANCE_FALLBACK} until then.\n     *\n     * @returns The legend clearance in pixels.\n     */\n    private legendClearance(): number {\n        if (this.getTitle() === \"\") {\n            return 0;\n        }\n\n        if (this._legendClearance != null) {\n            return this._legendClearance;\n        }\n\n        // A modelled (no-browser) source has no native `<legend>` box to\n        // measure, so short-circuit to the fallback rather than reading\n        // `offsetHeight`, which is 0 or unavailable offline.\n        if (DOM.source.isModelled()) {\n            return FieldSet.LEGEND_CLEARANCE_FALLBACK;\n        }\n\n        const element = this._legend.getElement();\n\n        if (element && DOM.source.isConnected(element)) {\n            const offsetHeight = DOM.source.getOffsetSize(element).offsetHeight;\n\n            if (offsetHeight > 0) {\n                this._legendClearance = offsetHeight;\n\n                return this._legendClearance;\n            }\n        }\n\n        return FieldSet.LEGEND_CLEARANCE_FALLBACK;\n    }\n\n    /**\n     * Lays out the fieldset, then re-clamps the legend to the freshly committed\n     * inner width so the title ellipsis tracks fieldset resizes. The clamp runs\n     * post-layout because `getWidth()` only reports a real width once the layout\n     * pass has committed one.\n     *\n     * @returns This component, for method chaining.\n     */\n    doLayout(): this {\n        super.doLayout();\n        this.clampLegendWidth();\n\n        return this;\n    }\n\n    /**\n     * Renders the fieldset element and appends the legend as its first child.\n     *\n     * @returns The created HTMLFieldSetElement with the legend prepended.\n     */\n    render() {\n        let element = super.render();\n\n        DOM.sink.appendChild(element, this._legend.getElement(true)!);\n\n        return element;\n    }\n}\n\nconst FieldSetCallable = callable(FieldSet);\ntype FieldSetCallable = FieldSet;\nexport {\n    FieldSet         as _FieldSet,\n    FieldSetCallable as FieldSet\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component } from \"~/core/Component.js\";\nimport { Container, ContainerOptions } from \"~/core/Container.js\";\nimport { Grid } from \"~/layout/Grid.js\";\nimport { GridConstraints } from \"~/layout/GridConstraints.js\";\nimport { GridTrack } from \"~/layout/GridTrack.js\";\nimport { Text } from \"~/component/input/Text.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Default inter-cell spacing (px) for the internal form grid. Mirrors the\n * hand-rolled Binding demo's `spacing: 8` so a {@link LabeledGrid} matches the\n * reference labelled-form look without the caller restating it.\n */\nconst FIELD_SPACING_DEFAULT = 8;\n\n/**\n * A title/field pair: a label and the input it labels.\n *\n * @category Components\n */\nexport interface LabeledFieldDescriptor {\n\n    /** Label text rendered as a baseline-aligned `Text`. */\n    title: string;\n\n    /** The input/component placed beside the label. */\n    component: Component;\n}\n\n/**\n * One row of a {@link LabeledGrid}: either an array of pairs (one per logical\n * column, left-to-right; a short array leaves trailing columns empty), or a\n * single component that spans every column (status lines, button bars).\n *\n * @category Components\n */\nexport type LabeledRowDescriptor =\n    | LabeledFieldDescriptor[]\n    | { component: Component; fullWidth: true };\n\n/**\n * Construction-time options for {@link LabeledGrid}.\n *\n * @category Components\n */\nexport interface LabeledGridOptions extends ContainerOptions {\n\n    /** Logical title/field columns laid side by side. Default `1`. */\n    columns?: number;\n\n    /** Inter-cell spacing in px for the grid. Default mirrors the demo's `8`. */\n    fieldSpacing?: number;\n\n    /** Declarative rows, applied in order at construction via the same path as `addRow`. */\n    rows?: LabeledRowDescriptor[];\n}\n\n/**\n * A chrome-less baseline-aligned title/field grid, rendered in a plain `<div>`\n * with no border and no legend. {@link LabeledFieldSet} composes one of these\n * inside its `<fieldset>` chrome; use `LabeledGrid` directly wherever the\n * baseline-aligned form layout is wanted without the fieldset border/legend.\n *\n * The body is a single [`Grid`](/api/layout/classes/Grid) in\n * `baselineAlign` mode with `2 × columns` grid-columns: each logical column is\n * a content-sized title track followed by a weight-sized input track, so titles\n * hug their text while inputs share a common right edge per column. Pairs flow\n * left-to-right and wrap to a new row when the current one fills; a full-width\n * row spans every column via [`GridConstraints`](/api/layout/classes/GridConstraints)\n * `colSpan`.\n *\n * @category Components\n */\nclass LabeledGrid extends Container<LabeledGridOptions> {\n\n    /** Logical title/field column count (the grid has `2 ×` this many grid-columns). */\n    private _columns: number;\n\n    /** The internal baseline grid; its `rows`/`rowTracks` grow as rows are added. */\n    private _grid: Grid;\n\n    /** Next free grid-column on the current flow row (0-based, in grid-columns). */\n    private _flowCol: number = 0;\n\n    /** Running grid-row count, pushed into the grid's `rows` + `rowTracks`. */\n    private _rowCount: number = 0;\n\n    /**\n     * Builds the grid, installs the internal baseline grid, and replays any\n     * declarative `rows`.\n     *\n     * @param options - Grid structure: `columns`, `fieldSpacing`, `rows`.\n     */\n    constructor(options?: LabeledGridOptions) {\n        super(options);\n\n        this._columns = options?.columns ?? 1;\n\n        this._grid = new Grid({\n            baselineAlign: true,\n            columns:       2 * this._columns,\n            spacing:       options?.fieldSpacing ?? FIELD_SPACING_DEFAULT,\n            columnTracks:  this.buildColumnTracks(),\n            rows:          0,\n            rowTracks:     [],\n        });\n\n        this.setLayoutManager(this._grid);\n\n        if (options?.rows) {\n            this.applyRows(options.rows);\n        }\n    }\n\n    /**\n     * Appends one title/field pair into the next free logical column, flowing to\n     * a new row when the current one fills.\n     *\n     * @param title - Label text placed in the content (title) column.\n     * @param component - The input placed in the weight (field) column.\n     * @returns This component, for method chaining.\n     */\n    addField(title: string, component: Component): this {\n        this.openRow();\n\n        this.addComponent(new Text(title));\n        this.addComponent(component);\n\n        this._flowCol += 2;\n\n        if (this._flowCol >= 2 * this._columns) {\n            this._flowCol = 0;\n        }\n\n        return this;\n    }\n\n    /**\n     * Appends a full row of pairs (one per logical column; trailing columns are\n     * left empty for a short array).\n     *\n     * @param fields - The pairs to place across the row, left-to-right.\n     * @returns This component, for method chaining.\n     */\n    addRow(fields: LabeledFieldDescriptor[]): this {\n        this.finishRow();\n\n        for (const field of fields) {\n            this.addField(field.title, field.component);\n        }\n\n        this.finishRow();\n\n        return this;\n    }\n\n    /**\n     * Appends a component spanning every column on its own row.\n     *\n     * @param component - The component to span the full grid width.\n     * @returns This component, for method chaining.\n     */\n    addFullWidthRow(component: Component): this {\n        this.finishRow();\n        this.openRow();\n\n        const constraints = new GridConstraints();\n        constraints.colSpan = 2 * this._columns;\n\n        this.addComponent(component, constraints);\n\n        return this;\n    }\n\n    /**\n     * Returns the configured logical column count.\n     *\n     * @returns The number of side-by-side title/field columns.\n     */\n    getColumns(): number {\n        return this._columns;\n    }\n\n    /**\n     * Builds the `2 × columns` grid-column tracks: for each logical column a\n     * content-sized title track (hugs its text) followed by a weight-sized input\n     * track (takes the slack so inputs share a right edge).\n     *\n     * @returns The column tracks for the internal grid.\n     */\n    private buildColumnTracks(): GridTrack[] {\n        const tracks: GridTrack[] = [];\n\n        for (let column = 0; column < this._columns; column++) {\n            tracks.push({ mode: \"content\" });\n            tracks.push({ mode: \"weight\", value: 1 });\n        }\n\n        return tracks;\n    }\n\n    /**\n     * Replays the declarative `rows` option through the same add path as the\n     * imperative API, so construction and runtime calls share one code path.\n     *\n     * @param rows - The declarative row descriptors to apply, in order.\n     */\n    private applyRows(rows: LabeledRowDescriptor[]): void {\n        for (const row of rows) {\n            if (Array.isArray(row)) {\n                this.addRow(row);\n            } else {\n                this.addFullWidthRow(row.component);\n            }\n        }\n    }\n\n    /**\n     * Opens a new flow row when the first cell of one is about to be added,\n     * bumping the running row count and growing the grid so its baseline\n     * auto-flow does not stop short of the new row.\n     */\n    private openRow(): void {\n        if (this._flowCol === 0) {\n            this._rowCount++;\n            this.growRows();\n        }\n    }\n\n    /**\n     * Pads any partially-filled flow row with empty spacer cells so the next row\n     * starts at grid-column 0. The spacers carry no preferred size, contributing\n     * 0 to the grid's content measurement.\n     */\n    private finishRow(): void {\n        if (this._flowCol === 0) {\n            return;\n        }\n\n        const remaining = 2 * this._columns - this._flowCol;\n\n        for (let cell = 0; cell < remaining; cell++) {\n            this.addComponent(new Component());\n        }\n\n        this._flowCol = 0;\n    }\n\n    /**\n     * Re-sizes the grid's row count and row tracks to the running row total.\n     * Every row track is `content`-sized so inputs keep their natural height.\n     */\n    private growRows(): void {\n        this._grid.setRows(this._rowCount);\n        this._grid.setRowTracks(Array.from({ length: this._rowCount }, () => ({ mode: \"content\" as const })));\n    }\n}\n\nconst LabeledGridCallable = callable(LabeledGrid);\ntype LabeledGridCallable = LabeledGrid;\nexport {\n    LabeledGrid         as _LabeledGrid,\n    LabeledGridCallable as LabeledGrid\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component } from \"~/core/Component.js\";\nimport { Fit } from \"~/layout/Fit.js\";\nimport { LabeledGrid, LabeledGridOptions, LabeledFieldDescriptor } from \"~/component/container/LabeledGrid.js\";\nimport { _FieldSet, FieldSetOptions } from \"~/component/container/FieldSet.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Construction-time options for {@link LabeledFieldSet}.\n *\n * @category Components\n */\nexport interface LabeledFieldSetOptions extends FieldSetOptions, LabeledGridOptions {}\n\n/**\n * Subclass defaults layered under the caller's options. Clears the base\n * FieldSet's fixed 200x200 preferred size and fixed 100x100 min size: a\n * labeled fieldset is exactly as large as its computed grid content, so the\n * fixed values would otherwise pad a short form with dead space (preferred)\n * or force a min floor no tiny form needs (min). With both cleared,\n * `Component.getPreferredSize` / `getMinSize` fall through to the internal\n * grid (forwarded through the `Fit` layout), whose reports already add the\n * legend clearance and insets.\n */\nconst _defaultLabeledFieldSetOptions: Partial<LabeledFieldSetOptions> = {\n    preferredSize: undefined,\n    minSize:       undefined,\n};\n\n/**\n * A {@link FieldSet} whose content is a baseline-aligned form of title/field\n * pairs, generalising the hand-rolled labelled-form pattern from the Binding\n * demo into a reusable container.\n *\n * `LabeledFieldSet` composes a {@link LabeledGrid} inside its `<fieldset>`\n * chrome via a `Fit` layout: `LabeledFieldSet` = a `LabeledGrid` inside a\n * `FieldSet`. Use a bare `LabeledGrid` directly when the baseline-aligned\n * form layout is wanted without the fieldset border/legend.\n *\n * @category Components\n */\nclass LabeledFieldSet extends _FieldSet {\n\n    /** The internal chrome-less grid this fieldset composes. */\n    private _labeledGrid: LabeledGrid;\n\n    /**\n     * Builds the fieldset chrome and installs an internal {@link LabeledGrid}\n     * via a `Fit` layout.\n     *\n     * @param title - The legend title (forwarded to {@link FieldSet}).\n     * @param options - Form structure: `columns`, `fieldSpacing`, `rows`.\n     * @param subclassDefaults - Defaults a subclass layers under the caller's options.\n     */\n    constructor(title: string = \"\", options?: LabeledFieldSetOptions, subclassDefaults?: Partial<LabeledFieldSetOptions>) {\n        super(title, options, { ..._defaultLabeledFieldSetOptions, ...(subclassDefaults ?? {}) });\n\n        this._labeledGrid = new LabeledGrid({\n            columns:      options?.columns,\n            fieldSpacing: options?.fieldSpacing,\n            rows:         options?.rows,\n        });\n\n        this.setLayoutManager(new Fit());\n        this.addComponent(this._labeledGrid);\n    }\n\n    /**\n     * Appends one title/field pair into the next free logical column, flowing to\n     * a new row when the current one fills.\n     *\n     * @param title - Label text placed in the content (title) column.\n     * @param component - The input placed in the weight (field) column.\n     * @returns This component, for method chaining.\n     */\n    addField(title: string, component: Component): this {\n        this._labeledGrid.addField(title, component);\n\n        return this;\n    }\n\n    /**\n     * Appends a full row of pairs (one per logical column; trailing columns are\n     * left empty for a short array).\n     *\n     * @param fields - The pairs to place across the row, left-to-right.\n     * @returns This component, for method chaining.\n     */\n    addRow(fields: LabeledFieldDescriptor[]): this {\n        this._labeledGrid.addRow(fields);\n\n        return this;\n    }\n\n    /**\n     * Appends a component spanning every column on its own row.\n     *\n     * @param component - The component to span the full form width.\n     * @returns This component, for method chaining.\n     */\n    addFullWidthRow(component: Component): this {\n        this._labeledGrid.addFullWidthRow(component);\n\n        return this;\n    }\n\n    /**\n     * Returns the configured logical column count.\n     *\n     * @returns The number of side-by-side title/field columns.\n     */\n    getColumns(): number {\n        return this._labeledGrid.getColumns();\n    }\n\n    /**\n     * Typed accessor for the internally-composed {@link LabeledGrid}. Use it\n     * to inspect the grid's cells directly (e.g. `getGrid().getComponents()`).\n     *\n     * @returns The wrapped `LabeledGrid` instance.\n     */\n    getGrid(): LabeledGrid {\n        return this._labeledGrid;\n    }\n}\n\nconst LabeledFieldSetCallable = callable(LabeledFieldSet);\ntype LabeledFieldSetCallable = LabeledFieldSet;\nexport {\n    LabeledFieldSet         as _LabeledFieldSet,\n    LabeledFieldSetCallable as LabeledFieldSet\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Component } from \"~/core/Component.js\";\nimport { Container, ContainerOptions } from \"~/core/Container.js\";\nimport { Text } from \"~/component/input/Text.js\";\nimport { HBox } from \"~/layout/HBox.js\";\nimport { Insets } from \"~/primitive/Insets.js\";\nimport { callable } from \"~/core/Callable.js\";\nimport { Spacer } from \"./Spacer\";\n\n/**\n * Fixed strip height for every `StatusBar` instance. Kept in lockstep with the\n * `--ts-ui-statusbar-height` token in [Theme.ts](/api/core/interfaces/Theme);\n * changing one without the other lets the bar grow taller than its chrome\n * background suggests.\n */\nexport const STATUS_BAR_HEIGHT: number = 22;\n\n/**\n * Pixel width of the bar's top separator border. Hardcoded rather than\n * read from the theme because the value is part of the bar's box-model\n * arithmetic — it determines the inner content height\n * (`STATUS_BAR_HEIGHT - STATUS_BAR_BORDER_TOP_WIDTH`) that the message\n * text line-height must match for vertical centring. A theme that wanted\n * a thicker rule would have to bump `STATUS_BAR_HEIGHT` in lockstep.\n */\nconst STATUS_BAR_BORDER_TOP_WIDTH: number = 1;\n\n/**\n * Gap between adjacent status-bar widgets. Carries over the spacing the\n * former per-zone `HBox`es used; the outer row previously used 0 because\n * the zones butted against the flex spacer, which absorbs any gap anyway.\n */\nconst STATUS_BAR_SPACING: number = 4;\n\n/**\n * Construction-time options for {@link StatusBar}.\n *\n * @category Components\n */\nexport interface StatusBarOptions extends ContainerOptions {\n    /** Initial transient message shown at the start of the row. */\n    message?:        string;\n    /**\n     * Fallback message restored when a timed {@link StatusBar.setMessage}\n     * call expires. Defaults to the empty string.\n     */\n    defaultMessage?: string;\n}\n\n/**\n * User-overridable defaults forwarded to `super` via the options bag. The\n * cascade in [`Component`](/api/core/classes/Component)'s constructor\n * dispatches each present setter once with the final value. `message` and\n * `defaultMessage` are written pure to `_options` by `applyOptions` and\n * dispatched from the constructor body once the internal\n * [`Text`](/api/component/input/classes/Text) child exists.\n */\nconst _defaultStatusBarOptions: Partial<StatusBarOptions> = {\n    insets: new Insets(0, 6, 0, 6),\n};\n\n/**\n * A thin horizontal strip mounted at the bottom of a window or panel that\n * surfaces a transient status message and small persistent indicators.\n *\n * `StatusBar` extends [`Container`](/api/core/classes/Container) and wraps a\n * single, non-stretching [`HBox`](/api/layout/classes/HBox) row: the message\n * [`Text`](/api/component/input/classes/Text), a flex spacer, then the\n * right-hand widgets. Every widget in the row is baseline-aligned to the\n * message text — a widget exposing a real baseline (`Text`, `Glyph`,\n * `IconText`, a labelled `Button`, `ProgressBar`, `ProgressSpinner`, or a\n * container laid out by a non-stretching `HBox`/`VBox`) lines its baseline up\n * with the message's; a baseline-less widget is centred in the message's text\n * line instead. Insert additional widgets via `addLeft` / `addRight` — for\n * example an [`IconText`](/api/component/display/classes/IconText) for a\n * connection light, a small [`ProgressBar`](/api/component/display/classes/ProgressBar),\n * or a [`ProgressSpinner`](/api/component/display/classes/ProgressSpinner).\n *\n * Widgets must be no taller than **21px** (`STATUS_BAR_HEIGHT` minus the 1px\n * top border) to fit without clipping. A stock `flat`+`compact` glyph-only\n * `Button` is 22px and does not fit — call `pinGlyphSize(14)` to bring it to\n * 20px before adding it.\n *\n * The strip is a single screen-reader live region (`role=\"status\"`,\n * `aria-live=\"polite\"`) so widget mutations announce politely without\n * per-widget opt-in.\n *\n * @example\n * ```typescript\n * const sb = new StatusBar({ defaultMessage: \"Ready\" });\n * sb.setMessage(\"Saved\", 2000);\n * container.addComponent(sb);\n * ```\n *\n * @category Components\n */\nclass StatusBar extends Container<StatusBarOptions> {\n\n    private _message:        string         = \"\";\n    private _defaultMessage: string         = \"\";\n    private _messageTimer:   number | null  = null;\n    private _messageText!:   Text;\n    private _spacer!:        Spacer;   // the flex pivot: left widgets before it, right widgets after\n\n    /**\n     * Constructs a `StatusBar` with optional initial message and default\n     * message.\n     *\n     * @param options - Optional configuration bag. See {@link StatusBarOptions}\n     *   for caller-overridable fields.\n     */\n    constructor(options?: StatusBarOptions) {\n        super(options, _defaultStatusBarOptions);\n\n        const row = new HBox();\n        row.setComponentSpacing(STATUS_BAR_SPACING);   // 4 — the zones' former internal spacing\n        this.setLayoutManager(row);                    // stretching stays at its default (false) — that's what we want\n\n        this.setBackgroundColor(\"var(--ts-ui-statusbar-bg, rgb(245, 245, 245))\");\n        this.setForegroundColor(\"var(--ts-ui-statusbar-color, rgb(60, 60, 60))\");\n        this.setBorder({ borderTop: `${STATUS_BAR_BORDER_TOP_WIDTH}px solid var(--ts-ui-statusbar-border, rgb(220, 220, 220))` });\n        this.setMinSize(0,                       STATUS_BAR_HEIGHT);\n        this.setMaxSize(Number.MAX_SAFE_INTEGER, STATUS_BAR_HEIGHT);\n\n        this._messageText = new Text(\"\");\n        // The bar's row anchor, not cosmetic padding: a 21px line box (the strip\n        // height minus its top border) gives this Text a 21px preferred height and\n        // a baseline of 16 rather than 16px/13. That deep baseline becomes the\n        // row's rowAscent — what every other widget aligns to — and the 21px line\n        // box is what makes the row exactly fill the band, so a baseline-less\n        // widget is centred against 21px rather than a shorter text line. HBox has\n        // no cross-axis centring (CENTER is inert in BoxLayout.crossPlacement), so\n        // this anchor is the only thing centring the bar's content. Removing it\n        // drops rowAscent to 13 and top-anchors the whole row.\n        this._messageText.centerInHeight(STATUS_BAR_HEIGHT - STATUS_BAR_BORDER_TOP_WIDTH);\n\n        this._spacer = Spacer.flex();\n\n        this.addComponent(this._messageText);\n        this.addComponent(this._spacer);\n\n        this.getAria().setRole(\"status\");\n        this.getAria().setLive(\"polite\");\n\n        if (this._options.defaultMessage !== undefined) {\n            this._defaultMessage = this._options.defaultMessage;\n        }\n        if (this._options.message !== undefined) {\n            this.setMessage(this._options.message);\n        } else if (this._defaultMessage !== \"\") {\n            this._message = this._defaultMessage;\n            this._messageText.setText(this._defaultMessage);\n        }\n    }\n\n    /**\n     * Applies a {@link StatusBarOptions} bag. Inherited Container fields cascade\n     * through `super.applyOptions`; the `message` and `defaultMessage` fields\n     * are written pure to `_options` here and dispatched from the constructor\n     * body once the internal message [`Text`](/api/component/input/classes/Text)\n     * exists.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: StatusBarOptions): this {\n        super.applyOptions(options);\n\n        if (options.message        !== undefined) this._options.message        = options.message;\n        if (options.defaultMessage !== undefined) this._options.defaultMessage = options.defaultMessage;\n\n        return this;\n    }\n\n    /**\n     * Inserts a component before the flex pivot, after the message\n     * [`Text`](/api/component/input/classes/Text) and any previously-added\n     * left widgets. Baseline-aligned to the message text; widgets should be\n     * no taller than 21px (`STATUS_BAR_HEIGHT` minus the 1px top border).\n     *\n     * @param component - The component to insert. Widgets should be small —\n     *   the bar height is fixed at {@link STATUS_BAR_HEIGHT}px.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    addLeft(component: Component): this {\n        this.insertComponent(component, this.getComponents().indexOf(this._spacer));\n\n        return this;\n    }\n\n    /**\n     * Appends a component after the flex pivot. Baseline-aligned to the\n     * message text; widgets should be no taller than 21px\n     * (`STATUS_BAR_HEIGHT` minus the 1px top border).\n     *\n     * @param component - The component to append. Widgets should be small —\n     *   the bar height is fixed at {@link STATUS_BAR_HEIGHT}px.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    addRight(component: Component): this {\n        this.addComponent(component);\n\n        return this;\n    }\n\n    /**\n     * Removes a component previously added via {@link addLeft}. No-op if\n     * `component` is not a child of this bar.\n     *\n     * @param component - The component to remove.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    removeLeft(component: Component): this {\n        this.removeComponent(component);\n\n        return this;\n    }\n\n    /**\n     * Removes a component previously added via {@link addRight}. No-op if\n     * `component` is not a child of this bar.\n     *\n     * @param component - The component to remove.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    removeRight(component: Component): this {\n        this.removeComponent(component);\n\n        return this;\n    }\n\n    /**\n     * Replaces the visible status message. When `timeoutMs` is supplied, the\n     * default message is restored after that delay. A subsequent\n     * `setMessage` call cancels any pending revert.\n     *\n     * @param text - The new message string.\n     * @param timeoutMs - Optional. Milliseconds before the default message\n     *   is restored. Omit (or pass `0` / a negative value) for a persistent\n     *   message.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    setMessage(text: string, timeoutMs?: number): this {\n        if (this._messageTimer !== null) {\n            clearTimeout(this._messageTimer);\n            this._messageTimer = null;\n        }\n\n        this._message = text;\n        this._messageText.setText(text);\n\n        if (timeoutMs !== undefined && timeoutMs > 0) {\n            this._messageTimer = setTimeout(() => {\n                this._messageTimer = null;\n                this._message      = this._defaultMessage;\n                this._messageText.setText(this._defaultMessage);\n            }, timeoutMs);\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns the currently-visible message string.\n     *\n     * @returns The current message.\n     */\n    getMessage(): string {\n        return this._message;\n    }\n\n    /**\n     * Cancels any pending revert and reverts to the default message\n     * immediately.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    clearMessage(): this {\n        return this.setMessage(this._defaultMessage);\n    }\n\n    /**\n     * Sets the fallback message used when a timed {@link StatusBar.setMessage}\n     * call expires. When no transient message is currently in flight (i.e.\n     * no pending timer), the visible message is updated immediately so a\n     * freshly configured `StatusBar` shows the new default.\n     *\n     * @param text - The new default message.\n     *\n     * @returns This status bar, for method chaining.\n     */\n    setDefaultMessage(text: string): this {\n        this._defaultMessage = text;\n\n        if (this._messageTimer === null) {\n            this._message = text;\n            this._messageText.setText(text);\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns the configured default message.\n     *\n     * @returns The current default message.\n     */\n    getDefaultMessage(): string {\n        return this._defaultMessage;\n    }\n\n    /**\n     * Clears any pending message-revert timer before the inherited\n     * destructor detaches the element, preventing a stray `setTimeout`\n     * callback from writing into a detached\n     * [`Text`](/api/component/input/classes/Text).\n     */\n    protected destructor() {\n        if (this._messageTimer !== null) {\n            clearTimeout(this._messageTimer);\n            this._messageTimer = null;\n        }\n\n        super.destructor();\n    }\n}\n\nconst StatusBarCallable = callable(StatusBar);\ntype StatusBarCallable = StatusBar;\nexport {\n    StatusBar         as _StatusBar,\n    StatusBarCallable as StatusBar,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Container, ContainerOptions } from \"~/core/Container.js\";\nimport { Component } from \"~/core/Component.js\";\nimport { LayoutConstraints } from \"~/layout/LayoutConstraints.js\";\nimport { Tab, TabOptions } from \"~/layout/Tab.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * One entry in a {@link TabPanel}'s `tabs` options array.\n *\n * @category Components\n */\nexport interface TabEntryConfig {\n    /** Label rendered in the tab button. */\n    label:      string;\n    /** Component shown in the content area when this tab is selected. */\n    component:  Component;\n    /** When `true`, a close button appears on the tab button. */\n    closeable?: boolean;\n    /** Optional registry glyph name shown leading the tab button's label. */\n    glyph?:     string;\n}\n\n/**\n * Construction-time options for {@link TabPanel}.\n *\n * @category Components\n */\nexport interface TabPanelOptions extends ContainerOptions {\n    /** Optional initial set of tabs; each entry maps to one `addTab` call. */\n    tabs?:       TabEntryConfig[];\n    /**\n     * Optional callback fired when the user closes a tab via its close\n     * button. Receives the closed tab's content component.\n     */\n    onTabClose?: (component: Component) => void;\n    /**\n     * Construction-time options for the wrapped {@link Tab} manager (strip\n     * placement, width mode, scrolling, tools, compact, reorder, …). Passed\n     * straight to the manager's constructor.\n     */\n    tabOptions?: TabOptions;\n}\n\n/**\n * A [`Container`](/api/core/classes/Container) subclass that owns an internal\n * [`Tab`](/api/layout/classes/Tab) layout manager and exposes a tab-typed\n * `addTab` / `addLazyTab` surface so consumers do not have to wire\n * `new Container({ layoutManager: new Tab() })` themselves. The bare\n * Container + Tab manager path still works unchanged; `TabPanel` is the\n * convenience entry point.\n *\n * Strip-level tuning (placement, width mode, scrolling, tools, …) is reached\n * through {@link getTab}, the typed accessor for the wrapped manager, rather\n * than a mirrored forwarder per setter.\n *\n * @example\n * ```typescript\n * import { TabPanel } from '@jimka/typescript-ui/component/container';\n *\n * const tabs = new TabPanel({\n *     tabs: [\n *         { label: 'Alpha', component: alphaPanel },\n *         { label: 'Beta',  component: betaPanel, closeable: true },\n *     ],\n *     onTabClose: c => console.log(\"Closed\", c.getId()),\n * });\n *\n * tabs.getTab().setSide(\"west\");\n * ```\n *\n * @category Components\n */\nclass TabPanel<TOptions extends TabPanelOptions = TabPanelOptions> extends Container<TOptions> {\n\n    /**\n     * Wires the panel to an internal `Tab` manager, dispatches the optional\n     * `tabs` / `onTabClose` options to the relevant setters.\n     *\n     * @param options - Optional construction-time options applied to the panel.\n     */\n    constructor(options?: TOptions) {\n        super(options);\n\n        // Set the layout manager unconditionally — even if the caller passed\n        // `layoutManager` via the options bag, `TabPanel`'s identity is the\n        // `Tab` manager. Override-by-options would defeat the class. The strip\n        // configuration rides in as the manager's own options bag.\n        this.setLayoutManager(new Tab(options?.tabOptions));\n\n        if (options?.tabs) {\n            for (const entry of options.tabs) {\n                this.addTab(entry.component, entry.label, { closeable: entry.closeable, glyph: entry.glyph });\n            }\n        }\n\n        if (options?.onTabClose) {\n            this.getTab().on(\"tabclose\", options.onTabClose);\n        }\n    }\n\n    /**\n     * Adds a tab to the panel's internal `Tab` manager.\n     *\n     * @param component - The content shown when this tab is selected.\n     * @param label - The tab button's label.\n     * @param options - Optional. Supports `{ closeable: true }` and a leading `glyph` name.\n     *\n     * @returns This panel, for method chaining.\n     */\n    addTab(component: Component, label: string, options?: { closeable?: boolean; glyph?: string }): this {\n        const constraints = new LayoutConstraints();\n        constraints.name      = label;\n        constraints.closeable = options?.closeable ?? false;\n        constraints.glyph     = options?.glyph ?? null;\n\n        this.addComponent(component, constraints);\n\n        return this;\n    }\n\n    /**\n     * Registers a lazy tab. The factory runs on first activation; until then\n     * the panel reserves the tab slot and shows a spinner placeholder when\n     * the user selects the tab. Forwards to the wrapped `Tab.addLazyTab`.\n     *\n     * @param factory - Builds the content component on first activation.\n     * @param label - The tab button's label.\n     * @param options - Optional. Supports `{ closeable: true }` and a leading `glyph` name.\n     *\n     * @returns This panel, for method chaining.\n     */\n    addLazyTab(factory: () => Component, label: string, options?: { closeable?: boolean; glyph?: string }): this {\n        const constraints = new LayoutConstraints();\n        constraints.name      = label;\n        constraints.closeable = options?.closeable ?? false;\n        constraints.glyph     = options?.glyph ?? null;\n\n        this.getTab().addLazyTab(factory, label, constraints);\n\n        return this;\n    }\n\n    /**\n     * Typed accessor for the internally-owned `Tab` manager. Use it to reach\n     * strip-level configuration (placement, width mode, scrolling, tools,\n     * events, …) and per-tab operations without casting `getLayoutManager()`.\n     *\n     * @returns The wrapped `Tab` instance.\n     */\n    getTab(): Tab {\n        return this.getLayoutManager() as Tab;\n    }\n}\n\nconst TabPanelCallable = callable(TabPanel);\ntype TabPanelCallable<TOptions extends TabPanelOptions = TabPanelOptions> = TabPanel<TOptions>;\nexport {\n    TabPanel         as _TabPanel,\n    TabPanelCallable as TabPanel,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n\nimport { Container, ContainerOptions } from \"~/core/Container.js\";\nimport { Component } from \"~/core/Component.js\";\nimport { Accordion, SectionToggleCallback } from \"~/layout/Accordion.js\";\nimport { AccordionConstraints } from \"~/layout/AccordionConstraints.js\";\nimport { LayoutConstraints } from \"~/layout/LayoutConstraints.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * One entry in an {@link AccordionPanel}'s `sections` options array.\n *\n * @category Components\n */\nexport interface AccordionSectionConfig {\n    /** Label rendered in the section's header button. */\n    label:          string;\n    /** Component shown inside the section's content area when expanded. */\n    component:      Component;\n    /** Whether the section starts expanded. Defaults to `false` if omitted. */\n    initiallyOpen?: boolean;\n    /** Optional registry glyph name shown leading the section's header label. */\n    glyph?:         string;\n    /** Optional per-section tool components shown in this section's header. */\n    tools?:         Component[];\n    /**\n     * Optional share of the accordion's leftover height this section fills when\n     * the open sections underflow. `0`/omitted sits at preferred height; a\n     * positive weight grows the section by its fraction of the total fill weight.\n     * See {@link LayoutConstraints.weight}.\n     */\n    weight?:        number;\n}\n\n/**\n * Construction-time options for {@link AccordionPanel}.\n *\n * @category Components\n */\nexport interface AccordionPanelOptions extends ContainerOptions {\n    /** Optional initial sections; each entry maps to one `addSection` call. */\n    sections?:        AccordionSectionConfig[];\n    /** Mirrors `Accordion.setSingleOpen` — only one section open at a time. */\n    singleOpen?:      boolean;\n    /** Mirrors `Accordion.setResizable` — draggable gutters between open sections. */\n    resizable?:       boolean;\n    /** Optional callback fired when a section opens or closes. */\n    onSectionToggle?: SectionToggleCallback;\n}\n\n/**\n * A [`Container`](/api/core/classes/Container) subclass that owns an internal\n * [`Accordion`](/api/layout/classes/Accordion) layout manager and exposes a\n * section-typed `addSection` surface so consumers do not have to wire\n * `new Container({ layoutManager: new Accordion() })` themselves. The bare\n * Container + Accordion manager path still works unchanged; `AccordionPanel`\n * is the convenience entry point.\n *\n * Section operations (open/close, single-open mode, toggle events) are reached\n * through {@link getAccordion}, the typed accessor for the wrapped manager,\n * rather than a mirrored forwarder per method.\n *\n * @example\n * ```typescript\n * import { AccordionPanel } from '@jimka/typescript-ui/component/container';\n *\n * const acc = new AccordionPanel({\n *     singleOpen: true,\n *     sections: [\n *         { label: 'Profile',     component: profilePanel, initiallyOpen: true },\n *         { label: 'Preferences', component: prefsPanel },\n *     ],\n * });\n *\n * acc.getAccordion().openSection(1);\n * ```\n *\n * @category Components\n */\nclass AccordionPanel<TOptions extends AccordionPanelOptions = AccordionPanelOptions> extends Container<TOptions> {\n\n    /**\n     * Wires the panel to an internal `Accordion` manager, dispatches the\n     * optional `sections` / `singleOpen` / `onSectionToggle` options to the\n     * relevant setters.\n     *\n     * @param options - Optional construction-time options applied to the panel.\n     */\n    constructor(options?: TOptions) {\n        super(options);\n\n        // Set the layout manager unconditionally — even if the caller passed\n        // `layoutManager` via the options bag, `AccordionPanel`'s identity is\n        // the `Accordion` manager. Override-by-options would defeat the class.\n        this.setLayoutManager(new Accordion());\n\n        if (options?.singleOpen !== undefined) {\n            this.getAccordion().setSingleOpen(options.singleOpen);\n        }\n\n        if (options?.resizable !== undefined) {\n            this.getAccordion().setResizable(options.resizable);\n        }\n\n        if (options?.sections) {\n            for (const section of options.sections) {\n                this.addSection(section.component, section.label, section.initiallyOpen, section.glyph, section.tools, section.weight);\n            }\n        }\n\n        if (options?.onSectionToggle) {\n            this.getAccordion().on(\"sectiontoggle\", options.onSectionToggle);\n        }\n    }\n\n    /**\n     * Adds a section to the panel's internal `Accordion` manager.\n     *\n     * @param component - The content shown inside the section.\n     * @param label - The section header's label.\n     * @param initiallyOpen - Optional. Whether the section starts expanded; defaults to `false`.\n     * @param glyph - Optional. Registry glyph name shown leading the header label.\n     * @param tools - Optional. Per-section tool components for this header.\n     * @param weight - Optional. Share of the accordion's leftover height this\n     *   section fills when the open sections underflow (see\n     *   {@link LayoutConstraints.weight}).\n     *\n     * @returns This panel, for method chaining.\n     */\n    addSection(component: Component, label: string, initiallyOpen?: boolean, glyph?: string, tools?: Component[], weight?: number): this {\n        const constraints = new AccordionConstraints(label, initiallyOpen, glyph, tools);\n\n        if (weight !== undefined) {\n            constraints.weight = weight;\n        }\n\n        this.addComponent(component, constraints);\n\n        return this;\n    }\n\n    /**\n     * Typed accessor for the internally-owned `Accordion` manager. Use it to\n     * reach section operations (open/close, single-open mode, toggle events)\n     * without casting `getLayoutManager()`.\n     *\n     * @returns The wrapped `Accordion` instance.\n     */\n    getAccordion(): Accordion {\n        return this.getLayoutManager() as Accordion;\n    }\n}\n\nconst AccordionPanelCallable = callable(AccordionPanel);\ntype AccordionPanelCallable<TOptions extends AccordionPanelOptions = AccordionPanelOptions> = AccordionPanel<TOptions>;\nexport {\n    AccordionPanel         as _AccordionPanel,\n    AccordionPanelCallable as AccordionPanel,\n};\n"],"mappings":"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"}

package/dist/lib/component/diagram.es.js

@@ -0,0 +1,2 @@
+import{n as e,u as t}from"../Position-B-WfZYAJ.js";import{c as n,f as r,t as i,y as a}from"../Component-BR2f0Itb.js";import{t as o}from"../ListenerBag-WPdKuuds.js";import{t as s}from"../Container-3KsvsJ6S.js";import{t as c}from"../Panel-DIsdaqc2.js";import{t as l}from"../Fit-CFIr4P9R.js";import{t as u}from"../Text-D1RrBY52.js";import{t as d}from"../IconText-BvGfu7eq.js";var f=120,p=40;function mergeLayoutOptions(...e){let t={};for(let n of e)n&&Object.assign(t,n);return t}var m={"elk.padding":`[top=34,left=12,bottom=12,right=12]`};function mapDiagramNode(e,t){if(e.children&&e.children.length>0)return{id:e.id,layoutOptions:mergeLayoutOptions(m,e.layoutOptions),children:e.children.map(e=>mapDiagramNode(e,t))};let n=t.get(e.id);return{id:e.id,width:e.width??n?.width??f,height:e.height??n?.height??p,layoutOptions:e.layoutOptions,ports:e.ports?.map(e=>({id:e.id,x:e.x,y:e.y,width:e.width,height:e.height,layoutOptions:e.side===void 0?void 0:{"elk.port.side":e.side}}))}}var h={"elk.hierarchyHandling":`INCLUDE_CHILDREN`};function buildElkGraph(e,t,n){let r=e.nodes.map(e=>mapDiagramNode(e,t)),i=e.edges.map(e=>({id:e.id,sources:[e.sourcePort??e.source],targets:[e.targetPort??e.target]}));return{id:`root`,layoutOptions:mergeLayoutOptions(h,n,e.layoutOptions),children:r,edges:i}}function flattenElkNode(e,t,n,r){let i=t+(e.x??0),a=n+(e.y??0);r.push({id:e.id,x:i,y:a,width:e.width??0,height:e.height??0});for(let t of e.children??[])flattenElkNode(t,i,a,r)}function collectElkEdges(e,t){for(let n of e.edges??[])t.push({edge:n,container:n.container??e.id});for(let n of e.children??[])collectElkEdges(n,t)}function offsetSections(e,t){if(t.x===0&&t.y===0)return e;let shift=e=>({x:e.x+t.x,y:e.y+t.y});return e.map(e=>({startPoint:shift(e.startPoint),endPoint:shift(e.endPoint),bendPoints:e.bendPoints?.map(shift)}))}function mapElkResult(e){let t=[];for(let n of e.children??[])flattenElkNode(n,0,0,t);let n=new Map([[e.id,{x:0,y:0}]]);for(let e of t)n.set(e.id,{x:e.x,y:e.y});let r=[];return collectElkEdges(e,r),{nodes:t,edges:r.map(({edge:e,container:t})=>({id:e.id,sections:offsetSections(e.sections??[],n.get(t)??{x:0,y:0})})),width:e.width??0,height:e.height??0}}var ElkLayoutEngine=class{_elk=null;_workerUrl;constructor(e){this._workerUrl=e}async layout(e,t,n){let r=await this.ensureElk(),i=buildElkGraph(e,t,n);return mapElkResult(await r.layout(i))}async ensureElk(){if(this._elk)return this._elk;let{default:e}=await import(`elkjs/lib/elk.bundled.js`),t=this._workerUrl?new e({workerUrl:this._workerUrl}):new e;return this._elk=t,t}},g={insets:new e(4,8,4,8)},_=`4px`,DiagramNode=class extends c{_content;get selectedStyleRule(){return this._selectedStyleRule??=this.createStyleRule(`.selected`)}constructor(e){super(e,{...g,layoutManager:new l}),this.setBackgroundColor(`var(--ts-ui-diagram-node-bg, var(--ts-ui-button-bg, rgb(245, 245, 245)))`),this.setBorder(`1px solid var(--ts-ui-border-color, rgb(180, 180, 180))`),this.setBorderRadius(_),this.setCursor(`pointer`),this.selectedStyleRule.set(`borderColor`,`var(--ts-ui-accent-color, rgb(30, 100, 200))`),this.selectedStyleRule.set(`backgroundColor`,`var(--ts-ui-diagram-node-selected-bg, var(--ts-ui-table-row-selected, rgba(30, 100, 200, 0.15)))`),this.buildContent(this._options.glyph,this._options.label??``),this._options.selected!==void 0&&this.setSelected(this._options.selected)}applyOptions(e){return super.applyOptions(e),e.label!==void 0&&(this._options.label=e.label),e.glyph!==void 0&&(this._options.glyph=e.glyph),e.selected!==void 0&&(this._options.selected=e.selected),this}buildContent(e,t){this._content&&this.removeComponent(this._content),this._content=e===void 0?new u(t):new d(e,t),this._content.setPointerEvents(`none`),this.addComponent(this._content)}setLabel(e){return this._options.label=e,this._content.setText(e),this}getLabel(){return this._options.label??null}setSelected(e){this._options.selected=e;let n=this.getElement();return n&&t.sink.apply(n,{toggleClass:{selected:e}}),this}isSelected(){return this._options.selected??!1}init(e){super.init(e);let n=e||this.getElement();return n&&this.isSelected()&&t.sink.apply(n,{toggleClass:{selected:!0}}),this}},v=r(DiagramNode),y=`4px`,b=6,DiagramGroupNode=class extends c{_header;constructor(e){super(e,{layoutManager:new n}),this.setBackgroundColor(`var(--ts-ui-diagram-group-bg, rgba(120, 120, 120, 0.08))`),this.setBorder(`1px solid var(--ts-ui-diagram-group-border, var(--ts-ui-border-color, rgb(180, 180, 180)))`),this.setBorderRadius(y);let t=this._options.label??``;this._header=this._options.glyph===void 0?new u(t):new d(this._options.glyph,t),this._header.setPointerEvents(`none`),this._header.setX(b),this._header.setY(b),this.addComponent(this._header)}applyOptions(e){return super.applyOptions(e),e.label!==void 0&&(this._options.label=e.label),e.glyph!==void 0&&(this._options.glyph=e.glyph),this}setLabel(e){return this._options.label=e,this._header.setText(e),this}getLabel(){return this._options.label??null}},x=r(DiagramGroupNode),S=`http://www.w3.org/2000/svg`,C=`var(--ts-ui-diagram-edge, var(--ts-ui-border-color, rgb(120, 120, 120)))`,w=`1.5`,T=`12`,E=`var(--ts-ui-diagram-bg, var(--ts-ui-panel-bg, rgb(255, 255, 255)))`,D=`4`,O=8,k=`6 4`,A=[`one`,`zeroOrOne`,`oneOrMany`,`zeroOrMany`],j={one:{width:12,height:12,refX:12,refY:6,parts:[{tag:`path`,attrs:{d:`M 4 0 L 4 12 M 8 0 L 8 12`}}]},zeroOrOne:{width:16,height:12,refX:16,refY:6,parts:[{tag:`path`,attrs:{d:`M 12 0 L 12 12`}},{tag:`circle`,attrs:{cx:`6`,cy:`6`,r:`4`}}]},oneOrMany:{width:16,height:12,refX:16,refY:6,parts:[{tag:`path`,attrs:{d:`M 0 6 L 12 0 M 0 6 L 12 6 M 0 6 L 12 12`}},{tag:`path`,attrs:{d:`M 14 0 L 14 12`}}]},zeroOrMany:{width:18,height:12,refX:18,refY:6,parts:[{tag:`path`,attrs:{d:`M 6 6 L 18 0 M 6 6 L 18 6 M 6 6 L 18 12`}},{tag:`circle`,attrs:{cx:`3`,cy:`6`,r:`3`}}]}};function labelPoint(e){let t=e[0];return t?midpointAlong([t.startPoint,...t.bendPoints??[],t.endPoint]):{x:0,y:0}}function midpointAlong(e){let segmentLength=(e,t)=>Math.hypot(t.x-e.x,t.y-e.y),t=0;for(let n=1;n<e.length;n++)t+=segmentLength(e[n-1],e[n]);let n=t/2;for(let t=1;t<e.length;t++){let r=segmentLength(e[t-1],e[t]);if(r>=n){let i=r===0?0:n/r;return{x:e[t-1].x+(e[t].x-e[t-1].x)*i,y:e[t-1].y+(e[t].y-e[t-1].y)*i}}n-=r}return e[e.length-1]}function buildPathData(e){let t=[];for(let n of e){t.push(`M ${n.startPoint.x} ${n.startPoint.y}`);for(let e of n.bendPoints??[])t.push(`L ${e.x} ${e.y}`);t.push(`L ${n.endPoint.x} ${n.endPoint.y}`)}return t.join(` `)}var DiagramEdgeLayer=class extends i{_edges=[];_pathHandles=[];_markerId;_crowsFootMarkerIds;constructor(e){super(e),this._markerId=`${this.getId()}-arrow`,this._crowsFootMarkerIds=Object.fromEntries(A.map(e=>[e,`${this.getId()}-${e}`])),this.setPointerEvents(`none`)}markerUrl(e){if(e)return`url(#${e===`arrow`?this._markerId:this._crowsFootMarkerIds[e]})`}setEdges(e){return this._edges=e,this.rebuildPaths(),this}createRootElement(){let e=t.sink.createElementNS(S,`svg`),n=t.sink.createElementNS(S,`defs`);this.createArrowMarker(n);for(let e of A)this.createCrowsFootMarker(n,e);return t.sink.appendChild(e,n),this.trackHandle(n),e}createArrowMarker(e){let n=t.sink.createElementNS(S,`marker`);t.sink.apply(n,{setAttr:{id:this._markerId,markerWidth:String(O),markerHeight:String(O),refX:String(O),refY:String(O/2),orient:`auto-start-reverse`,markerUnits:`userSpaceOnUse`}});let r=t.sink.createElementNS(S,`path`);t.sink.apply(r,{setAttr:{d:`M 0 0 L ${O} ${O/2} L 0 ${O} z`,fill:C}}),t.sink.appendChild(n,r),t.sink.appendChild(e,n),this.trackHandle(n),this.trackHandle(r)}createCrowsFootMarker(e,n){let r=j[n],i=t.sink.createElementNS(S,`marker`);t.sink.apply(i,{setAttr:{id:this._crowsFootMarkerIds[n],markerWidth:String(r.width),markerHeight:String(r.height),refX:String(r.refX),refY:String(r.refY),orient:`auto-start-reverse`,markerUnits:`userSpaceOnUse`}}),t.sink.appendChild(e,i),this.trackHandle(i);for(let e of r.parts){let n=t.sink.createElementNS(S,e.tag);t.sink.apply(n,{setAttr:{...e.attrs,fill:`none`,stroke:C}}),t.sink.appendChild(i,n),this.trackHandle(n)}}render(){let e=super.render();return this.rebuildPaths(),e}rebuildPaths(){let e=this.getElement();if(e){for(let n of this._pathHandles)t.sink.removeChild(e,n),this.untrackHandle(n),t.sink.release(n);this._pathHandles=[];for(let n of this._edges){let r=buildPathData(n.sections);if(!r)continue;let i=t.sink.createElementNS(S,`path`),a=n.style,o=a?this.markerUrl(a.endMarker):this.markerUrl(`arrow`),s=a?this.markerUrl(a.startMarker):void 0,c={d:r,fill:`none`,stroke:a?.stroke??C,"stroke-width":w};o&&(c[`marker-end`]=o),s&&(c[`marker-start`]=s),a?.dashed&&(c[`stroke-dasharray`]=k),t.sink.apply(i,{setAttr:c}),t.sink.appendChild(e,i),this.trackHandle(i),this._pathHandles.push(i),a?.label&&this.drawLabel(e,n,a.label)}}}drawLabel(e,n,r){let i=labelPoint(n.sections),a=t.sink.createElementNS(S,`text`);t.sink.apply(a,{setAttr:{x:String(i.x),y:String(i.y),fill:C,stroke:E,"stroke-width":D,"stroke-linejoin":`round`,"paint-order":`stroke`,"font-size":T,"text-anchor":`middle`,"dominant-baseline":`central`},text:r}),t.sink.appendChild(e,a),this.trackHandle(a),this._pathHandles.push(a)}},M=r(DiagramEdgeLayer),N=1,P=.25,F=4,I=1.1,L=0,R=0,z=1,B=2,DiagramView=class extends c{_contentHost;_edgeLayer;_engine;_nodeComponents=new Map;_nodeData=new Map;_containerIds=new Set;_selection=[];_layoutGeneration=0;_graphWidth=0;_graphHeight=0;_listeners=new o;_panning=!1;_panStartX=0;_panStartY=0;_panScrollLeft=0;_panScrollTop=0;constructor(e){super(e,{zoom:N,minZoom:P,maxZoom:F}),this.setAutoScroll(`auto`),this._engine=this.createEngine(),this._contentHost=new s({layoutManager:new n,overflow:`visible`}),this._contentHost.setTransformOrigin(`0 0`),this.addComponent(this._contentHost),this._edgeLayer=new M,this._contentHost.addComponent(this._edgeLayer),this.applyListeners(e?.listeners),this._options.zoom!==void 0&&this.setZoom(this._options.zoom),this._options.data&&this.setData(this._options.data)}createEngine(){return new ElkLayoutEngine(this._options.elkWorkerUrl)}applyOptions(e){return super.applyOptions(e),e.data!==void 0&&(this._options.data=e.data),e.nodeRenderer!==void 0&&(this._options.nodeRenderer=e.nodeRenderer),e.groupRenderer!==void 0&&(this._options.groupRenderer=e.groupRenderer),e.layoutOptions!==void 0&&(this._options.layoutOptions=e.layoutOptions),e.elkWorkerUrl!==void 0&&(this._options.elkWorkerUrl=e.elkWorkerUrl),e.minZoom!==void 0&&(this._options.minZoom=e.minZoom),e.maxZoom!==void 0&&(this._options.maxZoom=e.maxZoom),e.zoom!==void 0&&(this._options.zoom=e.zoom),this}setData(e){return this._options.data=e,this.rebuildNodes(e),this.relayout(e),this}getData(){return this._options.data??null}rebuildNodes(e){for(let e of this._nodeComponents.values())this._contentHost.removeComponent(e);this._nodeComponents.clear(),this._nodeData.clear(),this._containerIds.clear(),this._selection=[],this._edgeLayer.setEdges([]);let t=this._options.nodeRenderer??(e=>new v({label:e.label,glyph:e.glyph})),n=this._options.groupRenderer??(e=>new x({label:e.label,glyph:e.glyph})),build=e=>{for(let r of e){let e=(r.children?.length??0)>0,i=e?n(r):t(r);this._nodeComponents.set(r.id,i),this._nodeData.set(r.id,r),this._contentHost.addComponent(i),e&&(this._containerIds.add(r.id),build(r.children))}};build(e.nodes)}relayout(e){let t=this.collectNodeSizes(e);this._layoutGeneration+=1;let n=this._layoutGeneration;this._engine.layout(e,t,this._options.layoutOptions).then(e=>this.applyLayout(e,n)).catch(()=>this.handleLayoutFailure(n))}collectNodeSizes(e){let t=new Map,collect=e=>{for(let n of e){let e=this._nodeComponents.get(n.id)?.getPreferredSize();t.set(n.id,{width:n.width??e?.width??0,height:n.height??e?.height??0}),n.children&&n.children.length>0&&collect(n.children)}};return collect(e.nodes),t}applyLayout(e,t){if(t===this._layoutGeneration){for(let t of e.nodes){let e=this._nodeComponents.get(t.id);e&&(e.setPreferredSize(t.width,t.height),e.setX(t.x),e.setY(t.y))}this._graphWidth=e.width,this._graphHeight=e.height,this._edgeLayer.setX(0),this._edgeLayer.setY(0),this._edgeLayer.setPreferredSize(e.width,e.height),this._edgeLayer.setEdges(this.joinEdgeStyles(e.edges)),this.applyContainerZIndex(),this.applyZoomToHost(),this.scheduleLayout(),this.emit(`layout`)}}applyContainerZIndex(){if(this._containerIds.size===0){this._edgeLayer.setZIndex(L);return}this._edgeLayer.setZIndex(z);for(let[e,t]of this._nodeComponents)t.setZIndex(this._containerIds.has(e)?R:B)}joinEdgeStyles(e){let t=new Map(this._options.data?.edges.map(e=>[e.id,e])??[]);return e.map(e=>({...e,style:t.get(e.id)?.style}))}handleLayoutFailure(e){if(e===this._layoutGeneration){for(let e of this._nodeComponents.values())this._contentHost.removeComponent(e);this._nodeComponents.clear(),this._nodeData.clear()}}applyZoomToHost(){let e=this.getZoom();this._contentHost.setTransform(`scale(${e})`);let t=Math.min(e,1);this._contentHost.setPreferredSize(this._graphWidth*t,this._graphHeight*t)}getZoom(){return this._options.zoom??this._defaultOptions.zoom??N}setZoom(e){return this._options.zoom=this.clampZoom(e),this.applyZoomToHost(),this}zoomToFit(){if(this._graphWidth<=0||this._graphHeight<=0)return this;let e=this.getWidth()/this._graphWidth,t=this.getHeight()/this._graphHeight;return this.setZoom(Math.min(e,t)),this}clampZoom(e){let t=this._options.minZoom??this._defaultOptions.minZoom??P,n=this._options.maxZoom??this._defaultOptions.maxZoom??F;return Math.max(t,Math.min(n,e))}getSelection(){return[...this._selection]}selectNode(e){return this.setSelection(e),this}revealNode(e){let t=this._nodeComponents.get(e);if(!t)return this;let n=this.getZoom(),r=(t.getX()+t.getWidth()/2)*n,i=(t.getY()+t.getHeight()/2)*n;return this.setScrollLeft(Math.max(0,r-this.getWidth()/2)),this.setScrollTop(Math.max(0,i-this.getHeight()/2)),this}setSelection(e){for(let e of this._nodeComponents.values())this.applySelectedVisual(e,!1);let t=e===null?void 0:this._nodeData.get(e);t?(this._selection=[t],this.applySelectedVisual(this._nodeComponents.get(e),!0)):this._selection=[]}applySelectedVisual(e,t){e.setSelected?.(t)}on(e,t){return this._listeners.add(e,t),this}off(e,t){return this._listeners.remove(e,t),this}emit(e,...t){this._listeners.fire(e,...t)}init(e){return super.init(e),a.addSubtreeListener(this,`click`,this._handleClick),a.addSubtreeListener(this,`dblclick`,this._handleDoubleClick),a.addListener(this,`wheel`,this._handleWheel),a.addListener(this,`pointerdown`,this._handlePointerDown),a.addListener(this,`pointermove`,this._handlePointerMove),a.addListener(this,`pointerup`,this._handlePointerUp),this}_handleClick(e){let t=this.nodeIdAt(e.target);t===null?this._selection.length>0&&(this.setSelection(null),this.emit(`selection`,this.getSelection())):(this.setSelection(t),this.emit(`selection`,this.getSelection()))}_handleDoubleClick(e){let t=this.nodeIdAt(e.target);if(t===null)return;let n=this._nodeData.get(t);n!==void 0&&this.emit(`activate`,n)}nodeIdAt(e){if(e===null)return null;let n=t.source.intern(e);for(let[e,r]of this._nodeComponents){let i=r.getElement();if(i&&(i===n||t.source.contains(i,n)))return e}return null}_handleWheel(e){e.preventDefault();let n=this.getZoom(),r=this.clampZoom(n*(e.deltaY<0?I:1/I));if(r===n)return;let i=t.source.getViewportRect(this),a=e.clientX-i.left,o=e.clientY-i.top,s=(a+this.getScrollLeft())/n,c=(o+this.getScrollTop())/n;this.setZoom(r),this.setScrollLeft(s*r-a),this.setScrollTop(c*r-o)}_handlePointerDown(e){e.button===0&&(this._panning=!0,this._panStartX=e.clientX,this._panStartY=e.clientY,this._panScrollLeft=this.getScrollLeft(),this._panScrollTop=this.getScrollTop())}_handlePointerMove(e){this._panning&&(this.setScrollLeft(this._panScrollLeft-(e.clientX-this._panStartX)),this.setScrollTop(this._panScrollTop-(e.clientY-this._panStartY)))}_handlePointerUp(){this._panning=!1}},V=r(DiagramView);export{M as DiagramEdgeLayer,x as DiagramGroupNode,v as DiagramNode,V as DiagramView,ElkLayoutEngine};
+//# sourceMappingURL=diagram.es.js.map

package/dist/lib/component/diagram.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.es.js","names":[],"sources":["../../../src/typescript/lib/component/diagram/ElkLayoutEngine.ts","../../../src/typescript/lib/component/diagram/DiagramNode.ts","../../../src/typescript/lib/component/diagram/DiagramGroupNode.ts","../../../src/typescript/lib/component/diagram/DiagramEdgeLayer.ts","../../../src/typescript/lib/component/diagram/DiagramView.ts"],"sourcesContent":["// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n//\n// The sole adapter between the framework-native diagram model and ElkJS. It is\n// the only module that names ELK types or imports `elkjs`; everything else in\n// the family speaks `DiagramData` / `DiagramLayoutResult`, keeping the layout\n// engine swappable. ELK takes JSON and returns JSON — it never touches the DOM,\n// so it needs no `DOM.sink` / `DOM.source` seam. `elkjs` is an optional peer\n// dependency imported lazily the first time a diagram lays out (mirroring\n// `StoreWorkerClient.ensureWorker`) and externalised from the library bundle so\n// its GWT blob never lands in the core chunk.\n\nimport type { DiagramData, DiagramNodeData } from \"~/component/diagram/DiagramModel.js\";\n\n/** A point in ELK's layout coordinate space. */\nexport interface ElkPoint {\n    x: number;\n    y: number;\n}\n\n/**\n * One routed section of an ELK edge: a straight run from `startPoint` to\n * `endPoint`, optionally threaded through `bendPoints`.\n */\nexport interface ElkEdgeSection {\n    startPoint: ElkPoint;\n    endPoint:   ElkPoint;\n    bendPoints?: ElkPoint[];\n}\n\n/** The engine-agnostic layout result consumed by `DiagramView`. */\nexport interface DiagramLayoutResult {\n    /** Each node's absolute position and size in graph space. */\n    nodes: Array<{ id: string; x: number; y: number; width: number; height: number }>;\n    /** Each edge's routed sections. */\n    edges: Array<{ id: string; sections: ElkEdgeSection[] }>;\n    /** Graph bounding-box width. */\n    width: number;\n    /** Graph bounding-box height. */\n    height: number;\n}\n\n/** ELK port shape: a fixed anchor on a node an edge can attach to. */\ninterface ElkPort {\n    id: string;\n    x?: number;\n    y?: number;\n    width?: number;\n    height?: number;\n    layoutOptions?: Record<string, string>;\n}\n\n/** ELK graph node shape (input carries sizes/options; output adds x/y). */\ninterface ElkNode {\n    id: string;\n    width?:  number;\n    height?: number;\n    x?:      number;\n    y?:      number;\n    layoutOptions?: Record<string, string>;\n    children?: ElkNode[];\n    edges?:    ElkExtendedEdge[];\n    ports?:    ElkPort[];\n}\n\n/** ELK edge shape with explicit source/target endpoint lists. */\ninterface ElkExtendedEdge {\n    id:       string;\n    sources:  string[];\n    targets:  string[];\n    sections?: ElkEdgeSection[];\n    /**\n     * The node whose origin the routed `sections` coordinates are relative to,\n     * as reported by ELK. For an edge between two nodes nested inside the same\n     * container, ELK routes it in that container and reports container-relative\n     * coordinates here (see {@link mapElkResult}, which shifts them to absolute).\n     */\n    container?: string;\n}\n\n/** Minimal structural type for the lazily-imported ELK instance. */\ninterface ElkInstance {\n    layout(graph: unknown): Promise<unknown>;\n}\n\n/**\n * Fallback node width in pixels, used when a node carries neither an explicit\n * `width` nor a measurable preferred width. Sized to comfortably hold a short\n * label so a graph still lays out sensibly rather than collapsing to zero-area\n * nodes ELK would overlap.\n */\nconst DEFAULT_NODE_WIDTH = 120;\n\n/**\n * Fallback node height in pixels, mirroring {@link DEFAULT_NODE_WIDTH}. Tracks a\n * single label line plus vertical breathing room.\n */\nconst DEFAULT_NODE_HEIGHT = 40;\n\n/**\n * Merges layout-option maps left-to-right, so later arguments win. `undefined`\n * maps are skipped. Used to layer graph options over the view-level defaults.\n *\n * @param maps - Option maps in ascending precedence order.\n * @returns The merged option map.\n */\nfunction mergeLayoutOptions(...maps: Array<Record<string, string> | undefined>): Record<string, string> {\n    const merged: Record<string, string> = {};\n\n    for (const map of maps) {\n        if (map) {\n            Object.assign(merged, map);\n        }\n    }\n\n    return merged;\n}\n\n/**\n * Default padding reserved inside every container's ELK box, keyed by side.\n * The default renderer (`DiagramGroupNode`) paints its header label a few\n * pixels from the top-left corner, so without a reserved top inset ELK could\n * place a child flush against — or under — the title. The top inset reserves\n * the header row (its inset + one text/glyph line) plus a ~10px gap so the\n * first child sits clearly below the title, not tight against it. The\n * left/bottom/right values match ELK's own built-in default (12px); a consumer\n * supplying a custom `groupRenderer` with a taller or shorter header overrides\n * this via the container's own `layoutOptions`.\n */\nconst CONTAINER_PADDING_DEFAULT: Record<string, string> = { \"elk.padding\": \"[top=34,left=12,bottom=12,right=12]\" };\n\n/**\n * Maps one framework-native node to its ELK counterpart, recursing into\n * `children` for a compound container. A container (non-empty `children`)\n * carries no explicit `width`/`height` — ELK computes its box from its\n * contents — and its children are mapped the same way, so nesting is\n * unbounded. A container's `layoutOptions` resolve as\n * `CONTAINER_PADDING_DEFAULT` < `node.layoutOptions` (the node's own option\n * wins), reserving header clearance by default while staying overridable. A\n * leaf (no children) maps exactly as before.\n *\n * @param node - The framework-native node.\n * @param sizes - Per-leaf resolved sizes (explicit size, else preferred size).\n * @returns The mapped ELK node.\n */\nfunction mapDiagramNode(\n    node: DiagramNodeData,\n    sizes: Map<string, { width: number; height: number }>,\n): ElkNode {\n    if (node.children && node.children.length > 0) {\n        return {\n            id:            node.id,\n            layoutOptions: mergeLayoutOptions(CONTAINER_PADDING_DEFAULT, node.layoutOptions),\n            children:      node.children.map((child) => mapDiagramNode(child, sizes)),\n        };\n    }\n\n    const size = sizes.get(node.id);\n\n    return {\n        id:            node.id,\n        width:         node.width  ?? size?.width  ?? DEFAULT_NODE_WIDTH,\n        height:        node.height ?? size?.height ?? DEFAULT_NODE_HEIGHT,\n        layoutOptions: node.layoutOptions,\n        ports:         node.ports?.map((p) => ({\n            id:            p.id,\n            x:             p.x,\n            y:             p.y,\n            width:         p.width,\n            height:        p.height,\n            layoutOptions: p.side !== undefined ? { \"elk.port.side\": p.side } : undefined,\n        })),\n    };\n}\n\n/**\n * Root-level ELK options enabling cross-container edge routing. Without it,\n * an edge declared on the root (as every {@link DiagramEdgeData} is) between\n * two nodes nested under different containers may be dropped or mis-routed by\n * ELK's hierarchical layout. Merged in as the lowest-precedence tier, so a\n * view-level default or a graph's own `layoutOptions` can still override it.\n */\nconst HIERARCHY_HANDLING_DEFAULT: Record<string, string> = { \"elk.hierarchyHandling\": \"INCLUDE_CHILDREN\" };\n\n/**\n * Maps the framework-native graph to an ELK graph JSON. Pure and synchronous —\n * no `elkjs` import — so it is unit-testable directly.\n *\n * Graph-level options resolve as `HIERARCHY_HANDLING_DEFAULT` < `defaults` <\n * `data.layoutOptions` (graph wins over view defaults, which win over the\n * hierarchy-handling default) on the root; each node carries its own\n * `layoutOptions`, which ELK resolves over the inherited root options so a\n * per-node option wins over all three.\n *\n * @param data - The framework-native graph.\n * @param sizes - Per-node resolved sizes (explicit size, else preferred size).\n * @param defaults - View-level default ELK options applied to every layout.\n * @returns The ELK graph JSON ready for `elk.layout`.\n */\nexport function buildElkGraph(\n    data: DiagramData,\n    sizes: Map<string, { width: number; height: number }>,\n    defaults?: Record<string, string>,\n): ElkNode {\n    const children: ElkNode[] = data.nodes.map((node) => mapDiagramNode(node, sizes));\n\n    const edges: ElkExtendedEdge[] = data.edges.map((edge) => ({\n        id:      edge.id,\n        sources: [edge.sourcePort ?? edge.source],\n        targets: [edge.targetPort ?? edge.target],\n    }));\n\n    return {\n        id:            \"root\",\n        layoutOptions: mergeLayoutOptions(HIERARCHY_HANDLING_DEFAULT, defaults, data.layoutOptions),\n        children,\n        edges,\n    };\n}\n\n/**\n * Recursively flattens an ELK node (and its `children`, if any) into\n * `out`, threading an `(offsetX, offsetY)` accumulator. ELK reports each\n * child's `x`/`y` relative to its own parent, so a node's absolute position is\n * its parent's absolute origin plus its own relative `x`/`y`; a container then\n * recurses with that absolute origin as the new offset for its own children.\n *\n * @param node - The ELK node to flatten (a container or a leaf).\n * @param offsetX - The accumulated absolute x of `node`'s parent (0 at the root).\n * @param offsetY - The accumulated absolute y of `node`'s parent (0 at the root).\n * @param out - The flat output array nodes are appended to, in traversal order.\n */\nfunction flattenElkNode(\n    node: ElkNode,\n    offsetX: number,\n    offsetY: number,\n    out: Array<{ id: string; x: number; y: number; width: number; height: number }>,\n): void {\n    const x = offsetX + (node.x ?? 0);\n    const y = offsetY + (node.y ?? 0);\n\n    out.push({ id: node.id, x, y, width: node.width ?? 0, height: node.height ?? 0 });\n\n    for (const child of node.children ?? []) {\n        flattenElkNode(child, x, y, out);\n    }\n}\n\n/**\n * Collects every ELK edge in the tree — the root's own `edges` plus any nested\n * in a container's `edges` — resolving each edge's container id (the node its\n * routed coordinates are relative to). ELK tags a routed edge with its own\n * `container`; absent that, the edge is relative to the node whose `edges`\n * array holds it (the root for a flat graph).\n *\n * @param node - The ELK node whose `edges` (and descendants') to collect.\n * @param out - The flat output array edges are appended to, each paired with\n *   its resolved container id.\n */\nfunction collectElkEdges(node: ElkNode, out: Array<{ edge: ElkExtendedEdge; container: string }>): void {\n    for (const edge of node.edges ?? []) {\n        out.push({ edge, container: edge.container ?? node.id });\n    }\n\n    for (const child of node.children ?? []) {\n        collectElkEdges(child, out);\n    }\n}\n\n/**\n * Shifts every point of an edge's routed sections by `origin`, translating\n * container-relative ELK coordinates into absolute graph space. Returns the\n * sections unchanged when `origin` is the graph origin, so a flat graph's\n * root-relative edges pass through untouched.\n *\n * @param sections - The edge's routed sections, in their container's frame.\n * @param origin - The absolute origin of the edge's container.\n * @returns The sections with every point translated into absolute coordinates.\n */\nfunction offsetSections(sections: ElkEdgeSection[], origin: ElkPoint): ElkEdgeSection[] {\n    if (origin.x === 0 && origin.y === 0) {\n        return sections;\n    }\n\n    const shift = (point: ElkPoint): ElkPoint => ({ x: point.x + origin.x, y: point.y + origin.y });\n\n    return sections.map((section) => ({\n        startPoint: shift(section.startPoint),\n        endPoint:   shift(section.endPoint),\n        bendPoints: section.bendPoints?.map(shift),\n    }));\n}\n\n/**\n * Maps an ELK layout result back to the engine-agnostic\n * {@link DiagramLayoutResult}. Pure and synchronous, so it is unit-testable\n * directly. A container's descendants are flattened into the same output list\n * as its siblings, each carrying absolute (not parent-relative) coordinates —\n * see {@link flattenElkNode}. Edge sections get the same treatment: ELK reports\n * an intra-container edge's route relative to that container's origin, so each\n * edge is shifted by its container's absolute position (a flat graph's\n * root-relative edges are shifted by the zero origin, i.e. left unchanged).\n *\n * @param result - The root ELK node returned by `elk.layout`.\n * @returns The mapped layout result.\n */\nexport function mapElkResult(result: ElkNode): DiagramLayoutResult {\n    const nodes: Array<{ id: string; x: number; y: number; width: number; height: number }> = [];\n\n    for (const child of result.children ?? []) {\n        flattenElkNode(child, 0, 0, nodes);\n    }\n\n    // Absolute origin of every node (containers included), so an edge routed in\n    // a container's frame can be lifted into absolute graph space. The root maps\n    // to the zero origin.\n    const origins = new Map<string, ElkPoint>([[result.id, { x: 0, y: 0 }]]);\n\n    for (const node of nodes) {\n        origins.set(node.id, { x: node.x, y: node.y });\n    }\n\n    const collected: Array<{ edge: ElkExtendedEdge; container: string }> = [];\n    collectElkEdges(result, collected);\n\n    const edges = collected.map(({ edge, container }) => ({\n        id:       edge.id,\n        sections: offsetSections(edge.sections ?? [], origins.get(container) ?? { x: 0, y: 0 }),\n    }));\n\n    return {\n        nodes,\n        edges,\n        width:  result.width  ?? 0,\n        height: result.height ?? 0,\n    };\n}\n\n/**\n * Lazily-loaded ELK layout adapter. One instance owns one lazily-imported ELK\n * engine; the import fires on the first {@link ElkLayoutEngine.layout} call and\n * the engine is reused afterward.\n *\n * @category Components\n */\nexport class ElkLayoutEngine {\n\n    private _elk: ElkInstance | null = null;\n    private readonly _workerUrl?: string;\n\n    /**\n     * @param workerUrl - Optional URL of a consumer-hosted `elk-worker.js`. When\n     *   set, ELK runs its layout compute off the main thread; otherwise the\n     *   zero-config main-thread bundle is used.\n     */\n    constructor(workerUrl?: string) {\n        this._workerUrl = workerUrl;\n    }\n\n    /**\n     * Lazily imports ELK (if needed), maps the model to ELK JSON, runs the\n     * layout, and maps the result back.\n     *\n     * @param data - The framework-native graph.\n     * @param sizes - Per-node resolved sizes.\n     * @param defaults - View-level default ELK options.\n     * @returns The mapped layout result.\n     * @throws Error - If `elkjs` is not installed / cannot be imported.\n     */\n    async layout(\n        data: DiagramData,\n        sizes: Map<string, { width: number; height: number }>,\n        defaults?: Record<string, string>,\n    ): Promise<DiagramLayoutResult> {\n        const elk    = await this.ensureElk();\n        const graph  = buildElkGraph(data, sizes, defaults);\n        const result = await elk.layout(graph);\n\n        return mapElkResult(result as ElkNode);\n    }\n\n    /**\n     * Returns the ELK engine, importing and constructing it on first use. The\n     * dynamic `import(\"elkjs/...\")` is left external in the library build so the\n     * GWT bundle resolves from the consumer's install rather than being inlined.\n     *\n     * @returns The ELK engine instance.\n     */\n    private async ensureElk(): Promise<ElkInstance> {\n        if (this._elk) {\n            return this._elk;\n        }\n\n        // `elkjs` is an optional peer dep, typed by the local ambient shim in\n        // `elkjs.d.ts` and resolved by the consumer's bundler at runtime.\n        const { default: ELK } = await import(\"elkjs/lib/elk.bundled.js\");\n\n        const elk = this._workerUrl ? new ELK({ workerUrl: this._workerUrl }) : new ELK();\n        this._elk = elk;\n\n        return elk;\n    }\n}\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n//\n// The default node renderer for a DiagramView: a themed rounded box wrapping a\n// glyph + label (or a bare label). Its content-derived preferred size is what\n// the view feeds to ELK when a node carries no explicit width/height.\n\nimport { Panel, PanelOptions } from \"~/core/Panel.js\";\nimport { StyleRule } from \"~/core/StyleTarget.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport type { Handle } from \"~/core/DOM.js\";\nimport { Fit } from \"~/layout/Fit.js\";\nimport { Insets } from \"~/primitive/Insets.js\";\nimport { IconText } from \"~/component/display/IconText.js\";\nimport { Text } from \"~/component/input/Text.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Construction-time options for {@link DiagramNode}.\n *\n * @category Components\n */\nexport interface DiagramNodeOptions extends PanelOptions {\n    /** Label text shown inside the node. */\n    label?: string;\n    /** Optional registered glyph name shown before the label. */\n    glyph?: string;\n    /** Whether the node starts selected. */\n    selected?: boolean;\n}\n\n/**\n * User-overridable defaults. The node paints a themed rounded box; its interior\n * inset gives the label structural breathing room away from the border.\n */\nconst _defaultDiagramNodeOptions: Partial<DiagramNodeOptions> = {\n    // Vertical 4px / horizontal 8px so a short label never sits flush against\n    // the rounded border — structural interior spacing, not cosmetic nudging.\n    insets: new Insets(4, 8, 4, 8),\n};\n\n/** Corner radius in pixels for the node's rounded box. */\nconst NODE_BORDER_RADIUS = \"4px\";\n\n/**\n * The default themed node renderer for a\n * [`DiagramView`](/api/component/diagram/classes/DiagramView). Composes a glyph\n * and label inside a rounded, theme-aware box and toggles a `.selected` state\n * rule when selected.\n *\n * @category Components\n */\nclass DiagramNode extends Panel<DiagramNodeOptions> {\n\n    /** The inner glyph+label (or bare label) component. */\n    private _content!: IconText | Text;\n\n    // Lazy `.selected` state rule. The slot caches the wrapper returned by\n    // Component's `createStyleRule` builder, which dedupes by selector suffix.\n    private declare _selectedStyleRule?: StyleRule;\n    private get selectedStyleRule(): StyleRule {\n        return this._selectedStyleRule ??= this.createStyleRule(\".selected\");\n    }\n\n    constructor(options?: DiagramNodeOptions) {\n        super(options, { ..._defaultDiagramNodeOptions, layoutManager: new Fit() });\n\n        this.setBackgroundColor(\"var(--ts-ui-diagram-node-bg, var(--ts-ui-button-bg, rgb(245, 245, 245)))\");\n        this.setBorder(\"1px solid var(--ts-ui-border-color, rgb(180, 180, 180))\");\n        this.setBorderRadius(NODE_BORDER_RADIUS);\n        this.setCursor(\"pointer\");\n\n        this.selectedStyleRule.set(\"borderColor\",     \"var(--ts-ui-accent-color, rgb(30, 100, 200))\");\n        this.selectedStyleRule.set(\"backgroundColor\", \"var(--ts-ui-diagram-node-selected-bg, var(--ts-ui-table-row-selected, rgba(30, 100, 200, 0.15)))\");\n\n        // Content children are built here (not during super's cascade), so the\n        // label/glyph/selected values cached pure in `applyOptions` are\n        // dispatched now that the row exists.\n        this.buildContent(this._options.glyph, this._options.label ?? \"\");\n\n        if (this._options.selected !== undefined) {\n            this.setSelected(this._options.selected);\n        }\n    }\n\n    /**\n     * Caches the label/glyph/selected fields pure to `_options`; they are\n     * dispatched from the constructor body once the content child exists.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: DiagramNodeOptions): this {\n        super.applyOptions(options);\n\n        if (options.label    !== undefined) this._options.label    = options.label;\n        if (options.glyph    !== undefined) this._options.glyph    = options.glyph;\n        if (options.selected !== undefined) this._options.selected = options.selected;\n\n        return this;\n    }\n\n    /**\n     * Builds (or rebuilds) the inner content child — an `IconText` when a glyph\n     * is present, else a bare `Text`.\n     *\n     * @param glyph - Optional glyph name.\n     * @param label - The label text.\n     */\n    private buildContent(glyph: string | undefined, label: string): void {\n        if (this._content) {\n            this.removeComponent(this._content);\n        }\n\n        this._content = glyph !== undefined ? new IconText(glyph, label) : new Text(label);\n\n        // Every Component stamps its own `cursor` (defaulting to `default`) onto\n        // its CSS rule, so the label/glyph would override the node's `pointer`\n        // wherever they sit under the cursor — the hover cursor would flicker\n        // between pointer (over padding) and arrow (over the text). Make the\n        // content transparent to pointer events so hover + clicks land on the\n        // node itself; `pointer-events: none` inherits, so this one call also\n        // covers the glyph and text nested inside an `IconText`. Mirrors how\n        // `Button` frees its label row so the button's cursor governs.\n        this._content.setPointerEvents(\"none\");\n\n        this.addComponent(this._content);\n    }\n\n    /**\n     * Updates the node's label text.\n     *\n     * @param value - The new label.\n     *\n     * @returns This node, for method chaining.\n     */\n    setLabel(value: string): this {\n        this._options.label = value;\n        this._content.setText(value);\n\n        return this;\n    }\n\n    /**\n     * Returns the node's label, or `null` when none was set.\n     *\n     * @returns The label text, or `null`.\n     */\n    getLabel(): string | null {\n        return this._options.label ?? null;\n    }\n\n    /**\n     * Sets the selected state and toggles the `.selected` CSS class.\n     *\n     * @param value - True to select, false to deselect.\n     *\n     * @returns This node, for method chaining.\n     */\n    setSelected(value: boolean): this {\n        this._options.selected = value;\n\n        const element = this.getElement();\n\n        if (element) {\n            DOM.sink.apply(element, { toggleClass: { selected: value } });\n        }\n\n        return this;\n    }\n\n    /**\n     * Returns whether the node is currently selected.\n     *\n     * @returns True when selected.\n     */\n    isSelected(): boolean {\n        return this._options.selected ?? false;\n    }\n\n    /**\n     * Re-applies the cached selected class after (re-)render, since a fresh\n     * element starts without it.\n     *\n     * @param element - Optional element from the render pipeline.\n     *\n     * @returns This node, for method chaining.\n     */\n    protected init(element?: Handle): this {\n        super.init(element);\n\n        const el = element || this.getElement();\n\n        if (el && this.isSelected()) {\n            DOM.sink.apply(el, { toggleClass: { selected: true } });\n        }\n\n        return this;\n    }\n}\n\nconst DiagramNodeCallable = callable(DiagramNode);\ntype DiagramNodeCallable = DiagramNode;\nexport {\n    DiagramNode         as _DiagramNode,\n    DiagramNodeCallable as DiagramNode,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n//\n// The default container renderer for a DiagramView compound node: a titled,\n// translucent box painted behind its (flat-sibling, not DOM-child) leaf/child\n// components. `DiagramView` positions this box at ELK's computed absolute\n// bounds and paints it at the lowest z-index among a compound graph's nodes,\n// so it never intercepts a click meant for a leaf sitting visually inside it.\n\nimport { Panel, PanelOptions } from \"~/core/Panel.js\";\nimport { Absolute } from \"~/layout/Absolute.js\";\nimport { IconText } from \"~/component/display/IconText.js\";\nimport { Text } from \"~/component/input/Text.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/**\n * Construction-time options for {@link DiagramGroupNode}.\n *\n * @category Components\n */\nexport interface DiagramGroupNodeOptions extends PanelOptions {\n    /** The container's header label (e.g. the schema name). */\n    label?: string;\n    /** Optional registered glyph name shown before the header label. */\n    glyph?: string;\n}\n\n/** Corner radius in pixels for the container's box, matching `DiagramNode`. */\nconst GROUP_BORDER_RADIUS = \"4px\";\n\n/**\n * Distance in pixels from the box's top-left corner to the header label's\n * origin — enough breathing room that the label never sits flush against the\n * rounded border, mirroring `DiagramNode`'s interior inset.\n */\nconst HEADER_INSET = 6;\n\n/**\n * The default themed container renderer for a\n * [`DiagramView`](/api/component/diagram/classes/DiagramView) compound node.\n * Paints a translucent, rounded box with a header label pinned to the\n * top-left corner; the rest of the box stays open so the container's\n * children — rendered as separate flat siblings positioned by ELK, not as DOM\n * children of this component — visually read as sitting inside it.\n *\n * @category Components\n */\nclass DiagramGroupNode extends Panel<DiagramGroupNodeOptions> {\n\n    /** The header shown at the box's top-left corner: a bare label, or a glyph + label. */\n    private _header!: IconText | Text;\n\n    constructor(options?: DiagramGroupNodeOptions) {\n        super(options, { layoutManager: new Absolute() });\n\n        this.setBackgroundColor(\"var(--ts-ui-diagram-group-bg, rgba(120, 120, 120, 0.08))\");\n        this.setBorder(\"1px solid var(--ts-ui-diagram-group-border, var(--ts-ui-border-color, rgb(180, 180, 180)))\");\n        this.setBorderRadius(GROUP_BORDER_RADIUS);\n\n        // The header is built here (not during super's cascade), so the values\n        // cached pure in `applyOptions` are dispatched now that the box exists.\n        // An IconText when a glyph is present (glyph before the label, mirroring\n        // DiagramNode), else a bare Text.\n        const label = this._options.label ?? \"\";\n        this._header = this._options.glyph !== undefined\n            ? new IconText(this._options.glyph, label)\n            : new Text(label);\n        this._header.setPointerEvents(\"none\");\n        this._header.setX(HEADER_INSET);\n        this._header.setY(HEADER_INSET);\n        this.addComponent(this._header);\n    }\n\n    /**\n     * Caches the label/glyph fields pure to `_options`; they are dispatched from\n     * the constructor body once the header child exists.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: DiagramGroupNodeOptions): this {\n        super.applyOptions(options);\n\n        if (options.label !== undefined) this._options.label = options.label;\n        if (options.glyph !== undefined) this._options.glyph = options.glyph;\n\n        return this;\n    }\n\n    /**\n     * Updates the container's header label.\n     *\n     * @param value - The new label.\n     *\n     * @returns This node, for method chaining.\n     */\n    setLabel(value: string): this {\n        this._options.label = value;\n        this._header.setText(value);\n\n        return this;\n    }\n\n    /**\n     * Returns the container's header label, or `null` when none was set.\n     *\n     * @returns The label text, or `null`.\n     */\n    getLabel(): string | null {\n        return this._options.label ?? null;\n    }\n}\n\nconst DiagramGroupNodeCallable = callable(DiagramGroupNode);\ntype DiagramGroupNodeCallable = DiagramGroupNode;\nexport {\n    DiagramGroupNode         as _DiagramGroupNode,\n    DiagramGroupNodeCallable as DiagramGroupNode,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n//\n// One `<svg>` Component drawing the diagram's edges as `<path>` elements with a\n// shared arrowhead `<marker>`. Follows the Glyph SVG-through-the-seam pattern:\n// the root `<svg>` and every leaf child are created via `DOM.sink.createElementNS`\n// and tracked with `trackHandle`, never raw DOM. The layer is non-interactive\n// (`pointer-events: none`) so node clicks fall through to the node components.\n\nimport { Component, ComponentOptions } from \"~/core/Component.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport type { Handle } from \"~/core/DOM.js\";\nimport type { ElkEdgeSection, ElkPoint } from \"~/component/diagram/ElkLayoutEngine.js\";\nimport type { DiagramEdgeMarker, DiagramEdgeStyle } from \"~/component/diagram/DiagramModel.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/** SVG namespace URI. */\nconst SVG_NS = \"http://www.w3.org/2000/svg\";\n\n/** Themed stroke for edge paths and the arrowhead. */\nconst EDGE_STROKE = \"var(--ts-ui-diagram-edge, var(--ts-ui-border-color, rgb(120, 120, 120)))\";\n\n/** Edge path stroke width in pixels — a hairline that reads at any zoom. */\nconst EDGE_STROKE_WIDTH = \"1.5\";\n\n/** Font size (px) of an edge's mid-route label. */\nconst LABEL_FONT_SIZE = \"12\";\n\n/**\n * Background colour and width (px) of the halo drawn behind an edge label. The\n * label text is painted `stroke`-then-`fill` (`paint-order`), so this\n * background-coloured stroke masks the edge line running under the glyphs — the\n * label reads clearly instead of being crossed out by the edge.\n */\nconst LABEL_HALO       = \"var(--ts-ui-diagram-bg, var(--ts-ui-panel-bg, rgb(255, 255, 255)))\";\nconst LABEL_HALO_WIDTH = \"4\";\n\n/** Arrowhead marker box size in user units (matches the `refX`/`refY` below). */\nconst ARROW_SIZE = 8;\n\n/** Dash pattern applied when an edge's `style.dashed` is set. */\nconst DASH_ARRAY = \"6 4\";\n\n/**\n * Non-`\"arrow\"` crow's-foot marker kinds this layer pre-defines in `<defs>`.\n * Kept as a literal array (rather than deriving from {@link DiagramEdgeMarker})\n * so `createRootElement` can iterate it directly.\n */\nconst CROWS_FOOT_MARKERS: readonly Exclude<DiagramEdgeMarker, \"arrow\">[] =\n    [\"one\", \"zeroOrOne\", \"oneOrMany\", \"zeroOrMany\"];\n\n/**\n * One crow's-foot marker's geometry: its `<marker>` box (`width`/`height`),\n * the point within that box the edge vertex anchors to (`refX`/`refY`), and\n * its child shapes as bare SVG element specs. Every marker uses\n * `orient=\"auto-start-reverse\"`, so the same definition auto-flips when used\n * at `marker-start` and reads unreversed at `marker-end`.\n */\ninterface MarkerGeometry {\n    width:  number;\n    height: number;\n    refX:   number;\n    refY:   number;\n    /** Child shapes, each a bare tag name plus its SVG attributes. */\n    parts: Array<{ tag: \"path\" | \"circle\"; attrs: Record<string, string> }>;\n}\n\n/**\n * Geometry table for the four crow's-foot markers. Coordinates are chosen so\n * every marker's \"attach\" edge sits at `x = width` (the vertex, via `refX`)\n * and its \"open\" edge sits toward `x = 0` (away from the node) — exact pixels\n * are a manual visual-tuning step, not a correctness concern (see the\n * fk-diagram-cardinality-and-index-coverage plan).\n */\nconst MARKER_GEOMETRY: Record<Exclude<DiagramEdgeMarker, \"arrow\">, MarkerGeometry> = {\n    // \"one and only one\": two perpendicular bars across the line.\n    one: {\n        width: 12, height: 12, refX: 12, refY: 6,\n        parts: [{ tag: \"path\", attrs: { d: \"M 4 0 L 4 12 M 8 0 L 8 12\" } }],\n    },\n    // \"zero or one\": one perpendicular bar plus a small inboard circle.\n    zeroOrOne: {\n        width: 16, height: 12, refX: 16, refY: 6,\n        parts: [\n            { tag: \"path\", attrs: { d: \"M 12 0 L 12 12\" } },\n            { tag: \"circle\", attrs: { cx: \"6\", cy: \"6\", r: \"4\" } },\n        ],\n    },\n    // \"one or many\": a three-prong crow's foot plus one perpendicular bar just inboard of it.\n    oneOrMany: {\n        width: 16, height: 12, refX: 16, refY: 6,\n        parts: [\n            { tag: \"path\", attrs: { d: \"M 0 6 L 12 0 M 0 6 L 12 6 M 0 6 L 12 12\" } },\n            { tag: \"path\", attrs: { d: \"M 14 0 L 14 12\" } },\n        ],\n    },\n    // \"zero or many\": a three-prong crow's foot plus a small inboard circle.\n    zeroOrMany: {\n        width: 18, height: 12, refX: 18, refY: 6,\n        parts: [\n            { tag: \"path\", attrs: { d: \"M 6 6 L 18 0 M 6 6 L 18 6 M 6 6 L 18 12\" } },\n            { tag: \"circle\", attrs: { cx: \"3\", cy: \"6\", r: \"3\" } },\n        ],\n    },\n};\n\n/**\n * A single routed edge: its identity, the ELK sections describing its\n * polyline route (start point, optional bend points, end point), and its\n * optional visual style (joined in from the model by\n * [`DiagramView.applyLayout`](/api/component/diagram/classes/DiagramView)).\n */\nexport interface DiagramEdgeRoute {\n    id:       string;\n    sections: ElkEdgeSection[];\n    /** Optional cardinality/dependency style. Absent = today's plain arrow-ended edge. */\n    style?: DiagramEdgeStyle;\n}\n\n/**\n * The point used to place an edge's optional label: the halfway point *along the\n * routed polyline* (start → bend points → end), measured by arc length. This\n * stays visually centred on the edge even when it bends — a bend point can sit\n * far off centre and drag the label toward one endpoint.\n *\n * @param sections - The edge's routed sections.\n * @returns The label anchor point.\n */\nfunction labelPoint(sections: ElkEdgeSection[]): ElkPoint {\n    const section = sections[0];\n\n    if (!section) {\n        return { x: 0, y: 0 };\n    }\n\n    const points = [section.startPoint, ...(section.bendPoints ?? []), section.endPoint];\n\n    return midpointAlong(points);\n}\n\n/**\n * The point half the total length along a polyline, interpolated within the\n * segment that straddles the midpoint.\n *\n * @param points - The polyline vertices, in order (length >= 1).\n * @returns The arc-length midpoint.\n */\nfunction midpointAlong(points: ElkPoint[]): ElkPoint {\n    const segmentLength = (a: ElkPoint, b: ElkPoint): number => Math.hypot(b.x - a.x, b.y - a.y);\n\n    let total = 0;\n\n    for (let i = 1; i < points.length; i++) {\n        total += segmentLength(points[i - 1], points[i]);\n    }\n\n    let remaining = total / 2;\n\n    for (let i = 1; i < points.length; i++) {\n        const length = segmentLength(points[i - 1], points[i]);\n\n        if (length >= remaining) {\n            const t = length === 0 ? 0 : remaining / length;\n\n            return {\n                x: points[i - 1].x + (points[i].x - points[i - 1].x) * t,\n                y: points[i - 1].y + (points[i].y - points[i - 1].y) * t,\n            };\n        }\n\n        remaining -= length;\n    }\n\n    return points[points.length - 1];\n}\n\n/**\n * Serialises an edge's ELK sections into an SVG path `d` string. Each section\n * starts with a move to its `startPoint`, threads any `bendPoints`, and lines to\n * its `endPoint`.\n *\n * @param sections - The edge's routed sections.\n * @returns The SVG path data, or an empty string when there is nothing to draw.\n */\nfunction buildPathData(sections: ElkEdgeSection[]): string {\n    const parts: string[] = [];\n\n    for (const section of sections) {\n        parts.push(`M ${section.startPoint.x} ${section.startPoint.y}`);\n\n        for (const bend of section.bendPoints ?? []) {\n            parts.push(`L ${bend.x} ${bend.y}`);\n        }\n\n        parts.push(`L ${section.endPoint.x} ${section.endPoint.y}`);\n    }\n\n    return parts.join(\" \");\n}\n\n/**\n * The SVG edge layer for a [`DiagramView`](/api/component/diagram/classes/DiagramView).\n * Owns exactly one `<svg>` element and rebuilds its `<path>` children from ELK\n * edge routes whenever the diagram re-lays-out.\n *\n * @category Components\n */\nclass DiagramEdgeLayer extends Component<ComponentOptions> {\n\n    /** Cached edge routes, redrawn at render time and on every `setEdges`. */\n    private _edges: DiagramEdgeRoute[] = [];\n\n    /** Handles of the currently-drawn `<path>`/`<text>` children, released on rebuild. */\n    private _pathHandles: Handle[] = [];\n\n    /** Per-instance arrowhead marker id, referenced by each plain edge's `marker-end`. */\n    private readonly _markerId: string;\n\n    /** Per-instance crow's-foot marker ids, keyed by marker kind. */\n    private readonly _crowsFootMarkerIds: Record<Exclude<DiagramEdgeMarker, \"arrow\">, string>;\n\n    constructor(options?: ComponentOptions) {\n        super(options);\n\n        this._markerId = `${this.getId()}-arrow`;\n        this._crowsFootMarkerIds = Object.fromEntries(\n            CROWS_FOOT_MARKERS.map(kind => [kind, `${this.getId()}-${kind}`]),\n        ) as Record<Exclude<DiagramEdgeMarker, \"arrow\">, string>;\n\n        // Non-interactive overlay: clicks must reach the node components beneath.\n        this.setPointerEvents(\"none\");\n    }\n\n    /**\n     * Resolves a marker kind to its namespaced `url(#…)` reference, or\n     * `undefined` when the kind is absent (no marker on that end).\n     *\n     * @param kind - The requested marker kind, if any.\n     * @returns The `url(#id)` reference, or `undefined`.\n     */\n    private markerUrl(kind: DiagramEdgeMarker | undefined): string | undefined {\n        if (!kind) {\n            return undefined;\n        }\n\n        const id = kind === \"arrow\" ? this._markerId : this._crowsFootMarkerIds[kind];\n\n        return `url(#${id})`;\n    }\n\n    /**\n     * Replaces the drawn edges and rebuilds the path children.\n     *\n     * @param edges - The routed edges to draw.\n     *\n     * @returns This layer, for method chaining.\n     */\n    setEdges(edges: DiagramEdgeRoute[]): this {\n        this._edges = edges;\n        this.rebuildPaths();\n\n        return this;\n    }\n\n    /**\n     * Creates the root `<svg>` with the arrowhead marker plus one `<marker>` per\n     * crow's-foot kind in a shared `<defs>`. Every marker and its child shapes\n     * are seam-created leaf children tracked for release.\n     *\n     * @returns The root `<svg>` handle.\n     */\n    protected createRootElement(): Handle {\n        const svg  = DOM.sink.createElementNS(SVG_NS, \"svg\");\n        const defs = DOM.sink.createElementNS(SVG_NS, \"defs\");\n\n        this.createArrowMarker(defs);\n\n        for (const kind of CROWS_FOOT_MARKERS) {\n            this.createCrowsFootMarker(defs, kind);\n        }\n\n        DOM.sink.appendChild(svg, defs);\n        this.trackHandle(defs);\n\n        return svg;\n    }\n\n    /**\n     * Defines the default arrowhead `<marker>` into `defs`. `orient=\"auto-start-\n     * reverse\"` so the one definition serves both `marker-end` (unreversed, the\n     * common case) and `marker-start` (auto-flipped to point back out of the\n     * source node) — e.g. a data-flow edge that draws its arrow at the source end.\n     *\n     * @param defs - The `<defs>` element to append into.\n     */\n    private createArrowMarker(defs: Handle): void {\n        const marker = DOM.sink.createElementNS(SVG_NS, \"marker\");\n\n        DOM.sink.apply(marker, { setAttr: {\n            id:           this._markerId,\n            markerWidth:  String(ARROW_SIZE),\n            markerHeight: String(ARROW_SIZE),\n            refX:         String(ARROW_SIZE),\n            refY:         String(ARROW_SIZE / 2),\n            orient:       \"auto-start-reverse\",\n            markerUnits:  \"userSpaceOnUse\",\n        } });\n\n        const arrow = DOM.sink.createElementNS(SVG_NS, \"path\");\n        DOM.sink.apply(arrow, { setAttr: {\n            d:    `M 0 0 L ${ARROW_SIZE} ${ARROW_SIZE / 2} L 0 ${ARROW_SIZE} z`,\n            fill: EDGE_STROKE,\n        } });\n\n        DOM.sink.appendChild(marker, arrow);\n        DOM.sink.appendChild(defs, marker);\n\n        this.trackHandle(marker);\n        this.trackHandle(arrow);\n    }\n\n    /**\n     * Defines one crow's-foot `<marker>` into `defs` from its\n     * {@link MARKER_GEOMETRY} entry. `orient=\"auto-start-reverse\"` lets the same\n     * definition serve both `marker-start` (auto-flipped) and `marker-end`\n     * (unreversed).\n     *\n     * @param defs - The `<defs>` element to append into.\n     * @param kind - Which crow's-foot marker to define.\n     */\n    private createCrowsFootMarker(defs: Handle, kind: Exclude<DiagramEdgeMarker, \"arrow\">): void {\n        const geometry = MARKER_GEOMETRY[kind];\n        const marker   = DOM.sink.createElementNS(SVG_NS, \"marker\");\n\n        DOM.sink.apply(marker, { setAttr: {\n            id:           this._crowsFootMarkerIds[kind],\n            markerWidth:  String(geometry.width),\n            markerHeight: String(geometry.height),\n            refX:         String(geometry.refX),\n            refY:         String(geometry.refY),\n            orient:       \"auto-start-reverse\",\n            markerUnits:  \"userSpaceOnUse\",\n        } });\n\n        DOM.sink.appendChild(defs, marker);\n        this.trackHandle(marker);\n\n        for (const part of geometry.parts) {\n            const shape = DOM.sink.createElementNS(SVG_NS, part.tag);\n\n            DOM.sink.apply(shape, { setAttr: {\n                ...part.attrs,\n                fill:   \"none\",\n                stroke: EDGE_STROKE,\n            } });\n\n            DOM.sink.appendChild(marker, shape);\n            this.trackHandle(shape);\n        }\n    }\n\n    /**\n     * Renders the root element and draws the cached edges.\n     *\n     * @returns The rendered root element.\n     */\n    protected render(): Handle {\n        const element = super.render();\n\n        this.rebuildPaths();\n\n        return element;\n    }\n\n    /**\n     * Clears the previously-drawn paths and rebuilds them from the cached edge\n     * routes. No-op before the element exists — `render` performs the first draw.\n     */\n    private rebuildPaths(): void {\n        const svg = this.getElement();\n\n        if (!svg) {\n            return;\n        }\n\n        for (const handle of this._pathHandles) {\n            DOM.sink.removeChild(svg, handle);\n            this.untrackHandle(handle);\n            DOM.sink.release(handle);\n        }\n\n        this._pathHandles = [];\n\n        for (const edge of this._edges) {\n            const d = buildPathData(edge.sections);\n\n            if (!d) {\n                continue;\n            }\n\n            const path  = DOM.sink.createElementNS(SVG_NS, \"path\");\n            const style = edge.style;\n\n            // No style: today's back-compat behaviour — a plain arrow at the end,\n            // no start marker. With a style, each end draws only the marker (if\n            // any) the style names; an edge can carry cardinality with no\n            // marker-end at all.\n            const markerEnd   = style ? this.markerUrl(style.endMarker) : this.markerUrl(\"arrow\");\n            const markerStart = style ? this.markerUrl(style.startMarker) : undefined;\n\n            const attrs: Record<string, string> = {\n                d,\n                fill:           \"none\",\n                stroke:         style?.stroke ?? EDGE_STROKE,\n                \"stroke-width\": EDGE_STROKE_WIDTH,\n            };\n\n            if (markerEnd) {\n                attrs[\"marker-end\"] = markerEnd;\n            }\n\n            if (markerStart) {\n                attrs[\"marker-start\"] = markerStart;\n            }\n\n            if (style?.dashed) {\n                attrs[\"stroke-dasharray\"] = DASH_ARRAY;\n            }\n\n            DOM.sink.apply(path, { setAttr: attrs });\n\n            DOM.sink.appendChild(svg, path);\n            this.trackHandle(path);\n            this._pathHandles.push(path);\n\n            if (style?.label) {\n                this.drawLabel(svg, edge, style.label);\n            }\n        }\n    }\n\n    /**\n     * Draws one edge's optional mid-route label as a `<text>` element.\n     *\n     * @param svg - The root `<svg>` handle to append into.\n     * @param edge - The edge route the label belongs to (for its anchor point).\n     * @param label - The label text.\n     */\n    private drawLabel(svg: Handle, edge: DiagramEdgeRoute, label: string): void {\n        const point = labelPoint(edge.sections);\n        const text  = DOM.sink.createElementNS(SVG_NS, \"text\");\n\n        DOM.sink.apply(text, {\n            setAttr: {\n                x:                String(point.x),\n                y:                String(point.y),\n                fill:             EDGE_STROKE,\n                // Background-coloured halo painted first, so the edge line under the\n                // glyphs is masked and the label reads clearly (not crossed out).\n                stroke:           LABEL_HALO,\n                \"stroke-width\":   LABEL_HALO_WIDTH,\n                \"stroke-linejoin\": \"round\",\n                \"paint-order\":    \"stroke\",\n                \"font-size\":      LABEL_FONT_SIZE,\n                \"text-anchor\":    \"middle\",\n                \"dominant-baseline\": \"central\",\n            },\n            text: label,\n        });\n\n        DOM.sink.appendChild(svg, text);\n        this.trackHandle(text);\n        this._pathHandles.push(text);\n    }\n}\n\nconst DiagramEdgeLayerCallable = callable(DiagramEdgeLayer);\ntype DiagramEdgeLayerCallable = DiagramEdgeLayer;\nexport {\n    DiagramEdgeLayer         as _DiagramEdgeLayer,\n    DiagramEdgeLayerCallable as DiagramEdgeLayer,\n};\n","// SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0\n//\n// A read-only graph/diagram viewer. Takes a framework-native node/edge model,\n// runs it through ELK for automatic layout (off-seam pure compute, lazily\n// imported), and renders themed node components plus an SVG edge layer with pan,\n// zoom, and node selection.\n//\n// Structure: DiagramView (the scrolling Panel viewport) owns a single content\n// host Container (Absolute layout) that carries the zoom transform and holds the\n// node components + the edge layer. Pan is native scroll on the viewport; zoom\n// is a `scale()` transform on the content host, whose box is sized to\n// graphBounds × zoom so the native scroll extent stays correct.\n\nimport { Panel, PanelOptions } from \"~/core/Panel.js\";\nimport { Container } from \"~/core/Container.js\";\nimport { Component } from \"~/core/Component.js\";\nimport { Absolute } from \"~/layout/Absolute.js\";\nimport { Event } from \"~/core/Event.js\";\nimport { DOM } from \"~/core/DOM.js\";\nimport type { Handle } from \"~/core/DOM.js\";\nimport { ListenerBag } from \"~/core/ListenerBag.js\";\nimport { DiagramData, DiagramNodeData } from \"~/component/diagram/DiagramModel.js\";\nimport { ElkLayoutEngine, DiagramLayoutResult } from \"~/component/diagram/ElkLayoutEngine.js\";\nimport { DiagramNode } from \"~/component/diagram/DiagramNode.js\";\nimport { DiagramGroupNode } from \"~/component/diagram/DiagramGroupNode.js\";\nimport { DiagramEdgeLayer } from \"~/component/diagram/DiagramEdgeLayer.js\";\nimport type { DiagramEdgeRoute } from \"~/component/diagram/DiagramEdgeLayer.js\";\nimport { callable } from \"~/core/Callable.js\";\n\n/** Factory producing a node component from a node's model data. */\nexport type DiagramNodeRenderer = (data: DiagramNodeData) => Component;\n\n/** String-literal union of the events emitted by {@link DiagramView}. */\nexport type DiagramViewEvent = \"selection\" | \"activate\" | \"layout\";\n\n/** Default initial zoom factor. */\nconst DEFAULT_ZOOM = 1;\n\n/** Default minimum zoom factor (a quarter scale). */\nconst DEFAULT_MIN_ZOOM = 0.25;\n\n/** Default maximum zoom factor (4× scale). */\nconst DEFAULT_MAX_ZOOM = 4;\n\n/** Multiplicative zoom step per wheel notch. */\nconst WHEEL_ZOOM_STEP = 1.1;\n\n// Paint order for a compound graph (one with at least one container): the\n// container boxes sit behind the edges, which sit behind the leaves, so a\n// leaf's click is never intercepted by its own container box. A leaf/container\n// component is always freshly built by rebuildNodes, so on a flat graph it\n// simply starts at DEFAULT_Z_INDEX and is never touched. The edge layer is the\n// one exception — it is a persistent child of the content host (built once in\n// the constructor, never torn down/rebuilt — see the constructor comment), so\n// a flat pass must explicitly restore DEFAULT_Z_INDEX in case an earlier\n// compound pass on the same view left EDGE_LAYER_Z_INDEX behind.\nconst DEFAULT_Z_INDEX = 0;\nconst CONTAINER_Z_INDEX = 0;\nconst EDGE_LAYER_Z_INDEX = 1;\nconst LEAF_Z_INDEX = 2;\n\n/**\n * Construction-time options for {@link DiagramView}.\n *\n * @category Components\n */\nexport interface DiagramViewOptions extends PanelOptions {\n    /** The initial graph to lay out and render. */\n    data?: DiagramData;\n    /** Factory for node components; defaults to building a `DiagramNode`. */\n    nodeRenderer?: DiagramNodeRenderer;\n    /** Factory for compound container components; defaults to `DiagramGroupNode`. */\n    groupRenderer?: DiagramNodeRenderer;\n    /** Default ELK layout options applied to every layout pass. */\n    layoutOptions?: Record<string, string>;\n    /** Optional URL of a consumer-hosted `elk-worker.js` for off-thread layout. */\n    elkWorkerUrl?: string;\n    /** Minimum zoom factor (default 0.25). */\n    minZoom?: number;\n    /** Maximum zoom factor (default 4). */\n    maxZoom?: number;\n    /** Initial zoom factor (default 1). */\n    zoom?: number;\n    /** Construction-time listener bag dispatched to {@link DiagramView.on}. */\n    listeners?: {\n        selection?: (nodes: DiagramNodeData[]) => void;\n        activate?:  (node: DiagramNodeData) => void;\n        layout?:    () => void;\n    };\n}\n\n/**\n * A read-only automatic-layout graph viewer with pan, zoom, and node selection.\n *\n * Pass a graph via the `data` option or {@link DiagramView.setData}. Layout runs\n * asynchronously through ELK; a `\"layout\"` event fires after each successful\n * pass, a `\"selection\"` event fires when the selected node changes, and an\n * `\"activate\"` event fires when a node is double-clicked.\n *\n * @example\n * ```typescript\n * const view = new DiagramView({\n *     data: {\n *         nodes: [{ id: \"a\", label: \"A\" }, { id: \"b\", label: \"B\" }],\n *         edges: [{ id: \"e\", source: \"a\", target: \"b\" }],\n *     },\n * });\n * view.on(\"selection\", (nodes) => console.log(nodes));\n * ```\n *\n * @category Components\n */\nclass DiagramView extends Panel<DiagramViewOptions> {\n\n    /** The transform-carrying content host holding nodes + the edge layer. */\n    private _contentHost!: Container;\n\n    /** The SVG edge layer, a persistent child of the content host. */\n    private _edgeLayer!: DiagramEdgeLayer;\n\n    /** The ELK layout adapter. Runtime state, off the options bag. */\n    private _engine!: ElkLayoutEngine;\n\n    /** Node components keyed by node id. */\n    private _nodeComponents: Map<string, Component> = new Map();\n\n    /** Node model data keyed by node id (selection payload source). */\n    private _nodeData: Map<string, DiagramNodeData> = new Map();\n\n    /** Ids of the compound container nodes built by the last `rebuildNodes`. */\n    private _containerIds: Set<string> = new Set();\n\n    /** Currently selected node data (single-select). */\n    private _selection: DiagramNodeData[] = [];\n\n    /** Monotonic layout token; guards against a stale in-flight layout landing. */\n    private _layoutGeneration: number = 0;\n\n    /** Cached graph bounding box from the last successful layout. */\n    private _graphWidth:  number = 0;\n    private _graphHeight: number = 0;\n\n    /** Custom-event fan-out for `\"selection\"` / `\"layout\"`. */\n    private _listeners: ListenerBag<DiagramViewEvent> = new ListenerBag<DiagramViewEvent>();\n\n    /** Pan drag state. */\n    private _panning: boolean = false;\n    private _panStartX: number = 0;\n    private _panStartY: number = 0;\n    private _panScrollLeft: number = 0;\n    private _panScrollTop: number = 0;\n\n    constructor(options?: DiagramViewOptions) {\n        super(options, { zoom: DEFAULT_ZOOM, minZoom: DEFAULT_MIN_ZOOM, maxZoom: DEFAULT_MAX_ZOOM });\n\n        this.setAutoScroll(\"auto\");\n\n        this._engine = this.createEngine();\n\n        // Nodes are laid out at unscaled graph coordinates under the host's\n        // `scale(zoom)` transform, so the host box (graph bounds × zoom) is\n        // smaller than the node coordinates whenever zoom < 1. The base\n        // `overflow: hidden` default would then crop the diagram to a\n        // `zoom`-fraction of the graph; keep it visible so the whole graph\n        // paints and the overflowing scaled nodes drive the native scroll\n        // extent (which tracks the visual size — graph bounds × zoom).\n        this._contentHost = new Container({ layoutManager: new Absolute(), overflow: \"visible\" });\n        this._contentHost.setTransformOrigin(\"0 0\");\n        this.addComponent(this._contentHost);\n\n        this._edgeLayer = new DiagramEdgeLayer();\n        this._contentHost.addComponent(this._edgeLayer);\n\n        this.applyListeners(options?.listeners);\n\n        if (this._options.zoom !== undefined) {\n            this.setZoom(this._options.zoom);\n        }\n\n        if (this._options.data) {\n            this.setData(this._options.data);\n        }\n    }\n\n    /**\n     * Builds the layout engine. Isolated as a factory so the swappable-engine\n     * seam can be exercised (a test substitutes a stub engine that returns a\n     * fixed result without importing ELK).\n     *\n     * @returns A fresh {@link ElkLayoutEngine}.\n     */\n    protected createEngine(): ElkLayoutEngine {\n        return new ElkLayoutEngine(this._options.elkWorkerUrl);\n    }\n\n    /**\n     * Caches consumer-configurable fields pure to `_options`; effects that need\n     * the content host (built in the constructor body) are dispatched there.\n     *\n     * @param options - The options bag carrying the values to apply.\n     */\n    protected applyOptions(options: DiagramViewOptions): this {\n        super.applyOptions(options);\n\n        if (options.data          !== undefined) this._options.data          = options.data;\n        if (options.nodeRenderer   !== undefined) this._options.nodeRenderer  = options.nodeRenderer;\n        if (options.groupRenderer  !== undefined) this._options.groupRenderer = options.groupRenderer;\n        if (options.layoutOptions  !== undefined) this._options.layoutOptions = options.layoutOptions;\n        if (options.elkWorkerUrl   !== undefined) this._options.elkWorkerUrl  = options.elkWorkerUrl;\n        if (options.minZoom        !== undefined) this._options.minZoom       = options.minZoom;\n        if (options.maxZoom        !== undefined) this._options.maxZoom       = options.maxZoom;\n        if (options.zoom           !== undefined) this._options.zoom          = options.zoom;\n\n        return this;\n    }\n\n    /**\n     * Replaces the graph, rebuilds node components, and triggers an async layout.\n     *\n     * @param data - The new graph.\n     *\n     * @returns This view, for method chaining.\n     */\n    setData(data: DiagramData): this {\n        this._options.data = data;\n        this.rebuildNodes(data);\n        this.relayout(data);\n\n        return this;\n    }\n\n    /**\n     * Returns the current graph, or `null` when none has been set.\n     *\n     * @returns The graph data, or `null`.\n     */\n    getData(): DiagramData | null {\n        return this._options.data ?? null;\n    }\n\n    /**\n     * Tears down the old node components + selection and builds fresh ones via\n     * the node renderer (default: `DiagramNode`), adding them to the content\n     * host. The persistent edge layer is cleared but not removed. Recurses into\n     * `children`: a container node (non-empty `children`) is built via the\n     * group renderer (default: `DiagramGroupNode`) and its children are built\n     * the same way, so container + leaf components all land as flat siblings in\n     * `_nodeComponents`/`_nodeData`, keyed by id — a container is never a DOM\n     * parent of its children (that would perturb the single-content-host model\n     * `nodeIdAt` hit-testing relies on).\n     *\n     * @param data - The graph whose nodes to build.\n     */\n    private rebuildNodes(data: DiagramData): void {\n        for (const component of this._nodeComponents.values()) {\n            this._contentHost.removeComponent(component);\n        }\n\n        this._nodeComponents.clear();\n        this._nodeData.clear();\n        this._containerIds.clear();\n        this._selection = [];\n        this._edgeLayer.setEdges([]);\n\n        const renderer = this._options.nodeRenderer ?? ((node: DiagramNodeData): Component =>\n            new DiagramNode({ label: node.label, glyph: node.glyph }));\n        const groupRenderer = this._options.groupRenderer ?? ((node: DiagramNodeData): Component =>\n            new DiagramGroupNode({ label: node.label, glyph: node.glyph }));\n\n        const build = (nodes: DiagramNodeData[]): void => {\n            for (const node of nodes) {\n                const isContainer = (node.children?.length ?? 0) > 0;\n                const component = isContainer ? groupRenderer(node) : renderer(node);\n\n                this._nodeComponents.set(node.id, component);\n                this._nodeData.set(node.id, node);\n                this._contentHost.addComponent(component);\n\n                if (isContainer) {\n                    this._containerIds.add(node.id);\n                    build(node.children!);\n                }\n            }\n        };\n\n        build(data.nodes);\n    }\n\n    /**\n     * Collects node sizes, bumps the generation token, and runs the async ELK\n     * layout. A stale result (older token) is dropped; a failed layout tears the\n     * nodes down so the view stays empty.\n     *\n     * @param data - The graph to lay out.\n     */\n    private relayout(data: DiagramData): void {\n        const sizes = this.collectNodeSizes(data);\n\n        this._layoutGeneration += 1;\n        const generation = this._layoutGeneration;\n\n        this._engine\n            .layout(data, sizes, this._options.layoutOptions)\n            .then((result) => this.applyLayout(result, generation))\n            .catch(() => this.handleLayoutFailure(generation));\n    }\n\n    /**\n     * Resolves each node's size fed to ELK: the explicit `width`/`height` from\n     * the model when present, else the node component's preferred size.\n     * Recurses into `children` so every container and leaf is represented; a\n     * container's entry is harmless-but-unused since `buildElkGraph` computes a\n     * container's box from its contents rather than consulting this map.\n     *\n     * @param data - The graph whose node sizes to collect.\n     * @returns A map of node id to resolved size.\n     */\n    private collectNodeSizes(data: DiagramData): Map<string, { width: number; height: number }> {\n        const sizes = new Map<string, { width: number; height: number }>();\n\n        const collect = (nodes: DiagramNodeData[]): void => {\n            for (const node of nodes) {\n                const component = this._nodeComponents.get(node.id);\n                const preferred = component?.getPreferredSize();\n\n                sizes.set(node.id, {\n                    width:  node.width  ?? preferred?.width  ?? 0,\n                    height: node.height ?? preferred?.height ?? 0,\n                });\n\n                if (node.children && node.children.length > 0) {\n                    collect(node.children);\n                }\n            }\n        };\n\n        collect(data.nodes);\n\n        return sizes;\n    }\n\n    /**\n     * Applies a completed layout: positions each node, sizes + scales the\n     * content host, redraws the edges, and emits `\"layout\"`. A stale result\n     * (superseded by a newer `setData`) is ignored.\n     *\n     * @param result - The ELK layout result.\n     * @param generation - The generation token captured when the layout started.\n     */\n    private applyLayout(result: DiagramLayoutResult, generation: number): void {\n        if (generation !== this._layoutGeneration) {\n            return;\n        }\n\n        for (const node of result.nodes) {\n            const component = this._nodeComponents.get(node.id);\n\n            if (component) {\n                component.setPreferredSize(node.width, node.height);\n                component.setX(node.x);\n                component.setY(node.y);\n            }\n        }\n\n        this._graphWidth  = result.width;\n        this._graphHeight = result.height;\n\n        this._edgeLayer.setX(0);\n        this._edgeLayer.setY(0);\n        this._edgeLayer.setPreferredSize(result.width, result.height);\n        this._edgeLayer.setEdges(this.joinEdgeStyles(result.edges));\n\n        this.applyContainerZIndex();\n\n        this.applyZoomToHost();\n\n        this.scheduleLayout();\n\n        this.emit(\"layout\");\n    }\n\n    /**\n     * Applies the compound paint order — containers behind the edge layer,\n     * leaves in front of it — when `rebuildNodes` built at least one\n     * container. A flat graph's own (freshly-built) node components are never\n     * touched here — they start at `DEFAULT_Z_INDEX` — but the persistent edge\n     * layer is explicitly restored to `DEFAULT_Z_INDEX`, since an earlier\n     * compound `setData` on this same view could have left it elevated (see\n     * the module-level z-index constants).\n     */\n    private applyContainerZIndex(): void {\n        if (this._containerIds.size === 0) {\n            this._edgeLayer.setZIndex(DEFAULT_Z_INDEX);\n\n            return;\n        }\n\n        this._edgeLayer.setZIndex(EDGE_LAYER_Z_INDEX);\n\n        for (const [id, component] of this._nodeComponents) {\n            component.setZIndex(this._containerIds.has(id) ? CONTAINER_Z_INDEX : LEAF_Z_INDEX);\n        }\n    }\n\n    /**\n     * Re-attaches each model edge's `style` to its layout-routed counterpart.\n     * ELK's result carries only `{ id, sections }` — `style` never survives the\n     * round trip — so this joins by edge id back to `this._options.data.edges`,\n     * the model the layout was computed from.\n     *\n     * @param edges - The ELK-routed edges (id + sections only).\n     * @returns The same routes, each carrying its model edge's `style` if any.\n     */\n    private joinEdgeStyles(edges: DiagramEdgeRoute[]): DiagramEdgeRoute[] {\n        const modelById = new Map(this._options.data?.edges.map(e => [e.id, e]) ?? []);\n\n        return edges.map(edge => ({ ...edge, style: modelById.get(edge.id)?.style }));\n    }\n\n    /**\n     * Removes the just-built nodes when a layout fails (e.g. `elkjs` absent), so\n     * the view stays empty rather than showing stacked, unpositioned nodes.\n     *\n     * @param generation - The generation token captured when the layout started.\n     */\n    private handleLayoutFailure(generation: number): void {\n        if (generation !== this._layoutGeneration) {\n            return;\n        }\n\n        for (const component of this._nodeComponents.values()) {\n            this._contentHost.removeComponent(component);\n        }\n\n        this._nodeComponents.clear();\n        this._nodeData.clear();\n    }\n\n    /**\n     * Writes the content host's `scale()` transform and its scaled box from the\n     * cached graph bounds and current zoom.\n     */\n    private applyZoomToHost(): void {\n        const zoom = this.getZoom();\n\n        this._contentHost.setTransform(`scale(${zoom})`);\n\n        // The host's box feeds the viewport's native scroll extent, and the\n        // `scale(zoom)` transform above already scales the box's contribution:\n        // Chrome enlarges a scaled-up element's scroll-overflow footprint but\n        // ignores a scaled-down one (it keeps the untransformed box). So the box\n        // multiplier is clamped at 1 — on zoom-in the transform supplies the\n        // growth (a `× zoom` box would overshoot to graph bounds × zoom² and add\n        // phantom scrollbars), while on zoom-out the box must shrink with `zoom`\n        // itself since the transform's shrink is ignored. Either way the host's\n        // effective extent matches the nodes' own scaled extent (bounds × zoom).\n        const boxScale = Math.min(zoom, 1);\n        this._contentHost.setPreferredSize(this._graphWidth * boxScale, this._graphHeight * boxScale);\n    }\n\n    /**\n     * Returns the current zoom factor.\n     *\n     * @returns The zoom factor.\n     */\n    getZoom(): number {\n        return this._options.zoom ?? this._defaultOptions.zoom ?? DEFAULT_ZOOM;\n    }\n\n    /**\n     * Sets the zoom factor, clamped to `[minZoom, maxZoom]`, and re-scales the\n     * content host.\n     *\n     * @param zoom - The desired zoom factor.\n     *\n     * @returns This view, for method chaining.\n     */\n    setZoom(zoom: number): this {\n        this._options.zoom = this.clampZoom(zoom);\n        this.applyZoomToHost();\n\n        return this;\n    }\n\n    /**\n     * Fits the whole graph into the viewport by choosing the largest zoom at\n     * which the graph bounds fit both axes. Requires a completed layout.\n     *\n     * @returns This view, for method chaining.\n     */\n    zoomToFit(): this {\n        if (this._graphWidth <= 0 || this._graphHeight <= 0) {\n            return this;\n        }\n\n        const zoomX = this.getWidth()  / this._graphWidth;\n        const zoomY = this.getHeight() / this._graphHeight;\n\n        this.setZoom(Math.min(zoomX, zoomY));\n\n        return this;\n    }\n\n    /**\n     * Clamps a zoom request to the configured `[minZoom, maxZoom]` range.\n     *\n     * @param zoom - The requested zoom factor.\n     * @returns The clamped zoom factor.\n     */\n    private clampZoom(zoom: number): number {\n        const min = this._options.minZoom ?? this._defaultOptions.minZoom ?? DEFAULT_MIN_ZOOM;\n        const max = this._options.maxZoom ?? this._defaultOptions.maxZoom ?? DEFAULT_MAX_ZOOM;\n\n        return Math.max(min, Math.min(max, zoom));\n    }\n\n    /**\n     * Returns the current selection (single-select).\n     *\n     * @returns A copy of the selected node data array.\n     */\n    getSelection(): DiagramNodeData[] {\n        return [...this._selection];\n    }\n\n    /**\n     * Selects a node programmatically without emitting `\"selection\"` (mirroring\n     * the Tree precedent). Passing `null` clears the selection.\n     *\n     * @param id - The node id to select, or `null` to clear.\n     *\n     * @returns This view, for method chaining.\n     */\n    selectNode(id: string | null): this {\n        this.setSelection(id);\n\n        return this;\n    }\n\n    /**\n     * Scrolls the viewport so the given node is centred, without changing the\n     * selection or emitting any event. No-op for an unknown id or before the\n     * first layout has positioned the node. Pair with {@link selectNode} to both\n     * highlight and reveal.\n     *\n     * @param id - The node id to centre, or a no-op when not found.\n     *\n     * @returns This view, for method chaining.\n     */\n    revealNode(id: string): this {\n        const component = this._nodeComponents.get(id);\n\n        if (!component) {\n            return this;\n        }\n\n        const zoom = this.getZoom();\n\n        // Node centre in scaled (on-screen) coordinates; the inverse of\n        // _handleWheel's graphX = (pointer + scroll) / zoom. Nodes carry unscaled\n        // graph coords via getX/getY under the content host's scale(zoom).\n        const centreX = (component.getX() + component.getWidth()  / 2) * zoom;\n        const centreY = (component.getY() + component.getHeight() / 2) * zoom;\n\n        // Scroll so the node centre lands at the viewport centre; the DOM clamps\n        // the scroll offsets to their valid range on write-back.\n        this.setScrollLeft(Math.max(0, centreX - this.getWidth()  / 2));\n        this.setScrollTop (Math.max(0, centreY - this.getHeight() / 2));\n\n        return this;\n    }\n\n    /**\n     * Updates the selection state and toggles each node's selected visual.\n     *\n     * @param id - The node id to select, or `null` to clear.\n     */\n    private setSelection(id: string | null): void {\n        for (const component of this._nodeComponents.values()) {\n            this.applySelectedVisual(component, false);\n        }\n\n        const data = id === null ? undefined : this._nodeData.get(id);\n\n        if (data) {\n            this._selection = [data];\n            this.applySelectedVisual(this._nodeComponents.get(id!)!, true);\n        } else {\n            this._selection = [];\n        }\n    }\n\n    /**\n     * Toggles a node component's selected visual when it supports one (the\n     * default `DiagramNode` does; a custom renderer may not).\n     *\n     * @param component - The node component.\n     * @param selected - The selected state to apply.\n     */\n    private applySelectedVisual(component: Component, selected: boolean): void {\n        const node = component as unknown as { setSelected?: (value: boolean) => void };\n\n        node.setSelected?.(selected);\n    }\n\n    /**\n     * Registers a listener for a diagram event.\n     *\n     * @param event - `\"selection\"` fires when the selected node changes;\n     *   `\"activate\"` fires when a node is double-clicked; `\"layout\"` fires\n     *   after each successful ELK layout pass.\n     * @param listener - The callback to invoke.\n     *\n     * @returns This view, for method chaining.\n     */\n    on(event: \"selection\", listener: (nodes: DiagramNodeData[]) => void): this;\n    on(event: \"activate\",  listener: (node: DiagramNodeData) => void): this;\n    on(event: \"layout\",    listener: () => void): this;\n    on(event: DiagramViewEvent, listener: Function): this {\n        this._listeners.add(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Removes a previously registered listener; the exact reference must match.\n     *\n     * @param event - The event the listener was registered for.\n     * @param listener - The callback to remove.\n     *\n     * @returns This view, for method chaining.\n     */\n    off(event: DiagramViewEvent, listener: Function): this {\n        this._listeners.remove(event, listener);\n\n        return this;\n    }\n\n    /**\n     * Fires every listener registered for `event`, in registration order.\n     *\n     * @param event - The event to emit.\n     * @param nodes - The selected node data (for `\"selection\"`), or the\n     *   activated node data (for `\"activate\"`).\n     */\n    protected emit(event: \"selection\", nodes: DiagramNodeData[]): void;\n    protected emit(event: \"activate\", node: DiagramNodeData): void;\n    protected emit(event: \"layout\"): void;\n    protected emit(event: DiagramViewEvent, ...payload: unknown[]): void {\n        this._listeners.fire(event, ...payload);\n    }\n\n    /**\n     * Wires the DOM-routed pan / zoom / selection listeners once the element\n     * exists.\n     *\n     * @param element - Optional element from the render pipeline.\n     *\n     * @returns This view, for method chaining.\n     */\n    protected init(element?: Handle): this {\n        super.init(element);\n\n        Event.addSubtreeListener(this, \"click\", this._handleClick);\n        Event.addSubtreeListener(this, \"dblclick\", this._handleDoubleClick);\n        Event.addListener(this, \"wheel\", this._handleWheel);\n        Event.addListener(this, \"pointerdown\", this._handlePointerDown);\n        Event.addListener(this, \"pointermove\", this._handlePointerMove);\n        Event.addListener(this, \"pointerup\", this._handlePointerUp);\n\n        return this;\n    }\n\n    /**\n     * Resolves the node under a click and updates the selection, emitting\n     * `\"selection\"` when it changes. A click on empty space clears the\n     * selection.\n     *\n     * @param event - The click event whose target is inside the view's subtree.\n     */\n    private _handleClick(event: MouseEvent): void {\n        const id = this.nodeIdAt(event.target);\n\n        if (id !== null) {\n            this.setSelection(id);\n            this.emit(\"selection\", this.getSelection());\n        } else if (this._selection.length > 0) {\n            this.setSelection(null);\n            this.emit(\"selection\", this.getSelection());\n        }\n    }\n\n    /**\n     * Resolves the node under a double-click and emits `\"activate\"` with its\n     * data. A double-click is preceded by the single click that already\n     * selected the node, so this only signals activation. A double-click on\n     * empty space resolves to no node and emits nothing.\n     *\n     * @param event - The dblclick event whose target is inside the view's\n     *   subtree.\n     */\n    private _handleDoubleClick(event: MouseEvent): void {\n        const id = this.nodeIdAt(event.target);\n\n        if (id === null) {\n            return;\n        }\n\n        const data = this._nodeData.get(id);\n\n        if (data !== undefined) {\n            this.emit(\"activate\", data);\n        }\n    }\n\n    /**\n     * Resolves the node id whose component owns the given event target.\n     *\n     * @param target - The raw DOM event target.\n     * @returns The owning node id, or `null` when the target is not on a node.\n     */\n    private nodeIdAt(target: EventTarget | null): string | null {\n        if (target === null) {\n            return null;\n        }\n\n        const handle = DOM.source.intern(target);\n\n        for (const [id, component] of this._nodeComponents) {\n            const element = component.getElement();\n\n            if (element && (element === handle || DOM.source.contains(element, handle))) {\n                return id;\n            }\n        }\n\n        return null;\n    }\n\n    /**\n     * Wheel-zoom about the pointer: scales toward/away and adjusts the scroll\n     * offsets so the graph point under the cursor stays put.\n     *\n     * @param event - The wheel event.\n     */\n    private _handleWheel(event: WheelEvent): void {\n        event.preventDefault();\n\n        const oldZoom = this.getZoom();\n        const newZoom = this.clampZoom(oldZoom * (event.deltaY < 0 ? WHEEL_ZOOM_STEP : 1 / WHEEL_ZOOM_STEP));\n\n        if (newZoom === oldZoom) {\n            return;\n        }\n\n        const rect    = DOM.source.getViewportRect(this);\n        const pointerX = event.clientX - rect.left;\n        const pointerY = event.clientY - rect.top;\n\n        const graphX = (pointerX + this.getScrollLeft()) / oldZoom;\n        const graphY = (pointerY + this.getScrollTop())  / oldZoom;\n\n        this.setZoom(newZoom);\n\n        this.setScrollLeft(graphX * newZoom - pointerX);\n        this.setScrollTop(graphY * newZoom - pointerY);\n    }\n\n    /**\n     * Begins a pan drag on a primary-button press, recording the start pointer\n     * and scroll offsets.\n     *\n     * @param event - The pointerdown event.\n     */\n    private _handlePointerDown(event: PointerEvent): void {\n        if (event.button !== 0) {\n            return;\n        }\n\n        this._panning        = true;\n        this._panStartX      = event.clientX;\n        this._panStartY      = event.clientY;\n        this._panScrollLeft  = this.getScrollLeft();\n        this._panScrollTop   = this.getScrollTop();\n    }\n\n    /**\n     * Pans the viewport during a drag by writing the scroll offsets from the\n     * pointer delta.\n     *\n     * @param event - The pointermove event.\n     */\n    private _handlePointerMove(event: PointerEvent): void {\n        if (!this._panning) {\n            return;\n        }\n\n        this.setScrollLeft(this._panScrollLeft - (event.clientX - this._panStartX));\n        this.setScrollTop(this._panScrollTop - (event.clientY - this._panStartY));\n    }\n\n    /**\n     * Ends a pan drag.\n     */\n    private _handlePointerUp(): void {\n        this._panning = false;\n    }\n}\n\nconst DiagramViewCallable = callable(DiagramView);\ntype DiagramViewCallable = DiagramView;\nexport {\n    DiagramView         as _DiagramView,\n    DiagramViewCallable as DiagramView,\n};\n"],"mappings":"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"}

package/dist/lib/component/display.es.js

@@ -0,0 +1,2 @@
+import{l as e,n as t,u as n}from"../Position-B-WfZYAJ.js";import{_ as r,f as i,n as a,t as o,y as s}from"../Component-BR2f0Itb.js";import{t as c}from"../ListenerBag-WPdKuuds.js";import{t as l}from"../Glyph-WUqTF_Z9.js";import{t as u}from"../Text-D1RrBY52.js";import{t as d}from"../HBox-Q8y1PHlk.js";import{t as f}from"../Border-oZC_SDy8.js";import{t as p}from"../ProgressSpinner-Dzaka7_c.js";import{t as m}from"../Placement-7kqdaK4Z.js";import{t as h}from"../Header-zPdvC2AX.js";import{t as g}from"../Button-DEUtBqK4.js";import{angle_left as _}from"../glyphs/solid/angle_left.es.js";import{angle_right as v}from"../glyphs/solid/angle_right.es.js";import{n as y,t as b}from"../Slider-xRxNSjFN.js";import{t as x}from"../IconText-BvGfu7eq.js";import{angles_left as S}from"../glyphs/solid/angles_left.es.js";import{angles_right as C}from"../glyphs/solid/angles_right.es.js";import{play as w}from"../glyphs/solid/play.es.js";import{pause as T}from"../glyphs/solid/pause.es.js";import{volume_high as ee}from"../glyphs/solid/volume_high.es.js";import{volume_mute as te}from"../glyphs/solid/volume_mute.es.js";import{expand as ne}from"../glyphs/solid/expand.es.js";import{compress as re}from"../glyphs/solid/compress.es.js";import{lexer as E}from"marked";var D={tag:`canvas`},O=-1,Canvas=class extends o{_ctx=null;_rafId=null;_animationRequested=!1;_syncedWidth=O;_syncedHeight=O;_syncedDpr=O;_dprToken=0;constructor(e){super(e,D),this.clearInsets()}applyOptions(e){return super.applyOptions(e),e.onDraw!==void 0&&this.setOnDraw(e.onDraw),e.animateWhenHidden!==void 0&&this.setAnimateWhenHidden(e.animateWhenHidden),this}getContext(){if(this._ctx)return this._ctx;let e=this.getElement();return e?(this._ctx=n.sink.getContext(e,`2d`),this._ctx):null}setOnDraw(e){return this._options.onDraw=e??void 0,this.redraw(),this}getOnDraw(){return this._options.onDraw??null}redraw(){let e=this.getContext();if(!e)return this;let t=this.getWidth(),n=this.getHeight();return e.clearRect(0,0,t,n),this._options.onDraw?.(e,t,n),this}startAnimation(){return this._animationRequested=!0,this.reconcileAnimation(),this}stopAnimation(){return this._animationRequested=!1,this.reconcileAnimation(),this}isAnimating(){return this._rafId!==null}setAnimateWhenHidden(e){return this._options.animateWhenHidden=e,this.reconcileAnimation(),this}getAnimateWhenHidden(){return this._options.animateWhenHidden??!1}syncBackingStore(){let e=this.getContext();if(!e)return;let t=this.getWidth(),r=this.getHeight(),i=n.source.getDevicePixelRatio();if(t===this._syncedWidth&&r===this._syncedHeight&&i===this._syncedDpr)return;let a=this.getElement();n.sink.apply(a,{setAttr:{width:String(Math.round(t*i)),height:String(Math.round(r*i))}}),e.setTransform(i,0,0,i,0,0),this._syncedWidth=t,this._syncedHeight=r,this._syncedDpr=i,this.redraw()}doLayout(){return super.doLayout(),this.syncBackingStore(),this}render(){let e=super.render();return this.watchDevicePixelRatio(),e}destructor(){this.stopAnimation(),super.destructor()}shouldAnimate(){return this._animationRequested&&(this.getAnimateWhenHidden()||this.isEffectivelyVisible())}reconcileAnimation(){this.shouldAnimate()?this._rafId===null&&(this._rafId=n.sink.requestAnimationFrame(this.animationStep)):this._rafId!=null&&(n.sink.cancelAnimationFrame(this._rafId),this._rafId=null)}animationStep=()=>{if(!this._animationRequested){this._rafId=null;return}this.redraw(),this._rafId=n.sink.requestAnimationFrame(this.animationStep)};onEffectiveVisibilityChange(e){super.onEffectiveVisibilityChange(e),this.reconcileAnimation()}watchDevicePixelRatio(){let e=++this._dprToken,t=n.source.getDevicePixelRatio();n.source.matchMedia(`(resolution: ${t}dppx)`).addChangeListener(()=>this.onDevicePixelRatioChange(e))}onDevicePixelRatioChange(e){e===this._dprToken&&this.getElement()&&(this.syncBackingStore(),this.watchDevicePixelRatio())}},k=i(Canvas),A={tag:`canvas`},j=-1,WebGLCanvas=class extends o{_gl=null;_rafId=null;_animationRequested=!1;_contextLost=!1;_syncedWidth=j;_syncedHeight=j;_syncedDpr=j;_dprToken=0;constructor(e){super(e,A),this._contextInitialised=!1,this.clearInsets()}applyOptions(e){return super.applyOptions(e),e.onContextInit!==void 0&&this.setOnContextInit(e.onContextInit),e.onFrame!==void 0&&this.setOnFrame(e.onFrame),e.animateWhenHidden!==void 0&&this.setAnimateWhenHidden(e.animateWhenHidden),this}getContext(){if(this._gl)return this._gl;let e=this.getElement();return e?(this._gl=n.sink.getContext(e,`webgl2`),this._gl):null}setOnContextInit(e){return this._options.onContextInit=e??void 0,this._contextInitialised=!1,this}getOnContextInit(){return this._options.onContextInit??null}setOnFrame(e){return this._options.onFrame=e??void 0,this}getOnFrame(){return this._options.onFrame??null}startAnimation(){return this._animationRequested=!0,this.reconcileAnimation(),this}stopAnimation(){return this._animationRequested=!1,this.reconcileAnimation(),this}isAnimating(){return this._rafId!==null}setAnimateWhenHidden(e){return this._options.animateWhenHidden=e,this.reconcileAnimation(),this}getAnimateWhenHidden(){return this._options.animateWhenHidden??!1}syncBackingStore(){let e=this.getContext();if(!e)return;let t=this.getWidth(),r=this.getHeight(),i=n.source.getDevicePixelRatio();if(t===this._syncedWidth&&r===this._syncedHeight&&i===this._syncedDpr)return;let a=Math.round(t*i),o=Math.round(r*i);n.sink.apply(this.getElement(),{setAttr:{width:String(a),height:String(o)}}),e.viewport(0,0,a,o),this._syncedWidth=t,this._syncedHeight=r,this._syncedDpr=i,this.renderFrame()}doLayout(){return super.doLayout(),this.syncBackingStore(),this}render(){let e=super.render();return s.addListener(this,`webglcontextlost`,e=>{e.preventDefault(),this._contextLost=!0}),s.addListener(this,`webglcontextrestored`,()=>{this._contextLost=!1,this._contextInitialised=!1,this.syncBackingStore()}),this.watchDevicePixelRatio(),this.onFirstLayout(()=>this.startAnimation()),e}destructor(){this.stopAnimation(),super.destructor()}shouldAnimate(){return this._animationRequested&&(this.getAnimateWhenHidden()||this.isEffectivelyVisible())}reconcileAnimation(){this.shouldAnimate()?this._rafId===null&&(this._rafId=n.sink.requestAnimationFrame(this.animationStep)):this._rafId!=null&&(n.sink.cancelAnimationFrame(this._rafId),this._rafId=null)}animationStep=()=>{if(!this._animationRequested){this._rafId=null;return}this.renderFrame(),this._rafId=n.sink.requestAnimationFrame(this.animationStep)};onEffectiveVisibilityChange(e){super.onEffectiveVisibilityChange(e),this.reconcileAnimation()}renderFrame(){let e=this.getContext();!e||this._contextLost||(this._contextInitialised||=(this._options.onContextInit?.(e),!0),this._options.onFrame?.(e,this.getWidth(),this.getHeight()))}watchDevicePixelRatio(){let e=++this._dprToken,t=n.source.getDevicePixelRatio();n.source.matchMedia(`(resolution: ${t}dppx)`).addChangeListener(()=>this.onDevicePixelRatioChange(e))}onDevicePixelRatioChange(e){e===this._dprToken&&this.getElement()&&(this.syncBackingStore(),this.watchDevicePixelRatio())}},M=i(WebGLCanvas),N=100,P={tag:`img`},Image=class extends o{_src;constructor(e,t){super(t,P),this._src=e,this.clearInsets()}getElement(e=!1){return super.getElement(e)}getPreferredSize(){let e=this.getElement(),t=n.source.getNaturalSize(e);return{width:t.width,height:t.height}}getMinSize(){let e=super.getMinSize();if(this._options.minSize)return e;let t=this.getElement();if(!t||!n.source.getNaturalSize(t).width)return{width:20,height:20};let r=n.source.getNaturalSize(t);return{width:Math.min(r.width,N),height:Math.min(r.height,N)}}render(){let e=super.render();return n.sink.apply(e,{setAttr:{src:this._src.valueOf()}}),e}},F=i(Image),I=`ts-ui-md-code`,L=`ts-ui-md-pre`,R=`ts-ui-md-quote`,z=`ts-ui-md-list`,B=`ts-ui-md-link`,V=`ts-ui-md-heading`,ie=1,H=6,U=!1;function ensureMarkdownClassRules(){U||(U=!0,new r({scope:`class`,name:I,styles:{fontFamily:`var(--ts-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)`,background:`rgba(127, 127, 127, 0.16)`,borderRadius:`var(--ts-ui-border-radius, 3px)`,padding:`0.1em 0.3em`}}),new r({scope:`class`,name:L,styles:{fontFamily:`var(--ts-ui-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)`,background:`rgba(127, 127, 127, 0.16)`,borderRadius:`var(--ts-ui-border-radius, 3px)`,padding:`0.6em 0.8em`,whiteSpace:`pre`,overflow:`auto`}}),new r({scope:`class`,name:R,styles:{borderLeft:`3px solid var(--ts-ui-border-color, rgba(127, 127, 127, 0.4))`,paddingLeft:`1em`,marginLeft:`0`}}),new r({scope:`class`,name:z,styles:{paddingLeft:`1.5em`}}),new r({scope:`class`,name:B,styles:{color:`var(--ts-ui-indicator-focus, #2563eb)`}}),new r({scope:`class`,name:V,styles:{fontWeight:`600`}}))}var Markdown=class extends o{_contentHandles=[];_measuredHeight=null;_unsubscribeTheme;constructor(e,t){super(t),e!==void 0&&this._options.markdown===void 0&&(this._options.markdown=e),this.setWhiteSpace(`normal`),this.setElementCSSRule(`overflowWrap`,`break-word`),this._unsubscribeTheme=a.onThemeChange(()=>this.measureContentHeight()),this.onFirstLayout(()=>this.measureContentHeight())}applyOptions(e){return super.applyOptions(e),e.markdown!==void 0&&(this._options.markdown=e.markdown),this}getMarkdown(){return this._options.markdown??``}setMarkdown(e){this._options.markdown=e;let t=this.getElement();return t?(this.clearContent(),ensureMarkdownClassRules(),this.appendBlockTokens(t,E(e)),this.measureContentHeight(),this):this}getMinSize(){let e=super.getMinSize();return this._measuredHeight===null?e:e?{width:e.width,height:Math.max(e.height,this._measuredHeight)}:{width:0,height:this._measuredHeight}}getPreferredSize(){let e=super.getPreferredSize();return this._measuredHeight===null||this.getPreferredSizeConstraint()!==null?e:e?{width:e.width,height:this._measuredHeight}:{width:0,height:this._measuredHeight}}setWidth(e){let t=e!==this.getWidth();return super.setWidth(e),t&&this.measureContentHeight(),this}dispose(){this._unsubscribeTheme()}measureContentHeight(){let e=this.getElement();if(!e)return;let t=this.getHeight();this.setElementStyle(`height`,`auto`),this.commitElementStyle();let r=this.getBorderSize(),i=n.source.getScrollMetrics(e).scrollHeight+r.top+r.bottom;this.setElementStyle(`height`,t+`px`),this.commitElementStyle(),i!==this._measuredHeight&&(this._measuredHeight=i,(this.getParentComponent()??this).scheduleLayout())}render(){let e=super.render();return ensureMarkdownClassRules(),this.appendBlockTokens(e,E(this.getMarkdown())),e}create(e){let t=n.sink.createElement(e);return this.trackHandle(t),this._contentHandles.push(t),t}clearContent(){for(let e of this._contentHandles)n.sink.removeElement(e),this.untrackHandle(e),n.sink.release(e);this._contentHandles.length=0}appendBlockTokens(e,t){for(let n of t)this.appendBlockToken(e,n)}appendBlockToken(e,t){switch(t.type){case`heading`:this.appendHeading(e,t);break;case`paragraph`:this.appendParagraph(e,t);break;case`list`:this.appendList(e,t);break;case`blockquote`:this.appendBlockquote(e,t);break;case`code`:this.appendCode(e,t);break;case`space`:break;default:this.appendTextNode(e,t.raw??``);break}}appendHeading(e,t){let r=Math.min(Math.max(t.depth,ie),H),i=this.create(`h`+r);n.sink.apply(i,{addClass:[V]}),this.appendInlineTokens(i,t.tokens),n.sink.appendChild(e,i)}appendParagraph(e,t){let r=this.create(`p`);this.appendInlineTokens(r,t.tokens),n.sink.appendChild(e,r)}appendList(e,t){let r=this.create(t.ordered?`ol`:`ul`);n.sink.apply(r,{addClass:[z]});for(let e of t.items)this.appendListItem(r,e);n.sink.appendChild(e,r)}appendListItem(e,t){let r=this.create(`li`);for(let e of t.tokens)if(e.type===`text`){let n=e;n.tokens&&n.tokens.length>0?this.appendInlineTokens(r,n.tokens):this.appendInlineToken(r,n,t.tokens.length===1)}else this.appendBlockToken(r,e);n.sink.appendChild(e,r)}appendBlockquote(e,t){let r=this.create(`blockquote`);n.sink.apply(r,{addClass:[R]}),this.appendBlockTokens(r,t.tokens),n.sink.appendChild(e,r)}appendCode(e,t){let r=this.create(`pre`);n.sink.apply(r,{addClass:[L]});let i=this.create(`code`);n.sink.apply(i,{text:t.text}),n.sink.appendChild(r,i),n.sink.appendChild(e,r)}appendInlineTokens(e,t){let n=t.length===1;for(let r of t)this.appendInlineToken(e,r,n)}appendInlineToken(e,t,r){switch(t.type){case`text`:{let i=t;i.tokens&&i.tokens.length>0?this.appendInlineTokens(e,i.tokens):r?n.sink.apply(e,{text:i.text}):this.appendTextNode(e,i.text);break}case`strong`:this.appendInlineWrapper(e,`strong`,t.tokens);break;case`em`:this.appendInlineWrapper(e,`em`,t.tokens);break;case`codespan`:{let r=this.create(`code`);n.sink.apply(r,{addClass:[I],text:t.text}),n.sink.appendChild(e,r);break}case`link`:this.appendLink(e,t);break;default:this.appendTextNode(e,t.text??t.raw??``);break}}appendInlineWrapper(e,t,r){let i=this.create(t);this.appendInlineTokens(i,r),n.sink.appendChild(e,i)}appendLink(e,t){let r=this.create(`a`);n.sink.apply(r,{addClass:[B],setAttr:{href:t.href,target:`_blank`,rel:`noopener noreferrer`}}),this.appendInlineTokens(r,t.tokens),n.sink.appendChild(e,r)}appendTextNode(e,t){let r=this.create(`span`);n.sink.apply(r,{text:t}),n.sink.appendChild(e,r)}},W=i(Markdown),G={gap:2,insets:new t(0,0,0,0)},IconLabel=class extends o{_glyph;_label;constructor(e,t,n,r){super(r,G),this.setLayoutManager(new d({spacing:this.getGap()}));let i=this._options.glyph??e,a=this._options.text??t,o=this._options.forId??n;this._glyph=new l(i),this._label=new y(a,o),this.addComponent(this._glyph),this.addComponent(this._label),this._options.gap!==void 0&&this.getLayoutManager().setComponentSpacing(this._options.gap)}applyOptions(e){return super.applyOptions(e),e.gap!==void 0&&(this._options.gap=e.gap),e.glyph!==void 0&&(this._options.glyph=e.glyph),e.text!==void 0&&(this._options.text=e.text),e.forId!==void 0&&(this._options.forId=e.forId),this}setGlyph(e){return this.removeComponent(this._glyph),this._glyph=new l(e),this.insertComponent(this._glyph,0),this}setText(e){return this._label.setText(e),this}setForId(e){return this._label.setForId(e),this}setGap(e){return this._options.gap=e,this.getLayoutManager().setComponentSpacing(e),this}getGap(){return this._options.gap??this._defaultOptions.gap}getGlyphComponent(){return this._glyph}getLabelComponent(){return this._label}},K=i(IconLabel);r.ensureKeyframes(`ts-ui-progress-indeterminate`,`0% { transform: translateX(-100%); } 100% { transform: translateX(400%); }`);var ProgressBar=class extends o{_track;_fill;_value;_indeterminate;constructor(t=0,n=!1,r){super(),this._value=e.clamp(t,0,100),this._indeterminate=n,this.setBackgroundColor(`var(--ts-ui-progress-track-bg, rgb(220, 220, 220))`),this.setBorderRadius(`var(--ts-ui-progress-track-radius, 4px)`),this._track=new o,this._track.setOverflow(`hidden`),this._track.setBorderRadius(`var(--ts-ui-progress-track-radius, 4px)`),this._fill=new o,this._fill.setBackgroundColor(`var(--ts-ui-progress-fill-bg, rgb(30, 100, 200))`),this._track.addComponent(this._fill),super.addComponent(this._track),this.getAria().setRole(`progressbar`),this.getAria().setValueMin(0),this.getAria().setValueMax(100),this.getAria().setValueNow(this._value),this._indeterminate&&this.applyIndeterminate(!0),r&&this.applyOptions(r)}applyOptions(e){return super.applyOptions(e),e.indeterminate!==void 0&&this.setIndeterminate(e.indeterminate),e.value!==void 0&&this.setValue(e.value),this}getBaseline(){let e=this.getPreferredSize();return e?e.height-2:null}getValue(){return this._indeterminate?0:this._value}setValue(t){let n=e.clamp(t,0,100);return n===this._value?this:(this._value=n,this.getAria().setValueNow(n),this._indeterminate||this.scheduleLayout(),this)}isIndeterminate(){return this._indeterminate}setIndeterminate(e){return this._indeterminate===e?this:(this._indeterminate=e,this.applyIndeterminate(e),this.flushLayout(),this)}doLayout(){let e=this.getInnerSize();if(!e)return super.doLayout(),this;if(this._track.setX(0),this._track.setY(0),this._track.setSize({width:e.width,height:e.height}),this._indeterminate){let t=Math.max(20,Math.round(e.width*.25));this._fill.setX(0),this._fill.setY(0),this._fill.setSize({width:t,height:e.height})}else{let t=Math.round(e.width*this._value/100);this._fill.setX(0),this._fill.setY(0),this._fill.setSize({width:t,height:e.height})}return super.doLayout(),this}applyIndeterminate(e){e?(this._fill.setBackgroundColor(`var(--ts-ui-progress-indeterminate-bg, rgb(30, 100, 200))`),this._fill.setAnimation(`ts-ui-progress-indeterminate 1.4s ease-in-out infinite`)):(this._fill.setBackgroundColor(`var(--ts-ui-progress-fill-bg, rgb(30, 100, 200))`),this._fill.clearAnimation())}},q=i(ProgressBar);l.register(S,_,v,C);var PaginationBar=class extends o{_store;_firstBtn;_prevBtn;_nextBtn;_lastBtn;_pageText;_onStoreUpdate=()=>this.refresh();constructor(e,t){super(),this._store=e;let n=new d;n.setComponentSpacing(4),this.setLayoutManager(n),this._firstBtn=new g({glyph:`angles-left`}),this._prevBtn=new g({glyph:`angle-left`}),this._pageText=new u(`Page x of y`),this._nextBtn=new g({glyph:`angle-right`}),this._lastBtn=new g({glyph:`angles-right`}),this._firstBtn.setPreferredSize(28,28),this._prevBtn.setPreferredSize(28,28),this._nextBtn.setPreferredSize(28,28),this._lastBtn.setPreferredSize(28,28),this._pageText.centerInHeight(28),this._firstBtn.on(`action`,()=>this._store.goToPage(1)),this._prevBtn.on(`action`,()=>this._store.prevPage()),this._nextBtn.on(`action`,()=>this._store.nextPage()),this._lastBtn.on(`action`,()=>{let e=this._store.getTotalPages();this._store.goToPage(e??this._store.getPage())}),this.addComponent(this._firstBtn),this.addComponent(this._prevBtn),this.addComponent(this._pageText),this.addComponent(this._nextBtn),this.addComponent(this._lastBtn),this._store.on(`pagechange`,this._onStoreUpdate),this._store.on(`load`,this._onStoreUpdate),this._store.on(`datachange`,this._onStoreUpdate),this._store.on(`add`,this._onStoreUpdate),this._store.on(`remove`,this._onStoreUpdate),this._store.on(`sync`,this._onStoreUpdate),this.refresh(),t&&this.applyOptions(t)}applyOptions(e){return super.applyOptions(e),e.pageSize!==void 0&&this._store.setPageSize(e.pageSize),e.pageIndex!==void 0&&this._store.goToPage(e.pageIndex),this}dispose(){this._store.off(`pagechange`,this._onStoreUpdate),this._store.off(`load`,this._onStoreUpdate),this._store.off(`datachange`,this._onStoreUpdate),this._store.off(`add`,this._onStoreUpdate),this._store.off(`remove`,this._onStoreUpdate),this._store.off(`sync`,this._onStoreUpdate)}refresh(){let e=this._store.getPage(),t=this._store.getTotalPages(),n=this._store.hasPendingChanges(),r=t==null?`Page ${e}`:`Page ${e} of ${t}`;this._pageText.setText(r),this._firstBtn.setEnabled(!n&&e>1),this._prevBtn.setEnabled(!n&&e>1),this._nextBtn.setEnabled(!n&&(t==null||e<t)),this._lastBtn.setEnabled(!n&&t!=null&&e<t)}},J=i(PaginationBar),Y=[`timeupdate`,`play`,`pause`,`ended`,`loadedmetadata`,`durationchange`,`volumechange`,`ratechange`],ae=1,oe=1,se={tag:`video`},Video=class extends o{_listeners=new c;_mediaHandlers=new Map;constructor(e){super(e,se),this.clearInsets(),this.getAria().setLabel(`Video`),this.buildMediaHandlers(),this.applyListeners(e?.listeners)}applyOptions(e){return super.applyOptions(e),e.src!==void 0&&this.setSrc(e.src),e.poster!==void 0&&this.setPoster(e.poster),e.autoplay!==void 0&&this.setAutoplay(e.autoplay),e.loop!==void 0&&this.setLoop(e.loop),e.preload!==void 0&&this.setPreload(e.preload),e.muted!==void 0&&this.setMuted(e.muted),e.volume!==void 0&&this.setVolume(e.volume),e.playbackRate!==void 0&&this.setPlaybackRate(e.playbackRate),this}getSrc(){return this._options.src??null}setSrc(e){return this._options.src=e,this.setElementAttribute(`src`,e),this}getPoster(){return this._options.poster??null}setPoster(e){return this._options.poster=e,this.setElementAttribute(`poster`,e),this}isAutoplay(){return this._options.autoplay??!1}setAutoplay(e){return this._options.autoplay=e,this.setElementAttribute(`autoplay`,e?``:null),this}isLoop(){return this._options.loop??!1}setLoop(e){return this._options.loop=e,this.setElementAttribute(`loop`,e?``:null),this}isMuted(){return this._options.muted??!1}setMuted(e){this._options.muted=e,this.setElementAttribute(`muted`,e?``:null);let t=this.getElement();return t&&n.sink.setMuted(t,e),this}getPreload(){return this._options.preload??null}setPreload(e){return this._options.preload=e,this.setElementAttribute(`preload`,e),this}getVolume(){return this._options.volume??ae}setVolume(e){let t=Math.max(0,Math.min(1,e));this._options.volume=t;let r=this.getElement();return r&&n.sink.setVolume(r,t),this}getPlaybackRate(){return this._options.playbackRate??oe}setPlaybackRate(e){this._options.playbackRate=e;let t=this.getElement();return t&&n.sink.setPlaybackRate(t,e),this}setCurrentTime(e){let t=this.getElement();return t&&n.sink.setCurrentTime(t,e),this}play(){let e=this.getElement();return e&&n.sink.mediaPlay(e),this}pause(){let e=this.getElement();return e&&n.sink.mediaPause(e),this}getMediaState(){let e=this.getElement();return e?n.source.getMediaState(e):{currentTime:0,duration:0,paused:!0,ended:!1,volume:this.getVolume(),muted:this.isMuted(),playbackRate:this.getPlaybackRate()}}on(e,t){return this._listeners.add(e,t),this}off(e,t){return this._listeners.remove(e,t),this}emit(e){this._listeners.fire(e)}init(e){super.init(e);let t=e??this.getElement();return t?(this.replayMediaOptions(t),this.attachMediaListeners(t),this):this}dispose(){let e=this.getElement();if(e)for(let[t,r]of this._mediaHandlers)n.sink.removeListener(e,t,r)}buildMediaHandlers(){for(let e of Y)this._mediaHandlers.set(e,()=>this.emit(e))}replayMediaOptions(e){let t=this._options,r={};t.src!==void 0&&(r.src=t.src),t.poster!==void 0&&(r.poster=t.poster),t.preload!==void 0&&(r.preload=t.preload),t.autoplay&&(r.autoplay=``),t.loop&&(r.loop=``),t.muted&&(r.muted=``),Object.keys(r).length>0&&n.sink.apply(e,{setAttr:r}),t.muted!==void 0&&n.sink.setMuted(e,t.muted),t.volume!==void 0&&n.sink.setVolume(e,t.volume),t.playbackRate!==void 0&&n.sink.setPlaybackRate(e,t.playbackRate)}attachMediaListeners(e){for(let[t,r]of this._mediaHandlers)n.sink.addListener(e,t,r)}},X=i(Video),ProgressiveEngine=class{load(e,t){e.setSrc(t)}destroy(){}};l.register(w,T,ee,te,ne,re);var Z=28,Q=80,ce=28,le=.05,$=6;function formatMediaTime(e){if(!Number.isFinite(e)||e<0)return`0:00`;let t=Math.floor(e),n=t%60,r=Math.floor(t/60)%60,i=Math.floor(t/3600),a=String(n).padStart(2,`0`);return i>=1?`${i}:${String(r).padStart(2,`0`)}:${a}`:`${r}:${a}`}var VideoPlayer=class extends o{_video;_controls;_playBtn;_scrubber;_timeText;_muteBtn;_volume;_fullscreenBtn;_engine=new ProgressiveEngine;_playing=!1;_fullscreen=!1;_scrubbing=!1;_syncing=!1;_listeners=new c;_onPlayButton=()=>this.togglePlay();_onMuteButton=()=>this.setMuted(!this.isMuted());_onFullscreenButton=()=>this.toggleFullscreen();_onScrub=()=>this.beginScrub();_onVolumeChange=e=>this.onVolumeSlider(e);_onVideoPlay=()=>this.onVideoPlay();_onVideoPause=()=>this.onVideoPause();_onVideoEnded=()=>this.onVideoEnded();_onVideoTimeUpdate=()=>this.onVideoTimeUpdate();_onVideoSync=()=>this.syncFromVideo();_onFullscreenChange=()=>this.syncFullscreen();constructor(e){super(),this.setLayoutManager(new f),this.getAria().setRole(`region`),this.getAria().setLabel(`Video player`),this._video=new X,this.buildControlBar(),this.wireControlListeners(),this.wireVideoListeners(),this.addComponent(this._video,{placement:m.CENTER}),this.addComponent(this._controls,{placement:m.SOUTH}),this.syncFromState(this._video.getMediaState()),e&&this.applyOptions(e),this.applyListeners(e?.listeners)}applyOptions(e){return super.applyOptions(e),e.engine!==void 0&&(this._engine=e.engine),e.src!==void 0&&this.setSrc(e.src),e.poster!==void 0&&this._video.setPoster(e.poster),e.autoplay!==void 0&&this._video.setAutoplay(e.autoplay),e.loop!==void 0&&this._video.setLoop(e.loop),e.muted!==void 0&&this._video.setMuted(e.muted),e.volume!==void 0&&this._video.setVolume(e.volume),e.playbackRate!==void 0&&this._video.setPlaybackRate(e.playbackRate),e.controls!==void 0&&this.setControlsVisible(e.controls),this}getSrc(){return this._video.getSrc()}setSrc(e){return this._engine.destroy(),this._engine.load(this._video,e),this}getVolume(){return this._video.getVolume()}setVolume(e){return this._video.setVolume(e),this.syncFromVideo(),this}isMuted(){return this._video.isMuted()}setMuted(e){return this._video.setMuted(e),this.syncFromVideo(),this}getPlaybackRate(){return this._video.getPlaybackRate()}setPlaybackRate(e){return this._video.setPlaybackRate(e),this}setCurrentTime(e){return this._video.setCurrentTime(e),this}getCurrentTime(){return this._video.getMediaState().currentTime}getDuration(){return this._video.getMediaState().duration}isPlaying(){return this._playing}play(){return this._video.play(),this}pause(){return this._video.pause(),this}togglePlay(){return this._playing?this.pause():this.play()}isControlsVisible(){return this._options.controls??!0}setControlsVisible(e){return this._options.controls=e,this._controls.setVisible(e),this}isFullscreen(){return this._fullscreen}enterFullscreen(){let e=this.getElement();return e&&n.sink.requestFullscreen(e),this}exitFullscreen(){return n.sink.exitFullscreen(),this}toggleFullscreen(){return this._fullscreen?this.exitFullscreen():this.enterFullscreen()}on(e,t){return this._listeners.add(e,t),this}off(e,t){return this._listeners.remove(e,t),this}emit(e){this._listeners.fire(e)}init(e){super.init(e);let t=e??this.getElement();return t?(n.sink.addListener(t,`fullscreenchange`,this._onFullscreenChange),this.syncFromVideo(),this):this}dispose(){this._video.dispose();let e=this.getElement();e&&n.sink.removeListener(e,`fullscreenchange`,this._onFullscreenChange)}syncFromState(e){this._syncing=!0;try{this._scrubbing||(this._scrubber.setMax(e.duration||0),this._scrubber.setValue(e.currentTime)),this._timeText.setText(`${formatMediaTime(e.currentTime)} / ${formatMediaTime(e.duration)}`),this._playBtn.setGlyph(e.paused?`play`:`pause`),this._muteBtn.setGlyph(e.muted||e.volume===0?`volume-mute`:`volume-high`),this._volume.setValue(e.muted?0:e.volume)}finally{this._syncing=!1}}syncFromVideo(){this.syncFromState(this._video.getMediaState())}buildControlBar(){this._playBtn=this.makeControlButton(`play`,`Play`),this._muteBtn=this.makeControlButton(`volume-high`,`Mute`),this._fullscreenBtn=this.makeControlButton(`expand`,`Fullscreen`),this._scrubber=new b({min:0,max:0,value:0}),this._scrubber.getAria().setLabel(`Seek`),this._volume=new b({min:0,max:1,step:le,value:1}),this._volume.getAria().setLabel(`Volume`),this._volume.setPreferredSize(Q,this._volume.getPreferredSize().height),this._volume.setMaxSize(Q,this._volume.getPreferredSize().height),this._timeText=new u(`0:00 / 0:00`),this._timeText.centerInHeight(ce);let e=new d;e.setComponentSpacing($),this._controls=new o,this._controls.setLayoutManager(e),this._controls.setBackgroundColor(`var(--ts-ui-body-bg, rgb(255, 255, 255))`),this._controls.addComponent(this._playBtn),this._controls.addComponent(this._scrubber,{weight:1}),this._controls.addComponent(this._timeText),this._controls.addComponent(this._muteBtn),this._controls.addComponent(this._volume),this._controls.addComponent(this._fullscreenBtn)}makeControlButton(e,t){let n=new g({glyph:e,text:t,showText:!1});return n.setPreferredSize(Z,Z),n}wireControlListeners(){this._playBtn.on(`action`,this._onPlayButton),this._muteBtn.on(`action`,this._onMuteButton),this._fullscreenBtn.on(`action`,this._onFullscreenButton),this._scrubber.on(`action`,this._onScrub),this._volume.on(`change`,this._onVolumeChange)}wireVideoListeners(){this._video.on(`play`,this._onVideoPlay),this._video.on(`pause`,this._onVideoPause),this._video.on(`ended`,this._onVideoEnded),this._video.on(`timeupdate`,this._onVideoTimeUpdate),this._video.on(`durationchange`,this._onVideoSync),this._video.on(`loadedmetadata`,this._onVideoSync),this._video.on(`volumechange`,this._onVideoSync),this._video.on(`ratechange`,this._onVideoSync)}beginScrub(){this._syncing||(this._scrubbing=!0,this._video.setCurrentTime(this._scrubber.getValue()))}onVolumeSlider(e){this._syncing||(this._video.setVolume(e),this.syncFromVideo())}onVideoPlay(){this._playing=!0,this.syncFromVideo(),this.emit(`play`)}onVideoPause(){this._playing=!1,this.syncFromVideo(),this.emit(`pause`)}onVideoEnded(){this._playing=!1,this.syncFromVideo(),this.emit(`ended`)}onVideoTimeUpdate(){this.syncFromVideo(),this._scrubbing=!1}syncFullscreen(){let e=n.source.getFullscreenElement(),t=this.getElement();this._fullscreen=t!=null&&e===t,this._fullscreenBtn.setGlyph(this._fullscreen?`compress`:`expand`),this.doLayout()}getInnerSize(){if(this._fullscreen&&this.getElement()){let e=n.source.getViewportSize(),t=this.getPerimeterSize();return{width:e.width-t.left-t.right,height:e.height-t.top-t.bottom}}return super.getInnerSize()}},ue=i(VideoPlayer);export{k as Canvas,l as Glyph,h as Header,K as IconLabel,x as IconText,F as Image,W as Markdown,J as PaginationBar,q as ProgressBar,p as ProgressSpinner,ProgressiveEngine,X as Video,ue as VideoPlayer,M as WebGLCanvas};
+//# sourceMappingURL=display.es.js.map