@miragon/modeler-shell 0.1.0 → 0.2.0

package/src/dom/web/menu-groups.ts

@@ -0,0 +1,69 @@
+import { parseAppearanceChoice, type ShellMessages } from "../../core/index.js";
+import type { ShellIconName } from "../icons.js";
+import type { AppearanceHandle, FileMenuAction, FileMenuOptions, MenuEntry } from "../types.js";
+
+interface FileEntrySpec {
+  option: keyof FileMenuOptions;
+  id: string;
+  label: string;
+  icon: ShellIconName | undefined;
+}
+
+function fileEntry(spec: FileEntrySpec, action: FileMenuAction): MenuEntry {
+  const common = {
+    id: spec.id,
+    label: spec.label,
+    ...(spec.icon ? { icon: spec.icon } : {}),
+    ...(action.disabled ? { disabled: action.disabled } : {}),
+    ...(action.shortcut ? { shortcut: action.shortcut } : {}),
+    onSelect: () => action.onSelect(),
+  };
+  return action.dialog ? { kind: "dialog", ...common } : { kind: "action", ...common };
+}
+
+/**
+ * The File group (guide §5.4, §2), first in the menu: "New diagram" (`file-plus`, id
+ * `new-diagram`), "Open…" (`folder-open`, `open`), "Show example" (no icon, `show-example`),
+ * "Import…" (`import`, `import`), in this order and only those `options` gives. `action` entries
+ * (`dialog` with `FileMenuAction.dialog`) with the action's `shortcut` and `disabled`. Never
+ * locked on a read-only canvas.
+ */
+export function fileMenuEntries(options: FileMenuOptions, messages: ShellMessages): readonly MenuEntry[] {
+  const specs: readonly FileEntrySpec[] = [
+    { option: "newDiagram", id: "new-diagram", label: messages.newDiagram, icon: "file-plus" },
+    { option: "open", id: "open", label: messages.openFile, icon: "folder-open" },
+    // §5.14 gives "Show example" no icon.
+    { option: "showExample", id: "show-example", label: messages.showExample, icon: undefined },
+    { option: "import", id: "import", label: messages.importFile, icon: "import" },
+  ];
+  return specs.flatMap((spec) => {
+    const action = options[spec.option];
+    return action ? [fileEntry(spec, action)] : [];
+  });
+}
+
+/**
+ * The Appearance group (guide §5.4, §13.3) between Export and Help: one radio group, id
+ * `appearance`, label `messages.appearance`, options `system`, `light`, `dark` labelled
+ * `messages.appearanceSystem` / `Light` / `Dark`, value `appearance.choice()`, selecting calls
+ * `appearance.setChoice`. Never locked. The shell asks for it only when `themes` includes `"dark"`.
+ */
+export function appearanceMenuEntries(
+  appearance: AppearanceHandle,
+  messages: ShellMessages,
+): readonly MenuEntry[] {
+  return [
+    {
+      kind: "radio",
+      id: "appearance",
+      label: messages.appearance,
+      options: [
+        { value: "system", label: messages.appearanceSystem },
+        { value: "light", label: messages.appearanceLight },
+        { value: "dark", label: messages.appearanceDark },
+      ],
+      value: () => appearance.choice(),
+      onSelect: (value) => appearance.setChoice(parseAppearanceChoice(value)),
+    },
+  ];
+}

package/src/dom/web/primary.ts

@@ -0,0 +1,124 @@
+import { SHELL, type PrimaryWidths, type ShellMessages } from "../../core/index.js";
+import { createElement, toggleAttribute } from "../element.js";
+import { iconElement } from "../icons.js";
+import type { TooltipController } from "../tooltip.js";
+import type { PrimaryActionHandle, PrimaryActionOptions } from "../types.js";
+
+export interface PrimaryActionContext {
+  ownerDocument: Document;
+  messages: ShellMessages;
+  tooltip: TooltipController;
+  options: PrimaryActionOptions;
+}
+
+export interface PrimaryActionController extends PrimaryActionHandle {
+  /**
+   * Border-box widths with and without the label for `decideTopRow`, measured also while the label
+   * is collapsed (the label's width does not change with the state), cached until `refresh()`.
+   */
+  widths(): PrimaryWidths;
+  /** Icon only (`true`) or icon and label; the `aria-label` stays, the tooltip shows only while collapsed. */
+  setCollapsed(collapsed: boolean): void;
+  destroy(): void;
+}
+
+/** On the button while it shows its icon only: the stylesheet's 40 × 40 (the root mirrors it as `data-primary`). */
+const COLLAPSED_ATTRIBUTE = "data-collapsed";
+
+/**
+ * `<button type="button" class="cd-shell-primary cd-shell-button" data-variant="primary"
+ * data-chrome="primary" aria-label="Share">` with the 16px icon and `<span
+ * class="cd-shell-primary-label">` (guide §5.7): 40px high at `top: 12px; right: 12px`, layer 30,
+ * blue (`dom/buttons.css`), hover lift. Collapsed: 40 × 40, label hidden, chrome tooltip with the
+ * label (no `aria-describedby`, it repeats the name). `disabled()` → `aria-disabled`, no action.
+ */
+export function createPrimaryAction(context: PrimaryActionContext): PrimaryActionController {
+  const { ownerDocument, messages, tooltip, options } = context;
+  const label = options.label ?? messages.share;
+  const labelElement = createElement(ownerDocument, "span", { class: "cd-shell-primary-label" }, label);
+  const element = createElement(
+    ownerDocument,
+    "button",
+    {
+      type: "button",
+      class: "cd-shell-primary cd-shell-button",
+      "data-variant": "primary",
+      "data-chrome": "primary",
+      "aria-label": label,
+    },
+    iconElement(options.icon ?? "share-2"),
+    labelElement,
+  );
+
+  let collapsed = false;
+  let disabled = false;
+  let labelledWidth: number | undefined;
+
+  function readDisabled(): void {
+    disabled = options.disabled?.() ?? false;
+    toggleAttribute(element, "aria-disabled", disabled ? "true" : null);
+  }
+
+  function showCollapsed(state: boolean): void {
+    labelElement.hidden = state;
+    toggleAttribute(element, COLLAPSED_ATTRIBUTE, state ? "" : null);
+  }
+
+  /** The labelled width; while collapsed the label shows for one synchronous layout, never painted. */
+  function measureLabelledWidth(): number {
+    if (!collapsed) return element.offsetWidth;
+    showCollapsed(false);
+    const width = element.offsetWidth;
+    showCollapsed(true);
+    return width;
+  }
+
+  function isEngaged(): boolean {
+    if (ownerDocument.activeElement === element) return true;
+    try {
+      return element.matches(":hover");
+    } catch {
+      return false;
+    }
+  }
+
+  const onClick = (event: MouseEvent): void => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
+    options.onSelect();
+  };
+  element.addEventListener("click", onClick);
+  const detachTooltip = tooltip.attach(element, () => (collapsed ? { label } : null));
+  readDisabled();
+
+  return {
+    element,
+    isCollapsed: () => collapsed,
+    refresh() {
+      readDisabled();
+      labelledWidth = undefined;
+    },
+    widths() {
+      // Measured fresh while the label shows (a late web font widens it), from the cache while collapsed.
+      if (!collapsed || labelledWidth === undefined) {
+        const measured = measureLabelledWidth();
+        if (measured > 0) labelledWidth = measured;
+      }
+      return { withLabel: labelledWidth ?? 0, iconOnly: SHELL.row };
+    },
+    setCollapsed(next) {
+      if (next === collapsed) return;
+      collapsed = next;
+      showCollapsed(next);
+      // An expanded button names itself; a tooltip still showing for it would only repeat the label.
+      if (!next && isEngaged()) tooltip.hide();
+    },
+    destroy() {
+      detachTooltip();
+      element.removeEventListener("click", onClick);
+      element.remove();
+    },
+  };
+}

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/shell.css

@@ -3,4 +3,7 @@
  * 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";