@longzai-intelligence-layout/primitives 0.0.0-stage → 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,168 @@
+import { PreferenceDefinition } from "@longzai-intelligence-layout/preferences";
+import { ReactNode } from "react";
+/**
+ * 可调宽列宽度界
+ */
+type PaneWidthBounds = {
+  /**
+   * 默认宽度，像素，双击把手复位到此值
+   */
+  defaultWidth: number;
+  /**
+   * 最小宽度，像素，调宽候选不得低于此值，保住主区可用宽度
+   */
+  minWidth: number;
+  /**
+   * 最大宽度，像素，调宽候选不得高于此值，避免主区被挤塌
+   */
+  maxWidth: number;
+};
+/**
+ * 可调高面板行高度界
+ */
+type PaneHeightBounds = {
+  /**
+   * 默认高度，像素，双击把手复位到此值
+   */
+  defaultHeight: number;
+  /**
+   * 最小高度，像素，调高候选不得低于此值，保住主区可用高度
+   */
+  minHeight: number;
+  /**
+   * 最大高度，像素，调高候选不得高于此值，避免主区被挤塌
+   */
+  maxHeight: number;
+};
+/**
+ * 构造列宽度偏好定义
+ *
+ * @remarks
+ *   键缺失与非法取值回落默认宽度，可解析但越界的取值钳制到界内并取整
+ * @param key - 完整存储键名，约定挂消费方命名空间前缀
+ * @param tier - 偏好存储层级
+ * @param bounds - 列宽度界
+ * @returns 列宽度偏好定义
+ */
+declare function definePaneWidthPreference(key: string, tier: 'persistent' | 'session', bounds: PaneWidthBounds): PreferenceDefinition<number>;
+/**
+ * 构造面板行高度偏好定义
+ *
+ * @remarks
+ *   键缺失与非法取值回落默认高度，可解析但越界的取值钳制到界内并取整
+ * @param key - 完整存储键名，约定挂消费方命名空间前缀
+ * @param tier - 偏好存储层级
+ * @param bounds - 面板行高度界
+ * @returns 面板行高度偏好定义
+ */
+declare function definePaneHeightPreference(key: string, tier: 'persistent' | 'session', bounds: PaneHeightBounds): PreferenceDefinition<number>;
+/**
+ * 可调面板分隔把手组件
+ *
+ * 以细分隔条形态承载面板尺寸的指针拖拽、键盘步进与双击复位交互，
+ * 竖向把手调节列宽，横向把手调节行高，
+ * 视觉为悬停加深的一条细分隔线，拖拽中切换为强调色
+ */
+/**
+ * 把手朝向
+ *
+ * `vertical` 为竖向分隔条承载列宽调节，`horizontal` 为横向分隔条承载行高调节
+ */
+type PaneResizeOrientation = 'vertical' | 'horizontal';
+/**
+ * 被调面板方位
+ *
+ * `above` 为被调面板在把手上方，`below` 为被调面板在把手下方，仅横向把手消费，
+ * `below` 时拖拽增量与键盘步进方向整体取反，让背离下方面板的拖拽即增高
+ */
+type PaneResizeTarget = 'above' | 'below';
+/**
+ * 分隔把手组件属性
+ */
+type PaneResizeHandleProps = {
+  /**
+   * 把手朝向，缺省竖向即列宽把手
+   *
+   * @default 'vertical'
+   */
+  orientation?: PaneResizeOrientation;
+  /**
+   * 被调面板方位，仅横向把手消费，缺省被调面板在把手上方
+   *
+   * @remarks
+   *   取 `below` 时拖拽增量与键盘步进方向整体取反，
+   *   适配底部停靠面板即被调面板在把手下方的装配形态
+   * @default 'above'
+   */
+  resizeTarget?: PaneResizeTarget;
+  /**
+   * 当前面板尺寸，像素，列宽或行高，用于无障碍值播报与键盘步进基准
+   */
+  size: number;
+  /**
+   * 尺寸下界，像素
+   */
+  minSize: number;
+  /**
+   * 尺寸上界，像素
+   */
+  maxSize: number;
+  /**
+   * 无障碍名称，说明该把手调节哪一面板
+   */
+  ariaLabel: string;
+  /**
+   * 候选尺寸变更动作，候选经面板尺寸钩子钳制后生效
+   */
+  onSizeChange: (candidate: number) => void;
+  /**
+   * 双击复位动作
+   */
+  onReset: () => void;
+};
+/**
+ * 可调面板分隔把手组件
+ *
+ * @param props - 组件属性
+ * @returns 分隔把手元素
+ */
+declare function PaneResizeHandle(props: PaneResizeHandleProps): import("react").JSX.Element;
+/**
+ * 可调宽列组件属性
+ */
+type ResizableColumnProps = {
+  /**
+   * 列元素标签，侧栏语义用 `aside`，普通双栏列用 `div`
+   *
+   * @default 'div'
+   */
+  as?: 'aside' | 'div';
+  /**
+   * 列宽度偏好定义
+   */
+  preference: PreferenceDefinition<number>;
+  /**
+   * 列宽度界，供分隔把手拖拽钳制与复位
+   */
+  bounds: PaneWidthBounds;
+  /**
+   * 把手无障碍名称，说明调节哪一列
+   */
+  ariaLabel: string;
+  /**
+   * 列元素附加类名，承载滚动与背景等外观
+   */
+  className?: string;
+  /**
+   * 列内容
+   */
+  children: ReactNode;
+};
+/**
+ * 可调宽列组件
+ *
+ * @param props - 组件属性
+ * @returns 列元素与分隔把手片段
+ */
+declare function ResizableColumn(props: ResizableColumnProps): import("react").JSX.Element;
+export { type PaneHeightBounds, PaneResizeHandle, type PaneResizeHandleProps, type PaneResizeOrientation, type PaneResizeTarget, type PaneWidthBounds, ResizableColumn, type ResizableColumnProps, definePaneHeightPreference, definePaneWidthPreference };

package/dist/index.js

@@ -0,0 +1 @@
+import{clampedNumberCodec as e,definePreference as t,usePreference as n}from"@longzai-intelligence-layout/preferences";import{Fragment as r,useCallback as i,useEffect as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(n,r,i){return t({key:n,tier:r},e({fallback:i.defaultWidth,min:i.minWidth,max:i.maxWidth}))}function d(n,r,i){return t({key:n,tier:r},e({fallback:i.defaultHeight,min:i.minHeight,max:i.maxHeight}))}function f(e,t){let{isVertical:n,deltaSign:r,size:i,minSize:a,maxSize:o,onSizeChange:s}=t,c=null;n?e.key===`ArrowLeft`||e.key===`ArrowDown`?c=-16:(e.key===`ArrowRight`||e.key===`ArrowUp`)&&(c=16):e.key===`ArrowUp`||e.key===`ArrowLeft`?c=-16:(e.key===`ArrowDown`||e.key===`ArrowRight`)&&(c=16),c===null?e.key===`Home`?(e.preventDefault(),s(a)):e.key===`End`&&(e.preventDefault(),s(o)):(e.preventDefault(),s(i+r*c))}function p(e,t){a(()=>{if(!e)return;let n=document.body.style.userSelect,r=document.body.style.cursor;return document.body.style.userSelect=`none`,document.body.style.cursor=t?`col-resize`:`row-resize`,()=>{document.body.style.userSelect=n,document.body.style.cursor=r}},[e,t])}function m(e){let t=e.orientation??`vertical`,n=t===`vertical`,r=(e.resizeTarget??`above`)===`below`?-1:1,{size:i,minSize:a,maxSize:l,ariaLabel:u,onSizeChange:d,onReset:m}=e,[h,g]=s(!1),_=o({pointerCoordinate:0,startSize:0});return p(h,n),/* @__PURE__ */ c(`div`,{role:`separator`,"aria-orientation":t,"aria-label":u,"aria-valuenow":i,"aria-valuemin":a,"aria-valuemax":l,"aria-valuetext":`${i} 像素`,tabIndex:0,title:n?`拖拽调宽，双击复位`:`拖拽调高，双击复位`,onPointerDown:e=>{e.preventDefault(),e.currentTarget.setPointerCapture(e.pointerId),_.current={pointerCoordinate:n?e.clientX:e.clientY,startSize:i},g(!0)},onPointerMove:e=>{if(!h)return;let t=n?e.clientX:e.clientY;d(_.current.startSize+r*(t-_.current.pointerCoordinate))},onPointerUp:e=>{e.currentTarget.hasPointerCapture(e.pointerId)&&e.currentTarget.releasePointerCapture(e.pointerId),g(!1)},onPointerCancel:()=>{g(!1)},onDoubleClick:m,onKeyDown:e=>{f(e,{isVertical:n,deltaSign:r,size:i,minSize:a,maxSize:l,onSizeChange:d})},className:n?`group relative w-1.5 shrink-0 cursor-col-resize touch-none select-none`:`group relative h-1.5 shrink-0 cursor-row-resize touch-none select-none`,children:/* @__PURE__ */ c(`span`,{className:n?`absolute inset-y-0 left-1/2 -translate-x-1/2 ${h?`w-0.5 bg-primary`:`w-px bg-border group-hover:bg-muted-foreground/40`}`:`absolute inset-x-0 top-1/2 -translate-y-1/2 ${h?`h-0.5 bg-primary`:`h-px bg-border group-hover:bg-muted-foreground/40`}`})})}function h(e,t){let{value:r,change:a}=n(e);return{width:r,changeWidth:a,resetWidth:i(()=>{a(t.defaultWidth)},[t,a])}}function g(e){let t=e.as??`div`,n=h(e.preference,e.bounds);return/* @__PURE__ */ l(r,{children:[/* @__PURE__ */ c(t,{className:`shrink-0 ${e.className??``}`,style:{width:n.width},children:e.children}),/* @__PURE__ */ c(m,{orientation:`vertical`,size:n.width,minSize:e.bounds.minWidth,maxSize:e.bounds.maxWidth,ariaLabel:e.ariaLabel,onSizeChange:n.changeWidth,onReset:n.resetWidth})]})}export{m as PaneResizeHandle,g as ResizableColumn,d as definePaneHeightPreference,u as definePaneWidthPreference};

package/package.json

@@ -1,6 +1,57 @@
 {
   "name": "@longzai-intelligence-layout/primitives",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.0.1",
+  "description": "Longzai Intelligence 布局结构原语包：分栏、面板与尺寸 hooks",
+  "keywords": [
+    "layout",
+    "longzai-intelligence",
+    "primitives",
+    "resizable"
+  ],
+  "license": "UNLICENSED",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "lzi-builder",
+    "build:prod": "NODE_ENV=production bun run build",
+    "prepublishOnly": "bun run build:prod",
+    "typecheck": "bun run typecheck:app && bun run typecheck:node && bun run typecheck:test",
+    "typecheck:app": "lzi-tsgo typecheck tsconfig/app.json",
+    "typecheck:node": "lzi-tsgo typecheck tsconfig/node.json",
+    "typecheck:test": "lzi-tsgo typecheck tsconfig/test.json",
+    "lint": "oxlint && oxfmt --check",
+    "lint:fix": "oxlint --fix && oxfmt",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "test:coverage": "bun test --coverage",
+    "test:unit": "bun test src/__tests__/unit/",
+    "clean": "lzi-dev-cli clean"
+  },
+  "dependencies": {
+    "@longzai-intelligence-layout/preferences": "0.0.1"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^20.11.2",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.3.0",
+    "happy-dom": "^20.11.2",
+    "react": "19.2.6",
+    "react-dom": "19.2.6"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.