@miragon/modeler-shell 0.0.0-stage → 0.2.0

package/src/dom/web/web.css

@@ -0,0 +1,386 @@
+/*
+ * Web-app chrome of @miragon/modeler-shell (owned by src/dom/web): primary action, legal line,
+ * empty-state card, drop zone, the start screen hiding the work chrome and the raised zoom row
+ * (guide §5.7, §5.10, §5.15, §8, §9). Colours only from var(--cd-ui-*), sizes from
+ * var(--cd-shell-*); the primary fill comes from ../buttons.css. Every rule is scoped to
+ * .cd-shell[data-cd-shell-host="web"] or to classes only the web host renders.
+ *
+ * 20px is the legal line's height (13px text on a 20px line, guide §5.10); it has no token. Where a
+ * narrow container wraps the line, the shell measures it into --modeler-shell-legal-height on the
+ * root, and everything stacked above the line stands on that height.
+ */
+
+/* The app's own element rules (h1 { font-size: 2em }, a { text-transform … }) stay out. */
+:where(.cd-shell)
+  :is(
+    .cd-shell-primary,
+    .cd-shell-primary-label,
+    .cd-shell-legal,
+    .cd-shell-legal a,
+    .cd-shell-empty-state,
+    .cd-shell-empty-state-title,
+    .cd-shell-empty-state-text,
+    .cd-shell-empty-state-hint,
+    .cd-shell-empty-state-open,
+    .cd-shell-empty-state-key,
+    .cd-shell-empty-state .cd-shell-button,
+    .cd-shell-drop-zone-chip
+  ) {
+  letter-spacing: normal;
+  word-spacing: normal;
+  text-transform: none;
+  text-indent: 0;
+  text-shadow: none;
+}
+
+/* ---- Primary action, top right (guide §5.7, §5.15) ------------------------------------------ */
+
+.cd-shell .cd-shell-primary {
+  position: absolute;
+  top: var(--cd-shell-rand);
+  right: var(--cd-shell-rand);
+  z-index: var(--cd-shell-ebene-reihe);
+  height: var(--cd-shell-zeile);
+  padding: 0 16px;
+}
+
+/* Icon only: 40 × 40, the label gone, the aria-label unchanged. */
+.cd-shell .cd-shell-primary[data-collapsed] {
+  width: var(--cd-shell-zeile);
+  padding: 0;
+}
+
+.cd-shell-primary-label[hidden] {
+  display: none;
+}
+
+/* ---- Legal line, bottom left (guide §5.10, §2) ---------------------------------------------- */
+
+/*
+ * One line where it fits; in a narrower container it wraps between its entries instead of being
+ * cut off (Datenschutz must stay reachable, WCAG 1.4.10), and grows upwards from bottom 12.
+ */
+.cd-shell-legal {
+  position: absolute;
+  left: var(--cd-shell-rand);
+  bottom: var(--cd-shell-rand);
+  z-index: var(--cd-shell-ebene-inseln);
+  box-sizing: border-box;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 6px;
+  row-gap: 0;
+  min-height: 20px;
+  max-width: calc(100cqw - 2 * var(--cd-shell-rand));
+  margin: 0;
+  padding: 0 8px;
+  color: var(--cd-ui-text-leise);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  white-space: nowrap;
+  background: color-mix(in srgb, var(--cd-ui-flaeche-hoch) var(--cd-ui-chrome-deckkraft), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border: 0;
+  border-radius: var(--cd-radius-sm);
+  box-shadow: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.cd-shell-legal[hidden] {
+  display: none;
+}
+
+.cd-shell-legal > * {
+  flex: none;
+}
+
+/* A separator and the link after it: a wrap never leaves a separator alone at a line's end. */
+.cd-shell-legal-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cd-shell .cd-shell-legal a,
+.cd-shell .cd-shell-legal a:visited {
+  color: var(--cd-ui-link);
+  font: inherit;
+  text-decoration: none;
+  border-radius: 2px;
+}
+
+.cd-shell .cd-shell-legal a:hover {
+  color: var(--cd-ui-link);
+  text-decoration: underline;
+}
+
+.cd-shell .cd-shell-legal a:focus {
+  outline: none;
+}
+
+.cd-shell .cd-shell-legal a:focus-visible {
+  text-decoration: underline;
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: 2px;
+}
+
+/* ---- Empty state, centre (guide §8) --------------------------------------------------------- */
+
+.cd-shell-empty-state {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  z-index: var(--cd-shell-ebene-inseln);
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  width: min(400px, 100cqw - 2 * var(--cd-shell-rand));
+  max-height: calc(100cqh - 2 * var(--cd-shell-rand));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  margin: 0;
+  padding: 32px 40px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  line-height: 1.5;
+  text-align: center;
+  background: color-mix(in srgb, var(--cd-ui-flaeche-hoch) var(--cd-ui-chrome-deckkraft), transparent);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-lg);
+  box-shadow: var(--cd-shadow-2);
+  user-select: none;
+  -webkit-user-select: none;
+  animation: cd-shell-rise-in var(--cd-motion-base) var(--cd-ease-out);
+}
+
+.cd-shell-empty-state[hidden] {
+  display: none;
+}
+
+.cd-shell-empty-state-mark {
+  display: block;
+  flex: none;
+  width: 64px;
+  height: 64px;
+  margin: 0;
+}
+
+.cd-shell .cd-shell-empty-state-title {
+  margin: 0;
+  color: var(--cd-ui-text);
+  font-size: 21px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.cd-shell .cd-shell-empty-state-text {
+  margin: 0;
+  color: var(--cd-ui-text-leise);
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.6;
+}
+
+.cd-shell-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--cd-shell-luecke);
+}
+
+.cd-shell .cd-shell-empty-state-hint {
+  margin: 0;
+  color: var(--cd-ui-text-leise);
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+
+/* The File group's "Open…" as a text link in the hint: the keyboard's way to a file (guide §8). */
+.cd-shell .cd-shell-empty-state-open {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  color: var(--cd-ui-link);
+  font: inherit;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  border-radius: 2px;
+  cursor: pointer;
+}
+
+.cd-shell .cd-shell-empty-state-open:hover {
+  text-decoration: underline;
+}
+
+.cd-shell .cd-shell-empty-state-open:focus {
+  outline: none;
+}
+
+.cd-shell .cd-shell-empty-state-open:focus-visible {
+  text-decoration: underline;
+  outline: 2px solid var(--cd-ui-fokus);
+  outline-offset: 2px;
+}
+
+.cd-shell-empty-state-open-item {
+  white-space: nowrap;
+}
+
+.cd-shell .cd-shell-empty-state-key {
+  color: var(--cd-ui-text-leise);
+  font-family: var(--modeler-shell-font-mono);
+  font-size: 13px;
+}
+
+/* ---- Start screen: only the card and the legal line compete (guide §8) ---------------------- */
+
+.cd-shell[data-cd-shell-host="web"][data-empty-state="shown"]
+  :is(
+    .cd-shell-menu-trigger,
+    .cd-shell-primary,
+    .djs-palette,
+    .cd-shell-zoom,
+    .cd-shell-problems,
+    .cd-shell-legend,
+    .cd-shell-status,
+    .cd-shell-hint,
+    .cd-shell-inspector
+  ) {
+  visibility: hidden;
+}
+
+/* ---- Bottom row: the zoom panel above the legal line where they meet (shell rule) ----------- */
+
+.cd-shell[data-cd-shell-host="web"][data-zoom-row="raised"] .cd-shell-zoom {
+  bottom: calc(var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke));
+}
+
+/* Up to 440px the legend stands above the raised zoom panel too: 40 + 40 + 8 = 88. */
+@container cd-shell (max-width: 440px) {
+  .cd-shell[data-cd-shell-host="web"][data-zoom-row="raised"] .cd-shell-legend {
+    --modeler-shell-legend-min-bottom: calc(
+      var(--cd-shell-rand) + var(--modeler-shell-legal-height, 20px) + var(--cd-shell-luecke) +
+        var(--cd-shell-zeile) + var(--cd-shell-luecke)
+    );
+  }
+}
+
+/* ---- Drop zone, whole page (guide §9 Drag-over, Drop forbidden) ----------------------------- */
+
+.cd-shell-drop-zone {
+  position: absolute;
+  inset: var(--cd-shell-rand);
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  margin: 0;
+  padding: var(--cd-shell-rand);
+  background: var(--cd-ui-hover);
+  border: 2px dashed var(--cd-ui-interaktion);
+  border-radius: var(--cd-radius-lg);
+  /* Fills the 12px around it, so no island corner shows beside the rounded frame. */
+  box-shadow: 0 0 0 var(--cd-shell-rand) var(--cd-ui-grund);
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.cd-shell-drop-zone[hidden] {
+  display: none;
+}
+
+.cd-shell-drop-zone[data-state="forbidden"] {
+  background: var(--cd-ui-danger-flaeche);
+  border-color: var(--cd-ui-danger);
+}
+
+.cd-shell-drop-zone-chip {
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 7px 16px;
+  color: var(--cd-ui-text);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  background: var(--cd-ui-flaeche-hoch);
+  border: 1px solid var(--cd-ui-linie);
+  border-radius: var(--cd-radius-md);
+  box-shadow: var(--cd-shadow-2);
+}
+
+/* ---- Motion (guide §5.14, §7): no rise under reduced motion (the buttons' lift: ../buttons.css) */
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-shell .cd-shell-empty-state {
+    animation: none;
+  }
+}
+
+html.cd-shell-reduce-motion .cd-shell .cd-shell-empty-state {
+  animation: none;
+}
+
+/* ---- High contrast (guide §5.3): opaque glass through the role, no shadows, 3px focus -------- */
+
+.cd-shell:is([data-cd-kontrast="hoch"], [data-cd-kontrast="hoch"] *)
+  :is(.cd-shell-empty-state, .cd-shell-drop-zone-chip) {
+  box-shadow: none;
+}
+
+.cd-shell:is([data-cd-kontrast="hoch"], [data-cd-kontrast="hoch"] *)
+  :is(.cd-shell-legal a, .cd-shell-empty-state-open) {
+  text-decoration: underline;
+}
+
+.cd-shell:is([data-cd-kontrast="hoch"], [data-cd-kontrast="hoch"] *)
+  :is(.cd-shell-legal a, .cd-shell-empty-state-open):focus-visible {
+  outline-width: 3px;
+}
+
+/* ---- Forced colours (guide §5.14, §12): nothing disappears ---------------------------------- */
+
+@media (forced-colors: active) {
+  .cd-shell .cd-shell-empty-state,
+  .cd-shell .cd-shell-drop-zone-chip {
+    border-color: CanvasText;
+  }
+
+  .cd-shell :is(.cd-shell-legal a, .cd-shell-empty-state-open) {
+    text-decoration: underline;
+  }
+
+  .cd-shell :is(.cd-shell-legal a, .cd-shell-empty-state-open):focus-visible {
+    outline-color: Highlight;
+  }
+
+  /* Over and forbidden keep their own dashed frame; the chip's words name the state as well. */
+  .cd-shell .cd-shell-drop-zone {
+    forced-color-adjust: none;
+    background: Canvas;
+    border-color: Highlight;
+    box-shadow: 0 0 0 var(--cd-shell-rand) Canvas;
+  }
+
+  .cd-shell .cd-shell-drop-zone[data-state="forbidden"] {
+    border-color: CanvasText;
+    border-style: dotted;
+  }
+
+  .cd-shell .cd-shell-drop-zone-chip {
+    color: CanvasText;
+    background: Canvas;
+    box-shadow: none;
+  }
+}

package/src/dom/zoom-panel.ts

@@ -0,0 +1,154 @@
+import {
+  ariaKeyShortcuts,
+  canZoomIn,
+  canZoomOut,
+  formatPercent,
+  shortcutLabel,
+  zoomReadout,
+  type ChromeKey,
+  type Platform,
+  type ShellMessages,
+  type ZoomTarget,
+} from "../core/index.js";
+import { createElement, toggleAttribute } from "./element.js";
+import { iconElement, type ShellIconName } from "./icons.js";
+import type { TooltipController } from "./tooltip.js";
+
+export interface ZoomPanelContext {
+  ownerDocument: Document;
+  messages: ShellMessages;
+  lang: string;
+  platform: Platform;
+  tooltip: TooltipController;
+}
+
+export interface ZoomPanel {
+  readonly element: HTMLElement;
+  setTarget(target: ZoomTarget | null): void;
+  /** Runs a chrome key on the bound target; zoom out never zooms in (guide §5.8). */
+  run(key: ChromeKey): void;
+  destroy(): void;
+}
+
+export function createZoomPanel(context: ZoomPanelContext): ZoomPanel {
+  const { ownerDocument, messages, lang, platform, tooltip } = context;
+  let target: ZoomTarget | null = null;
+  let unsubscribe: (() => void) | undefined;
+  let frame: number | undefined;
+  const detachers: (() => void)[] = [];
+
+  function button(
+    zoom: "out" | "actual" | "in" | "fit",
+    key: ChromeKey,
+    tooltipLabel: string,
+    options: { label?: string; icon?: ShellIconName; className?: string },
+  ): HTMLButtonElement {
+    const element = createElement(ownerDocument, "button", {
+      type: "button",
+      class: options.className ?? "cd-shell-target",
+      "data-zoom": zoom,
+      "aria-label": options.label,
+      "aria-keyshortcuts": ariaKeyShortcuts(key, platform),
+    });
+    if (options.icon) element.append(iconElement(options.icon));
+    element.addEventListener("click", () => run(key));
+    detachers.push(
+      tooltip.attach(element, {
+        label: tooltipLabel,
+        shortcut: shortcutLabel(key, platform, messages.keyNames),
+      }),
+    );
+    return element;
+  }
+
+  const zoomOut = button("out", "zoomOut", messages.zoomOut, { label: messages.zoomOut, icon: "minus" });
+  const readout = button("actual", "zoomToActual", messages.zoomToActual(formatPercent(1, lang)), {
+    className: "cd-shell-target cd-shell-zoom-readout",
+  });
+  const zoomIn = button("in", "zoomIn", messages.zoomIn, { label: messages.zoomIn, icon: "plus" });
+  const fit = button("fit", "fit", messages.fit, { label: messages.fit, icon: "maximize" });
+  const separator = createElement(ownerDocument, "span", {
+    class: "cd-shell-zoom-separator",
+    "aria-hidden": "true",
+  });
+
+  const element = createElement(
+    ownerDocument,
+    "div",
+    {
+      class: "cd-shell-zoom cd-shell-island",
+      "data-chrome": "zoom",
+      role: "group",
+      "aria-label": messages.zoom,
+    },
+    zoomOut,
+    readout,
+    zoomIn,
+    separator,
+    fit,
+  );
+
+  function render(): void {
+    frame = undefined;
+    const zoom = target?.zoom() ?? 1;
+    const state = zoomReadout(zoom, lang, messages);
+    if (readout.textContent !== state.text) readout.textContent = state.text;
+    readout.setAttribute("aria-label", state.ariaLabel);
+    // aria-disabled, not disabled: a button pressed up to the limit keeps the focus (guide §5.8).
+    toggleAttribute(zoomOut, "aria-disabled", (!target || !state.canZoomOut) && "true");
+    toggleAttribute(zoomIn, "aria-disabled", (!target || !state.canZoomIn) && "true");
+    toggleAttribute(fit, "aria-disabled", (!target || !target.canFit()) && "true");
+    // The readout is never disabled (guide §5.8); without a target its click does nothing.
+  }
+
+  function schedule(): void {
+    if (frame === undefined) frame = requestAnimationFrame(render);
+  }
+
+  function cancelFrame(): void {
+    if (frame !== undefined) cancelAnimationFrame(frame);
+    frame = undefined;
+  }
+
+  function run(key: ChromeKey): void {
+    if (!target) return;
+    const zoom = target.zoom();
+    switch (key) {
+      case "zoomIn":
+        if (canZoomIn(zoom)) target.stepZoom(1);
+        break;
+      case "zoomOut":
+        if (canZoomOut(zoom)) target.stepZoom(-1);
+        break;
+      case "zoomToActual":
+        if (zoom !== 1) target.zoomToActual();
+        break;
+      case "fit":
+        if (target.canFit()) target.fit();
+        break;
+    }
+  }
+
+  render();
+
+  return {
+    element,
+    run,
+    setTarget(next) {
+      unsubscribe?.();
+      unsubscribe = undefined;
+      cancelFrame();
+      target = next;
+      if (next) unsubscribe = next.onChange(schedule);
+      render();
+    },
+    destroy() {
+      unsubscribe?.();
+      unsubscribe = undefined;
+      cancelFrame();
+      target = null;
+      for (const detach of detachers) detach();
+      element.remove();
+    },
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+// "@miragon/modeler-shell": the DOM chrome plus everything DOM-free from "./core".
+export * from "./core/index.js";
+export * from "./dom/index.js";

package/src/shell.css

@@ -0,0 +1,9 @@
+/*
+ * @miragon/modeler-shell/shell.css. Load after the vendored cd-tokens.generated.css and after
+ * diagram-js.css (and the renderer's CSS), so the palette skin wins regardless of its specificity.
+ */
+@import "./dom/shell-dom.css";
+@import "./dom/buttons.css";
+@import "./dom/web/web.css";
+@import "./dom/feedback/feedback.css";
+@import "./diagram-js/palette.css";