@techfides/ui-library-core 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 TechFides
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,10 @@
+# @techfides/ui-library-core
+
+The framework-free logic of the TechFides UI library: the words every component says on its own
+behalf and the languages that translate them, the number tally that counts a figure up, the
+chart option builders, field state, and the DOM maths shared by every binding.
+
+You do not install this directly. `@techfides/ui-library-vue` depends on it and brings it along;
+a future React binding will do the same, so the two bindings cannot disagree on behaviour.
+
+ESM only, Node 24 or newer. MIT.

package/dist/aria.d.ts

@@ -0,0 +1,4 @@
+//#region src/aria.d.ts
+declare const regionOf: (label: string | undefined) => Record<string, string>;
+//#endregion
+export { regionOf };

package/dist/aria.js

@@ -0,0 +1,12 @@
+//#region src/aria.ts
+const EMPTY = "";
+const regionOf = (label) => {
+	const spoken = label ?? EMPTY;
+	if (spoken === EMPTY) return {};
+	return {
+		"aria-label": spoken,
+		role: "region"
+	};
+};
+//#endregion
+export { regionOf };

package/dist/charts/animation.js

@@ -0,0 +1,12 @@
+//#region src/charts/animation.ts
+const CHART_EASING = "cubicOut";
+const chartAnimation = (durationMs) => ({
+	animation: true,
+	animationDuration: durationMs,
+	animationDurationUpdate: durationMs,
+	animationEasing: CHART_EASING,
+	animationEasingUpdate: CHART_EASING
+});
+const chartStagger = (stepMs) => (index) => index * stepMs;
+//#endregion
+export { CHART_EASING, chartAnimation, chartStagger };

package/dist/charts/bars.d.ts

@@ -0,0 +1,21 @@
+import { EChartsOption } from "echarts";
+//#region src/charts/bars.d.ts
+interface BarsAccent {
+  hi: string;
+  surface: string;
+}
+interface BarsPoint {
+  label: string;
+  value: number | null;
+}
+interface BarsOptionInput {
+  accent: BarsAccent;
+  durationMs: number;
+  labelColor: string;
+  radius: number;
+  stateDurationMs: number;
+  values: readonly BarsPoint[];
+}
+declare const barsOption: (input: BarsOptionInput) => EChartsOption;
+//#endregion
+export { type BarsAccent, type BarsOptionInput, type BarsPoint, barsOption };

package/dist/charts/bars.js

@@ -0,0 +1,59 @@
+import { CHART_EASING, chartAnimation, chartStagger } from "./animation.js";
+import { verticalGradient } from "./paint.js";
+import { chartTooltip, formatCallbackValue } from "./tooltip.js";
+//#region src/charts/bars.ts
+const GRID = {
+	bottom: 22,
+	left: 4,
+	right: 4,
+	top: 8
+};
+const BAR_CATEGORY_GAP = "35%";
+const LABEL_FONT_SIZE = 11;
+const STAGGER_MS = 40;
+const EMPTY_LENGTH = 0;
+const FIRST_INDEX = 0;
+const barPointFormatter = (params) => {
+	const point = params[FIRST_INDEX];
+	if (!point) return "";
+	return `${point.name}: ${formatCallbackValue(point.value)}`;
+};
+const barsOption = (input) => {
+	if (input.values.length === EMPTY_LENGTH) return { series: [] };
+	return {
+		...chartAnimation(input.durationMs),
+		grid: GRID,
+		series: [{
+			animationDelay: chartStagger(STAGGER_MS),
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: input.values.map((point) => point.value),
+			emphasis: { disabled: true },
+			itemStyle: {
+				borderRadius: input.radius,
+				color: verticalGradient(input.accent.hi, input.accent.surface)
+			},
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		}],
+		tooltip: chartTooltip(barPointFormatter),
+		xAxis: {
+			axisLabel: {
+				color: input.labelColor,
+				fontSize: LABEL_FONT_SIZE
+			},
+			axisLine: { show: false },
+			axisTick: { show: false },
+			data: input.values.map((point) => point.label),
+			type: "category"
+		},
+		yAxis: {
+			show: false,
+			type: "value"
+		}
+	};
+};
+//#endregion
+export { barsOption };

package/dist/charts/groupedBars.d.ts

@@ -0,0 +1,19 @@
+import { EChartsOption } from "echarts";
+//#region src/charts/groupedBars.d.ts
+interface GroupedBarsSeries {
+  color: string;
+  name: string;
+  values: readonly (number | null)[];
+}
+interface GroupedBarsOptionInput {
+  categories: readonly string[];
+  durationMs: number;
+  labelColor: string;
+  radius: number;
+  series: readonly GroupedBarsSeries[];
+  stateDurationMs: number;
+  valueFormat?: (value: number) => string;
+}
+declare const groupedBarsOption: (input: GroupedBarsOptionInput) => EChartsOption;
+//#endregion
+export { type GroupedBarsOptionInput, type GroupedBarsSeries, groupedBarsOption };

package/dist/charts/groupedBars.js

@@ -0,0 +1,80 @@
+import { CHART_EASING, chartAnimation } from "./animation.js";
+import { chartTooltip, formatCallbackValue } from "./tooltip.js";
+//#region src/charts/groupedBars.ts
+const GRID = {
+	bottom: 22,
+	left: 4,
+	right: 4,
+	top: 8
+};
+const BAR_CATEGORY_GAP = "35%";
+const LABEL_FONT_SIZE = 11;
+const EMPTY_LENGTH = 0;
+const FIRST_INDEX = 0;
+const DOT_CLASS = "inline-block size-2 flex-none rounded-tf-pill";
+const ROW_CLASS = "flex items-center justify-between gap-3";
+const NAME_CLASS = "flex items-center gap-1.5";
+const VALUE_CLASS = "font-semibold tabular-nums";
+const formatValue = (value, valueFormat) => {
+	if (typeof value === "number") return valueFormat(value);
+	return formatCallbackValue(value);
+};
+const NO_COLOR = "";
+const colorOf = (point) => {
+	if (typeof point.color === "string") return point.color;
+	return NO_COLOR;
+};
+const groupedBarRow = (point, valueFormat) => {
+	const color = colorOf(point);
+	const name = formatCallbackValue(point.seriesName);
+	return `<div class="${ROW_CLASS}"><span class="${NAME_CLASS}"><span aria-hidden="true" class="${DOT_CLASS}" style="background:${color}"></span>${name}</span><span class="${VALUE_CLASS}">${formatValue(point.value, valueFormat)}</span></div>`;
+};
+const groupedBarsFormatter = (valueFormat) => (params) => {
+	const first = params[FIRST_INDEX];
+	if (!first) return "";
+	return `<div class="flex flex-col gap-1"><span class="font-semibold">${formatCallbackValue(first.name)}</span>${params.map((point) => groupedBarRow(point, valueFormat)).join("")}</div>`;
+};
+const IDENTITY_FORMAT = String;
+const AXIS_SHADOW_COLOR = "rgb(255 255 255 / 9%)";
+const groupedBarsOption = (input) => {
+	if (input.categories.length === EMPTY_LENGTH) return { series: [] };
+	const valueFormat = input.valueFormat ?? IDENTITY_FORMAT;
+	return {
+		...chartAnimation(input.durationMs),
+		grid: GRID,
+		series: input.series.map((series) => ({
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: [...series.values],
+			itemStyle: {
+				borderRadius: input.radius,
+				color: series.color
+			},
+			name: series.name,
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		})),
+		tooltip: chartTooltip(groupedBarsFormatter(valueFormat), "axis", {
+			shadowStyle: { color: AXIS_SHADOW_COLOR },
+			type: "shadow"
+		}),
+		xAxis: {
+			axisLabel: {
+				color: input.labelColor,
+				fontSize: LABEL_FONT_SIZE
+			},
+			axisLine: { show: false },
+			axisTick: { show: false },
+			data: [...input.categories],
+			type: "category"
+		},
+		yAxis: {
+			show: false,
+			type: "value"
+		}
+	};
+};
+//#endregion
+export { groupedBarsOption };

package/dist/charts/paint.js

@@ -0,0 +1,24 @@
+//#region src/charts/paint.ts
+const TOP = 0;
+const BOTTOM = 1;
+const LEFT = 0;
+const START = 0;
+const END = 1;
+const verticalGradient = (from, to) => ({
+	colorStops: [{
+		color: from,
+		offset: START
+	}, {
+		color: to,
+		offset: END
+	}],
+	global: false,
+	type: "linear",
+	x: LEFT,
+	x2: LEFT,
+	y: TOP,
+	y2: BOTTOM
+});
+const TRANSPARENT = "rgba(0, 0, 0, 0)";
+//#endregion
+export { TRANSPARENT, verticalGradient };

package/dist/charts/spark.d.ts

@@ -0,0 +1,16 @@
+import { BarsAccent } from "./bars.js";
+import { EChartsOption } from "echarts";
+import { StatSparkShape } from "@techfides/ui-library-design";
+//#region src/charts/spark.d.ts
+type SparkAccent = BarsAccent;
+interface SparkOptionInput {
+  accent: SparkAccent;
+  durationMs: number;
+  stateDurationMs: number;
+  radius: number;
+  shape: StatSparkShape;
+  values: readonly number[];
+}
+declare const sparkOption: (input: SparkOptionInput) => EChartsOption;
+//#endregion
+export { type SparkAccent, type SparkOptionInput, sparkOption };

package/dist/charts/spark.js

@@ -0,0 +1,157 @@
+import { CHART_EASING, chartAnimation, chartStagger } from "./animation.js";
+import { TRANSPARENT, verticalGradient } from "./paint.js";
+import { chartTooltip } from "./tooltip.js";
+//#region src/charts/spark.ts
+const LINE_WIDTH = 2;
+const MARKER_SIZE = 5;
+const MIN_SPAN = 1;
+const EMPTY_LENGTH = 0;
+const LAST_INDEX_OFFSET = 1;
+const NO_GAP = 0;
+const LINE_BOUNDARY_GAP = [NO_GAP, NO_GAP];
+const LINE_GRID = {
+	bottom: 4,
+	left: 4,
+	right: 4,
+	top: 4
+};
+const BAR_GRID = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const BAR_CATEGORY_GAP = "25%";
+const MIN_HEIGHT_RATIO = .15;
+const BAR_AXIS_MAX = 1;
+const BAR_AXIS_MIN = 0;
+const AREA_OPACITY = .32;
+const STAGGER_MS = 30;
+const lastIndexOf = (values) => values.length - LAST_INDEX_OFFSET;
+const NO_VALUE = 0;
+const FIRST_INDEX = 0;
+const pointFormatter = (values) => (params) => {
+	const point = params[FIRST_INDEX];
+	if (!point || typeof point.dataIndex !== "number") return String(NO_VALUE);
+	return String(values[point.dataIndex] ?? NO_VALUE);
+};
+const yRange = (values) => {
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	if (max === min) return {
+		max: min + MIN_SPAN,
+		min
+	};
+	return {
+		max,
+		min
+	};
+};
+const lineOption = (input) => {
+	const last = lastIndexOf(input.values);
+	const range = yRange(input.values);
+	const lastValue = input.values[last] ?? range.min;
+	return {
+		...chartAnimation(input.durationMs),
+		grid: LINE_GRID,
+		series: [{
+			areaStyle: {
+				color: verticalGradient(input.accent.hi, TRANSPARENT),
+				opacity: AREA_OPACITY
+			},
+			data: input.values.map((value, index) => [index, value]),
+			emphasis: { disabled: true },
+			lineStyle: {
+				cap: "round",
+				color: input.accent.surface,
+				join: "round",
+				width: LINE_WIDTH
+			},
+			markPoint: {
+				animation: true,
+				data: [{
+					coord: [last, lastValue],
+					name: ""
+				}],
+				itemStyle: { color: input.accent.hi },
+				label: { show: false },
+				symbol: "circle",
+				symbolSize: MARKER_SIZE
+			},
+			showSymbol: false,
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			symbolSize: MARKER_SIZE,
+			type: "line"
+		}],
+		tooltip: chartTooltip(pointFormatter(input.values), "axis"),
+		xAxis: {
+			boundaryGap: LINE_BOUNDARY_GAP,
+			max: last,
+			min: 0,
+			show: false,
+			type: "value"
+		},
+		yAxis: {
+			max: range.max,
+			min: range.min,
+			show: false,
+			type: "value"
+		}
+	};
+};
+const barHeightRatio = (value, range) => {
+	const ratio = (value - range.min) / (range.max - range.min);
+	return Math.max(ratio, MIN_HEIGHT_RATIO);
+};
+const barOption = (input) => {
+	const last = lastIndexOf(input.values);
+	const range = yRange(input.values);
+	return {
+		...chartAnimation(input.durationMs),
+		grid: BAR_GRID,
+		series: [{
+			animationDelay: chartStagger(STAGGER_MS),
+			barCategoryGap: BAR_CATEGORY_GAP,
+			data: input.values.map((value, index) => {
+				const height = barHeightRatio(value, range);
+				if (index === last) return {
+					itemStyle: { color: input.accent.hi },
+					value: height
+				};
+				return height;
+			}),
+			emphasis: { disabled: true },
+			itemStyle: {
+				borderRadius: input.radius,
+				color: verticalGradient(input.accent.hi, input.accent.surface)
+			},
+			stateAnimation: {
+				duration: input.stateDurationMs,
+				easing: CHART_EASING
+			},
+			type: "bar"
+		}],
+		tooltip: chartTooltip(pointFormatter(input.values)),
+		xAxis: {
+			data: input.values.map((_value, index) => String(index)),
+			show: false,
+			type: "category"
+		},
+		yAxis: {
+			max: BAR_AXIS_MAX,
+			min: BAR_AXIS_MIN,
+			show: false,
+			type: "value"
+		}
+	};
+};
+const sparkOption = (input) => {
+	if (input.values.length === EMPTY_LENGTH) return { series: [] };
+	if (input.shape === "bars") return barOption(input);
+	return lineOption(input);
+};
+//#endregion
+export { sparkOption };

package/dist/charts/tooltip.js

@@ -0,0 +1,39 @@
+//#region src/charts/tooltip.ts
+const TOOLTIP_CLASS = ["tf-edge-sweep tf-edge-plain rounded-tf-inline bg-tf-glass px-2 py-1", "font-tf-body text-tf-caption-sm text-tf-fg shadow-tf-float backdrop-blur-tf-glass"].join(" ");
+const NO_CHROME_CSS = "box-shadow: none; pointer-events: none;";
+const NO_CONTENT = "";
+const SNAP_TO_CURSOR = 0;
+const EMPTY_LENGTH = 0;
+const DEFAULT_AXIS_POINTER = { type: "none" };
+const appendToBody = () => document.body;
+const formatCallbackValue = (value) => {
+	if (typeof value === "string" || typeof value === "number") return String(value);
+	return NO_CONTENT;
+};
+const asParams = (raw) => {
+	if (Array.isArray(raw)) return raw;
+	return [raw];
+};
+const chartTooltip = (formatter, trigger = "item", axisPointer = DEFAULT_AXIS_POINTER) => {
+	const base = {
+		appendTo: appendToBody,
+		backgroundColor: "transparent",
+		borderWidth: 0,
+		extraCssText: NO_CHROME_CSS,
+		formatter: (raw) => {
+			const params = asParams(raw);
+			if (params.length === EMPTY_LENGTH) return NO_CONTENT;
+			return `<div class="${TOOLTIP_CLASS}">${formatter(params)}</div>`;
+		},
+		padding: 0,
+		transitionDuration: SNAP_TO_CURSOR,
+		trigger
+	};
+	if (trigger === "axis") return {
+		...base,
+		axisPointer
+	};
+	return base;
+};
+//#endregion
+export { chartTooltip, formatCallbackValue };

package/dist/cookie.d.ts

@@ -0,0 +1,8 @@
+//#region src/cookie.d.ts
+declare const SIDEBAR_COOKIE = "tf-sidebar";
+declare const cookieValue: (name: string) => string;
+declare const rememberCookie: (name: string, value: string) => void;
+declare const sidebarCookieValue: (collapsed: boolean) => string;
+declare const sidebarCollapsedFrom: (value: string, fallback: boolean) => boolean;
+//#endregion
+export { SIDEBAR_COOKIE, cookieValue, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue };

package/dist/cookie.js

@@ -0,0 +1,31 @@
+//#region src/cookie.ts
+const PATH = "path=/";
+const SAME_SITE = "SameSite=Lax";
+const WEEK_SECONDS = 604800;
+const AFTER_NAME = 1;
+const SIDEBAR_COOKIE = "tf-sidebar";
+const NOTHING = "";
+const inBrowser = () => typeof document !== "undefined";
+const cookieValue = (name) => {
+	if (!inBrowser()) return NOTHING;
+	const found = document.cookie.split("; ").find((one) => one.startsWith(`${name}=`));
+	if (typeof found !== "string") return NOTHING;
+	return found.slice(name.length + AFTER_NAME);
+};
+const rememberCookie = (name, value) => {
+	if (!inBrowser()) return;
+	document.cookie = `${name}=${value}; ${PATH}; max-age=${String(WEEK_SECONDS)}; ${SAME_SITE}`;
+};
+const SIDEBAR_RAIL = "1";
+const SIDEBAR_OPEN = "0";
+const sidebarCookieValue = (collapsed) => {
+	if (collapsed) return SIDEBAR_RAIL;
+	return SIDEBAR_OPEN;
+};
+const sidebarCollapsedFrom = (value, fallback) => {
+	if (value === SIDEBAR_RAIL) return true;
+	if (value === SIDEBAR_OPEN) return false;
+	return fallback;
+};
+//#endregion
+export { SIDEBAR_COOKIE, cookieValue, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue };

package/dist/czech.d.ts

@@ -0,0 +1,5 @@
+import { Language } from "./words.js";
+//#region src/czech.d.ts
+declare const czech: Language;
+//#endregion
+export { czech };

package/dist/czech.js

@@ -0,0 +1,98 @@
+//#region src/czech.ts
+const SINGLE = 1;
+const FEW_FIRST = 2;
+const FEW_LAST = 4;
+const results = (count, written) => {
+	if (count === SINGLE) return "1 výsledek";
+	if (count >= FEW_FIRST && count <= FEW_LAST) return `${written} výsledky`;
+	return `${written} výsledků`;
+};
+const czech = {
+	locale: "cs-CZ",
+	words: {
+		datePicker: {
+			calendar: "Kalendář",
+			choose: (day) => `Vybrat ${day}`,
+			chosen: (day) => `Vybráno, ${day}`,
+			clear: "Smazat data",
+			close: "Zavřít kalendář",
+			nextDecade: "Další dekáda",
+			nextMonth: "Další měsíc",
+			nextYear: "Další rok",
+			open: "Otevřít kalendář",
+			patternDay: "dd",
+			patternMonth: "mm",
+			patternYear: "rrrr",
+			pickMonth: "Vyberte měsíc",
+			pickYear: "Vyberte rok",
+			preset: (span) => `Vybrat ${span}`,
+			previousDecade: "Předchozí dekáda",
+			previousMonth: "Předchozí měsíc",
+			previousYear: "Předchozí rok",
+			rangeFrom: (day) => `Začít rozsah na ${day}`,
+			rangeTo: (day) => `Ukončit rozsah na ${day}`,
+			showDays: "Zobrazit dny",
+			showMonths: "Zobrazit měsíce",
+			showYears: "Zobrazit roky",
+			unavailable: (day) => `Nedostupné, ${day}`,
+			week: "Týd.",
+			weekNumber: (week) => `${week}. týden`
+		},
+		dialog: { close: "Zavřít" },
+		listbox: { empty: "Není z čeho vybírat" },
+		queue: { label: "Fronta" },
+		search: {
+			dismiss: "Esc zavře",
+			nothing: "Tomu nic neodpovídá",
+			results
+		},
+		select: { clear: "Zrušit výběr" },
+		sidebar: {
+			collapse: "Sbalit panel",
+			expand: "Rozbalit panel",
+			openMenu: "Otevřít menu"
+		},
+		stat: {
+			change: "Změna",
+			fell: "dolů",
+			rose: "nahoru"
+		},
+		table: {
+			actions: "Akce",
+			anything: "Cokoli",
+			clear: "Zrušit",
+			clearAll: "Zrušit filtry",
+			clearFilter: (column) => `Zrušit filtr na ${column}`,
+			clearSelection: "Zrušit označení",
+			done: "Hotovo",
+			emptyHint: "Až tu něco bude, uvidíte to zde.",
+			emptyTitle: "Zatím tu nic není",
+			expandRow: (row) => `Zobrazit více o řádku ${row}`,
+			filterBy: (column) => `Filtrovat ${column}`,
+			filterPick: (column) => `Vyberte z ${column}`,
+			filterRange: (column) => `Rozsah ${column}`,
+			filterSearch: (column) => `Hledat v ${column}`,
+			from: "Od",
+			nextPage: "Další stránka",
+			noRows: "Žádné řádky",
+			nothingHint: "Zrušte jednu z podmínek, nebo smažte hledání.",
+			nothingTitle: "Těmto filtrům nic neodpovídá",
+			pages: "Stránky",
+			previousPage: "Předchozí stránka",
+			rowsPerPage: "Řádků na stránku",
+			selectAll: "Označit řádky na této stránce",
+			selectRow: (row) => `Označit řádek ${row}`,
+			selected: (_count, written) => `${written} označeno`,
+			shown: (from, to, total) => `${from}–${to} z ${total}`,
+			sortAscending: (column) => `Řadit ${column} od nejmenšího`,
+			sortBy: (column) => `Řadit podle ${column}`,
+			sortClear: (column) => `Přestat řadit podle ${column}`,
+			sortDescending: (column) => `Řadit ${column} od největšího`,
+			to: "Do"
+		},
+		tail: { empty: "Žádné řádky logu" },
+		userMenu: { account: "účet" }
+	}
+};
+//#endregion
+export { czech };

package/dist/field.d.ts

@@ -0,0 +1,11 @@
+//#region src/field.d.ts
+interface FieldFlags {
+  disabled: boolean;
+  invalid: boolean;
+  readOnly: boolean;
+  required: boolean;
+}
+declare const fieldStateOf: ({ disabled, invalid, readOnly, required }: FieldFlags) => Record<string, boolean>;
+declare const heldOf: ({ readOnly }: Pick<FieldFlags, "readOnly">) => Record<string, string>;
+//#endregion
+export { fieldStateOf, heldOf };

package/dist/field.js

@@ -0,0 +1,14 @@
+//#region src/field.ts
+const fieldStateOf = ({ disabled, invalid, readOnly, required }) => {
+	const state = { invalid };
+	if (disabled) state.disabled = true;
+	if (readOnly) state.readOnly = true;
+	if (required) state.required = true;
+	return state;
+};
+const heldOf = ({ readOnly }) => {
+	if (readOnly) return { "data-readonly": "true" };
+	return {};
+};
+//#endregion
+export { fieldStateOf, heldOf };

package/dist/hotkey.d.ts

@@ -0,0 +1,2 @@
+import { Hotkey } from "@tanstack/hotkeys";
+export type { Hotkey };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { regionOf } from "./aria.js";
+import { BarsAccent, BarsOptionInput, BarsPoint, barsOption } from "./charts/bars.js";
+import { GroupedBarsOptionInput, GroupedBarsSeries, groupedBarsOption } from "./charts/groupedBars.js";
+import { SparkAccent, SparkOptionInput, sparkOption } from "./charts/spark.js";
+import { SIDEBAR_COOKIE, cookieValue, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue } from "./cookie.js";
+import { DatePickerWords, DialogWords, Language, SearchWords, SelectWords, SidebarWords, StatWords, TableWords, TailWords, UserMenuWords, Words, english } from "./words.js";
+import { czech } from "./czech.js";
+import { fieldStateOf, heldOf } from "./field.js";
+import { Hotkey } from "./hotkey.js";
+import { IndicatorSpot, NOWHERE_AT_ALL, indicatorSpotIn, indicatorStyle } from "./indicator.js";
+import { paintedLength } from "./measure.js";
+import { Tally, WHOLE, tallyAt, tallyOf } from "./tally.js";
+import { readDuration, readToken } from "./tokens.js";
+import { TONE_ICON_NAME, ToneIconName } from "./toneIcons.js";
+import { NOWHERE, NOWHERE_NEAR, Spot, highlightedIn, listOf, spotIn, stateOf, travelStyle } from "./travel.js";
+export { type BarsAccent, type BarsOptionInput, type BarsPoint, type DatePickerWords, type DialogWords, type GroupedBarsOptionInput, type GroupedBarsSeries, type Hotkey, type IndicatorSpot, type Language, NOWHERE, NOWHERE_AT_ALL, NOWHERE_NEAR, SIDEBAR_COOKIE, type SearchWords, type SelectWords, type SidebarWords, type SparkAccent, type SparkOptionInput, type Spot, type StatWords, TONE_ICON_NAME, type TableWords, type TailWords, type Tally, type ToneIconName, type UserMenuWords, WHOLE, type Words, barsOption, cookieValue, czech, english, fieldStateOf, groupedBarsOption, heldOf, highlightedIn, indicatorSpotIn, indicatorStyle, listOf, paintedLength, readDuration, readToken, regionOf, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue, sparkOption, spotIn, stateOf, tallyAt, tallyOf, travelStyle };

package/dist/index.js

@@ -0,0 +1,15 @@
+import { regionOf } from "./aria.js";
+import { barsOption } from "./charts/bars.js";
+import { groupedBarsOption } from "./charts/groupedBars.js";
+import { sparkOption } from "./charts/spark.js";
+import { SIDEBAR_COOKIE, cookieValue, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue } from "./cookie.js";
+import { czech } from "./czech.js";
+import { fieldStateOf, heldOf } from "./field.js";
+import { NOWHERE_AT_ALL, indicatorSpotIn, indicatorStyle } from "./indicator.js";
+import { paintedLength } from "./measure.js";
+import { WHOLE, tallyAt, tallyOf } from "./tally.js";
+import { readDuration, readToken } from "./tokens.js";
+import { TONE_ICON_NAME } from "./toneIcons.js";
+import { NOWHERE, NOWHERE_NEAR, highlightedIn, listOf, spotIn, stateOf, travelStyle } from "./travel.js";
+import { english } from "./words.js";
+export { NOWHERE, NOWHERE_AT_ALL, NOWHERE_NEAR, SIDEBAR_COOKIE, TONE_ICON_NAME, WHOLE, barsOption, cookieValue, czech, english, fieldStateOf, groupedBarsOption, heldOf, highlightedIn, indicatorSpotIn, indicatorStyle, listOf, paintedLength, readDuration, readToken, regionOf, rememberCookie, sidebarCollapsedFrom, sidebarCookieValue, sparkOption, spotIn, stateOf, tallyAt, tallyOf, travelStyle };

package/dist/indicator.d.ts

@@ -0,0 +1,10 @@
+//#region src/indicator.d.ts
+interface IndicatorSpot {
+  left: number;
+  width: number;
+}
+declare const NOWHERE_AT_ALL: IndicatorSpot;
+declare const indicatorSpotIn: (host: HTMLElement | null) => IndicatorSpot;
+declare const indicatorStyle: (spot: IndicatorSpot) => Record<string, string>;
+//#endregion
+export { type IndicatorSpot, NOWHERE_AT_ALL, indicatorSpotIn, indicatorStyle };

package/dist/indicator.js

@@ -0,0 +1,28 @@
+//#region src/indicator.ts
+const NOWHERE = 0;
+const HIDDEN = "0";
+const SHOWN = "1";
+const NOWHERE_AT_ALL = {
+	left: NOWHERE,
+	width: NOWHERE
+};
+const indicatorSpotIn = (host) => {
+	if (!host) return NOWHERE_AT_ALL;
+	const chosen = host.querySelector("[data-selected]");
+	if (!chosen) return NOWHERE_AT_ALL;
+	return {
+		left: chosen.offsetLeft,
+		width: chosen.offsetWidth
+	};
+};
+const shownAt = (width) => {
+	if (width === NOWHERE) return HIDDEN;
+	return SHOWN;
+};
+const indicatorStyle = (spot) => ({
+	"--left": `${String(spot.left)}px`,
+	"--width": `${String(spot.width)}px`,
+	opacity: shownAt(spot.width)
+});
+//#endregion
+export { NOWHERE_AT_ALL, indicatorSpotIn, indicatorStyle };

package/dist/measure.d.ts

@@ -0,0 +1,4 @@
+//#region src/measure.d.ts
+declare const paintedLength: (length: string) => number;
+//#endregion
+export { paintedLength };

package/dist/measure.js

@@ -0,0 +1,12 @@
+//#region src/measure.ts
+const paintedLength = (length) => {
+	const probe = document.createElement("span");
+	probe.style.position = "absolute";
+	probe.style.height = length;
+	document.body.append(probe);
+	const painted = probe.getBoundingClientRect().height;
+	probe.remove();
+	return painted;
+};
+//#endregion
+export { paintedLength };

package/dist/tally.d.ts

@@ -0,0 +1,16 @@
+//#region src/tally.d.ts
+declare const WHOLE = 1;
+interface Tally {
+  counts: boolean;
+  group: string;
+  head: string;
+  places: number;
+  point: string;
+  tail: string;
+  target: number;
+  whole: string;
+}
+declare const tallyOf: (value: string) => Tally;
+declare const tallyAt: (tally: Tally, part: number) => string;
+//#endregion
+export { type Tally, WHOLE, tallyAt, tallyOf };

package/dist/tally.js

@@ -0,0 +1,73 @@
+//#region src/tally.ts
+const RUN = /\d(?:[\S\s]*\d)?/u;
+const MARKS = /\D/gu;
+const LAST = -1;
+const ONCE = 1;
+const ONE = 1;
+const NONE = 0;
+const WHOLE = 1;
+const GROUP_SIZE = 3;
+const DECIMAL_MAX = 2;
+const marksIn = (run) => run.match(MARKS) ?? [];
+const pointOf = (run) => {
+	const marks = marksIn(run);
+	const last = marks.at(LAST) ?? "";
+	if (last === "" || marks.filter((mark) => mark === last).length > ONCE) return "";
+	if (run.length - run.lastIndexOf(last) - ONE > DECIMAL_MAX) return "";
+	return last;
+};
+const groupOf = (run, point) => marksIn(run).filter((mark) => mark !== point).at(LAST) ?? "";
+const NOT_DIGITS = /[^\d]/gu;
+const targetOf = (run, point) => {
+	if (point === "") return Number(run.replace(NOT_DIGITS, ""));
+	const [body = "", fraction = ""] = run.split(point);
+	return Number(`${body.replace(NOT_DIGITS, "")}.${fraction.replace(NOT_DIGITS, "")}`);
+};
+const placesOf = (run, point) => {
+	if (point === "") return NONE;
+	return run.length - run.lastIndexOf(point) - ONE;
+};
+const RESTS = {
+	counts: false,
+	group: "",
+	head: "",
+	places: NONE,
+	point: "",
+	tail: "",
+	target: NONE,
+	whole: ""
+};
+const tallyOf = (value) => {
+	const found = RUN.exec(value);
+	if (!found) return {
+		...RESTS,
+		whole: value
+	};
+	const [run] = found;
+	const point = pointOf(run);
+	return {
+		counts: true,
+		group: groupOf(run, point),
+		head: value.slice(NONE, found.index),
+		places: placesOf(run, point),
+		point,
+		tail: value.slice(found.index + run.length),
+		target: targetOf(run, point),
+		whole: value
+	};
+};
+const grouped = (body, group) => {
+	if (group === "") return body;
+	const parts = [];
+	for (let edge = body.length; edge > NONE; edge -= GROUP_SIZE) parts.unshift(body.slice(Math.max(edge - GROUP_SIZE, NONE), edge));
+	return parts.join(group);
+};
+const tallyAt = (tally, part) => {
+	if (!tally.counts || part >= 1) return tally.whole;
+	const [body = "", fraction = ""] = (tally.target * part).toFixed(tally.places).split(".");
+	const shown = grouped(body, tally.group);
+	if (tally.point === "") return `${tally.head}${shown}${tally.tail}`;
+	return `${tally.head}${shown}${tally.point}${fraction}${tally.tail}`;
+};
+//#endregion
+export { WHOLE, tallyAt, tallyOf };

package/dist/tokens.d.ts

@@ -0,0 +1,5 @@
+//#region src/tokens.d.ts
+declare const readToken: (name: string) => string;
+declare const readDuration: (name: string) => number;
+//#endregion
+export { readDuration, readToken };

package/dist/tokens.js

@@ -0,0 +1,15 @@
+//#region src/tokens.ts
+const MS = "ms";
+const NOTHING = "";
+const NO_DURATION = 0;
+const readToken = (name) => {
+	if (typeof document === "undefined") return NOTHING;
+	return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+};
+const readDuration = (name) => {
+	const value = readToken(name);
+	if (value === NOTHING) return NO_DURATION;
+	return Number(value.replace(MS, ""));
+};
+//#endregion
+export { readDuration, readToken };

package/dist/toneIcons.d.ts

@@ -0,0 +1,6 @@
+import { Tone } from "@techfides/ui-library-design";
+//#region src/toneIcons.d.ts
+type ToneIconName = 'circle-alert' | 'circle-check' | 'info' | 'triangle-alert';
+declare const TONE_ICON_NAME: Record<Exclude<Tone, 'accent'>, ToneIconName>;
+//#endregion
+export { TONE_ICON_NAME, type ToneIconName };

package/dist/toneIcons.js

@@ -0,0 +1,9 @@
+//#region src/toneIcons.ts
+const TONE_ICON_NAME = {
+	danger: "circle-alert",
+	info: "info",
+	success: "circle-check",
+	warning: "triangle-alert"
+};
+//#endregion
+export { TONE_ICON_NAME };

package/dist/travel.d.ts

@@ -0,0 +1,14 @@
+//#region src/travel.d.ts
+declare const NOWHERE = "";
+interface Spot {
+  down: number;
+  tall: number;
+}
+declare const NOWHERE_NEAR: Spot;
+declare const spotIn: (host: HTMLElement, value: string) => Spot;
+declare const listOf: (mark: HTMLElement | null) => HTMLElement | false;
+declare const highlightedIn: (list: HTMLElement) => string;
+declare const stateOf: (lit: string, travelling: boolean) => Record<string, string>;
+declare const travelStyle: (spot: Spot) => Record<string, string>;
+//#endregion
+export { NOWHERE, NOWHERE_NEAR, type Spot, highlightedIn, listOf, spotIn, stateOf, travelStyle };

package/dist/travel.js

@@ -0,0 +1,37 @@
+//#region src/travel.ts
+const NOTHING = 0;
+const NOWHERE = "";
+const NOWHERE_NEAR = {
+	down: NOTHING,
+	tall: NOTHING
+};
+const spotIn = (host, value) => {
+	for (const row of host.querySelectorAll("[data-part=\"item\"]")) if (row.dataset.value === value) return {
+		down: row.offsetTop,
+		tall: row.offsetHeight
+	};
+	return NOWHERE_NEAR;
+};
+const listOf = (mark) => {
+	if (!mark) return false;
+	const list = mark.parentElement;
+	if (!list) return false;
+	return list;
+};
+const highlightedIn = (list) => {
+	const already = list.querySelector("[data-highlighted]");
+	if (!already) return "";
+	return already.dataset.value ?? "";
+};
+const stateOf = (lit, travelling) => {
+	const state = {};
+	if (lit !== "") state["data-lit"] = "";
+	if (!travelling) state["data-placing"] = "";
+	return state;
+};
+const travelStyle = (spot) => ({
+	"--tf-travel-height": `${String(spot.tall)}px`,
+	translate: `0 ${String(spot.down)}px`
+});
+//#endregion
+export { NOWHERE, NOWHERE_NEAR, highlightedIn, listOf, spotIn, stateOf, travelStyle };

package/dist/words.d.ts

@@ -0,0 +1,115 @@
+//#region src/words.d.ts
+interface TableWords {
+  actions: string;
+  anything: string;
+  clear: string;
+  clearAll: string;
+  clearFilter: (column: string) => string;
+  clearSelection: string;
+  done: string;
+  emptyHint: string;
+  emptyTitle: string;
+  expandRow: (row: string) => string;
+  filterBy: (column: string) => string;
+  filterPick: (column: string) => string;
+  filterRange: (column: string) => string;
+  filterSearch: (column: string) => string;
+  from: string;
+  nextPage: string;
+  noRows: string;
+  pages: string;
+  nothingHint: string;
+  nothingTitle: string;
+  previousPage: string;
+  rowsPerPage: string;
+  selectAll: string;
+  selectRow: (row: string) => string;
+  selected: (count: number, written: string) => string;
+  shown: (from: string, to: string, total: string) => string;
+  sortAscending: (column: string) => string;
+  sortBy: (column: string) => string;
+  sortClear: (column: string) => string;
+  sortDescending: (column: string) => string;
+  to: string;
+}
+interface DatePickerWords {
+  calendar: string;
+  choose: (day: string) => string;
+  chosen: (day: string) => string;
+  clear: string;
+  close: string;
+  nextDecade: string;
+  nextMonth: string;
+  nextYear: string;
+  open: string;
+  patternDay: string;
+  patternMonth: string;
+  patternYear: string;
+  pickMonth: string;
+  pickYear: string;
+  preset: (span: string) => string;
+  previousDecade: string;
+  previousMonth: string;
+  previousYear: string;
+  rangeFrom: (day: string) => string;
+  rangeTo: (day: string) => string;
+  showDays: string;
+  showMonths: string;
+  showYears: string;
+  unavailable: (day: string) => string;
+  week: string;
+  weekNumber: (week: string) => string;
+}
+interface DialogWords {
+  close: string;
+}
+interface SidebarWords {
+  collapse: string;
+  expand: string;
+  openMenu: string;
+}
+interface StatWords {
+  change: string;
+  fell: string;
+  rose: string;
+}
+interface SearchWords {
+  dismiss: string;
+  nothing: string;
+  results: (count: number, written: string) => string;
+}
+interface ListboxWords {
+  empty: string;
+}
+interface QueueWords {
+  label: string;
+}
+interface SelectWords {
+  clear: string;
+}
+interface TailWords {
+  empty: string;
+}
+interface UserMenuWords {
+  account: string;
+}
+interface Words {
+  datePicker: DatePickerWords;
+  dialog: DialogWords;
+  listbox: ListboxWords;
+  queue: QueueWords;
+  search: SearchWords;
+  select: SelectWords;
+  sidebar: SidebarWords;
+  stat: StatWords;
+  table: TableWords;
+  tail: TailWords;
+  userMenu: UserMenuWords;
+}
+interface Language {
+  locale?: string;
+  words: Words;
+}
+declare const english: Language;
+//#endregion
+export { type DatePickerWords, type DialogWords, type Language, type SearchWords, type SelectWords, type SidebarWords, type StatWords, type TableWords, type TailWords, type UserMenuWords, type Words, english };

package/dist/words.js

@@ -0,0 +1,94 @@
+//#region src/words.ts
+const SINGLE = 1;
+const english = {
+	locale: "en-US",
+	words: {
+		datePicker: {
+			calendar: "Calendar",
+			choose: (day) => `Choose ${day}`,
+			chosen: (day) => `Chosen, ${day}`,
+			clear: "Clear the dates",
+			close: "Close the calendar",
+			nextDecade: "Next decade",
+			nextMonth: "Next month",
+			nextYear: "Next year",
+			open: "Open the calendar",
+			patternDay: "dd",
+			patternMonth: "mm",
+			patternYear: "yyyy",
+			pickMonth: "Pick a month",
+			pickYear: "Pick a year",
+			preset: (span) => `Choose ${span}`,
+			previousDecade: "Previous decade",
+			previousMonth: "Previous month",
+			previousYear: "Previous year",
+			rangeFrom: (day) => `Start the range at ${day}`,
+			rangeTo: (day) => `End the range at ${day}`,
+			showDays: "Show the days",
+			showMonths: "Show the months",
+			showYears: "Show the years",
+			unavailable: (day) => `Not available, ${day}`,
+			week: "Wk",
+			weekNumber: (week) => `Week ${week}`
+		},
+		dialog: { close: "Close" },
+		listbox: { empty: "Nothing to choose from" },
+		queue: { label: "Queue" },
+		search: {
+			dismiss: "Esc closes",
+			nothing: "Nothing matches that",
+			results: (count, written) => {
+				if (count === SINGLE) return "1 result";
+				return `${written} results`;
+			}
+		},
+		select: { clear: "Clear" },
+		sidebar: {
+			collapse: "Collapse the sidebar",
+			expand: "Expand the sidebar",
+			openMenu: "Open menu"
+		},
+		stat: {
+			change: "Change",
+			fell: "down",
+			rose: "up"
+		},
+		table: {
+			actions: "Actions",
+			anything: "Anything",
+			clear: "Clear",
+			clearAll: "Clear the filters",
+			clearFilter: (column) => `Remove the filter on ${column}`,
+			clearSelection: "Clear selection",
+			done: "Done",
+			emptyHint: "Items will show up here once there are some.",
+			emptyTitle: "No items yet",
+			expandRow: (row) => `Show more about row ${row}`,
+			filterBy: (column) => `Filter ${column}`,
+			filterPick: (column) => `Pick from ${column}`,
+			filterRange: (column) => `Range of ${column}`,
+			filterSearch: (column) => `Search in ${column}`,
+			from: "From",
+			nextPage: "Next page",
+			noRows: "No rows",
+			nothingHint: "Drop one of the conditions, or clear the search.",
+			nothingTitle: "Nothing matches those filters",
+			pages: "Pages",
+			previousPage: "Previous page",
+			rowsPerPage: "Rows per page",
+			selectAll: "Select the rows on this page",
+			selectRow: (row) => `Select row ${row}`,
+			selected: (_count, written) => `${written} selected`,
+			shown: (from, to, total) => `${from}–${to} of ${total}`,
+			sortAscending: (column) => `Sort ${column} smallest first`,
+			sortBy: (column) => `Sort by ${column}`,
+			sortClear: (column) => `Stop sorting by ${column}`,
+			sortDescending: (column) => `Sort ${column} largest first`,
+			to: "To"
+		},
+		tail: { empty: "No log lines" },
+		userMenu: { account: "account" }
+	}
+};
+//#endregion
+export { english };

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@techfides/ui-library-core",
+  "version": "0.5.0",
+  "description": "Framework-agnostic logic for the TechFides UI library: words and languages, number tallies, chart options, field state and shared DOM maths",
+  "keywords": [
+    "design-system",
+    "headless",
+    "i18n"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TechFides/ui-library.git",
+    "directory": "packages/core"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "imports": {
+    "#*": "./src/*.ts"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/hotkeys": "^0.8.0",
+    "@techfides/ui-library-design": "^0.5.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/core": "^0.18.5",
+    "echarts": "^6.1.0",
+    "publint": "^0.3.24",
+    "tsdown": "^0.22.14",
+    "typescript": "~6.0.3",
+    "@techfides/tsconfig": "0.0.0"
+  },
+  "peerDependencies": {
+    "echarts": "^6.1.0"
+  },
+  "peerDependenciesMeta": {
+    "echarts": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "lint": "eslint . --max-warnings=0",
+    "typecheck": "tsc --noEmit"
+  },
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}