@bysages/solid 0.3.1 → 0.4.1

package/dist/icon-DTqmJCd5.mjs

@@ -0,0 +1,48 @@
+import { spread, template } from "@solidjs/web";
+import { getIcon } from "@bysages/core/icons";
+//#region src/internal/icon.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<svg>`);
+function resolve(name) {
+	const icon = getIcon(name);
+	if (!icon) throw new Error(`Unknown icon "${name}" in the curated core registry`);
+	return icon;
+}
+/** Render a curated core icon as a bare svg node — the components' own
+* default icons. No span shell: the part rules size the svg directly.
+* Extra body appends after the icon's own body, for composed marks. */
+function iconNode(name, attrs = {}, extraBody = "") {
+	const icon = resolve(name);
+	var _el$ = _tmpl$();
+	spread(_el$, [
+		{
+			get viewBox() {
+				return `0 0 ${icon.width} ${icon.height}`;
+			},
+			"aria-hidden": "true"
+		},
+		attrs,
+		{ get innerHTML() {
+			return icon.body + extraBody;
+		} }
+	], false);
+	return _el$;
+}
+/** The same curated icon as an HTML string, for enhancements that write
+* innerHTML rather than mount elements. */
+function iconHtml(name, attrs = {}) {
+	const icon = resolve(name);
+	const attributes = {
+		width: String(icon.width),
+		height: String(icon.height),
+		viewBox: `0 0 ${icon.width} ${icon.height}`,
+		"aria-hidden": "true",
+		...attrs
+	};
+	return `<svg${Object.entries(attributes).map(([key, value]) => ` ${key}="${value}"`).join("")}>${icon.body}</svg>`;
+}
+/** The curated icon's drawing body, for composed marks that share one svg. */
+function iconBody(name) {
+	return resolve(name).body;
+}
+//#endregion
+export { iconHtml as n, iconNode as r, iconBody as t };

package/dist/id-2ygNzPHF.mjs

@@ -0,0 +1,12 @@
+import { createUniqueId } from "solid-js";
+//#region src/internal/id.ts
+/** Generates an SSR-stable machine base id while honoring an explicit id. */
+function useElementId(scope, explicit) {
+	const generated = createUniqueId();
+	return () => {
+		const id = explicit?.();
+		return typeof id === "string" && id ? id : `bs-${scope}-${generated}`;
+	};
+}
+//#endregion
+export { useElementId as t };

package/dist/image-viewer-19s75Hz_.mjs

@@ -0,0 +1,228 @@
+import { t as defineFamily } from "./family-Cmd8HEyK.mjs";
+import { r as iconNode } from "./icon-DTqmJCd5.mjs";
+import { t as useElementId } from "./id-2ygNzPHF.mjs";
+import { Button } from "./components/button/index.mjs";
+import { n as useComponentMessages } from "./use-component-messages-C4SCVYjD.mjs";
+import { ButtonGroup } from "./components/button-group/index.mjs";
+import { Dialog as Dialog$1 } from "./components/dialog/index.mjs";
+import { createComponent, effect, insert, memo, mergeProps, setAttribute, setStyleProperty, spread, template } from "@solidjs/web";
+import { injectComponentStyle } from "@bysages/core/styling";
+import { Show, createEffect, createSignal, splitProps } from "solid-js";
+import { Portal } from "solid-js/web";
+import { Dialog } from "@ark-ui/solid/dialog";
+//#region src/components/image-viewer/preview.tsx
+var _tmpl$$1 = /* @__PURE__ */ template(`<span data-part=preview-label>`);
+var _tmpl$2$1 = /* @__PURE__ */ template(`<span data-scope=image-viewer data-part=preview-overlay aria-hidden=true><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+/** The default doorway is the curated preview icon; custom content keeps
+* that icon as its hover and focus affordance. */
+function ImageViewerPreview(props) {
+	injectComponentStyle("image-viewer");
+	const messages = useComponentMessages();
+	const [own, triggerProps, rest] = splitProps(props, ["label", "children"], ["data-part"]);
+	const parts = [triggerProps["data-part"], "preview"].filter(Boolean).join(" ");
+	const isIcon = () => own.children == null;
+	var _el$ = _tmpl$3();
+	spread(_el$, [
+		rest,
+		{
+			"data-scope": "image-viewer",
+			"data-part": parts
+		},
+		() => {
+			return isIcon() ? {
+				"data-empty": "true",
+				"aria-label": messages().imageViewer.preview
+			} : {};
+		}
+	], true);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.children;
+		},
+		get fallback() {
+			return iconNode("eye");
+		},
+		get children() {
+			return [memo(() => {
+				return own.children;
+			}), (() => {
+				var _el$2 = _tmpl$2$1();
+				var _el$3 = _el$2.firstChild;
+				var _el$5 = _el$3.nextSibling;
+				insert(_el$2, () => {
+					return iconNode("eye");
+				}, _el$3);
+				insert(_el$2, createComponent(Show, {
+					get when() {
+						return own.label;
+					},
+					get children() {
+						var _el$4 = _tmpl$$1();
+						insert(_el$4, () => {
+							return own.label;
+						});
+						return _el$4;
+					}
+				}), _el$5);
+				return _el$2;
+			})()];
+		}
+	}));
+	return _el$;
+}
+//#endregion
+//#region src/components/image-viewer/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<img data-scope=image-viewer data-part=viewport>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div data-scope=image-viewer data-part=toolbar>`);
+const MIN_SCALE = .5;
+const MAX_SCALE = 3;
+const SCALE_STEP = .25;
+/** The toolbar's icons, drawn from the house icon set. */
+const TOOL_ICONS = {
+	zoomIn: () => iconNode("zoom-in"),
+	zoomOut: () => iconNode("zoom-out"),
+	rotate: () => iconNode("rotate-cw"),
+	close: () => iconNode("x")
+};
+function ImageViewerImpl(props) {
+	injectComponentStyle("image-viewer");
+	const [own] = splitProps(props, [
+		"src",
+		"alt",
+		"width",
+		"height",
+		"open",
+		"zoomable",
+		"onOpenChange",
+		"children"
+	]);
+	const id = useElementId("image-viewer");
+	const messages = useComponentMessages();
+	const [localOpen, setLocalOpen] = createSignal(false);
+	const [scale, setScale] = createSignal(1);
+	const [rotation, setRotation] = createSignal(0);
+	const isOpen = () => own.open ?? localOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setLocalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (isOpen()) {
+			setScale(1);
+			setRotation(0);
+		}
+	});
+	function zoom(step) {
+		setScale(Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale() + step)));
+	}
+	function rotate() {
+		setRotation((rotation() + 90) % 360);
+	}
+	function toolButton(label, icon, onClick) {
+		return createComponent(Button, {
+			variant: "ghost",
+			square: true,
+			size: "lg",
+			"aria-label": label,
+			onClick,
+			get children() {
+				return icon();
+			}
+		});
+	}
+	return createComponent(Dialog.Root, {
+		get id() {
+			return id();
+		},
+		get open() {
+			return isOpen();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		lazyMount: true,
+		unmountOnExit: true,
+		get children() {
+			return [createComponent(Dialog.Trigger, {
+				asChild: () => own.children ?? createComponent(ImageViewerPreview, {}),
+				"data-scope": "image-viewer",
+				"data-part": "trigger"
+			}), createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, { class: "bs-image-viewer-backdrop" }), createComponent(Dialog.Positioner, {
+					class: "bs-image-viewer-positioner",
+					get children() {
+						return createComponent(Dialog.Content, {
+							class: "bs-image-viewer-content",
+							get "aria-label"() {
+								return own.alt || "Image preview";
+							},
+							onClick: (event) => {
+								if (event.target === event.currentTarget) setOpen(false);
+							},
+							get children() {
+								return [(() => {
+									var _el$ = _tmpl$();
+									effect(() => {
+										return {
+											e: own.src,
+											t: own.alt ?? "",
+											a: own.width,
+											o: own.height,
+											i: `scale(${scale()}) rotate(${rotation()}deg)`
+										};
+									}, ({ e, t, a, o, i }, _p$) => {
+										e !== _p$?.e && setAttribute(_el$, "src", e);
+										t !== _p$?.t && setAttribute(_el$, "alt", t);
+										a !== _p$?.a && setAttribute(_el$, "width", a);
+										o !== _p$?.o && setAttribute(_el$, "height", o);
+										i !== _p$?.i && setStyleProperty(_el$, "--bs-image-viewer-transform", i);
+									});
+									return _el$;
+								})(), (() => {
+									var _el$2 = _tmpl$2();
+									insert(_el$2, createComponent(ButtonGroup, { get children() {
+										return [
+											createComponent(Show, {
+												get when() {
+													return own.zoomable ?? true;
+												},
+												get children() {
+													return [memo(() => {
+														return toolButton(messages().imageViewer.zoomIn, TOOL_ICONS.zoomIn, () => zoom(SCALE_STEP));
+													}), memo(() => {
+														return toolButton(messages().imageViewer.zoomOut, TOOL_ICONS.zoomOut, () => zoom(-.25));
+													})];
+												}
+											}),
+											memo(() => {
+												return toolButton(messages().imageViewer.rotate, TOOL_ICONS.rotate, rotate);
+											}),
+											createComponent(Dialog.CloseTrigger, { asChild: (closeProps) => createComponent(Button, mergeProps(closeProps, {
+												variant: "ghost",
+												square: true,
+												size: "lg",
+												get "aria-label"() {
+													return messages().imageViewer.close;
+												},
+												get children() {
+													return TOOL_ICONS.close();
+												}
+											})) })
+										];
+									} }));
+									return _el$2;
+								})()];
+							}
+						});
+					}
+				})];
+			} })];
+		}
+	});
+}
+const viewerParts = {
+	...Dialog$1,
+	Preview: ImageViewerPreview
+};
+const ImageViewer = defineFamily(ImageViewerImpl, viewerParts);
+//#endregion
+export { ImageViewer as t };

package/dist/{index-B1xiJ5ki.d.mts → index-B1-quIrl.d.mts}

@@ -1787,7 +1787,9 @@ interface AnyFormApi {
 interface FormProps extends JSX.FormHTMLAttributes<HTMLFormElement> {
   form: AnyFormApi;
 }
-declare function Form(props: FormProps): JSX.Element;
+declare const Form: ((props: FormProps) => JSX.Element) & {
+  Root: (props: FormProps) => JSX.Element;
+};
 /**
  * The named slot in the grid: label, control, hint — and the engine's
  * errors for this name, shown through the same parts the standalone
@@ -1806,6 +1808,8 @@ interface FormFieldProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "child
   disabled?: boolean;
   children?: JSX.Element | ((field: any) => JSX.Element);
 }
-declare function FormField(props: FormFieldProps): JSX.Element;
+declare const FormField: ((props: FormFieldProps) => JSX.Element) & {
+  Root: (props: FormFieldProps) => JSX.Element;
+};
 //#endregion
 export { SolidFormApi as a, FormApi as c, FormProps as i, FieldApi as l, FormField as n, createField as o, FormFieldProps as r, createForm as s, Form as t };

package/dist/{index-DDX7x8aT.d.mts → index-DEArHiFI.d.mts}

@@ -1,3 +1,4 @@
+import { Popover } from "./components/popover/index.mjs";
 import { Accessor, JSX } from "solid-js";
 //#region src/components/mentions/use-mentions.d.ts
 interface UseMentionsOptions {
@@ -33,6 +34,9 @@ declare function useMentions(options: Accessor<UseMentionsOptions>, textarea: Ac
 };
 //#endregion
 //#region src/components/mentions/index.d.ts
+/** The Anchor's polymorphic wiring is div-typed at the API boundary; the
+ * textarea host supplies the concrete element type. */
+type MentionsAnchorProps = JSX.HTMLAttributes<HTMLTextAreaElement>;
 interface MentionEntry {
   label: string;
   value: string;
@@ -49,13 +53,17 @@ interface MentionsVesselProps {
   onInsert?: (entry: MentionEntry) => void;
   onActiveChange?: (index: number) => void;
   onOpenChange?: (open: boolean) => void;
+  /** The host's field, rendered with the popover Anchor's wiring. When
+   * absent, the vessel falls back to the `anchor` rectangle. */
+  children?: JSX.Element | ((anchorProps: MentionsAnchorProps) => JSX.Element);
 }
-/** The vessel: the candidates themselves as a floating card. The anchor
- * is virtual — a live rectangle off the host's field — so a host keeps
- * its own anatomy (the textarea rides where the host puts it) and the
- * vessel still points at the right place. Shares the detection state
- * with the host through `useMentions`. */
-declare function MentionsVessel(props: MentionsVesselProps): JSX.Element;
+/** The vessel: the candidates themselves as a floating card. A host can
+ * render its field through the Anchor; the rectangle fallback keeps the
+ * textarea in the host's own anatomy. Shares the detection state with
+ * the host through `useMentions`. */
+declare const MentionsVessel: ((props: MentionsVesselProps) => JSX.Element) & {
+  Root: (props: MentionsVesselProps) => JSX.Element;
+};
 interface MentionsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onInput"> {
   /** The candidates offered once the trigger character is typed. */
   items?: MentionEntry[];
@@ -90,6 +98,7 @@ interface MentionsProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onInpu
  * own field anatomy (the AI prompt input) skip this shell and wire
  * `useMentions` plus `MentionsVessel` themselves.
  */
-declare function Mentions(props: MentionsProps): JSX.Element;
+declare function MentionsImpl(props: MentionsProps): JSX.Element;
+declare const Mentions: typeof MentionsImpl & typeof Popover;
 //#endregion
 export { MentionsVesselProps as a, useMentions as c, MentionsVessel as i, Mentions as n, UseMentionsHandlers as o, MentionsProps as r, UseMentionsOptions as s, MentionEntry as t };