@dorsk/tsumikit 0.17.0 → 0.18.1

package/dist/components/atoms/Button.svelte

@@ -297,6 +297,25 @@
 		border-color: var(--ok);
 		filter: brightness(1.08);
 	}
+	/* Other tones on a primary action tint the accent fill rather than repaint the
+	   text, so the on-accent foreground stays readable (bare tone-as-text would be
+	   accent-on-accent). success keeps its own filled guard above. */
+	.btn-primary.btn-tone-accent,
+	.btn-primary.btn-tone-info,
+	.btn-primary.btn-tone-warn,
+	.btn-primary.btn-tone-danger {
+		background: color-mix(in srgb, var(--btn-tone) 35%, var(--accent));
+		border-color: color-mix(in srgb, var(--btn-tone) 35%, var(--accent));
+		color: var(--text-on-accent);
+	}
+	.btn-primary.btn-tone-accent:hover:not(:disabled),
+	.btn-primary.btn-tone-info:hover:not(:disabled),
+	.btn-primary.btn-tone-warn:hover:not(:disabled),
+	.btn-primary.btn-tone-danger:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--btn-tone) 35%, var(--accent));
+		border-color: color-mix(in srgb, var(--btn-tone) 35%, var(--accent));
+		filter: brightness(1.08);
+	}
 
 	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
 	.btn-icon {

package/dist/components/molecules/Breadcrumb.svelte

@@ -0,0 +1,111 @@
+<script lang="ts" module>
+	export interface BreadcrumbItem {
+		label: string;
+		href?: string;
+	}
+</script>
+
+<script lang="ts">
+	// Navigation trail (e.g. "Musique > Artist > Album > Track"). The last item —
+	// or any item without an `href` — renders unlinked and is marked
+	// aria-current="page". When the trail exceeds `maxItems` the middle collapses
+	// to an ellipsis, always keeping the first item and the tail. `separator` is a
+	// snippet for custom markup, else a char via the `char` prop.
+	import type { Snippet } from 'svelte';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		items,
+		char,
+		separator,
+		maxItems = 0
+	}: {
+		items: BreadcrumbItem[];
+		/** Separator character; ignored when the `separator` snippet is set. */
+		char?: string;
+		separator?: Snippet;
+		/** Collapse the middle to an ellipsis when the trail is longer than this
+		 *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
+		maxItems?: number;
+	} = $props();
+
+	type Crumb = BreadcrumbItem | { ellipsis: true };
+
+	const shown = $derived<Crumb[]>(
+		maxItems > 0 && items.length > maxItems
+			? [items[0], { ellipsis: true }, ...items.slice(items.length - (maxItems - 1))]
+			: items
+	);
+</script>
+
+<nav aria-label="breadcrumb" data-tsu="Breadcrumb">
+	<ol class="crumbs">
+		{#each shown as item, i (i)}
+			<li class="crumb">
+				{#if 'ellipsis' in item}
+					<span class="ellipsis" aria-hidden="true">…</span>
+				{:else if item.href && i < shown.length - 1}
+					<a class="link" href={item.href}>{item.label}</a>
+				{:else}
+					<span class="current" aria-current="page">{item.label}</span>
+				{/if}
+				{#if i < shown.length - 1}
+					<span class="sep" aria-hidden="true">
+						{#if separator}{@render separator()}{:else if char}{char}{:else}<Icon
+								name="chevron-right"
+								size={14}
+							/>{/if}
+					</span>
+				{/if}
+			</li>
+		{/each}
+	</ol>
+</nav>
+
+<style>
+	.crumbs {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--sp-1);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		font-size: var(--fs-sm);
+	}
+	.crumb {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+		min-width: 0;
+	}
+	.link {
+		color: var(--text-muted);
+		text-decoration: none;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 16ch;
+		transition: color 0.12s var(--ease);
+	}
+	.link:hover {
+		color: var(--text);
+		text-decoration: underline;
+	}
+	.current {
+		color: var(--text);
+		font-weight: var(--fw-medium);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: 24ch;
+	}
+	.ellipsis {
+		color: var(--text-muted);
+	}
+	.sep {
+		display: inline-flex;
+		align-items: center;
+		color: var(--text-subtle, var(--text-muted));
+	}
+</style>

package/dist/components/molecules/Breadcrumb.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    items: BreadcrumbItem[];
+    /** Separator character; ignored when the `separator` snippet is set. */
+    char?: string;
+    separator?: Snippet;
+    /** Collapse the middle to an ellipsis when the trail is longer than this
+     *  (0 = never collapse). Keeps the first item and the last `maxItems - 1`. */
+    maxItems?: number;
+};
+declare const Breadcrumb: import("svelte").Component<$$ComponentProps, {}, "">;
+type Breadcrumb = ReturnType<typeof Breadcrumb>;
+export default Breadcrumb;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
+export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
@@ -52,7 +53,7 @@ export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { type Column, default as DataTable } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
-export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueOption, type ValueProvider, walk, } from './query';
+export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';

package/dist/index.js

@@ -33,6 +33,7 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { default as Stack } from './components/layouts/Stack.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
+export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';

package/dist/query/index.d.ts

@@ -3,7 +3,7 @@ export { filters, freeText, walk } from './ast';
 export { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit, insideQuoteAtCaret, } from './edit';
 export { parse } from './parser';
 export { compilePredicate, serialize, serializeFilter, toSql } from './query';
-export type { FieldDef, FieldType, Operator, OperatorId, Schema, ValueOption, ValueProvider, } from './schema';
+export type { FieldDef, FieldType, Operator, OperatorId, Schema, ValueContext, ValueOption, ValueProvider, } from './schema';
 export { defaultOperator, findField, OPERATORS, operatorByCode, operatorById, operatorsFor, resolveValues, } from './schema';
 export type { Suggestion, SuggestKind, SuggestState } from './suggest';
 export { activeToken, suggest } from './suggest';

package/dist/query/schema.d.ts

@@ -19,8 +19,22 @@ export interface ValueOption {
     /** Optional secondary line (e.g. an email under a username). */
     hint?: string;
 }
+/**
+ * Extra context handed to a {@link ValueProvider} alongside the value fragment:
+ * the full raw query, the active replacement span (`[start, end)` offsets of the
+ * text a chosen suggestion would replace) and the caret position. Optional so
+ * existing providers that only read the fragment keep working unchanged.
+ */
+export interface ValueContext {
+    /** The full query string the fragment was extracted from. */
+    rawQuery: string;
+    /** `[start, end)` offsets of the token region a suggestion would replace. */
+    span: [number, number];
+    /** Absolute caret index within `rawQuery`. */
+    caret: number;
+}
 /** Resolves candidate values for a field given the user's partial input. */
-export type ValueProvider = (query: string) => ValueOption[] | Promise<ValueOption[]>;
+export type ValueProvider = (query: string, context?: ValueContext) => ValueOption[] | Promise<ValueOption[]>;
 export interface FieldDef {
     /** Canonical name, used in the serialised query (e.g. `artist`). */
     name: string;
@@ -57,4 +71,4 @@ export declare function findField(schema: Schema, token: string): FieldDef | und
 export declare function operatorByCode(code: string): Operator | undefined;
 export declare function operatorById(id: OperatorId): Operator | undefined;
 /** Resolve a field's value options (sync wrapper that always returns a promise). */
-export declare function resolveValues(field: FieldDef, query: string): Promise<ValueOption[]>;
+export declare function resolveValues(field: FieldDef, query: string, context?: ValueContext): Promise<ValueOption[]>;

package/dist/query/schema.js

@@ -45,9 +45,9 @@ export function operatorById(id) {
     return OPERATORS.find((op) => op.id === id);
 }
 /** Resolve a field's value options (sync wrapper that always returns a promise). */
-export async function resolveValues(field, query) {
+export async function resolveValues(field, query, context) {
     if (field.provider)
-        return field.provider(query);
+        return field.provider(query, context);
     const opts = field.options ?? [];
     const q = query.toLowerCase();
     return q ? opts.filter((o) => o.label.toLowerCase().includes(q)) : opts;

package/dist/query/suggest.d.ts

@@ -1,4 +1,4 @@
-import { type Schema } from './schema';
+import { type Schema } from './schema.ts';
 export type SuggestKind = 'field' | 'operator' | 'value';
 export interface Suggestion {
     /** What to show on the row. */

package/dist/query/suggest.js

@@ -6,7 +6,7 @@
 //
 // This is pure logic, deliberately UI-free so the Svelte organism stays dumb.
 // ─────────────────────────────────────────────────────────────────────────
-import { findField, operatorsFor, resolveValues, } from './schema';
+import { findField, operatorsFor, resolveValues, } from './schema.ts';
 // Longest first so `>=`/`!:` win over `>`/`:`.
 const OP_CODES = ['!:', '!=', '>=', '<=', ':', '=', '>', '<'];
 /**
@@ -164,7 +164,8 @@ export async function suggest(schema, s, pos) {
     if (!field)
         return null;
     // Operator present → suggest values (async; filtered by what's typed).
-    const opts = await resolveValues(field, unquote(value));
+    const context = { rawQuery: s, span, caret: pos };
+    const opts = await resolveValues(field, unquote(value), context);
     if (opts.length === 0)
         return null;
     return buildValueState(field, opCode, span, opts);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",