dsh-liquid-chatbox

Liquid Chatbox

DSH 编辑器卡片的液态玻璃折射：仅在输入卡片上应用 SVG 位移透镜和色散效果。

目标 Profile

插件会安装到这里；不确定时保持 web。

npx -y @deepseek-ai/dsh plugin --profile web add github:typemiao/dsh-liquid-chatbox#c516c34c7448866874fb940a7e7f065d00031c4d

兼容性与来源证明

Liquid Chatbox 以 dsh-liquid-chatbox 发布，当前版本为 0.2.0。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。

DSH 兼容范围: *
运行环境: web
发布来源: github
Registry 更新时间: 2026/10/23

版本

0.2.0stable

2026/10/23

0.1.0stable

2026/10/19

README

dsh-liquid-chatbox

About

A liquid-glass composer card for the DSH desktop UI (Electron/Chromium). Only the input card is styled: it keeps a translucent tint and refracts the content behind it with an SVG displacement lens plus per-channel chromatic dispersion.

There is no palette, font, window rim or global surface restyling in this package. It is a client-only bundle — no build step, no native dependencies.

Features

Refractive composer card — the input card bends the content behind it with an SVG feDisplacementMap, using a BK7 glass model and a convex rim profile.
Chromatic dispersion — three displaced copies (R, G, B at their own refractive indices) isolated with feColorMatrix and screen-blended.
Card-shaped map — the displacement map is generated from the card's actual aspect ratio and corner radius, and regenerated when the card grows or shrinks, so the lens band stays on the border instead of drifting.
Symmetric edges — top and bottom sample toward the card centre, so both borders show the same lens behaviour.
Settings — Settings → General → 玻璃质感: blur, card tint, refraction strength and dispersion, with a reset button. Values persist in localStorage under dsh-glass-settings.
No build step — plain ESM loaded by the DSH client module loader.

Requirements

DSH desktop app. The lens filter is mounted on dsh-app://; in a plain browser the card keeps its tint and blur, but the SVG lens is not mounted.
Chromium-based renderer (backdrop-filter: url(#svgFilter) is Chromium-only).
Windows 11 is recommended for the window material; the card still works on any page, but the acrylic backdrop is what makes the refraction visible when there is no content behind the card.

Install

Option A — manual (profile)

Copy this folder into your DSH profile:

%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-liquid-chatbox

Add the plugin to %USERPROFILE%\.dsh\profiles\desktop\cordis.patch.yml:
```
- insert:
    - id: liquid-chatbox
      name: dsh-liquid-chatbox
```
Restart the DSH desktop app.

pnpm may prune packages that are not in the profile's dependency tree. If you manage the profile with pnpm, register the plugin as a file: dependency (or install it as a bundle) so it is not moved to node_modules/.ignored.

Option B — bundle/plugin manager

The package ships its own cordis.patch.yml (dsh.bundle.patch), so a manager that understands the DSH bundle format can install it. Install the package, then restart the app.

Usage

Open Settings → General and scroll to 玻璃质感. The sliders apply immediately; “恢复默认” resets blur 0.5px, tint 18%, refraction 0.04 and dispersion 2.5.

How it works

client.js injects one <style> element and mounts the lens SVG filter (#dsh-lg-refract) used by the composer card.
The displacement map is generated at runtime from a rounded-rect SDF whose aspect ratio and radius match the card; the band is 36px wide (scaled with the card width) and the profile is monotonic, so the mapping never folds.

The card uses:

backdrop-filter: blur(0.5px) url(#dsh-lg-refract)
                 contrast(1.05) brightness(1.1) saturate(1.8);

Dispersion uses three displaced copies (R, G, B) isolated with feColorMatrix and screen-blended.

Changes in 0.2.0

Scope reduced to the composer card: the pink accent, Maple Mono overrides, glass window rim and global surface restyling were removed.
The displacement map now matches the card's aspect ratio and corner radius and is regenerated on resize, fixing the band drifting away from the border.
Top and bottom edges sample symmetrically toward the card centre, so the bottom border shows the same reflection as the top.
Reverted to a monotonic rim profile: the previous bump profile could fold the mapping and make text appear to move backwards inside the band.

Known limitations

backdrop-filter samples the page's painted backdrop, not the DWM material/desktop. The acrylic stays live, but the lens cannot refract the material itself.
A displaced sample that lands on a translucent pixel can let the original content show through the semi-transparent filter result (a faint edge ghost). Making the output opaque removes it but replaces the vacated pixels with the page colour, because the material colour is not part of the filter input.
The lens needs something behind the card. Over a flat area there is nothing to bend, so the effect is invisible there.
Large blur/refraction on a sticky, scrolling surface is GPU/CPU heavy; the defaults are kept small.

Development

node --check client.js

index.js — empty host half.
client.js — the whole client plugin (styles + filter + settings row).
locale/*.json — catalogue metadata.
icon.svg — plugin icon.

No dependencies, no build.

Credits

The refraction model and edge-bulge idea are derived from two MIT-licensed projects:

sohumsuthar/liquid-glass — BK7 refraction model and displacement-map approach.
shuding/liquid-glass — edge-bulge (applyEdgeBulge) convex-lens idea.

See THIRD_PARTY_NOTICES.md for the full notices.

License

README

dsh-liquid-chatbox

About

There is no palette, font, window rim or global surface restyling in this package. It is a client-only bundle — no build step, no native dependencies.

Features

Refractive composer card — the input card bends the content behind it with an SVG feDisplacementMap, using a BK7 glass model and a convex rim profile.
Chromatic dispersion — three displaced copies (R, G, B at their own refractive indices) isolated with feColorMatrix and screen-blended.
Card-shaped map — the displacement map is generated from the card's actual aspect ratio and corner radius, and regenerated when the card grows or shrinks, so the lens band stays on the border instead of drifting.
Symmetric edges — top and bottom sample toward the card centre, so both borders show the same lens behaviour.
Settings — Settings → General → 玻璃质感: blur, card tint, refraction strength and dispersion, with a reset button. Values persist in localStorage under dsh-glass-settings.
No build step — plain ESM loaded by the DSH client module loader.

Requirements

DSH desktop app. The lens filter is mounted on dsh-app://; in a plain browser the card keeps its tint and blur, but the SVG lens is not mounted.
Chromium-based renderer (backdrop-filter: url(#svgFilter) is Chromium-only).
Windows 11 is recommended for the window material; the card still works on any page, but the acrylic backdrop is what makes the refraction visible when there is no content behind the card.

Install

Option A — manual (profile)

Copy this folder into your DSH profile:

%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-liquid-chatbox

Add the plugin to %USERPROFILE%\.dsh\profiles\desktop\cordis.patch.yml:
```
- insert:
    - id: liquid-chatbox
      name: dsh-liquid-chatbox
```
Restart the DSH desktop app.

pnpm may prune packages that are not in the profile's dependency tree. If you manage the profile with pnpm, register the plugin as a file: dependency (or install it as a bundle) so it is not moved to node_modules/.ignored.

Option B — bundle/plugin manager

The package ships its own cordis.patch.yml (dsh.bundle.patch), so a manager that understands the DSH bundle format can install it. Install the package, then restart the app.

Usage

Open Settings → General and scroll to 玻璃质感. The sliders apply immediately; “恢复默认” resets blur 0.5px, tint 18%, refraction 0.04 and dispersion 2.5.

How it works

client.js injects one <style> element and mounts the lens SVG filter (#dsh-lg-refract) used by the composer card.
The displacement map is generated at runtime from a rounded-rect SDF whose aspect ratio and radius match the card; the band is 36px wide (scaled with the card width) and the profile is monotonic, so the mapping never folds.

The card uses:

backdrop-filter: blur(0.5px) url(#dsh-lg-refract)
                 contrast(1.05) brightness(1.1) saturate(1.8);

Dispersion uses three displaced copies (R, G, B) isolated with feColorMatrix and screen-blended.

Changes in 0.2.0

Scope reduced to the composer card: the pink accent, Maple Mono overrides, glass window rim and global surface restyling were removed.
The displacement map now matches the card's aspect ratio and corner radius and is regenerated on resize, fixing the band drifting away from the border.
Top and bottom edges sample symmetrically toward the card centre, so the bottom border shows the same reflection as the top.
Reverted to a monotonic rim profile: the previous bump profile could fold the mapping and make text appear to move backwards inside the band.

Known limitations

backdrop-filter samples the page's painted backdrop, not the DWM material/desktop. The acrylic stays live, but the lens cannot refract the material itself.
A displaced sample that lands on a translucent pixel can let the original content show through the semi-transparent filter result (a faint edge ghost). Making the output opaque removes it but replaces the vacated pixels with the page colour, because the material colour is not part of the filter input.
The lens needs something behind the card. Over a flat area there is nothing to bend, so the effect is invisible there.
Large blur/refraction on a sticky, scrolling surface is GPU/CPU heavy; the defaults are kept small.

Development

node --check client.js

index.js — empty host half.
client.js — the whole client plugin (styles + filter + settings row).
locale/*.json — catalogue metadata.
icon.svg — plugin icon.

No dependencies, no build.

Credits

The refraction model and edge-bulge idea are derived from two MIT-licensed projects:

sohumsuthar/liquid-glass — BK7 refraction model and displacement-map approach.
shuding/liquid-glass — edge-bulge (applyEdgeBulge) convex-lens idea.

See THIRD_PARTY_NOTICES.md for the full notices.

Liquid Chatbox

兼容性与来源证明

版本

相关插件

Liquid Chatbox

README

dsh-liquid-chatbox

About

Features

Requirements

Install

Option A — manual (profile)

Option B — bundle/plugin manager

Usage

How it works

Changes in 0.2.0

Known limitations

Development

Credits

License

兼容性与来源证明

版本

相关插件

相关插件

相关插件

README

dsh-liquid-chatbox

About

Features

Requirements

Install

Option A — manual (profile)

Option B — bundle/plugin manager

Usage

How it works

Changes in 0.2.0

Known limitations

Development

Credits

License