@miragon/modeler-shell 0.1.0 → 0.2.1

package/dist/core.cjs

@@ -20,19 +20,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/core.ts
 var core_exports = {};
 __export(core_exports, {
+  APPEARANCE_STORAGE_KEY: () => APPEARANCE_STORAGE_KEY,
   CHROME_ISLANDS: () => CHROME_ISLANDS,
   FIT_ANIMATION_MS: () => FIT_ANIMATION_MS,
   INVALID_STATUS_DELAY_MS: () => INVALID_STATUS_DELAY_MS,
+  LEGAL_LINE_HEIGHT: () => LEGAL_LINE_HEIGHT,
   MAX_FIT_ZOOM: () => MAX_FIT_ZOOM,
+  MAX_TOASTS: () => MAX_TOASTS,
   PALETTE_CLEARANCE: () => PALETTE_CLEARANCE,
   REDUCED_MOTION_CLASS: () => REDUCED_MOTION_CLASS,
   SHELL: () => SHELL,
   SHELL_TOKENS: () => SHELL_TOKENS,
   TEXT_FIELD_SELECTOR: () => TEXT_FIELD_SELECTOR,
+  TOAST_DURATION_MS: () => TOAST_DURATION_MS,
+  TOAST_MAX_WIDTH: () => TOAST_MAX_WIDTH,
   TOOLTIP_DELAY_MS: () => TOOLTIP_DELAY_MS,
   VIEW_TOLERANCE: () => VIEW_TOLERANCE,
   ZOOM_MAX: () => ZOOM_MAX,
   ZOOM_MIN: () => ZOOM_MIN,
+  acceptsFile: () => acceptsFile,
   appearanceAttributes: () => appearanceAttributes,
   appearanceFromBodyClasses: () => appearanceFromBodyClasses,
   appearanceFromColorThemeKind: () => appearanceFromColorThemeKind,
@@ -40,10 +46,14 @@ __export(core_exports, {
   ariaKeyShortcutsFromLabel: () => ariaKeyShortcutsFromLabel,
   canZoomIn: () => canZoomIn,
   canZoomOut: () => canZoomOut,
+  commandKeyLabel: () => commandKeyLabel,
   decideKey: () => decideKey,
   decidePaletteRow: () => decidePaletteRow,
+  decideTopRow: () => decideTopRow,
   defaultMessages: () => defaultMessages,
   detectPlatform: () => detectPlatform,
+  documentMode: () => documentMode,
+  dragVerdict: () => dragVerdict,
   easeStandard: () => easeStandard,
   fitInsets: () => fitInsets,
   fitViewbox: () => fitViewbox,
@@ -52,9 +62,12 @@ __export(core_exports, {
   freeRectCenter: () => freeRectCenter,
   interpolateViewbox: () => interpolateViewbox,
   isUndoRedoKey: () => isUndoRedoKey,
+  legalLineHeight: () => legalLineHeight,
   legendStartsOpen: () => legendStartsOpen,
   matchChromeKey: () => matchChromeKey,
+  parseAppearanceChoice: () => parseAppearanceChoice,
   placeTooltip: () => placeTooltip,
+  problemSummary: () => problemSummary,
   reducedMotionFromBodyClasses: () => reducedMotionFromBodyClasses,
   requestedAppearance: () => requestedAppearance,
   resolveAppearance: () => resolveAppearance,
@@ -62,7 +75,14 @@ __export(core_exports, {
   sameView: () => sameView,
   shellSizesFromTokens: () => shellSizesFromTokens,
   shortcutLabel: () => shortcutLabel,
-  zoomReadout: () => zoomReadout
+  toastLifetime: () => toastLifetime,
+  toastStackBottom: () => toastStackBottom,
+  toastStackWidth: () => toastStackWidth,
+  toastToEvict: () => toastToEvict,
+  webHeadMarkup: () => webHeadMarkup,
+  webModeScript: () => webModeScript,
+  zoomReadout: () => zoomReadout,
+  zoomRowRaised: () => zoomRowRaised
 });
 module.exports = __toCommonJS(core_exports);
 
@@ -75,7 +95,12 @@ var CHROME_ISLANDS = [
   "problems",
   "legend",
   "inspector",
-  "status"
+  "status",
+  "legal",
+  "toasts",
+  "empty-state",
+  "drop-zone",
+  "problems-popover"
 ];
 
 // src/core/sizes.ts
@@ -146,6 +171,19 @@ function shellSizesFromTokens(shellGroup) {
   return sizes;
 }
 
+// src/core/web-chrome/bottom-row.ts
+var LEGAL_LINE_HEIGHT = 20;
+function legalLineHeight(measured) {
+  if (measured === void 0 || !Number.isFinite(measured) || measured <= 0) return LEGAL_LINE_HEIGHT;
+  return Math.max(1, Math.round(measured / LEGAL_LINE_HEIGHT)) * LEGAL_LINE_HEIGHT;
+}
+function zoomRowRaised(input) {
+  const { containerWidth, legalRight, zoomWidth } = input;
+  if (legalRight === void 0 || zoomWidth === void 0) return false;
+  const zoomLeft = containerWidth - SHELL.edge - zoomWidth;
+  return legalRight + SHELL.gap > zoomLeft;
+}
+
 // src/core/fit.ts
 var MAX_FIT_ZOOM = 1;
 var FIT_ANIMATION_MS = 250;
@@ -186,11 +224,13 @@ function freeRectCenter(container, insets) {
   };
 }
 function fitInsets(layout) {
-  const { container, host, paletteRow, problemsVisible, legendWidth, inspector } = layout;
+  const { container, host, paletteRow, problemsVisible, zoomRaised, legendWidth, inspector } = layout;
+  const raisedBottomRow = host === "web" && (problemsVisible || zoomRaised === true);
+  const wrappedLegalLines = legalLineHeight(layout.legalHeight) - LEGAL_LINE_HEIGHT;
   const insets = {
     top: paletteRow === "second-row" ? SHELL.fitInsetTopSecondRow : SHELL.fitInsetTop,
     right: SHELL.fitInsetSide,
-    bottom: host === "web" && problemsVisible ? SHELL.fitInsetBottomWeb : SHELL.fitInsetBottom,
+    bottom: raisedBottomRow ? SHELL.fitInsetBottomWeb + wrappedLegalLines : SHELL.fitInsetBottom,
     left: SHELL.fitInsetSide
   };
   const bottomSheetOpen = inspector !== void 0 && container.width <= SHELL.narrow;
@@ -344,6 +384,7 @@ function decideKey(event, context) {
   }
   const chromeKey = matchChromeKey(event);
   if (chromeKey !== void 0) {
+    if (context.startScreen === true && !stop) return { preventDefault: false, stopPropagation: false };
     const blocked = composing || context.inTextField || context.modalOpen;
     if (!blocked) return { action: chromeKey, preventDefault: true, stopPropagation: stop };
     return { preventDefault: false, stopPropagation: chromeKey === "fit" ? false : stop };
@@ -369,6 +410,9 @@ function shortcutLabel(key, platform, keyNames) {
       return `${keyNames.shift}+1`;
   }
 }
+function commandKeyLabel(key, platform, keyNames) {
+  return platform === "mac" ? `\u2318${key}` : `${keyNames.ctrl}+${key}`;
+}
 var MAC_SHORTCUT_LABELS = {
   zoomIn: "\u2318+",
   zoomOut: "\u2318\u2212",
@@ -531,7 +575,27 @@ var defaultMessages = {
   emptyHint: "Pick a tool from the palette to start.",
   insertExample: "Insert example",
   invalidFile: (diagram) => `This file isn't a valid ${diagram} right now. The diagram shows the last valid version and is read-only until you fix the text.`,
-  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" }
+  keyNames: { ctrl: "Ctrl", shift: "Shift", plus: "Plus", minus: "Minus" },
+  share: "Share",
+  legal: "Legal",
+  copyright: (year) => `\xA9 ${year} Miragon GmbH`,
+  opensInNewTab: "Opens in a new tab",
+  newDiagram: "New diagram",
+  openFile: "Open\u2026",
+  showExample: "Show example",
+  importFile: "Import\u2026",
+  appearance: "Appearance",
+  appearanceSystem: "System",
+  appearanceLight: "Light",
+  appearanceDark: "Dark",
+  problemsTitle: "Problems",
+  problemSeverity: (severity) => severity === "error" ? "Error" : "Warning",
+  close: "Close",
+  dropFile: "Drop file here",
+  dropForbidden: (reason) => reason === "multiple" ? "Drop one file at a time" : reason === "dialog" ? "Close the dialog to drop a file" : "This modeler can't open this file type",
+  dropHint: "Or drop a file here",
+  openFileLink: "Open a file\u2026",
+  cannotOpenFile: (name, accepted) => `Couldn't open \u201C${name}\u201D. Drop a ${accepted} file.`
 };
 function resolveMessages(overrides) {
   const { keyNames, ...texts } = overrides ?? {};
@@ -570,21 +634,197 @@ function placeTooltip(input) {
   const x = Math.max(SHELL.edge, Math.min(centred, rightmost));
   return { x, y };
 }
+
+// src/core/web-chrome/top-row.ts
+function decideTopRow(input) {
+  const { containerWidth, paletteWidth, menuRight, primary } = input;
+  if (!primary) {
+    return {
+      paletteRow: decidePaletteRow({ containerWidth, paletteWidth, menuRight }),
+      primaryLabel: "shown"
+    };
+  }
+  const paletteRowBeside = (primaryWidth) => decidePaletteRow({
+    containerWidth,
+    paletteWidth,
+    menuRight,
+    primaryLeft: containerWidth - SHELL.edge - primaryWidth
+  });
+  if (paletteRowBeside(primary.withLabel) === "top") return { paletteRow: "top", primaryLabel: "shown" };
+  if (paletteRowBeside(primary.iconOnly) === "top") return { paletteRow: "top", primaryLabel: "collapsed" };
+  const labelledLeft = containerWidth - SHELL.edge - primary.withLabel;
+  return {
+    paletteRow: "second-row",
+    primaryLabel: menuRight + PALETTE_CLEARANCE <= labelledLeft ? "shown" : "collapsed"
+  };
+}
+
+// src/core/web-chrome/drop.ts
+function acceptEntries(accept) {
+  const entries = accept.map((entry) => entry.trim().toLowerCase()).filter((entry) => entry !== "");
+  return {
+    extensions: entries.filter((entry) => entry.startsWith(".")),
+    mimeTypes: entries.filter((entry) => !entry.startsWith(".") && entry.includes("/"))
+  };
+}
+function matchesMimeType(type, mimeTypes) {
+  const normalized = type.trim().toLowerCase();
+  if (normalized === "") return false;
+  return mimeTypes.some(
+    (entry) => entry.endsWith("/*") ? normalized.startsWith(entry.slice(0, -1)) : normalized === entry
+  );
+}
+function dragVerdict(items, context) {
+  const files = items.filter((item) => item.kind === "file");
+  if (files.length === 0) return { state: "none" };
+  if (context.dialogOpen) return { state: "forbidden", reason: "dialog" };
+  if (files.length > 1 && !context.multiple) return { state: "forbidden", reason: "multiple" };
+  const { mimeTypes } = acceptEntries(context.accept);
+  const foreignType = (item) => item.type.trim() !== "" && !matchesMimeType(item.type, mimeTypes);
+  if (mimeTypes.length > 0 && files.every(foreignType)) return { state: "forbidden", reason: "type" };
+  return { state: "over" };
+}
+function acceptsFile(file, accept) {
+  const { extensions, mimeTypes } = acceptEntries(accept);
+  if (extensions.length === 0 && mimeTypes.length === 0) return true;
+  const name = file.name.toLowerCase();
+  return extensions.some((extension) => name.endsWith(extension)) || matchesMimeType(file.type, mimeTypes);
+}
+
+// src/core/feedback/toasts.ts
+var MAX_TOASTS = 3;
+var TOAST_DURATION_MS = {
+  success: 2800,
+  info: 2800,
+  warning: 5e3,
+  danger: 5e3
+};
+var TOAST_MAX_WIDTH = 480;
+function toastLifetime(request) {
+  if (request.action) return void 0;
+  const requested = request.durationMs;
+  const longer = requested !== void 0 && Number.isFinite(requested) ? requested : 0;
+  return Math.max(TOAST_DURATION_MS[request.status], longer);
+}
+function toastToEvict(stack) {
+  if (stack.length < MAX_TOASTS) return void 0;
+  const evicted = stack.find((slot) => !slot.engaged && !slot.hasAction) ?? stack.find((slot) => !slot.engaged) ?? stack[0];
+  return evicted?.id;
+}
+function toastStackWidth(containerWidth) {
+  return Math.max(0, Math.min(TOAST_MAX_WIDTH, containerWidth - 2 * SHELL.edge));
+}
+function toastStackBottom(input) {
+  const stackWidth = toastStackWidth(input.containerWidth);
+  const { cardWidth } = input;
+  const width = cardWidth !== void 0 && Number.isFinite(cardWidth) ? Math.min(stackWidth, Math.max(0, cardWidth)) : stackWidth;
+  const left = (input.containerWidth - width) / 2;
+  const right = left + width;
+  let highest;
+  for (const obstacle of input.obstacles) {
+    const distance = Math.max(obstacle.left - right, left - obstacle.right);
+    if (distance >= SHELL.gap) continue;
+    highest = highest === void 0 ? obstacle.top : Math.max(highest, obstacle.top);
+  }
+  return highest === void 0 ? SHELL.edge : Math.max(SHELL.edge, highest + SHELL.gap);
+}
+
+// src/core/feedback/appearance.ts
+var APPEARANCE_STORAGE_KEY = "miragon.darstellung";
+function parseAppearanceChoice(stored) {
+  return stored === "light" || stored === "dark" ? stored : "system";
+}
+function documentMode(choice, themes, colors) {
+  if (!themes.includes("dark")) return fixedMode("light", colors.light);
+  const parsed = parseAppearanceChoice(choice);
+  if (parsed === "system") {
+    return {
+      theme: "system",
+      colorScheme: "light dark",
+      themeColor: { light: colors.light, dark: colors.dark }
+    };
+  }
+  return fixedMode(parsed, colors[parsed]);
+}
+function fixedMode(theme, color) {
+  return { theme, colorScheme: theme, themeColor: { light: color, dark: color } };
+}
+function webModeScript(options) {
+  const contrast = [
+    `if (window.matchMedia && window.matchMedia(${scriptString("(prefers-contrast: more)")}).matches)`,
+    `  document.documentElement.setAttribute("data-cd-kontrast", "hoch");`
+  ];
+  if (!options.themes.includes("dark")) return contrast.join("\n");
+  const { light, dark } = options.themeColors;
+  return [
+    "(function () {",
+    "  var html = document.documentElement;",
+    "  var choice = null;",
+    "  try {",
+    `    choice = window.localStorage.getItem(${scriptString(APPEARANCE_STORAGE_KEY)});`,
+    "  } catch (error) {}",
+    `  if (choice === "light" || choice === "dark") {`,
+    `    var color = choice === "dark" ? ${scriptString(dark)} : ${scriptString(light)};`,
+    `    html.setAttribute("data-cd-theme", choice);`,
+    `    var scheme = document.querySelector("meta[name=color-scheme]");`,
+    `    if (scheme) scheme.setAttribute("content", choice);`,
+    `    var metas = document.querySelectorAll("meta[name=theme-color]");`,
+    `    for (var index = 0; index < metas.length; index++) metas[index].setAttribute("content", color);`,
+    "  }",
+    ...contrast.map((line) => `  ${line}`),
+    "})();"
+  ].join("\n");
+}
+function scriptString(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
+function webHeadMarkup(options) {
+  const mode = documentMode("system", options.themes, options.themeColors);
+  const script = `<script>
+${webModeScript(options)}
+</script>`;
+  if (mode.theme !== "system") {
+    return [`<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}">`, script].join(
+      "\n"
+    );
+  }
+  return [
+    `<meta name="color-scheme" content="${escapeAttribute(mode.colorScheme)}">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.light)}" media="(prefers-color-scheme: light)">`,
+    `<meta name="theme-color" content="${escapeAttribute(mode.themeColor.dark)}" media="(prefers-color-scheme: dark)">`,
+    script
+  ].join("\n");
+}
+function escapeAttribute(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/'/g, "&#39;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// src/core/feedback/problems.ts
+function problemSummary(items) {
+  const errors = items.filter((item) => item.severity === "error").length;
+  return { count: items.length, errors, items };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  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,
@@ -592,10 +832,14 @@ function placeTooltip(input) {
   ariaKeyShortcutsFromLabel,
   canZoomIn,
   canZoomOut,
+  commandKeyLabel,
   decideKey,
   decidePaletteRow,
+  decideTopRow,
   defaultMessages,
   detectPlatform,
+  documentMode,
+  dragVerdict,
   easeStandard,
   fitInsets,
   fitViewbox,
@@ -604,9 +848,12 @@ function placeTooltip(input) {
   freeRectCenter,
   interpolateViewbox,
   isUndoRedoKey,
+  legalLineHeight,
   legendStartsOpen,
   matchChromeKey,
+  parseAppearanceChoice,
   placeTooltip,
+  problemSummary,
   reducedMotionFromBodyClasses,
   requestedAppearance,
   resolveAppearance,
@@ -614,6 +861,13 @@ function placeTooltip(input) {
   sameView,
   shellSizesFromTokens,
   shortcutLabel,
-  zoomReadout
+  toastLifetime,
+  toastStackBottom,
+  toastStackWidth,
+  toastToEvict,
+  webHeadMarkup,
+  webModeScript,
+  zoomReadout,
+  zoomRowRaised
 });
 //# sourceMappingURL=core.cjs.map