@miragon/modeler-shell 0.0.0-stage → 0.2.0

package/dist/core.d.ts

@@ -0,0 +1,246 @@
+import { e as Size, d as ShellHost, P as PaletteRow, I as Insets, a as Bounds, S as ScaledViewbox, c as Point } from './toasts-Bp0REqdq.js';
+export { B as BottomObstacle, C as CHROME_ISLANDS, b as ChromeIsland, M as MAX_TOASTS, T as TOAST_DURATION_MS, f as TOAST_MAX_WIDTH, g as ToastAction, h as ToastRequest, i as ToastSlot, j as ToastStackInput, k as ToastStatus, V as ViewportState, Z as ZoomTarget, t as toastLifetime, l as toastStackBottom, m as toastStackWidth, n as toastToEvict } from './toasts-Bp0REqdq.js';
+import { k as ShellMessages } from './appearance-BBaM_4bD.js';
+export { A as APPEARANCE_STORAGE_KEY, a as AppearanceChoice, C as ChromeKey, D as DocumentMode, b as DragContext, c as DragItemLike, d as DragVerdict, e as DropForbiddenReason, K as KeyAction, f as KeyContext, g as KeyDecision, h as KeyLike, N as NavigatorLike, P as Platform, i as ProblemItem, j as ProblemSeverity, S as ShellMessageOverrides, T as TEXT_FIELD_SELECTOR, l as ThemeColors, W as WebModeScriptOptions, m as acceptsFile, n as ariaKeyShortcuts, o as ariaKeyShortcutsFromLabel, p as commandKeyLabel, q as decideKey, r as defaultMessages, s as detectPlatform, t as documentMode, u as dragVerdict, v as isUndoRedoKey, w as matchChromeKey, x as parseAppearanceChoice, y as problemSummary, z as resolveMessages, B as shortcutLabel, E as webHeadMarkup, F as webModeScript } from './appearance-BBaM_4bD.js';
+export { A as Appearance, a as AppearanceAttributes, C as ColorThemeSetting, K as Kontrast, R as REDUCED_MOTION_CLASS, T as Theme, b as appearanceAttributes, c as appearanceFromBodyClasses, d as appearanceFromColorThemeKind, r as reducedMotionFromBodyClasses, e as requestedAppearance, f as resolveAppearance } from './appearance-D3FUcbu6.js';
+
+/**
+ * The shell dimensions of the design system (guide §5.1, `shell` group of
+ * `cd-tokens.generated.json`), keyed by a readable name. Scripts use `SHELL`; CSS uses the
+ * `var(--cd-shell-*)` variables the consumer vendors. A drift test pins `SHELL` to the token JSON.
+ */
+declare const SHELL_TOKENS: {
+    readonly edge: "--cd-shell-rand";
+    readonly gap: "--cd-shell-luecke";
+    readonly row: "--cd-shell-zeile";
+    readonly target: "--cd-shell-ziel";
+    readonly entry: "--cd-shell-eintrag";
+    readonly free: "--cd-shell-frei";
+    readonly menuMinWidth: "--cd-shell-menue-breite";
+    readonly inspectorWidth: "--cd-shell-inspector-breite";
+    readonly fitInsetTop: "--cd-shell-einpassen-oben";
+    readonly fitInsetTopSecondRow: "--cd-shell-einpassen-oben-schmal";
+    readonly fitInsetSide: "--cd-shell-einpassen-seite";
+    readonly fitInsetBottom: "--cd-shell-einpassen-unten";
+    readonly fitInsetBottomWeb: "--cd-shell-einpassen-unten-web";
+    readonly narrow: "--cd-shell-schmal";
+    readonly veryNarrow: "--cd-shell-sehr-schmal";
+    readonly low: "--cd-shell-niedrig";
+    readonly layerIslands: "--cd-shell-ebene-inseln";
+    readonly layerInspector: "--cd-shell-ebene-inspector";
+    readonly layerTopRow: "--cd-shell-ebene-reihe";
+    readonly layerPopups: "--cd-shell-ebene-aufklapper";
+    readonly layerDialog: "--cd-shell-ebene-dialog";
+    readonly layerToast: "--cd-shell-ebene-toast";
+};
+type ShellSizeName = keyof typeof SHELL_TOKENS;
+type ShellSizes = Readonly<Record<ShellSizeName, number>>;
+/** Pixels (layers: plain z-index numbers), equal to `parseFloat` of the token JSON values. */
+declare const SHELL: ShellSizes;
+/**
+ * Reads the `shell` group of `cd-tokens.generated.json` (`{ "--cd-shell-rand": "12px", … }`) into
+ * numbers. Throws when a size of `SHELL_TOKENS` is missing or not a number.
+ */
+declare function shellSizesFromTokens(shellGroup: Readonly<Record<string, string>>): ShellSizes;
+
+/** Fit never zooms above 100 % (guide §5.9). */
+declare const MAX_FIT_ZOOM = 1;
+/** Duration of the explicit, animated fit (`--cd-motion-base`). */
+declare const FIT_ANIMATION_MS = 250;
+/**
+ * The viewbox that shows `bounds` centred in the free rectangle (`container` minus `insets`) at the
+ * largest scale that fits, capped at `maxZoom`. The box has the container's aspect ratio, so
+ * diagram-js's `canvas.viewbox(box)` sets exactly this view. Returns `undefined` when the container
+ * is 0 × 0 or `bounds` has neither width nor height; a zero width or height scales by the other
+ * dimension. Where the insets leave no free room on an axis (a container lower or narrower than
+ * its chrome), that axis centres in the whole container instead.
+ */
+declare function fitViewbox(bounds: Bounds, container: Size, insets: Insets, maxZoom?: number): ScaledViewbox | undefined;
+/**
+ * The centre of the free rectangle (`container` minus `insets`) in pixels from the container's top
+ * left, where `fitViewbox` centres the content and keyboard creation places an element (guide
+ * §5.5). An axis the insets leave no room on centres in the whole container, as in `fitViewbox`.
+ * Returns `undefined` when the container is 0 × 0.
+ */
+declare function freeRectCenter(container: Size, insets: Insets): Point | undefined;
+/** What is open or shown when a fit runs (guide §5.9: every fit counts what is open right now). */
+interface FitLayout {
+    container: Size;
+    host: ShellHost;
+    paletteRow: PaletteRow;
+    /** The problems pill is shown (only the web app reserves room for it). */
+    problemsVisible: boolean;
+    /**
+     * Web app: the zoom panel stands above the legal line (`bottom: 40px`) because the two would
+     * meet in the bottom row of a narrow container (`zoomRowRaised`); the bottom then keeps 92px as
+     * with the pill.
+     */
+    zoomRaised?: boolean | undefined;
+    /**
+     * Web app: the measured height of the legal line (`LEGAL_LINE_HEIGHT`, more where a narrow
+     * container wraps it); the raised bottom row stands on it. Default one line.
+     */
+    legalHeight?: number | undefined;
+    /** Rendered width of the open legend; `undefined` when it is closed or the modeler has none. */
+    legendWidth?: number | undefined;
+    /**
+     * The open inspector; `undefined` when closed. Above `SHELL.narrow` it is the side panel; up to it
+     * a bottom sheet whose top edge (`sheetTop`, px from the container top) must be measured.
+     */
+    inspector?: {
+        sheetTop?: number | undefined;
+    } | undefined;
+}
+/**
+ * The fit insets of guide §5.9: top 88 (second row 140), sides 24, bottom 64 (web app with pill or
+ * with the zoom panel raised above the legal line 92, plus 20 per extra line of a wrapped legal line),
+ * right 324 with an open side inspector, left 12 + legend width + 24 with an open legend above
+ * `SHELL.veryNarrow`, bottom = distance to the sheet's top edge + 12 with an open bottom sheet.
+ */
+declare function fitInsets(layout: FitLayout): Insets;
+/** Relative tolerance of `sameView` (diagram-js rounds the transform to three decimals). */
+declare const VIEW_TOLERANCE = 0.001;
+/**
+ * True when two views are the same within `tolerance`: the scale and the translation in screen
+ * pixels (`x · scale`, `y · scale`) agree relative to `max(1, |value|)`. Width and height are
+ * ignored, so a container resize is never a difference.
+ */
+declare function sameView(a: Pick<ScaledViewbox, "x" | "y" | "scale">, b: Pick<ScaledViewbox, "x" | "y" | "scale">, tolerance?: number): boolean;
+/**
+ * The view at `progress` (0…1) between two viewboxes of the same container: the scale is
+ * interpolated in log space, the centre linearly. Used per animation frame by the animated fit.
+ */
+declare function interpolateViewbox(from: ScaledViewbox, to: ScaledViewbox, progress: number): ScaledViewbox;
+/** `--cd-ease`, `cubic-bezier(0.4, 0, 0.2, 1)`, as a function of time 0…1. */
+declare function easeStandard(progress: number): number;
+
+/** diagram-js `ZoomScroll` RANGE (not configurable): 20 % … 400 %. */
+declare const ZOOM_MIN = 0.2;
+declare const ZOOM_MAX = 4;
+/** Zoom out is disabled at 20 % and below (`zoom <= 0.2 · 1.001`), so it never zooms in. */
+declare function canZoomOut(zoom: number): boolean;
+/** Zoom in is disabled at 400 % (`zoom >= 4 · 0.999`). */
+declare function canZoomIn(zoom: number): boolean;
+/**
+ * A zoom as a whole percentage in the UI language: `Intl.NumberFormat(lang, { style: "percent",
+ * maximumFractionDigits: 0 })`, so English "86%", German "86 %" (with U+00A0).
+ */
+declare function formatPercent(zoom: number, lang: string): string;
+/** Any other number in the chrome ("2 problems"), via `Intl.NumberFormat(lang)`. */
+declare function formatNumber(value: number, lang: string): string;
+interface ZoomReadout {
+    /** "86%" */
+    text: string;
+    /** "Zoom to 100% (now 86%)" */
+    ariaLabel: string;
+    canZoomOut: boolean;
+    canZoomIn: boolean;
+}
+/** Everything the zoom panel shows for a zoom: readout text, its accessible name and the limits. */
+declare function zoomReadout(zoom: number, lang: string, messages: Pick<ShellMessages, "zoomToActualNow">): ZoomReadout;
+
+/** Free space the top row needs between the palette and a neighbouring island (guide §5.15). */
+declare const PALETTE_CLEARANCE = 16;
+/** Hover delay of the chrome tooltip, equal to diagram-js `HoverTooltip` `SHOW_DELAY`. */
+declare const TOOLTIP_DELAY_MS = 300;
+/** The status box for an invalid file shows after this long without a valid import (guide §5.12). */
+declare const INVALID_STATUS_DELAY_MS = 800;
+interface PaletteRowInput {
+    containerWidth: number;
+    /**
+     * The palette's intrinsic border-box width (`scrollWidth` plus its borders), so the decision does
+     * not flip once the second row clips it.
+     */
+    paletteWidth: number;
+    /** Right edge of the menu trigger, relative to the shell root. */
+    menuRight: number;
+    /** Left edge of the primary action (web app), relative to the shell root; absent in IDE hosts. */
+    primaryLeft?: number | undefined;
+}
+/**
+ * `second-row` when the container is at most `SHELL.narrow` wide or a centred palette would keep
+ * less than `PALETTE_CLEARANCE` to the menu trigger (or the primary action); `top` otherwise.
+ */
+declare function decidePaletteRow(input: PaletteRowInput): PaletteRow;
+/** The legend starts open unless the container is at most `SHELL.low` high (guide §5.10). */
+declare function legendStartsOpen(containerHeight: number): boolean;
+interface TooltipPlacementInput {
+    /** The hovered or focused control, relative to the shell root (horizontal centre). */
+    anchor: Bounds;
+    /** The island the control sits in, relative to the shell root (vertical placement). */
+    island: Bounds;
+    tooltip: Size;
+    container: Size;
+}
+/**
+ * The tooltip's top-left corner relative to the shell root (guide §5.6): below an island in the
+ * upper half (`island.bottom + 8`: top row 60, second row 112), above one in the lower half
+ * (`island.top − 8 − height`: bottom row ends at `bottom: 60px`); centred on the anchor, shifted to
+ * keep `SHELL.edge` to the container's sides.
+ */
+declare function placeTooltip(input: TooltipPlacementInput): Point;
+
+/** Border-box widths of the web app's primary action, measured with and without its label. */
+interface PrimaryWidths {
+    /** Icon and label: padding `0 16px`, icon 16px, gap 8px, label 13px/600 (guide §5.7). */
+    withLabel: number;
+    /** The icon alone: `SHELL.row` (40) square. */
+    iconOnly: number;
+}
+interface TopRowInput {
+    containerWidth: number;
+    /** The palette's intrinsic border-box width, as for `decidePaletteRow`. */
+    paletteWidth: number;
+    /** Right edge of the menu trigger, relative to the shell root. */
+    menuRight: number;
+    /** The primary action at `right: 12px`; absent in IDE and embedded hosts and without one. */
+    primary?: PrimaryWidths | undefined;
+}
+interface TopRow {
+    paletteRow: PaletteRow;
+    /** `collapsed`: the primary action shows its icon only; its `aria-label` keeps the name. */
+    primaryLabel: "shown" | "collapsed";
+}
+/**
+ * The top row of guide §5.15 with a primary action: when it gets tight, the primary action loses
+ * its label first, and only then the palette moves to the second row.
+ *
+ * 1. Without `primary`: `decidePaletteRow` alone, label `shown`.
+ * 2. With the label (`primaryLeft = containerWidth − SHELL.edge − withLabel`): palette `top` →
+ *    `{ top, shown }`.
+ * 3. Icon only (`primaryLeft = containerWidth − SHELL.edge − iconOnly`): palette `top` →
+ *    `{ top, collapsed }`.
+ * 4. Otherwise the palette is in the second row and the top row holds only menu trigger and
+ *    primary action: the label shows again when `menuRight + PALETTE_CLEARANCE` stays left of the
+ *    labelled button, else it stays collapsed.
+ *
+ * Up to `SHELL.narrow` the palette is always in the second row (step 4).
+ */
+declare function decideTopRow(input: TopRowInput): TopRow;
+
+/**
+ * Height of one line of the web app's legal line: 13px text on a 20px line (guide §5.10). Where a
+ * narrow container cannot hold it in one line, it wraps (40 for two lines) and everything stacked
+ * above it rises by as much: the pill, the legend, the raised zoom panel and the fit's bottom.
+ */
+declare const LEGAL_LINE_HEIGHT = 20;
+/** A measured legal line's height in whole lines, at least one: what the stack above it stands on. */
+declare function legalLineHeight(measured: number | undefined): number;
+interface BottomRowInput {
+    containerWidth: number;
+    /** Measured right edge of the legal line relative to the shell root; absent while it is not shown. */
+    legalRight?: number | undefined;
+    /** Measured width of the zoom panel (173 with a 56px readout); absent while it is not shown. */
+    zoomWidth?: number | undefined;
+}
+/**
+ * Web app, bottom row: true when the zoom panel at `right: 12px` would keep less than
+ * `SHELL.gap` (8px) to the legal line at `left: 12px`. The zoom panel then stands above the legal
+ * line at `bottom: 40px` (12 + 20 + 8; a wrapped line lifts it further), like the pill
+ * (`data-zoom-row="raised"` on the root), and the fit keeps 92px at the bottom (`FitLayout.zoomRaised`). Guide §5.10 and §5.15 do not settle
+ * this collision of a narrow container; it is the shell's rule until they do.
+ * False when either of the two is not shown.
+ */
+declare function zoomRowRaised(input: BottomRowInput): boolean;
+
+export { type BottomRowInput, Bounds, FIT_ANIMATION_MS, type FitLayout, INVALID_STATUS_DELAY_MS, Insets, LEGAL_LINE_HEIGHT, MAX_FIT_ZOOM, PALETTE_CLEARANCE, PaletteRow, type PaletteRowInput, Point, type PrimaryWidths, SHELL, SHELL_TOKENS, ScaledViewbox, ShellHost, ShellMessages, type ShellSizeName, type ShellSizes, Size, TOOLTIP_DELAY_MS, type TooltipPlacementInput, type TopRow, type TopRowInput, VIEW_TOLERANCE, ZOOM_MAX, ZOOM_MIN, type ZoomReadout, canZoomIn, canZoomOut, decidePaletteRow, decideTopRow, easeStandard, fitInsets, fitViewbox, formatNumber, formatPercent, freeRectCenter, interpolateViewbox, legalLineHeight, legendStartsOpen, placeTooltip, sameView, shellSizesFromTokens, zoomReadout, zoomRowRaised };

package/dist/core.js

@@ -0,0 +1,131 @@
+import {
+  APPEARANCE_STORAGE_KEY,
+  CHROME_ISLANDS,
+  FIT_ANIMATION_MS,
+  INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT,
+  MAX_FIT_ZOOM,
+  MAX_TOASTS,
+  PALETTE_CLEARANCE,
+  REDUCED_MOTION_CLASS,
+  SHELL,
+  SHELL_TOKENS,
+  TEXT_FIELD_SELECTOR,
+  TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH,
+  TOOLTIP_DELAY_MS,
+  VIEW_TOLERANCE,
+  ZOOM_MAX,
+  ZOOM_MIN,
+  acceptsFile,
+  appearanceAttributes,
+  appearanceFromBodyClasses,
+  appearanceFromColorThemeKind,
+  ariaKeyShortcuts,
+  ariaKeyShortcutsFromLabel,
+  canZoomIn,
+  canZoomOut,
+  commandKeyLabel,
+  decideKey,
+  decidePaletteRow,
+  decideTopRow,
+  defaultMessages,
+  detectPlatform,
+  documentMode,
+  dragVerdict,
+  easeStandard,
+  fitInsets,
+  fitViewbox,
+  formatNumber,
+  formatPercent,
+  freeRectCenter,
+  interpolateViewbox,
+  isUndoRedoKey,
+  legalLineHeight,
+  legendStartsOpen,
+  matchChromeKey,
+  parseAppearanceChoice,
+  placeTooltip,
+  problemSummary,
+  reducedMotionFromBodyClasses,
+  requestedAppearance,
+  resolveAppearance,
+  resolveMessages,
+  sameView,
+  shellSizesFromTokens,
+  shortcutLabel,
+  toastLifetime,
+  toastStackBottom,
+  toastStackWidth,
+  toastToEvict,
+  webHeadMarkup,
+  webModeScript,
+  zoomReadout,
+  zoomRowRaised
+} from "./chunk-OADW3GPA.js";
+export {
+  APPEARANCE_STORAGE_KEY,
+  CHROME_ISLANDS,
+  FIT_ANIMATION_MS,
+  INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT,
+  MAX_FIT_ZOOM,
+  MAX_TOASTS,
+  PALETTE_CLEARANCE,
+  REDUCED_MOTION_CLASS,
+  SHELL,
+  SHELL_TOKENS,
+  TEXT_FIELD_SELECTOR,
+  TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH,
+  TOOLTIP_DELAY_MS,
+  VIEW_TOLERANCE,
+  ZOOM_MAX,
+  ZOOM_MIN,
+  acceptsFile,
+  appearanceAttributes,
+  appearanceFromBodyClasses,
+  appearanceFromColorThemeKind,
+  ariaKeyShortcuts,
+  ariaKeyShortcutsFromLabel,
+  canZoomIn,
+  canZoomOut,
+  commandKeyLabel,
+  decideKey,
+  decidePaletteRow,
+  decideTopRow,
+  defaultMessages,
+  detectPlatform,
+  documentMode,
+  dragVerdict,
+  easeStandard,
+  fitInsets,
+  fitViewbox,
+  formatNumber,
+  formatPercent,
+  freeRectCenter,
+  interpolateViewbox,
+  isUndoRedoKey,
+  legalLineHeight,
+  legendStartsOpen,
+  matchChromeKey,
+  parseAppearanceChoice,
+  placeTooltip,
+  problemSummary,
+  reducedMotionFromBodyClasses,
+  requestedAppearance,
+  resolveAppearance,
+  resolveMessages,
+  sameView,
+  shellSizesFromTokens,
+  shortcutLabel,
+  toastLifetime,
+  toastStackBottom,
+  toastStackWidth,
+  toastToEvict,
+  webHeadMarkup,
+  webModeScript,
+  zoomReadout,
+  zoomRowRaised
+};
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}