@syware/jlib 0.6.0 → 0.7.0

package/dist/templates/jl-page.js

@@ -3,6 +3,7 @@ import { JlElement } from "../base/jl-element.js";
 import { oneOf } from "../lib/attributes.js";
 import { define } from "../lib/define.js";
 import { registerIcons } from "../lib/icons.js";
+import { jlText } from "../lib/texts.js";
 import { setOrRemove } from "../lib/dom.js";
 import { JlButton } from "../atoms/jl-button.js";
 import { JlPageHeader } from "../organisms/jl-page-header.js";
@@ -20,7 +21,6 @@ var PAGE_WIDTHS = [
 	"full"
 ];
 var BREADCRUMB_SLOT = "breadcrumb";
-var DEFAULT_BACK_LABEL = "Back";
 var TITLE_SEPARATOR = " · ";
 /**
 * A page of an app: its header (a back link named after the page it leads to, the heading, a sentence on what the
@@ -48,7 +48,7 @@ var JlPage = class extends JlElement {
 	appName = this.useChange("", () => this.renderTitle(), { attribute: "app-name" });
 	_refs = this.useRefs((ref) => ({
 		back: ref(".back"),
-		header: ref("jl-page-header")
+		header: ref(JlPageHeader)
 	}));
 	templateHtml() {
 		return /* @__PURE__ */ jsxs("div", {
@@ -88,7 +88,7 @@ var JlPage = class extends JlElement {
 		const back = this._refs.back;
 		const href = this.back.get();
 		back.href.set(href);
-		back.label.set(this.backLabel.get() || DEFAULT_BACK_LABEL);
+		back.label.set(this.backLabel.get() || jlText("back"));
 		setOrRemove(back, "slot", href === "" ? "" : BREADCRUMB_SLOT);
 	}
 	renderTitle() {

package/dist/templates/jl-split-view.js

@@ -1,6 +1,8 @@
 import { BASE_STYLES } from "../styles/shared.js";
 import { JlElement } from "../base/jl-element.js";
 import { clampedNumber, oneOf } from "../lib/attributes.js";
+import { jlText } from "../lib/texts.js";
+import { watchSizes } from "../lib/resize.js";
 import { clampMin, clampSplit, positionAfterKey, positionAt } from "../lib/split.js";
 import jl_split_view_default from "./jl-split-view.css_raw.js";
 import { css } from "@jadis/core";
@@ -13,7 +15,6 @@ var DEFAULT_MIN = 15;
 var FULL = 100;
 var MAX_MIN = 50;
 var PRIMARY_BUTTON = 0;
-var DEFAULT_LABEL = "Resize the panes";
 var STACKED = "stacked";
 var MAX_STACK_WIDTH = 4e3;
 var SEPARATOR_ORIENTATION = {
@@ -61,11 +62,11 @@ var JlSplitView = class extends JlElement {
 		parse: oneOf(SPLIT_PANES, "start")
 	});
 	/** The divider's name for screen readers. */
-	label = this.useChange(DEFAULT_LABEL, (value) => {
-		this._refs.divider.setAttribute("aria-label", value === "" ? DEFAULT_LABEL : value);
+	label = this.useChange(jlText("resizePanes"), (value) => {
+		this._refs.divider.setAttribute("aria-label", value === "" ? jlText("resizePanes") : value);
 	}, { attribute: "label" });
 	_drag = { from: DEFAULT_POSITION };
-	_resize = new ResizeObserver(() => this.renderStacked());
+	_resize = watchSizes(() => this.renderStacked());
 	/** Whether it shows one pane at a time now. */
 	isStacked() {
 		return this.hasAttribute(STACKED);

package/dist/types/jl-app-icon.types.d.ts

@@ -0,0 +1,5 @@
+/** The colours an app's icon is drawn in as a file: its tile's and its glyph's. */
+export type AppIconColors = {
+    tile: string;
+    glyph: string;
+};

package/dist/types/jl-command-palette.types.d.ts

@@ -4,10 +4,17 @@ export type PaletteCommand = {
     /** The heading the command is listed under. */
     group?: string;
     icon?: string;
+    /** What it is, beside its label and quieter: a record's type, a person's username. Tells apart two of one name. */
+    description?: string;
     /** Keys shown beside it, joined by `+`: `mod+shift+p` (`mod` is ⌘ on Apple, Ctrl elsewhere). */
     shortcut?: string;
     /** Other words that find it: `["preferences", "options"]` for "Settings". */
     keywords?: string[];
+    /**
+     * Found by the page for what was typed (a record, a person, "Open" with the ID pasted): listed whatever the
+     * search, since the page chose it already, after the commands the search matches.
+     */
+    result?: boolean;
 };
 /** A command that matches the search, with the places of the matched letters in its label. */
 export type PaletteMatch = {

package/dist/types/jl-facts.types.d.ts

@@ -0,0 +1,17 @@
+/** One fact about a thing: its label and value. A fact without a value is left out. */
+export type Fact = {
+    label: string;
+    value: string | number | null;
+    /** Drawn in the monospace font and broken anywhere: an identifier, a digest, a path. */
+    code?: boolean;
+    /** An address: the value is a link to it. */
+    href?: string;
+    /** The value's tooltip. */
+    hint?: string;
+    /** Names the fact for a renderer of `renderers`, which then draws its value. */
+    key?: string;
+};
+/** Draws a fact's value: a badge, links, a list. */
+export type FactRenderer = (fact: Fact) => Node;
+/** `horizontal` puts each label beside its value, `vertical` over it, the facts side by side. */
+export type FactsOrientation = 'horizontal' | 'vertical';

package/dist/types/jl-side-nav.types.d.ts

@@ -6,6 +6,8 @@ export type SideNavItem = {
     icon?: string;
     /** A link to follow; without it the item is a button that fires `select`. */
     href?: string;
+    /** Where the link opens: `_blank` for a new tab (the API's documentation beside the app). */
+    target?: string;
     /** A count or a short word beside the label: `3`, `New`. */
     badge?: string | number;
     children?: SideNavItem[];

package/dist/types/jl-steps.types.d.ts

@@ -2,6 +2,8 @@
 export type StepItem = {
     label: string;
     description?: string;
+    /** The step ended in failure (a payment refused, a transaction rolled back): an × in the danger colour. */
+    failed?: boolean;
 };
 export type StepsOrientation = 'horizontal' | 'vertical';
 /** Where a step stands against the current one. */

package/dist/types/jl-table.types.d.ts

@@ -1,6 +1,6 @@
 import type { Tone } from './options.types';
-/** How a cell shows its value: as it is, a localised number or date, a badge, or code. */
-export type TableCellFormat = 'text' | 'number' | 'date' | 'badge' | 'code';
+/** How a cell shows its value: as it is, a localised number, date or date and time, a badge, or code. */
+export type TableCellFormat = 'text' | 'number' | 'date' | 'datetime' | 'badge' | 'code';
 export type TableAlign = 'left' | 'center' | 'right';
 /** The order of a sorted column; `none` keeps the rows as they came. */
 export type TableSortDirection = 'asc' | 'desc' | 'none';
@@ -16,6 +16,13 @@ export type TableColumn = {
     format?: TableCellFormat;
     /** For badges: the tone of each value (`{ "Active": "ok" }`); neutral otherwise. */
     tones?: Record<string, Tone>;
+    /** The row's field shown as a quieter line under the value: a package's format under its name. */
+    description?: string;
+    /**
+     * Long text, a description or a note, breaks over lines instead of widening the table; cells stay on one line
+     * otherwise.
+     */
+    wrap?: boolean;
 };
 export type TableRow = Record<string, unknown>;
 /** A row's identity, the value of its `row-key` field. */

package/dist/types/jl-toaster.types.d.ts

@@ -16,8 +16,49 @@ export type ToastOptions = {
     actionLabel?: string;
     /** Called when that button is pressed; the toast then closes. */
     onAction?: () => void;
+    /** Shows a progress bar under the text, while the work it tells about runs. */
+    working?: boolean;
+    /** How far that work is, in percent; `null` for work of unknown length. */
+    progress?: number | null;
 };
-/** What `toast()` returns: a way to close the notification before its time. */
+/** What `toast()` returns: a way to change the notification while it shows, and to close it before its time. */
 export type ToastHandle = {
+    /** Changes what the toast says (its text, tone, progress, action…): the options given replace those it had. */
+    update(changes: ToastOptions): void;
     dismiss(): void;
 };
+/** The texts a download's toast shows: `{time}`, `{received}`, `{total}`, `{name}`, `{size}` and `{error}` are filled. */
+export type DownloadTexts = {
+    /** While the server prepares the file: "Preparing the file… {time}". */
+    preparing: string;
+    /** Bytes received, of a size the server did not say: "{received} received". */
+    received: string;
+    /** Bytes received of the size the server said: "{received} of {total}". */
+    receivedOf: string;
+    /** Saved: "Saved as {name}, {size}". */
+    saved: string;
+    /** Failed: "Not downloaded: {error}". */
+    failed: string;
+    /** The action that stops it. */
+    cancel: string;
+};
+export type DownloadOptions = {
+    /** The toast's heading: what is downloaded ("METS of Letters 1902"); the file's name otherwise. */
+    title?: string;
+    /** The name to save under when the server gives none; the address's last segment otherwise. */
+    fileName?: string;
+    /** The request's options: headers, credentials… */
+    init?: RequestInit;
+    texts?: Partial<DownloadTexts>;
+};
+/** How a download ended: saved (under a name, its size in bytes), failed (why), or canceled. */
+export type DownloadResult = {
+    outcome: 'saved';
+    name: string;
+    size: number;
+} | {
+    outcome: 'failed';
+    error: string;
+} | {
+    outcome: 'canceled';
+};

package/dist/types/jl-tree.types.d.ts

@@ -5,7 +5,33 @@ export type TreeItem = {
     icon?: string;
     /** Present, even empty, the item is a folder that opens. */
     children?: TreeItem[];
+    /** A folder whose children the tree's `loader` brings, the first time it opens. */
+    lazy?: boolean;
+    /** An address: the row is a link, which a middle click opens in a new tab, and it fires no `select`. */
+    href?: string;
+    /** The row's tooltip, such as the whole name of an item whose label is short. */
+    hint?: string;
+    /** A count or a short word after the label: how many items a folder holds. */
+    badge?: string | number;
 };
+/** One page of a level, as a loader answers it: some of its items, and how many the level has in all. */
+export type TreePage = {
+    items: TreeItem[];
+    total: number;
+};
+/** Loads a page of a level, from `offset` on: the roots when `parent` is null. */
+export type TreeLoader = (parent: string | null, offset: number) => Promise<TreePage>;
+/** A level the tree loads: how many items it has in all, the page on its way, and the last load's error. */
+export type TreeLevel = {
+    total: number;
+    pending: Promise<void> | null;
+    error: string;
+};
+/**
+ * The row that ends a level of the tree: its page on the way, the error of its last load, the button for its next
+ * page, the text of an empty tree, or none.
+ */
+export type TreeLevelEnd = 'loading' | 'error' | 'more' | 'empty' | 'none';
 /** An item as listed: its depth from 1 at the roots, and its parent's id. */
 export type VisibleTreeItem = {
     item: TreeItem;

package/dist/types/texts.types.d.ts

@@ -0,0 +1,5 @@
+import type { DEFAULT_TEXTS } from '../lib/texts';
+/** The name of one of the texts jlib's components show on their own. */
+export type JlTextKey = keyof typeof DEFAULT_TEXTS;
+/** The texts in the page's language: some or all of them, the rest staying in English. */
+export type JlTexts = Partial<Record<JlTextKey, string>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syware/jlib",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "A tree-shakeable component library on Jadis and native Web Components, organised in atomic design",
   "keywords": [
     "web-components",
@@ -85,7 +85,7 @@
     "prepublishOnly": "npm run check"
   },
   "peerDependencies": {
-    "@jadis/core": "^1.3.0"
+    "@jadis/core": "^1.4.0"
   },
   "dependencies": {
     "lucide": "^1.61.0"
@@ -94,7 +94,7 @@
     "@biomejs/biome": "^2.6.3",
     "@fontsource-variable/jetbrains-mono": "^5.3.0",
     "@fontsource-variable/manrope": "^5.3.0",
-    "@jadis/core": "^1.3.0",
+    "@jadis/core": "^1.4.1",
     "@types/node": "^24.13.3",
     "playwright-core": "^1.64.1",
     "typescript": "^7.0.2",