@lapismd/design-core

用于LapisMD应用程序的Svelte 5设计系统包。它提供原生css 组件族，表单原语，搜索/过滤控件，AI聊天 表示、diff视图、shell布局和工作空间框架。

Design Core拥有可重用的表示和控制器行为。消费者的 路由、数据加载、持久化、域状态、传输和应用程序 政策。

当前包状态

• 公共包: @lapismd/[email protected].
• 运行时同行: svelte@^5.
• 源包：导出指向跟踪 .svelte， .ts, .css 源 文件为现代苗条/维特消费者。
• 规范存储库: lapismd/design-core.
• 目录: https://lapismd.github.io/design-core/.

安装

此版本需要用户授权的临时版本 [email protected] 规划补丁。 每个安装根必须显式地配置相同的补丁并冻结 lockfile;Design Core的依赖项元数据不会传播该设置。 遵循 打包的补丁合同 以及它的校验和清单 在确定运行时行为之前。补丁保留链接预览和滑块 在反复安装FocusScope期间拆卸安全性和键盘焦点。

pnpm add @lapismd/design-core svelte

在应用程序边界处导入一次共享样式表：

import "@lapismd/design-core/styles.css";

然后从它们的公共层导入组件族：

<script lang="ts">
  import { Button } from "@lapismd/design-core/shadcn/button";
  import { StructuredForm } from "@lapismd/design-core/forms";
  import * as AppShell from "@lapismd/design-core/shell";
</script>

公共层

聚焦的组件子路径也被导出以保持兼容性，特别是在 forms 和 workspace． 治疗 package.json 导出为支持的导入 边界。

组件覆盖

已实现的shadcn家族包括：

手风琴，警报，警报对话框，徽章，面包屑，按钮，按钮组，卡片， 复选框、代码、代码块、可折叠、列画布、命令、命令视图、 上下文菜单，对话框，抽屉，下拉菜单，空白，字段，悬停卡，输入， 输入组，标签，分页，弹出窗口，进度，可调整大小，滚动区域， 选择、分隔符、工作表、侧边栏、框架、滑块、旋转器、滑动项、 开关，表，选项卡，文本区，切换，切换组和工具提示。

更高层组成了这些原语：

• 表单提供结构化呈现、基于YAML/ json的编辑、列表编辑、 自动补全/芯片输入，日期/时间/参考选择器，代码/YAML编辑器，以及 修补检查表面。
• 过滤器提供了可重用的搜索chrome +解析器/语言助手 过滤查询语法。
• AI提供仅显示的聊天部分。它没有自己的模式呼叫，网络 传输、会话存储或主机操作。
• Diff提供文件/更改/合并UI。宿主自己的存储库状态和文件 内容。
• Shell提供应用程序chrome和响应侧边栏，而无需拥有 应用程序导航。
• 工作区为注册视图、布局提供了较重的应用框架 持久性、命令、面板和插件。

使用Shell应用程序chrome。当主机需要注册时使用Workspace 视图、选项卡/分割布局、插件、设置、命令调色板或完整的工作空间 持久性。

样式合同

Design Core使用本地CSS和公共自定义属性。消费者应该注意着装 通过令牌和类型化的道具，而不是修补内部选择器。

1. 进口 @lapismd/design-core/styles.css 一次。
2. 覆盖公共 --ui-* 变量在 :root 或者是共同的祖先。
3. 为变量、密度、布局和状态选择组件道具。
4. 避免重写私有DOM结构或内部类名。

发布的档案包含准备好的浏览器CSS和字体资产。消费者做 不需要Tailwind，它的Vite插件，或源扫描配置。顺风 编译停留在内部创作和转换；生成私有CSS 变量仍然是普通的浏览器CSS。现有的Mira依赖仍然可以 安装一个Tailwind peer，但是Design Core的准备样式不使用它。 使用 pnpm package:local 当验证 归档边界，而不是导入未准备好的创作样式表。

源和存档门拒绝实用程序选择器，包括复合和 嵌套的选择器。组件状态清理由 切片2记录． 主题/导入 重组和下游发布仍然是分开的可审查的片段。

令牌的家庭:

分量根戳稳定 data-ui-component 和 data-ui-part 属性 用于包拥有的样式。消费者可以使用侧通道属性 ，但不应覆盖设计核心标识属性 包装组件。

布局规范

源代码布局遵循公共目录层和包层：

src/
  styles.css, theme.css, storybook.css
  shared/
    shadcn/<family>/
    forms/<family>/
    filter/<family>/
    ai/<component>/
    ai/experimental/<component>/
    diff/<family>/
    shell/app-shell/
    workspace/<family>/

一个目录拥有一个独立的组件族或一个复合族。 多部分组件一起保存在所属的家族文件夹中。公共桶 生活在层根或家庭根。

用法示例

shadcn原始

<script lang="ts">
  import { Button } from "@lapismd/design-core/shadcn/button";
</script>

<Button variant="default" size="sm">Save</Button>

壳牌布局

<script lang="ts">
  import * as AppShell from "@lapismd/design-core/shell";

  const shell = AppShell.createAppShellController({
    layoutId: "app",
  });
</script>

<AppShell.Root controller={shell}>
  <AppShell.Sidebar side="left">
    <AppShell.Sidebar.Header>Navigation</AppShell.Sidebar.Header>
    <AppShell.Sidebar.Body>...</AppShell.Sidebar.Body>
  </AppShell.Sidebar>

  <AppShell.Main>
    <AppShell.Toolbar>Toolbar</AppShell.Toolbar>
    <AppShell.Body>
      <AppShell.Body.Content>Application content</AppShell.Body.Content>
    </AppShell.Body>
  </AppShell.Main>
</AppShell.Root>

形式

<script lang="ts">
  import { FormField } from "@lapismd/design-core/forms";
  import { Textarea } from "@lapismd/design-core/shadcn/textarea";
</script>

<FormField label="Summary" description="Short text shown in previews">
  <Textarea bind:value={summary} />
</FormField>

故事书和本地文档

运行本地目录：

pnpm storybook

构建静态目录：

pnpm build-storybook

线下打包指导：

pnpm ui guide
pnpm ui guide styling
pnpm ui components
pnpm ui components button

规范规范存在于 spec/src． 将它用于包的行为， 架构、样式规则和验证证据：

pnpm spec:search "tokens"
pnpm spec:check

CI和局部宇称

pnpm checks 运行非可视化管理，质量，单元，故事书，指针， 和AI浏览器通道通过Turbo。执行治理、质量和单元工作 同时使用一半可用处理器，上限为4个。曾推高 故事书和浏览器套件在本地一次运行一个，因此目录启动和 交互准备仍然是确定性的；集 TURBO_CONCURRENCY 到一个 正数或百分比，以覆盖一般任务范围。

本地任务输出缓存在 .turbo/． 相同的任务使用带符号的 组织缓存在CI中，并在正常执行时失败 不可用。要在本地使用远程缓存，请复制 .env.example 致被忽视的人 根 .env 并提供 TURBO_TOKEN 和 TURBO_REMOTE_CACHE_SIGNATURE_KEY． 永远不要提交这些凭证。

CI将9条非视觉通道并行展开，包括独立的工作区， Shell、Shadcn和AI浏览器运行程序。它完全依赖于生产环境运行 审核后，他们通过并报告一个稳定 Validate 结果。视觉 比较仍然是一个明确的、单独的命令。

发布和确认

常用验证命令：

pnpm spec:first
pnpm spec:check
pnpm check
pnpm test:unit
pnpm build-storybook
pnpm checks:release

发布计划和打包工件：

pnpm changeset
pnpm release:check
pnpm release:plan --registry https://registry.npmjs.org
pnpm packages:pack

@lapismd/[email protected] 已手动从已审阅的压缩文件中引导。 未来的版本使用变更集和存储库发布工作流。

进一步的阅读