@lark-base-open/base-database-cli 1.3.7 → 1.3.8

package/templates/database-starter/gitignore

@@ -1,3 +1,10 @@
 node_modules/
 dist/
 .base-database-cli/
+.base-database-response-*/
+.env
+.env.*
+.npmrc
+.yarnrc
+.yarnrc.yml
+.pnpmrc

package/templates/database-starter/page/package-lock.json

@@ -8,7 +8,7 @@
       "name": "page",
       "version": "0.0.0",
       "dependencies": {
-        "@lark-base-open/base-site-channel": "0.1.3",
+        "@lark-base-open/base-site-channel": "0.1.4",
         "@radix-ui/react-slot": "^1.3.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -119,9 +119,9 @@
       }
     },
     "node_modules/@lark-base-open/base-site-channel": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/@lark-base-open/base-site-channel/-/base-site-channel-0.1.3.tgz",
-      "integrity": "sha512-wdc8zRkAX2P7pwBkyoun7oHrUP95xYCgAhhwsq4cUOg7ozIf9Em1DQken7kUeMc58pzDM5ONroWavoa1/oQiEg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@lark-base-open/base-site-channel/-/base-site-channel-0.1.4.tgz",
+      "integrity": "sha512-QBl60LoxLr2kNjCHxiuXtFxegSrMPA11P0IufjOkoonNEvZz3CfDtFwhO+EbkOZahANMRyxEq3DhdpFgEm5QDQ==",
       "dependencies": {
         "lodash-es": "^4.17.21"
       }

package/templates/database-starter/page/package.json

@@ -18,7 +18,7 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@lark-base-open/base-site-channel": "0.1.3",
+    "@lark-base-open/base-site-channel": "0.1.4",
     "@radix-ui/react-slot": "^1.3.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",

package/templates/database-starter/page/src/components/floating-button/assets/toast-close.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5043 13.5042C13.7646 13.2439 13.7665 12.8237 13.5062 12.5633L8.94298 8.00013L13.5061 3.43697C13.7665 3.17662 13.7646 2.7564 13.5043 2.49605C13.2439 2.2357 12.8237 2.23382 12.5633 2.49416C12.303 2.75451 8.00017 7.05732 8.00017 7.05732L3.43697 2.49413C3.17662 2.23378 2.7564 2.23566 2.49605 2.49601C2.2357 2.75636 2.23381 3.17658 2.49416 3.43693L7.05736 8.00013L2.49413 12.5634C2.23378 12.8237 2.23566 13.2439 2.49601 13.5043C2.75636 13.7646 3.17659 13.7665 3.43693 13.5062L8.00017 8.94294L12.5634 13.5061C12.8237 13.7665 13.2439 13.7646 13.5043 13.5042Z" fill="#646A73"/>
+</svg>

package/templates/database-starter/page/src/components/floating-button/assets/toast-info.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.00008" cy="8.00033" r="7.33333" fill="#1456F0"/>
+<path d="M8 5.33333C8.36819 5.33333 8.66667 5.03486 8.66667 4.66667C8.66667 4.29848 8.36819 4 8 4C7.63181 4 7.33333 4.29848 7.33333 4.66667C7.33333 5.03486 7.63181 5.33333 8 5.33333Z" fill="white"/>
+<path d="M7.33333 6C6.96514 6 6.66667 6.29848 6.66667 6.66667C6.66667 7.03486 6.96514 7.33333 7.33333 7.33333V10H6.66667C6.29848 10 6 10.2985 6 10.6667C6 11.0349 6.29848 11.3333 6.66667 11.3333H9.33333C9.70152 11.3333 10 11.0349 10 10.6667C10 10.2985 9.70152 10 9.33333 10H8.66667V6.66667C8.66667 6.29848 8.36819 6 8 6H7.33333Z" fill="white"/>
+</svg>

package/templates/database-starter/page/src/components/floating-button/assets/tooltip-caret.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="6" viewBox="0 0 24 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.4383 1.99309L11.2526 5.15916C11.6504 5.60668 12.3496 5.60668 12.7474 5.15916L15.5617 1.99309C16.6886 0.725344 18.3038 0 20 0L12 0L4 0C5.69619 0 7.31142 0.725345 8.4383 1.99309Z" fill="#1F2329"/>
+</svg>

package/templates/database-starter/page/src/components/floating-button/index.tsx

@@ -1,6 +1,15 @@
-import { useCallback, useEffect, useState } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
 import editDefaultIcon from './assets/edit-default.svg'
 import editActiveIcon from './assets/edit-active.svg'
+import tooltipCaretIcon from './assets/tooltip-caret.svg'
+import toastInfoIcon from './assets/toast-info.svg'
+import toastCloseIcon from './assets/toast-close.svg'
 import { fetchProjectMeta, type ProjectMeta } from './utils/project-meta'
 import {
   getDatabaseContext,
@@ -12,10 +21,20 @@ import { useUiLanguage, type UiLanguage } from '../../lib/ui-language'
 interface FloatingButtonI18n {
   editSite: string
   hidePanel: string
+  hiddenConfirmation: string
+  dismissNotification: string
+}
+
+interface TooltipPosition {
+  left: number
+  top: number
+  arrowLeft: number
 }
 
 const BASE_DATABASE_OVERVIEW_URL = 'https://feishu.cn/base/site/detail/overview'
 const FLOATING_BUTTON_PAGE_GAP = 24
+const TOOLTIP_VIEWPORT_GAP = 8
+const HIDDEN_CONFIRMATION_MS = 3000
 const EMPTY_PROJECT_META: ProjectMeta = {
   baseBindings: [],
   description: '',
@@ -28,14 +47,21 @@ const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
   en: {
     editSite: 'Edit and manage your apps',
     hidePanel: 'Hide until next visit',
+    hiddenConfirmation: 'Edit button hidden until you reopen the app',
+    dismissNotification: 'Dismiss notification',
   },
   zh: {
     editSite: '编辑与管理应用',
     hidePanel: '隐藏面板',
+    hiddenConfirmation: '编辑按钮已隐藏，直至下次重新打开应用',
+    dismissNotification: '关闭提示',
   },
   ja: {
     editSite: 'アプリを編集・管理',
     hidePanel: '次回のアクセスまで非表示',
+    hiddenConfirmation:
+      '編集ボタンを非表示にしました。アプリを再度開くと表示されます',
+    dismissNotification: '通知を閉じる',
   },
 }
 
@@ -45,14 +71,59 @@ const FLOATING_BUTTON_I18N: Record<UiLanguage, FloatingButtonI18n> = {
 export function FloatingButton() {
   const [projectMeta, setProjectMeta] = useState<ProjectMeta | null>(null)
   const [isHidden, setIsHidden] = useState(false)
+  const [showHiddenConfirmation, setShowHiddenConfirmation] = useState(false)
   const [activeTooltip, setActiveTooltip] = useState<'edit' | 'hide' | null>(
     null,
   )
+  const [tooltipPosition, setTooltipPosition] =
+    useState<TooltipPosition | null>(null)
+  const editButtonRef = useRef<HTMLButtonElement>(null)
+  const hideButtonRef = useRef<HTMLButtonElement>(null)
+  const tooltipRef = useRef<HTMLDivElement>(null)
   // Preview 不展示返回编辑态入口；按钮显隐不替代宿主点击时的鉴权。
   const shouldShowEditButton =
     projectMeta?.allowEdit === true && getDatabaseContext().env === 'prod'
   const i18n = FLOATING_BUTTON_I18N[useUiLanguage()]
 
+  useLayoutEffect(() => {
+    if (!activeTooltip) return
+
+    const updateTooltipPosition = () => {
+      const trigger =
+        activeTooltip === 'edit' ? editButtonRef.current : hideButtonRef.current
+      const tooltip = tooltipRef.current
+      if (!trigger || !tooltip) return
+
+      const triggerRect = trigger.getBoundingClientRect()
+      const tooltipWidth = tooltip.offsetWidth
+      const left = Math.max(
+        TOOLTIP_VIEWPORT_GAP,
+        Math.min(
+          triggerRect.left + triggerRect.width / 2 - tooltipWidth / 2,
+          window.innerWidth - tooltipWidth - TOOLTIP_VIEWPORT_GAP,
+        ),
+      )
+      setTooltipPosition({
+        left,
+        top: triggerRect.top - tooltip.offsetHeight - 14,
+        arrowLeft: triggerRect.left + triggerRect.width / 2 - left,
+      })
+    }
+
+    updateTooltipPosition()
+    window.addEventListener('resize', updateTooltipPosition)
+    return () => window.removeEventListener('resize', updateTooltipPosition)
+  }, [activeTooltip, i18n])
+
+  useEffect(() => {
+    if (!showHiddenConfirmation) return
+    const timeout = window.setTimeout(
+      () => setShowHiddenConfirmation(false),
+      HIDDEN_CONFIRMATION_MS,
+    )
+    return () => window.clearTimeout(timeout)
+  }, [showHiddenConfirmation])
+
   useEffect(() => {
     let isCurrentRequest = true
 
@@ -87,10 +158,37 @@ export function FloatingButton() {
     })
   }, [])
 
-  if (!shouldShowEditButton || isHidden) {
+  if (!shouldShowEditButton) {
     return null
   }
 
+  if (isHidden) {
+    return showHiddenConfirmation ? (
+      <div
+        role="status"
+        className="fixed top-8 left-1/2 z-50 flex min-h-[54px] w-[352px] max-w-[calc(100vw-32px)] -translate-x-1/2 items-center gap-2 rounded-md bg-[#f0f4ff] px-5 py-4 text-sm leading-[22px] font-medium text-[#1f2329]"
+        style={{
+          // Figma 的内描边与三层阴影需合并，避免 ring 被行内 box-shadow 覆盖。
+          boxShadow:
+            'inset 0 0 0 1px #1456f0, 0 8px 24px 8px rgb(31 35 41 / 4%), 0 6px 12px rgb(31 35 41 / 4%), 0 4px 8px -8px rgb(31 35 41 / 6%)',
+        }}
+      >
+        <img src={toastInfoIcon} alt="" className="size-4 shrink-0" />
+        <span className="min-w-0 flex-1 pl-1 pr-2">
+          {i18n.hiddenConfirmation}
+        </span>
+        <button
+          type="button"
+          aria-label={i18n.dismissNotification}
+          className="flex size-4 shrink-0 cursor-pointer items-center justify-center"
+          onClick={() => setShowHiddenConfirmation(false)}
+        >
+          <img src={toastCloseIcon} alt="" className="size-4" />
+        </button>
+      </div>
+    ) : null
+  }
+
   return (
     <div
       className="group fixed bottom-10 z-40 flex items-center"
@@ -98,11 +196,24 @@ export function FloatingButton() {
     >
       {activeTooltip ? (
         <div
+          ref={tooltipRef}
           role="tooltip"
-          className="pointer-events-none absolute right-0 bottom-[calc(100%+14px)] z-10 whitespace-nowrap rounded-lg bg-[#1f2329] px-3 py-2 text-sm text-white shadow-lg"
+          className="pointer-events-none fixed z-50 w-max max-w-[calc(100vw-16px)] rounded-lg bg-[#1f2329] px-3 py-2 text-xs leading-5 whitespace-normal text-white"
+          style={{
+            boxShadow:
+              '0 8px 24px 8px rgb(31 35 41 / 4%), 0 6px 12px rgb(31 35 41 / 4%), 0 4px 8px -8px rgb(31 35 41 / 6%)',
+            ...(tooltipPosition
+              ? { left: tooltipPosition.left, top: tooltipPosition.top }
+              : { visibility: 'hidden' as const }),
+          }}
         >
           {activeTooltip === 'edit' ? i18n.editSite : i18n.hidePanel}
-          <span className="absolute -bottom-1 right-[22px] size-2 rotate-45 bg-[#1f2329]" />
+          <img
+            src={tooltipCaretIcon}
+            alt=""
+            className="pointer-events-none absolute top-full h-1.5 w-6 -translate-x-1/2"
+            style={{ left: tooltipPosition?.arrowLeft }}
+          />
         </div>
       ) : null}
       <div
@@ -110,6 +221,7 @@ export function FloatingButton() {
         data-floating-controls="true"
       >
         <button
+          ref={editButtonRef}
           type="button"
           aria-label={i18n.editSite}
           className="group/edit flex size-12 cursor-pointer items-center justify-center rounded-full bg-transparent outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -131,6 +243,7 @@ export function FloatingButton() {
           />
         </button>
         <button
+          ref={hideButtonRef}
           type="button"
           aria-label={i18n.hidePanel}
           className="absolute -top-1 -right-1 flex size-4 items-center justify-center rounded-full bg-[#c8c9cc] text-[#646a73] opacity-0 transition-opacity group-hover:opacity-100 hover:bg-[#b7b9bd] focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-[#1456f0]"
@@ -138,7 +251,11 @@ export function FloatingButton() {
           onMouseLeave={() => setActiveTooltip(null)}
           onFocus={() => setActiveTooltip('hide')}
           onBlur={() => setActiveTooltip(null)}
-          onClick={() => setIsHidden(true)}
+          onClick={() => {
+            setIsHidden(true)
+            setActiveTooltip(null)
+            setShowHiddenConfirmation(true)
+          }}
         >
           <span aria-hidden="true" className="text-[14px] leading-none">
             ×

package/skills/lark-base-database/references/design/components/actions-fields.md

@@ -1,16 +0,0 @@
-# 按钮与字段
-
-适用于主/次/文字/危险/图标按钮、单行输入、搜索、标签、错误、帮助与多行输入。基础几何从[配方](../control-recipes.md)取得，颜色从[主题](../theme.md)取得；[组件代码](code/controls.tsx)和[共享样式](code/controls.css)展示可适配实现。
-
-| 区域 | A / B / C 共用要求 |
-| --- | --- |
-| 普通按钮 | 文字行高 20px、图标视觉 16px；高度、水平内边距、圆角和间隙用配方值。主动作实底，次动作轻填充，低优先级动作透明；不叠灰底、灰边和阴影 |
-| 图标按钮 | 宽度可等于当前按钮高度；必须有可访问名称，图标垂直与水平居中。触控场景另扩展命中区 |
-| 单行输入与搜索 | 同配方高度和字形；值字号可读，placeholder 仅提供例子，不替代 label。A 用单层轻边界，B/C 用轻填充并保留透明 1px 边界占位 |
-| 输入焦点 | 原边界位置变为一层 1px 主题焦点色，不叠 outline/ring/内外阴影；正常输入和错误同时存在时只画一个边界层 |
-| 禁用/加载 | 禁用不可操作，loading 仅用于真实异步状态；大小不跳动，必要时阻止重复提交 |
-| 帮助与错误 | 只在必要时显示。错误靠近字段并通过 `aria-describedby` 关联；校验恢复后移除错误及关联，不补“已填写”或空白帮助行 |
-
-Textarea 从约三行起步，`resize: none` 去掉右下角拖拽斜线；随输入、初值、预填、粘贴和容器尺寸增高。达到任务合适上限时在字段内部滚动，预览中的 220px 是可改参考值，不是业务限制。不能把输入截断或固定矮框。参考实现的 `ResizeObserver` 只处理控件自身尺寸，不要求普通搭建启动浏览器巡检。
-
-按钮文案说明实际操作；保存成功只能来自真实业务返回或用户明确的模拟流程。页面头与按钮已经表达的功能不再写副标题。选择主按钮不自动在其外层生成背景卡片。

package/skills/lark-base-database/references/design/components/code/controls.css

@@ -1,122 +0,0 @@
-.ds-theme, .ds-theme * { box-sizing: border-box; }
-.ds-control { font: inherit; font-size: var(--ds-font); line-height: 20px; color: var(--ds-text); }
-.ds-button, .ds-field, .ds-trigger, .ds-segment button, .ds-option, .ds-page-button { font: inherit; font-size: var(--ds-font); }
-.ds-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-gap); min-height: var(--ds-height); padding: 0 var(--ds-pad); border: 1px solid transparent; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); font-weight: 500; line-height: 20px; box-shadow: none; cursor: pointer; white-space: nowrap; }
-.ds-button[data-variant="primary"] { background: var(--ds-action); color: var(--ds-on-action); }
-.ds-button[data-variant="primary"]:hover:not(:disabled) { background: var(--ds-action-hover); }
-.ds-button[data-variant="secondary"] { background: var(--ds-action-soft); color: var(--ds-action); }
-.ds-button[data-variant="secondary"]:hover:not(:disabled) { background: var(--ds-action-soft-hover); }
-.ds-button[data-variant="quiet"]:hover:not(:disabled) { background: var(--ds-hover); }
-.ds-button[data-variant="danger"] { color: var(--ds-danger); }
-.ds-button[data-variant="danger"]:hover:not(:disabled) { background: var(--ds-error-soft); }
-.ds-button[data-icon-only="true"] { width: var(--ds-height); padding: 0; flex: none; }
-.ds-button:disabled { opacity: .48; cursor: not-allowed; }
-.ds-button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
-.ds-spinner { width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ds-spin .8s linear infinite; }
-@keyframes ds-spin { to { transform: rotate(360deg); } }
-.ds-field-wrap { display: grid; gap: 7px; min-width: 0; }
-.ds-label { font-size: var(--ds-font); font-weight: 500; line-height: 20px; }
-.ds-help, .ds-error { font-size: 12px; line-height: 18px; margin: 0; }
-.ds-help { color: var(--ds-muted); }
-.ds-error { color: var(--ds-danger); }
-.ds-field, .ds-trigger, .ds-number, .ds-affix { width: 100%; min-width: 0; min-height: var(--ds-height); padding: 0 var(--ds-pad); border: 1px solid var(--ds-field-border); border-radius: var(--ds-radius); background: var(--ds-field-fill); color: var(--ds-text); box-shadow: none; outline: 0; font-weight: 400; line-height: 20px; }
-.ds-field::placeholder { color: var(--ds-placeholder); opacity: 1; }
-.ds-field:hover:not(:disabled):not(:focus), .ds-trigger:hover:not(:disabled), .ds-number:hover, .ds-affix:hover { background: var(--ds-field-hover); }
-.ds-field:focus, .ds-trigger:focus-visible, .ds-number:focus-within, .ds-affix:focus-within { border-color: var(--ds-focus); outline: 0; box-shadow: none; }
-.ds-field[aria-invalid="true"], .ds-trigger[aria-invalid="true"], .ds-number[data-invalid="true"], .ds-affix[data-invalid="true"] { border-color: var(--ds-danger); background: var(--ds-error-soft); }
-.ds-field:disabled, .ds-trigger:disabled { opacity: .5; cursor: not-allowed; }
-.ds-textarea { padding: 10px var(--ds-pad); min-height: 92px; max-height: var(--ds-textarea-max, 220px); resize: none; line-height: 1.55; overflow-y: auto; }
-.ds-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
-.ds-trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.ds-trigger-caret { flex: none; color: var(--ds-muted); }
-.ds-trigger[aria-expanded="true"]:not(:focus-visible) { background: var(--ds-action-soft); }
-.ds-popover { position: fixed; z-index: 60; overflow: auto; padding: 6px; border: 0; border-radius: calc(var(--ds-radius) + 2px); background: var(--ds-popover); color: var(--ds-text); box-shadow: 0 6px 28px var(--ds-shadow); font-size: var(--ds-font); }
-.ds-option-list { max-height: 236px; overflow-y: auto; }
-.ds-option { width: 100%; min-height: var(--ds-height); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); text-align: left; line-height: 20px; cursor: pointer; }
-.ds-option:hover, .ds-option:focus-visible { background: var(--ds-hover); outline: 0; }
-.ds-option:focus-visible { box-shadow: inset 2px 0 var(--ds-focus); }
-.ds-option[aria-selected="true"], .ds-option[aria-checked="true"] { background: var(--ds-action-soft); color: var(--ds-action); font-weight: 500; }
-.ds-option[data-danger="true"] { color: var(--ds-danger); }
-.ds-option[data-danger="true"]:hover { background: var(--ds-error-soft); }
-.ds-popup-search { display: flex; align-items: center; gap: 8px; position: relative; padding: 4px 8px 8px; color: var(--ds-muted); }
-.ds-popup-search input { min-width: 0; width: 100%; padding: 7px 4px; border: 0; border-radius: 0; background: transparent; color: var(--ds-text); font: inherit; outline: 0; box-shadow: none; caret-color: var(--ds-text); }
-.ds-popup-search input:focus, .ds-popup-search input:focus-visible { border: 0; outline: 0; background: transparent; box-shadow: none; }
-.ds-popup-search[data-keyboard-focus="true"]:focus-within::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 14px; border-radius: 1px; background: var(--ds-focus); transform: translateY(-50%); }
-.ds-popup-empty { padding: 18px 8px; color: var(--ds-muted); text-align: center; font-size: 13px; }
-.ds-popup-footer { display: flex; justify-content: space-between; gap: 8px; padding: 6px 2px 0; border-top: 1px solid var(--ds-border); }
-.ds-calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-weight: 600; }
-.ds-calendar-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
-.ds-calendar-weekdays { color: var(--ds-muted); font-size: 11px; line-height: 28px; }
-.ds-calendar-day { width: 100%; height: 34px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-text); font: inherit; font-size: 13px; cursor: pointer; }
-.ds-calendar-day:hover, .ds-calendar-day:focus-visible { background: var(--ds-hover); outline: 0; }
-.ds-calendar-day:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: -2px; }
-.ds-calendar-day[data-outside="true"] { color: var(--ds-muted); }
-.ds-calendar-day[data-today="true"]:not([aria-selected="true"]) { color: var(--ds-action); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
-.ds-calendar-day[aria-selected="true"] { background: var(--ds-action); color: var(--ds-on-action); }
-.ds-calendar-day[aria-selected="true"]:focus-visible { outline-color: var(--ds-on-action); outline-offset: -4px; }
-.ds-calendar-day:disabled { opacity: .35; cursor: not-allowed; }
-.ds-check, .ds-radio, .ds-switch { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; font-size: var(--ds-font); cursor: pointer; }
-.ds-check input, .ds-radio input { appearance: none; display: grid; place-content: center; width: 16px; height: 16px; margin: 0; border: 1px solid var(--ds-border); background: var(--ds-field); }
-.ds-check input { border-radius: 3px; }
-.ds-check input:checked { background: var(--ds-action); border-color: var(--ds-action); }
-.ds-check input:checked::after { content: ""; width: 7px; height: 4px; border: solid var(--ds-on-action); border-width: 0 0 1.7px 1.7px; transform: translateY(-1px) rotate(-45deg); }
-.ds-radio input { border-radius: 50%; }
-.ds-radio input:checked { border-color: var(--ds-action); }
-.ds-radio input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-action); }
-.ds-switch input { position: absolute; opacity: 0; width: 30px; height: 18px; margin: 0; }
-.ds-switch-track { width: 30px; height: 18px; position: relative; border-radius: 20px; background: var(--ds-border); }
-.ds-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--ds-surface); transition: transform .15s; }
-.ds-switch input:checked + .ds-switch-track { background: var(--ds-action); }
-.ds-switch input:checked + .ds-switch-track::after { background: var(--ds-on-action); }
-.ds-switch input:checked + .ds-switch-track::after { transform: translateX(12px); }
-.ds-switch input:focus-visible + .ds-switch-track, .ds-check input:focus-visible, .ds-radio input:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 2px; }
-.ds-segment, .ds-tabs { display: inline-flex; align-items: center; gap: 3px; }
-.ds-segment { padding: 3px; border-radius: calc(var(--ds-radius) + 2px); background: var(--ds-hover); }
-.ds-segment button, .ds-tabs button { padding: 4px 12px; border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-muted); line-height: 20px; cursor: pointer; }
-.ds-segment button[aria-pressed="true"] { background: var(--ds-surface); color: var(--ds-action); }
-.ds-tabs button { border-radius: 0; border-bottom: 2px solid transparent; }
-.ds-tabs button[aria-selected="true"] { border-bottom-color: var(--ds-action); color: var(--ds-action); }
-.ds-segment button:focus-visible, .ds-tabs button:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 1px; }
-.ds-number, .ds-affix { display: flex; align-items: center; gap: 4px; padding: 0 var(--ds-pad); }
-.ds-number { padding: 0; }
-.ds-number input, .ds-affix input { flex: 1; min-width: 0; height: calc(var(--ds-height) - 2px); padding: 0 6px; border: 0; background: transparent; color: var(--ds-text); font: inherit; font-size: var(--ds-font); outline: 0; }
-.ds-number input { text-align: center; font-variant-numeric: tabular-nums; }
-.ds-number button { width: calc(var(--ds-height) - 2px); height: calc(var(--ds-height) - 2px); border: 0; border-radius: var(--ds-radius); background: transparent; color: var(--ds-muted); cursor: pointer; }
-.ds-number button:hover, .ds-number button:focus-visible { background: var(--ds-action-soft); color: var(--ds-action); outline: 0; }
-.ds-affix > span { white-space: nowrap; color: var(--ds-muted); font-size: 12px; }
-.ds-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 20px; color: var(--ds-muted); }
-.ds-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
-.ds-status[data-tone="success"] { color: var(--ds-success); }
-.ds-status[data-tone="warning"] { color: var(--ds-warning); }
-.ds-status[data-tone="danger"] { color: var(--ds-danger); }
-.ds-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 9px; border-radius: var(--ds-radius); background: var(--ds-hover); font-size: 12px; }
-.ds-tag button { width: 22px; height: 22px; border: 0; border-radius: 3px; background: transparent; color: var(--ds-muted); cursor: pointer; }
-.ds-tag button:hover, .ds-tag button:focus-visible { background: var(--ds-action-soft); color: var(--ds-action); outline: 0; }
-.ds-slider { appearance: none; display: block; width: 100%; height: 20px; margin: 10px 0; background: transparent; cursor: pointer; }
-.ds-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--ds-action) 0 var(--ds-slider-progress), var(--ds-hover) var(--ds-slider-progress) 100%); }
-.ds-slider::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 3px solid var(--ds-action); border-radius: 50%; background: var(--ds-surface); }
-.ds-slider::-moz-range-track { height: 4px; border-radius: 4px; background: var(--ds-hover); }
-.ds-slider::-moz-range-progress { height: 4px; background: var(--ds-action); }
-.ds-slider::-moz-range-thumb { width: 10px; height: 10px; border: 3px solid var(--ds-action); border-radius: 50%; background: var(--ds-surface); }
-.ds-slider:focus-visible { outline: 2px solid var(--ds-focus); outline-offset: 3px; }
-.ds-progress { width: 100%; height: 4px; appearance: none; border: 0; border-radius: 4px; overflow: hidden; background: var(--ds-hover); }
-.ds-progress::-webkit-progress-bar { background: var(--ds-hover); }
-.ds-progress::-webkit-progress-value { background: var(--ds-action); }
-.ds-progress::-moz-progress-bar { background: var(--ds-action); }
-.ds-pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
-.ds-page-button[aria-current="page"] { background: var(--ds-action-soft); color: var(--ds-action); }
-.ds-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 28px; border: 0; border-radius: calc(var(--ds-radius) + 4px); background: var(--ds-popover); color: var(--ds-text); box-shadow: 0 20px 80px var(--ds-shadow); overflow: auto; }
-.ds-dialog::backdrop { background: var(--ds-scrim); }
-.ds-dialog[data-drawer="true"] { width: min(440px, calc(100vw - 20px)); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; border-radius: 0; }
-.ds-dialog-head, .ds-dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
-.ds-dialog-head { margin-bottom: 24px; }
-.ds-dialog-head h2 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 600; }
-.ds-dialog-actions { justify-content: flex-end; margin-top: 24px; }
-.ds-toast { position: fixed; z-index: 90; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--ds-radius); background: var(--ds-text); color: var(--ds-surface); box-shadow: 0 6px 24px var(--ds-shadow); font-size: 13px; }
-.ds-flat-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
-.ds-flat-toolbar .ds-field-wrap { flex: 0 1 180px; }
-.ds-flat-toolbar .ds-field-wrap:first-of-type { flex-basis: 240px; }
-.ds-flat-form { display: grid; gap: 22px 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; }
-.ds-flat-form [data-full="true"] { grid-column: 1 / -1; }
-@media (max-width: 640px) { .ds-flat-form { grid-template-columns: 1fr; } .ds-flat-form [data-full="true"] { grid-column: auto; } .ds-dialog { padding: 22px; } }
-@media (prefers-reduced-motion: reduce) { .ds-spinner { animation: none; } .ds-switch-track::after { transition: none; } }

package/skills/lark-base-database/references/design/components/code/controls.tsx

@@ -1,73 +0,0 @@
-import { forwardRef, useEffect, useId, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type ReactNode, type TextareaHTMLAttributes } from 'react';
-
-export type ControlVariant = 'primary' | 'secondary' | 'quiet' | 'danger';
-export type NamedOption<T extends string = string> = { value: T; label: string; disabled?: boolean };
-
-export const Button = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement> & { variant?: ControlVariant; loading?: boolean; iconOnly?: boolean }>(function Button({ variant = 'quiet', loading = false, iconOnly = false, children, disabled, ...props }, ref) {
-  return <button {...props} ref={ref} type={props.type ?? 'button'} className={`ds-button ${props.className ?? ''}`} data-variant={variant} data-icon-only={iconOnly} disabled={disabled || loading} aria-busy={loading || undefined}>
-    {loading && <span className="ds-spinner" aria-hidden="true" />}{children}
-  </button>;
-});
-
-export function Field({ label, help, error, id, children }: { label: string; help?: string; error?: string; id: string; children: ReactNode }) {
-  return <div className="ds-field-wrap"><label className="ds-label" htmlFor={id}>{label}</label>{children}
-    {error ? <p className="ds-error" id={`${id}-message`}>{error}</p> : help ? <p className="ds-help" id={`${id}-help`}>{help}</p> : null}
-  </div>;
-}
-
-export const TextField = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement> & { error?: string; help?: string; label: string }>(function TextField({ id, label, error, help, className = '', ...props }, ref) {
-  const generated = useId(); const fieldId = id ?? generated;
-  return <Field id={fieldId} label={label} help={help} error={error}><input {...props} id={fieldId} ref={ref} className={`ds-field ${className}`} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${fieldId}-message` : help ? `${fieldId}-help` : undefined} /></Field>;
-});
-
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement> & { error?: string; help?: string; label: string }>(function Textarea({ id, label, error, help, className = '', onInput, value, defaultValue, ...props }, outerRef) {
-  const generated = useId(); const fieldId = id ?? generated; const localRef = useRef<HTMLTextAreaElement>(null);
-  const resize = () => { const el = localRef.current; if (!el) return; el.style.height = 'auto'; const cap = Number.parseFloat(getComputedStyle(el).maxHeight) || 220; el.style.height = `${Math.min(el.scrollHeight, cap)}px`; el.style.overflowY = el.scrollHeight > cap ? 'auto' : 'hidden'; };
-  useEffect(() => { resize(); const el = localRef.current; if (!el) return; const observer = new ResizeObserver(resize); observer.observe(el); return () => observer.disconnect(); }, [value, defaultValue]);
-  return <Field id={fieldId} label={label} help={help} error={error}><textarea {...props} id={fieldId} value={value} defaultValue={defaultValue} rows={props.rows ?? 3} className={`ds-field ds-textarea ${className}`} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${fieldId}-message` : help ? `${fieldId}-help` : undefined} ref={node => { localRef.current = node; if (typeof outerRef === 'function') outerRef(node); else if (outerRef) outerRef.current = node; }} onInput={event => { resize(); onInput?.(event); }} /></Field>;
-});
-
-export function Checkbox({ label, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string }) {
-  return <label className="ds-check"><input {...props} type="checkbox" />{label}</label>;
-}
-
-export function RadioGroup<T extends string>({ label, name, options, value, onChange }: { label: string; name: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void }) {
-  return <fieldset style={{ border: 0, padding: 0, margin: 0 }}><legend className="ds-label">{label}</legend><div style={{ display: 'flex', gap: 20, flexWrap: 'wrap' }}>{options.map(option => <label className="ds-radio" key={option.value}><input name={name} type="radio" checked={value === option.value} disabled={option.disabled} onChange={() => onChange(option.value)} />{option.label}</label>)}</div></fieldset>;
-}
-
-export function Switch({ label, checked, onChange, disabled = false }: { label: string; checked: boolean; onChange: (checked: boolean) => void; disabled?: boolean }) {
-  return <label className="ds-switch"><input type="checkbox" role="switch" checked={checked} onChange={event => onChange(event.target.checked)} disabled={disabled} /><span className="ds-switch-track" aria-hidden="true" />{label}</label>;
-}
-
-export function Segmented<T extends string>({ label, options, value, onChange }: { label: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void }) {
-  return <div className="ds-segment" role="group" aria-label={label}>{options.map(option => <button key={option.value} type="button" aria-pressed={value === option.value} disabled={option.disabled} onClick={() => onChange(option.value)}>{option.label}</button>)}</div>;
-}
-
-export function Tabs<T extends string>({ label, options, value, onChange, children }: { label: string; options: NamedOption<T>[]; value: T; onChange: (value: T) => void; children: ReactNode }) {
-  const id = useId(); const enabled = options.filter(option => !option.disabled);
-  return <><div className="ds-tabs" role="tablist" aria-label={label}>{options.map(option => <button key={option.value} id={`${id}-${option.value}`} type="button" role="tab" aria-controls={`${id}-panel`} aria-selected={value === option.value} tabIndex={value === option.value ? 0 : -1} disabled={option.disabled} onClick={() => onChange(option.value)} onKeyDown={event => { if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return; event.preventDefault(); const index = enabled.findIndex(item => item.value === option.value); const next = event.key === 'Home' ? 0 : event.key === 'End' ? enabled.length - 1 : (index + (event.key === 'ArrowRight' ? 1 : -1) + enabled.length) % enabled.length; onChange(enabled[next].value); requestAnimationFrame(() => document.getElementById(`${id}-${enabled[next].value}`)?.focus()); }}>{option.label}</button>)}</div><div role="tabpanel" id={`${id}-panel`} aria-labelledby={`${id}-${value}`}>{children}</div></>;
-}
-
-export function NumberStepper({ label, value, onChange, min, max, step = 1, error }: { label: string; value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number; error?: string }) {
-  const id = useId(), [draft, setDraft] = useState(String(value));
-  useEffect(() => setDraft(String(value)), [value]);
-  const clamp = (n: number) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, n));
-  const adjust = (direction: number) => { const places = Math.max((String(step).split('.')[1] ?? '').length, (String(value).split('.')[1] ?? '').length); onChange(clamp(Number((value + direction * step).toFixed(places)))); };
-  const commit = () => { const n = Number(draft); const next = draft.trim() && Number.isFinite(n) ? clamp(n) : value; onChange(next); setDraft(String(next)); };
-  return <Field id={id} label={label} error={error}><div className="ds-number" data-invalid={!!error}><button type="button" aria-label={`减少${label}`} disabled={min !== undefined && value <= min} onClick={() => adjust(-1)}>−</button><input id={id} type="text" inputMode="decimal" role="spinbutton" value={draft} aria-label={label} aria-valuenow={value} aria-valuemin={min} aria-valuemax={max} aria-invalid={!!error || undefined} aria-describedby={error ? `${id}-message` : undefined} onChange={event => { const text = event.target.value; setDraft(text); if (text.trim() && Number.isFinite(Number(text))) onChange(Number(text)); }} onBlur={commit} onKeyDown={event => { if (event.key === 'ArrowUp' || event.key === 'ArrowDown') { event.preventDefault(); adjust(event.key === 'ArrowUp' ? 1 : -1); } }} /><button type="button" aria-label={`增加${label}`} disabled={max !== undefined && value >= max} onClick={() => adjust(1)}>+</button></div></Field>;
-}
-
-export function AffixInput({ label, prefix, suffix, error, ...props }: InputHTMLAttributes<HTMLInputElement> & { label: string; prefix?: string; suffix?: string; error?: string }) {
-  const id = useId(); return <Field id={id} label={label} error={error}><div className="ds-affix" data-invalid={!!error}>{prefix && <span aria-hidden="true">{prefix}</span>}<input {...props} id={id} aria-label={label} aria-invalid={!!error || undefined} aria-describedby={error ? `${id}-message` : undefined} />{suffix && <span aria-hidden="true">{suffix}</span>}</div></Field>;
-}
-
-export function Status({ children, tone = 'neutral' }: { children: ReactNode; tone?: 'neutral' | 'success' | 'warning' | 'danger' }) { return <span className="ds-status" data-tone={tone}>{children}</span>; }
-export function Tag({ children, onRemove, removeLabel }: { children: ReactNode; onRemove?: () => void; removeLabel?: string }) { return <span className="ds-tag">{children}{onRemove && <button type="button" aria-label={removeLabel ?? '移除标签'} onClick={onRemove}>×</button>}</span>; }
-export function Slider({ label, value, onChange, min = 0, max = 100, step = 1 }: { label: string; value: number; onChange: (value: number) => void; min?: number; max?: number; step?: number }) {
-  const id = useId(); const pct = max > min ? Math.max(0, Math.min(100, (value - min) / (max - min) * 100)) : 0; return <div className="ds-field-wrap"><div style={{ display: 'flex', justifyContent: 'space-between' }}><label htmlFor={id}>{label}</label><output htmlFor={id}>{value}</output></div><input className="ds-slider" id={id} type="range" value={value} min={min} max={max} step={step} style={{ '--ds-slider-progress': `${pct}%` } as CSSProperties} onChange={event => onChange(Number(event.target.value))} /></div>;
-}
-export function Progress({ label, value, max = 100 }: { label: string; value?: number; max?: number }) { return <progress className="ds-progress" aria-label={label} value={value} max={max} />; }
-export function Pagination({ page, pageCount, onPageChange, label = '分页' }: { page: number; pageCount: number; onPageChange: (page: number) => void; label?: string }) {
-  const pages = Array.from({ length: Math.min(pageCount, 5) }, (_, i) => Math.min(Math.max(1, page - 2), Math.max(1, pageCount - 4)) + i);
-  return <nav className="ds-pagination" aria-label={label}><Button iconOnly aria-label="上一页" disabled={page <= 1} onClick={() => onPageChange(page - 1)}>‹</Button>{pages.map(n => <Button key={n} className="ds-page-button" aria-current={n === page ? 'page' : undefined} onClick={() => onPageChange(n)}>{n}</Button>)}<Button iconOnly aria-label="下一页" disabled={page >= pageCount} onClick={() => onPageChange(page + 1)}>›</Button></nav>;
-}

package/skills/lark-base-database/references/design/components/code/date-picker.tsx

@@ -1,42 +0,0 @@
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
-import { Button, Field } from './controls';
-import { Floating } from './floating';
-
-const iso = (date: Date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-const parse = (value: string) => { const [y, m, d] = value.split('-').map(Number); return new Date(y, m - 1, d); };
-const shift = (value: string, days: number) => { const d = parse(value); d.setDate(d.getDate() + days); return iso(d); };
-const monthShift = (value: string, months: number) => { const d = parse(value), day = d.getDate(); const target = new Date(d.getFullYear(), d.getMonth() + months, 1); target.setDate(Math.min(day, new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate())); return iso(target); };
-
-export function DatePicker({ label, value, onChange, min, max, disabledDate, error, help, disabled = false }: { label: string; value: string | null; onChange: (value: string | null) => void; min?: string; max?: string; disabledDate?: (date: string) => boolean; error?: string; help?: string; disabled?: boolean }) {
-  const id = useId(), ref = useRef<HTMLButtonElement>(null), [open, setOpen] = useState(false);
-  const [month, setMonth] = useState(() => value ? parse(value) : new Date());
-  const [active, setActive] = useState(() => value ?? iso(new Date()));
-  const today = iso(new Date());
-  const start = new Date(month.getFullYear(), month.getMonth(), 1);
-  start.setDate(1 - (start.getDay() + 6) % 7);
-  const days = Array.from({ length: 42 }, (_, i) => { const d = new Date(start); d.setDate(start.getDate() + i); return iso(d); });
-  const allowed = (date: string) => (!min || date >= min) && (!max || date <= max) && !disabledDate?.(date);
-  const close = () => setOpen(false);
-  const focusDay = (next: string) => { const direction = next >= active ? 1 : -1; let target = next; for (let i = 0; i < 42 && !allowed(target); i++) target = shift(target, direction); if (!allowed(target)) return; setActive(target); setMonth(parse(target)); requestAnimationFrame(() => document.getElementById(`${id}-${target}`)?.focus()); };
-  useEffect(() => { if (open) requestAnimationFrame(() => document.getElementById(`${id}-${active}`)?.focus()); }, [open]);
-  const onCalendarKey = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (!(event.target instanceof HTMLButtonElement) || !event.target.dataset.date) return;
-    const current = event.target.dataset.date;
-    const offsets: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
-    let next = event.key in offsets ? shift(current, offsets[event.key]) : null;
-    if (event.key === 'Home') next = shift(current, -((parse(current).getDay() + 6) % 7));
-    if (event.key === 'End') next = shift(current, 6 - ((parse(current).getDay() + 6) % 7));
-    if (event.key === 'PageUp' || event.key === 'PageDown') next = monthShift(current, (event.key === 'PageUp' ? -1 : 1) * (event.shiftKey ? 12 : 1));
-    if (next) { event.preventDefault(); focusDay(next); }
-  };
-  return <Field id={id} label={label} error={error} help={help}>
-    <button id={id} ref={ref} type="button" className="ds-trigger" aria-label={`${label}：${value ?? '选择日期'}`} aria-haspopup="dialog" aria-expanded={open} aria-invalid={!!error || undefined} aria-describedby={error ? `${id}-message` : help ? `${id}-help` : undefined} disabled={disabled} onClick={() => { if (!open) { setMonth(value ? parse(value) : new Date()); setActive(value ?? today); } setOpen(!open); }}><span className="ds-trigger-value">{value ? value.replaceAll('-', ' / ') : '选择日期'}</span><span className="ds-trigger-caret" aria-hidden="true">▦</span></button>
-    <Floating triggerRef={ref} open={open} onClose={close} ariaLabel={`${label}选择器`} width={304}>
-      <div onKeyDown={onCalendarKey}><div className="ds-calendar-head"><Button iconOnly aria-label="上个月" onClick={() => focusDay(iso(new Date(month.getFullYear(), month.getMonth() - 1, 1)))}>‹</Button><span aria-live="polite">{month.getFullYear()} 年 {month.getMonth() + 1} 月</span><Button iconOnly aria-label="下个月" onClick={() => focusDay(iso(new Date(month.getFullYear(), month.getMonth() + 1, 1)))}>›</Button></div>
-        <div role="grid" aria-label={`${month.getFullYear()}年${month.getMonth() + 1}月`}><div role="row" className="ds-calendar-week ds-calendar-weekdays">{['一','二','三','四','五','六','日'].map(name => <span role="columnheader" key={name}>{name}</span>)}</div>
-          {Array.from({ length: 6 }, (_, row) => <div role="row" className="ds-calendar-week" key={row}>{days.slice(row * 7, row * 7 + 7).map(date => <div role="gridcell" aria-selected={date === value} key={date}><button id={`${id}-${date}`} className="ds-calendar-day" type="button" data-date={date} data-outside={parse(date).getMonth() !== month.getMonth()} data-today={date === today} aria-current={date === today ? 'date' : undefined} aria-selected={date === value} aria-label={`${parse(date).getFullYear()}年${parse(date).getMonth() + 1}月${parse(date).getDate()}日`} tabIndex={date === active ? 0 : -1} disabled={!allowed(date)} onClick={() => { onChange(date); close(); ref.current?.focus(); }}>{parse(date).getDate()}</button></div>)}</div>)}</div>
-        <div className="ds-popup-footer"><Button onClick={() => { onChange(null); close(); ref.current?.focus(); }}>清空</Button><Button variant="secondary" disabled={!allowed(today)} onClick={() => { onChange(today); close(); ref.current?.focus(); }}>今天</Button></div>
-      </div>
-    </Floating>
-  </Field>;
-}

package/skills/lark-base-database/references/design/components/code/floating.tsx

@@ -1,41 +0,0 @@
-import { createPortal } from 'react-dom';
-import { useCallback, useLayoutEffect, useRef, type CSSProperties, type ReactNode, type RefObject } from 'react';
-
-const roles = ['page','surface','popover','text','muted','placeholder','action','on-action','focus','border','field','danger','warning','success','shadow','scrim'];
-export function portalTheme(trigger: HTMLElement | null): { recipe: string; vars: CSSProperties } {
-  const root = trigger?.closest<HTMLElement>('.ds-theme');
-  const css = root ? getComputedStyle(root) : null;
-  const vars: Record<string, string> = {};
-  for (const role of roles) { const value = css?.getPropertyValue(`--ds-${role}`).trim(); if (value) vars[`--ds-${role}`] = value; }
-  return { recipe: root?.dataset.dsRecipe ?? 'a', vars: vars as CSSProperties };
-}
-
-export function Floating({ triggerRef, open, onClose, children, ariaLabel, role = 'dialog', width }: { triggerRef: RefObject<HTMLElement | null>; open: boolean; onClose: () => void; children: ReactNode; ariaLabel: string; role?: 'dialog' | 'menu'; width?: number }) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const position = useCallback(() => {
-    const trigger = triggerRef.current, panel = panelRef.current;
-    if (!trigger || !panel) return;
-    const rect = trigger.getBoundingClientRect(), margin = 12;
-    const targetWidth = Math.min(window.innerWidth - margin * 2, width ?? Math.max(rect.width, 240));
-    panel.style.width = `${targetWidth}px`;
-    panel.style.maxHeight = `${Math.max(0, window.innerHeight - margin * 2)}px`;
-    const height = panel.getBoundingClientRect().height;
-    const below = window.innerHeight - rect.bottom - margin, above = rect.top - margin;
-    const rawTop = below >= height || below >= above ? rect.bottom + 6 : rect.top - height - 6;
-    panel.style.top = `${Math.max(margin, Math.min(rawTop, window.innerHeight - height - margin))}px`;
-    panel.style.left = `${Math.max(margin, Math.min(rect.left, window.innerWidth - targetWidth - margin))}px`;
-  }, [triggerRef, width]);
-  useLayoutEffect(() => {
-    if (!open) return;
-    position();
-    const observer = new ResizeObserver(position); if (panelRef.current) observer.observe(panelRef.current);
-    const handlePointer = (event: PointerEvent) => { const node = event.target as Node; if (!panelRef.current?.contains(node) && !triggerRef.current?.contains(node)) onClose(); };
-    const handleKey = (event: KeyboardEvent) => { if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); onClose(); triggerRef.current?.focus(); } };
-    document.addEventListener('pointerdown', handlePointer); document.addEventListener('keydown', handleKey, true);
-    window.addEventListener('resize', position); window.addEventListener('scroll', position, true);
-    return () => { observer.disconnect(); document.removeEventListener('pointerdown', handlePointer); document.removeEventListener('keydown', handleKey, true); window.removeEventListener('resize', position); window.removeEventListener('scroll', position, true); };
-  }, [open, onClose, position, triggerRef]);
-  if (!open || typeof document === 'undefined') return null;
-  const theme = portalTheme(triggerRef.current);
-  return createPortal(<div ref={panelRef} className="ds-theme ds-popover" data-ds-recipe={theme.recipe} style={theme.vars} role={role} aria-label={ariaLabel}>{children}</div>, document.body);
-}

package/skills/lark-base-database/references/design/components/code/overlays.tsx

@@ -1,19 +0,0 @@
-import { useEffect, useRef, useState, type ReactNode } from 'react';
-import { Button } from './controls';
-import { Floating } from './floating';
-
-export function Menu({ label, items }: { label: string; items: { id: string; label: string; disabled?: boolean; danger?: boolean; onSelect: () => void }[] }) {
-  const ref = useRef<HTMLButtonElement>(null), [open, setOpen] = useState(false);
-  useEffect(() => { if (open) requestAnimationFrame(() => document.querySelector<HTMLButtonElement>('[data-ds-menu] [role="menuitem"]:not(:disabled)')?.focus()); }, [open]);
-  return <><Button ref={ref} aria-haspopup="menu" aria-expanded={open} onClick={() => setOpen(!open)} onKeyDown={event => { if (['ArrowDown', 'ArrowUp'].includes(event.key)) { event.preventDefault(); setOpen(true); } }}>{label} ⌄</Button>
-    <Floating triggerRef={ref} open={open} onClose={() => setOpen(false)} ariaLabel={label} role="menu"><div data-ds-menu onKeyDown={event => { const nodes = [...event.currentTarget.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)')]; const current = nodes.indexOf(document.activeElement as HTMLButtonElement); if (!['ArrowDown','ArrowUp','Home','End'].includes(event.key) || !nodes.length) return; event.preventDefault(); const next = event.key === 'Home' ? 0 : event.key === 'End' ? nodes.length - 1 : event.key === 'ArrowDown' ? (current + 1) % nodes.length : (current - 1 + nodes.length) % nodes.length; nodes[next].focus(); }}>{items.map(item => <button className="ds-option" type="button" role="menuitem" key={item.id} data-danger={item.danger} disabled={item.disabled} onClick={() => { item.onSelect(); setOpen(false); ref.current?.focus(); }}>{item.label}</button>)}</div></Floating>
-  </>;
-}
-
-export function Dialog({ title, open, onClose, children, actions, drawer = false }: { title: string; open: boolean; onClose: () => void; children: ReactNode; actions?: ReactNode; drawer?: boolean }) {
-  const ref = useRef<HTMLDialogElement>(null);
-  useEffect(() => { const el = ref.current; if (!el) return; if (open && !el.open) el.showModal(); else if (!open && el.open) el.close(); }, [open]);
-  return <dialog ref={ref} className="ds-dialog" data-drawer={drawer} aria-label={title} onClose={onClose}><div className="ds-dialog-head"><h2>{title}</h2><Button iconOnly aria-label="关闭" onClick={() => { ref.current?.close(); onClose(); }}>×</Button></div>{children}{actions && <div className="ds-dialog-actions">{actions}</div>}</dialog>;
-}
-export function Drawer(props: Omit<Parameters<typeof Dialog>[0], 'drawer'>) { return <Dialog {...props} drawer />; }
-export function Toast({ message }: { message: string | null }) { return message ? <div className="ds-toast" role="status">{message}</div> : null; }