@adea-ai/ui 0.145.2 → 0.146.0

package/dist/components/layout/pixel-pane/index.d.ts

@@ -0,0 +1,2 @@
+export { PixelPane, type PixelPaneProps } from './pixel-pane';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/layout/pixel-pane/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/pixel-pane/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAA"}

package/dist/components/layout/pixel-pane/index.js

@@ -0,0 +1,2 @@
+import { PixelPane } from "./pixel-pane.js";
+export { PixelPane };

package/dist/components/layout/pixel-pane/pixel-pane.d.ts

@@ -0,0 +1,20 @@
+import type { ComponentProps, JSX } from 'solid-js';
+export type PixelPaneProps = ComponentProps<'div'> & {
+    /**
+     * The pane's width in CSS pixels, owned by the host. Without it the pane
+     * takes the space the fixed panes leave.
+     */
+    width?: number;
+};
+/**
+ * PixelPane.
+ *
+ * One pane of a row whose widths the host keeps (for example beside a
+ * `PixelResizeHandle`): a fixed pixel width, or the remaining space. It exists
+ * so a consumer can give a pane a computed width without a style attribute of
+ * its own, and so every such pane behaves the same way: it never grows past its
+ * width, clips what does not fit, and gives way before the row overflows if the
+ * host's widths briefly exceed the space (a window being resized).
+ */
+export declare function PixelPane(props: PixelPaneProps): JSX.Element;
+//# sourceMappingURL=pixel-pane.d.ts.map

package/dist/components/layout/pixel-pane/pixel-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-pane.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/pixel-pane/pixel-pane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,MAAM,UAAU,CAAA;AAInD,MAAM,MAAM,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IACnD;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAe9C"}

package/dist/components/layout/pixel-pane/pixel-pane.js

@@ -0,0 +1,55 @@
+import { cn } from "../../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+//#region src/components/layout/pixel-pane/pixel-pane.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div data-slot=pixel-pane>`);
+/**
+* PixelPane.
+*
+* One pane of a row whose widths the host keeps (for example beside a
+* `PixelResizeHandle`): a fixed pixel width, or the remaining space. It exists
+* so a consumer can give a pane a computed width without a style attribute of
+* its own, and so every such pane behaves the same way: it never grows past its
+* width, clips what does not fit, and gives way before the row overflows if the
+* host's widths briefly exceed the space (a window being resized).
+*/
+function PixelPane(props) {
+	const [local, rest] = splitProps(props, [
+		"width",
+		"class",
+		"style"
+	]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps(rest, {
+			get ["class"]() {
+				return cn("min-h-0 min-w-0 overflow-hidden", local.width === void 0 ? "flex-1" : "grow-0 shrink", local.class);
+			},
+			get style() {
+				return fixedStyle(local.style, local.width);
+			}
+		}), false, false);
+		return _el$;
+	})();
+}
+/**
+* The pane's style with its width applied last, so the host's width wins over a
+* `flex-basis` of the caller's own. A string style stays a string and an object
+* style stays an object; both keep every declaration they came with.
+*/
+function fixedStyle(style, width) {
+	if (width === void 0) return style;
+	const basis = `${Math.max(0, Math.round(width))}px`;
+	if (typeof style === "string") {
+		const declarations = style.trim();
+		return `${declarations}${declarations === "" || declarations.endsWith(";") ? "" : ";"}flex-basis:${basis}`;
+	}
+	return {
+		...style,
+		"flex-basis": basis
+	};
+}
+//#endregion
+export { PixelPane };
+
+//# sourceMappingURL=pixel-pane.js.map

package/dist/components/layout/pixel-pane/pixel-pane.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixel-pane.js","names":["ComponentProps","JSX","splitProps","cn","PixelPaneProps","width","PixelPane","props","local","rest","_el$","_tmpl$","_$spread","_$mergeProps","class","undefined","style","fixedStyle","CSSProperties","basis","Math","max","round","declarations","trim","separator","endsWith","_$mergeProps"],"sources":["../../../../src/components/layout/pixel-pane/pixel-pane.tsx"],"sourcesContent":["import type { ComponentProps, JSX } from 'solid-js'\nimport { splitProps } from 'solid-js'\nimport { cn } from '#lib/utils'\n\nexport type PixelPaneProps = ComponentProps<'div'> & {\n  /**\n   * The pane's width in CSS pixels, owned by the host. Without it the pane\n   * takes the space the fixed panes leave.\n   */\n  width?: number\n}\n\n/**\n * PixelPane.\n *\n * One pane of a row whose widths the host keeps (for example beside a\n * `PixelResizeHandle`): a fixed pixel width, or the remaining space. It exists\n * so a consumer can give a pane a computed width without a style attribute of\n * its own, and so every such pane behaves the same way: it never grows past its\n * width, clips what does not fit, and gives way before the row overflows if the\n * host's widths briefly exceed the space (a window being resized).\n */\nexport function PixelPane(props: PixelPaneProps) {\n  const [local, rest] = splitProps(props, ['width', 'class', 'style'])\n\n  return (\n    <div\n      data-slot=\"pixel-pane\"\n      {...rest}\n      class={cn(\n        'min-h-0 min-w-0 overflow-hidden',\n        local.width === undefined ? 'flex-1' : 'grow-0 shrink',\n        local.class\n      )}\n      style={fixedStyle(local.style, local.width)}\n    />\n  )\n}\n\n/**\n * The pane's style with its width applied last, so the host's width wins over a\n * `flex-basis` of the caller's own. A string style stays a string and an object\n * style stays an object; both keep every declaration they came with.\n */\nfunction fixedStyle(\n  style: JSX.CSSProperties | string | undefined,\n  width: number | undefined\n): JSX.CSSProperties | string | undefined {\n  if (width === undefined) return style\n  const basis = `${Math.max(0, Math.round(width))}px`\n  if (typeof style === 'string') {\n    const declarations = style.trim()\n    const separator = declarations === '' || declarations.endsWith(';') ? '' : ';'\n    return `${declarations}${separator}flex-basis:${basis}`\n  }\n  return { ...style, 'flex-basis': basis }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAsBA,SAAgBM,UAAUC,OAAuB;CAC/C,MAAM,CAACC,OAAOC,QAAQP,WAAWK,OAAO;EAAC;EAAS;EAAS;CAAO,CAAC;CAEnE,cAAA;EAAA,IAAAG,OAAAC,OAAA;EAAAC,OAAAF,MAAAG,WAGQJ,MAAI;GAAA,KAAA,WAAA;IAAA,OACDN,GACL,mCACAK,MAAMH,UAAUU,KAAAA,IAAY,WAAW,iBACvCP,MAAMM,KACR;GAAC;GAAA,IACDE,QAAK;IAAA,OAAEC,WAAWT,MAAMQ,OAAOR,MAAMH,KAAK;GAAC;EAAA,CAAA,GAAA,OAAA,KAAA;EAAA,OAAAK;CAAA,EAAA,CAAA;AAGjD;;;;;;AAOA,SAASO,WACPD,OACAX,OACwC;CACxC,IAAIA,UAAUU,KAAAA,GAAW,OAAOC;CAChC,MAAMG,QAAQ,GAAGC,KAAKC,IAAI,GAAGD,KAAKE,MAAMjB,KAAK,CAAC,EAAC;CAC/C,IAAI,OAAOW,UAAU,UAAU;EAC7B,MAAMO,eAAeP,MAAMQ,KAAK;EAEhC,OAAO,GAAGD,eADQA,iBAAiB,MAAMA,aAAaG,SAAS,GAAG,IAAI,KAAK,IACzC,aAAcP;CAClD;CACA,OAAO;EAAE,GAAGH;EAAO,cAAcG;CAAM;AACzC"}

package/dist/r/pixel-pane.json

@@ -0,0 +1,22 @@
+{
+  "name": "pixel-pane",
+  "type": "registry:ui",
+  "title": "Pixel Pane",
+  "description": "",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/layout/pixel-pane/index.ts",
+      "type": "registry:ui",
+      "target": "components/layout/pixel-pane/index.ts"
+    },
+    {
+      "path": "src/components/layout/pixel-pane/pixel-pane.tsx",
+      "type": "registry:ui",
+      "target": "components/layout/pixel-pane/pixel-pane.tsx"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -1894,6 +1894,28 @@
         }
       ]
     },
+    {
+      "name": "pixel-pane",
+      "type": "registry:ui",
+      "title": "Pixel Pane",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/pixel-pane/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-pane/index.ts"
+        },
+        {
+          "path": "src/components/layout/pixel-pane/pixel-pane.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-pane/pixel-pane.tsx"
+        }
+      ]
+    },
     {
       "name": "pixel-resize-handle",
       "type": "registry:ui",

package/dist/r/src/components/layout/pixel-pane/index.ts

@@ -0,0 +1 @@
+export { PixelPane, type PixelPaneProps } from './pixel-pane'

package/dist/r/src/components/layout/pixel-pane/pixel-pane.tsx

@@ -0,0 +1,57 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+export type PixelPaneProps = ComponentProps<'div'> & {
+  /**
+   * The pane's width in CSS pixels, owned by the host. Without it the pane
+   * takes the space the fixed panes leave.
+   */
+  width?: number
+}
+
+/**
+ * PixelPane.
+ *
+ * One pane of a row whose widths the host keeps (for example beside a
+ * `PixelResizeHandle`): a fixed pixel width, or the remaining space. It exists
+ * so a consumer can give a pane a computed width without a style attribute of
+ * its own, and so every such pane behaves the same way: it never grows past its
+ * width, clips what does not fit, and gives way before the row overflows if the
+ * host's widths briefly exceed the space (a window being resized).
+ */
+export function PixelPane(props: PixelPaneProps) {
+  const [local, rest] = splitProps(props, ['width', 'class', 'style'])
+
+  return (
+    <div
+      data-slot="pixel-pane"
+      {...rest}
+      class={cn(
+        'min-h-0 min-w-0 overflow-hidden',
+        local.width === undefined ? 'flex-1' : 'grow-0 shrink',
+        local.class
+      )}
+      style={fixedStyle(local.style, local.width)}
+    />
+  )
+}
+
+/**
+ * The pane's style with its width applied last, so the host's width wins over a
+ * `flex-basis` of the caller's own. A string style stays a string and an object
+ * style stays an object; both keep every declaration they came with.
+ */
+function fixedStyle(
+  style: JSX.CSSProperties | string | undefined,
+  width: number | undefined
+): JSX.CSSProperties | string | undefined {
+  if (width === undefined) return style
+  const basis = `${Math.max(0, Math.round(width))}px`
+  if (typeof style === 'string') {
+    const declarations = style.trim()
+    const separator = declarations === '' || declarations.endsWith(';') ? '' : ';'
+    return `${declarations}${separator}flex-basis:${basis}`
+  }
+  return { ...style, 'flex-basis': basis }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.145.2",
+  "version": "0.146.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -1894,6 +1894,28 @@
         }
       ]
     },
+    {
+      "name": "pixel-pane",
+      "type": "registry:ui",
+      "title": "Pixel Pane",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/pixel-pane/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-pane/index.ts"
+        },
+        {
+          "path": "src/components/layout/pixel-pane/pixel-pane.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/pixel-pane/pixel-pane.tsx"
+        }
+      ]
+    },
     {
       "name": "pixel-resize-handle",
       "type": "registry:ui",

package/src/components/layout/pixel-pane/index.ts

@@ -0,0 +1 @@
+export { PixelPane, type PixelPaneProps } from './pixel-pane'

package/src/components/layout/pixel-pane/pixel-pane.tsx

@@ -0,0 +1,57 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type PixelPaneProps = ComponentProps<'div'> & {
+  /**
+   * The pane's width in CSS pixels, owned by the host. Without it the pane
+   * takes the space the fixed panes leave.
+   */
+  width?: number
+}
+
+/**
+ * PixelPane.
+ *
+ * One pane of a row whose widths the host keeps (for example beside a
+ * `PixelResizeHandle`): a fixed pixel width, or the remaining space. It exists
+ * so a consumer can give a pane a computed width without a style attribute of
+ * its own, and so every such pane behaves the same way: it never grows past its
+ * width, clips what does not fit, and gives way before the row overflows if the
+ * host's widths briefly exceed the space (a window being resized).
+ */
+export function PixelPane(props: PixelPaneProps) {
+  const [local, rest] = splitProps(props, ['width', 'class', 'style'])
+
+  return (
+    <div
+      data-slot="pixel-pane"
+      {...rest}
+      class={cn(
+        'min-h-0 min-w-0 overflow-hidden',
+        local.width === undefined ? 'flex-1' : 'grow-0 shrink',
+        local.class
+      )}
+      style={fixedStyle(local.style, local.width)}
+    />
+  )
+}
+
+/**
+ * The pane's style with its width applied last, so the host's width wins over a
+ * `flex-basis` of the caller's own. A string style stays a string and an object
+ * style stays an object; both keep every declaration they came with.
+ */
+function fixedStyle(
+  style: JSX.CSSProperties | string | undefined,
+  width: number | undefined
+): JSX.CSSProperties | string | undefined {
+  if (width === undefined) return style
+  const basis = `${Math.max(0, Math.round(width))}px`
+  if (typeof style === 'string') {
+    const declarations = style.trim()
+    const separator = declarations === '' || declarations.endsWith(';') ? '' : ';'
+    return `${declarations}${separator}flex-basis:${basis}`
+  }
+  return { ...style, 'flex-basis': basis }
+}