@zaly/tui 0.0.4 → 0.0.5

package/dist/widget-M7jD8Rgg.d.mts

@@ -0,0 +1,49 @@
+import { p as Node } from "./queries-DH3bj74K.mjs";
+//#region src/widgets/widget.d.ts
+type Props = Record<string, unknown>;
+/**
+ * A widget factory: takes some args, returns a `Node`.
+ *
+ * The default `A = never[]` makes the *bare* `Widget` the universal
+ * "any widget" type — the `(...args: never[]) => Node` idiom. Every
+ * concrete factory (zero-arg, `state + ...children`, single-props) is
+ * assignable to it, so it works both as the `widget()` constraint and
+ * as a stored value type (`details?: Widget`, invoked zero-arg). Supply
+ * `A` explicitly for a precise signature: `Widget<[State<LogState>]>`.
+ */
+type Widget<A extends unknown[] = never[], N extends Node = Node> = (...args: A) => N;
+/**
+ * Type helper for declaring widgets — runtime identity, just `return fn`.
+ *
+ * Three things it earns:
+ *   1. Inference at the declaration site: TS infers `S` from the function
+ *      parameter and enforces it on every call site.
+ *   2. A consistent grep target: every component reads as
+ *      `export const foo = widget((props) => …)`.
+ *   3. A future seam for instrumentation, lifecycle wrappers, devtools.
+ *
+ * The factory body runs **once** at construction. Reactive content lives
+ * in leaf thunks (`text(({ style }) => …)`), not by re-running the body
+ * — this is the Solid model, not React's. `ctx` is therefore unavailable
+ * inside the factory; reach for it inside leaf thunks where it belongs.
+ *
+ * ```ts
+ * const status = widget((props: { level: "ok" | "warn"; msg: string }) =>
+ *   text(({ style }) => `${style.bold[props.level]("●")} ${style.dim(props.msg)}`),
+ * )
+ *
+ * status({ level: "ok", msg: "all systems nominal" })
+ * ```
+ */
+/**
+ * Call-site args derived from `S`:
+ *   - If `S` declares `children`, `children` is injected from rest args;
+ *     state at the call site has `children` omitted, then `...children`.
+ *   - Otherwise, no rest is allowed.
+ *   - Either way, the state arg is optional when every field of the
+ *     resolved state is optional (so bare `widget()` works).
+ */
+declare function widget<T extends Widget>(fn: T): T;
+//#endregion
+export { Widget as n, widget as r, Props as t };
+//# sourceMappingURL=widget-M7jD8Rgg.d.mts.map

package/dist/widget-M7jD8Rgg.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"widget-M7jD8Rgg.d.mts","names":[],"sources":["../src/widgets/widget.ts"],"mappings":";;KAIY,QAAQ;;;;;;;;;;;KAYR,OAAO,+BAA+B,UAAU,OAAO,YAAY,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAkC3E,OAAO,UAAU,QAAQ,IAAI,IAAI"}

package/dist/widgets/autocomplete.mjs

@@ -1,7 +1,7 @@
 import { S as unwrap, f as effect, h as memo, y as signal } from "../reactive-f7NpAi69.mjs";
 import { t as Node } from "../node-BZ7f6HzU.mjs";
-import { t as picker } from "../picker-ndVVt6qF.mjs";
-import { Input } from "./input.mjs";
+import { t as picker } from "../picker-cH-rc7-X.mjs";
+import { t as Input } from "../input-CRBuTrsL.mjs";
 //#region src/widgets/autocomplete.ts
 /**
 * Autocomplete popup bound to an `Input`. Watches the input's value and

package/dist/widgets/box.mjs

@@ -1,2 +1,2 @@
-import { n as box, t as Box } from "../box-DyaByEiG.mjs";
+import { n as box, t as Box } from "../box-DepqUtuo.mjs";
 export { Box, box };

package/dist/widgets/code.mjs

@@ -1,11 +1,11 @@
 import { S as unwrap, h as memo, r as createAsync, w as useContext } from "../reactive-f7NpAi69.mjs";
-import { n as box } from "../box-DyaByEiG.mjs";
-import { formatLines } from "../text.mjs";
-import { text } from "./text.mjs";
-import { t as RenderContext } from "../render-DxVLqqB9.mjs";
-import { t as codeToAnsi } from "../shiki-BrjVUkeh.mjs";
-import { widget } from "./widget.mjs";
-import { show } from "./show.mjs";
+import { n as box } from "../box-DepqUtuo.mjs";
+import { a as formatLines } from "../text-q26V6_Sc.mjs";
+import { n as text } from "../text-DILrol9j.mjs";
+import { t as RenderContext } from "../render-CPUD4yaW.mjs";
+import { t as codeToAnsi } from "../shiki-BK-v9CtF.mjs";
+import { t as widget } from "../widget-BkMwhY2p.mjs";
+import { t as show } from "../show-DR2x1YFc.mjs";
 import { extname } from "pathe";
 //#region src/widgets/code.ts
 /**

package/dist/widgets/completions/actions.d.mts

@@ -1,41 +1,2 @@
-import { Bt as Actions, It as ActionDef } from "../../queries-DH3bj74K.mjs";
-import { n as PickerItem } from "../../picker-D8OLb6kZ.mjs";
-import { o as CompletionSource } from "../../autocomplete-Dfw-yQDa.mjs";
-//#region src/widgets/completions/actions.d.ts
-/** Completion item produced by `actionsSource`. Carries the full
- *  `ActionInfo` plus the action `id` so the source's `accept` can
- *  dispatch without a secondary lookup. Items match the `MenuItem`
- *  contract loosely via the overlapping `name`/... shape. */
-type ActionCompletionItem = ActionDef & PickerItem & {
-  id: string;
-  score: number;
-};
-interface ActionsSourceOptions {
-  /** Registry to read from. Usually `renderer.actions`. */
-  actions: Actions;
-  /** Trigger regex. Default: `/^\s*\//` (slash at start of line). */
-  trigger?: RegExp;
-  /** Keep predicate. Default skips `info.hidden`. Return `false` to
-   *  drop the entry from the completion list. */
-  filter?: (id: string, info: ActionDef) => boolean;
-}
-/**
- * Completion source backed by the `Actions` registry — typical slash
- * command ergonomics. Items are raw `ActionInfo` objects augmented
- * with their `id`; `accept` dispatches the action through the registry
- * and clears the trigger+query range, so the user's typed `/foo` is
- * removed once the action fires (no stale text left in the input).
- *
- * ```ts
- * autocomplete({
- *   input: "chat-input",
- *   sources: {
- *     slash: actionsSource({ actions: renderer.actions }),
- *   },
- * })
- * ```
- */
-declare function actionsSource(opts: ActionsSourceOptions): CompletionSource<ActionCompletionItem>;
-//#endregion
-export { ActionCompletionItem, ActionsSourceOptions, actionsSource };
-//# sourceMappingURL=actions.d.mts.map
+import { n as ActionsSourceOptions, r as actionsSource, t as ActionCompletionItem } from "../../actions-CnVzKVID.mjs";
+export { ActionCompletionItem, ActionsSourceOptions, actionsSource };

package/dist/widgets/completions/actions.mjs

@@ -1,48 +1,2 @@
-//#region src/widgets/completions/actions.ts
-/**
-* Completion source backed by the `Actions` registry — typical slash
-* command ergonomics. Items are raw `ActionInfo` objects augmented
-* with their `id`; `accept` dispatches the action through the registry
-* and clears the trigger+query range, so the user's typed `/foo` is
-* removed once the action fires (no stale text left in the input).
-*
-* ```ts
-* autocomplete({
-*   input: "chat-input",
-*   sources: {
-*     slash: actionsSource({ actions: renderer.actions }),
-*   },
-* })
-* ```
-*/
-function actionsSource(opts) {
-	const trigger = opts.trigger ?? /^\//;
-	const filter = opts.filter ?? ((_id, info) => !info.hidden && !!info.cmd);
-	return {
-		accept(item) {
-			opts.actions.dispatch(item.id, { source: "autocomplete" });
-		},
-		complete(_query, match) {
-			const out = [];
-			for (const info of opts.actions.list()) {
-				if (!filter(info.id, info)) continue;
-				const name = info.cmd ?? info.id;
-				const score = match(name);
-				if (!score) continue;
-				out.push({
-					...info,
-					id: info.id,
-					name,
-					score,
-					text: name
-				});
-			}
-			return out;
-		},
-		triggers: [trigger]
-	};
-}
-//#endregion
+import { t as actionsSource } from "../../actions-DEIKF2ts.mjs";
 export { actionsSource };
-
-//# sourceMappingURL=actions.mjs.map

package/dist/widgets/completions/files.d.mts

@@ -1,29 +1,2 @@
-import { n as PickerItem } from "../../picker-D8OLb6kZ.mjs";
-import { o as CompletionSource } from "../../autocomplete-Dfw-yQDa.mjs";
-import { FindOptions } from "@zaly/shared/find";
-//#region src/widgets/completions/files.d.ts
-interface FilesSourceOptions extends FindOptions {
-  /** Base directory relative queries resolve against. Default:
-   *  `process.cwd()`. */
-  cwd?: string;
-  /** Trigger regex. Default: `/(?<=^|\s)@/` — `@` preceded by start-of-
-   *  string or whitespace. Lookbehind keeps `match.start` on the `@`
-   *  itself so the leading space isn't eaten on insertion. */
-  trigger?: RegExp;
-  /** Prefix prepended to accepted values so the trigger character stays
-   *  in the input after a pick (letting users keep typing to drill into
-   *  subdirectories). Default: `"@"` — matches the default trigger.
-   *  When customizing `trigger`, set this to the character your trigger
-   *  represents. */
-  prefix?: string;
-  refreshInterval?: number;
-}
-type File = PickerItem & {
-  file: string;
-};
-/** Completion source for files. Uses `@zaly/shared/find` under the hood, so
- * supports all the same options and respects .gitignore by default. */
-declare function filesSource(opts?: FilesSourceOptions): CompletionSource<File>;
-//#endregion
-export { FilesSourceOptions, filesSource };
-//# sourceMappingURL=files.d.mts.map
+import { n as filesSource, t as FilesSourceOptions } from "../../files-Aw3iWpXD.mjs";
+export { FilesSourceOptions, filesSource };

package/dist/widgets/completions/files.mjs

@@ -1,42 +1,2 @@
-import { a as createIterable, y as signal } from "../../reactive-f7NpAi69.mjs";
-import { normPath } from "@zaly/shared";
-//#region src/widgets/completions/files.ts
-/** Completion source for files. Uses `@zaly/shared/find` under the hood, so
-* supports all the same options and respects .gitignore by default. */
-function filesSource(opts = {}) {
-	const cwd = normPath(opts.cwd);
-	const trigger = opts.trigger ?? /(?<=^|\s)@/;
-	const prefix = opts.prefix ?? "@";
-	let results;
-	const [gen, setGen] = signal(0);
-	let lastRefresh = 0;
-	return {
-		accept: (item) => {
-			const v = item.file;
-			return `${prefix}${v}${v.endsWith("/") ? "" : " "}`;
-		},
-		get complete() {
-			const now = performance.now();
-			if (!results?.loading() && now - lastRefresh > (opts.refreshInterval ?? 1e4)) {
-				setGen((g) => g + 1);
-				lastRefresh = now;
-			}
-			return results ??= createIterable(async function* iterFiles() {
-				gen();
-				const { find } = await import("@zaly/shared/find");
-				for await (const f of find({
-					...opts,
-					cwd
-				})) yield (Array.isArray(f) ? f : [f]).map((file) => ({
-					file,
-					text: file
-				}));
-			});
-		},
-		triggers: [trigger]
-	};
-}
-//#endregion
+import { t as filesSource } from "../../files-BvThQpOf.mjs";
 export { filesSource };
-
-//# sourceMappingURL=files.mjs.map

package/dist/widgets/completions/github.d.mts

@@ -1,64 +1,2 @@
-import { n as PickerItem } from "../../picker-D8OLb6kZ.mjs";
-import { o as CompletionSource } from "../../autocomplete-Dfw-yQDa.mjs";
-//#region src/widgets/completions/github.d.ts
-/** A GitHub issue or pull request returned by `githubSource`. Shape
- *  mirrors the `gh` CLI's `--json number,title,state,author,url`
- *  output, with `type` added to distinguish issues from PRs. */
-type GithubItem = PickerItem & {
-  number: number;
-  title: string;
-  /** `"open"` / `"closed"` for issues; `"open"` / `"closed"` / `"merged"`
-   *  for PRs. Kept as a string so we don't trip if gh evolves. */
-  state: string;
-  type: "issue" | "pr";
-  url: string;
-  author?: {
-    login?: string;
-  };
-};
-type GithubState = "open" | "closed" | "all";
-type GithubFetcher = (cwd: string, state: GithubState) => Promise<GithubItem[]>;
-interface GithubSourceOptions {
-  /** Working directory used to locate the repo. `gh` resolves the repo
-   *  from the git remote of this dir. Default: `process.cwd()`. */
-  cwd?: string;
-  /** Trigger regex. Default: `/(?<=^|\s)#/` — `#` preceded by start-of-
-   *  string or whitespace (same lookbehind trick as `filesSource`). */
-  trigger?: RegExp;
-  /** Prepended to the accepted value so the trigger character stays in
-   *  the input. Default: `"#"`. */
-  prefix?: string;
-  /** Which issues / PRs to include. Default: `"open"`. */
-  state?: GithubState;
-  /** Per-kind cap passed to `gh`. Default: `50`. */
-  limit?: number;
-  /** Override the fetch implementation. Mainly useful for tests — the
-   *  default shells out to `gh`. The fetcher is called at most once per
-   *  `githubSource` instance; results are cached thereafter. */
-  fetcher?: GithubFetcher;
-}
-/**
- * Completion source for GitHub issues and pull requests from the repo
- * at `cwd`. Shells out to the `gh` CLI on first use, caches the result,
- * and fuzzy-filters locally on subsequent calls so typing stays snappy.
- *
- * Accepts insert `#123 ` into the input — ready for a markdown-style
- * reference in a chat message or commit subject.
- *
- * ```ts
- * autocomplete({
- *   input: "chat-input",
- *   sources: {
- *     gh: githubSource(),
- *   },
- * })
- * ```
- *
- * Silently returns no items when `gh` isn't installed, the user isn't
- * authenticated, or the directory isn't a GitHub repo — so it's safe
- * to wire up unconditionally.
- */
-declare function githubSource(opts?: GithubSourceOptions): CompletionSource<GithubItem>;
-//#endregion
-export { GithubFetcher, GithubItem, GithubSourceOptions, GithubState, githubSource };
-//# sourceMappingURL=github.d.mts.map
+import { a as githubSource, i as GithubState, n as GithubItem, r as GithubSourceOptions, t as GithubFetcher } from "../../github-DS00VoOj.mjs";
+export { GithubFetcher, GithubItem, GithubSourceOptions, GithubState, githubSource };

package/dist/widgets/completions/github.mjs

@@ -1,137 +1,2 @@
-import { stringWidth } from "@zaly/shared/ansi";
-import { spawn } from "node:child_process";
-//#region src/widgets/completions/github.ts
-/**
-* Completion source for GitHub issues and pull requests from the repo
-* at `cwd`. Shells out to the `gh` CLI on first use, caches the result,
-* and fuzzy-filters locally on subsequent calls so typing stays snappy.
-*
-* Accepts insert `#123 ` into the input — ready for a markdown-style
-* reference in a chat message or commit subject.
-*
-* ```ts
-* autocomplete({
-*   input: "chat-input",
-*   sources: {
-*     gh: githubSource(),
-*   },
-* })
-* ```
-*
-* Silently returns no items when `gh` isn't installed, the user isn't
-* authenticated, or the directory isn't a GitHub repo — so it's safe
-* to wire up unconditionally.
-*/
-function githubSource(opts = {}) {
-	const cwd = opts.cwd ?? process.cwd();
-	const trigger = opts.trigger ?? /(?<=^|\s)#/;
-	const prefix = opts.prefix ?? "#";
-	const state = opts.state ?? "open";
-	const limit = opts.limit ?? 50;
-	const fetcher = opts.fetcher ?? defaultFetcher(limit);
-	let cache;
-	return {
-		accept: (item) => `${prefix}${item.number} `,
-		async complete(_query, match) {
-			cache ??= fetcher(cwd, state).catch(() => []);
-			const items = await cache;
-			const out = [];
-			for (const item of items) {
-				const score = match(`#${item.number} ${item.title}`);
-				if (!score) continue;
-				out.push({
-					...item,
-					score
-				});
-			}
-			return out;
-		},
-		render: defaultRender,
-		triggers: [trigger]
-	};
-}
-const defaultRender = (item, ctx) => {
-	const { style } = ctx;
-	const num = `#${item.number}`;
-	const stateSlot = stateStyleSlot(item.state);
-	const typeLabel = item.type === "pr" ? "pr" : "issue";
-	const author = item.author?.login ? `@${item.author.login}` : "";
-	const lead = `${style.add("optionName")(num)} ${style.add(stateSlot)(`${item.state}·${typeLabel}`)} ${item.title}`;
-	if (author === "") return lead;
-	const gap = 2;
-	const leadW = stringWidth(lead);
-	const hintW = stringWidth(author);
-	const padded = ctx.width - leadW - hintW - gap;
-	if (padded < 1) return lead;
-	return lead + " ".repeat(padded + gap) + style.add("optionDesc")(author);
-};
-function stateStyleSlot(state) {
-	if (state === "open") return "success";
-	if (state === "merged") return "accent";
-	return "muted";
-}
-/** Default fetcher — shells out to `gh issue list` + `gh pr list` in
-*  parallel. Either failing is swallowed so a repo with only issues
-*  (or only PRs) still works. */
-function defaultFetcher(limit) {
-	const fields = "number,title,state,author,url";
-	return async (cwd, state) => {
-		const [issues, prs] = await Promise.all([runGh(cwd, [
-			"issue",
-			"list",
-			"--state",
-			state,
-			"--json",
-			fields,
-			"--limit",
-			String(limit)
-		]), runGh(cwd, [
-			"pr",
-			"list",
-			"--state",
-			state,
-			"--json",
-			fields,
-			"--limit",
-			String(limit)
-		])]);
-		return [...parse(issues).map((x) => Object.assign(x, { type: "issue" })), ...parse(prs).map((x) => Object.assign(x, { type: "pr" }))].map((item) => Object.assign(item, { text: `#${item.number} ${item.title}` }));
-	};
-}
-function parse(out) {
-	try {
-		return JSON.parse(out);
-	} catch {
-		return [];
-	}
-}
-function runGh(cwd, args) {
-	return new Promise((resolve) => {
-		try {
-			const child = spawn("gh", args, {
-				cwd,
-				stdio: [
-					"ignore",
-					"pipe",
-					"ignore"
-				]
-			});
-			let stdout = "";
-			child.stdout.on("data", (chunk) => {
-				stdout += chunk.toString("utf8");
-			});
-			child.on("close", (code) => {
-				resolve(code === 0 ? stdout : "");
-			});
-			child.on("error", () => {
-				resolve("");
-			});
-		} catch {
-			resolve("");
-		}
-	});
-}
-//#endregion
+import { t as githubSource } from "../../github-Cy2hfWJ7.mjs";
 export { githubSource };
-
-//# sourceMappingURL=github.mjs.map

package/dist/widgets/completions/index.d.mts

@@ -1,4 +1,4 @@
-import { ActionCompletionItem, ActionsSourceOptions, actionsSource } from "./actions.mjs";
-import { FilesSourceOptions, filesSource } from "./files.mjs";
-import { GithubFetcher, GithubItem, GithubSourceOptions, GithubState, githubSource } from "./github.mjs";
+import { n as ActionsSourceOptions, r as actionsSource, t as ActionCompletionItem } from "../../actions-CnVzKVID.mjs";
+import { n as filesSource, t as FilesSourceOptions } from "../../files-Aw3iWpXD.mjs";
+import { a as githubSource, i as GithubState, n as GithubItem, r as GithubSourceOptions, t as GithubFetcher } from "../../github-DS00VoOj.mjs";
 export { ActionCompletionItem, ActionsSourceOptions, FilesSourceOptions, GithubFetcher, GithubItem, GithubSourceOptions, GithubState, actionsSource, filesSource, githubSource };

package/dist/widgets/completions/index.mjs

@@ -1,4 +1,4 @@
-import { actionsSource } from "./actions.mjs";
-import { filesSource } from "./files.mjs";
-import { githubSource } from "./github.mjs";
+import { t as actionsSource } from "../../actions-DEIKF2ts.mjs";
+import { t as filesSource } from "../../files-BvThQpOf.mjs";
+import { t as githubSource } from "../../github-Cy2hfWJ7.mjs";
 export { actionsSource, filesSource, githubSource };

package/dist/widgets/diff.d.mts

@@ -1,5 +1,5 @@
 import { J as Layout, P as RenderCtx, X as State, nt as Reactive, p as Node } from "../queries-DH3bj74K.mjs";
-import { WrapMode } from "../text.mjs";
+import { t as WrapMode } from "../text-9lwQeqYr.mjs";
 //#region src/widgets/diff.d.ts
 interface DiffState {
   /** Pre-state file content. Plain string or reactive accessor —

package/dist/widgets/diff.mjs

@@ -1,8 +1,8 @@
 import { S as unwrap, h as memo, r as createAsync, w as useContext } from "../reactive-f7NpAi69.mjs";
 import { t as Node } from "../node-BZ7f6HzU.mjs";
-import { calcLayout, countLines } from "../text.mjs";
-import { t as RenderContext } from "../render-DxVLqqB9.mjs";
-import { t as codeToAnsi } from "../shiki-BrjVUkeh.mjs";
+import { r as countLines, t as calcLayout } from "../text-q26V6_Sc.mjs";
+import { t as RenderContext } from "../render-CPUD4yaW.mjs";
+import { t as codeToAnsi } from "../shiki-BK-v9CtF.mjs";
 import { splitAnsi, stringWidth, wrapAnsi } from "@zaly/shared/ansi";
 import { basename, extname } from "pathe";
 //#region src/widgets/diff.ts

package/dist/widgets/divider.mjs

@@ -1,9 +1,2 @@
-import { text } from "./text.mjs";
-//#region src/widgets/divider.ts
-function divider(state = { style: "divider" }) {
-	return text((ctx) => (state.char ?? "─").repeat(state.length ?? ctx.width), state);
-}
-//#endregion
+import { t as divider } from "../divider-cclEAdPx.mjs";
 export { divider };
-
-//# sourceMappingURL=divider.mjs.map

package/dist/widgets/image.d.mts

@@ -1,37 +1,2 @@
-import { J as Layout, P as RenderCtx, p as Node } from "../queries-DH3bj74K.mjs";
-//#region src/widgets/image.d.ts
-interface ImageState {
-  /**
-   * Path to an image file. PNG passes through with zero decoding; other
-   * formats (JPEG/WebP/GIF/AVIF/SVG) are read via image-meta for
-   * dimensions and — for KGP terminals — converted once to a cached
-   * temp PNG via sharp. iTerm2 accepts all formats natively.
-   */
-  src: string;
-  /** Display width in terminal cells. Defaults to `ctx.width`. */
-  width?: number;
-  /**
-   * Display height in terminal cells. When omitted, computed from the
-   * source aspect ratio + `cellAspect`.
-   */
-  height?: number;
-  /** Fallback text shown on terminals without an image protocol. */
-  alt?: string;
-  /**
-   * Character cell aspect ratio (cellHeight / cellWidth). Most terminals
-   * land around 2.0. Tweak if aspect-preserved images look stretched.
-   */
-  cellAspect?: number;
-}
-declare class Image extends Node<ImageState> {
-  #private;
-  constructor(state: ImageState);
-  get fallback(): string[];
-  layout(): Layout;
-  protected _render(ctx: RenderCtx): Promise<string[]>;
-}
-declare function image(src: string, style?: Omit<ImageState, "src">): Image;
-declare function image(state: ImageState): Image;
-//#endregion
-export { Image, ImageState, image };
-//# sourceMappingURL=image.d.mts.map
+import { n as ImageState, r as image, t as Image } from "../image-BTxDPPiT.mjs";
+export { Image, ImageState, image };

package/dist/widgets/image.mjs

@@ -1,6 +1,6 @@
 import { S as unwrap, w as useContext } from "../reactive-f7NpAi69.mjs";
 import { t as Node } from "../node-BZ7f6HzU.mjs";
-import { t as RenderContext } from "../render-DxVLqqB9.mjs";
+import { t as RenderContext } from "../render-CPUD4yaW.mjs";
 import { s as loadKittyGraphics } from "../kitty-JbCJC0iQ.mjs";
 import { fileDetect } from "@zaly/shared/detect";
 import { imageInfo } from "@zaly/shared/image";