@neovici/cosmoz-queue 3.4.1 → 3.6.0

package/README.md

@@ -70,7 +70,7 @@ customElements.define('order-list-queue', component(OrderListQueue));
 | Prop           | Type                              | Default  | Description                                                            |
 | -------------- | --------------------------------- | -------- | ---------------------------------------------------------------------- |
 | `heading`      | `string`                          | --       | Title displayed above the tabs                                         |
-| `settingsId`   | `string?`                         | --       | Key for persisting omnitable column settings                           |
+| `settingsId`   | `string?`                         | --       | Key for persisting omnitable settings and the picked tab               |
 | `idHashParam`  | `string`                          | `'qid'`  | URL hash param for the selected item ID                                |
 | `tabHashParam` | `string`                          | `'qtab'` | URL hash param for the active tab                                      |
 | `details`      | `(item: I) => PromiseLike<D>`     | --       | Fetches full details for a list item                                   |
@@ -79,8 +79,8 @@ customElements.define('order-list-queue', component(OrderListQueue));
 | `view`         | `(thru, props) => TemplateResult` | --       | Renders the detail view                                                |
 | `loader`       | `(thru, props) => TemplateResult` | --       | Renders the loading skeleton                                           |
 | `pagination`   | `Pagination?`                     | --       | Server-side pagination config                                          |
-| `fallback`     | `string?`                         | --       | Default tab when none is set in URL hash                               |
-| `split`        | `SplitOpts?`                      | --       | Split.js configuration (sizes, min sizes)                              |
+| `fallback`     | `string?`                         | --       | Opening tab when the hash names none and no pick is remembered         |
+| `split`        | `SplitOpts?`                      | --       | Split.js configuration (sizes; `minSize`: minimum width per pane)      |
 | `afterHeading` | `unknown?`                        | --       | Extra content rendered after the heading                               |
 
 Use **`details`** when you control the fetch (most common). Use **`api`** when you want the queue to handle fetching via URL.
@@ -400,6 +400,7 @@ const MyQueue = ({ heading }: { heading: string }) => {
 | Hook                                              | Import                  | Purpose                                                                                                                |
 | ------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------- |
 | `useTabs({ items, hashParam, mobile, fallback })` | `@neovici/cosmoz-queue` | Manages overview/split/queue tabs. Returns `{ tabnav, activeTab }`.                                                    |
+| `useTabsPref({ persistKey, ...opts })`            | `@neovici/cosmoz-queue` | Remembers the tab picked for `useTabs`; spread its result into the `useTabs` options.                                  |
 | `useDataNav(items, opts)`                         | `@neovici/cosmoz-queue` | Item navigation with prev/next, URL hash sync. Returns `{ item, setItem, next, prev, forward, index }`.                |
 | `useSplit({ activeTab, ...splitOpts })`           | `@neovici/cosmoz-queue` | Initializes Split.js when in split mode.                                                                               |
 | `useListState()`                                  | `@neovici/cosmoz-queue` | Creates `items`, `selected`, `totalAvailable` state with setters.                                                      |

package/dist/queue/icons.d.ts

@@ -1,4 +1,4 @@
 export declare const list: import("lit-html").TemplateResult<1>;
-export declare const queue: import("lit-html").TemplateResult<1>;
 export declare const split: import("lit-html").TemplateResult<1>;
+export declare const queue: import("lit-html").TemplateResult<1>;
 //# sourceMappingURL=icons.d.ts.map

package/dist/queue/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/queue/icons.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,sCAcV,CAAC;AAER,eAAO,MAAM,KAAK,sCAgBjB,CAAC;AAEF,eAAO,MAAM,KAAK,sCA2BjB,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../src/queue/icons.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,IAAI,sCAAiB,CAAC;AACnC,eAAO,MAAM,KAAK,sCAAsB,CAAC;AACzC,eAAO,MAAM,KAAK,sCAAmB,CAAC"}

package/dist/queue/icons.js

@@ -1,61 +1,5 @@
-import { html } from 'lit-html';
-export const list = html ` <svg
-	width="18"
-	height="14"
-	viewBox="0 0 18 14"
-	fill="none"
-	stroke="currentColor"
-	xmlns="http://www.w3.org/2000/svg"
->
-	<path
-		d="M1 2C1 1.44772 1.44772 1 2 1H16C16.5523 1 17 1.44772 17 2V4.57143C17 5.12371 16.5523 5.57143 16 5.57143H2C1.44772 5.57143 1 5.12371 1 4.57143V2Z"
-		stroke-width="1.5"
-	/>
-	<line x1="1" y1="9.39288" x2="17" y2="9.39288" stroke-width="1.5" />
-	<line x1="1" y1="12.8214" x2="17" y2="12.8214" stroke-width="1.5" />
-</svg>`;
-export const queue = html `
-	<svg
-		width="22"
-		height="16"
-		viewBox="0 0 22 16"
-		fill="none"
-		stroke="currentColor"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<rect x="5.44409" y="1" width="11.1111" height="14" stroke-width="1.5" />
-		<path d="M18.7776 3.3335H20.9998V12.6668H18.7776" stroke-width="1.5" />
-		<path
-			d="M3.22217 12.6665L0.999946 12.6665L0.999947 3.33317L3.22217 3.33317"
-			stroke-width="1.5"
-		/>
-	</svg>
-`;
-export const split = html `
-	<svg
-		width="19"
-		height="14"
-		viewBox="0 0 19 14"
-		fill="none"
-		stroke="currentColor"
-		xmlns="http://www.w3.org/2000/svg"
-	>
-		<rect x="10" y="1" width="8" height="12" stroke-width="1.5" />
-		<line
-			x1="7"
-			y1="12.1787"
-			x2="4.15643e-07"
-			y2="12.1787"
-			stroke-width="1.5"
-		/>
-		<line x1="7" y1="8.75" x2="4.15643e-07" y2="8.75" stroke-width="1.5" />
-		<line
-			x1="7"
-			y1="5.17871"
-			x2="4.15643e-07"
-			y2="5.17871"
-			stroke-width="1.5"
-		/>
-		<line x1="7" y1="1.75" x2="4.15643e-07" y2="1.75" stroke-width="1.5" />
-	</svg>
-`;
+import { columns02Icon, listIcon, squareIcon, } from '@neovici/cosmoz-icons/untitled';
+const size = { width: '18', height: '18' };
+export const list = listIcon(size);
+export const split = columns02Icon(size);
+export const queue = squareIcon(size);

package/dist/queue/index.d.ts

@@ -16,5 +16,6 @@ export { useListSSE } from './use-list-sse';
 export { default as useDataNav } from './use-data-nav';
 export { useMobile } from './use-mobile';
 export { default as useTabs } from './use-tabs';
+export { default as useTabsPref } from './use-tabs-pref';
 export { filter, notify, useList, useListState } from './use-list';
 //# sourceMappingURL=index.d.ts.map

package/dist/queue/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAGhD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/queue/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EACN,eAAe,EACf,OAAO,IAAI,QAAQ,EACnB,YAAY,GACZ,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAEzC,cAAc,UAAU,CAAC;AAEzB,mBAAmB,SAAS,CAAC;AAC7B,YAAY,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAGzC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAG7C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAGpE,OAAO,EACN,QAAQ,EACR,UAAU,EACV,SAAS,EACT,OAAO,IAAI,eAAe,GAC1B,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/queue/index.js

@@ -21,5 +21,6 @@ export { useListSSE } from './use-list-sse';
 export { default as useDataNav } from './use-data-nav';
 export { useMobile } from './use-mobile';
 export { default as useTabs } from './use-tabs';
+export { default as useTabsPref } from './use-tabs-pref';
 // List hooks
 export { filter, notify, useList, useListState } from './use-list';

package/dist/queue/queue.d.ts

@@ -1,5 +1,6 @@
 import type { TemplateResult } from 'lit-html';
 import { RenderQueue } from './render';
+import { SplitConfig } from './split';
 import { Pagination } from './types';
 import useQueue, { UseQueue } from './use-queue';
 type QueueProps<I> = ReturnType<typeof useQueue<I>>;
@@ -7,17 +8,6 @@ type ViewProps<I> = Omit<QueueProps<I>, 'nav'> & {
     nav: TemplateResult;
     item: I;
 };
-/**
- * @deprecated Use `initial-size` and `min-size` attributes on
- * `<cosmoz-resizable-view>` instead (mapped automatically from this prop).
- * `expandToMin` and `snapOffset` have no equivalent and are silently ignored.
- */
-export interface SplitConfig {
-    sizes?: [number, number];
-    minSize?: [number] | number;
-    expandToMin?: boolean;
-    snapOffset?: number;
-}
 interface Props<I, D> extends Pick<UseQueue<I>, 'id' | 'api' | 'fallback'>, Pick<RenderQueue<I, D>, 'details' | 'afterHeading' | 'header'> {
     list: (thru: Record<string, any>, props: QueueProps<I> & {
         onRef: (el?: Element) => void;

package/dist/queue/queue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,WAAW;IAC3B,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBA+GjD,CAAC"}
+{"version":3,"file":"queue.d.ts","sourceRoot":"","sources":["../../src/queue/queue.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE/C,OAAO,EAAe,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAErC,OAAO,QAAQ,EAAE,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjD,KAAK,UAAU,CAAC,CAAC,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,KAAK,SAAS,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,GAAG;IAChD,GAAG,EAAE,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,CAAC;CACR,CAAC;AAEF,UAAU,KAAK,CAAC,CAAC,EAAE,CAAC,CACnB,SACC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,UAAU,CAAC,EAC5C,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,CAAC;IAC/D,IAAI,EAAE,CACL,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG;QAAE,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,KACpD,cAAc,CAAC;IACpB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IACzE,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,cAAc,CAAC;IAC3E,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,mGAAmG;IACnG,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD,eAAO,MAAM,KAAK,GAAI,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,sBA0GjD,CAAC"}

package/dist/queue/queue.js

@@ -1,15 +1,18 @@
 import { updateWith } from '../util/polymer-property-changed-event.js';
 import { renderQueue } from './render';
+import { computeSplitAttrs } from './split';
 import useAsyncAction from './use-async-action';
 import useQueue from './use-queue';
 export const queue = (props) => {
     const { heading, afterHeading, header, settingsId, idHashParam = 'qid', tabHashParam = 'qtab', id, api, details, list, view, loader, pagination, fallback, split, } = props;
+    const persistKey = settingsId ? `${settingsId}-split` : undefined;
     const queueProps = useQueue({
         id,
         api,
         idHashParam,
         tabHashParam,
         fallback,
+        persistKey,
     });
     const { index, hideActions, items, setItems, setSelected, totalAvailable, setTotalAvailable, onItemClick, rowPartFn, nav, tabnav, } = queueProps;
     const { listRef, onAsyncSimpleAction } = useAsyncAction(nav);
@@ -17,14 +20,7 @@ export const queue = (props) => {
         ...queueProps,
         onAsyncSimpleAction,
     };
-    const splitAttrs = split
-        ? {
-            initialSize: split.sizes?.[0] != null ? `${split.sizes[0]}%` : '50%',
-            minSize: split.minSize != null
-                ? `${Array.isArray(split.minSize) ? split.minSize[0] : split.minSize}`
-                : undefined,
-        }
-        : { initialSize: '50%', minSize: '100' };
+    const splitAttrs = computeSplitAttrs(split);
     return renderQueue({
         details,
         heading,
@@ -36,7 +32,7 @@ export const queue = (props) => {
         totalAvailable,
         nav,
         pagination,
-        persistKey: settingsId ? `${settingsId}-split` : undefined,
+        persistKey,
         splitAttrs,
         list: list({
             id: 'list',

package/dist/queue/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/queue/render.ts"],"names":[],"mappings":"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"}

package/dist/queue/render.js

@@ -18,6 +18,7 @@ const _emptySlide = {
 const emptySlide = () => _emptySlide;
 export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
 			variant="secondary"
+			icon-only
 			class="button-nav prev"
 			title="${t('Previous item')}"
 			?disabled=${!prev}
@@ -28,6 +29,7 @@ export const renderNav = ({ next, prev, }) => html ` <cosmoz-button
 		</cosmoz-button>
 		<cosmoz-button
 			variant="secondary"
+			icon-only
 			title="${t('Next item')}"
 			class="button-nav next"
 			?disabled=${!next}
@@ -48,6 +50,7 @@ export const renderPagination = (pagination) => {
 			class="button-page page-prev"
 			size="sm"
 			variant="secondary"
+			icon-only
 			?disabled=${!(pageNumber > 1)}
 			@click=${(e) => onPage(e.ctrlKey ? 1 : pageNumber - 1)}
 		>
@@ -56,6 +59,7 @@ export const renderPagination = (pagination) => {
 		<cosmoz-button
 			title="${t('Next page')}"
 			variant="secondary"
+			icon-only
 			class="button-page page-next"
 			size="sm"
 			?disabled=${!(pageNumber < totalPages)}

package/dist/queue/split.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Split-view sizing options for `queue()` and `useQueue()`.
+ *
+ * Mapped to the `initial-size` / `min-size` attributes of
+ * `<cosmoz-resizable-view>` by both `queue()` and `useQueue()`.
+ */
+export interface SplitConfig {
+    /** Initial widths of the two panes in percent. */
+    sizes?: [number, number];
+    /** Minimum widths per pane, forwarded to the `min-size` attribute. */
+    minSize?: number[] | number;
+    /** @deprecated Split.js leftovers, ignored. */
+    expandToMin?: boolean;
+    /** @deprecated Split.js leftovers, ignored. */
+    snapOffset?: number;
+}
+/**
+ * `initial-size` / `min-size` attribute values for `<cosmoz-resizable-view>`.
+ */
+export interface SplitAttrs {
+    initialSize: string;
+    minSize?: string;
+}
+/**
+ * Maps the `split` option to `initial-size` / `min-size` attribute values.
+ * Shared by `queue()` and `useQueue()`, consumed via `renderQueue`.
+ */
+export declare const computeSplitAttrs: (split?: SplitConfig) => SplitAttrs;
+//# sourceMappingURL=split.d.ts.map

package/dist/queue/split.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../src/queue/split.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC3B,kDAAkD;IAClD,KAAK,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,EAAE,GAAG,MAAM,CAAC;IAC5B,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,QAAQ,WAAW,KAAG,UAWd,CAAC"}

package/dist/queue/split.js

@@ -0,0 +1,15 @@
+import { array } from '@neovici/cosmoz-utils/array';
+/**
+ * Maps the `split` option to `initial-size` / `min-size` attribute values.
+ * Shared by `queue()` and `useQueue()`, consumed via `renderQueue`.
+ */
+export const computeSplitAttrs = (split) => split
+    ? {
+        initialSize: split.sizes?.[0] != null ? `${split.sizes[0]}%` : '50%',
+        // `''` must never reach renderQueue: it would bypass its `?? '100'`
+        // fallback and render an empty `min-size` (no pane minimums).
+        minSize: split.minSize != null
+            ? array(split.minSize).join(' ') || undefined
+            : undefined,
+    }
+    : { initialSize: '50%', minSize: '100' };

package/dist/queue/style.js

@@ -17,7 +17,7 @@ export const base = css `
 	.tabn-tab {
 		flex: 0 1 0.000001px;
 		flex: 0 1 min-content;
-		padding: 11px 16px;
+		padding: var(--cz-queue-tab-padding, 11px 16px);
 		background: inherit;
 		color: var(--cz-color-gray-400);
 	}

package/dist/queue/use-pref.d.ts

@@ -1,5 +1,5 @@
 type Returned<T> = [T, (v: T) => void];
-export declare function usePref<T extends string>(key: string): Returned<T>;
-export declare function usePref<T extends string>(key: string, defaultValue: T): Returned<T>;
+export declare function usePref<T extends string>(key?: string): Returned<T>;
+export declare function usePref<T extends string>(key: string | undefined, defaultValue: T): Returned<T>;
 export {};
 //# sourceMappingURL=use-pref.d.ts.map

package/dist/queue/use-pref.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AACvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}
+{"version":3,"file":"use-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-pref.ts"],"names":[],"mappings":"AAEA,KAAK,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC,CAAC;AAmBvC,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrE,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACvC,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,YAAY,EAAE,CAAC,GACb,QAAQ,CAAC,CAAC,CAAC,CAAC"}

package/dist/queue/use-pref.js

@@ -1,11 +1,29 @@
-import { useState, useCallback } from '@pionjs/pion';
+import { useCallback, useState } from '@pionjs/pion';
+const loadPref = (key) => {
+    try {
+        return key ? localStorage.getItem(`pref-${key}`) : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+const savePref = (key, value) => {
+    if (!key)
+        return;
+    try {
+        localStorage.setItem(`pref-${key}`, value);
+    }
+    catch {
+        // storage blocked
+    }
+};
 export function usePref(key, defaultValue) {
-    const [pref, setPref] = useState(() => localStorage.getItem(`pref-${key}`) || defaultValue);
+    const [pref, setPref] = useState(() => loadPref(key) || defaultValue);
     return [
         pref,
         useCallback((value) => {
-            localStorage.setItem(`pref-${key}`, value);
+            savePref(key, value);
             setPref(value);
-        }, [setPref]),
+        }, [key, setPref]),
     ];
 }

package/dist/queue/use-queue.d.ts

@@ -1,3 +1,4 @@
+import { SplitConfig } from './split';
 import { useListState } from './use-list';
 import { Options as UseTabsOptions } from './use-tabs';
 /**
@@ -13,6 +14,7 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
     tabHashParam?: string;
     idHashParam?: string;
     onActivate?: (name: string) => void;
+    persistKey?: string;
     /**
      * @deprecated Use the `details` property instead. The `api` property will be removed in v2.0.0.
      *
@@ -34,8 +36,10 @@ interface Opts<I> extends ReturnType<typeof useListState<I>>, Pick<UseTabsOption
      */
     api?: (id: string, item: I) => string;
     id?: (i: I) => string;
+    /** @deprecated Use `initial-size` / `min-size` attributes on `<cosmoz-resizable-view>` instead (mapped automatically to the returned `splitAttrs`). */
+    split?: SplitConfig;
 }
-declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, ...thru }: Opts<I>) => {
+declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }: Opts<I>) => {
     tabnav: import("@neovici/cosmoz-tabs/next").Result<{
         readonly name: "overview";
         readonly title: string;
@@ -72,6 +76,7 @@ declare const useQueue: <I>({ id, api, tabHashParam, idHashParam, fallback, onAc
     }>;
     activeTab: "split" | "overview" | "queue";
     mobile: boolean;
+    splitAttrs: import("./split").SplitAttrs;
     hideActions: boolean;
     index: number;
     rowPartFn: (row: I) => string | undefined;
@@ -133,6 +138,7 @@ declare const _default: <I>(thru: UseQueue<I>) => {
     }>;
     activeTab: "split" | "overview" | "queue";
     mobile: boolean;
+    splitAttrs: import("./split").SplitAttrs;
     hideActions: boolean;
     index: number;
     rowPartFn: (row: I) => string | undefined;

package/dist/queue/use-queue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAMhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;CACtB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,uEAQlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAhGM,MAAM,GAAG,SAAS;qBA2I3B,KAAK;oBAtBA,MAAM;;;;;;;;;;;;;;;;;;CAoDjB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAhLpB,MAAM,GAAG,SAAS;qBA2I3B,KAAK;oBAtBA,MAAM;;;;;;;;;;;;;;;;;;;AA2DlB,wBACgD"}
+{"version":3,"file":"use-queue.d.ts","sourceRoot":"","sources":["../../src/queue/use-queue.ts"],"names":[],"mappings":"AAMA,OAAO,EAAqB,WAAW,EAAE,MAAM,SAAS,CAAC;AAGzD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAgB,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC;AAOhE;;GAEG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAC;AAEhD;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,CAAC,EAC7B,MAAM,CAAC,GAAG,SAAS,EACnB,IAAI,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,KAClB,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAKhC,CAAC;AAqDH,UAAU,IAAI,CAAC,CAAC,CACf,SACC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,EAClC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;;;;;;;;;;OAkBG;IACH,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IACtC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACtB,uJAAuJ;IACvJ,KAAK,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,QAAA,MAAM,QAAQ,GAAI,CAAC,EAAE,0FAUlB,IAAI,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BArGM,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;CAqDhB,CAAC;AAEF,MAAM,MAAM,QAAQ,CAAC,CAAC,IAAI,IAAI,CAC7B,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACjC,MAAM,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC,CAAC,CACxC,CAAC;yBAEc,CAAC,EAAE,MAAM,QAAQ,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAzLpB,MAAM,GAAG,SAAS;qBA4I5B,KAAK;oBAfA,MAAM;;;;;;;;;;;;;;;;;;;AA4DjB,wBACgD"}

package/dist/queue/use-queue.js

@@ -3,10 +3,12 @@ import { memoize } from '@neovici/cosmoz-utils/memoize';
 import { useCallback, useMemo } from '@pionjs/pion';
 import { json } from '../util/fetch/fetch';
 import { useMobile } from './use-mobile';
+import { computeSplitAttrs } from './split';
 import useDataNav from './use-data-nav';
 import useKeyNav from './use-key-nav';
 import { useListState } from './use-list';
 import useTabs from './use-tabs';
+import useTabsPref from './use-tabs-pref';
 import useUpdates from './use-updates';
 import { getItems, normalizeHeaders } from './util';
 /**
@@ -31,26 +33,34 @@ const useQNav = ({ id, api, items, ...thru }) => {
             'See: https://github.com/Neovici/cosmoz-queue#migration-from-api-to-details');
     }
     /* eslint-enable no-console, no-template-curly-in-string */
-    const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]), pass = useDataNav(items, {
+    const details = useMemo(() => api && memoize((item) => json(api(id(item), item))), [id, api]);
+    const pass = useDataNav(items, {
         ...thru,
         id,
     });
     return { ...pass, id, details };
 };
-const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, ...thru }) => {
-    const { items: _items, selected } = thru, mobile = useMobile(), items = useMemo(() => normalizeHeaders(_items), [_items]), queueItems = useMemo(() => getItems(items, selected), [items, selected]), { tabnav, activeTab } = useTabs({
+const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActivate, split, persistKey, ...thru }) => {
+    const { items: _items, selected } = thru;
+    const mobile = useMobile();
+    const items = useMemo(() => normalizeHeaders(_items), [_items]);
+    const queueItems = useMemo(() => getItems(items, selected), [items, selected]);
+    const { tabnav, activeTab } = useTabs({
         items: queueItems,
         hashParam: tabHashParam,
-        fallback,
-        onActivate,
+        ...useTabsPref({ persistKey, fallback, except: 'queue', onActivate }),
         mobile,
-    }), nav = useQNav({
+    });
+    const nav = useQNav({
         id,
         api,
         items: queueItems,
         hashParam: idHashParam,
         maintainSelection: ['queue', 'split'].includes(activeTab),
-    }), { item, setItem } = nav, ensue = useCallback((itemId) => {
+    });
+    const splitAttrs = useMemo(() => computeSplitAttrs(split), [split]);
+    const { item, setItem } = nav;
+    const ensue = useCallback((itemId) => {
         if (id(item) !== itemId) {
             return;
         }
@@ -59,28 +69,32 @@ const useQueue = ({ id = _id, api, tabHashParam, idHashParam, fallback, onActiva
     }, [item, id, items]);
     useKeyNav({ activeTab, ...nav });
     useUpdates({ ensue, ...nav });
+    const index = useMemo(() => items.indexOf(item), [item, items]);
+    const rowPartFn = useRowPartFn(item, id);
+    const onItemClick = useCallback((e) => {
+        const { item: clickedItem, index, activate: mustActivate, } = e.detail;
+        const mini = e
+            .composedPath()
+            .find((el) => el instanceof Element && el.matches?.('[mini]'));
+        const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
+        setItem(clickedItem ?? items[index]);
+        if (activate) {
+            const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
+            if (next)
+                tabnav.activate(next);
+        }
+        e.preventDefault();
+    }, [activeTab, items]);
     return {
         ...thru,
         tabnav,
         activeTab,
         mobile,
+        splitAttrs,
         hideActions: selected?.length > 0 && activeTab === 'split',
-        index: useMemo(() => items.indexOf(item), [item, items]),
-        rowPartFn: useRowPartFn(item, id),
-        onItemClick: useCallback((e) => {
-            const { item: clickedItem, index, activate: mustActivate, } = e.detail;
-            const mini = e
-                .composedPath()
-                .find((el) => el instanceof Element && el.matches?.('[mini]'));
-            const activate = mustActivate ?? (mini ? ['split', 'queue'] : undefined);
-            setItem(clickedItem ?? items[index]);
-            if (activate) {
-                const next = array(activate).find((name) => tabnav.tabs.find((tab) => tab.name === name && !tab.disabled));
-                if (next)
-                    tabnav.activate(next);
-            }
-            e.preventDefault();
-        }, [activeTab, items]),
+        index,
+        rowPartFn,
+        onItemClick,
         ensue,
         nav,
     };

package/dist/queue/use-tabs-pref.d.ts

@@ -0,0 +1,12 @@
+interface Opts {
+    persistKey?: string;
+    fallback?: string;
+    except?: string;
+    onActivate?: (name: string) => void;
+}
+declare const _default: ({ persistKey, fallback, except, onActivate }: Opts) => {
+    fallback: string | undefined;
+    onActivate: (name: string) => void;
+};
+export default _default;
+//# sourceMappingURL=use-tabs-pref.d.ts.map

package/dist/queue/use-tabs-pref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-pref.d.ts","sourceRoot":"","sources":["../../src/queue/use-tabs-pref.ts"],"names":[],"mappings":"AAIA,UAAU,IAAI;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;yBAEe,8CAA8C,IAAI;;uBAQxD,MAAM;;AARhB,wBAeE"}

package/dist/queue/use-tabs-pref.js

@@ -0,0 +1,12 @@
+import { useCallback } from '@pionjs/pion';
+import { usePref } from './use-pref';
+export default ({ persistKey, fallback, except, onActivate }) => {
+    const [stored, setStored] = usePref(persistKey ? `${persistKey}-tab` : undefined);
+    return {
+        fallback: stored && stored !== except ? stored : fallback,
+        onActivate: useCallback((name) => {
+            setStored(name);
+            onActivate?.(name);
+        }, [setStored, onActivate]),
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-queue",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "description": "A reusable queue component for master-detail views with list, split, and queue modes",
   "keywords": [
     "web-components",
@@ -53,6 +53,7 @@
     ".": "./dist/index.js",
     "./use-queue": "./dist/queue/use-queue.js",
     "./use-tabs": "./dist/queue/use-tabs.js",
+    "./use-tabs-pref": "./dist/queue/use-tabs-pref.js",
     "./use-data-nav": "./dist/queue/use-data-nav.js",
     "./use-list": "./dist/queue/use-list.js",
     "./util/fetch": "./dist/util/fetch/fetch.js",
@@ -64,6 +65,7 @@
   "dependencies": {
     "@neovici/cosmoz-button": "^1.1.0",
     "@neovici/cosmoz-form": "^4.0.0",
+    "@neovici/cosmoz-icons": "^1.6.0",
     "@neovici/cosmoz-omnitable": "^19.0.0",
     "@neovici/cosmoz-resizable": "^2.0.0",
     "@neovici/cosmoz-router": "^11.2.8",