@bysages/solid 0.2.2 → 0.3.0

package/dist/components/command/index.d.mts

@@ -0,0 +1,43 @@
+//#region src/components/command/index.d.ts
+export interface CommandEntry {
+  label: string;
+  value: string;
+  /** Entries sharing a group are listed under one heading. */
+  group?: string;
+  /** A short affordance note, set as a keycap at the row's end. */
+  hint?: string;
+}
+export interface CommandProps {
+  /** The commands on offer, grouped as they arrive. */
+  items?: CommandEntry[];
+  placeholder?: string;
+  /** Whether the palette is up. Supply it to control the palette;
+   * changes are reported through `onOpenChange`. */
+  open?: boolean;
+  /** Whether the shell narrows `items` as the reader types. Turn it off
+   * when the caller owns the searching — a ranked engine or a remote
+   * source — and hands down the already-narrowed list. */
+  autoFilter?: boolean;
+  /** The field's text under the caller's control; changes are reported
+   * through `onInputValueChange`. */
+  inputValue?: string;
+  /** What the list whispers when nothing matches. */
+  emptyText?: string;
+  /** Called with the chosen entry's `value`; the palette closes after. */
+  onSelect?: (value: string) => void;
+  /** The palette's openness changed. */
+  onOpenChange?: (open: boolean) => void;
+  /** The field's text changed. */
+  onInputValueChange?: (value: string) => void;
+}
+/**
+ * The command palette: a modal sheet at the top of the page carrying a
+ * search field over the caller's commands, grouped as a ledger with a
+ * keycap hint at each row. The shell is the dialog machinery — scrim,
+ * focus trap, Escape — and the searching is the combobox machinery
+ * driving our own list: the vessel and the list live inside the sheet,
+ * so the combobox renders no separate popup and the machine's content
+ * grafts onto the sheet's list.
+ */
+export declare function Command(props: CommandProps): import("solid-js").JSX.Element;
+//#endregion

package/dist/components/command/index.mjs

@@ -0,0 +1,253 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { For, Show, createEffect, createSignal, splitProps } from "solid-js";
+import { useListCollection } from "@ark-ui/solid/collection";
+import { Combobox } from "@ark-ui/solid/combobox";
+import { Portal } from "solid-js/web";
+import { Dialog } from "@ark-ui/solid/dialog";
+//#region src/components/command/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<span data-scope=command data-part=item-hint>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<div><!><!>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<span>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<input>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<div data-scope=command data-part=empty>`);
+/** A command row: the machine's item grafted onto a vessel of our own,
+* the label riding the machine's item text. */
+function Row(props) {
+	return createComponent(Combobox.Item, {
+		get item() {
+			return props.entry.value;
+		},
+		asChild: (itemProps) => (() => {
+			var _el$ = _tmpl$2();
+			var _el$2 = _el$.firstChild;
+			var _el$4 = _el$2.nextSibling;
+			spread(_el$, [itemProps, {
+				"data-scope": "command",
+				"data-part": "item"
+			}], true);
+			insert(_el$, createComponent(Combobox.ItemText, { asChild: (textProps) => (() => {
+				var _el$5 = _tmpl$3();
+				spread(_el$5, [textProps, {
+					"data-scope": "command",
+					"data-part": "item-label"
+				}], true);
+				insert(_el$5, () => {
+					return props.entry.label;
+				});
+				return _el$5;
+			})() }), _el$2);
+			insert(_el$, createComponent(Show, {
+				get when() {
+					return props.entry.hint;
+				},
+				get children() {
+					var _el$3 = _tmpl$();
+					insert(_el$3, () => {
+						return props.entry.hint;
+					});
+					return _el$3;
+				}
+			}), _el$4);
+			return _el$;
+		})()
+	});
+}
+/**
+* The command palette: a modal sheet at the top of the page carrying a
+* search field over the caller's commands, grouped as a ledger with a
+* keycap hint at each row. The shell is the dialog machinery — scrim,
+* focus trap, Escape — and the searching is the combobox machinery
+* driving our own list: the vessel and the list live inside the sheet,
+* so the combobox renders no separate popup and the machine's content
+* grafts onto the sheet's list.
+*/
+function Command(props) {
+	injectComponentStyle("command");
+	injectComponentStyle("dialog");
+	const [own, rest] = splitProps(props, [
+		"items",
+		"placeholder",
+		"open",
+		"autoFilter",
+		"inputValue",
+		"emptyText",
+		"onSelect",
+		"onOpenChange",
+		"onInputValueChange"
+	]);
+	const [internalOpen, setInternalOpen] = createSignal(false);
+	const [listOpen, setListOpen] = createSignal(true);
+	let fieldText = "";
+	const { collection, set, filter } = useListCollection({
+		initialItems: (own.items ?? []).map((entry) => entry.value),
+		filter: (value, input) => {
+			const entry = (own.items ?? []).find((candidate) => candidate.value === value);
+			if (!entry) return false;
+			const query = input.toLowerCase();
+			return entry.label.toLowerCase().includes(query) || value.toLowerCase().includes(query);
+		}
+	});
+	createEffect(() => {
+		set((own.items ?? []).map((entry) => entry.value));
+		if (own.autoFilter ?? true) filter(fieldText);
+	});
+	const open = () => own.open ?? internalOpen();
+	const setOpen = (value) => {
+		if (own.open === void 0) setInternalOpen(value);
+		own.onOpenChange?.(value);
+	};
+	createEffect(() => {
+		if (open()) setListOpen(true);
+	});
+	const sections = () => {
+		const available = new Set(collection().items);
+		const groups = /* @__PURE__ */ new Map();
+		for (const entry of own.items ?? []) {
+			if (!available.has(entry.value)) continue;
+			const key = entry.group ?? "";
+			if (!groups.has(key)) groups.set(key, []);
+			groups.get(key).push(entry);
+		}
+		return Array.from(groups, ([group, entries]) => ({
+			group,
+			entries
+		}));
+	};
+	return createComponent(Dialog.Root, mergeProps(rest, {
+		get open() {
+			return open();
+		},
+		onOpenChange: (details) => setOpen(details.open),
+		get children() {
+			return createComponent(Portal, { get children() {
+				return [createComponent(Dialog.Backdrop, {}), createComponent(Dialog.Positioner, { asChild: (positionerProps) => (() => {
+					var _el$6 = _tmpl$4();
+					spread(_el$6, [positionerProps, {
+						"data-scope": "command",
+						"data-part": "positioner"
+					}], true);
+					insert(_el$6, createComponent(Dialog.Content, { asChild: (contentProps) => (() => {
+						var _el$7 = _tmpl$4();
+						spread(_el$7, [contentProps, {
+							"data-scope": "command",
+							"data-part": "content"
+						}], true);
+						insert(_el$7, createComponent(Combobox.Root, {
+							get collection() {
+								return collection();
+							},
+							get inputValue() {
+								return own.inputValue;
+							},
+							get open() {
+								return listOpen();
+							},
+							onOpenChange: (details) => setListOpen(details.open),
+							inputBehavior: "autohighlight",
+							loopFocus: true,
+							onInputValueChange: (details) => {
+								fieldText = details.inputValue;
+								if (own.autoFilter ?? true) filter(details.inputValue);
+								own.onInputValueChange?.(details.inputValue);
+							},
+							onValueChange: (details) => {
+								const [first] = details.value;
+								if (first == null) return;
+								own.onSelect?.(first);
+								setOpen(false);
+							},
+							get children() {
+								return [createComponent(Combobox.Input, { asChild: (inputProps) => (() => {
+									var _el$8 = _tmpl$5();
+									spread(_el$8, [inputProps, {
+										type: "text",
+										get placeholder() {
+											return own.placeholder;
+										},
+										"data-scope": "command",
+										"data-part": "input"
+									}], false);
+									return _el$8;
+								})() }), createComponent(Combobox.Content, { asChild: (listProps) => (() => {
+									var _el$9 = _tmpl$2();
+									var _el$10 = _el$9.firstChild;
+									var _el$12 = _el$10.nextSibling;
+									spread(_el$9, [listProps, {
+										"data-scope": "command",
+										"data-part": "list"
+									}], true);
+									insert(_el$9, createComponent(For, {
+										get each() {
+											return sections();
+										},
+										children: (section) => createComponent(Show, {
+											get when() {
+												return section.group !== "";
+											},
+											get fallback() {
+												return createComponent(For, {
+													get each() {
+														return section.entries;
+													},
+													children: (entry) => createComponent(Row, { entry })
+												});
+											},
+											get children() {
+												return createComponent(Combobox.ItemGroup, { asChild: (groupProps) => (() => {
+													var _el$13 = _tmpl$2();
+													var _el$14 = _el$13.firstChild;
+													var _el$15 = _el$14.nextSibling;
+													spread(_el$13, [groupProps, {
+														"data-scope": "command",
+														"data-part": "group"
+													}], true);
+													insert(_el$13, createComponent(Combobox.ItemGroupLabel, { asChild: (labelProps) => (() => {
+														var _el$16 = _tmpl$4();
+														spread(_el$16, [labelProps, {
+															"data-scope": "command",
+															"data-part": "group-label"
+														}], true);
+														insert(_el$16, () => {
+															return section.group;
+														});
+														return _el$16;
+													})() }), _el$14);
+													insert(_el$13, createComponent(For, {
+														get each() {
+															return section.entries;
+														},
+														children: (entry) => createComponent(Row, { entry })
+													}), _el$15);
+													return _el$13;
+												})() });
+											}
+										})
+									}), _el$10);
+									insert(_el$9, createComponent(Show, {
+										get when() {
+											return sections().length === 0;
+										},
+										get children() {
+											var _el$11 = _tmpl$6();
+											insert(_el$11, () => {
+												return own.emptyText ?? "No matching commands";
+											});
+											return _el$11;
+										}
+									}), _el$12);
+									return _el$9;
+								})() })];
+							}
+						}));
+						return _el$7;
+					})() }));
+					return _el$6;
+				})() })];
+			} });
+		}
+	}));
+}
+//#endregion
+export { Command };

package/dist/components/comment/index.d.mts

@@ -0,0 +1,17 @@
+import { JSX } from "solid-js";
+//#region src/components/comment/index.d.ts
+export interface CommentProps extends JSX.HTMLAttributes<HTMLElement> {
+  author?: string;
+  datetime?: string;
+  /** The portrait hanging to the left of the body. */
+  avatar?: JSX.Element;
+  /** The row of answers beneath the ink. */
+  actions?: JSX.Element;
+}
+/**
+ * A voice on the record: the portrait hangs left (the `avatar` prop),
+ * the body carries the byline from `author` and `datetime`, the ink is
+ * the children, and `actions` is the row of answers.
+ */
+export declare function Comment(props: CommentProps): JSX.Element;
+//#endregion

package/dist/components/comment/index.mjs

@@ -0,0 +1,101 @@
+import { injectComponentStyle } from "@bysages/core";
+import { createComponent, effect, insert, setAttribute, spread, template } from "@solidjs/web";
+import { Show, splitProps } from "solid-js";
+//#region src/components/comment/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div data-scope=comment data-part=avatar>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-scope=comment data-part=author>`);
+var _tmpl$3 = /* @__PURE__ */ template(`<time data-scope=comment data-part=datetime>`);
+var _tmpl$4 = /* @__PURE__ */ template(`<header data-scope=comment data-part=header><!><!>`);
+var _tmpl$5 = /* @__PURE__ */ template(`<div data-scope=comment data-part=actions>`);
+var _tmpl$6 = /* @__PURE__ */ template(`<article><div data-scope=comment data-part=body><div data-scope=comment data-part=content></div><!>`);
+/**
+* A voice on the record: the portrait hangs left (the `avatar` prop),
+* the body carries the byline from `author` and `datetime`, the ink is
+* the children, and `actions` is the row of answers.
+*/
+function Comment(props) {
+	injectComponentStyle("comment");
+	const [own, rest] = splitProps(props, [
+		"author",
+		"datetime",
+		"avatar",
+		"actions",
+		"children"
+	]);
+	var _el$ = _tmpl$6();
+	var _el$3 = _el$.firstChild;
+	var _el$9 = _el$3.firstChild;
+	var _el$11 = _el$9.nextSibling;
+	spread(_el$, [rest, {
+		"data-scope": "comment",
+		"data-part": "root"
+	}], true);
+	insert(_el$, createComponent(Show, {
+		get when() {
+			return own.avatar;
+		},
+		get children() {
+			var _el$2 = _tmpl$();
+			insert(_el$2, () => {
+				return own.avatar;
+			});
+			return _el$2;
+		}
+	}), _el$3);
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return own.author || own.datetime;
+		},
+		get children() {
+			var _el$4 = _tmpl$4();
+			var _el$6 = _el$4.firstChild;
+			var _el$8 = _el$6.nextSibling;
+			insert(_el$4, createComponent(Show, {
+				get when() {
+					return own.author;
+				},
+				get children() {
+					var _el$5 = _tmpl$2();
+					insert(_el$5, () => {
+						return own.author;
+					});
+					return _el$5;
+				}
+			}), _el$6);
+			insert(_el$4, createComponent(Show, {
+				get when() {
+					return own.datetime;
+				},
+				get children() {
+					var _el$7 = _tmpl$3();
+					insert(_el$7, () => {
+						return own.datetime;
+					});
+					effect(() => own.datetime, (_v$) => {
+						setAttribute(_el$7, "datetime", _v$);
+					});
+					return _el$7;
+				}
+			}), _el$8);
+			return _el$4;
+		}
+	}), _el$9);
+	insert(_el$9, () => {
+		return own.children;
+	});
+	insert(_el$3, createComponent(Show, {
+		get when() {
+			return own.actions;
+		},
+		get children() {
+			var _el$10 = _tmpl$5();
+			insert(_el$10, () => {
+				return own.actions;
+			});
+			return _el$10;
+		}
+	}), _el$11);
+	return _el$;
+}
+//#endregion
+export { Comment };

package/dist/components/config-provider/index.d.mts

@@ -0,0 +1,48 @@
+import { ThemeScene } from "@bysages/core";
+import { JSX } from "solid-js";
+//#region src/components/config-provider/index.d.ts
+/** The four density tiers the token layer's `[data-density]` selectors
+ * name — whitespace and control heights compress, readability never
+ * does. */
+export type ConfigDensity = "compact" | "default" | "comfortable" | "spacious";
+/** The named scene registers the token layer's `[data-scene]` selectors
+ * retune — "auto" is the engine's own resolution and stays off the
+ * subtree vocabulary. */
+export type ConfigScene = Exclude<ThemeScene, "auto">;
+/** The configuration a provider lays over its subtree. Every field is
+ * optional: an absent field changes nothing, and the page's own
+ * attributes keep ruling. */
+export interface ConfigContext {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  /** A mineral pigment theme (qinghua, celadon, zhusha, …) landing as
+   * `[data-accent]` on the host element. */
+  accent?: string;
+  /** Writing direction, landing as the native `dir` attribute. */
+  dir?: "ltr" | "rtl";
+  /** BCP-47 locale, landing as the native `lang` attribute. */
+  locale?: string;
+}
+/** Solid context for the provider's snapshot — a custom part reads it
+ * with `useContext(ConfigContextKey)`. */
+export declare const ConfigContextKey: import("solid-js").Context<() => ConfigContext>;
+/** The nearest provider's snapshot, or an empty one when no provider
+ * wraps the caller — the hook the date and format families will consume
+ * to localize their output. */
+export declare function useConfig(): () => ConfigContext;
+export interface ConfigProviderProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  density?: ConfigDensity;
+  scene?: ConfigScene;
+  accent?: string;
+  dir?: "ltr" | "rtl";
+  locale?: string;
+}
+/**
+ * The declarative host for global configuration: one element that both
+ * carries the token layer's attributes — `[data-density]` and
+ * `[data-accent]` fire on any element — and provides the same values to
+ * descendants through `useConfig`, so interactive behavior (formatting,
+ * messages) and visual theming stay one decision.
+ */
+export declare function ConfigProvider(props: ConfigProviderProps): JSX.Element;
+//#endregion

package/dist/components/config-provider/index.mjs

@@ -0,0 +1,67 @@
+import { createComponent, insert, spread, template } from "@solidjs/web";
+import { createContext, splitProps, useContext } from "solid-js";
+//#region src/components/config-provider/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+/** Solid context for the provider's snapshot — a custom part reads it
+* with `useContext(ConfigContextKey)`. */
+const ConfigContextKey = createContext(() => ({}));
+/** The nearest provider's snapshot, or an empty one when no provider
+* wraps the caller — the hook the date and format families will consume
+* to localize their output. */
+function useConfig() {
+	return useContext(ConfigContextKey);
+}
+/**
+* The declarative host for global configuration: one element that both
+* carries the token layer's attributes — `[data-density]` and
+* `[data-accent]` fire on any element — and provides the same values to
+* descendants through `useConfig`, so interactive behavior (formatting,
+* messages) and visual theming stay one decision.
+*/
+function ConfigProvider(props) {
+	const [own, rest] = splitProps(props, [
+		"density",
+		"scene",
+		"accent",
+		"dir",
+		"locale",
+		"children"
+	]);
+	return createComponent(ConfigContextKey.Provider, {
+		value: () => ({
+			density: own.density,
+			scene: own.scene,
+			accent: own.accent,
+			dir: own.dir,
+			locale: own.locale
+		}),
+		get children() {
+			var _el$ = _tmpl$();
+			spread(_el$, [rest, {
+				"data-scope": "config-provider",
+				"data-part": "root",
+				get "data-density"() {
+					return own.density;
+				},
+				get "data-scene"() {
+					return own.scene;
+				},
+				get "data-accent"() {
+					return own.accent;
+				},
+				get dir() {
+					return own.dir;
+				},
+				get lang() {
+					return own.locale;
+				}
+			}], true);
+			insert(_el$, () => {
+				return own.children;
+			});
+			return _el$;
+		}
+	});
+}
+//#endregion
+export { ConfigContextKey, ConfigProvider, useConfig };

package/dist/components/container/index.d.mts

@@ -0,0 +1,13 @@
+import { JSX } from "solid-js";
+//#region src/components/container/index.d.ts
+/** The reading frame: content held to a measure and centered on the
+ * page. The sizes name typographic measures, not breakpoints — the page
+ * owns its edges, the container only owns how long a line of ink runs. */
+export interface ContainerProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  size?: "narrow" | "readable" | "wide" | "full";
+  /** Keep the ink off the page edges when the viewport runs narrower
+   * than the measure. */
+  padding?: boolean;
+}
+export declare function Container(props: ContainerProps): JSX.Element;
+//#endregion

package/dist/components/container/index.mjs

@@ -0,0 +1,23 @@
+import { injectComponentStyle } from "@bysages/core";
+import { spread, template } from "@solidjs/web";
+import { splitProps } from "solid-js";
+//#region src/components/container/index.tsx
+var _tmpl$ = /* @__PURE__ */ template(`<div>`);
+function Container(props) {
+	injectComponentStyle("container");
+	const [own, rest] = splitProps(props, ["size", "padding"]);
+	var _el$ = _tmpl$();
+	spread(_el$, [rest, {
+		"data-scope": "container",
+		"data-part": "root",
+		get "data-size"() {
+			return own.size ?? "readable";
+		},
+		get "data-padding"() {
+			return own.padding === false ? void 0 : "";
+		}
+	}], false);
+	return _el$;
+}
+//#endregion
+export { Container };

package/dist/components/data-view/index.d.mts

@@ -0,0 +1,18 @@
+import { JSX } from "solid-js";
+//#region src/components/data-view/index.d.ts
+export interface DataViewProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  items: unknown[];
+  /** Ledger rows or a lattice of cards. */
+  layout?: "list" | "grid";
+  /** Records per page; leave unset to show everything at once. */
+  pageSize?: number;
+  /** Renders one record; the view lays the returned nodes out. */
+  renderItem?: (item: unknown, index: number) => JSX.Element;
+  header?: JSX.Element;
+}
+/** One vessel, two layouts: the caller renders each record through
+ * renderItem, the view lays the records out as a ledger or a lattice
+ * and — when a page size is given — pages them with the pagination
+ * family's own parts rather than a second implementation. */
+export declare function DataView(props: DataViewProps): JSX.Element;
+//#endregion