npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@huiliyi37/dsh-client-ui-layout

v0.6.0

Published

Shell plugin: three-column AppFrame with drag handles, ctx.layout viewing-state service (navigation + panels)

Downloads

1,104

Readme

@huiliyi37/dsh-client-ui-layout

English | 中文

外壳插件:三栏 AppFrame(拖动手柄与让步链)加 ctx.layout 面板几何服务;它注册到运行时拥有的 root slot,并声明 sidebarconversationdetailsconversation.empty。侧边栏的缩放边界是不可见命中条带,详情栏边界则保留其浮动胶囊;让步期间只有详情栏会收缩并随后自动关闭。关闭的侧边栏仍保留 56px 控制栏,详情栏则关闭到零宽度。该包还提供主题呈现器:它消费解析后的 ctx.theme 快照,并将其投影到 document(用 html { color-scheme } 驱动原生 UA 控件,依据当前配色方案设置 body[data-ds-dark-theme],并将主题的别名 token 设为 body 上的内联变量,同时拥有一个 <meta name="theme-color">,其内容随计算后的 body 背景色更新)。在应用调色板和 token 后进行测量,可确保渲染后的背景成为唯一的颜色依据;呈现器在 dispose(资源释放)时会移除其自有的元数据节点,并一并清除其写入的其他全局状态。

AppFrame 始终挂载会话栏和详情栏;已连接 Session 通过 SessionProvider 渲染。布局 store 是瞬时状态,侧边栏以默认宽度启动,详情栏则保持关闭,且该 store 从不读写 localStorage。hero 和其他未选中状态也会将详情栏的渲染宽度派生为零,但不会改变存储的宽度偏好。AppFrame 会跨越这些状态保留最后一个非 blank 会话 id:首个会话保持关闭;显式打开详情栏的操作会使用约定默认宽度;返回同一会话时恢复其未改变的宽度;选择不同会话时,详情栏会在绘制前关闭。会话 owner share 为空,侧边栏 owner share 只包含 collapsedwidth;注册方通过标准钩子获取业务数据,并从各自的 inject 接口获取操作。

/client 导出表层包含插件主体(applyinject)、LayoutService 和四个 owner-share 接口。AppFrame、面板 store 与让步求解器仍属于包内部。

模型体验

无。布局外壳管理浏览器查看状态;这里没有任何内容进入模型请求。

KV Cache 影响

无;该包既不组装也不发送提供方请求。

已知限制与暂缓事项

  • 面板几何信息是瞬时状态:重新加载会恢复侧边栏默认值,并使详情栏保持关闭;在不同会话 id 之间切换同样会关闭详情栏,并忘记拖动后的宽度,而未选中表面会以零宽度渲染详情栏,但不会修改几何信息。
  • 让步链自动关闭通过推导零宽度实现,不会改动宽度偏好:窗口变宽时面板会自行恢复;消费方禁止把 store 中的详情宽度当作实际渲染状态。
  • 挤压重排期间不提供滚动锚定:布局变化可能移动读者的 viewport。