/*
 * 模块价值：把业务要素及执行组件以默认左侧目录带入独立画布，减少只靠命名创建的负担。
 * 职责：拥有四列组件网格、整卡拖入提示、分段/搜索/分组与独立预览，统一深浅主题和状态。
 * 输入：views.mjs 的组件目录 HTML；输出：继承深浅主题的画布局部面板。
 * 依赖：tokens.css 的语义颜色与 pages.css 的画布/控件；须在 pages.css 后加载。
 * 副作用：只在 .canvas-page 内覆盖组件库样式，不改变画布坐标、缩放、连线或对象事实。
 * 限制：保留268px库宽及现有命中结构；名称最多显示两行，完整名称保留原提示与可访问名称。
 * 桌面独立占列，窄屏抽屉只覆盖画布行并以滚动尾距避让工具；详情保持可滚动/点击，不改变草稿和确认。
 */
.canvas-page .canvas-workspace { position: relative; }
/* 面板保持全高，避免底部露出画布底纹。只有工具与库横向重叠时，才增加滚动尾距。
 * 尾距不裁小滚动视口，末项可滚到工具上方；库与工具的层级继续独立。 */
.canvas-library {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--canvas-library-width, 268px);
  max-width: calc(100% - 36px);
  z-index: 6;
  padding: 10px 12px calc(20px + var(--canvas-library-reserved, 0px));
  border-right: 1px solid var(--line);
  background: var(--surface);
  overflow: auto;
  scroll-padding: 6px 6px calc(6px + var(--canvas-library-reserved, 0px));
  overscroll-behavior: contain;
}
.library-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; margin-bottom: 10px; }
.library-heading h2 { font-size: 1rem; font-weight: 650; letter-spacing: -.015em; }
.library-heading .button { min-height: 44px; width: 44px; padding: 10px; border-color: transparent; color: var(--muted); background: transparent; }
.library-heading .button:hover { background: var(--paper); color: var(--ink); }
.library-heading svg { width: 16px; height: 16px; }
.library-search { display: flex; align-items: center; gap: 8px; padding-left: 12px; background: var(--surface); border: 1px solid var(--control-line); border-radius: 8px; color: var(--muted); }
.library-search svg { width: 16px; height: 16px; flex: none; }
.library-search input { flex: 1; width: 100%; min-width: 0; min-height: 44px; border: 0; background: transparent; padding: 10px 10px 10px 0; font-size: .87rem; }
.library-search:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }
.library-search input:focus-visible { outline: none; }
.library-note { color: var(--muted); font-size: .8rem; margin: 8px 0 10px; }
.library-group + .library-group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.library-section-heading { min-height: 44px; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--ink); font-weight: 600; font-size: .8rem; line-height: 1.5; }
.library-section-heading .count-badge { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.library-items { display: grid; gap: var(--space-1); padding-bottom: var(--space-3); }
.library-item { min-height: 56px; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--space-2) var(--space-1); border: 1px solid transparent; border-radius: 8px; background: transparent; text-align: left; transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; }
.library-item:hover { background: var(--soft); border-color: var(--line); }
/* 整卡、图标/文字及预览区共用拖动提示；轻点和键盘仍走原添加/预览，不因文本选择丢手势。 */
.library-entry[data-library-drag-key] { cursor:grab; user-select:none; }
.library-entry[data-library-drag-key] .library-item,.library-entry[data-library-drag-key] .library-preview-button { cursor:grab; }
.library-entry[data-library-drag-key]:active,.library-entry[data-library-drag-key]:active .library-item,.library-entry[data-library-drag-key]:active .library-preview-button { cursor:grabbing; }
.library-item > svg { margin-top: 2px; color: var(--accent); width: 19px; height: 19px; }
.library-item-copy { min-width: 0; }
.library-item-copy strong { display: block; font-size: .8rem; font-weight: 550; line-height: 1.6; }
.library-item-copy small { display: block; font-size: .75rem; margin-top: 2px; white-space: normal; overflow-wrap: anywhere; }
.library-item-kind { color: var(--muted); font-size: .73rem; padding-top: 3px; max-width: 4em; text-align: right; line-height: 1.6; }
.library-groups .empty-note { padding: 16px 0 24px; color: var(--muted); font-size: .83rem; }
.library-custom { border-top: 1px solid var(--line); }
.library-custom > summary { min-height: 46px; padding: 13px 0; cursor: pointer; color: var(--muted); font-size: .82rem; }
.canvas-library .library-custom-form { display: grid; grid-template-columns: 1fr; padding: 4px 0 8px; border-bottom: 0; gap: 8px; }
.library-custom-form label { display: block; font-size: .77rem; margin-top: var(--space-2); }
.library-custom-form input,
.library-custom-form select { width: 100%; flex: none; font-size: .83rem; }
.library-custom-form .button { margin-top: var(--space-2); font-size: .8rem; }
@media (max-width: 720px) {
  .canvas-library { width: var(--canvas-library-width, 268px); }
  .library-item { min-height: 56px; }
  .library-heading h2 { font-size: 1rem; }
}

/* 分段控件用面区分当前模式，强调色只用于交互，不给所有条目铺设同一底色。 */
.library-modes { display: flex; gap: 4px; padding: 3px; margin: 0 0 12px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; }
.library-modes button { flex: 1; min-width: 0; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 500; transition: background-color 160ms ease-out, color 160ms ease-out; }
.library-modes button:hover { color: var(--ink); }
.library-modes button[aria-pressed="true"] { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 650; }
.library-groups { margin-top: 12px; }

/* 精细指针只收紧自定义表单的辅助行；图标与展开入口始终保留44px以上目标。 */
@media (pointer:fine) and (min-width:721px) {
  .library-custom > summary { min-height:32px; padding-block:var(--space-1); }
}


/* 目录按真实内容增高；焦点环画在条目内部，滚动边缘和底部工具不会截掉操作位置。 */
.library-heading,.library-heading h2,.library-item,.library-item-kind { min-width: 0; overflow-wrap: anywhere; }
.library-item-copy strong { overflow-wrap: anywhere; }
.library-item:focus-visible,.library-expand:focus-visible,.library-custom > summary:focus-visible,.library-modes button:focus-visible { outline-offset: -3px; }
.library-custom-form label { font-size: .8rem; }

/* 桌面库占据左列，不覆盖流程；内容仍独立滚动，固定宽度沿用现有组件库。 */
@media (min-width:851px) {
  .canvas-library { position:relative; inset:auto; flex:0 0 var(--canvas-library-width,268px); width:var(--canvas-library-width,268px); max-width:none; height:100%; --canvas-library-reserved:0px; }
}
/* 窄屏详情移到画布下方；库只覆盖第一行画布，不能覆盖详情并截住其滚轮/放弃按钮。
 * 绝对定位子项以明确的 grid-area 为包含块；第二行按详情内容增高，由页面正常滚动触达。 */
@media (max-width:850px) {
  .canvas-page .canvas-workspace { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(320px,1fr) auto; }
  .canvas-library { grid-area:1 / 1 / 2 / 2; --canvas-library-reserved:var(--canvas-tool-reserved); }
}

/* 1.5.2结构预览为独立操作，原添加按钮和参数表单保留；计数来自真实实例化。 */
.library-entry{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:stretch;gap:0;border:1px solid transparent;border-radius:8px}
.library-entry:hover{background:var(--soft);border-color:var(--line)}
.library-entry .library-item{width:100%;grid-template-columns:20px minmax(0,1fr);border:0}
.library-entry .library-item:hover{border:0}
.library-entry .library-structure{font-size:10px;line-height:1.5;color:var(--muted)}
/* 四列网格给名称与图形留出独立空间；常用九项与展开入口的内容合同保持不变。
 * 默认无卡片底色，悬停或键盘焦点才建立轻工作面，避免所有组件同时争夺注意力。 */
.library-items.library-common{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-bottom:4px}
.library-common .library-tile{display:block;background:transparent;border-color:transparent;overflow:hidden;transition:background-color 160ms ease-out,border-color 160ms ease-out}
.library-common .library-tile:hover{border-color:var(--line);background:var(--paper)}
.library-common .library-tile:focus-within{border-color:var(--focus);background:var(--paper)}
.library-common .library-tile .library-item{min-height:72px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:8px 3px;color:var(--ink);background:transparent}
.library-common .library-tile .library-item:hover{color:var(--accent);background:transparent}
.library-common .library-tile .library-item:active{background:var(--soft);color:var(--accent)}
.library-common .library-tile .library-item>svg{width:24px;height:24px;margin:0;flex:none;color:inherit}
.library-tile-name{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:.8rem;line-height:16px;font-weight:450;text-align:center}
/* 业务组件的图标逐项区分；名称容纳两行，展开只增加图标数量，预览保留独立点击目标。
 * 这些覆盖限定is-component，不改变场景和流程原有的小图标/详细列表。 */
.library-common .library-tile.is-component .library-item{min-height:80px}
.library-tile.is-component .library-tile-name{white-space:normal;overflow-wrap:anywhere;line-height:16px;height:32px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.library-tile.is-component .library-tile-preview{width:100%;min-height:44px;border-radius:0;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)}
.library-expand{min-width:0;min-height:80px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);display:grid;place-items:center;font-size:24px;line-height:1;cursor:pointer;transition:background-color 160ms ease-out,border-color 160ms ease-out}
.library-expand:hover{background:var(--soft);color:var(--accent);border-color:var(--accent)}
.library-expand.is-expanded{min-height:44px;margin:0 0 4px auto;padding:8px 12px;font-size:.78rem;border-style:solid}
.library-expand.is-inline{min-width:44px;min-height:44px;margin:0;padding:4px;border-color:transparent}
.library-preview-button{width:44px;min-height:44px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;border-radius:6px}
.library-preview-button svg{width:17px;height:17px}
.library-preview-button:hover{color:var(--accent);background:var(--paper)}
.catalog-preview{width:min(900px,calc(100vw - 32px));max-width:900px;max-height:calc(100dvh - 40px);padding:22px;border:1px solid var(--control-line);border-radius:14px;background:var(--surface);color:var(--ink);overflow:auto;overscroll-behavior:contain;box-shadow:0 18px 70px #0004}
.catalog-preview::backdrop{background:#11251db3}
.catalog-preview-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.catalog-preview-heading p{font-size:12px;color:var(--muted);margin:0 0 4px}
.catalog-preview-heading h2{font-size:20px;line-height:1.5;margin:0;overflow-wrap:anywhere}
.catalog-preview-heading .button{min-width:44px;min-height:44px;font-size:23px}
.catalog-preview-summary{font-size:13px;color:var(--accent);margin:14px 0 8px}
.catalog-preview .quiet-note{font-size:13px;line-height:1.7}
.catalog-preview-scroll{margin-block:16px;border:1px solid var(--line);border-radius:8px;overflow:auto;background:var(--canvas);max-height:420px}
.catalog-preview-diagram{display:block;width:100%;min-width:600px;min-height:220px;max-height:420px;color:var(--accent)}
.catalog-preview-edge{fill:none;stroke:var(--muted);stroke-width:2}
.catalog-preview-edge-label{font-size:13px;fill:var(--ink);paint-order:stroke;stroke:var(--canvas);stroke-width:5px}
.catalog-preview-node-title{font-size:15px;font-weight:600;fill:var(--ink)}
.catalog-preview-node-kind{font-size:10px;fill:var(--muted)}
.catalog-preview-details summary{cursor:pointer;min-height:44px;padding-block:12px;font-size:13px}
.catalog-preview-details li{margin-block:6px;font-size:13px;line-height:1.7;overflow-wrap:anywhere}
.catalog-preview-details small{color:var(--muted)}
.catalog-preview-footer{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:flex;align-items:center;gap:20px;justify-content:space-between}
.catalog-preview-footer p{max-width:520px;font-size:12px;line-height:1.7;color:var(--muted)}
.catalog-preview-footer .button{flex:none;min-height:44px}
.catalog-preview-feedback{padding:28px 0;line-height:1.8}
@media(max-width:620px){.catalog-preview{padding:16px;width:calc(100vw - 24px);max-height:calc(100dvh - 24px)}.catalog-preview-heading h2{font-size:17px}.catalog-preview-footer{align-items:stretch;flex-direction:column;gap:10px}.catalog-preview-footer .button{width:100%}.catalog-preview-diagram{min-width:650px}.library-preview-button{width:44px}.library-entry{grid-template-columns:minmax(0,1fr) 44px}}
.library-entry .library-context,.catalog-preview-context{color:var(--accent);font-size:11px;line-height:1.6}
.catalog-preview-diagram{margin-inline:auto}

/* 单节点无需流程横滚：覆盖窄屏流程最小宽度，完整轮廓按弹窗可用宽度缩放。 */
.catalog-preview-diagram.is-single{width:100%;min-width:0;max-width:360px;height:auto;min-height:0;max-height:320px}
/* 内部组件拖动预览只承载目录文案，不参与命中、焦点或业务数据。 */
.canvas-library-drag-preview{position:fixed;z-index:10000;transform:translate(-50%,-50%);padding:10px 16px;max-width:12rem;border:1px solid var(--control-line);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 8px 24px #10241922;font-size:.87rem;line-height:1.6;white-space:pre-wrap;pointer-events:none}
.is-library-pointer-dragging,.is-library-pointer-dragging *{cursor:grabbing!important}

/* 1.5.5：统一原子组件与场景的图标工作面；低对比底面聚合轮廓，名称保留两行。
 * 只调整内部视觉，不改整卡拖动命中、44px预览目标、目录key或四列布局。 */
.library-section-heading{font-size:.78rem;font-weight:650;letter-spacing:.015em}
.library-items.library-common{gap:6px 4px}
.library-common .library-tile{border-radius:10px}
.library-common .library-tile .library-item,.library-common .library-tile.is-component .library-item{min-height:88px;gap:7px;padding:9px 2px 7px}
.library-common .library-tile .library-item>svg{width:36px;height:36px;padding:6px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--accent);stroke-width:1.7}
.library-common .library-tile:hover .library-item>svg,.library-common .library-tile:focus-within .library-item>svg{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:var(--soft)}
.library-common .library-tile .library-tile-name{height:32px;white-space:normal;overflow-wrap:anywhere;font-size:.76rem;line-height:16px;font-weight:500;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.library-tile.is-component .library-tile-preview{border-top-color:transparent;background:transparent;font-size:.72rem}
.library-tile.is-component:hover .library-tile-preview,.library-tile.is-component:focus-within .library-tile-preview{border-top-color:var(--line)}
.library-expand{border-style:dashed;border-radius:10px;background:var(--paper);font-weight:400}
.library-search{background:var(--paper);border-color:var(--line);border-radius:10px}
.library-search:focus-within{outline:2px solid var(--focus);outline-offset:0}
.library-item-copy strong{font-weight:600}
.library-entry .library-item>svg{color:var(--accent);flex:none}
/* 拖影图形取同一静态目录表，轻浮层只解释正在拖什么，不参与鼠标命中。 */
.canvas-library-drag-preview:has(.ui-icon){display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px;max-width:18rem;padding:10px 14px;border-radius:12px;font-weight:550}
.canvas-library-drag-preview .ui-icon{width:28px;height:28px;color:var(--accent);flex:none}
.canvas-library-drag-preview small{display:block;margin-top:2px;color:var(--muted);font-size:.72rem;font-weight:400}
@media(prefers-reduced-motion:reduce){.library-common .library-tile,.library-item,.library-modes button,.library-expand{transition:none}}