dishui 0.0.91 → 0.0.101

package/dist/components/Table/index.js

@@ -4,7 +4,7 @@ import t from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/Table/index.tsx
 var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children: t, className: r = "", card: s = !1, cardOptions: c = o, onClick: l, onMouseEnter: u, onMouseLeave: d, ...f }) => {
-	let p = e("table", s && "blade-table-card", r);
+	let p = e("table", s && "dishui-table-card", r);
 	return /* @__PURE__ */ n(i.Provider, {
 		value: s ? c : null,
 		children: /* @__PURE__ */ n(a.Provider, {
@@ -39,7 +39,7 @@ var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children:
 		});
 	},
 	Body: ({ children: r, className: o = "", style: s, ...c }) => {
-		let l = t.useContext(i), u = e("table-row-group", l && "blade-table-card__grid", l?.gridClassName, o);
+		let l = t.useContext(i), u = e("table-row-group", l && "dishui-table-card__grid", l?.gridClassName, o);
 		return /* @__PURE__ */ n(a.Provider, {
 			value: !0,
 			children: /* @__PURE__ */ n("tbody", {
@@ -55,7 +55,7 @@ var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children:
 		});
 	},
 	Row: ({ children: r, className: o = "", selected: s = !1, style: c, onClick: l, onDoubleClick: u, onMouseEnter: d, onMouseLeave: f, ...p }) => {
-		let m = t.useContext(i), h = t.useContext(a) ? m : null, g = e("table-row", s && "bg-base-200", "hover:bg-base-100", h && "blade-table-card__row", h?.className, o);
+		let m = t.useContext(i), h = t.useContext(a) ? m : null, g = e("table-row", s && "bg-base-200", "hover:bg-base-100", h && "dishui-table-card__row", h?.className, o);
 		return /* @__PURE__ */ n("tr", {
 			role: m ? "row" : void 0,
 			"data-card-selected": h && s ? "true" : void 0,
@@ -73,7 +73,7 @@ var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children:
 		});
 	},
 	Cell: ({ children: o, label: s, className: c = "", onClick: l, colSpan: u, style: d, onDoubleClick: f, onMouseEnter: p, onMouseLeave: m, ...h }) => {
-		let g = t.useContext(i), _ = t.useContext(a) ? g : null, v = e("table-cell", _ && "blade-table-card__field", _?.fieldClassName, c);
+		let g = t.useContext(i), _ = t.useContext(a) ? g : null, v = e("table-cell", _ && "dishui-table-card__field", _?.fieldClassName, c);
 		return /* @__PURE__ */ r("td", {
 			role: g ? "cell" : void 0,
 			...h,
@@ -88,14 +88,14 @@ var i = t.createContext(null), a = t.createContext(!1), o = {}, s = ({ children:
 			onMouseEnter: p,
 			onMouseLeave: m,
 			children: [_ && s != null ? /* @__PURE__ */ n("div", {
-				className: e("blade-table-card__label", _.labelClassName),
+				className: e("dishui-table-card__label", _.labelClassName),
 				style: _.labelStyle,
 				children: s
 			}) : null, o]
 		});
 	},
 	HeaderCell: ({ children: o, className: s = "", style: c, onClick: l, sortable: u = !1, sortDirection: d = null, draggable: f, onDragStart: p, onDragOver: m, onDrop: h, onMouseEnter: g, onMouseLeave: _, ...v }) => {
-		let y = t.useContext(i), b = t.useContext(a), x = b ? y : null, S = e("table-cell font-medium", u && "cursor-pointer", x && "blade-table-card__field", x?.fieldClassName, s);
+		let y = t.useContext(i), b = t.useContext(a), x = b ? y : null, S = e("table-cell font-medium", u && "cursor-pointer", x && "dishui-table-card__field", x?.fieldClassName, s);
 		return /* @__PURE__ */ n("th", {
 			role: y ? v.scope === "row" || v.scope === "rowgroup" || b && !v.scope ? "rowheader" : "columnheader" : void 0,
 			...v,

package/dist/components/Table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport './Table.css';\n\nexport type TableCardOptions = {\n  /** Applied to each Table.Body grid. */\n  gridClassName?: string;\n  gridStyle?: React.CSSProperties;\n  /** Applied to each body row card. */\n  className?: string;\n  style?: React.CSSProperties;\n  fieldClassName?: string;\n  fieldStyle?: React.CSSProperties;\n  labelClassName?: string;\n  labelStyle?: React.CSSProperties;\n};\n\nconst CardContext = React.createContext<TableCardOptions | null>(null);\nconst BodyContext = React.createContext(false);\nconst defaultCardOptions: TableCardOptions = {};\n\nexport type TableProps = {\n  children: React.ReactNode;\n  card?: boolean;\n  cardOptions?: TableCardOptions;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nconst Table = ({\n  children,\n  className = '',\n  card = false,\n  cardOptions = defaultCardOptions,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, card && 'blade-table-card', className);\n\n  return (\n    <CardContext.Provider value={card ? cardOptions : null}>\n      <BodyContext.Provider value={false}>\n        <table\n          role={card ? 'table' : undefined}\n          {...rest}\n          className={tableClasses}\n          onClick={onClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </table>\n      </BodyContext.Provider>\n    </CardContext.Provider>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableHead = ({\n  children,\n  className = '',\n  ...rest\n}: TableHeadProps) => {\n  const options = React.useContext(CardContext);\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead role={options ? 'rowgroup' : undefined} {...rest} className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableBody = ({\n  children,\n  className = '',\n  style,\n  ...rest\n}: TableBodyProps) => {\n  const options = React.useContext(CardContext);\n  const bodyClasses = cn('table-row-group', options && 'blade-table-card__grid', options?.gridClassName, className);\n\n  return (\n    <BodyContext.Provider value={true}>\n      <tbody\n        role={options ? 'rowgroup' : undefined}\n        {...rest}\n        className={bodyClasses}\n        style={options ? { ...options.gridStyle, ...style } : style}\n      >\n        {children}\n      </tbody>\n    </BodyContext.Provider>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  style,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    options && 'blade-table-card__row',\n    options?.className,\n    className\n  );\n\n  return (\n    <tr\n      role={cardOptions ? 'row' : undefined}\n      data-card-selected={options && selected ? 'true' : undefined}\n      style={options ? { ...options.style, ...style } : style}\n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children?: React.ReactNode;\n  /** Visible field label in card body cells only. */\n  label?: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst TableCell = ({\n  children,\n  label,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const cellClasses = cn('table-cell', options && 'blade-table-card__field', options?.fieldClassName, className);\n\n  return (\n    <td\n      role={cardOptions ? 'cell' : undefined}\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {/* Keep children in a fixed slot so mode/label changes preserve local state. */}\n      {options && label !== null && label !== undefined ? <div className={cn('blade-table-card__label', options.labelClassName)} style={options.labelStyle}>{label}</div> : null}\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.ThHTMLAttributes<HTMLTableCellElement>;\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  style,\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableHeaderCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    options && 'blade-table-card__field',\n    options?.fieldClassName,\n    className\n  );\n\n  return (\n    <th\n      role={cardOptions ? (rest.scope === 'row' || rest.scope === 'rowgroup' || (inBody && !rest.scope) ? 'rowheader' : 'columnheader') : undefined}\n      {...rest}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {sortable ? <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div> : children}\n    </th>\n  );\n};\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\nconst TableCaption = (props: TableCaptionProps) => <caption {...props} />;\nconst TableFooter = (props: TableFooterProps) => {\n  const options = React.useContext(CardContext);\n  return <tfoot role={options ? 'rowgroup' : undefined} {...props} />;\n};\n\n// 扩展Table组件，添加子组件\nexport type TableCardProps = Omit<TableProps, 'card'>;\n\ninterface TableSubcomponents {\n  Caption: React.FC<TableCaptionProps>;\n  Footer: React.FC<TableFooterProps>;\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst subcomponents: TableSubcomponents = {\n  Caption: TableCaption,\n  Footer: TableFooter,\n  Head: TableHead,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n};\n\nconst TableCard = (props: TableCardProps) => <Table {...props} card />;\nconst TableWithCompounds = Object.assign(Table, subcomponents, {\n  Card: Object.assign(TableCard, subcomponents),\n});\n\nexport default TableWithCompounds; "],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Table/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport './Table.css';\n\nexport type TableCardOptions = {\n  /** Applied to each Table.Body grid. */\n  gridClassName?: string;\n  gridStyle?: React.CSSProperties;\n  /** Applied to each body row card. */\n  className?: string;\n  style?: React.CSSProperties;\n  fieldClassName?: string;\n  fieldStyle?: React.CSSProperties;\n  labelClassName?: string;\n  labelStyle?: React.CSSProperties;\n};\n\nconst CardContext = React.createContext<TableCardOptions | null>(null);\nconst BodyContext = React.createContext(false);\nconst defaultCardOptions: TableCardOptions = {};\n\nexport type TableProps = {\n  children: React.ReactNode;\n  card?: boolean;\n  cardOptions?: TableCardOptions;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nconst Table = ({\n  children,\n  className = '',\n  card = false,\n  cardOptions = defaultCardOptions,\n  onClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableProps) => {\n  const baseClass = 'table';\n  \n  const tableClasses = cn(baseClass, card && 'dishui-table-card', className);\n\n  return (\n    <CardContext.Provider value={card ? cardOptions : null}>\n      <BodyContext.Provider value={false}>\n        <table\n          role={card ? 'table' : undefined}\n          {...rest}\n          className={tableClasses}\n          onClick={onClick}\n          onMouseEnter={onMouseEnter}\n          onMouseLeave={onMouseLeave}\n        >\n          {children}\n        </table>\n      </BodyContext.Provider>\n    </CardContext.Provider>\n  );\n};\n\n// Table.Head 组件\nexport type TableHeadProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableHead = ({\n  children,\n  className = '',\n  ...rest\n}: TableHeadProps) => {\n  const options = React.useContext(CardContext);\n  const baseClass = 'table-header-group';\n  \n  const headClasses = cn(baseClass, className);\n\n  return (\n    <thead role={options ? 'rowgroup' : undefined} {...rest} className={headClasses}>\n      {children}\n    </thead>\n  );\n};\n\n// Table.Body 组件\nexport type TableBodyProps = React.HTMLAttributes<HTMLTableSectionElement>;\n\nconst TableBody = ({\n  children,\n  className = '',\n  style,\n  ...rest\n}: TableBodyProps) => {\n  const options = React.useContext(CardContext);\n  const bodyClasses = cn('table-row-group', options && 'dishui-table-card__grid', options?.gridClassName, className);\n\n  return (\n    <BodyContext.Provider value={true}>\n      <tbody\n        role={options ? 'rowgroup' : undefined}\n        {...rest}\n        className={bodyClasses}\n        style={options ? { ...options.gridStyle, ...style } : style}\n      >\n        {children}\n      </tbody>\n    </BodyContext.Provider>\n  );\n};\n\n// Table.Row 组件\nexport type TableRowProps = {\n  children: React.ReactNode;\n  className?: string;\n  selected?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & Omit<\n  React.HTMLAttributes<HTMLTableRowElement>,\n  'className' | 'onClick' | 'onDoubleClick' | 'onMouseEnter' | 'onMouseLeave'\n>;\n\nconst TableRow = ({\n  children,\n  className = '',\n  selected = false,\n  style,\n  onClick,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableRowProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-row';\n\n  const rowClasses = cn(\n    baseClass,\n    selected && 'bg-base-200',\n    'hover:bg-base-100',\n    options && 'dishui-table-card__row',\n    options?.className,\n    className\n  );\n\n  return (\n    <tr\n      role={cardOptions ? 'row' : undefined}\n      data-card-selected={options && selected ? 'true' : undefined}\n      style={options ? { ...options.style, ...style } : style}\n      className={rowClasses}\n      onClick={onClick}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      {...rest}\n    >\n      {children}\n    </tr>\n  );\n};\n\n// Table.Cell 组件\nexport type TableCellProps = {\n  children?: React.ReactNode;\n  /** Visible field label in card body cells only. */\n  label?: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  colSpan?: number;\n  style?: React.CSSProperties;\n  \n  // 添加鼠标事件\n  onDoubleClick?: (e: React.MouseEvent) => void;\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.TdHTMLAttributes<HTMLTableCellElement>;\n\nconst TableCell = ({\n  children,\n  label,\n  className = '',\n  onClick,\n  colSpan,\n  style,\n  onDoubleClick,\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const cellClasses = cn('table-cell', options && 'dishui-table-card__field', options?.fieldClassName, className);\n\n  return (\n    <td\n      role={cardOptions ? 'cell' : undefined}\n      {...rest}\n      className={cellClasses}\n      onClick={onClick}\n      colSpan={colSpan}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      onDoubleClick={onDoubleClick}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {/* Keep children in a fixed slot so mode/label changes preserve local state. */}\n      {options && label !== null && label !== undefined ? <div className={cn('dishui-table-card__label', options.labelClassName)} style={options.labelStyle}>{label}</div> : null}\n      {children}\n    </td>\n  );\n};\n\n// Table.HeaderCell 组件\nexport type TableHeaderCellProps = {\n  children: React.ReactNode;\n  className?: string;\n  onClick?: (e: React.MouseEvent) => void;\n  sortable?: boolean;\n  sortDirection?: 'asc' | 'desc' | null;\n  \n  // 拖拽相关属性\n  draggable?: boolean;\n  onDragStart?: (e: React.DragEvent) => void;\n  onDragOver?: (e: React.DragEvent) => void;\n  onDrop?: (e: React.DragEvent) => void;\n  \n  // 鼠标事件\n  onMouseEnter?: (e: React.MouseEvent) => void;\n  onMouseLeave?: (e: React.MouseEvent) => void;\n} & React.ThHTMLAttributes<HTMLTableCellElement>;\n\nconst TableHeaderCell = ({\n  children,\n  className = '',\n  style,\n  onClick,\n  sortable = false,\n  sortDirection = null,\n  \n  // 拖拽相关属性\n  draggable,\n  onDragStart,\n  onDragOver,\n  onDrop,\n  \n  // 鼠标事件\n  onMouseEnter,\n  onMouseLeave,\n  ...rest\n}: TableHeaderCellProps) => {\n  const cardOptions = React.useContext(CardContext);\n  const inBody = React.useContext(BodyContext);\n  const options = inBody ? cardOptions : null;\n  const baseClass = 'table-cell font-medium';\n  \n  const headerCellClasses = cn(\n    baseClass,\n    sortable && 'cursor-pointer',\n    options && 'dishui-table-card__field',\n    options?.fieldClassName,\n    className\n  );\n\n  return (\n    <th\n      role={cardOptions ? (rest.scope === 'row' || rest.scope === 'rowgroup' || (inBody && !rest.scope) ? 'rowheader' : 'columnheader') : undefined}\n      {...rest}\n      style={options ? { ...options.fieldStyle, ...style } : style}\n      className={headerCellClasses}\n      onClick={onClick}\n      draggable={draggable}\n      onDragStart={onDragStart}\n      onDragOver={onDragOver}\n      onDrop={onDrop}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {sortable ? <div className=\"flex items-center gap-2\">\n        {children}\n        {sortable && (\n          <div className=\"flex flex-col\">\n            {sortDirection === 'asc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M5 15l7-7 7 7\" />\n              </svg>\n            ) : sortDirection === 'desc' ? (\n              <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M19 9l-7 7-7-7\" />\n              </svg>\n            ) : (\n              <div className=\"h-4 w-4 opacity-30\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" className=\"h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                  <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n                </svg>\n              </div>\n            )}\n          </div>\n        )}\n      </div> : children}\n    </th>\n  );\n};\n\nexport type TableCaptionProps = React.HTMLAttributes<HTMLTableCaptionElement>;\nexport type TableFooterProps = React.HTMLAttributes<HTMLTableSectionElement>;\nconst TableCaption = (props: TableCaptionProps) => <caption {...props} />;\nconst TableFooter = (props: TableFooterProps) => {\n  const options = React.useContext(CardContext);\n  return <tfoot role={options ? 'rowgroup' : undefined} {...props} />;\n};\n\n// 扩展Table组件，添加子组件\nexport type TableCardProps = Omit<TableProps, 'card'>;\n\ninterface TableSubcomponents {\n  Caption: React.FC<TableCaptionProps>;\n  Footer: React.FC<TableFooterProps>;\n  Head: React.FC<TableHeadProps>;\n  Body: React.FC<TableBodyProps>;\n  Row: React.FC<TableRowProps>;\n  Cell: React.FC<TableCellProps>;\n  HeaderCell: React.FC<TableHeaderCellProps>;\n}\n\nconst subcomponents: TableSubcomponents = {\n  Caption: TableCaption,\n  Footer: TableFooter,\n  Head: TableHead,\n  Body: TableBody,\n  Row: TableRow,\n  Cell: TableCell,\n  HeaderCell: TableHeaderCell,\n};\n\nconst TableCard = (props: TableCardProps) => <Table {...props} card />;\nconst TableWithCompounds = Object.assign(Table, subcomponents, {\n  Card: Object.assign(TableCard, subcomponents),\n});\n\nexport default TableWithCompounds; "],"mappings":"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"}

package/dist/components/ai/AgentChat/index.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+export type AgentChatReasoningStep = {
+    /** Tools used in this step, rendered as chips: `Sales History · Flavor Data`. */
+    tools?: string[];
+    /** Rendered as `for 4s` after the chips. */
+    durationMs?: number;
+    /** Plain-language result of the step. */
+    summary?: React.ReactNode;
+};
+export type AgentChatMessage = {
+    id: string;
+    role: 'user' | 'assistant';
+    content?: React.ReactNode | string;
+    /** Assistant-only: each step renders as a chips-and-duration line followed by its summary. */
+    reasoning?: AgentChatReasoningStep[];
+    /** Epoch milliseconds. */
+    createdAt?: number;
+};
+export type ChatThread = {
+    id: string;
+    label: string;
+    messages: AgentChatMessage[];
+};
+export type AgentChatLabels = {
+    send?: string;
+    thinking?: string;
+    threads?: string;
+    messages?: string;
+};
+export type AgentChatProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
+    threads: ChatThread[];
+    /** Controlled active thread id. */
+    activeThread?: string;
+    defaultActiveThread?: string;
+    onActiveThreadChange?: (threadId: string) => void;
+    /** Called with the trimmed composer text and the active thread id. */
+    onSend?: (text: string, threadId: string) => void;
+    /** Shows a thinking indicator under the last message and disables sending. */
+    busy?: boolean;
+    placeholder?: string;
+    /** Total panel height; number = px. */
+    height?: string | number;
+    /** Replace the default message renderer. */
+    renderMessage?: (message: AgentChatMessage) => React.ReactNode;
+    /** Shown when the active thread has no messages. */
+    emptyState?: React.ReactNode;
+    labels?: AgentChatLabels;
+};
+/**
+ * Tabbed chat panel: a `tablist` of threads, a scrollable log where user
+ * turns sit right in a muted bubble and assistant turns sit left as plain
+ * text with their reasoning lines, and a composer that auto-grows.
+ */
+export default function AgentChat({ threads, activeThread: activeProp, defaultActiveThread, onActiveThreadChange, onSend, busy, placeholder, height, renderMessage, emptyState, labels, className, style, ...rest }: AgentChatProps): React.JSX.Element;

package/dist/components/ai/AgentChat/index.js

@@ -0,0 +1,176 @@
+import { cn as e } from "../../../utils/cn.js";
+import { formatDuration as t } from "../shared.js";
+import n from "../LoadingState/index.js";
+/* empty css          */
+import r, { useCallback as i, useEffect as a, useId as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/ai/AgentChat/index.tsx
+var f = {
+	send: "Send",
+	thinking: "Thinking",
+	threads: "Threads",
+	messages: "Messages"
+}, p = (e) => {
+	e.style.height = "auto", e.style.height = `${Math.min(e.scrollHeight, 160)}px`;
+}, m = () => /* @__PURE__ */ d("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: [/* @__PURE__ */ u("path", { d: "m5 12 7-7 7 7" }), /* @__PURE__ */ u("path", { d: "M12 19V5" })]
+}), h = ({ steps: e }) => /* @__PURE__ */ u("ol", {
+	className: "dishui-ai-agent-chat__reasoning",
+	children: e.map((e) => /* @__PURE__ */ d("li", {
+		className: "dishui-ai-agent-chat__step",
+		children: [(e.tools?.length || e.durationMs !== void 0) && /* @__PURE__ */ d("div", {
+			className: "dishui-ai-agent-chat__tools",
+			children: [e.tools?.map((e, t) => /* @__PURE__ */ d(r.Fragment, { children: [t > 0 && /* @__PURE__ */ u("span", {
+				className: "dishui-ai-agent-chat__sep",
+				"aria-hidden": "true",
+				children: "·"
+			}), /* @__PURE__ */ u("span", {
+				className: "dishui-ai-agent-chat__chip",
+				children: e
+			})] }, e)), e.durationMs !== void 0 && /* @__PURE__ */ d(l, { children: [!!e.tools?.length && /* @__PURE__ */ u("span", {
+				className: "dishui-ai-agent-chat__sep",
+				"aria-hidden": "true",
+				children: "·"
+			}), /* @__PURE__ */ d("span", {
+				className: "dishui-ai-agent-chat__duration",
+				children: ["for ", t(e.durationMs)]
+			})] })]
+		}), e.summary !== void 0 && /* @__PURE__ */ u("div", {
+			className: "dishui-ai-agent-chat__summary",
+			children: e.summary
+		})]
+	}, `${e.durationMs ?? ""}-${e.tools?.join("-") ?? ""}-${String(e.summary ?? "")}`))
+}), g = ({ message: t }) => /* @__PURE__ */ d("div", {
+	className: e("dishui-ai-agent-chat__message", `dishui-ai-agent-chat__message--${t.role}`),
+	children: [t.role === "assistant" && t.reasoning?.length ? /* @__PURE__ */ u(h, { steps: t.reasoning }) : null, t.content !== void 0 && t.content !== null && /* @__PURE__ */ u("div", {
+		className: "dishui-ai-agent-chat__content",
+		children: t.content
+	})]
+});
+function _({ threads: t, activeThread: l, defaultActiveThread: h, onActiveThreadChange: _, onSend: v, busy: y = !1, placeholder: b = "Ask the agent…", height: x = 480, renderMessage: S, emptyState: C, labels: w, className: T, style: E, ...D }) {
+	let O = o(), k = {
+		...f,
+		...w
+	}, [A, j] = c(h ?? t[0]?.id), M = l ?? A, N = t.find((e) => e.id === M) ?? t[0], P = i((e) => {
+		j(e), _?.(e);
+	}, [_]), F = s({}), I = (e, n) => {
+		let r;
+		if (e.key === "ArrowRight" ? r = (n + 1) % t.length : e.key === "ArrowLeft" ? r = (n - 1 + t.length) % t.length : e.key === "Home" ? r = 0 : e.key === "End" && (r = t.length - 1), r === void 0) return;
+		e.preventDefault();
+		let i = t[r];
+		P(i.id), F.current[i.id]?.focus();
+	}, L = s(null), R = N?.messages.length ?? 0;
+	a(() => {
+		let e = L.current;
+		e && (e.scrollTop = e.scrollHeight);
+	}, [R, y]);
+	let [z, B] = c(""), V = s(null), H = !y && z.trim().length > 0 && !!N, U = () => {
+		if (!H || !N) return;
+		v?.(z.trim(), N.id), B("");
+		let e = V.current;
+		e && (e.style.height = "auto");
+	}, W = (e) => {
+		e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && (e.preventDefault(), U());
+	}, G = `${O}-panel`, K = (e) => `${O}-tab-${e}`;
+	return /* @__PURE__ */ d("div", {
+		...D,
+		className: e("dishui-ai-agent-chat", T),
+		style: {
+			...E,
+			height: typeof x == "number" ? `${x}px` : x
+		},
+		children: [
+			t.length > 1 && /* @__PURE__ */ u("div", {
+				className: "dishui-ai-agent-chat__tabs",
+				role: "tablist",
+				"aria-label": k.threads,
+				children: t.map((t, n) => {
+					let r = t.id === N?.id;
+					return /* @__PURE__ */ u("button", {
+						ref: (e) => {
+							F.current[t.id] = e;
+						},
+						id: K(t.id),
+						type: "button",
+						role: "tab",
+						"aria-selected": r,
+						"aria-controls": G,
+						tabIndex: r ? 0 : -1,
+						className: e("dishui-ai-agent-chat__tab", r && "dishui-ai-agent-chat__tab--active"),
+						onClick: () => P(t.id),
+						onKeyDown: (e) => I(e, n),
+						children: t.label
+					}, t.id);
+				})
+			}),
+			/* @__PURE__ */ u("div", {
+				ref: L,
+				id: G,
+				role: "tabpanel",
+				"aria-labelledby": N && t.length > 1 ? K(N.id) : void 0,
+				className: "dishui-ai-agent-chat__log",
+				children: /* @__PURE__ */ d("div", {
+					role: "log",
+					"aria-live": "polite",
+					"aria-label": k.messages,
+					className: "dishui-ai-agent-chat__messages",
+					children: [
+						R === 0 && !y && C !== void 0 && /* @__PURE__ */ u("div", {
+							className: "dishui-ai-agent-chat__empty",
+							children: C
+						}),
+						N?.messages.map((e) => /* @__PURE__ */ u(r.Fragment, { children: S ? S(e) : /* @__PURE__ */ u(g, { message: e }) }, e.id)),
+						y && /* @__PURE__ */ u("div", {
+							className: "dishui-ai-agent-chat__message dishui-ai-agent-chat__message--assistant",
+							children: /* @__PURE__ */ u(n, {
+								variant: "dots",
+								size: "sm",
+								label: k.thinking,
+								showElapsed: !1
+							})
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ d("form", {
+				className: "dishui-ai-agent-chat__composer",
+				onSubmit: (e) => {
+					e.preventDefault(), U();
+				},
+				children: [/* @__PURE__ */ u("textarea", {
+					ref: V,
+					className: "dishui-ai-agent-chat__input",
+					rows: 1,
+					value: z,
+					placeholder: b,
+					"aria-label": b,
+					disabled: !N,
+					onChange: (e) => {
+						B(e.target.value), p(e.target);
+					},
+					onKeyDown: W
+				}), /* @__PURE__ */ u("button", {
+					type: "submit",
+					className: "dishui-ai-agent-chat__send",
+					disabled: !H,
+					"aria-label": k.send,
+					title: k.send,
+					children: /* @__PURE__ */ u(m, {})
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { _ as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ai/AgentChat/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/AgentChat/index.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useId, useRef, useState } from 'react';\nimport { cn } from '../../../utils/cn';\nimport { formatDuration } from '../shared';\nimport LoadingState from '../LoadingState';\nimport './AgentChat.css';\n\nexport type AgentChatReasoningStep = {\n  /** Tools used in this step, rendered as chips: `Sales History · Flavor Data`. */\n  tools?: string[];\n  /** Rendered as `for 4s` after the chips. */\n  durationMs?: number;\n  /** Plain-language result of the step. */\n  summary?: React.ReactNode;\n};\n\nexport type AgentChatMessage = {\n  id: string;\n  role: 'user' | 'assistant';\n  content?: React.ReactNode | string;\n  /** Assistant-only: each step renders as a chips-and-duration line followed by its summary. */\n  reasoning?: AgentChatReasoningStep[];\n  /** Epoch milliseconds. */\n  createdAt?: number;\n};\n\nexport type ChatThread = {\n  id: string;\n  label: string;\n  messages: AgentChatMessage[];\n};\n\nexport type AgentChatLabels = {\n  send?: string;\n  thinking?: string;\n  threads?: string;\n  messages?: string;\n};\n\nexport type AgentChatProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n  threads: ChatThread[];\n  /** Controlled active thread id. */\n  activeThread?: string;\n  defaultActiveThread?: string;\n  onActiveThreadChange?: (threadId: string) => void;\n  /** Called with the trimmed composer text and the active thread id. */\n  onSend?: (text: string, threadId: string) => void;\n  /** Shows a thinking indicator under the last message and disables sending. */\n  busy?: boolean;\n  placeholder?: string;\n  /** Total panel height; number = px. */\n  height?: string | number;\n  /** Replace the default message renderer. */\n  renderMessage?: (message: AgentChatMessage) => React.ReactNode;\n  /** Shown when the active thread has no messages. */\n  emptyState?: React.ReactNode;\n  labels?: AgentChatLabels;\n};\n\nconst DEFAULT_LABELS: Required<AgentChatLabels> = {\n  send: 'Send',\n  thinking: 'Thinking',\n  threads: 'Threads',\n  messages: 'Messages',\n};\n\nconst resizeComposer = (el: HTMLTextAreaElement) => {\n  el.style.height = 'auto';\n  el.style.height = `${Math.min(el.scrollHeight, 160)}px`;\n};\n\nconst SendIcon: React.FC = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n);\n\nconst Reasoning: React.FC<{ steps: AgentChatReasoningStep[] }> = ({ steps }) => (\n  <ol className=\"dishui-ai-agent-chat__reasoning\">\n    {steps.map(step => (\n      <li key={`${step.durationMs ?? ''}-${step.tools?.join('-') ?? ''}-${String(step.summary ?? '')}`} className=\"dishui-ai-agent-chat__step\">\n        {(step.tools?.length || step.durationMs !== undefined) && (\n          <div className=\"dishui-ai-agent-chat__tools\">\n            {step.tools?.map((tool, j) => (\n              <React.Fragment key={tool}>\n                {j > 0 && <span className=\"dishui-ai-agent-chat__sep\" aria-hidden=\"true\">·</span>}\n                <span className=\"dishui-ai-agent-chat__chip\">{tool}</span>\n              </React.Fragment>\n            ))}\n            {step.durationMs !== undefined && (\n              <>\n                {!!step.tools?.length && <span className=\"dishui-ai-agent-chat__sep\" aria-hidden=\"true\">·</span>}\n                <span className=\"dishui-ai-agent-chat__duration\">for {formatDuration(step.durationMs)}</span>\n              </>\n            )}\n          </div>\n        )}\n        {step.summary !== undefined && <div className=\"dishui-ai-agent-chat__summary\">{step.summary}</div>}\n      </li>\n    ))}\n  </ol>\n);\n\nconst DefaultMessage: React.FC<{ message: AgentChatMessage }> = ({ message }) => (\n  <div className={cn('dishui-ai-agent-chat__message', `dishui-ai-agent-chat__message--${message.role}`)}>\n    {message.role === 'assistant' && message.reasoning?.length ? <Reasoning steps={message.reasoning} /> : null}\n    {message.content !== undefined && message.content !== null && (\n      <div className=\"dishui-ai-agent-chat__content\">{message.content}</div>\n    )}\n  </div>\n);\n\n/**\n * Tabbed chat panel: a `tablist` of threads, a scrollable log where user\n * turns sit right in a muted bubble and assistant turns sit left as plain\n * text with their reasoning lines, and a composer that auto-grows.\n */\nexport default function AgentChat({\n  threads,\n  activeThread: activeProp,\n  defaultActiveThread,\n  onActiveThreadChange,\n  onSend,\n  busy = false,\n  placeholder = 'Ask the agent…',\n  height = 480,\n  renderMessage,\n  emptyState,\n  labels,\n  className,\n  style,\n  ...rest\n}: AgentChatProps) {\n  const baseId = useId();\n  const text = { ...DEFAULT_LABELS, ...labels };\n\n  const [internalActive, setInternalActive] = useState<string | undefined>(defaultActiveThread ?? threads[0]?.id);\n  const activeId = activeProp ?? internalActive;\n  const thread = threads.find(t => t.id === activeId) ?? threads[0];\n  const activate = useCallback((id: string) => {\n    setInternalActive(id);\n    onActiveThreadChange?.(id);\n  }, [onActiveThreadChange]);\n\n  const tabRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n  const onTabKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    let next: number | undefined;\n    if (event.key === 'ArrowRight') next = (index + 1) % threads.length;\n    else if (event.key === 'ArrowLeft') next = (index - 1 + threads.length) % threads.length;\n    else if (event.key === 'Home') next = 0;\n    else if (event.key === 'End') next = threads.length - 1;\n    if (next === undefined) return;\n    event.preventDefault();\n    const target = threads[next];\n    activate(target.id);\n    tabRefs.current[target.id]?.focus();\n  };\n\n  const logRef = useRef<HTMLDivElement>(null);\n  const messageCount = thread?.messages.length ?? 0;\n  // The effect intentionally follows message/busy transitions to keep the log pinned.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    const el = logRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n    // Message count and busy state intentionally retrigger the imperative scroll.\n    void messageCount;\n    void busy;\n  }, [messageCount, busy]);\n\n  const [draft, setDraft] = useState('');\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  const canSend = !busy && draft.trim().length > 0 && !!thread;\n  const send = () => {\n    if (!canSend || !thread) return;\n    onSend?.(draft.trim(), thread.id);\n    setDraft('');\n    const el = textareaRef.current;\n    if (el) el.style.height = 'auto';\n  };\n  const onComposerKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n    if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n      event.preventDefault();\n      send();\n    }\n  };\n\n  const panelId = `${baseId}-panel`;\n  const tabId = (id: string) => `${baseId}-tab-${id}`;\n\n  return (\n    <div\n      {...rest}\n      className={cn('dishui-ai-agent-chat', className)}\n      style={{ ...style, height: typeof height === 'number' ? `${height}px` : height }}\n    >\n      {threads.length > 1 && (\n        <div className=\"dishui-ai-agent-chat__tabs\" role=\"tablist\" aria-label={text.threads}>\n          {threads.map((t, i) => {\n            const selected = t.id === thread?.id;\n            return (\n              <button\n                key={t.id}\n                ref={el => { tabRefs.current[t.id] = el; }}\n                id={tabId(t.id)}\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={selected}\n                aria-controls={panelId}\n                tabIndex={selected ? 0 : -1}\n                className={cn('dishui-ai-agent-chat__tab', selected && 'dishui-ai-agent-chat__tab--active')}\n                onClick={() => activate(t.id)}\n                onKeyDown={e => onTabKeyDown(e, i)}\n              >\n                {t.label}\n              </button>\n            );\n          })}\n        </div>\n      )}\n\n      <div\n        ref={logRef}\n        id={panelId}\n        role=\"tabpanel\"\n        aria-labelledby={thread && threads.length > 1 ? tabId(thread.id) : undefined}\n        className=\"dishui-ai-agent-chat__log\"\n      >\n        <div role=\"log\" aria-live=\"polite\" aria-label={text.messages} className=\"dishui-ai-agent-chat__messages\">\n          {messageCount === 0 && !busy && emptyState !== undefined && (\n            <div className=\"dishui-ai-agent-chat__empty\">{emptyState}</div>\n          )}\n          {thread?.messages.map(message => (\n            <React.Fragment key={message.id}>\n              {renderMessage ? renderMessage(message) : <DefaultMessage message={message} />}\n            </React.Fragment>\n          ))}\n          {busy && (\n            <div className=\"dishui-ai-agent-chat__message dishui-ai-agent-chat__message--assistant\">\n              <LoadingState variant=\"dots\" size=\"sm\" label={text.thinking} showElapsed={false} />\n            </div>\n          )}\n        </div>\n      </div>\n\n      <form\n        className=\"dishui-ai-agent-chat__composer\"\n        onSubmit={e => { e.preventDefault(); send(); }}\n      >\n        <textarea\n          ref={textareaRef}\n          className=\"dishui-ai-agent-chat__input\"\n          rows={1}\n          value={draft}\n          placeholder={placeholder}\n          aria-label={placeholder}\n          disabled={!thread}\n          onChange={e => { setDraft(e.target.value); resizeComposer(e.target); }}\n          onKeyDown={onComposerKeyDown}\n        />\n        <button\n          type=\"submit\"\n          className=\"dishui-ai-agent-chat__send\"\n          disabled={!canSend}\n          aria-label={text.send}\n          title={text.send}\n        >\n          <SendIcon />\n        </button>\n      </form>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/ai/AgentRunCard/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+export type AgentRunStatus = 'queued' | 'running' | 'waiting' | 'done' | 'failed';
+export type AgentRunMeta = {
+    label?: React.ReactNode;
+    value: React.ReactNode;
+};
+export type AgentRunCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> & {
+    /** Agent name (e.g. `Sol`). */
+    name: React.ReactNode;
+    /** Model or engine label shown beside the name (e.g. `Opus 5`). */
+    model?: React.ReactNode;
+    /** Avatar slot, typically an `Avatar` with the agent's initials. */
+    avatar?: React.ReactNode;
+    /** Run status; drives the trailing badge tone and progress colour. */
+    status?: AgentRunStatus;
+    /** Explicit status label; defaults to a capitalised form of `status`. */
+    statusLabel?: React.ReactNode;
+    /** The task the agent is working on (single truncating line). */
+    task?: React.ReactNode;
+    /** Current activity line, prefixed by a status dot. */
+    activity?: React.ReactNode;
+    /** Progress from 0 to 1. When omitted, the progress row is hidden. */
+    progress?: number;
+    /** Compact meta values shown in a row (e.g. steps, elapsed, tokens). */
+    meta?: AgentRunMeta[];
+    /** Monospace footer, typically a branch or path. */
+    footer?: React.ReactNode;
+    /** Selected state (raised border). */
+    selected?: boolean;
+    /** Click handler turns the card into a button for keyboard users. */
+    onSelect?: () => void;
+};
+/**
+ * Agent run card: avatar + name + model, a status badge, the task, a current
+ * activity line, an optional progress bar with percentage, a compact meta row
+ * (steps / elapsed / tokens) and a monospace footer (branch or path).
+ */
+export default function AgentRunCard({ name, model, avatar, status, statusLabel, task, activity, progress, meta, footer, selected, onSelect, className, ...rest }: AgentRunCardProps): React.JSX.Element;

package/dist/components/ai/AgentRunCard/index.js

@@ -0,0 +1,100 @@
+import { cn as e } from "../../../utils/cn.js";
+import { clamp as t } from "../shared.js";
+/* empty css             */
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/ai/AgentRunCard/index.tsx
+var i = {
+	queued: "Queued",
+	running: "Running",
+	waiting: "Waiting",
+	done: "Done",
+	failed: "Failed"
+}, a = [];
+function o({ name: o, model: s, avatar: c, status: l = "queued", statusLabel: u, task: d, activity: f, progress: p, meta: m = a, footer: h, selected: g = !1, onSelect: _, className: v, ...y }) {
+	let b = !!_, x = typeof p == "number" && Number.isFinite(p), S = x ? Math.round(t(p, 0, 1) * 100) : 0, C = l === "running", w = u ?? i[l];
+	return /* @__PURE__ */ r("div", {
+		...y,
+		className: e("dishui-ai-run-card", `dishui-ai-run-card--${l}`, g && "dishui-ai-run-card--selected", b && "dishui-ai-run-card--interactive", v),
+		role: b ? "button" : void 0,
+		tabIndex: b ? 0 : void 0,
+		"aria-pressed": b ? g : void 0,
+		onClick: b ? _ : y.onClick,
+		onKeyDown: b ? (e) => {
+			e.target === e.currentTarget && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), e.repeat || _?.());
+		} : void 0,
+		children: [
+			/* @__PURE__ */ r("header", {
+				className: "dishui-ai-run-card__header",
+				children: [
+					c != null && /* @__PURE__ */ n("span", {
+						className: "dishui-ai-run-card__avatar",
+						children: c
+					}),
+					/* @__PURE__ */ r("span", {
+						className: "dishui-ai-run-card__identity",
+						children: [/* @__PURE__ */ n("span", {
+							className: "dishui-ai-run-card__name",
+							children: o
+						}), s != null && /* @__PURE__ */ n("span", {
+							className: "dishui-ai-run-card__model",
+							children: s
+						})]
+					}),
+					/* @__PURE__ */ r("span", {
+						className: e("dishui-ai-run-card__status", `dishui-ai-run-card__status--${l}`),
+						role: "status",
+						"aria-live": "polite",
+						children: [/* @__PURE__ */ n("span", {
+							className: e("dishui-ai-run-card__dot", C && "dishui-ai-run-card__dot--live"),
+							"aria-hidden": "true"
+						}), w]
+					})
+				]
+			}),
+			d != null && /* @__PURE__ */ n("div", {
+				className: "dishui-ai-run-card__task",
+				children: d
+			}),
+			f != null && /* @__PURE__ */ r("div", {
+				className: "dishui-ai-run-card__activity",
+				children: [/* @__PURE__ */ n("span", {
+					className: "dishui-ai-run-card__activity-dot",
+					"aria-hidden": "true"
+				}), /* @__PURE__ */ n("span", {
+					className: "dishui-ai-run-card__activity-text",
+					children: f
+				})]
+			}),
+			x && /* @__PURE__ */ r("div", {
+				className: "dishui-ai-run-card__progress",
+				children: [/* @__PURE__ */ n("span", {
+					className: "dishui-ai-run-card__track",
+					role: "progressbar",
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					"aria-valuenow": S,
+					children: /* @__PURE__ */ n("span", {
+						className: "dishui-ai-run-card__fill",
+						style: { width: `${S}%` }
+					})
+				}), /* @__PURE__ */ r("span", {
+					className: "dishui-ai-run-card__pct",
+					children: [S, "%"]
+				})]
+			}),
+			m.length > 0 && /* @__PURE__ */ n("dl", {
+				className: "dishui-ai-run-card__meta",
+				children: m.map((e, t) => /* @__PURE__ */ r("div", { children: [e.label !== null && e.label !== void 0 && /* @__PURE__ */ n("dt", { children: e.label }), /* @__PURE__ */ n("dd", { children: e.value })] }, e.label !== null && e.label !== void 0 ? `${String(e.label)}-${t}` : `meta-${t}`))
+			}),
+			h != null && /* @__PURE__ */ n("div", {
+				className: "dishui-ai-run-card__footer",
+				children: h
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/ai/AgentRunCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/AgentRunCard/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../utils/cn';\nimport { clamp } from '../shared';\nimport './AgentRunCard.css';\n\nexport type AgentRunStatus = 'queued' | 'running' | 'waiting' | 'done' | 'failed';\n\nexport type AgentRunMeta = {\n  label?: React.ReactNode;\n  value: React.ReactNode;\n};\n\nexport type AgentRunCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onSelect'> & {\n  /** Agent name (e.g. `Sol`). */\n  name: React.ReactNode;\n  /** Model or engine label shown beside the name (e.g. `Opus 5`). */\n  model?: React.ReactNode;\n  /** Avatar slot, typically an `Avatar` with the agent's initials. */\n  avatar?: React.ReactNode;\n  /** Run status; drives the trailing badge tone and progress colour. */\n  status?: AgentRunStatus;\n  /** Explicit status label; defaults to a capitalised form of `status`. */\n  statusLabel?: React.ReactNode;\n  /** The task the agent is working on (single truncating line). */\n  task?: React.ReactNode;\n  /** Current activity line, prefixed by a status dot. */\n  activity?: React.ReactNode;\n  /** Progress from 0 to 1. When omitted, the progress row is hidden. */\n  progress?: number;\n  /** Compact meta values shown in a row (e.g. steps, elapsed, tokens). */\n  meta?: AgentRunMeta[];\n  /** Monospace footer, typically a branch or path. */\n  footer?: React.ReactNode;\n  /** Selected state (raised border). */\n  selected?: boolean;\n  /** Click handler turns the card into a button for keyboard users. */\n  onSelect?: () => void;\n};\n\nconst STATUS_LABEL: Record<AgentRunStatus, string> = {\n  queued: 'Queued',\n  running: 'Running',\n  waiting: 'Waiting',\n  done: 'Done',\n  failed: 'Failed',\n};\n\nconst EMPTY_META: AgentRunMeta[] = [];\n\n/**\n * Agent run card: avatar + name + model, a status badge, the task, a current\n * activity line, an optional progress bar with percentage, a compact meta row\n * (steps / elapsed / tokens) and a monospace footer (branch or path).\n */\nexport default function AgentRunCard({\n  name,\n  model,\n  avatar,\n  status = 'queued',\n  statusLabel,\n  task,\n  activity,\n  progress,\n  meta = EMPTY_META,\n  footer,\n  selected = false,\n  onSelect,\n  className,\n  ...rest\n}: AgentRunCardProps) {\n  const interactive = !!onSelect;\n  const hasProgress = typeof progress === 'number' && Number.isFinite(progress);\n  const pct = hasProgress ? Math.round(clamp(progress as number, 0, 1) * 100) : 0;\n  const live = status === 'running';\n  const label = statusLabel ?? STATUS_LABEL[status];\n\n  return (\n    <div\n      {...rest}\n      className={cn(\n        'dishui-ai-run-card',\n        `dishui-ai-run-card--${status}`,\n        selected && 'dishui-ai-run-card--selected',\n        interactive && 'dishui-ai-run-card--interactive',\n        className,\n      )}\n      role={interactive ? 'button' : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      aria-pressed={interactive ? selected : undefined}\n      onClick={interactive ? onSelect : rest.onClick}\n      onKeyDown={interactive ? (event) => {\n        if (event.target !== event.currentTarget) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          if (!event.repeat) onSelect?.();\n        }\n      } : undefined}\n    >\n      <header className=\"dishui-ai-run-card__header\">\n        {avatar !== null && avatar !== undefined && <span className=\"dishui-ai-run-card__avatar\">{avatar}</span>}\n        <span className=\"dishui-ai-run-card__identity\">\n          <span className=\"dishui-ai-run-card__name\">{name}</span>\n          {model !== null && model !== undefined && <span className=\"dishui-ai-run-card__model\">{model}</span>}\n        </span>\n        <span\n          className={cn('dishui-ai-run-card__status', `dishui-ai-run-card__status--${status}`)}\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <span className={cn('dishui-ai-run-card__dot', live && 'dishui-ai-run-card__dot--live')} aria-hidden=\"true\" />\n          {label}\n        </span>\n      </header>\n\n      {task !== null && task !== undefined && <div className=\"dishui-ai-run-card__task\">{task}</div>}\n\n      {activity !== null && activity !== undefined && (\n        <div className=\"dishui-ai-run-card__activity\">\n          <span className=\"dishui-ai-run-card__activity-dot\" aria-hidden=\"true\" />\n          <span className=\"dishui-ai-run-card__activity-text\">{activity}</span>\n        </div>\n      )}\n\n      {hasProgress && (\n        <div className=\"dishui-ai-run-card__progress\">\n          <span\n            className=\"dishui-ai-run-card__track\"\n            role=\"progressbar\"\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-valuenow={pct}\n          >\n            <span className=\"dishui-ai-run-card__fill\" style={{ width: `${pct}%` }} />\n          </span>\n          <span className=\"dishui-ai-run-card__pct\">{pct}%</span>\n        </div>\n      )}\n\n      {meta.length > 0 && (\n        <dl className=\"dishui-ai-run-card__meta\">\n          {meta.map((item, index) => (\n            <div key={item.label !== null && item.label !== undefined ? `${String(item.label)}-${index}` : `meta-${index}`}>\n              {item.label !== null && item.label !== undefined && <dt>{item.label}</dt>}\n              <dd>{item.value}</dd>\n            </div>\n          ))}\n        </dl>\n      )}\n\n      {footer !== null && footer !== undefined && <div className=\"dishui-ai-run-card__footer\">{footer}</div>}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAuCA,IAAM,IAA+C;CACnD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,MAAM;CACN,QAAQ;AACV,GAEM,IAA6B,CAAC;AAOpC,SAAwB,EAAa,EACnC,SACA,UACA,WACA,YAAS,UACT,gBACA,SACA,aACA,aACA,UAAO,GACP,WACA,cAAW,IACX,aACA,cACA,GAAG,KACiB;CACpB,IAAM,IAAc,CAAC,CAAC,GAChB,IAAc,OAAO,KAAa,YAAY,OAAO,SAAS,CAAQ,GACtE,IAAM,IAAc,KAAK,MAAM,EAAM,GAAoB,GAAG,CAAC,IAAI,GAAG,IAAI,GACxE,IAAO,MAAW,WAClB,IAAQ,KAAe,EAAa;CAE1C,OACE,kBAAC,OAAD;EACE,GAAI;EACJ,WAAW,EACT,sBACA,uBAAuB,KACvB,KAAY,gCACZ,KAAe,mCACf,CACF;EACA,MAAM,IAAc,WAAW,KAAA;EAC/B,UAAU,IAAc,IAAI,KAAA;EAC5B,gBAAc,IAAc,IAAW,KAAA;EACvC,SAAS,IAAc,IAAW,EAAK;EACvC,WAAW,KAAe,MAAU;GAC9B,EAAM,WAAW,EAAM,kBACvB,EAAM,QAAQ,WAAW,EAAM,QAAQ,SACzC,EAAM,eAAe,GAChB,EAAM,UAAQ,IAAW;EAElC,IAAI,KAAA;EAnBN,UAAA;GAqBE,kBAAC,UAAD;IAAQ,WAAU;IAAlB,UAAA;KACG,KAAW,QAAgC,kBAAC,QAAD;MAAM,WAAU;MAA8B,UAAA;KAAa,CAAA;KACvG,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CACE,kBAAC,QAAD;OAAM,WAAU;OAA4B,UAAA;MAAW,CAAA,GACtD,KAAU,QAA+B,kBAAC,QAAD;OAAM,WAAU;OAA6B,UAAA;MAAY,CAAA,CAC/F;;KACN,kBAAC,QAAD;MACE,WAAW,EAAG,8BAA8B,+BAA+B,GAAQ;MACnF,MAAK;MACL,aAAU;MAHZ,UAAA,CAKE,kBAAC,QAAD;OAAM,WAAW,EAAG,2BAA2B,KAAQ,+BAA+B;OAAG,eAAY;MAAQ,CAAA,GAC5G,CACG;;IACA;;GAEP,KAAS,QAA8B,kBAAC,OAAD;IAAK,WAAU;IAA4B,UAAA;GAAU,CAAA;GAE5F,KAAa,QACZ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KAAM,WAAU;KAAmC,eAAY;IAAQ,CAAA,GACvE,kBAAC,QAAD;KAAM,WAAU;KAAqC,UAAA;IAAe,CAAA,CACjE;;GAGN,KACC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD;KACE,WAAU;KACV,MAAK;KACL,iBAAe;KACf,iBAAe;KACf,iBAAe;KAEf,UAAA,kBAAC,QAAD;MAAM,WAAU;MAA2B,OAAO,EAAE,OAAO,GAAG,EAAI,GAAG;KAAI,CAAA;IACrE,CAAA,GACN,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAA2C,GAAI,GAAO;IACnD,CAAA,CAAA;;GAGN,EAAK,SAAS,KACb,kBAAC,MAAD;IAAI,WAAU;IACX,UAAA,EAAK,KAAK,GAAM,MACf,kBAAC,OAAD,EAAA,UAAA,CACG,EAAK,UAAU,QAAQ,EAAK,UAAU,KAAA,KAAa,kBAAC,MAAD,EAAA,UAAK,EAAK,MAAU,CAAA,GACxE,kBAAC,MAAD,EAAA,UAAK,EAAK,MAAU,CAAA,CACjB,EAAA,GAHK,EAAK,UAAU,QAAQ,EAAK,UAAU,KAAA,IAAY,GAAG,OAAO,EAAK,KAAK,EAAE,GAAG,MAAU,QAAQ,GAGlG,CACN;GACC,CAAA;GAGL,KAAW,QAAgC,kBAAC,OAAD;IAAK,WAAU;IAA8B,UAAA;GAAY,CAAA;EAClG;;AAET"}

package/dist/components/ai/AgentScreen/index.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+export type AgentScreenStatus = 'idle' | 'loading' | 'working' | 'paused' | 'recording';
+export type AgentScreenLabels = {
+    open?: string;
+    teach?: string;
+    record?: string;
+    stopRecording?: string;
+    pause?: string;
+    resume?: string;
+    status?: Partial<Record<AgentScreenStatus, string>>;
+};
+export type AgentScreenProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {
+    status: AgentScreenStatus;
+    title?: React.ReactNode;
+    /** Shown in a faux address bar and opened by the default Open action. */
+    url?: string;
+    /** Screen content (`<img>`, `<iframe>`, any node). Absent → skeleton blocks. */
+    children?: React.ReactNode;
+    /** Defaults to opening `url` in a new tab when `url` is given. */
+    onOpen?: () => void;
+    onTeach?: () => void;
+    /** Toggles recording; the label flips to Stop while `status === 'recording'`. */
+    onRecord?: () => void;
+    onPause?: () => void;
+    onResume?: () => void;
+    elapsedMs?: number;
+    /** CSS `aspect-ratio` of the screen area. */
+    aspectRatio?: string;
+    /** Optional secondary panel shown beside or below the screen. */
+    secondary?: React.ReactNode;
+    /** Split direction when `secondary` is present. */
+    split?: 'horizontal' | 'vertical';
+    /** Initial panel percentages; must sum to 100. */
+    defaultSplitSizes?: [number, number];
+    /** Controlled panel percentages; must sum to 100. */
+    splitSizes?: [number, number];
+    onSplitSizesChange?: (sizes: number[]) => void;
+    onSplitSizesCommit?: (sizes: number[]) => void;
+    /** Minimum percentage for the primary screen and secondary panel. */
+    minPanelSizes?: [number, number];
+    /** Resize handle presentation from the shared Resizable component. */
+    resizeHandleVariant?: 'line' | 'pill';
+    labels?: AgentScreenLabels;
+};
+/**
+ * Window chrome around an agent's screen: title, text + dot status badge,
+ * elapsed time, optional address bar, the screen surface and a footer
+ * toolbar with Open / Teach a task / Record / Pause.
+ */
+export default function AgentScreen({ status, title, url, children, onOpen, onTeach, onRecord, onPause, onResume, elapsedMs, aspectRatio, secondary, split, defaultSplitSizes, splitSizes, onSplitSizesChange, onSplitSizesCommit, minPanelSizes, resizeHandleVariant, labels, className, ...rest }: AgentScreenProps): React.JSX.Element;