dsh-design-studio 0.8.0 → 0.9.0

package/lib/client.js

@@ -85,6 +85,7 @@ window.__ModuleLoader__.load({
       kindApp: 'App',
       kindMini: '小程序',
       kindTablet: '平板',
+      kindDesktop: '桌面软件',
       kindPoster: '海报',
       kindSlides: '幻灯片',
       kindEmail: '邮件',
@@ -141,6 +142,11 @@ window.__ModuleLoader__.load({
       ck_jserr: '页面脚本报错',
       ck_missing: '文件没载出来',
       ck_capsule: '被小程序胶囊挡住',
+      ck_island: '被灵动岛挡住',
+      ck_homebar: '伸进底部横条区',
+      ck_tabbar: '标签栏项太多',
+      ck_navbar: '没有导航栏',
+      ck_winctl: '被窗口按钮挡住',
       cd_hscroll: '伸出屏幕 {px}px',
       cd_clipped: '被切掉 {px}px',
       cd_overflow: '伸出框 {px}px',
@@ -158,6 +164,15 @@ window.__ModuleLoader__.load({
       cd_jserr: '{msg}{at}',
       cd_missing: '{what} {src} 载不出来（路径写错了，或者文件不在）',
       cd_capsule: '伸进右上角胶囊 {px}px（胶囊是微信画的、盖不住：顶栏右边从 x={x} 起空着）',
+      cd_island: '被灵动岛挡住 {px}px（灵动岛在 y 11–45：状态栏中间空着，内容放到状态栏下面）',
+      cd_homebar: '{bar} 里的字或图标伸进底部横条区 {px}px（底部留 34px：栏加 padding-bottom: 34px，预览里 env(safe-area-inset-bottom) 是 0）',
+      cd_tabbar: '标签栏有 {n} 项（最多 5 项）',
+      cd_navbar: '顶上 y {t}–{b}（导航栏）是空的：一级页放标题或品牌，二级页标题居中加返回',
+      cd_winctl: '伸进{osName}窗口按钮 {px}px（外框画的、盖在页面上面：{zone}空着）',
+      ckOs_mac: ' Mac ',
+      ckOs_win: ' Windows ',
+      ckZone_mac: '左上角 x 80、y 40 以内',
+      ckZone_win: '右上角 138×32',
       ckEdge_top: '顶栏',
       ckEdge_bottom: '底栏',
       ckWhen_top: '没滚时',
@@ -252,10 +267,26 @@ window.__ModuleLoader__.load({
       styleJoin: '；',
       lang: 'zh',
       stylesHead: '先挑一个风格开工',
-      stylesTip: '点一个，整套配色、字体、圆角放进输入框；再写要做什么',
+      stylesTip: '点一个看样板，满意了点「用这个风格」，整套配色、字体、圆角放进输入框；再写要做什么',
       stylesOpen: '换个风格…',
       stylesTitle: '换个风格',
-      stylesSwap: '点一个，让模型把现在的设计换成这个风格（先改 tokens.css，布局和文案不动）',
+      stylesSwap: '点一个看样板；「用这个风格」让模型把现在的设计换成它（先改 tokens.css，布局和文案不动）',
+      stylesAll: '全部风格',
+      stylePrev: '上一个（←）',
+      styleNext: '下一个（→）',
+      styleUse: '用这个风格',
+      samBrand: '小森',
+      samNav: '发现　课程　我的',
+      samHead: '把日子过得好一点',
+      samSub: '一句说明文字，看看正文和次要文字的样子。',
+      samGo: '开始使用',
+      samMore: '了解更多 →',
+      samItem: '周末手作课',
+      samMeta: '2 小时 · 6 人小班',
+      samPrice: '¥128',
+      samTag: '新',
+      samStat: '本周完成',
+      samStatMeta: '比上周多 12%',
       styleText: '〔风格〕{name}——{desc}\n配色：{colors}\n字体：{fonts}\n形状：{shape}\n要点：{notes}\n{ask}',
       styleColors: '底色 {bg}，卡片 {surface}，文字 {text}，次要文字 {muted}，分隔线 {line}，主色 {primary}（上面的字 {on}），点缀 {accent}（{accUse}），链接和小字强调 {link}{bgImage}',
       accBig: '图形、大字',
@@ -404,6 +435,7 @@ window.__ModuleLoader__.load({
       kindApp: 'App',
       kindMini: 'Mini program',
       kindTablet: 'Tablet',
+      kindDesktop: 'Desktop app',
       kindPoster: 'Poster',
       kindSlides: 'Slides',
       kindEmail: 'Email',
@@ -460,6 +492,11 @@ window.__ModuleLoader__.load({
       ck_jserr: 'Script error',
       ck_missing: 'File failed to load',
       ck_capsule: 'Under the mini program capsule',
+      ck_island: 'Under the Dynamic Island',
+      ck_homebar: 'In the home indicator area',
+      ck_tabbar: 'Too many tabs',
+      ck_navbar: 'No navigation bar',
+      ck_winctl: 'Under the window buttons',
       cd_hscroll: 'sticks out {px}px',
       cd_clipped: '{px}px cut off',
       cd_overflow: 'sticks out {px}px',
@@ -477,6 +514,15 @@ window.__ModuleLoader__.load({
       cd_jserr: '{msg}{at}',
       cd_missing: '{what} {src} did not load (wrong path, or the file is missing)',
       cd_capsule: '{px}px under the top-right capsule (WeChat draws it on top; keep the top bar clear from x={x})',
+      cd_island: '{px}px under the Dynamic Island (it sits at y 11–45: keep the middle of the status bar empty and start content below the status bar)',
+      cd_homebar: 'text or icons in {bar} reach {px}px into the home indicator area (leave 34px: give the bar padding-bottom: 34px; env(safe-area-inset-bottom) is 0 in the preview)',
+      cd_tabbar: 'the tab bar has {n} items (5 at most)',
+      cd_navbar: 'nothing at y {t}–{b} (the navigation bar): top-level pages show a title or brand, other pages a centered title and a back button',
+      cd_winctl: '{px}px under the{osName}window buttons (the frame draws them on top: keep {zone} clear)',
+      ckOs_mac: ' Mac ',
+      ckOs_win: ' Windows ',
+      ckZone_mac: 'the top-left 80×40',
+      ckZone_win: 'the top-right 138×32',
       ckEdge_top: 'top bar',
       ckEdge_bottom: 'bottom bar',
       ckWhen_top: 'before scrolling, ',
@@ -571,10 +617,26 @@ window.__ModuleLoader__.load({
       styleJoin: '; ',
       lang: 'en',
       stylesHead: 'Start from a style',
-      stylesTip: 'Pick one to put its colors, fonts and shapes in the chat box, then say what to make',
+      stylesTip: 'Pick one to see a sample; "Use this style" puts its colors, fonts and shapes in the chat box, then say what to make',
       stylesOpen: 'Try another style…',
       stylesTitle: 'Change the style',
-      stylesSwap: 'Pick one and the model restyles the current design (tokens.css first; layout and copy stay)',
+      stylesSwap: 'Pick one to see a sample; "Use this style" has the model restyle the current design (tokens.css first; layout and copy stay)',
+      stylesAll: 'All styles',
+      stylePrev: 'Previous (←)',
+      styleNext: 'Next (→)',
+      styleUse: 'Use this style',
+      samBrand: 'Bloom',
+      samNav: 'Explore  Classes  Me',
+      samHead: 'Make every day a little better',
+      samSub: 'One line of supporting text to show body and muted colors.',
+      samGo: 'Get started',
+      samMore: 'Learn more →',
+      samItem: 'Weekend workshop',
+      samMeta: '2 hrs · small group of 6',
+      samPrice: '$18',
+      samTag: 'New',
+      samStat: 'Done this week',
+      samStatMeta: '12% more than last week',
       styleText: '[Style] {name}: {desc}\nColors: {colors}\nFonts: {fonts}\nShape: {shape}\nNotes: {notes}\n{ask}',
       styleColors: 'background {bg}, cards {surface}, text {text}, muted text {muted}, lines {line}, primary {primary} (text on it {on}), accent {accent} ({accUse}), links and small emphasis {link}{bgImage}',
       accBig: 'graphics and large text only',
@@ -750,6 +812,11 @@ window.__ModuleLoader__.load({
 .ddp-chrome span{flex:1;min-width:0;margin:0 60px 0 18px;height:20px;border-radius:6px;background:rgba(0,0,0,.05);color:#6b6b74;font:12px/20px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ddp-island{position:absolute;left:50%;width:118px;height:34px;margin-left:-59px;border-radius:20px;background:#000;z-index:4;pointer-events:none}
 .ddp-cap{position:absolute;width:87px;height:32px;z-index:4;pointer-events:none;overflow:visible;fill:#000}
+.ddp-dev.k-desktop{box-shadow:0 0 0 .5px rgba(0,0,0,.3),0 22px 60px rgba(0,0,0,.28)}
+.ddp-dev.fill.k-desktop{box-shadow:none}
+.ddp-win{position:absolute;z-index:4;pointer-events:none;overflow:visible}
+.ddp-win .x{fill:none;stroke:#1f1f1f;stroke-width:1}
+.ddp-win.w .x{stroke:#fff}
 .ddp-cap .pl{fill:rgba(255,255,255,.6);stroke:rgba(0,0,0,.08);stroke-width:.5}
 .ddp-cap .sp{stroke:rgba(0,0,0,.15);stroke-width:.5}
 .ddp-cap .rg{fill:none;stroke:#000;stroke-width:2}
@@ -920,14 +987,47 @@ window.__ModuleLoader__.load({
 .ddp-style .cnt{padding:0 14px 6px;font-size:11px;color:var(--dsw-alias-label-tertiary)}
 .ddp-styles{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px 8px}
 .ddp-sc{display:flex;flex-direction:column;gap:5px;min-width:0;padding:0;border:0;background:transparent;color:var(--dsw-alias-label-secondary);font:inherit;text-align:left;cursor:pointer}
-.ddp-sc .pv{position:relative;display:block;height:58px;border-radius:10px;overflow:hidden;box-shadow:0 0 0 .5px rgba(127,127,127,.35);transition:transform .15s ${EASE},box-shadow .15s}
-.ddp-sc:hover .pv{transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT},0 6px 16px rgba(0,0,0,.12)}
-.ddp-sc:hover{color:var(--dsw-alias-label-primary)}
-.ddp-sc .pv b{position:absolute;left:8px;top:6px;font-size:17px;line-height:1}
-.ddp-sc .pv .bt{position:absolute;right:8px;top:8px;width:20px;height:9px}
-.ddp-sc .pv .cd{position:absolute;left:8px;right:8px;bottom:7px;height:20px}
-.ddp-sc .pv .ln{position:absolute;left:6px;top:6px;width:46%;height:3px;border-radius:2px;opacity:.85}
-.ddp-sc .pv .ln.s{top:12px;width:30%;opacity:.6}
+.ddp-sc .pv{position:relative;display:block;height:74px;border-radius:10px;overflow:hidden;container-type:inline-size;box-shadow:0 0 0 .5px rgba(127,127,127,.35);transition:transform .15s ${EASE},box-shadow .15s}
+.ddp-sc:hover .pv,.ddp-sc:focus-visible .pv{transform:translateY(-1px);box-shadow:0 0 0 1.5px ${ACCENT},0 6px 16px rgba(0,0,0,.12)}
+.ddp-sc:focus-visible{outline:none}
+.ddp-sc:hover,.ddp-sc:focus-visible{color:var(--dsw-alias-label-primary)}
+.ddp-sc .pv .ddp-sam{width:calc(100cqw / .32);min-height:calc(100% / .32);transform:scale(.32);transform-origin:0 0;pointer-events:none}
+.ddp-sam{display:flex;flex-direction:column;gap:7px;padding:12px 14px 14px;font-size:11px;line-height:1.45;text-align:left;overflow:hidden;box-sizing:border-box}
+.ddp-sam b{font-weight:600;color:inherit} /* 空白页的 .ddp-empty b 会把字染成界面色 */
+.ddp-sam .top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
+.ddp-sam .top b{font-size:12px}
+.ddp-sam .lg{width:14px;height:14px;flex:none}
+.ddp-sam .nv{margin-left:auto;font-size:10px;white-space:nowrap}
+.ddp-sam .av{width:18px;height:18px;flex:none;border-radius:50%}
+.ddp-sam h5{margin:2px 0 0;font-size:21px;line-height:1.2}
+.ddp-sam p{margin:0}
+.ddp-sam .acts{display:flex;align-items:center;gap:12px;margin:2px 0 4px;white-space:nowrap}
+.ddp-sam .bt{display:inline-flex;align-items:center;height:26px;padding:0 13px;font-weight:600}
+.ddp-sam .cards{display:grid;grid-template-columns:1.25fr 1fr;gap:9px;align-items:stretch}
+.ddp-sam .cd{display:flex;flex-direction:column;gap:2px;min-width:0;padding:8px;font-size:10px;box-sizing:border-box}
+.ddp-sam .cd>*{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
+.ddp-sam .cd>b{font-size:11.5px}
+.ddp-sam .im{display:block;flex:none;height:46px;margin-bottom:4px}
+.ddp-sam .pr{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:3px}
+.ddp-sam .pr b{font-size:15px;font-weight:700}
+.ddp-sam .chip{padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:600}
+.ddp-sam .cd>.num{margin:2px 0 6px;font-size:28px;line-height:1.1}
+.ddp-sam .bar{position:relative;display:block;flex:none;height:5px;margin-bottom:5px;border-radius:3px}
+.ddp-sam .bar i{position:absolute;left:0;top:0;bottom:0;width:86%;border-radius:inherit}
+.ddp-samview{display:flex;flex-direction:column;gap:8px;text-align:left}
+.ddp-samview .all{align-self:flex-start;height:24px;margin-left:-4px;font-size:12px}
+.ddp-samview .all svg,.ddp-samview .row svg{width:14px;height:14px}
+.ddp-samview .ddp-sam{border-radius:12px;box-shadow:0 0 0 .5px rgba(127,127,127,.35),0 8px 24px rgba(0,0,0,.10);animation:ddp-in .2s ${EASE}}
+.ddp-samview .meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
+.ddp-samview .meta b{font-size:13px;font-weight:500;color:var(--dsw-alias-label-primary)}
+.ddp-samview .meta p{flex-basis:100%;margin:0;font-size:11px;line-height:16px;color:var(--dsw-alias-label-tertiary)}
+.ddp-samview .sw{display:flex;gap:3px;margin-left:auto}
+.ddp-samview .sw i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 .5px rgba(127,127,127,.5)}
+.ddp-samview .row{display:flex;align-items:center;gap:2px}
+.ddp-samview .row .ddp-btn{height:26px;min-width:26px}
+.ddp-samview .row .nx svg{transform:scaleX(-1)}
+.ddp-samview .row em{min-width:40px;font-style:normal;font-size:11px;text-align:center;color:var(--dsw-alias-label-tertiary);font-variant-numeric:tabular-nums}
+.ddp-samview .row .ddp-go{margin-left:auto;height:28px;font-size:12px}
 .ddp-sc .nm{font-size:12px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .ddp-tries{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:440px}
 .ddp-tries>span{flex-basis:100%;font-size:11px;line-height:16px}
@@ -1072,6 +1172,7 @@ window.__ModuleLoader__.load({
       app: () => svg([h('rect', { key: 1, x: 7, y: 2.5, width: 10, height: 19, rx: 2.4 }), h('path', { key: 2, d: 'M10.5 5h3' })]),
       miniprogram: () => svg([h('rect', { key: 1, x: 6, y: 2.5, width: 12, height: 19, rx: 2.4 }), h('rect', { key: 2, x: 11.5, y: 5.2, width: 4.5, height: 2.4, rx: 1.2 })]),
       tablet: () => svg([h('rect', { key: 1, x: 4.5, y: 3, width: 15, height: 18, rx: 2.2 }), h('path', { key: 2, d: 'M11 18h2' })]),
+      desktop: () => svg([h('rect', { key: 1, x: 2.5, y: 4.5, width: 19, height: 15, rx: 2.6 }), h('path', { key: 2, d: 'M9 4.5v15' }), h('path', { key: 3, d: 'M4.8 7.2h.01M6.8 7.2h.01' })]),
       poster: () => svg([h('rect', { key: 1, x: 5, y: 3, width: 14, height: 18, rx: 1.8 }), h('path', { key: 2, d: 'M5 16l4-4 3 3 2-2 5 5' }), h('circle', { key: 3, cx: 14.5, cy: 8, r: 1.6 })]),
       slides: () => svg([h('rect', { key: 1, x: 2.5, y: 4, width: 19, height: 12, rx: 1.8 }), h('path', { key: 2, d: 'M12 16v3M8.5 20.5h7' }), h('path', { key: 3, d: 'M6.5 8h6M6.5 11h4' })]),
       email: () => svg([h('rect', { key: 1, x: 3, y: 5, width: 18, height: 14, rx: 2.2 }), h('path', { key: 2, d: 'M3.5 6.5l8.5 6.5 8.5-6.5' })]),
@@ -1334,6 +1435,7 @@ window.__ModuleLoader__.load({
     const SERIF = '"Songti SC", "Noto Serif SC", "Source Han Serif SC", serif'
     const ROUND = '"SF Pro Rounded", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif'
     const MONO = '"JetBrains Mono", "SF Mono", Menlo, Consolas, monospace'
+    const GROTESK = '"Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif'
     const STYLES = [
       { id: 'minimal', zh: '极简白', en: 'Minimal', dzh: '大留白、细线、黑白加一点蓝', den: 'Lots of space, hairlines, black and white with a touch of blue',
         c: { bg: '#FAFAF9', surface: '#FFFFFF', text: '#18181B', muted: '#6B6B73', line: '#E4E4E7', primary: '#18181B', accent: '#2563EB', on: '#FFFFFF', link: '#2563EB' },
@@ -1411,8 +1513,75 @@ window.__ModuleLoader__.load({
         head: SANS, w: 800, radius: 12, shadow: '0 4px 12px rgba(207,46,14,.12)',
         nzh: '价格用大号粗体数字（¥ 小一号），原价灰色划线；「限时」「包邮」这类小标签用色块；优惠券用金黄色、带锯齿边；倒计时醒目；信息多但分区清楚，主按钮通栏',
         nen: 'Prices in big bold numerals (smaller currency sign), old price struck through in gray; small colored tags like "Limited" and "Free shipping"; gold coupons with notched edges; a prominent countdown; dense but clearly sectioned, full-width main button' },
+      { id: 'japandi', zh: '日系原木', en: 'Japandi', dzh: '米色原木、低饱和、小字大留白', den: 'Oat and wood tones, muted, small type and lots of space',
+        c: { bg: '#F2EEE6', surface: '#FAF8F3', text: '#2F2B26', muted: '#6B645A', line: '#DDD5C8', primary: '#4F4234', accent: '#8C9A6E', on: '#FAF8F3', link: '#6B4F33' },
+        head: SANS, w: 500, radius: 6, shadow: '0 2px 8px rgba(79,66,52,.06)',
+        nzh: '像杂货店和家居品牌：字号偏小、字重不重，留白很多；颜色只有米、原木棕、灰绿，饱和度都低；照片柔光、自然材质（木、麻、陶）；细线分隔，几乎不用阴影；主按钮深棕实底',
+        nen: 'Like a lifestyle or homeware brand: smallish, light type and lots of space; only oat, wood brown and sage, all low saturation; soft-light photos of natural materials (wood, linen, ceramic); hairline dividers, almost no shadow; solid dark-brown main button' },
+      { id: 'swiss', zh: '瑞士网格', en: 'Swiss grid', dzh: '白底黑字红色块、严格网格', den: 'White, black type, red blocks, strict grid',
+        c: { bg: '#FFFFFF', surface: '#F1F1F1', text: '#0A0A0A', muted: '#545454', line: '#0A0A0A', primary: '#D9001B', accent: '#0A0A0A', on: '#FFFFFF', link: '#C2001A' },
+        head: GROTESK, w: 800, radius: 0, shadow: 'none',
+        nzh: '12 栏严格网格、全部左对齐（不居中）；标题是超大粗无衬线、字距收紧（-0.03em）；红色大色块只用一两处；用数字编号（01 02 03）和粗黑线分区；没有圆角、阴影和渐变',
+        nen: 'A strict 12-column grid, everything left-aligned (nothing centered); huge, bold, tightly tracked sans headings (-0.03em); one or two big red blocks; numbered sections (01 02 03) and heavy black rules; no radius, shadow or gradient' },
+      { id: 'brutal', zh: '粗野主义', en: 'Brutalist', dzh: '亮黄底、黑粗框、硬阴影、等宽字', den: 'Bright yellow, thick black borders, hard shadows, monospace',
+        c: { bg: '#FFEF5C', surface: '#FFFFFF', text: '#000000', muted: '#3B3B3B', line: '#000000', primary: '#000000', accent: '#FF5C39', on: '#FFEF5C', link: '#1F3FD1' },
+        head: MONO, w: 800, radius: 0, shadow: '5px 5px 0 #000000',
+        nzh: '卡片和按钮 3px 黑粗边框 + 大偏移的硬阴影（不模糊）；标题等宽字、很大；亮黄、白、橙红高饱和撞色；元素可以故意错位、叠放；不用渐变、圆角和柔和阴影；链接带下划线',
+        nen: '3px black borders and big unblurred offset shadows on cards and buttons; large monospace headings; loud yellow, white and red-orange blocks; deliberate offsets and overlaps are fine; no gradients, radius or soft shadows; underlined links' },
+      { id: 'cream', zh: '奶油风', en: 'Cream', dzh: '奶白燕麦焦糖、大圆角、柔光', den: 'Milk, oat and caramel, big radii, soft light',
+        c: { bg: '#FAF5EE', surface: '#FFFDF9', text: '#3A2F28', muted: '#76675C', line: '#EEE3D5', primary: '#8C5E3C', accent: '#E7C9A6', on: '#FFFFFF', link: '#8A5A36' },
+        head: ROUND, w: 700, radius: 22, shadow: '0 10px 30px rgba(140,94,60,.10)',
+        nzh: '奶白、燕麦、焦糖三个色；圆角大，多用圆形和胶囊形；阴影又大又淡、带一点暖色；字是深咖啡色不用纯黑；照片和插画柔光、低对比；整体软、暖、安静',
+        nen: 'Milk, oat and caramel; big radii, lots of circles and pills; large, faint, warm-tinted shadows; dark coffee text, never pure black; soft, low-contrast photos and illustrations; soft, warm and calm overall' },
+      { id: 'sport', zh: '运动能量', en: 'Sport', dzh: '黑底荧光绿、粗斜体、大数字', den: 'Black with volt green, heavy italics, big numbers',
+        c: { bg: '#0E0F11', surface: '#1A1C20', text: '#F4F5F6', muted: '#A1A5AD', line: '#2B2E35', primary: '#C8FF2E', accent: '#FF5A1F', on: '#0E0F11', link: '#C8FF2E' },
+        head: SANS, w: 900, radius: 6, shadow: 'none',
+        nzh: '标题超粗斜体、全大写、字距收紧；荧光绿只给主按钮、进度和关键数字；配速、心率、卡路里这类数字做得很大（等宽数字）；可以用斜切的色块（transform: skewX(-8deg)）；照片高对比、有动感；橙色只做警示和次要强调',
+        nen: 'Heavy italic, all-caps, tightly tracked headings; volt green only on the main button, progress and key numbers; big tabular numbers for pace, heart rate and calories; slanted blocks (transform: skewX(-8deg)) are fine; high-contrast action photos; orange only for alerts and secondary emphasis' },
     ]
 
+    /** 样板上各风格的招牌细节（卡片、按钮、标题、配图块），没写的按 STYLES 里的圆角阴影来 */
+    const LOOK = {
+      minimal: { card: { boxShadow: '0 1px 2px rgba(24,24,27,.06), inset 0 0 0 1px #E4E4E7' }, img: 'linear-gradient(135deg, #E9EEF8, #C7D6F5)' },
+      warm: { img: 'linear-gradient(135deg, #E7B08A, #A9542A)' },
+      editorial: { card: { background: 'transparent', boxShadow: 'inset 0 3px 0 #111111', borderRadius: 0 }, head: { letterSpacing: '-0.02em' }, img: '#C8231B' },
+      dark: { head: { letterSpacing: '.04em' }, img: 'linear-gradient(135deg, #2A2620, #C9A86A)' },
+      playful: { card: { border: '2px solid #1D1B3A' }, btn: { border: '2px solid #1D1B3A', boxShadow: '3px 3px 0 #1D1B3A' }, img: '#1F9E92' },
+      fresh: { card: { boxShadow: '0 6px 18px rgba(47,125,79,.10), inset 0 0 0 1px #DCE6DA' }, img: 'linear-gradient(135deg, #CFE6C9, #7DB08B)' },
+      tech: { card: { boxShadow: '0 1px 3px rgba(15,23,42,.08), inset 0 0 0 1px #E2E8F0' }, img: 'linear-gradient(135deg, #DCE6FF, #2457F5)' },
+      glass: { card: { background: 'rgba(255,255,255,.55)', backdropFilter: 'blur(14px)', boxShadow: '0 10px 30px rgba(16,21,28,.10), inset 0 0 0 1px rgba(255,255,255,.85)' }, img: 'linear-gradient(135deg, #FFD9C7, #C9E2FF)' },
+      soft: { btn: { boxShadow: '4px 4px 10px #C8CED6, -4px -4px 10px #FFFFFF' }, img: 'linear-gradient(135deg, #DDE2EA, #F4F6F9)' },
+      guochao: { card: { boxShadow: 'inset 0 0 0 1px #C8952E, 0 6px 18px rgba(140,30,20,.12)' } },
+      ink: { head: { letterSpacing: '.12em' }, img: 'radial-gradient(ellipse at 35% 65%, rgba(30,30,28,.55), transparent 62%), #ECE7DD' },
+      cyber: { card: { boxShadow: 'inset 0 0 0 1px #2E2B52' }, head: { textTransform: 'uppercase', letterSpacing: '.04em' } },
+      cute: { btn: { boxShadow: '0 4px 0 #E0628E' }, img: 'linear-gradient(135deg, #FFD3E2, #FFC93C)' },
+      retro: { card: { border: '2px solid #2E1F14' }, btn: { boxShadow: '0 3px 0 #2E1F14' }, img: 'linear-gradient(180deg, #B5471D 0 33%, #E0A526 33% 66%, #2F5D50 66%)' },
+      sale: { img: 'linear-gradient(135deg, #FF8A3D, #CF2E0E)' },
+      japandi: { card: { boxShadow: 'inset 0 0 0 1px #DDD5C8' }, img: 'linear-gradient(160deg, #DCD1BF, #B6A58C)' },
+      swiss: { card: { boxShadow: 'none' }, head: { letterSpacing: '-0.03em' }, img: '#D9001B' },
+      brutal: { card: { border: '3px solid #000000' }, btn: { border: '3px solid #000000', boxShadow: '3px 3px 0 #000000' }, img: '#FF5C39' },
+      cream: { img: 'linear-gradient(135deg, #F3E3CF, #E7C9A6)' },
+      sport: { head: { fontStyle: 'italic', textTransform: 'uppercase', letterSpacing: '-0.01em' }, btn: { transform: 'skewX(-8deg)' }, img: 'linear-gradient(115deg, #C8FF2E 0 42%, #2B2E35 42%)' },
+    }
+
+    /** 一个风格在样板上的样子：卡片、主按钮、标题字、配图块、小标签 */
+    function styleLook(x) {
+      const c = x.c
+      const o = LOOK[x.id] || {}
+      // 小标签是 9.5px 的小字，要 4.5:1：点缀色在卡片和底色上都够就描边写点缀色，色块上正文色够就做色块，都不行用主色
+      const chip = Math.min(hexRatio(c.accent, c.surface), hexRatio(c.accent, c.bg)) >= 4.5 ? { color: c.accent, boxShadow: `inset 0 0 0 1px ${c.accent}` }
+        : hexRatio(c.text, c.accent) >= 4.5 ? { background: c.accent, color: c.text } : { background: c.primary, color: c.on }
+      return {
+        card: { background: c.surface, borderRadius: x.radius, boxShadow: x.shadow === 'none' ? `inset 0 0 0 1px ${c.line}` : x.shadow, ...o.card },
+        btn: { background: c.primary, color: c.on, borderRadius: Math.min(x.radius, 14), ...o.btn },
+        head: { fontFamily: x.head, fontWeight: x.w, ...o.head },
+        img: o.img || `linear-gradient(135deg, ${c.primary}, ${c.accent})`,
+        // 进度条底：分隔线是黑的（杂志、瑞士、粗野）就换成淡一点的正文色，不然和黑色主色分不开
+        track: c.line === c.text || c.line === c.primary ? `color-mix(in srgb, ${c.text} 14%, ${c.surface})` : c.line,
+        chip,
+      }
+    }
+
     /** 两个 #RRGGBB 的对比度（WCAG） */
     function hexRatio(a, b) {
       const l = (hex) => { const v = hex.slice(1).match(/../g).map((x) => parseInt(x, 16) / 255).map((c) => (c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)); return 0.2126 * v[0] + 0.7152 * v[1] + 0.0722 * v[2] }
@@ -1538,6 +1707,8 @@ window.__ModuleLoader__.load({
         otherText: String(it.otherText || '').slice(0, 20),
         edgeName: edge ? t('ckEdge_' + edge) : '',
         when: edge ? t('ckWhen_' + edge) : '',
+        osName: it.type === 'winctl' ? t('ckOs_' + (it.os === 'win' ? 'win' : 'mac')) : '',
+        zone: it.type === 'winctl' ? t('ckZone_' + (it.os === 'win' ? 'win' : 'mac')) : '',
         what: it.type === 'missing' ? t('ckWhat_' + (['css', 'script', 'font'].includes(it.what) ? it.what : 'other')) : '',
         at: it.type === 'jserr' && it.src ? ` (${it.src}${it.line ? ':' + it.line : ''})` : '',
       })
@@ -1597,9 +1768,9 @@ window.__ModuleLoader__.load({
 
     // ── 导出图片：设备外框、整套展示图 ───────────────────────────────────────
 
-    const SHOW_COLS = { app: 4, miniprogram: 4, tablet: 3, web: 2, poster: 3, slides: 2, email: 3 }
+    const SHOW_COLS = { app: 4, miniprogram: 4, tablet: 3, desktop: 2, web: 2, poster: 3, slides: 2, email: 3 }
     const CANVAS_FONT = '-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif'
-    const FRAMED = { app: 1, miniprogram: 1, tablet: 1, web: 1 }
+    const FRAMED = { app: 1, miniprogram: 1, tablet: 1, desktop: 1, web: 1 }
 
     function loadImg(blob) {
       return new Promise((resolve, reject) => {
@@ -1624,7 +1795,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 在 (x, y) 画一个带外框的屏：w × ht 是屏幕本身；img 按宽铺进去，高出来的裁掉 */
-    function drawDevice(ctx, kind, img, x, y, w, ht, label, capWhite) {
+    function drawDevice(ctx, kind, img, x, y, w, ht, label, capWhite, os) {
       const f = frameOf(kind, w, ht)
       const pad = f.pad || 0
       const top = f.top || 0
@@ -1684,17 +1855,58 @@ window.__ModuleLoader__.load({
       }
       // 胶囊颜色用页面截图那一刻自己量的（和画布上一致）；老页面没报就看截图
       if (f.capsule) drawCapsule(ctx, x + pad + w - CAP.right - CAP.w, y + pad + CAP.top, typeof capWhite === 'boolean' ? capWhite : !!img && capDarkOf(img, w))
+      if (f.win) {
+        rrect(ctx, x + 0.25, y + 0.25, w - 0.5, ht - 0.5, f.r)
+        ctx.strokeStyle = 'rgba(0,0,0,.28)'
+        ctx.lineWidth = 0.5
+        ctx.stroke()
+        drawWinCtl(ctx, x, y, w, os, typeof capWhite === 'boolean' ? capWhite : os === 'win' && !!img && areaDarkOf(img, w, w - WINBTN.w * 3, 0, WINBTN.w * 3, WINBTN.h))
+      }
+    }
+
+    /** 窗口按钮画到导出的图上（和画布上 WinCtl 一样） */
+    function drawWinCtl(ctx, x, y, w, os, white) {
+      ctx.save()
+      if (os === 'win') {
+        const W = WINBTN.w, H = WINBTN.h, x0 = x + w - W * 3
+        ctx.strokeStyle = white ? '#fff' : '#1f1f1f'
+        ctx.lineWidth = 1
+        ctx.beginPath()
+        ctx.moveTo(x0 + W / 2 - 5, y + H / 2 + 0.5); ctx.lineTo(x0 + W / 2 + 5, y + H / 2 + 0.5)
+        ctx.moveTo(x0 + W * 2.5 - 5, y + H / 2 - 5); ctx.lineTo(x0 + W * 2.5 + 5, y + H / 2 + 5)
+        ctx.moveTo(x0 + W * 2.5 + 5, y + H / 2 - 5); ctx.lineTo(x0 + W * 2.5 - 5, y + H / 2 + 5)
+        ctx.stroke()
+        rrect(ctx, x0 + W * 1.5 - 4.5, y + H / 2 - 4.5, 9, 9, 1)
+        ctx.stroke()
+      } else {
+        const { x: lx, y: ly, d, gap } = LIGHTS
+        ;['#FF5F57', '#FEBC2E', '#28C840'].forEach((c, i) => {
+          ctx.beginPath()
+          ctx.arc(x + lx + d / 2 + i * (d + gap), y + ly + d / 2, d / 2 - 0.25, 0, Math.PI * 2)
+          ctx.fillStyle = c
+          ctx.fill()
+          ctx.strokeStyle = 'rgba(0,0,0,.12)'
+          ctx.lineWidth = 0.5
+          ctx.stroke()
+        })
+      }
+      ctx.restore()
     }
 
     /** 截图里胶囊那块是不是深色（导出时没有页面可问，看图） */
     function capDarkOf(img, w) {
+      return areaDarkOf(img, w, w - CAP.right - CAP.w, CAP.top, CAP.w, CAP.h)
+    }
+
+    /** 截图里 (sx, sy, sw, sh) 那块（屏幕坐标）是不是深色 */
+    function areaDarkOf(img, w, sx, sy, sw, sh) {
       try {
         const k = img.width / w
         const c = document.createElement('canvas')
-        c.width = Math.max(1, Math.round(CAP.w * k))
-        c.height = Math.max(1, Math.round(CAP.h * k))
+        c.width = Math.max(1, Math.round(sw * k))
+        c.height = Math.max(1, Math.round(sh * k))
         const g = c.getContext('2d')
-        g.drawImage(img, (w - CAP.right - CAP.w) * k, CAP.top * k, CAP.w * k, CAP.h * k, 0, 0, c.width, c.height)
+        g.drawImage(img, sx * k, sy * k, sw * k, sh * k, 0, 0, c.width, c.height)
         const d = g.getImageData(0, 0, c.width, c.height).data
         let sum = 0
         for (let i = 0; i < d.length; i += 4) sum += 0.299 * d[i] + 0.587 * d[i + 1] + 0.114 * d[i + 2]
@@ -1730,7 +1942,7 @@ window.__ModuleLoader__.load({
     }
 
     /** 一屏带外框（四周留出阴影的地方，背景透明） */
-    async function composeOne(kind, size, img, label, top) {
+    async function composeOne(kind, size, img, label, top, os) {
       const [w, ht] = size
       const [W, H] = frameSize(kind, w, ht)
       const m = 56
@@ -1740,7 +1952,7 @@ window.__ModuleLoader__.load({
       c.height = Math.round((H + m * 2) * S)
       const ctx = c.getContext('2d')
       ctx.scale(S, S)
-      drawDevice(ctx, kind, img, m, m, w, ht, label, top)
+      drawDevice(ctx, kind, img, m, m, w, ht, label, top, os)
       return canvasBlob(c)
     }
 
@@ -1894,7 +2106,7 @@ window.__ModuleLoader__.load({
      * 整套展示图：几屏带外框排成网格，上面是品牌名和一行说明，铺一层底色 + 点缀色的光晕。
      * shots: [{ img, label }]
      */
-    async function composeShowcase({ kind, size, shots, title, sub, bg, accent, mark }) {
+    async function composeShowcase({ kind, size, shots, title, sub, bg, accent, mark, os }) {
       const [w, ht] = size
       const [DW, DH] = frameSize(kind, w, ht)
       const u = Math.max(1, Math.min(2, DW / 430))
@@ -1955,7 +2167,7 @@ window.__ModuleLoader__.load({
         const off = ((cols - inRow) * (DW + gap)) / 2 // 最后一行不满就居中
         const x = pad + off + col * (DW + gap)
         const yy = y + row * (DH + labH + gap * 0.6)
-        drawDevice(ctx, kind, s.img, x, yy, w, ht, s.label, s.top)
+        drawDevice(ctx, kind, s.img, x, yy, w, ht, s.label, s.top, os)
         ctx.fillStyle = muted
         ctx.font = `500 ${16 * u}px ${CANVAS_FONT}`
         ctx.textAlign = 'center'
@@ -2032,17 +2244,18 @@ window.__ModuleLoader__.load({
 
     // ── 设计类型：画幅和外框 ─────────────────────────────────────────────────
 
-    const KIND_LIST = ['web', 'app', 'miniprogram', 'tablet', 'poster', 'slides', 'email']
-    const KIND_KEY = { web: 'kindWeb', app: 'kindApp', miniprogram: 'kindMini', tablet: 'kindTablet', poster: 'kindPoster', slides: 'kindSlides', email: 'kindEmail' }
+    const KIND_LIST = ['web', 'app', 'miniprogram', 'tablet', 'desktop', 'poster', 'slides', 'email']
+    const KIND_KEY = { web: 'kindWeb', app: 'kindApp', miniprogram: 'kindMini', tablet: 'kindTablet', desktop: 'kindDesktop', poster: 'kindPoster', slides: 'kindSlides', email: 'kindEmail' }
     const GHOST_MS = 90000 // 这么久没出新屏就撤掉「生成中…」占位
     const EDIT_GRACE_MS = 3000 // 退出改字后这么久里，页面交上来的最后一处改动还收
-    const KIND_SIZE = { web: [1280, 800], app: [390, 844], miniprogram: [375, 812], tablet: [820, 1180], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
-    // 外框：pad 边框厚度、top 顶上一条（浏览器栏）、r 外圆角、ir 屏幕圆角、island 灵动岛离顶的距离、capsule 小程序右上角的胶囊
+    const KIND_SIZE = { web: [1280, 800], app: [390, 844], miniprogram: [375, 812], tablet: [820, 1180], desktop: [1280, 800], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
+    // 外框：pad 边框厚度、top 顶上一条（浏览器栏）、r 外圆角、ir 屏幕圆角、island 灵动岛离顶的距离、capsule 小程序右上角的胶囊、win 桌面软件的窗口按钮
     const FRAME = {
       web: { pad: 0, top: 34, r: 10, ir: 0 },
       app: { pad: 11, top: 0, r: 55, ir: 44, island: 11 },
       miniprogram: { pad: 11, top: 0, r: 55, ir: 44, island: 11, capsule: 1 },
       tablet: { pad: 14, top: 0, r: 34, ir: 21 },
+      desktop: { pad: 0, top: 0, r: 12, ir: 12, win: 1 },
       poster: { pad: 0, top: 0, r: 6, ir: 6 },
       slides: { pad: 0, top: 0, r: 8, ir: 8 },
       email: { pad: 0, top: 0, r: 10, ir: 10 },
@@ -2055,15 +2268,19 @@ window.__ModuleLoader__.load({
     }
     // 小程序胶囊：离屏幕顶 48（状态栏 44 + 4）、离右边 7、87×32（和页面体检 picker.js 的 CAP 一样）
     const CAP = { top: 48, right: 7, w: 87, h: 32 }
-    const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram', pad: 'tablet', ipad: 'tablet', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
+    // 桌面软件的窗口按钮（和 picker.js 的一样）：Mac 红绿灯在左上 x 20、y 20 起，三个 12px 圆点隔 8；Windows 最小化 / 最大化 / 关闭在右上角，各 46×32
+    const LIGHTS = { x: 20, y: 20, d: 12, gap: 8 }
+    const WINBTN = { w: 46, h: 32 }
+    const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram', pad: 'tablet', ipad: 'tablet', pc: 'desktop', electron: 'desktop', tauri: 'desktop', mac: 'desktop', macos: 'desktop', windows: 'desktop', win: 'desktop', 桌面: 'desktop', 桌面软件: 'desktop', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
 
-    /** 页面里 <meta name="dsh-design" content="app"> / "poster 1080x1920" → { kind, size } */
+    /** 页面里 <meta name="dsh-design" content="app"> / "poster 1080x1920" / "desktop windows" → { kind, size, os }（os：win，不写是 Mac） */
     function parseMeta(content) {
-      const out = { kind: '', size: '' }
+      const out = { kind: '', size: '', os: '' }
       for (const w of String(content || '').toLowerCase().split(/[\s,;]+/)) {
         if (!out.kind && (KIND_LIST.includes(w) || META_ALIAS[w])) out.kind = KIND_LIST.includes(w) ? w : META_ALIAS[w]
         const m = /^(\d{2,5})[x×*](\d{2,5})$/.exec(w)
         if (!out.size && m) out.size = `${m[1]}x${m[2]}`
+        if (!out.os && /^(windows|win|win10|win11)$/.test(w)) out.os = 'win'
       }
       return out
     }
@@ -2133,6 +2350,7 @@ window.__ModuleLoader__.load({
       app: [['szSmall', 'app', [375, 667]], ['szStd', 'app', [393, 852]], ['szLarge', 'app', [430, 932]]],
       miniprogram: [['szSmall', 'miniprogram', [375, 667]], ['szStd', 'miniprogram', [375, 812]], ['szLarge', 'miniprogram', [414, 896]]],
       tablet: [['szSmall', 'tablet', [744, 1133]], ['szStd', 'tablet', [820, 1180]], ['szLarge', 'tablet', [1032, 1376]]],
+      desktop: [['szSmall', 'desktop', [1024, 680]], ['szStd', 'desktop', [1280, 800]], ['szLarge', 'desktop', [1440, 900]]],
     }
 
     /** 大小不一的几块排成一行（顶端对齐），算出整块大小和放得下的缩放 */
@@ -2526,7 +2744,7 @@ window.__ModuleLoader__.load({
      * 外框：网页是浏览器窗口，App / 平板是带圆角边框的设备（App 还有灵动岛，小程序再加右上角的胶囊），海报 / 幻灯片 / 邮件是一张卡片。
      * fill = 铺满舞台（单页看网页）。不管哪种，里面那屏都在同一个位置（换类型不重载页面）。top：页面顶栏右边是深色（胶囊画白的）
      */
-    function Device({ kind, w, h: ht, fill, label, top, children }) {
+    function Device({ kind, w, h: ht, fill, label, top, os, children }) {
       const f = fill ? { pad: 0, top: 0, r: 0, ir: 0 } : frameOf(kind, w, ht)
       return h('div', {
         className: `ddp-dev k-${kind}` + (fill ? ' fill' : ''),
@@ -2535,7 +2753,22 @@ window.__ModuleLoader__.load({
       h('div', { className: 'ddp-chrome', style: { display: f.top ? 'flex' : 'none', height: f.top } }, h('i'), h('i'), h('i'), h('span', null, label || '')),
       h('div', { className: 'ddp-vp', style: fill ? { inset: 0 } : { left: f.pad, top: f.pad + f.top, width: w, height: ht, borderRadius: f.ir } }, children),
       h('div', { className: 'ddp-island', style: { display: f.island ? 'block' : 'none', top: (f.pad || 0) + (f.island || 0) } }),
-      f.capsule ? h(Capsule, { white: !!top, style: { top: (f.pad || 0) + CAP.top, right: (f.pad || 0) + CAP.right } }) : null)
+      f.capsule ? h(Capsule, { white: !!top, style: { top: (f.pad || 0) + CAP.top, right: (f.pad || 0) + CAP.right } }) : null,
+      f.win ? h(WinCtl, { os, white: !!top }) : null)
+    }
+
+    /** 桌面软件的窗口按钮：Mac 左上角红绿灯，Windows 右上角最小化 / 最大化 / 关闭（顶栏深色时画白的） */
+    function WinCtl({ os, white }) {
+      if (os === 'win') {
+        const W = WINBTN.w, H = WINBTN.h
+        return h('svg', { className: 'ddp-win' + (white ? ' w' : ''), style: { top: 0, right: 0, width: W * 3, height: H }, viewBox: `0 0 ${W * 3} ${H}`, 'aria-hidden': true },
+          h('path', { className: 'x', d: `M${W / 2 - 5} ${H / 2 + 0.5}h10` }),
+          h('rect', { className: 'x', x: W * 1.5 - 4.5, y: H / 2 - 4.5, width: 9, height: 9, rx: 1 }),
+          h('path', { className: 'x', d: `M${W * 2.5 - 5} ${H / 2 - 5}l10 10M${W * 2.5 + 5} ${H / 2 - 5}l-10 10` }))
+      }
+      const { x, y, d, gap } = LIGHTS
+      return h('svg', { className: 'ddp-win', style: { left: x, top: y, width: d * 3 + gap * 2, height: d }, viewBox: `0 0 ${d * 3 + gap * 2} ${d}`, 'aria-hidden': true },
+        ['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => h('circle', { key: i, cx: d / 2 + i * (d + gap), cy: d / 2, r: d / 2 - 0.25, fill: c, stroke: 'rgba(0,0,0,.12)', strokeWidth: 0.5 })))
     }
 
     function Capsule({ white, style }) {
@@ -3059,17 +3292,71 @@ window.__ModuleLoader__.load({
           h('button', { className: 'go', onClick: onSave, disabled: !n || !write.ok, title: write.tip }, h('span', null, t('styleSave')))))
     }
 
-    /** 一排风格卡：每张是个小样（底色、标题字、卡片、主色按钮），点了交给 onPick */
+    /** 风格样板：用这个风格画的一小屏（顶栏、标题、按钮、商品卡、数据卡）；卡片上缩小着放，点开是原大 */
+    function StyleSample({ t, x }) {
+      const c = x.c
+      const L = styleLook(x)
+      const muted = { color: c.muted }
+      return h('div', { className: 'ddp-sam', style: { background: c.bg, backgroundImage: x.bgImage || 'none', color: c.text, fontFamily: SANS } },
+        h('div', { className: 'top' },
+          h('i', { className: 'lg', style: { background: c.primary, borderRadius: Math.min(x.radius, 5) } }),
+          h('b', { style: L.head }, t('samBrand')),
+          h('span', { className: 'nv', style: muted }, t('samNav')),
+          h('i', { className: 'av', style: { background: L.img } })),
+        h('h5', { style: L.head }, t('samHead')),
+        h('p', { style: muted }, t('samSub')),
+        h('div', { className: 'acts' }, h('span', { className: 'bt', style: L.btn }, t('samGo')), h('span', { style: { color: c.link } }, t('samMore'))),
+        h('div', { className: 'cards' },
+          h('div', { className: 'cd', style: L.card },
+            h('i', { className: 'im', style: { background: L.img, borderRadius: Math.max(0, x.radius - 6) } }),
+            h('b', null, t('samItem')),
+            h('span', { style: muted }, t('samMeta')),
+            h('div', { className: 'pr' }, h('b', { style: { fontFamily: x.head } }, t('samPrice')), h('span', { className: 'chip', style: L.chip }, t('samTag')))),
+          h('div', { className: 'cd', style: L.card },
+            h('span', { style: muted }, t('samStat')),
+            h('b', { className: 'num', style: L.head }, '86%'),
+            h('i', { className: 'bar', style: { background: L.track } }, h('i', { style: { background: c.primary } })),
+            h('span', { style: muted }, t('samStatMeta')))))
+    }
+
+    /** 一排风格卡：每张是缩小的样板；点一张看原大样板（左右翻），「用这个风格」才交给 onPick */
     function StyleCards({ t, onPick }) {
       const en = t('lang') === 'en'
-      return h('div', { className: 'ddp-styles' }, ...STYLES.map((x) => h('button', { key: x.id, className: 'ddp-sc', title: en ? x.den : x.dzh, onClick: () => onPick(x) },
-        h('span', { className: 'pv', style: { background: x.c.bg, backgroundImage: x.bgImage || 'none', color: x.c.text } },
-          h('b', { style: { fontFamily: x.head, fontWeight: x.w } }, en ? 'Aa' : '字'),
-          h('i', { className: 'bt', style: { background: x.c.primary, borderRadius: Math.min(x.radius, 6), boxShadow: x.id === 'playful' ? `1.5px 1.5px 0 ${x.c.line}` : x.id === 'cyber' ? `0 0 6px ${x.c.primary}` : x.id === 'retro' ? `0 1.5px 0 ${x.c.text}` : 'none', outline: x.id === 'playful' ? `1px solid ${x.c.line}` : 'none' } }),
-          h('i', { className: 'cd', style: { background: x.id === 'glass' ? 'rgba(255,255,255,.6)' : x.c.surface, borderRadius: Math.min(x.radius, 8) / 2 + 2,
-            boxShadow: x.id === 'soft' ? '2px 2px 5px #C8CED6, -2px -2px 5px #FFFFFF' : x.id === 'playful' ? `2px 2px 0 ${x.c.line}` : x.id === 'editorial' ? `inset 0 1px 0 ${x.c.line}`
-              : x.id === 'guochao' ? `inset 0 0 0 1px ${x.c.accent}` : x.id === 'retro' ? `0 2px 0 ${x.c.text}` : `0 0 0 .5px ${x.c.line}` } },
-            h('i', { className: 'ln', style: { background: x.c.text } }), h('i', { className: 'ln s', style: { background: x.c.muted } }))),
+      const [on, setOn] = useState(-1) // 正在看样板的那个；-1 是看全部
+      const was = useRef(-1)
+      const box = useRef(null)
+      useEffect(() => {
+        // 进样板：焦点给「用这个风格」；回全部：焦点回到刚才那张卡
+        const el = box.current
+        if (!el) return
+        const f = on >= 0 ? el.querySelector('.ddp-go') : was.current >= 0 ? el.querySelectorAll('.ddp-sc')[was.current] : null
+        if (f) f.focus({ preventScroll: true })
+        // 列表和样板高矮不一样，外面滚动的位置会变：把样板 / 刚才那张卡滚进来
+        if (was.current >= 0 || on >= 0) (on >= 0 ? el : f || el).scrollIntoView({ block: 'nearest' })
+        if (on >= 0) was.current = on
+      }, [on])
+      const n = STYLES.length
+      if (on >= 0) {
+        const x = STYLES[on]
+        const go = (d) => setOn((on + d + n) % n)
+        const onKey = (e) => {
+          if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') { e.preventDefault(); go(e.key === 'ArrowLeft' ? -1 : 1) } else if (e.key === 'Escape') { e.stopPropagation(); setOn(-1) }
+        }
+        return h('div', { className: 'ddp-samview', ref: box, onKeyDown: onKey },
+          h('button', { className: 'ddp-btn all', onClick: () => setOn(-1) }, h(I.back), h('span', null, t('stylesAll'))),
+          h(StyleSample, { key: x.id, t, x }),
+          h('div', { className: 'meta' },
+            h('b', null, en ? x.en : x.zh),
+            h('span', { className: 'sw' }, ...['bg', 'surface', 'text', 'primary', 'accent'].map((k) => h('i', { key: k, title: x.c[k], style: { background: x.c[k] } }))),
+            h('p', null, en ? x.den : x.dzh)),
+          h('div', { className: 'row' },
+            h('button', { className: 'ddp-btn', title: t('stylePrev'), onClick: () => go(-1) }, h(I.back)),
+            h('em', null, `${on + 1} / ${n}`),
+            h('button', { className: 'ddp-btn nx', title: t('styleNext'), onClick: () => go(1) }, h(I.back)),
+            h('button', { className: 'ddp-go', onClick: () => onPick(x) }, t('styleUse'))))
+      }
+      return h('div', { className: 'ddp-styles', ref: box }, ...STYLES.map((x, i) => h('button', { key: x.id, className: 'ddp-sc', title: en ? x.den : x.dzh, onClick: () => setOn(i) },
+        h('span', { className: 'pv', 'aria-hidden': 'true' }, h(StyleSample, { t, x })),
         h('span', { className: 'nm' }, en ? x.en : x.zh))))
     }
 
@@ -3958,7 +4245,7 @@ window.__ModuleLoader__.load({
         else change({ view: 'single' })
       }
 
-      const renderScreen = (sc, z, fill) => h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(sc), top: tops[ik(sc)] },
+      const renderScreen = (sc, z, fill) => h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(sc), top: tops[ik(sc)], os: meta.os },
         h(Screen, { t, remote,
           src: sc.url,
           label: labelOf(sc),
@@ -4058,6 +4345,7 @@ window.__ModuleLoader__.load({
               kind,
               size,
               shots: shots.map((x, i) => ({ img: x.img, top: x.top, label: sp.labels[i] || x.title })),
+              os: meta.os,
               title: sp.brand || (st && st.target && st.target.kind === 'file' ? String(st.target.file).split(/[\\/]/).slice(-2, -1)[0] : st.label) || '',
               sub: t('showSub', { n: shots.length, kind: t(KIND_KEY[kind]), date: ymd(new Date()) }),
               bg: colors.bg,
@@ -4072,7 +4360,7 @@ window.__ModuleLoader__.load({
           if (!sc) throw new Error('no screen')
           const base = prefix + sc.key.replace(/\.html?$/i, '') + suffix
           const { img, top } = await captureOf(sc, mode === 'long')
-          if (mode === 'frame') await saveImage(base, await composeOne(kind, size, img, labelOf(sc), top))
+          if (mode === 'frame') await saveImage(base, await composeOne(kind, size, img, labelOf(sc), top, meta.os))
           else {
             const c = document.createElement('canvas')
             c.width = img.width
@@ -4446,7 +4734,7 @@ window.__ModuleLoader__.load({
           return h('div', { key: l.id, className: cls },
             h('div', { className: 'ddp-single' },
               h('div', { className: 'ddp-fit' + (fill ? ' fill' : ''), style: fill ? undefined : { width: dw, height: dh, transform: `translate(-50%, -50%) scale(${z})` } },
-                h(Device, { kind, w: size[0], h: size[1], fill, label, top: tops[l.key] },
+                h(Device, { kind, w: size[0], h: size[1], fill, label, top: tops[l.key], os: meta.os },
                   h(Screen, { t, remote,
                     src: urlOfKey(l.key),
                     label,
@@ -4482,7 +4770,7 @@ window.__ModuleLoader__.load({
           picking: picking || textEdit,
           sel: '',
           labelOf: (sc) => sc.label,
-          render: (sc, z, i) => h(Device, { kind: items[i].kind, w: items[i].size[0], h: items[i].size[1], label: labelOf(base), top: tops[ik(base) + '|' + i] },
+          render: (sc, z, i) => h(Device, { kind: items[i].kind, w: items[i].size[0], h: items[i].size[1], label: labelOf(base), top: tops[ik(base) + '|' + i], os: meta.os },
             h(Screen, { t, remote,
               src: base.url,
               label: labelOf(base),
@@ -4519,7 +4807,7 @@ window.__ModuleLoader__.load({
         body = h('div', { className: 'ddp-single' },
           h('div', { className: 'ddp-fit' + (fill ? ' fill' : ''), style: fill ? undefined : { width: dw, height: dh, transform: `translate(-50%, -50%) scale(${z})` } },
             // 胶囊那块露的是哪一边（把手拖过胶囊中间就是左边那一版），胶囊就跟哪一边的顶栏
-            now ? h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(now), top: tops[ik(has && (cx / 100) * size[0] > size[0] - CAP.right - CAP.w / 2 ? old : now)] },
+            now ? h(Device, { kind, w: size[0], h: size[1], fill, label: labelOf(now), top: tops[ik(has && (cx / 100) * size[0] > size[0] - CAP.right - CAP.w / 2 ? old : now)], os: meta.os },
               h('div', { className: 'ddp-cmp' + (cmpDrag ? ' drag' : ''), ref: cmpRef },
                 h('div', { className: 'ly' }, has ? screenOf(old) : h('div', { className: 'miss' }, t('notInVer', { n: ver.n }))),
                 // 右边一层只露出把手右边那块：外层裁宽度，里面整屏往左挪（iframe 不变大小、不重排；clip-path 盖 iframe 有的内核画不出来）
@@ -4688,7 +4976,7 @@ window.__ModuleLoader__.load({
     // 注意：这里是客户端**服务名**（短的），不是包名
     exports.inject = INJECT
     // 测试用
-    exports._test = { STYLES, formatStyle, accentUse, padInsert, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, flowMarks, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
+    exports._test = { STYLES, formatStyle, accentUse, styleLook, padInsert, pageOf, pxOf, styleChanges, formatStyleAsk, takesOf, formatCheckTool, poller, frameOf, paletteOf, formatRef, layoutRow, keyOfPath, flowsOf, flowLines, flowMarks, formatPick, whereOf, parseMeta, sizeOf, layoutGrid, fitCam, tokenKind, formatToken, splitTitles, pickColors, hhmm }
     return module.exports
   },
 })