@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/layout/Grid.d.ts

@@ -0,0 +1,140 @@
+import { type AriaAttributes, type CSSProperties, type ElementType, type ReactNode } from "react";
+import type { Space, SpaceShorthand } from "../theme/enums.js";
+/** Block-axis alignment of each item inside its own grid area (`align-items`). */
+export declare enum GridAlignItems {
+    /** Pack each item at the start of its area. */
+    START = "START",
+    /** Center each item in its area. */
+    CENTER = "CENTER",
+    /** Pack each item at the end of its area. */
+    END = "END",
+    /** Stretch each item to fill its area. */
+    STRETCH = "STRETCH"
+}
+/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
+export declare enum GridJustifyItems {
+    /** Pack each item at the start of its area. */
+    START = "START",
+    /** Center each item in its area. */
+    CENTER = "CENTER",
+    /** Pack each item at the end of its area. */
+    END = "END",
+    /** Stretch each item to fill its area. */
+    STRETCH = "STRETCH"
+}
+/** Inline-axis distribution of the tracks when they are narrower than the grid (`justify-content`). */
+export declare enum GridJustifyContent {
+    /** Pack the tracks at the inline start. */
+    START = "START",
+    /** Center the tracks. */
+    CENTER = "CENTER",
+    /** Pack the tracks at the inline end. */
+    END = "END",
+    /** First and last track at the edges, equal space between. */
+    SPACE_BETWEEN = "SPACE_BETWEEN",
+    /** Equal space around each track (half-size at the edges). */
+    SPACE_AROUND = "SPACE_AROUND",
+    /** Equal space between tracks and at the edges. */
+    SPACE_EVENLY = "SPACE_EVENLY",
+    /** Grow `auto` tracks to fill the grid. */
+    STRETCH = "STRETCH"
+}
+/** Block-axis distribution of the tracks when they are shorter than the grid (`align-content`). */
+export declare enum GridAlignContent {
+    /** Pack the tracks at the block start. */
+    START = "START",
+    /** Center the tracks. */
+    CENTER = "CENTER",
+    /** Pack the tracks at the block end. */
+    END = "END",
+    /** First and last track at the edges, equal space between. */
+    SPACE_BETWEEN = "SPACE_BETWEEN",
+    /** Equal space around each track (half-size at the edges). */
+    SPACE_AROUND = "SPACE_AROUND",
+    /** Equal space between tracks and at the edges. */
+    SPACE_EVENLY = "SPACE_EVENLY",
+    /** Grow `auto` tracks to fill the grid. */
+    STRETCH = "STRETCH"
+}
+export interface GridProps extends AriaAttributes {
+    /** Content of the grid: its items. */
+    children?: ReactNode;
+    /**
+     * Column tracks. A number is that many equal tracks (`repeat(n, minmax(0, 1fr))`); a string is
+     * used as-is (`"200px 1fr"`).
+     * @default 1
+     */
+    columns?: number | string;
+    /**
+     * Row tracks. A number is that many equal tracks (`repeat(n, minmax(0, 1fr))`); a string is used
+     * as-is. Unset, rows are implicit and sized to their content.
+     */
+    rows?: number | string;
+    /**
+     * Named areas (`grid-template-areas`), one string per row: `["header header", "nav main"]`.
+     * Items join an area through their own `grid-area`.
+     */
+    areas?: string[];
+    /** Space between tracks from the space scale: one value, or `[row, column]`. */
+    gap?: Space | [Space, Space];
+    /**
+     * Block-axis alignment of each item in its area.
+     * @default GridAlignItems.STRETCH
+     */
+    alignItems?: GridAlignItems;
+    /**
+     * Inline-axis alignment of each item in its area.
+     * @default GridJustifyItems.STRETCH
+     */
+    justifyItems?: GridJustifyItems;
+    /**
+     * Block-axis distribution of the tracks when they are shorter than the grid.
+     * @default GridAlignContent.START
+     */
+    alignContent?: GridAlignContent;
+    /**
+     * Inline-axis distribution of the tracks when they are narrower than the grid.
+     * @default GridJustifyContent.START
+     */
+    justifyContent?: GridJustifyContent;
+    /** Padding from the space scale: one value, or 2–4 in CSS shorthand order (`[12, 16]`). */
+    padding?: SpaceShorthand;
+    /** CSS `width`. A number is px. `fillWidth` wins over it. */
+    width?: number | string;
+    /** CSS `height`. A number is px. Use `"100%"` to fill the parent (1.x `fillHeight`). */
+    height?: number | string;
+    /** CSS `min-width`. A number is px. */
+    minWidth?: number | string;
+    /** CSS `max-width`. A number is px. */
+    maxWidth?: number | string;
+    /** CSS `min-height`. A number is px. */
+    minHeight?: number | string;
+    /** CSS `max-height`. A number is px. */
+    maxHeight?: number | string;
+    /**
+     * Stretch to the parent's full width (`width: 100%`). Wins over `width`.
+     * @default false
+     */
+    fillWidth?: boolean;
+    /**
+     * CSS `overflow`.
+     * @default "visible"
+     */
+    overflow?: CSSProperties["overflow"];
+    /**
+     * Element or component to render (`"section"`, `"ul"`, `"dl"`).
+     * @default "div"
+     */
+    as?: ElementType;
+    /** DOM id on the root element. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root element. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root element. */
+    className?: string;
+    /** Inline style on the root element; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** The CSS grid layout primitive: tracks, areas, alignment, `gap`, `padding` and sizing. */
+declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLElement>>;
+export default Grid;

package/dist/layout/Grid.js

@@ -0,0 +1,178 @@
+import { gapToCss, getCssSizeValue, spaceToCss } from "../utils/css.js";
+/* empty css               */
+import { styled } from "@linaria/react";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+//#region src/layout/Grid.tsx
+/**
+* The CSS grid layout primitive: a `display: grid` element with tracks, areas, alignment and
+* sizing as props. Replaces 1.x `GridWrapper`. Spacing is `gap` and `padding` from the space
+* scale; there is no `margin` (Constitution II.5).
+*
+* The four alignment axes are enums, each a `Record` of `css` blocks. Continuous values (tracks,
+* areas, `gap`, `padding`, sizes, `overflow`) are set as `--gx-grid-*` custom properties on the
+* root, and a block that reads each one is switched on only when its prop is set. So a nested
+* `Grid` never inherits its parent's values, and nothing extra reaches a custom `as` component
+* (Linaria forwards `$`-props to one). Same pattern as `Flex` and `Box`.
+*/
+/** Block-axis alignment of each item inside its own grid area (`align-items`). */
+var GridAlignItems = /* @__PURE__ */ function(GridAlignItems) {
+	/** Pack each item at the start of its area. */
+	GridAlignItems["START"] = "START";
+	/** Center each item in its area. */
+	GridAlignItems["CENTER"] = "CENTER";
+	/** Pack each item at the end of its area. */
+	GridAlignItems["END"] = "END";
+	/** Stretch each item to fill its area. */
+	GridAlignItems["STRETCH"] = "STRETCH";
+	return GridAlignItems;
+}({});
+/** Inline-axis alignment of each item inside its own grid area (`justify-items`). */
+var GridJustifyItems = /* @__PURE__ */ function(GridJustifyItems) {
+	/** Pack each item at the start of its area. */
+	GridJustifyItems["START"] = "START";
+	/** Center each item in its area. */
+	GridJustifyItems["CENTER"] = "CENTER";
+	/** Pack each item at the end of its area. */
+	GridJustifyItems["END"] = "END";
+	/** Stretch each item to fill its area. */
+	GridJustifyItems["STRETCH"] = "STRETCH";
+	return GridJustifyItems;
+}({});
+/** Inline-axis distribution of the tracks when they are narrower than the grid (`justify-content`). */
+var GridJustifyContent = /* @__PURE__ */ function(GridJustifyContent) {
+	/** Pack the tracks at the inline start. */
+	GridJustifyContent["START"] = "START";
+	/** Center the tracks. */
+	GridJustifyContent["CENTER"] = "CENTER";
+	/** Pack the tracks at the inline end. */
+	GridJustifyContent["END"] = "END";
+	/** First and last track at the edges, equal space between. */
+	GridJustifyContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+	/** Equal space around each track (half-size at the edges). */
+	GridJustifyContent["SPACE_AROUND"] = "SPACE_AROUND";
+	/** Equal space between tracks and at the edges. */
+	GridJustifyContent["SPACE_EVENLY"] = "SPACE_EVENLY";
+	/** Grow `auto` tracks to fill the grid. */
+	GridJustifyContent["STRETCH"] = "STRETCH";
+	return GridJustifyContent;
+}({});
+/** Block-axis distribution of the tracks when they are shorter than the grid (`align-content`). */
+var GridAlignContent = /* @__PURE__ */ function(GridAlignContent) {
+	/** Pack the tracks at the block start. */
+	GridAlignContent["START"] = "START";
+	/** Center the tracks. */
+	GridAlignContent["CENTER"] = "CENTER";
+	/** Pack the tracks at the block end. */
+	GridAlignContent["END"] = "END";
+	/** First and last track at the edges, equal space between. */
+	GridAlignContent["SPACE_BETWEEN"] = "SPACE_BETWEEN";
+	/** Equal space around each track (half-size at the edges). */
+	GridAlignContent["SPACE_AROUND"] = "SPACE_AROUND";
+	/** Equal space between tracks and at the edges. */
+	GridAlignContent["SPACE_EVENLY"] = "SPACE_EVENLY";
+	/** Grow `auto` tracks to fill the grid. */
+	GridAlignContent["STRETCH"] = "STRETCH";
+	return GridAlignContent;
+}({});
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-Grid-rkbfhvt",
+	propsAsIs: false
+});
+var GRID_ALIGN_ITEMS_TO_CSS_MAP = {
+	["START"]: "gx-Grid-START-s1893hgf",
+	["CENTER"]: "gx-Grid-CENTER-ch9ax48",
+	["END"]: "gx-Grid-END-epvlyzq",
+	["STRETCH"]: "gx-Grid-STRETCH-ssf1p0g"
+};
+var GRID_JUSTIFY_ITEMS_TO_CSS_MAP = {
+	["START"]: "gx-Grid-START-slmg0j4",
+	["CENTER"]: "gx-Grid-CENTER-c19tdltw",
+	["END"]: "gx-Grid-END-e11pnn7d",
+	["STRETCH"]: "gx-Grid-STRETCH-s1gt0lci"
+};
+var GRID_ALIGN_CONTENT_TO_CSS_MAP = {
+	["START"]: "gx-Grid-START-sbisc1x",
+	["CENTER"]: "gx-Grid-CENTER-c199j9z9",
+	["END"]: "gx-Grid-END-e1hb8jsc",
+	["SPACE_BETWEEN"]: "gx-Grid-SPACE_BETWEEN-sgin4su",
+	["SPACE_AROUND"]: "gx-Grid-SPACE_AROUND-sytg8ql",
+	["SPACE_EVENLY"]: "gx-Grid-SPACE_EVENLY-sohzvpe",
+	["STRETCH"]: "gx-Grid-STRETCH-s139n4pb"
+};
+var GRID_JUSTIFY_CONTENT_TO_CSS_MAP = {
+	["START"]: "gx-Grid-START-slcmno0",
+	["CENTER"]: "gx-Grid-CENTER-cqkb4g8",
+	["END"]: "gx-Grid-END-e1wdz102",
+	["SPACE_BETWEEN"]: "gx-Grid-SPACE_BETWEEN-s8fdlfb",
+	["SPACE_AROUND"]: "gx-Grid-SPACE_AROUND-s1rtxpr5",
+	["SPACE_EVENLY"]: "gx-Grid-SPACE_EVENLY-s1qrmtgh",
+	["STRETCH"]: "gx-Grid-STRETCH-s1j87zqz"
+};
+var FILL_WIDTH_CSS = "gx-Grid-FILL_WIDTH_CSS-foxewdq";
+/** Each block reads the `--gx-grid-<property>` custom property the component sets beside it. */
+var GRID_CSS_PROPERTY_TO_CSS_MAP = {
+	"grid-template-columns": "gx-Grid-grid-template-columns-gpojuj0",
+	"grid-template-rows": "gx-Grid-grid-template-rows-gaxyr7p",
+	"grid-template-areas": "gx-Grid-grid-template-areas-g1dxyfzv",
+	gap: "gx-Grid-gap-g1w5z5h1",
+	padding: "gx-Grid-padding-p1icr3de",
+	width: "gx-Grid-width-w1w6zgma",
+	height: "gx-Grid-height-h17wto8a",
+	"min-width": "gx-Grid-min-width-m1l1yba3",
+	"max-width": "gx-Grid-max-width-m65i8tr",
+	"min-height": "gx-Grid-min-height-m1c4ixrp",
+	"max-height": "gx-Grid-max-height-m1a2u3k1",
+	overflow: "gx-Grid-overflow-o1666kxy"
+};
+/** A length prop as CSS (number → px), or `undefined` when unset. */
+var toLength = (value) => value === void 0 ? void 0 : getCssSizeValue(value);
+/** A track prop as CSS: a number is that many equal tracks, a string is used as-is. */
+var toTracks = (value) => {
+	if (value === void 0) return void 0;
+	return typeof value === "number" ? `repeat(${value}, minmax(0, 1fr))` : value;
+};
+/** `areas` as `grid-template-areas`: each row string quoted, rows space-separated. */
+var toAreas = (value) => value === void 0 || value.length === 0 ? void 0 : value.map((row) => `"${row}"`).join(" ");
+/** The CSS grid layout primitive: tracks, areas, alignment, `gap`, `padding` and sizing. */
+var Grid = forwardRef(function Grid({ children, columns = 1, rows, areas, gap, alignItems = "STRETCH", justifyItems = "STRETCH", alignContent = "START", justifyContent = "START", padding, width, height, minWidth, maxWidth, minHeight, maxHeight, fillWidth = false, overflow, as = "div", id, className, style, ...rest }, ref) {
+	const values = {
+		"grid-template-columns": toTracks(columns),
+		"grid-template-rows": toTracks(rows),
+		"grid-template-areas": toAreas(areas),
+		gap: gap === void 0 ? void 0 : gapToCss(gap),
+		padding: padding === void 0 ? void 0 : spaceToCss(padding),
+		width: fillWidth ? void 0 : toLength(width),
+		height: toLength(height),
+		"min-width": toLength(minWidth),
+		"max-width": toLength(maxWidth),
+		"min-height": toLength(minHeight),
+		"max-height": toLength(maxHeight),
+		overflow
+	};
+	const classNames = [];
+	const variables = {};
+	for (const property of Object.keys(values)) {
+		const value = values[property];
+		if (value === void 0) continue;
+		classNames.push(GRID_CSS_PROPERTY_TO_CSS_MAP[property]);
+		variables[`--gx-grid-${property}`] = value;
+	}
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		as,
+		ref,
+		id,
+		className: cx(GRID_ALIGN_ITEMS_TO_CSS_MAP[alignItems], GRID_JUSTIFY_ITEMS_TO_CSS_MAP[justifyItems], GRID_ALIGN_CONTENT_TO_CSS_MAP[alignContent], GRID_JUSTIFY_CONTENT_TO_CSS_MAP[justifyContent], fillWidth && FILL_WIDTH_CSS, ...classNames, className),
+		style: {
+			...variables,
+			...style
+		},
+		children
+	});
+});
+Grid.displayName = "Grid";
+//#endregion
+export { GridAlignContent, GridAlignItems, GridJustifyContent, GridJustifyItems, Grid as default };

package/dist/layout/Portal.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Renders its children into another DOM node — the nearest `GalaxyProvider`'s `portalContainer`,
+ * else `document.body` — while they stay where they are in the React tree, so context and events
+ * still flow through their React parent. Modal, Drawer, Popover, Tooltip and Toast render through it.
+ *
+ * SSR: renders nothing on the server and during hydration, then mounts on the client. Nothing here
+ * touches `document` at module scope.
+ */
+import { type ReactNode } from "react";
+export interface PortalProps {
+    /** What to render in the mount node. */
+    children?: ReactNode;
+    /**
+     * Override the mount node. `null` renders nothing until the node exists (a ref set in state).
+     * @default the provider's `portalContainer`, else `document.body`
+     */
+    container?: HTMLElement | null;
+    /**
+     * Render the children inline, where `Portal` sits, instead of portaling them.
+     * @default false
+     */
+    isDisabled?: boolean;
+}
+/** Renders `children` into the provider's `portalContainer` (or `container`, or `document.body`). */
+declare function Portal({ children, container, isDisabled }: PortalProps): import("react").JSX.Element | null;
+declare namespace Portal {
+    var displayName: string;
+}
+export default Portal;

package/dist/layout/Portal.js

@@ -0,0 +1,27 @@
+import { useIsClient } from "../hooks/internal/useIsClient.js";
+import { PortalContainerContext } from "../theme/useGalaxyTheme.js";
+import { useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/layout/Portal.tsx
+/**
+* Renders its children into another DOM node — the nearest `GalaxyProvider`'s `portalContainer`,
+* else `document.body` — while they stay where they are in the React tree, so context and events
+* still flow through their React parent. Modal, Drawer, Popover, Tooltip and Toast render through it.
+*
+* SSR: renders nothing on the server and during hydration, then mounts on the client. Nothing here
+* touches `document` at module scope.
+*/
+/** Renders `children` into the provider's `portalContainer` (or `container`, or `document.body`). */
+function Portal({ children, container, isDisabled = false }) {
+	const providerContainer = useContext(PortalContainerContext);
+	const isClient = useIsClient();
+	if (isDisabled) return /* @__PURE__ */ jsx(Fragment$1, { children });
+	if (!isClient) return null;
+	const target = container !== void 0 ? container : providerContainer;
+	const mountNode = target === void 0 ? document.body : target;
+	return mountNode === null ? null : createPortal(children, mountNode);
+}
+Portal.displayName = "Portal";
+//#endregion
+export { Portal as default };

package/dist/layout/ResizablePanels.d.ts

@@ -0,0 +1,88 @@
+import { type AriaAttributes, type CSSProperties, type ReactNode } from "react";
+import { Orientation } from "../theme/enums.js";
+export interface ResizablePanelsProps extends AriaAttributes {
+    /** `ResizablePanel` elements, in order. `null` / `false` children are skipped, so a panel can be shown conditionally. Other children are not rendered. */
+    children: ReactNode;
+    /**
+     * Axis the panels are laid out along. `HORIZONTAL` places them side by side (vertical handles, sizes are widths); `VERTICAL` stacks them (horizontal handles, sizes are heights).
+     * @default Orientation.HORIZONTAL
+     */
+    orientation?: Orientation;
+    /** Persists each uncontrolled panel's size in `localStorage` under this key, by panel `id`. Off when omitted. */
+    storageKey?: string;
+    /** DOM id on the root `<div>`. */
+    id?: string;
+    /** Any `data-*` attribute, forwarded to the root `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the root `<div>`. */
+    className?: string;
+    /** Inline style on the root `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** Props every panel takes, sized or fluid. */
+interface ResizablePanelBaseProps extends AriaAttributes {
+    /** DOM id of the panel, the target of its handle's `aria-controls`, and its key in `storageKey`. Unique on the page. */
+    id: string;
+    /** The panel's content. It scrolls when it overflows. */
+    children?: ReactNode;
+    /**
+     * Smallest size in pixels. On the fluid panel, the room it keeps when the others grow.
+     * @default 0
+     */
+    min?: number;
+    /** Any `data-*` attribute, forwarded to the panel `<div>`. */
+    [dataAttribute: `data-${string}`]: string | number | boolean | undefined;
+    /** Extra class on the panel `<div>`. */
+    className?: string;
+    /** Inline style on the panel `<div>`; only for setting CSS custom properties. */
+    style?: CSSProperties;
+}
+/** A controlled sized panel: its size is `value`; it must be named. */
+interface ResizablePanelControlledProps {
+    /** Controlled size in pixels (width or height, by `orientation`). Pass it with `onChange`. */
+    value: number;
+    /** Initial size in pixels while uncontrolled. A panel with neither `value` nor `defaultValue` is the fluid panel and takes the remaining space. */
+    defaultValue?: undefined;
+    /** Called with the new size, clamped and rounded, while its handle is dragged or keyed. */
+    onChange?: (value: number) => void;
+    /**
+     * Largest size in pixels. Also capped so the fluid panel keeps its `min`. Ignored on the fluid panel.
+     * @default Infinity
+     */
+    max?: number;
+    /** Names the panel as a region ("Logs") and its handle ("Resize Logs"). Required on a sized panel. */
+    ariaLabel: string;
+}
+/** An uncontrolled sized panel: it starts at `defaultValue`; it must be named. */
+interface ResizablePanelUncontrolledProps {
+    /** Controlled size in pixels (width or height, by `orientation`). Pass it with `onChange`. */
+    value?: undefined;
+    /** Initial size in pixels while uncontrolled. A panel with neither `value` nor `defaultValue` is the fluid panel and takes the remaining space. */
+    defaultValue: number;
+    /** Called with the new size, clamped and rounded, while its handle is dragged or keyed. */
+    onChange?: (value: number) => void;
+    /** Largest size in pixels. Also capped so the fluid panel keeps its `min`. Ignored on the fluid panel. */
+    max?: number;
+    /** Names the panel as a region ("Logs") and its handle ("Resize Logs"). Required on a sized panel. */
+    ariaLabel: string;
+}
+/** The fluid panel: no size of its own; it takes the remaining space. */
+interface ResizablePanelFluidProps {
+    /** Controlled size in pixels (width or height, by `orientation`). Pass it with `onChange`. */
+    value?: undefined;
+    /** Initial size in pixels while uncontrolled. A panel with neither `value` nor `defaultValue` is the fluid panel and takes the remaining space. */
+    defaultValue?: undefined;
+    /** Called with the new size, clamped and rounded, while its handle is dragged or keyed. */
+    onChange?: undefined;
+    /** Largest size in pixels. Also capped so the fluid panel keeps its `min`. Ignored on the fluid panel. */
+    max?: undefined;
+    /** Names the panel as a region ("Logs") and its handle ("Resize Logs"). Required on a sized panel. */
+    ariaLabel?: string;
+}
+/** `ResizablePanel` props: a sized panel (`value` or `defaultValue`, named by `ariaLabel`) or the fluid one. */
+export type ResizablePanelProps = ResizablePanelBaseProps & (ResizablePanelControlledProps | ResizablePanelUncontrolledProps | ResizablePanelFluidProps);
+/** A split layout of `ResizablePanel`s with a `ResizeHandle` between each sized–fluid pair. */
+declare const ResizablePanels: import("react").ForwardRefExoticComponent<ResizablePanelsProps & import("react").RefAttributes<HTMLDivElement>>;
+/** One panel of a `ResizablePanels` group: sized (`value` / `defaultValue`) or fluid. */
+export declare const ResizablePanel: import("react").ForwardRefExoticComponent<ResizablePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+export default ResizablePanels;

package/dist/layout/ResizablePanels.js

@@ -0,0 +1,198 @@
+import { Orientation } from "../theme/enums.js";
+import { SPACE } from "../theme/tokens/scales.js";
+import { useElementClientSize } from "../hooks/useElementClientSize.js";
+import ResizeHandle from "./ResizeHandle.js";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
+/* empty css                          */
+import { styled } from "@linaria/react";
+import { Children, createContext, forwardRef, isValidElement, useContext, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import { useMergeRefs } from "@floating-ui/react";
+//#region src/layout/ResizablePanels.tsx
+/**
+* A split layout: two or more `ResizablePanel`s side by side (or stacked) with a `ResizeHandle`
+* between each pair, so the user can change how much room each one gets by pointer or keyboard.
+* One panel is fluid and takes whatever space is left; every other panel has a size in pixels, a
+* `min` and a `max`, and a handle on the side that faces the fluid panel. With `storageKey` the
+* sizes the user chose survive reloads.
+*
+* Pass `ResizablePanel`s as direct children (Fragments are not flattened); `null` / `false`
+* children are skipped, so a panel can be shown conditionally. A panel with neither `value` nor
+* `defaultValue` is the fluid one; with none, the last panel is.
+*/
+var ResizablePanelsContext = createContext(null);
+/** The storage key while `storageKey` is unset; it lives in a per-instance memory adapter. */
+var RESIZABLE_PANELS_NO_STORAGE_KEY = "gx-resizable-panels:off";
+/** A handle's thickness: the `space[8]` token, in pixels (ResizeHandle's strip). */
+var HANDLE_THICKNESS_PX = Number.parseFloat(SPACE[8]);
+/** A row of panels needs vertical bars; a stack needs horizontal ones (logic, not CSS). */
+var RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_ORIENTATION_MAP = {
+	[Orientation.HORIZONTAL]: Orientation.VERTICAL,
+	[Orientation.VERTICAL]: Orientation.HORIZONTAL
+};
+/** A per-instance in-memory storage, used while `storageKey` is not set. */
+function createMemoryStorage() {
+	const values = /* @__PURE__ */ new Map();
+	return {
+		getItem: (key) => values.get(key) ?? null,
+		setItem: (key, value) => {
+			values.set(key, value);
+		},
+		removeItem: (key) => {
+			values.delete(key);
+		}
+	};
+}
+var Root = /*#__PURE__*/ styled("div")({
+	name: "Root",
+	class: "gx-ResizablePanels-rov2pu6",
+	propsAsIs: false
+});
+/** Every panel scrolls its own content; no padding or surface (content brings its own). */
+var Panel = /*#__PURE__*/ styled("div")({
+	name: "Panel",
+	class: "gx-ResizablePanels-Panel-piht8m9",
+	propsAsIs: false
+});
+var RESIZABLE_PANELS_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-o1hgxsmq",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-ow20qci"
+};
+/** `min` applies on the layout axis. */
+var RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP = {
+	[Orientation.HORIZONTAL]: "gx-ResizablePanels-Orientation_HORIZONTAL-ot38enr",
+	[Orientation.VERTICAL]: "gx-ResizablePanels-Orientation_VERTICAL-o1ev9pzd"
+};
+/** A sized panel may shrink below its size (toward `min`) when the container is too small. */
+var SIZED_CSS = "gx-ResizablePanels-SIZED_CSS-s16ojr42";
+/** The fluid panel takes the remaining space. */
+var FLUID_CSS = "gx-ResizablePanels-FLUID_CSS-f1k6jei3";
+/** Rounds and keeps `value` within `[min, max]`. */
+function clamp(value, min, max) {
+	return Math.min(Math.max(Math.round(value), min), max);
+}
+function isPanelElement(node) {
+	return isValidElement(node) && node.type === ResizablePanel;
+}
+/** A split layout of `ResizablePanel`s with a `ResizeHandle` between each sized–fluid pair. */
+var ResizablePanels = forwardRef(function ResizablePanels({ children, orientation = Orientation.HORIZONTAL, storageKey, className, style, ...rest }, ref) {
+	const rootRef = useRef(null);
+	const mergedRef = useMergeRefs([rootRef, ref]);
+	const rootSize = useElementClientSize(rootRef);
+	const available = orientation === Orientation.HORIZONTAL ? rootSize.width : rootSize.height;
+	const [memoryStorage] = useState(createMemoryStorage);
+	const [stored, setStored] = useLocalStorage(storageKey ?? RESIZABLE_PANELS_NO_STORAGE_KEY, {}, { storage: storageKey === void 0 ? memoryStorage : void 0 });
+	const elements = Children.toArray(children).filter(isPanelElement);
+	const hasDeclaredFluid = elements.some((element) => element.props.value === void 0 && element.props.defaultValue === void 0);
+	const panels = elements.map((element, index) => {
+		const { props } = element;
+		const isFluid = hasDeclaredFluid ? props.value === void 0 && props.defaultValue === void 0 : index === elements.length - 1;
+		const min = props.min ?? 0;
+		const max = isFluid ? Number.POSITIVE_INFINITY : props.max ?? Number.POSITIVE_INFINITY;
+		return {
+			element,
+			props,
+			isFluid,
+			min,
+			max: Math.max(min, max)
+		};
+	});
+	/** The size a sized panel renders at: `value`, else its stored size, else `defaultValue`. */
+	const sizeOf = (panel) => {
+		const { value, defaultValue, id } = panel.props;
+		const storedSize = stored[id];
+		return clamp(value ?? (typeof storedSize === "number" && Number.isFinite(storedSize) ? storedSize : defaultValue) ?? panel.min, panel.min, panel.max);
+	};
+	const setSize = (panel, next) => {
+		const { value, onChange, id } = panel.props;
+		if (value === void 0) setStored((previous) => ({
+			...previous,
+			[id]: next
+		}));
+		onChange?.(next);
+	};
+	const firstFluidIndex = panels.findIndex((panel) => panel.isFluid);
+	const handleTargets = panels.map((panel, index) => {
+		if (index === 0) return void 0;
+		const before = panels[index - 1];
+		if (before !== void 0 && !before.isFluid && index - 1 < firstFluidIndex) return index - 1;
+		if (!panel.isFluid) return index;
+	});
+	const handleCount = handleTargets.filter((target) => target !== void 0).length;
+	/** A handle's `max`: the panel's own, capped so every fluid panel keeps its `min`. */
+	const dynamicMaxOf = (target) => {
+		if (available === void 0) return target.max;
+		let room = available - handleCount * HANDLE_THICKNESS_PX;
+		for (const panel of panels) {
+			if (panel === target) continue;
+			room -= panel.isFluid ? panel.min : sizeOf(panel);
+		}
+		return Math.max(target.min, Math.min(target.max, Math.floor(room)));
+	};
+	const layoutById = new Map(panels.map((panel) => [panel.props.id, {
+		size: panel.isFluid ? void 0 : sizeOf(panel),
+		min: panel.min,
+		isFluid: panel.isFluid
+	}]));
+	const contextValue = {
+		orientation,
+		getLayout: (id) => layoutById.get(id)
+	};
+	const content = [];
+	panels.forEach((panel, index) => {
+		const targetIndex = handleTargets[index];
+		const target = targetIndex === void 0 ? void 0 : panels[targetIndex];
+		if (target !== void 0) {
+			const max = dynamicMaxOf(target);
+			content.push(/* @__PURE__ */ jsx(ResizeHandle, {
+				orientation: RESIZABLE_PANELS_ORIENTATION_TO_HANDLE_ORIENTATION_MAP[orientation],
+				isReversed: targetIndex === index,
+				value: Math.min(sizeOf(target), max),
+				onChange: (next) => setSize(target, next),
+				min: target.min,
+				max,
+				ariaLabel: `Resize ${target.props.ariaLabel ?? target.props.id}`,
+				"aria-controls": target.props.id
+			}, `handle:${panel.props.id}`));
+		}
+		content.push(panel.element);
+	});
+	return /* @__PURE__ */ jsx(Root, {
+		...rest,
+		ref: mergedRef,
+		className: cx(RESIZABLE_PANELS_ORIENTATION_TO_CSS_MAP[orientation], className),
+		style,
+		children: /* @__PURE__ */ jsx(ResizablePanelsContext.Provider, {
+			value: contextValue,
+			children: content
+		})
+	});
+});
+ResizablePanels.displayName = "ResizablePanels";
+/** One panel of a `ResizablePanels` group: sized (`value` / `defaultValue`) or fluid. */
+var ResizablePanel = forwardRef(function ResizablePanel({ id, children, value: _value, defaultValue: _defaultValue, onChange: _onChange, min = 0, max: _max, ariaLabel, className, style, ...rest }, ref) {
+	const group = useContext(ResizablePanelsContext);
+	const orientation = group?.orientation ?? Orientation.HORIZONTAL;
+	const layout = group?.getLayout(id);
+	const isFluid = layout?.isFluid ?? true;
+	const name = ariaLabel ?? rest["aria-label"];
+	const variables = { "--gx-resizable-panel-min": `${layout?.min ?? min}px` };
+	if (layout?.size !== void 0) variables["--gx-resizable-panel-size"] = `${layout.size}px`;
+	return /* @__PURE__ */ jsx(Panel, {
+		...rest,
+		ref,
+		id,
+		role: name ? "region" : void 0,
+		"aria-label": name,
+		className: cx(RESIZABLE_PANEL_ORIENTATION_TO_CSS_MAP[orientation], isFluid ? FLUID_CSS : SIZED_CSS, className),
+		style: {
+			...style,
+			...variables
+		},
+		children
+	});
+});
+ResizablePanel.displayName = "ResizablePanel";
+//#endregion
+export { ResizablePanel, ResizablePanels as default };