@iyulab/modern-app 0.56.1 → 0.57.0

package/dist/unsaved.js

@@ -1,10 +1,10 @@
 import { getLocaleStrings as e } from "./internals/locale.js";
-//#region src/unsaved.ts
+// src/unsaved.ts
 var t = /* @__PURE__ */ new Set(), n = (e) => {
 	i() && (e.preventDefault(), e.returnValue = "");
 };
 function r(e) {
-	return t.size === 0 && typeof window < "u" && window.addEventListener("beforeunload", n), t.add(e), () => {
+	return t.size === 0 && typeof window < "u" && (window.addEventListener("beforeunload", n), s().catch(() => {})), t.add(e), () => {
 		t.delete(e) && t.size === 0 && typeof window < "u" && window.removeEventListener("beforeunload", n);
 	};
 }
@@ -17,18 +17,29 @@ function i() {
 	return !1;
 }
 async function a(t) {
-	let n = e(), { Dialog: r } = await import("@iyulab/components/dist/utilities/Dialog.js");
-	return r.confirm(t?.message ?? n.discardMessage, {
-		title: t?.title ?? n.discardTitle,
+	let n = e(), r = t?.title ?? n.discardTitle, i = t?.message ?? n.discardMessage, a;
+	try {
+		({Dialog: a} = await s());
+	} catch (e) {
+		return console.warn("[@iyulab/modern-app] the discard-changes dialog could not load — asking with window.confirm instead:", e), typeof window < "u" && typeof window.confirm == "function" && window.confirm(`${r}\n\n${i}`);
+	}
+	return a.confirm(i, {
+		title: r,
 		confirmLabel: t?.confirmLabel ?? n.discardConfirm,
 		cancelLabel: t?.cancelLabel ?? n.discardCancel,
 		confirmColor: "danger"
 	});
 }
-function o(e) {
+var o;
+function s() {
+	return o ??= import("@iyulab/components/dist/utilities/Dialog.js").catch((e) => {
+		throw o = void 0, e;
+	}), o;
+}
+function c(e) {
 	return !i() || a();
 }
-var s = class {
+var l = class {
 	constructor(e, t) {
 		this.isDirty = t, this.clean = !1, this.check = () => !this.clean && this.isDirty(), e.addController(this);
 	}
@@ -45,5 +56,4 @@ var s = class {
 		this.release?.(), this.release = void 0;
 	}
 };
-//#endregion
-export { s as UnsavedChangesController, a as confirmDiscardChanges, i as hasUnsavedChanges, r as trackUnsavedChanges, o as unsavedChangesGuard };
+export { l as UnsavedChangesController, a as confirmDiscardChanges, i as hasUnsavedChanges, r as trackUnsavedChanges, c as unsavedChangesGuard };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/modern-app",
   "description": "web-framework by iyulab based on lit-element",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "keywords": [
     "iyulab",
     "web-framework",

package/skills/modern-app/references/components/info-field.md

@@ -105,6 +105,27 @@ the `trend-icon` slot:
 </u-info-section>
 ```
 
+A small picture beside the figure — a trend sparkline, a progress ring — goes in the `visual` slot. It sits at the end
+of the value line, aligned to the figure's baseline edge, and takes no room when empty. The field does not draw the
+picture: it gives it a place. Mark a decorative picture `aria-hidden="true"`; give one that carries information its own
+name (`role="img"` and `aria-label`) (`0.57.0~`):
+
+```html
+<u-info-field appearance="tile" size="xl" label="Received today" .value=${48} trend="up" .trendLabel=${'+6 vs yesterday'}>
+  <svg slot="visual" aria-hidden="true" width="96" height="32" viewBox="0 0 96 32">
+    <polyline points="0,24 19,20 38,22 57,14 76,16 95,8" fill="none" stroke="currentColor" stroke-width="2" />
+  </svg>
+</u-info-field>
+```
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| (default) | The value, in place of the string `value` (the slot wins) |
+| `trend-icon` | A status mark at the start of the trend line, drawn when there is a trend line |
+| `visual` | A small picture at the end of the value line (sparkline, ring) — empty takes no room |
+
 ## CSS Parts
 
 | Part | Description |
@@ -112,6 +133,7 @@ the `trend-icon` slot:
 | `label` · `value` · `trend` | The label, the value, and the (optional) trend indicator |
 | `unit` | The unit, inside `value` (only when `unit` is set and the value is not blank) |
 | `description` | The supporting line (when `description` is set, or the value is blank and `blankReason` is set) |
+| `visual` | The box holding the `visual` slot (not drawn when the slot is empty) |
 
 ## CSS Custom Properties
 

package/skills/modern-app/references/layout.md

@@ -6,12 +6,15 @@
 interface SidebarLayoutConfig {
   type: 'sidebar';
 
-  /** Icon name (string) | image ({ src, alt?, href? }) | custom render function. Click navigates to `/` by default, or `href` if given (image variant). */
-  logo?: string | { src: string; alt?: string; href?: string } | ((state: SidebarState) => TemplateResult<1> | HTMLElement | string);
+  /** Icon name (string) | icon from a registered library ({ icon, lib? }) | image ({ src, alt?, href? }) | custom render function. Click navigates to `/` by default, or `href` if given (image variant). */
+  logo?: string | { icon: string; lib?: string } | { src: string; alt?: string; href?: string } | ((state: SidebarState) => TemplateResult<1> | HTMLElement | string);
 
   /** Application title displayed beside the logo. */
   title?: string;
 
+  /** One line under the title — what the app is. Shown in the expanded sidebar header only (hidden with the title when slim; the mobile header keeps one line). */
+  subtitle?: string;
+
   /** Main (top) navigation items. */
   main?: SidebarItem[];