@linloir/limr 0.1.0 → 1.0.0

package/README.en.md

@@ -0,0 +1,123 @@
+# LiMR
+
+[![npm version](https://img.shields.io/npm/v/@linloir/limr.svg)](https://www.npmjs.com/package/@linloir/limr)
+
+[简体中文](README.md) · **English**
+
+**Linloir’s limr Is a Markdown Renderer.** A React Markdown renderer for long documents and streaming output. Body text, navigation, reference cards, selections, and highlights share one document state, and can also be composed into your own interface.
+
+[Live Playground](https://linloir.github.io/LiMR/) · [English docs](docs/en/README.md) · [中文文档](docs/zh-CN/README.md) · [AI Skills](docs/en/ai-skills.md)
+
+## Install and use
+
+```sh
+npm install @linloir/limr
+# or pnpm add @linloir/limr
+```
+
+```tsx
+import { Reader } from '@linloir/limr';
+import '@linloir/limr/styles.css';
+import '@linloir/limr/math.css';
+
+const source = '# Start reading\n\nSupports **Markdown** and $E = mc^2$.';
+
+export default function Article() {
+  return <Reader source={source} />;
+}
+```
+
+Requires React / React DOM **18.3 or 19**, Node.js **20+**, and an ESM-capable build tool. Interactive features target modern browsers; Node SSR is supported. UI labels default to English; pass the exported `chinese` locale for Chinese labels. Import `math.css` when using formulas.
+
+Render just the body, or a growing response:
+
+```tsx
+import { Markdown } from '@linloir/limr';
+
+export function Answer({ text, generating }: { text: string; generating: boolean }) {
+  return <Markdown source={text} streaming={generating} followOutput />;
+}
+```
+
+`source` is the complete accumulated string. Set `streaming` to `false` when generation ends. `followOutput` is off by default and pauses when the reader scrolls up. `Markdown` does not include navigation, a sidebar, or a selection toolbar.
+
+## Capabilities
+
+| Scenario | Features |
+| --- | --- |
+| Reading | CommonMark, GFM tables/tasks/footnotes, math, Shiki code highlighting |
+| Rich content | Images, figure groups, captions, video, definitions, exercises, further reading, citations, original/translated/parallel text |
+| Interaction | Responsive contents, desktop annotation sidebar, narrow-screen overlays, copying, four highlight styles |
+| Integration | Controlled annotations, original UTF-16 offsets, isolated readers, nested scroll containers, SSR |
+| Extensions | Custom syntax, React renderers, annotation types, selection actions, parameters, CSS theme packages |
+
+The default content annotation type is `citation`; `highlight` provides persistent highlighting. Notes, questions, and chat annotations belong to application plugins. The default `question()` extension renders exercises in the document. See the [syntax reference](docs/en/syntax.md).
+
+```markdown
+<definition title="Definition">
+
+Use **Markdown** inside custom blocks.
+
+</definition>
+
+This passage has a source<ref id="paper" />.
+
+<citation id="paper" title="Reference" url="https://example.com/paper" summary="Short summary" />
+```
+
+## Composition and extensions
+
+`Reader` provides a complete layout. Use `DocumentProvider` with `Markdown`, `TableOfContents`, `AnnotationSidebar`, `AnnotationOverlay`, and `SelectionToolbar` for your own layout. See [application integration](docs/en/integration.md).
+
+```tsx
+import { Reader, defineBlock } from '@linloir/limr';
+
+const plugins = [defineBlock({
+  name: 'notice',
+  component: ({ children }) => <aside className="notice">{children}</aside>,
+})];
+
+export function Notice() {
+  return <Reader source={'<notice>\n\n**Custom content**\n\n</notice>'} plugins={plugins} />;
+}
+```
+
+`plugins` appends to the defaults. `extensions` replaces the entire list; `extensions={[]}` uses basic CommonMark. Replace a named extension explicitly with `replaceExtension()`. Keep configuration references stable.
+
+Plugins can own the complete card UI (`overlay.Card`), collapsed sidebar summary (`sidebar.Preview`), async loading, and selection actions. Use the [plugin development Skill](skills/limr-plugin-development/SKILL.md) or [package guide](docs/en/plugin-packages.md) to build an installable extension and add it through `plugins`. Examples cover [notes](examples/notes.tsx), a [streaming assistant](examples/assistant.tsx), a [standalone plugin](examples/packages/reading-tools/index.js), and a [CSS theme](examples/packages/paper-theme/index.css). The `@limr-example/*` packages are unpublished local examples.
+
+## AI Skills
+
+| Skill | Purpose |
+| --- | --- |
+| [limr-use](skills/limr-use/SKILL.md) | Integrate LiMR, author content, configure interaction, and install existing plugins |
+| [limr-plugin-development](skills/limr-plugin-development/SKILL.md) | Build standalone module packages with a TypeScript / ESM / CSS starter and validation guidance |
+
+Skills ship in the npm package and can also be downloaded from this repository. Copy the entire skill directory to keep references and templates together. See [download, installation, and invocation](docs/en/ai-skills.md) for Codex project and user scopes.
+
+## Styles and runtime
+
+- `styles.css` includes light/dark styling and local Maple code fonts. `styles/base.css` provides the same styling without loading Maple. Font assets remain in the npm download. Choose one stylesheet.
+- `appearance` scopes CSS themes across the reader and portalled controls. Applications or system fonts supply body typography.
+- Code highlighting and math load on demand. Video loads near the viewport by default, with a click-to-load option. Remote media may contact its source site.
+- The full DOM remains available for browser search, native selection, and printing. Streaming appends reuse stable blocks and finish with a full parse; not every edit is incremental.
+- Unregistered HTML is displayed as text. Markdown-supplied JavaScript expressions are never executed. Custom renderers own their data and remote requests.
+
+See [styles and fonts](docs/en/styles.md), [API](docs/en/api.md), and [performance and limits](docs/en/performance.md).
+
+## Local development
+
+```sh
+pnpm install
+pnpm dev
+pnpm check
+pnpm test:docs
+pnpm exec playwright install chromium
+pnpm test:browser
+```
+
+Local development uses Python 3 to generate downloadable Skill archives. The header switches between Playground and LiMR-rendered, bilingual Docs.
+
+The local Playground runs at `http://127.0.0.1:4173`. Use `@linloir/limr/core` for parsing without React/DOM. Other entry points are `@linloir/limr/react` and `@linloir/limr/extensions`.
+
+[MIT License](LICENSE). Developed with Codex.

package/README.md

@@ -1,198 +1,123 @@
 # LiMR
 
-**Linloir’s limr Is a Markdown Renderer.**
+[![npm version](https://img.shields.io/npm/v/@linloir/limr.svg)](https://www.npmjs.com/package/@linloir/limr)
 
-一个可以独立使用，也可以组合成完整阅读界面的 React Markdown 渲染包。正文、目录、角注和选区使用同一份文档状态，面向长文阅读和 AI 流式输出。
+**简体中文** · [English](README.en.md)
 
-## 使用
+**Linloir’s limr Is a Markdown Renderer.** 面向长文阅读和流式输出的 React Markdown 渲染器。正文、目录、引用卡片、选区和高亮共享文档状态，也可以拆开组合到自己的界面中。
+
+[在线 Playground](https://linloir.github.io/LiMR/) · [中文文档](docs/zh-CN/README.md) · [English docs](docs/en/README.md) · [AI Skills](docs/zh-CN/ai-skills.md)
+
+## 安装与使用
 
 ```sh
-pnpm add @linloir/limr
+npm install @linloir/limr
+# 或 pnpm add @linloir/limr
 ```
 
 ```tsx
-import { Reader } from '@linloir/limr';
+import { Reader, chinese } from '@linloir/limr';
 import '@linloir/limr/styles.css';
-import '@linloir/limr/math.css'; // 使用公式时导入；字体随包提供
+import '@linloir/limr/math.css';
+
+const source = '# 开始阅读\n\n支持 **Markdown** 与 $E = mc^2$。';
 
-<Reader source={markdown} />
+export default function Article() {
+  return <Reader source={source} locale={chinese} />;
+}
 ```
 
-需要 React 18.3 / 19、现代浏览器和支持 ESM 的构建工具。npm 包名为 `@linloir/limr`；源码可用 `pnpm pack` 构建并生成本地安装包。
+需要 React / React DOM **18.3 或 19**、Node.js **20+** 和支持 ESM 的构建工具。交互功能面向现代浏览器；支持 Node SSR。默认界面语言为英文，中文界面传入 `chinese`。`math.css` 在使用公式时引入。
 
-只显示正文：
+只显示正文，或显示持续生成的回答：
 
 ```tsx
 import { Markdown } from '@linloir/limr';
 
-<Markdown source={markdown} />
-// source 是持续增长的完整字符串；生成结束时设为 false。
-<Markdown source={answer} streaming={generating} followOutput />
+export function Answer({ text, generating }: { text: string; generating: boolean }) {
+  return <Markdown source={text} streaming={generating} followOutput />;
+}
 ```
 
-`followOutput` 默认关闭。开启后只在用户保持在底部附近时跟随输出。用户向上阅读时暂停跟随。
+`source` 是累计的完整字符串，生成结束时把 `streaming` 设为 `false`。`followOutput` 默认关闭；开启后在读者向上滚动时暂停跟随。`Markdown` 不自带目录、侧栏或选区工具栏。
 
-## 组件
+## 支持什么
 
-| 组件 | 职责 |
+| 场景 | 能力 |
 | --- | --- |
-| `Markdown` | 正文、原文坐标、标题和选区信息；不包含工具菜单 |
-| `DocumentProvider` | 给组合组件提供同一份文档和交互状态 |
-| `Reader` | 开箱即用的响应式组合，窄屏自动使用角注浮层 |
-| `TableOfContents` | 固定标题、自动换行、隐藏滚动条、跟随 active 项 |
-| `AnnotationSidebar` | 与正文角标对齐的卡片、避让、独立列表或自定义定位 |
-| `AnnotationOverlay` | 鼠标预览、点击/触摸展开、键盘退出和焦点恢复 |
-| `SelectionToolbar` | 独立的选区操作和自定义 UI 槽位 |
-| `AnnotationMarkdown` | 在卡片内复用渲染能力，隔离文档和选区作用域 |
+| 文档阅读 | CommonMark、GFM 表格/任务列表/脚注、数学公式、Shiki 代码高亮 |
+| 富内容 | 图片与图组、图注、视频、释义、练习题、拓展阅读、引用、原文/译文/对照 |
+| 阅读交互 | 响应式目录、桌面标注侧栏、窄屏浮层、复制、四种高亮样式 |
+| 应用集成 | 受控标注、原始 UTF-16 坐标、多个独立阅读器、内部滚动容器、SSR |
+| 扩展 | 自定义语法、React 渲染组件、标注类型、选区动作、参数与 CSS 主题包 |
 
-例如，在自己的三栏布局里组合：
-
-```tsx
-<DocumentProvider source={markdown}>
-  <div className="reading-columns">
-    <TableOfContents />
-    <Markdown />
-    <AnnotationSidebar />
-  </div>
-  <AnnotationOverlay />
-  <SelectionToolbar actions={actions} />
-</DocumentProvider>
-```
-
-`reading-columns` 的样式由应用提供。对齐侧栏和正文应位于**同一个滚动容器**，侧栏保持正常文档流中的相对定位。窗口滚动无需配置；内部滚动容器用 `scrollRoot={element}` 指定。常规布局直接用 `Reader` 即可。详见 [组合和布局约定](docs/api.md#布局和定位)。
-
-## 默认能力与扩展
-
-默认包含 GFM、公式、代码高亮、响应式图片/图组与图注、视频、释义、问题正文区块、拓展阅读、ref 引用和分段译文。每一种特殊语法都是使用公开接口实现的独立模块。`translations` 支持原文、译文与对照，可通过 `parameters.translationMode` 统一控制；[图组与译文语法](docs/extensions.md#图片与论文图组)包含完整示例。
-
-**默认角注只有 citation/ref；高亮单独提供。** 提问、注记、聊天等应用角注由插件注册。`question()` 是问题正文区块，与问答角注无关。
-
-```tsx
-import { standard, defineBlock, replaceExtension, codeHighlight } from '@linloir/limr';
-
-const extensions = [
-  ...replaceExtension(standard(), codeHighlight({ languages: ['typescript', 'python'] })),
-  defineBlock({
-    name: 'notice',
-    component: ({ children }) => <aside className="notice">{children}</aside>,
-  }),
-];
-
-<Reader source={'<notice>\n\n**自定义内容**\n\n</notice>'} extensions={extensions} />
-```
-
-同一模块也支持 `:::notice` 指令语法。`extensions` 是完整的扩展列表；传入 `[]` 得到基础 CommonMark。可以用 `.filter()` 移除默认模块，或 `replaceExtension()` 替换同名模块。保持配置引用稳定，例如在模块外定义或使用 `useMemo`。
-
-安装第三方扩展时，用 `plugins` **追加**到默认模块；样式包通过 CSS 导入和 `appearance` 选择：
-
-```tsx
-import { readingTools } from '@limr-example/reading-tools';
-import '@linloir/limr/styles.css';
-import '@limr-example/paper-theme';
-
-const plugins = [readingTools()];
-<Reader source={markdown} plugins={plugins} appearance="paper" />
-```
-
-这里的两个 `@limr-example` 包是仓库内的可打包示例，尚未发布。实际社区包可以使用同样的结构。见 [扩展打包](docs/extensions.md#作为独立包分发) 和 [样式指南](docs/styles.md)。
-
-常用标签：
+默认内容标注类型是 `citation`；`highlight` 是内置持久高亮。笔记、提问和聊天标注由应用插件提供，`question()` 则是默认的练习题正文模块。完整写法见[语法手册](docs/zh-CN/syntax.md)。
 
 ```markdown
 <definition title="定义">
 
-支持 **Markdown** 的内容。
+在特殊区块中继续使用 **Markdown**。
 
 </definition>
 
-引用一段文字<ref id="paper" />。
+这段内容有参考来源<ref id="paper" />。
 
-<citation id="paper" title="论文" url="https://example.com" description="支持 **富文本** 描述。" />
+<citation id="paper" title="参考资料" url="https://example.com/paper" summary="简短摘要" />
 ```
 
-也支持 `cite-id`、`cite-from-ids`、`desc` 等原有属性。未知 HTML 按原文显示，标签中的 JavaScript 表达式不执行。更多模块和 parser 接口见 [扩展指南](docs/extensions.md)。
+## 组合与扩展
 
-## 高亮、选区和应用插件
+`Reader` 提供完整布局；自定义布局可用 `DocumentProvider` 组合 `Markdown`、`TableOfContents`、`AnnotationSidebar`、`AnnotationOverlay` 和 `SelectionToolbar`。详见[项目集成](docs/zh-CN/integration.md)。
 
 ```tsx
-import { Reader, copyText, highlightPalette, highlightSelection, deleteAnnotations, chinese } from '@linloir/limr';
+import { Reader, defineBlock } from '@linloir/limr';
 
-const actions = [
-  highlightPalette(),
-  highlightSelection(),
-  copyText({ label: '复制文字' }),
-  copyText({ label: '复制 Markdown', format: 'syntax' }),
-  deleteAnnotations(),
-];
+const plugins = [defineBlock({
+  name: 'notice',
+  component: ({ children }) => <aside className="notice">{children}</aside>,
+})];
 
-<Reader source={markdown} locale={chinese} actions={actions} />
+export function Notice() {
+  return <Reader source={'<notice>\n\n**自定义内容**\n\n</notice>'} plugins={plugins} />;
+}
 ```
 
-工具菜单默认提供色块、高亮、复制和删除。悬浮左侧色块可调整颜色与样式，添加高亮直接生效；同一文本片段可以同时拥有高亮、旁注、提问等多个 annotation。高亮统一存为 `type: 'highlight'` 的 annotation，通过 `annotations` / `onAnnotationsChange` 管理。右侧删除操作移除该片段关联的所有 annotation，隐藏高亮则保留注释。上面的 `actions` 可替换默认列表。
+`plugins` 追加到默认扩展；`extensions` 替换整个扩展列表，`extensions={[]}` 使用基础 CommonMark。同名扩展使用 `replaceExtension()` 显式替换。配置应保持引用稳定。
 
-选区同时提供 `raw`、`syntax`、`blocks` 三种结果，所有范围都指向**未经改写的原始输入**，使用 UTF-16 偏移、右端不包含。`quality` 区分精确映射、公式等原子节点和无法精确映射的内容。默认高亮和脚注使用 `syntax`，仅吸附选区两端紧邻的标准 Markdown 标记，不扩大未选中的文字，也不吸附特殊块的外层标签。行内及围栏代码支持部分选择、高亮与角标；公式保持整体选择。
+插件可以拥有完整卡片 UI（`overlay.Card`）、侧栏摘要（`sidebar.Preview`）、异步加载和选区操作。使用 [AI 插件开发 Skill](skills/limr-plugin-development/SKILL.md) 或[独立插件包指南](docs/zh-CN/plugin-packages.md)创建可安装的包，再通过 `plugins` 引入。仓库提供[笔记](examples/notes.tsx)、[流式助手](examples/assistant.tsx)、[独立插件](examples/packages/reading-tools/index.js)和 [CSS 主题](examples/packages/paper-theme/index.css)示例；`@limr-example/*` 是未发布的本地示例包。
 
-插件可以在一个 `defineExtension()` 中提供 `actions`、`annotationTypes` 和语法模块。动作拿到选区、文档、`addAnnotation` / `updateAnnotation` / `activateAnnotation` 等命令和取消信号。卡片可以使用任意 React 组件，也可以用 `AnnotationMarkdown` 持续渲染 Markdown 回答。
+## AI Skills
 
-[助手插件](examples/assistant.tsx) 和 [旁注编辑插件](examples/notes.tsx) 演示了这条路径。运行 `pnpm dev` 后即可在同一 playground 页面选中文字，使用问答、旁注、笔记、提问和脚注；新注释会直接进入桌面侧栏或手机卡片的编辑态。顶部“编辑／保存”切换写作与阅读，返回阅读时保存文本与注释到浏览器。“加载”包含全部预设、已保存文本与文件导入导出，“插件”下拉菜单支持多选。预设包含 Express / Axios README、文学作品及 scikit-learn 原论文的 Markdown 转写，来源与许可随文本保留。流式演示始终使用当前文本，主题切换独立保留。问答示例使用本地模拟传输；实际 Codex 连接、认证、会话管理由应用适配器实现，LiMR 不预设服务端协议。
-
-## 渲染与资源
+| Skill | 用途 |
+| --- | --- |
+| [limr-use](skills/limr-use/SKILL.md) | 指导 AI 在项目中接入 LiMR、编写内容、配置交互和引入已有插件 |
+| [limr-plugin-development](skills/limr-plugin-development/SKILL.md) | 指导 AI 开发独立模块包，附带 TypeScript / ESM / CSS 模板及验证步骤 |
 
-- 流式追加会重新解析尚未稳定的末尾区块，复用前面的区块；后到的引用定义会触发完整语义校正。结束时进行最终完整解析。
-- 自定义 transform 默认按全文处理。只有声明 `scope: 'local'` 且满足局部性约定的模块才参与尾部增量解析。
-- 代码高亮接近视口时加载 Shiki、所需语言和主题；流式代码暂停更新后才重新高亮。公式按需加载 KaTeX。视频点击播放前不请求播放器。
-- 角注数据在卡片显示时才加载，同一阅读器内请求复用、取消和有限缓存；不同阅读器资源隔离。
-- 不注入第三方 CDN。默认样式附带本地 Maple Mono NF CN 代码字体，按字形范围加载 WOFF2 子集，加载前使用系统等宽字体。正文衬线字体使用应用/系统回退，Playground 自行提供 Noto Serif SC。可使用不带字体的 `@linloir/limr/styles/base.css`。缓存和覆盖方式见 [样式指南](docs/styles.md)。
-- 默认保留完整 DOM，支持原生查找、选择和打印；不使用会破坏这些行为的默认虚拟列表。
+Skills 随 npm 包分发，也可以从仓库下载。复制完整目录即可保留引用文件和模板；[下载、安装与调用说明](docs/zh-CN/ai-skills.md)包含 Codex 项目级与用户级配置。
 
-SSR 支持 Node 环境。`renderToString` 中未加载的公式先输出源码回退；如需首次 HTML 包含完整公式，先 `await preloadMath()`，或者使用 React 流式 SSR。Shiki 高亮在客户端补充，代码文本会直接出现在 SSR HTML 中。使用 Next.js 等区分服务端/客户端组件的框架时，在应用的客户端边界内导入这些交互组件。
+## 样式与运行方式
 
-[性能测量](docs/performance.md) 包含数据、等价功能配置和限制。数据针对固定硬件和夹具，不代表所有 Markdown、插件或设备。
+- `styles.css` 包含默认浅色/深色样式和本地 Maple 代码字体；`styles/base.css` 提供相同样式但不加载 Maple。字体资产仍包含在 npm 包中。两者选一即可。
+- `appearance` 为 CSS 主题提供作用域，也会传播到 portal 中的工具栏和浮层。正文中文字体由应用或系统提供。
+- 代码高亮和公式按需加载。视频默认接近视口时加载，可以配置为点击加载；远程媒体仍可能访问其来源站点。
+- 保留全文 DOM，支持浏览器查找、原生选择与打印。流式追加复用稳定区块，结束时完整解析；并非所有编辑都能局部解析。
+- 未注册的 HTML 显示为原文，Markdown 中的 JavaScript 表达式不执行。自定义组件负责自己的数据和远程请求。
 
-## 开发
+详见[样式与字体](docs/zh-CN/styles.md)、[API](docs/zh-CN/api.md)和[性能与限制](docs/zh-CN/performance.md)。
 
-[在线 Playground](https://linloir.github.io/LiMR/)
+## 本地开发
 
 ```sh
 pnpm install
 pnpm dev
 pnpm check
+pnpm test:docs
 pnpm exec playwright install chromium
 pnpm test:browser
-NODE_ENV=production pnpm bench
-```
-
-### npm 发布
-
-`pnpm test:package` 会构建并打包当前版本，在独立的 React 18/19 项目中验证类型、SSR、浏览器交互及样式资源，然后将通过验证的安装包保存到 `artifacts/`。
-
-```sh
-pnpm check
-pnpm test:package
-npm login --auth-type=web --registry=https://registry.npmjs.org
-npm publish ./artifacts/linloir-limr-0.1.0.tgz --access public --registry=https://registry.npmjs.org
-```
-
-发布账号需要拥有 `@linloir` scope 的权限并完成 npm 要求的双重认证。后续发布先更新 `package.json` 的版本，再重新打包，并将命令中的文件名替换为新版本。
-
-### GitHub Pages 预览
-
-`main` 保存源码，独立的 `pages` 分支保存 Playground 构建后的静态产物，通过 SSH 推送到 GitHub。`pages` 分支由构建生成，无需手工合并源码。预览地址为 <https://linloir.github.io/LiMR/>。
-
-首次部署在仓库 **Settings → Pages → Build and deployment** 中设置 **Source: Deploy from a branch**、**Branch: pages**、目录 **/(root)**，然后保存。后续推送 `pages` 分支会更新站点。
-
-本地检查与线上相同的 `/LiMR/` 路径：
-
-```sh
-pnpm build:playground
-pnpm preview:playground
-# 打开 http://127.0.0.1:4173/LiMR/
 ```
 
-构建输出为 `demo-dist/`，包含跳过 Jekyll 处理的 `.nojekyll` 文件。更新预览时，重新构建并将该目录的内容提交、推送到 `pages` 分支。`pnpm dev` 仍使用本地根路径。部署到其他仓库名时，需要同步修改两个 Playground 脚本中的 `--base`。
-
-其他入口：`@linloir/limr/core`（无 React/DOM 运行时依赖）、`@linloir/limr/react`、`@linloir/limr/extensions`。详细 props、hooks、受控状态和主题配置见 [API 指南](docs/api.md)。
+本地开发需要 Python 3 生成 Skill 下载归档。标题栏可切换 Docs / Playground，Docs 由 LiMR 渲染，可切换语言。
 
-MIT License.
+本地 Playground 位于 `http://127.0.0.1:4173`。纯解析场景使用 `@linloir/limr/core`，不依赖 React/DOM；其他入口为 `@linloir/limr/react` 和 `@linloir/limr/extensions`。
 
-Developed with Codex.
+[MIT License](LICENSE). Developed with Codex.

package/dist/base.css

@@ -82,6 +82,7 @@
   .limr-highlight[data-hidden] { background: transparent; text-decoration: none; }
   .limr-paint-background { background: color-mix(in srgb, var(--limr-highlight) 30%, transparent); }
   .limr-paint-background:is([data-hovered],[data-active]) { background: color-mix(in srgb, var(--limr-highlight) 48%, transparent); }
+  .limr-paint-background[data-reference] { background: color-mix(in srgb, var(--limr-highlight) 18%, transparent); }
   .limr-highlight-layer .limr-paint-rect:is([data-hovered],[data-active]):not(.limr-paint-background) { background-color: color-mix(in srgb, var(--limr-highlight) 14%, transparent); }
   .limr-highlight { cursor: pointer; }
   .limr-paint-selection { background: var(--limr-selection, #667eea4d); z-index: 1; }
@@ -318,9 +319,9 @@
   .limr-sidebar-card { color: var(--limr-annotation-text, var(--limr-text, #1a1a1a)); min-width: 0; transition: top var(--limr-motion-slow) var(--limr-ease), border-color var(--limr-motion) var(--limr-ease), background-color var(--limr-motion) var(--limr-ease); }
   .limr-sidebar-card:not([data-default-card]),.limr-sidebar-card-body { border-inline-start: 2px solid var(--limr-annotation-border, var(--limr-annotation-color, var(--limr-border-strong, #d5d0c8))); background: var(--limr-background, #fffefa); padding: var(--limr-sidebar-padding-block, .65rem) var(--limr-sidebar-padding-inline, 10px) calc(var(--limr-sidebar-padding-block, .65rem) + 2px); }
   .limr-sidebar-card[data-locked] { z-index: 1; transition-property: border-color, background-color; }
-  .limr-sidebar[data-resizing] > .limr-sidebar-card { transition-property: border-color, background-color; }
+  .limr-sidebar:is([data-resizing],[data-releasing]) > .limr-sidebar-card { transition-property: border-color, background-color; }
   .limr-sidebar-card[data-default-card] { display: flex; flex-direction: column; }
-  .limr-sidebar-card[data-default-card][data-expanded] { max-height: var(--limr-sidebar-card-height, none); }
+  .limr-sidebar-card[data-default-card] { max-height: var(--limr-sidebar-card-height, none); }
   .limr-sidebar-card-body { display: flex; flex-direction: column; min-height: 0; transition: border-color var(--limr-motion) var(--limr-ease), background-color var(--limr-motion) var(--limr-ease); }
   .limr-sidebar-card-body > .limr-collapse { min-height: 0; }
   /* Preview and details trade height; fading both can leave a blank card when
@@ -408,11 +409,12 @@
   .limr-tool-icon :where(*) { max-inline-size: 100% !important; max-block-size: 100% !important; min-inline-size: 0 !important; min-block-size: 0 !important; }
   .limr-tool-icon :where(svg,img) { display: block; width: 100% !important; height: 100% !important; object-fit: contain; flex: none; }
   .limr-tool-icon :where(div,span,i,b,strong,em) { display: inline-flex; align-items: center; justify-content: center; font-size: inherit !important; line-height: 1 !important; }
-  .limr-toolbar-panel { display: flex; width: 100%; min-width: 0; min-height: 0; align-self: stretch; max-height: var(--limr-toolbar-panel-height, 260px); overflow: hidden; text-align: start; margin-top: 4px; border-top: 1px solid var(--limr-toolbar-border, var(--limr-border, #e5e2dc)); animation: limr-tool-float 300ms cubic-bezier(.16,1,.3,1) both, limr-tool-fade 220ms ease 35ms both; }
+  /* Only the actions determine toolbar width. Panel contents cannot enlarge it. */
+  .limr-toolbar-panel { display: flex; contain: inline-size; min-width: 0; min-height: 0; align-self: stretch; max-height: var(--limr-toolbar-panel-height, 260px); overflow: hidden; text-align: start; margin-top: 4px; border-top: 1px solid var(--limr-toolbar-border, var(--limr-border, #e5e2dc)); animation: limr-tool-float 300ms cubic-bezier(.16,1,.3,1) both, limr-tool-fade 220ms ease 35ms both; }
   .limr-toolbar-panel .limr-overlay-content { padding: 10px 9px 4px; scroll-padding-block: 8px; }
-  .limr-toolbar-panel .limr-overlay-scroll-inner { width: var(--limr-toolbar-panel-width, 246px); max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
+  .limr-toolbar-panel .limr-overlay-scroll { width: 100%; min-width: 0; }
+  .limr-toolbar-panel .limr-overlay-scroll-inner { width: 100%; min-width: 0; overflow-wrap: anywhere; }
   .limr-toolbar-panel :where(input,textarea,select,img) { max-width: 100%; }
-  .limr-selection-toolbar[data-expanded] .limr-toolbar-surface { min-width: min(calc(var(--limr-toolbar-panel-width, 246px) + 30px), calc(100vw - 20px)); }
   [data-placement^='top'] .limr-toolbar-panel { order: -1; border-top: 0; border-bottom: 1px solid var(--limr-toolbar-border, var(--limr-border, #e5e2dc)); margin-top: 0; margin-bottom: 4px; }
   .limr-toolbar-swatch { position: relative; width: 24px; height: 24px; margin: 3px 12px 3px 5px; padding: 0; border: 1px solid color-mix(in srgb, var(--swatch) 60%, transparent); border-radius: var(--limr-toolbar-swatch-radius, 4px); background: color-mix(in srgb, var(--swatch) 30%, transparent); transition: scale 240ms var(--limr-ease); --limr-highlight: var(--swatch); }
   .limr-toolbar-swatch:hover { scale: 1.07; }
@@ -429,8 +431,9 @@
   .limr-color-swatch[aria-pressed='true'] { outline-color: var(--swatch); }
   .limr-color-swatch svg { width: 15px; height: 15px; color: var(--limr-text, #3d3a36); opacity: 0; }
   .limr-color-swatch[aria-pressed='true'] svg { opacity: 1; }
-  .limr-highlight-styles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 5px; }
-  .limr-highlight-styles button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 11px; }
+  .limr-highlight-styles { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 5px; }
+  .limr-highlight-styles button { display: flex; flex: 0 0 auto; min-width: 48px; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 11px; white-space: nowrap; }
+  .limr-highlight-style-label { text-align: center; }
   .limr-highlight-styles button svg { width: 21px; height: 21px; }
   .limr-highlight-styles [aria-pressed='true'] { color: var(--limr-toolbar-accent, var(--limr-accent, #8a7865)); border-color: currentColor; }
   .limr-action-error { display: block; max-width: 300px; padding: .5rem; color: #b45858; }