runeforge 0.0.36 → 0.0.38

package/dist/components/common/Header.svelte

@@ -21,7 +21,7 @@
   </div>
 
   {#if buttons}
-    <div class="flex shrink-0 items-center gap-2 sm:pt-1">
+    <div class="flex min-w-0 items-center gap-2 sm:pt-1">
       {@render buttons()}
     </div>
   {/if}

package/dist/components/crud/GenericCRUD.svelte

@@ -21,7 +21,8 @@
 		CustomAction,
 		CustomBulkAction,
 		FieldDefinition,
-		SearchConfiguration
+		SearchConfiguration,
+		ViewBasedCustomBulkAction
 	} from '../../types/crud.js';
 	import type {
 		FilterSnapshot,
@@ -121,6 +122,9 @@
 	);
 
 	let activeAction = $state<{ action: CustomAction<T>; item: T } | null>(null);
+	let activeBulkAction = $state<{ action: ViewBasedCustomBulkAction<T>; items: T[] } | null>(
+		null
+	);
 
 	async function runAction(action: CustomAction<T>, item: T) {
 		if (!(action.condition?.(item) ?? true)) return;
@@ -131,6 +135,10 @@
 		activeAction = { action, item };
 	}
 
+	function runBulkAction(action: ViewBasedCustomBulkAction<T>, items: T[]) {
+		activeBulkAction = { action, items };
+	}
+
 	async function navList() {
 		await goto('?');
 	}
@@ -293,7 +301,9 @@
 	);
 
 	const serverError = $derived(
-		creating || reading || editing || activeAction !== null ? (form?.error ?? '') : ''
+		creating || reading || editing || activeAction !== null || activeBulkAction !== null
+			? (form?.error ?? '')
+			: ''
 	);
 </script>
 
@@ -359,6 +369,7 @@
 		onEdit={navEdit}
 		onView={navRead}
 		onAction={runAction}
+		onBulkAction={runBulkAction}
 	/>
 {/if}
 
@@ -373,3 +384,14 @@
 		onSuccess={() => (activeAction = null)}
 	/>
 {/if}
+
+{#if activeBulkAction !== null}
+	{@const BulkActionView = activeBulkAction.action.view}
+	<BulkActionView
+		items={activeBulkAction.items}
+		label={activeBulkAction.action.label}
+		{serverError}
+		onCancel={() => (activeBulkAction = null)}
+		onSuccess={() => (activeBulkAction = null)}
+	/>
+{/if}

package/dist/components/crud/views/List.svelte

@@ -15,7 +15,8 @@
 		CustomAction,
 		CustomBulkAction,
 		RowAction,
-		SearchConfiguration
+		SearchConfiguration,
+		ViewBasedCustomBulkAction
 	} from '../../../types/crud.js';
 	import type {
 		FilterSnapshot,
@@ -27,6 +28,12 @@
 
 	const strings = getStrings();
 
+	function isViewBasedBulkAction(
+		action: CustomBulkAction<T>
+	): action is ViewBasedCustomBulkAction<T> {
+		return action.kind === 'view';
+	}
+
 	let {
 		data = [] as T[],
 		labelOne = '',
@@ -52,7 +59,8 @@
 		onCreate,
 		onEdit,
 		onView,
-		onAction
+		onAction,
+		onBulkAction
 	}: {
 		data?: T[];
 		labelOne?: string;
@@ -85,6 +93,7 @@
 		onEdit?: (item: T) => void;
 		onView?: (item: T) => void;
 		onAction?: (action: CustomAction<T>, item: T) => void;
+		onBulkAction?: (action: ViewBasedCustomBulkAction<T>, items: T[]) => void;
 	} = $props();
 
 	const icons = $derived(getIconSet() ?? defaultIconSet);
@@ -97,7 +106,12 @@
 	const updateLabel = $derived(update.label ?? strings.edit);
 	const readLabel = $derived(read.label ?? strings.view);
 	const showRowActions = $derived(allowRead || allowUpdate || allowDelete || actions.length > 0);
-	const allowSelection = $derived(allowDelete || customBulkActions.length > 0);
+	const allowSelection = $derived(
+		allowDelete || customBulkActions.some((action) => !isViewBasedBulkAction(action))
+	);
+	const hasCollapsibleActions = $derived(
+		enableExport || customBulkActions.length > 0 || allowDelete
+	);
 
 	let selected = new SvelteSet<number>();
 	let pendingDeletion = $state<T[] | null>(null);
@@ -107,7 +121,33 @@
 	let visibleRows = $state<T[]>([]);
 	let exportQuery = $state<TableQuery | undefined>(undefined);
 	let exportPopoverEl: HTMLElement | undefined = $state();
+	let actionsPopoverEl: HTMLElement | undefined = $state();
 	const exportId = $props.id();
+	const actionsMenuId = `${exportId}-actions`;
+
+	// Collapses export/bulk-actions/delete into a single "Acciones" dropdown
+	// once the toolbar no longer fits its available width (small monitor, a
+	// browser window not maximized, many customBulkActions, ...) — measured
+	// against an identical but off-flow, always-uncollapsed clone rather than
+	// the visible row itself, since the visible row's own width changes
+	// depending on whether it's currently collapsed.
+	let toolbarEl: HTMLElement | undefined = $state();
+	let toolbarMeasureEl: HTMLElement | undefined = $state();
+	let toolbarCollapsed = $state(false);
+
+	$effect(() => {
+		if (!toolbarEl || !toolbarMeasureEl) return;
+		const el = toolbarEl;
+		const measureEl = toolbarMeasureEl;
+		const check = () => {
+			toolbarCollapsed = measureEl.scrollWidth > el.clientWidth + 1;
+		};
+		const observer = new ResizeObserver(check);
+		observer.observe(el);
+		observer.observe(measureEl);
+		check();
+		return () => observer.disconnect();
+	});
 
 	async function resolveExportRows(): Promise<T[]> {
 		if (!pagination) return visibleRows;
@@ -179,11 +219,12 @@
 	}
 
 	async function runBulkAction(action: CustomBulkAction<T>, items: T[]) {
+		if (isViewBasedBulkAction(action)) return;
 		await runEndpointAction(action.endpoint, items);
 	}
 
 	function requestBulkAction(action: CustomBulkAction<T>, items: T[]) {
-		if (action.confirm) {
+		if (!isViewBasedBulkAction(action) && action.confirm) {
 			pendingBulkAction = { action, items };
 		} else {
 			runBulkAction(action, items);
@@ -192,6 +233,10 @@
 
 	function handleBulkAction(action: CustomBulkAction<T>) {
 		const items = selectedItems;
+		if (isViewBasedBulkAction(action)) {
+			onBulkAction?.(action, items);
+			return;
+		}
 		selected.clear();
 		requestBulkAction(action, items);
 	}
@@ -231,6 +276,97 @@
 	]);
 </script>
 
+{#snippet toolbarButtons(measuring: boolean)}
+	{#if search}
+		<SearchInput config={search} />
+	{/if}
+
+	{#if enableExport}
+		{@const ExportIcon = icons.download}
+		<Button
+			variant="ghost"
+			class="btn-square"
+			popovertarget={measuring ? undefined : `export-menu-${exportId}`}
+			style={measuring ? undefined : `anchor-name:--export-anchor-${exportId}`}
+			aria-label={strings.export}
+			title={strings.export}
+		>
+			<ExportIcon class="size-4" />
+		</Button>
+		{#if !measuring}
+			<div
+				popover="auto"
+				id="export-menu-{exportId}"
+				style="position-anchor:--export-anchor-{exportId}"
+				class="dropdown dropdown-end w-40 rounded-box border border-base-content/10 bg-base-100 p-1 shadow-lg"
+				bind:this={exportPopoverEl}
+			>
+				<Button
+					variant="ghost"
+					class="btn-sm w-full justify-start"
+					onclick={() => handleExport('csv')}
+				>
+					{strings.exportCsv}
+				</Button>
+				{#if xlsx}
+					<Button
+						variant="ghost"
+						class="btn-sm w-full justify-start"
+						onclick={() => handleExport('xlsx')}
+					>
+						{strings.exportExcel}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	{/if}
+
+	{#each customBulkActions as bulkAction, i (i)}
+		{#if bulkAction.condition?.(selectedItems) ?? true}
+			{@const BulkIcon = bulkAction.icon}
+			{@const isView = isViewBasedBulkAction(bulkAction)}
+			<Button
+				variant={bulkAction.variant ?? 'ghost'}
+				class="btn-outline"
+				disabled={!isView && selected.size === 0}
+				title={bulkAction.tooltip ?? bulkAction.label}
+				aria-label={bulkAction.tooltip ?? bulkAction.label}
+				onclick={measuring ? undefined : () => handleBulkAction(bulkAction)}
+			>
+				<BulkIcon class="size-4" />
+				{#if bulkAction.label}
+					{bulkAction.label}{#if !isView}
+						({selected.size})
+					{/if}
+				{/if}
+			</Button>
+		{/if}
+	{/each}
+
+	{#if allowDelete}
+		{@const DeleteIcon = icons.delete}
+		<Button
+			variant="error"
+			class="btn-outline"
+			disabled={selected.size === 0}
+			onclick={measuring ? undefined : handleDelete}
+		>
+			<DeleteIcon class="size-4" />
+			{deleteLabel} ({selected.size})
+		</Button>
+	{/if}
+
+	{@const CreateIcon = icons.create}
+	<Button variant="primary" onclick={measuring ? undefined : handleCreate}>
+		<CreateIcon class="size-5" />
+		{#if creation.label}
+			<span>{creation.label}</span>
+		{:else}
+			<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+		{/if}
+	</Button>
+{/snippet}
+
 {#snippet actionsCell(item: T)}
 	<div class="flex justify-end items-center gap-1">
 		{#each rowActions as action (action.label)}
@@ -276,85 +412,115 @@
 		breadcrumbs={[{ label: labelMany, icon: entityIcon, link: { href: '#' }, prominent: true }]}
 	>
 		{#snippet buttons()}
-			{#if search}
-				<SearchInput config={search} />
-			{/if}
+			<div bind:this={toolbarEl} class="flex flex-wrap items-center gap-2 overflow-hidden">
+				{#if toolbarCollapsed}
+					{#if search}
+						<SearchInput config={search} />
+					{/if}
 
-			{#if enableExport}
-				{@const ExportIcon = icons.download}
-				<Button
-					variant="ghost"
-					class="btn-square"
-					popovertarget="export-menu-{exportId}"
-					style="anchor-name:--export-anchor-{exportId}"
-					aria-label={strings.export}
-					title={strings.export}
-				>
-					<ExportIcon class="size-4" />
-				</Button>
-				<div
-					popover="auto"
-					id="export-menu-{exportId}"
-					style="position-anchor:--export-anchor-{exportId}"
-					class="dropdown dropdown-end w-40 rounded-box border border-base-content/10 bg-base-100 p-1 shadow-lg"
-					bind:this={exportPopoverEl}
-				>
-					<Button
-						variant="ghost"
-						class="btn-sm w-full justify-start"
-						onclick={() => handleExport('csv')}
-					>
-						{strings.exportCsv}
-					</Button>
-					{#if xlsx}
+					{#if hasCollapsibleActions}
 						<Button
 							variant="ghost"
-							class="btn-sm w-full justify-start"
-							onclick={() => handleExport('xlsx')}
+							class="btn-square"
+							popovertarget="actions-menu-{actionsMenuId}"
+							style="anchor-name:--actions-anchor-{actionsMenuId}"
+							aria-label={strings.actions}
+							title={strings.actions}
 						>
-							{strings.exportExcel}
+							<span class="text-lg leading-none" aria-hidden="true">⋯</span>
 						</Button>
-					{/if}
-				</div>
-			{/if}
+						<div
+							popover="auto"
+							id="actions-menu-{actionsMenuId}"
+							style="position-anchor:--actions-anchor-{actionsMenuId}"
+							class="dropdown dropdown-end w-56 rounded-box border border-base-content/10 bg-base-100 p-1 shadow-lg"
+							bind:this={actionsPopoverEl}
+						>
+							{#if enableExport}
+								<Button
+									variant="ghost"
+									class="btn-sm w-full justify-start"
+									onclick={() => {
+										actionsPopoverEl?.hidePopover();
+										handleExport('csv');
+									}}
+								>
+									{strings.exportCsv}
+								</Button>
+								{#if xlsx}
+									<Button
+										variant="ghost"
+										class="btn-sm w-full justify-start"
+										onclick={() => {
+											actionsPopoverEl?.hidePopover();
+											handleExport('xlsx');
+										}}
+									>
+										{strings.exportExcel}
+									</Button>
+								{/if}
+							{/if}
 
-			{#each customBulkActions as bulkAction (bulkAction.label)}
-				{#if bulkAction.condition?.(selectedItems) ?? true}
-					{@const BulkIcon = bulkAction.icon}
-					<Button
-						variant={bulkAction.variant ?? 'ghost'}
-						class="btn-outline"
-						disabled={selected.size === 0}
-						onclick={() => handleBulkAction(bulkAction)}
-					>
-						<BulkIcon class="size-4" />
-						{bulkAction.label} ({selected.size})
-					</Button>
-				{/if}
-			{/each}
+							{#each customBulkActions as bulkAction, i (i)}
+								{#if bulkAction.condition?.(selectedItems) ?? true}
+									{@const BulkIcon = bulkAction.icon}
+									{@const isView = isViewBasedBulkAction(bulkAction)}
+									<Button
+										variant="ghost"
+										class="btn-sm w-full justify-start"
+										disabled={!isView && selected.size === 0}
+										title={bulkAction.tooltip}
+										onclick={() => {
+											actionsPopoverEl?.hidePopover();
+											handleBulkAction(bulkAction);
+										}}
+									>
+										<BulkIcon class="size-4" />
+										{bulkAction.label ?? bulkAction.tooltip}{#if !isView}
+											({selected.size})
+										{/if}
+									</Button>
+								{/if}
+							{/each}
 
-			{#if allowDelete}
-				{@const DeleteIcon = icons.delete}
-				<Button
-					variant="error"
-					class="btn-outline"
-					disabled={selected.size === 0}
-					onclick={handleDelete}
-				>
-					<DeleteIcon class="size-4" />
-					{deleteLabel} ({selected.size})
-				</Button>
-			{/if}
+							{#if allowDelete}
+								<Button
+									variant="ghost"
+									class="btn-sm w-full justify-start text-error"
+									disabled={selected.size === 0}
+									onclick={() => {
+										actionsPopoverEl?.hidePopover();
+										handleDelete();
+									}}
+								>
+									{deleteLabel} ({selected.size})
+								</Button>
+							{/if}
+						</div>
+					{/if}
 
-			{@const CreateIcon = icons.create}
-			<Button variant="primary" onclick={handleCreate}>
-				<CreateIcon class="size-5" />
-				{#if creation.label}
-					<span>{creation.label}</span>
+					{@const CreateIcon = icons.create}
+					<Button variant="primary" onclick={handleCreate}>
+						<CreateIcon class="size-5" />
+						{#if creation.label}
+							<span>{creation.label}</span>
+						{:else}
+							<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+						{/if}
+					</Button>
 				{:else}
-					<span>{strings.create}<span class="hidden sm:inline">&nbsp;{labelOne}</span></span>
+					{@render toolbarButtons(false)}
 				{/if}
-			</Button>
+			</div>
+
+			<div
+				bind:this={toolbarMeasureEl}
+				class="pointer-events-none invisible absolute flex items-center gap-2 whitespace-nowrap"
+				style="left:-9999px; top:-9999px;"
+				aria-hidden="true"
+			>
+				{@render toolbarButtons(true)}
+			</div>
 		{/snippet}
 	</Header>
 
@@ -391,8 +557,10 @@
 {/if}
 
 {#if pendingBulkAction !== null}
-	<Modal title={pendingBulkAction.action.label} onClose={() => (pendingBulkAction = null)}>
-		<p>{strings.deleteConfirm(pendingBulkAction.items.length, pendingBulkAction.action.label)}</p>
+	{@const pendingActionLabel =
+		pendingBulkAction.action.label ?? pendingBulkAction.action.tooltip ?? strings.actions}
+	<Modal title={pendingActionLabel} onClose={() => (pendingBulkAction = null)}>
+		<p>{strings.deleteConfirm(pendingBulkAction.items.length, pendingActionLabel)}</p>
 		<div class="flex justify-end gap-2 mt-4">
 			<Button variant="ghost" onclick={() => (pendingBulkAction = null)}>
 				{strings.cancel}

package/dist/components/crud/views/List.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type XlsxModule } from '../../table/export.js';
-import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, SearchConfiguration } from '../../../types/crud.js';
+import type { ActionConfiguration, ColumnDefinition, CustomAction, CustomBulkAction, SearchConfiguration, ViewBasedCustomBulkAction } from '../../../types/crud.js';
 import type { FilterSnapshot, ServerPagination, SortDirection, TableQuery } from '../../../types/table.js';
 declare function $$render<T extends object = Record<string, unknown>>(): {
     props: {
@@ -36,6 +36,7 @@ declare function $$render<T extends object = Record<string, unknown>>(): {
         onEdit?: (item: T) => void;
         onView?: (item: T) => void;
         onAction?: (action: CustomAction<T>, item: T) => void;
+        onBulkAction?: (action: ViewBasedCustomBulkAction<T>, items: T[]) => void;
     };
     exports: {};
     bindings: "";

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export type { BreadcrumbItem } from './types/breadcrumb.js';
 export { AttributeType } from './types/attribute.js';
 export type { AttributeMetadata, InterfaceMetadata, SelectOption, OptionsResolver, FormatterResolver, EmbeddedItemLabelResolver } from './types/attribute.js';
 export type { CellProps, CellComponent, CellFormatter, SortDirection, IndexedRow, DistinctEntry, PaginatedEnvelope, ServerPagination, FilterSnapshot, TableQuery } from './types/table.js';
-export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, CustomBulkAction, RowAction, SearchConfiguration } from './types/crud.js';
+export type { ColumnDefinition, FieldDefinition, ActionConfiguration, CustomAction, BaseCustomBulkAction, ViewBasedCustomBulkAction, EndpointBasedCustomBulkAction, CustomBulkAction, RowAction, SearchConfiguration } from './types/crud.js';
 export type { RuneforgeConfig } from './config/context.js';
 export { setConfig, getConfig } from './config/context.js';
 export type { CRUDIconSet, IconComponent } from './icons/types.js';

package/dist/types/crud.d.ts

@@ -99,14 +99,44 @@ export interface RowAction<T extends object = Record<string, unknown>> {
     condition?: (item: T) => boolean;
     run: (item: T) => void;
 }
-export interface CustomBulkAction<T extends object = Record<string, unknown>> {
-    label: string;
+export interface BaseCustomBulkAction<T extends object = Record<string, unknown>> {
+    /** Visible text on the button. Omit for an icon-only button — pass
+     * `tooltip` in that case so the action still has an accessible name and a
+     * hover hint, since `label` is what a collapsed "Acciones" menu item and
+     * the button's default `title`/`aria-label` fall back to otherwise. */
+    label?: string;
     icon: any;
-    endpoint: string;
+    /** Hover title shown on the button. Defaults to `label`. Set this
+     * explicitly when `label` is omitted (icon-only button) so there's still
+     * a hint on hover and an accessible name. */
+    tooltip?: string;
     variant?: string;
-    confirm?: boolean;
     condition?: (items: T[]) => boolean;
 }
+export interface ViewBasedCustomBulkAction<T extends object = Record<string, unknown>> extends BaseCustomBulkAction<T> {
+    kind: 'view';
+    /** Renders as a modal-like panel when the action runs, instead of POSTing
+     * to an endpoint once per selected item, mirroring `CustomAction.view`.
+     *
+     * A `view` action never requires a pre-existing selection: the button is
+     * enabled even with nothing selected. The component receives the current
+     * selection as `items` (possibly empty). */
+    view: Component<any>;
+}
+export interface EndpointBasedCustomBulkAction<T extends object = Record<string, unknown>> extends BaseCustomBulkAction<T> {
+    kind: 'endpoint';
+    /** POSTed once per selected item (`id` set in the FormData body), then
+     * `invalidateAll()`s. */
+    endpoint: string;
+    confirm?: boolean;
+}
+/** A toolbar action operating on the current selection — either a `view`
+ * (opens a modal-like panel, e.g. an import wizard) or an `endpoint`
+ * (POSTed once per selected item). The required `kind` discriminant picks
+ * which one: `'view'` brings `view` and forbids `endpoint`/`confirm`;
+ * `'endpoint'` brings `endpoint`/`confirm` and forbids `view` — see
+ * `ViewBasedCustomBulkAction` / `EndpointBasedCustomBulkAction`. */
+export type CustomBulkAction<T extends object = Record<string, unknown>> = ViewBasedCustomBulkAction<T> | EndpointBasedCustomBulkAction<T>;
 export interface SearchConfiguration {
     param?: string;
     placeholder?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "runeforge",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "SvelteKit toolkit for building metadata-driven CRUD interfaces with tables, forms, and actions",
   "license": "MIT",
   "author": "Ezequiel Puerta",