@bysages/svelte 0.2.3 → 0.3.1

package/dist/{dynamic-input-B3IBAoLs.mjs → dynamic-input-D1a-5vy-.mjs}

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { Input } from "./components/input/index.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -24,6 +25,7 @@ function DynamicInput$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("dynamic-input");
 	let value = $.prop($$props, "value", 31, () => $.proxy([""])), min = $.prop($$props, "min", 3, 0), addLabel = $.prop($$props, "addLabel", 3, "Add entry"), size = $.prop($$props, "size", 3, "md"), disabled = $.prop($$props, "disabled", 3, false), invalid = $.prop($$props, "invalid", 3, false), rest = $.rest_props($$props, rest_excludes);
+	const messages = useComponentMessages();
 	const canRemove = $.derived(() => value().length > Math.max(min(), 1));
 	const canAdd = $.derived(() => $$props.max === void 0 || value().length < $$props.max);
 	function update(index, next) {
@@ -69,6 +71,7 @@ function DynamicInput$1($$anchor, $$props) {
 		var node_2 = $.sibling(node_1, 2);
 		{
 			let $0 = $.derived(() => disabled() || !$.get(canRemove));
+			let $1 = $.derived(() => messages().dynamicEntry.remove);
 			Button(node_2, {
 				variant: "ghost",
 				square: true,
@@ -78,7 +81,9 @@ function DynamicInput$1($$anchor, $$props) {
 				get disabled() {
 					return $.get($0);
 				},
-				"aria-label": `Remove entry ${index + 1}`,
+				get "aria-label"() {
+					return $.get($1);
+				},
 				onclick: () => remove(index),
 				children: ($$anchor, $$slotProps) => {
 					var svg = root();

package/dist/{float-button-CZAda2SI.mjs → float-button-BLIHnw2u.mjs}

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
@@ -102,10 +103,11 @@ function FloatButtonItem($$anchor, $$props) {
 function FloatButtonTrigger($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("float-button");
+	const messages = useComponentMessages();
 	const context = useFloatButton();
 	{
 		let $0 = $.derived(() => context?.size ?? "lg");
-		let $1 = $.derived(() => $$props.label || "Actions");
+		let $1 = $.derived(() => $$props.label || messages().floatButton.actions);
 		let $2 = $.derived(() => context?.open ?? false);
 		Button($$anchor, {
 			variant: "solid",

package/dist/{form-De-ZwM1P.mjs → form-BTL9S1gn.mjs}

@@ -3,14 +3,14 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { Field } from "@ark-ui/svelte/field";
 import { getContext, setContext } from "svelte";
-import { createField, createForm } from "@tanstack/svelte-form";
+import { createField, createField as useField, createForm, createForm as useForm } from "@tanstack/svelte-form";
 //#region src/components/form/context.ts
 const FORM_KEY = Symbol("bysages-form");
 function provideForm(engine) {
 	setContext(FORM_KEY, engine);
 	return engine;
 }
-function useForm() {
+function useForm$1() {
 	return getContext(FORM_KEY) ?? null;
 }
 //#endregion
@@ -163,7 +163,7 @@ function FormField$1($$anchor, $$props) {
 	};
 	injectComponentStyle("form");
 	let required = $.prop($$props, "required", 3, false), invalid = $.prop($$props, "invalid", 3, false), disabled = $.prop($$props, "disabled", 3, false), rest = $.rest_props($$props, rest_excludes);
-	const engine = $$props.form ?? useForm();
+	const engine = $$props.form ?? useForm$1();
 	function errorText(error) {
 		if (error == null) return "";
 		if (typeof error === "string") return error;
@@ -209,4 +209,4 @@ const Form = Form$1;
 const FormField = FormField$1;
 injectComponentStyle("field");
 //#endregion
-export { createForm as i, FormField as n, createField as r, Form as t };
+export { useField as a, createForm as i, FormField as n, useForm as o, createField as r, Form as t };

package/dist/{icon-B6_cYYzO.mjs → icon-D7AeDq0M.mjs}

@@ -1,7 +1,7 @@
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
-import { getIcon } from "@bysages/icons";
+import { getIcon } from "@bysages/core/icons";
 //#region src/components/icon/Icon.svelte
 var rest_excludes = /* @__PURE__ */ new Set([
 	"$$slots",
@@ -9,6 +9,7 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"$$legacy",
 	"size",
 	"label",
+	"glyph",
 	"name",
 	"children"
 ]);
@@ -18,8 +19,8 @@ function Icon$1($$anchor, $$props) {
 	$.push($$props, true);
 	injectComponentStyle("icon");
 	let size = $.prop($$props, "size", 3, "inherit"), rest = $.rest_props($$props, rest_excludes);
-	const glyph = $$props.name && $$props.children == null ? getIcon($$props.name) : void 0;
-	if ($$props.name && $$props.children == null && !glyph) console.error(`[icons] unknown icon name "${$$props.name}" — extend packages/icons/icons.config.json and rerun the generator`);
+	const resolved = $$props.glyph ?? ($$props.name && $$props.children == null ? getIcon($$props.name) : void 0);
+	if ($$props.name && $$props.children == null && $$props.glyph == null && !resolved) console.error(`[icons] unknown icon name "${$$props.name}" — not in the wrappers' whitelist; import the glyph from @bysages/icons and pass it as glyph`);
 	var span = root_1();
 	$.attribute_effect(span, () => ({
 		...rest,
@@ -39,14 +40,14 @@ function Icon$1($$anchor, $$props) {
 	};
 	var consequent_1 = ($$anchor) => {
 		var svg = root();
-		$.html(svg, () => glyph.body, true);
+		$.html(svg, () => resolved.body, true);
 		$.reset(svg);
-		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${glyph.width ?? 24 ?? ""} ${glyph.height ?? 24 ?? ""}`));
+		$.template_effect(() => $.set_attribute(svg, "viewBox", `0 0 ${resolved.width ?? 24 ?? ""} ${resolved.height ?? 24 ?? ""}`));
 		$.append($$anchor, svg);
 	};
 	$.if(node, ($$render) => {
 		if ($$props.children) $$render(consequent);
-		else if (glyph) $$render(consequent_1, 1);
+		else if (resolved) $$render(consequent_1, 1);
 	});
 	$.reset(span);
 	$.append($$anchor, span);

package/dist/{image-1Lgj8xhS.mjs → image-u_H4LtAC.mjs}

@@ -9,6 +9,8 @@ var rest_excludes = /* @__PURE__ */ new Set([
 	"src",
 	"alt",
 	"fit",
+	"width",
+	"height",
 	"loading",
 	"fallback"
 ]);
@@ -61,6 +63,8 @@ function Image$1($$anchor, $$props) {
 	$.template_effect(() => {
 		$.set_attribute(img, "src", $$props.src);
 		$.set_attribute(img, "alt", alt());
+		$.set_attribute(img, "width", $$props.width);
+		$.set_attribute(img, "height", $$props.height);
 		$.set_attribute(img, "loading", loading());
 	});
 	$.event("load", img, () => $.set(state, "loaded"));

package/dist/{image-viewer-Dv3_Iyu8.mjs → image-viewer-DzoEcVSn.mjs}

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-BCcX7lHq.mjs";
+import { n as useComponentMessages } from "./messages-DNzA55pH.mjs";
 import { t as ButtonGroup } from "./button-group-CVLqPMlR.mjs";
 import { injectComponentStyle } from "@bysages/core";
 import "svelte/internal/disclose-version";
@@ -62,6 +63,7 @@ function ImageViewer$1($$anchor, $$props) {
 	const MAX_SCALE = 3;
 	const SCALE_STEP = .25;
 	let alt = $.prop($$props, "alt", 3, ""), open = $.prop($$props, "open", 15, false), zoomable = $.prop($$props, "zoomable", 3, true);
+	const messages = useComponentMessages();
 	let scale = $.state(1);
 	let rotation = $.state(0);
 	function setOpen(value) {
@@ -129,18 +131,30 @@ function ImageViewer$1($$anchor, $$props) {
 															var consequent = ($$anchor) => {
 																var fragment_11 = root_5();
 																var node_7 = $.first_child(fragment_11);
-																tool(node_7, () => "Zoom in", () => () => zoom(SCALE_STEP), () => zoomIn);
+																{
+																	let $0 = $.derived(() => messages().imageViewer.zoomIn);
+																	tool(node_7, () => $.get($0), () => () => zoom(SCALE_STEP), () => zoomIn);
+																}
 																var node_8 = $.sibling(node_7, 2);
-																tool(node_8, () => "Zoom out", () => () => zoom(-.25), () => zoomOut);
+																{
+																	let $0 = $.derived(() => messages().imageViewer.zoomOut);
+																	tool(node_8, () => $.get($0), () => () => zoom(-.25), () => zoomOut);
+																}
 																$.append($$anchor, fragment_11);
 															};
 															$.if(node_6, ($$render) => {
 																if (zoomable()) $$render(consequent);
 															});
 															var node_9 = $.sibling(node_6, 2);
-															tool(node_9, () => "Rotate 90 degrees", () => turn, () => turnGlyph);
+															{
+																let $0 = $.derived(() => messages().imageViewer.rotate);
+																tool(node_9, () => $.get($0), () => turn, () => turnGlyph);
+															}
 															var node_10 = $.sibling(node_9, 2);
-															tool(node_10, () => "Close", () => () => setOpen(false), () => closeGlyph);
+															{
+																let $0 = $.derived(() => messages().imageViewer.close);
+																tool(node_10, () => $.get($0), () => () => setOpen(false), () => closeGlyph);
+															}
 															$.append($$anchor, fragment_10);
 														},
 														$$slots: { default: true }
@@ -149,6 +163,8 @@ function ImageViewer$1($$anchor, $$props) {
 													$.template_effect(() => {
 														$.set_attribute(img, "src", $$props.src);
 														$.set_attribute(img, "alt", alt());
+														$.set_attribute(img, "width", $$props.width);
+														$.set_attribute(img, "height", $$props.height);
 														styles = $.set_style(img, "", styles, { transform: `scale(${$.get(scale)}) rotate(${$.get(rotation)}deg)` });
 													});
 													$.append($$anchor, fragment_9);

package/dist/index-0k-VxNRm.d.mts

@@ -0,0 +1,15 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/spotlight/props.d.ts
+interface SpotlightProps extends HTMLAttributes<HTMLDivElement> {
+  /** How far the lamp throws before the ink swallows it. */
+  radius?: string;
+}
+//#endregion
+//#region src/components/spotlight/index.d.ts
+/** The ink-light card: a vessel whose rim and face take light from the
+ * reader's hand. */
+declare const Spotlight: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  radius?: string;
+}, {}, "">;
+//#endregion
+export { SpotlightProps as n, Spotlight as t };

package/dist/{index-NJ21Q4f4.d.mts → index-BEfqqxjl.d.mts}

@@ -5,6 +5,16 @@ interface DescriptionsRootProps extends HTMLAttributes<HTMLDListElement> {
   /** The horizontal layout reads as a table of two columns; the
    * vertical one stacks each pair for narrow measures. */
   layout?: "horizontal" | "vertical";
+  /** The framed register: one hairline round the whole, terms on
+   * inset paper. */
+  bordered?: boolean;
+  /** Pairs across the grid: one ledger per column. */
+  column?: number;
+  children?: Snippet;
+}
+interface DescriptionsItemProps extends HTMLAttributes<HTMLElement> {
+  /** Column pairs this entry stretches across. */
+  span?: number;
   children?: Snippet;
 }
 interface DescriptionsPartProps extends HTMLAttributes<HTMLElement> {
@@ -17,7 +27,7 @@ interface DescriptionsPartProps extends HTMLAttributes<HTMLElement> {
  * stacks each pair for narrow measures. */
 declare const Descriptions: import("svelte").Component<DescriptionsRootProps, {}, ""> & {
   Root: import("svelte").Component<DescriptionsRootProps, {}, "">;
-  Item: import("svelte").Component<DescriptionsPartProps, {}, "">;
+  Item: import("svelte").Component<DescriptionsItemProps, {}, "">;
   Term: import("svelte").Component<DescriptionsPartProps, {}, "">;
   Detail: import("svelte").Component<DescriptionsPartProps, {}, "">;
 };

package/dist/{index-D6PrX-hf.d.mts → index-BJvo4qep.d.mts}

@@ -1,4 +1,4 @@
-import { t as TreeViewRoot } from "./TreeViewRoot-ConQj9TX.mjs";
+import { n as TreeViewNodeCheckbox, r as TreeViewBranchIndicator, t as TreeViewRoot } from "./TreeViewRoot-RBynRAly.mjs";
 import { TreeNode } from "@ark-ui/svelte/collection";
 import { TreeView, TreeViewRootProps } from "@ark-ui/svelte/tree-view";
 //#region src/components/tree-view/props.d.ts
@@ -8,8 +8,10 @@ type TreeViewRootProps$1 = TreeViewRootProps<TreeNode> & {
 };
 //#endregion
 //#region src/components/tree-view/index.d.ts
-declare const TreeView$1: Omit<typeof TreeView, "Root"> & {
+declare const TreeView$1: Omit<typeof TreeView, "Root" | "NodeCheckbox" | "BranchIndicator"> & {
   Root: typeof TreeViewRoot;
+  NodeCheckbox: typeof TreeViewNodeCheckbox;
+  BranchIndicator: typeof TreeViewBranchIndicator;
 };
 //#endregion
 export { TreeViewRootProps$1 as n, TreeView$1 as t };

package/dist/{index-DTAcdUAd.d.mts → index-BkGvErBJ.d.mts}

@@ -1,4 +1,4 @@
-import { ThemeScene } from "@bysages/core";
+import { ComponentMessagesOverride, ThemeScene } from "@bysages/core";
 import { Snippet } from "svelte";
 import { HTMLAttributes } from "svelte/elements";
 //#region src/components/config-provider/context.d.ts
@@ -23,6 +23,8 @@ interface ConfigContext {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Partial leaf overrides applied on top of the locale defaults. */
+  messages?: ComponentMessagesOverride;
 }
 /** The nearest provider's live snapshot, or an empty one when no
  * provider wraps the caller. */
@@ -36,6 +38,8 @@ interface ConfigProviderProps extends HTMLAttributes<HTMLDivElement> {
   dir?: "ltr" | "rtl";
   /** BCP-47 locale, landing as the native `lang` attribute. */
   locale?: string;
+  /** Partial leaf overrides applied on top of the locale defaults. */
+  messages?: ComponentMessagesOverride;
   children?: Snippet;
 }
 //#endregion

package/dist/index-BmFfkztS.d.mts

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/block-ui/props.d.ts
+interface BlockUIProps extends HTMLAttributes<HTMLDivElement> {
+  /** Whether the curtain is drawn. */
+  blocked?: boolean;
+  children?: import("svelte").Snippet;
+}
+//#endregion
+//#region src/components/block-ui/index.d.ts
+/** A curtain over content that must wait: frosted paper and one
+ * quiet wheel. */
+declare const BlockUI: import("svelte").Component<BlockUIProps, {}, "">;
+//#endregion
+export { BlockUIProps as n, BlockUI as t };

package/dist/{index-BgLAlGbg.d.mts → index-BoR_54C_.d.mts}

@@ -2,6 +2,9 @@ import { Snippet } from "svelte";
 import { HTMLAttributes } from "svelte/elements";
 //#region src/components/timeline/props.d.ts
 interface TimelineProps extends HTMLAttributes<HTMLOListElement> {
+  /** The thread's direction: a vertical line of moments, or one
+   * running left to right. */
+  orientation?: "vertical" | "horizontal";
   children?: Snippet;
 }
 interface TimelineItemProps extends HTMLAttributes<HTMLLIElement> {

package/dist/index-BolxaoaW.d.mts

@@ -0,0 +1,18 @@
+import { Snippet } from "svelte";
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/deferred-content/props.d.ts
+interface DeferredContentProps extends Omit<HTMLAttributes<HTMLDivElement>, "placeholder"> {
+  /** How much of the placeholder must be visible before the content
+   * mounts, from 0 (any pixel) to 1 (the whole box). */
+  threshold?: number;
+  /** Drawn until the box approaches the viewport. */
+  placeholder?: Snippet;
+  children?: Snippet;
+}
+//#endregion
+//#region src/components/deferred-content/index.d.ts
+/** Content that waits to be worth rendering: the slot mounts when the
+ * placeholder approaches the viewport. */
+declare const DeferredContent: import("svelte").Component<DeferredContentProps, {}, "">;
+//#endregion
+export { DeferredContentProps as n, DeferredContent as t };

package/dist/index-CAb_-2Bn.d.mts

@@ -0,0 +1,21 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/order-list/props.d.ts
+interface OrderOption {
+  label: string;
+  value: string;
+}
+interface OrderListProps extends HTMLAttributes<HTMLDivElement> {
+  /** Two-way bindable — the rows in their current order; the value is
+   * the order. */
+  value?: string[];
+  /** Every row the ledger knows, in no particular order. */
+  options: OrderOption[];
+  label?: string;
+}
+//#endregion
+//#region src/components/order-list/index.d.ts
+/** A ledger the reader may rewrite: rows move by grip or by the side
+ * arrows; the value is the order. */
+declare const OrderList: import("svelte").Component<OrderListProps, {}, "value">;
+//#endregion
+export { OrderListProps as n, OrderOption as r, OrderList as t };

package/dist/{index-Cd5VU1DI.d.mts → index-CV1LSzq5.d.mts}

@@ -6,6 +6,9 @@ interface AvatarProps {
    * default (large) stands as tall as the biggest control so an avatar
    * rides a row without stretching it. */
   size?: AvatarSize;
+  /** The corner: round by default; square cuts it sharp, a stamp
+   * beside a round portrait. */
+  shape?: "circle" | "square";
   children?: import("svelte").Snippet;
 }
 //#endregion

package/dist/index-CmskeLd_.d.mts

@@ -0,0 +1,23 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/bento/props.d.ts
+interface BentoProps extends HTMLAttributes<HTMLDivElement> {
+  /** Tracks across the lattice. */
+  columns?: number;
+}
+//#endregion
+//#region src/components/bento/index.d.ts
+/** The bento lattice: a grid of unequal tiles that reads as one plate
+ * — Bento, Bento.Cell. */
+declare const Bento: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  columns?: number;
+}, {}, ""> & {
+  Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    columns?: number;
+  }, {}, "">;
+  Cell: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    span?: number;
+    rowSpan?: number;
+  }, {}, "">;
+};
+//#endregion
+export { BentoProps as n, Bento as t };

package/dist/index-CnrohEXe.d.mts

@@ -0,0 +1,24 @@
+import { HTMLAttributes } from "svelte/elements";
+//#region src/components/dock/props.d.ts
+interface DockProps extends HTMLAttributes<HTMLDivElement> {
+  /** The tallest an item swells under the hand — 1 stands still. */
+  maxScale?: number;
+  /** How far the hand reaches, in px, before an item stops answering. */
+  radius?: number;
+}
+//#endregion
+//#region src/components/dock/index.d.ts
+/** The magnifying dock: a floating rail whose icons swell toward the
+ * hand — Dock, Dock.Item. */
+declare const Dock: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+  maxScale?: number;
+  radius?: number;
+}, {}, ""> & {
+  Root: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement> & {
+    maxScale?: number;
+    radius?: number;
+  }, {}, "">;
+  Item: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLDivElement>, {}, "">;
+};
+//#endregion
+export { DockProps as n, Dock as t };