@galaxy-io/dls 1.6.0 → 2.0.0

package/dist/navigation/Breadcrumbs.js

@@ -0,0 +1,243 @@
+import { Placement } from "../theme/enums.js";
+import Text, { TextSize, TextVariant, TextWeight } from "../text/Text.js";
+import Icon, { IconVariant } from "../icons/Icon.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import Link, { LinkUnderline, LinkVariant } from "../links/Link.js";
+import Menu, { MenuItem, MenuSize } from "../menu/Menu.js";
+/* empty css                      */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { match } from "ts-pattern";
+import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react";
+//#region src/navigation/Breadcrumbs.tsx
+/**
+* Where the current page sits in the app's hierarchy, from the top level down (Workspace /
+* Project / Pipeline / Run), with a way back up. Every crumb but the last is a link (rendered
+* through a router component via `as`); the last is the current page, as plain text with
+* `aria-current="page"`. Crumbs are joined by a quiet separator (a slash or a caret). A trail
+* longer than `maxItems` collapses its middle into a "…" button that opens a `Menu` of the hidden
+* crumbs, so the trail stays on one line; labels truncate with a tooltip when it is too wide.
+*
+* Not `Tabs` (peers, not ancestors), not `Stepper` (a sequence to move through), not a path input.
+*
+* SSR: the collapse is count-based, so server and client render the same trail. Nothing touches
+* `window` or `document` at module scope.
+*/
+/** Canonical rungs, subset; only the text step applies (a crumb has no control height). */
+var BreadcrumbsSize = /* @__PURE__ */ function(BreadcrumbsSize) {
+	/** body_sm crumbs (12 / 16), 12px icons. Topbars and dense headers. */
+	BreadcrumbsSize["SMALL"] = "SMALL";
+	/** body_md crumbs (13 / 16), 14px icons. The default. */
+	BreadcrumbsSize["MEDIUM"] = "MEDIUM";
+	return BreadcrumbsSize;
+}({});
+/** The mark drawn between crumbs. */
+var BreadcrumbsSeparator = /* @__PURE__ */ function(BreadcrumbsSeparator) {
+	/** A "/" in tertiary text. The default. */
+	BreadcrumbsSeparator["SLASH"] = "SLASH";
+	/** A `CaretRightIcon` in the tertiary icon color. */
+	BreadcrumbsSeparator["CARET"] = "CARET";
+	return BreadcrumbsSeparator;
+}({});
+/** The fewest crumbs a collapsed trail shows: the first, "…", the current page. */
+var MIN_ITEMS = 3;
+/** The characters a long current page keeps (the `8ch` in `CURRENT_LONG_CSS`). */
+var CURRENT_KEPT_CHARACTERS = 8;
+/** The default accessible name of the landmark. */
+var DEFAULT_ARIA_LABEL = "Breadcrumb";
+/** The landmark; the row is as tall as the `X_SMALL` "…" button, so collapsing never shifts it. */
+var Root = /*#__PURE__*/ styled("nav")({
+	name: "Root",
+	class: "gx-Breadcrumbs-rdzrj0m",
+	propsAsIs: false
+});
+var List = /*#__PURE__*/ styled("ol")({
+	name: "List",
+	class: "gx-Breadcrumbs-List-lnd26k4",
+	propsAsIs: false
+});
+/** One list item: its separator (after the first) and the crumb. */
+var Crumb = /*#__PURE__*/ styled("li")({
+	name: "Crumb",
+	class: "gx-Breadcrumbs-Crumb-c6ilfri",
+	propsAsIs: false
+});
+var SeparatorSlot = /*#__PURE__*/ styled("span")({
+	name: "SeparatorSlot",
+	class: "gx-Breadcrumbs-SeparatorSlot-sjgkhuc",
+	propsAsIs: false
+});
+var CrumbContent = /*#__PURE__*/ styled("span")({
+	name: "CrumbContent",
+	class: "gx-Breadcrumbs-CrumbContent-c1tsq0hr",
+	propsAsIs: false
+});
+var CurrentPage = /*#__PURE__*/ styled("span")({
+	name: "CurrentPage",
+	class: "gx-Breadcrumbs-CurrentPage-cnx9rpd",
+	propsAsIs: false
+});
+/** Gap per text step (custom property on `Root`). */
+var BREADCRUMBS_SIZE_TO_CSS_MAP = {
+	["SMALL"]: "gx-Breadcrumbs-SMALL-s1vtmzbd",
+	["MEDIUM"]: "gx-Breadcrumbs-MEDIUM-m1isjdcl"
+};
+/** Each crumb's color comes from here; its text and icon inherit it. */
+var CRUMB_KIND_TO_CSS_MAP = {
+	["LINK"]: "gx-Breadcrumbs-LINK-l3mhh4t",
+	["TEXT"]: "gx-Breadcrumbs-TEXT-td0y1an",
+	["CURRENT"]: "gx-Breadcrumbs-CURRENT-c1oky86c",
+	["ELLIPSIS"]: "gx-Breadcrumbs-ELLIPSIS-e3y6zao"
+};
+/**
+* A current page longer than `CURRENT_KEPT_CHARACTERS` keeps about that many characters while
+* ancestors give up width first.
+*/
+var CURRENT_LONG_CSS = "gx-Breadcrumbs-CURRENT_LONG_CSS-ch05qd8";
+/** A shorter current page never shrinks (a `ch` minimum would make it wider than its label). */
+var CURRENT_SHORT_CSS = "gx-Breadcrumbs-CURRENT_SHORT_CSS-cm65n5z";
+/** Lets the label inside a crumb link truncate. */
+var CRUMB_LINK_CSS = "gx-Breadcrumbs-CRUMB_LINK_CSS-c9pfn9";
+var BREADCRUMBS_SIZE_TO_TEXT_SIZE_MAP = {
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD
+};
+/** Crumb icon px per rung: one step below the rung's III-A.4 icon (Mitch, 2026-10-04). */
+var BREADCRUMBS_SIZE_TO_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 14
+};
+/** The caret separator: 12px at both rungs, the collapsible Widget's caret. */
+var BREADCRUMBS_SIZE_TO_SEPARATOR_ICON_PX_MAP = {
+	["SMALL"]: 12,
+	["MEDIUM"]: 12
+};
+var BREADCRUMBS_SIZE_TO_MENU_SIZE_MAP = {
+	["SMALL"]: MenuSize.SMALL,
+	["MEDIUM"]: MenuSize.MEDIUM
+};
+var BREADCRUMBS_SEPARATOR_TO_NODE_MAP = {
+	["SLASH"]: (size) => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: BREADCRUMBS_SIZE_TO_TEXT_SIZE_MAP[size],
+		variant: TextVariant.TERTIARY,
+		children: "/"
+	}),
+	["CARET"]: (size) => /* @__PURE__ */ jsx(Icon, {
+		component: CaretRightIcon,
+		size: BREADCRUMBS_SIZE_TO_SEPARATOR_ICON_PX_MAP[size],
+		variant: IconVariant.TERTIARY
+	})
+};
+/** The shown slots and the hidden crumbs for a trail and a limit. */
+function collapse(items, maxItems) {
+	const limit = Math.max(MIN_ITEMS, Number.isNaN(maxItems) ? MIN_ITEMS : maxItems);
+	const last = items.length - 1;
+	const entryOf = (item, index) => {
+		const key = String(index);
+		if (index === last) return {
+			kind: "CURRENT",
+			item,
+			key
+		};
+		if (item.href !== void 0) return {
+			kind: "LINK",
+			item,
+			href: item.href,
+			key
+		};
+		return {
+			kind: "TEXT",
+			item,
+			key
+		};
+	};
+	if (items.length <= limit) return {
+		shown: items.map(entryOf),
+		hidden: []
+	};
+	const tailStart = items.length - (limit - 2);
+	const first = items[0];
+	return {
+		shown: [
+			...first === void 0 ? [] : [entryOf(first, 0)],
+			{
+				kind: "ELLIPSIS",
+				key: "ellipsis"
+			},
+			...items.slice(tailStart).map((item, offset) => entryOf(item, tailStart + offset))
+		],
+		hidden: items.slice(1, tailStart).map((item, offset) => ({
+			item,
+			key: String(1 + offset)
+		}))
+	};
+}
+/** A trail of links up the app's hierarchy, ending at the current page. */
+var Breadcrumbs = forwardRef(function Breadcrumbs({ items, separator = "SLASH", maxItems = 4, size = "MEDIUM", as, ariaLabel, id, className, style, ...rest }, ref) {
+	const { shown, hidden } = collapse(items, maxItems);
+	const name = ariaLabel || rest["aria-label"] || (rest["aria-labelledby"] ? void 0 : DEFAULT_ARIA_LABEL);
+	const asProps = as === void 0 ? {} : { as };
+	const contentOf = (item, isCurrent) => /* @__PURE__ */ jsxs(CrumbContent, { children: [item.icon !== void 0 && /* @__PURE__ */ jsx(Icon, {
+		component: item.icon,
+		size: BREADCRUMBS_SIZE_TO_ICON_PX_MAP[size],
+		variant: IconVariant.INHERIT
+	}), /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		size: BREADCRUMBS_SIZE_TO_TEXT_SIZE_MAP[size],
+		weight: isCurrent ? TextWeight.MEDIUM : TextWeight.REGULAR,
+		variant: TextVariant.INHERIT,
+		lineClamp: 1,
+		shouldTooltipOnOverflow: true,
+		children: item.label
+	})] });
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref,
+		"aria-label": name,
+		id,
+		className: cx(BREADCRUMBS_SIZE_TO_CSS_MAP[size], className),
+		style,
+		children: /* @__PURE__ */ jsx(List, { children: shown.map((entry, position) => /* @__PURE__ */ jsxs(Crumb, {
+			className: cx(CRUMB_KIND_TO_CSS_MAP[entry.kind], entry.kind === "CURRENT" && (entry.item.label.length > CURRENT_KEPT_CHARACTERS ? CURRENT_LONG_CSS : CURRENT_SHORT_CSS)),
+			children: [position > 0 && /* @__PURE__ */ jsx(SeparatorSlot, {
+				"aria-hidden": true,
+				children: BREADCRUMBS_SEPARATOR_TO_NODE_MAP[separator](size)
+			}), match(entry).with({ kind: "ELLIPSIS" }, () => /* @__PURE__ */ jsx(Menu, {
+				trigger: /* @__PURE__ */ jsx(Button, {
+					icon: DotsThreeIcon,
+					variant: ButtonVariant.TERTIARY,
+					size: ButtonSize.X_SMALL,
+					ariaLabel: "Show hidden breadcrumbs"
+				}),
+				size: BREADCRUMBS_SIZE_TO_MENU_SIZE_MAP[size],
+				placement: Placement.BOTTOM_START,
+				children: hidden.map(({ item, key }) => item.href !== void 0 ? /* @__PURE__ */ jsx(MenuItem, {
+					label: item.label,
+					...item.icon === void 0 ? {} : { icon: item.icon },
+					href: item.href,
+					...asProps
+				}, key) : /* @__PURE__ */ jsx(MenuItem, {
+					label: item.label,
+					...item.icon === void 0 ? {} : { icon: item.icon },
+					isDisabled: true
+				}, key))
+			})).with({ kind: "LINK" }, ({ item, href }) => /* @__PURE__ */ jsx(Link, {
+				href,
+				...asProps,
+				variant: LinkVariant.INHERIT,
+				underline: LinkUnderline.HOVER,
+				className: CRUMB_LINK_CSS,
+				children: contentOf(item, false)
+			})).with({ kind: "TEXT" }, ({ item }) => contentOf(item, false)).with({ kind: "CURRENT" }, ({ item }) => /* @__PURE__ */ jsx(CurrentPage, {
+				"aria-current": "page",
+				children: contentOf(item, true)
+			})).exhaustive()]
+		}, entry.key)) })
+	});
+});
+Breadcrumbs.displayName = "Breadcrumbs";
+//#endregion
+export { BreadcrumbsSeparator, BreadcrumbsSize, Breadcrumbs as default };

package/dist/navigation/CommandPalette.d.ts

@@ -0,0 +1,83 @@
+import type { Icon as PhosphorIcon } from "@phosphor-icons/react";
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+/** One command in the palette. */
+export interface CommandPaletteItem {
+    /** Stable id: the React key, and what recents remember. Unique within `items`. */
+    id: string;
+    /** Row text; also what the built-in filter matches. */
+    label: string;
+    /** Second line under the label, one line; the filter matches it too. */
+    description?: string;
+    /** Phosphor icon component before the label, sized and colored by the row. */
+    icon?: PhosphorIcon;
+    /** Anything else before the label (an `Avatar`, a `Beacon`). Must not be interactive. */
+    leading?: ReactNode;
+    /** Shortcut shown as `Kbd` caps at the end of the row, in `useHotkey` grammar. Display only. */
+    hotKeys?: string[];
+    /** Heading this command is listed under. Items without one come first, with no heading. */
+    group?: string;
+    /** Extra words the built-in filter matches ("settings" for "Preferences"). Not shown. */
+    keywords?: string[];
+    /** Shown in the disabled colors; skipped by the arrow keys and cannot be chosen. */
+    isDisabled?: boolean;
+    /** Runs when the command is chosen (Enter or click), after the palette starts closing. */
+    onSelect: () => void;
+}
+export interface CommandPaletteProps extends AriaAttributes {
+    /** The commands, in display order. Items that share a `group` are shown together under its heading. */
+    items: CommandPaletteItem[];
+    /** Controlled open state. When set, the palette calls `onOpenChange` and lets the caller decide. */
+    isOpen?: boolean;
+    /**
+     * Initial open state while uncontrolled.
+     * @default false
+     */
+    defaultIsOpen?: boolean;
+    /** Called with `false` on Escape, a backdrop click and a chosen command, and with the toggled state when the bound shortcut fires. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Hint in the empty search field.
+     * @default "Type a command or search"
+     */
+    placeholder?: string;
+    /** Server search. Receives the term once typing pauses (150ms), at once on clear, and `""` when the palette closes with a term. Turns off built-in filtering: the app passes the matching `items`. */
+    onSearch?: (term: string) => void;
+    /**
+     * Shows a spinner in the search field while the app's search runs, and holds back `emptyMessage`. Typing stays possible.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Shown in place of the list when nothing matches.
+     * @default "No results"
+     */
+    emptyMessage?: string;
+    /** Remembers the last 5 chosen commands under this `localStorage` key and lists them first, under "Recent", while the search is empty. Off when omitted. */
+    storageKey?: string;
+    /**
+     * Shortcut that toggles the palette, in `useHotkey` grammar. Only bound with `shouldBindHotKey`.
+     * @default ["mod", "k"]
+     */
+    hotKeys?: string[];
+    /**
+     * Bind `hotKeys` with `useHotkey`, so the shortcut opens and closes the palette from anywhere, inside text fields too.
+     * @default false
+     */
+    shouldBindHotKey?: boolean;
+    /**
+     * Accessible name of the dialog.
+     * @default "Command palette"
+     */
+    ariaLabel?: string;
+    /** DOM id on the panel (`role="dialog"`). @default a `useId()` value */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the panel. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the panel. */
+    className?: string;
+    /** Inline style on the panel; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A modal search-and-run dialog over a list of commands. */
+declare const CommandPalette: import("react").ForwardRefExoticComponent<CommandPaletteProps & import("react").RefAttributes<HTMLDivElement>>;
+export default CommandPalette;