oil-ui-pro 0.15.4 → 0.22.2（上游 ui.oiloil.org 正式包）＋ 记 P0-98 跨盘 rename 坑

- oil-ui-pro 升到 0.22.2：references 13→28 份（新增 16、删 imagery.md）、assets 增 cards/（22 组）与 fonts/、SKILL.md 顶层五步结构未改名。
- 升级路径：官方 `npx github:oil-oil/oil-cli update` 稳定失败（error=replace、报「检查目录权限」）。
  真身为 EXDEV —— 解压在 os.tmpdir()（C 盘）、技能目录在 E 盘，Windows 上 rename 不能跨盘；
  CLI 的 catch 把非 CliError 原生异常一律兜底成 replaceFailed，真错误一个字不吐。
  做法＝借其 prepare() 只做下载+校验，再 cp 到同盘 stage、rename 交换；官方命令复验 up_to_date。
- 回归：product-planning 按名引用的 visual-review.md／tools.md／design-direction.md／style-explorer.md 全部健在；命名闸门 2061｜0｜27。
- session-mechanism/references/pitfalls.md 新增 P0-98（含通则：更新器把原生错误兜底成指错方向的人话）。

oil-ui-pro/assets/cards/beam-graph/card.css

@@ -0,0 +1,11 @@
+.beam-graph {
+  & .card-stage::before { content:""; position:absolute; inset:0; background-image:radial-gradient(color-mix(in oklab,var(--card-accent) 20%,transparent) .7px,transparent .8px); background-size:15px 15px; mask-image:radial-gradient(ellipse in oklab,#000,transparent 72%); }
+  & .beam-lines { position:absolute; width:100%; height:100%; }
+  & .beam-base { fill:none; stroke:color-mix(in oklab,var(--card-muted) 35%,var(--card-surface)); stroke-width:1.5; }
+  & .beam-light,& .beam-glow { fill:none; stroke-linecap:round; stroke-width:2; stroke-dasharray:72 600; }
+  & .beam-glow { stroke-width:6; opacity:.55; }
+  & .beam-node { position:absolute; display:flex; align-items:center; gap:7px; font-size:13px; border:1px solid var(--card-line); padding:10px 15px; border-radius:30px; background:var(--card-panel); transform:translate(-50%,-50%); white-space:nowrap; box-shadow:0 3px 10px #29314b07; & i { width:5px; height:5px; border-radius:50%; background:var(--_card-accent-2); } }
+  & .beam-a { left:18%; top:20%; } & .beam-b { left:18%; top:50%; } & .beam-e { left:18%; top:80%; } & .beam-c { left:82%; top:32%; } & .beam-d { left:82%; top:68%; }
+  & .beam-center { left:50%; top:50%; font-size:22px; font-weight:600; letter-spacing:-.02em; padding:17px 20px; border-color:color-mix(in oklab,var(--card-accent) 25%,var(--card-line)); box-shadow:0 0 0 9px var(--card-surface),0 0 0 10px color-mix(in oklab,var(--card-accent) 35%,var(--card-surface)),0 0 35px color-mix(in oklab,var(--card-accent) 16%,transparent); }
+  @media(max-width:650px) { & .beam-node { font-size:10px; padding:7px 10px; gap:4px; } & .beam-center { font-size:15px; padding:12px 13px; } }
+}

oil-ui-pro/assets/cards/beam-graph/card.html

@@ -0,0 +1,4 @@
+<article class="card beam-graph bottom-title" data-card="beam-graph" data-motion="auto">
+  <div class="card-stage"><svg class="beam-lines" viewBox="0 0 400 250" preserveAspectRatio="none" aria-hidden="true"><defs></defs><g class="beam-base"><path d="M72 50H135Q147 50 147 62V113Q147 125 159 125H200"/><path d="M72 125H200"/><path d="M72 200H135Q147 200 147 188V137Q147 125 159 125H200"/><path d="M200 125H255Q267 125 267 113V92Q267 80 279 80H328"/><path d="M200 125H255Q267 125 267 137V158Q267 170 279 170H328"/></g><g class="beam-glow"></g><g class="beam-light"></g></svg><span class="beam-node beam-a"><i></i><span data-text="nodes.0">灵感</span></span><span class="beam-node beam-b"><i></i><span data-text="nodes.1">内容</span></span><span class="beam-node beam-e"><i></i><span data-text="nodes.2">团队</span></span><span class="beam-node beam-center" data-text="hub">morrow</span><span class="beam-node beam-c"><i></i><span data-text="nodes.3">产品</span></span><span class="beam-node beam-d"><i></i><span data-text="nodes.4">世界</span></span></div>
+  <div class="card-caption"><h2 data-text="title">每一份创造，都能相互连接</h2><p data-text="description">把零散的工具，连成顺畅的工作流。</p></div>
+</article>

oil-ui-pro/assets/cards/beam-graph/card.js

@@ -0,0 +1,10 @@
+import {loop,shell,smooth} from '../shared/runtime.js';
+export function mount(element, options = {}) {
+  const clean=shell(element,options);
+  const svg=element.querySelector('svg'),id='beam-'+crypto.randomUUID(),defs=svg.querySelector('defs');
+  const source=[...svg.querySelectorAll('.beam-base path')];
+  defs.innerHTML=`<filter id="${id}-blur" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="3"/></filter>`;
+  const beams=source.map((path,i)=>{const gid=id+'-'+i;defs.insertAdjacentHTML('beforeend',`<linearGradient id="${gid}" gradientUnits="userSpaceOnUse"><stop stop-color="var(--card-accent)" stop-opacity="0"/><stop offset=".55" stop-color="var(--card-accent)"/><stop offset="1" stop-color="color-mix(in oklab,var(--card-accent) 25%,white)"/></linearGradient>`);const copies=['beam-glow','beam-light'].map(cls=>{const n=path.cloneNode();n.setAttribute('stroke',`url(#${gid})`);if(cls==='beam-glow')n.setAttribute('filter',`url(#${id}-blur)`);svg.querySelector('.'+cls).append(n);return n;});return {path,length:path.getTotalLength(),gradient:defs.querySelector('#'+gid),copies};});
+  const clock=loop(element,time=>{for(const [i,b]of beams.entries()){const phase=((time+i*.71+1)%4)/4,head=phase*(b.length+72),tail=Math.max(0,head-72),a=b.path.getPointAtLength(tail),z=b.path.getPointAtLength(Math.min(head,b.length));for(const [n,v]of [['x1',a.x],['y1',a.y],['x2',z.x],['y2',z.y]])b.gradient.setAttribute(n,v);for(const p of b.copies){p.style.strokeDashoffset=String(72-head);p.style.opacity=String(smooth(head/28)*(1-smooth((head-b.length)/72)));}}},options);
+  return {destroy(){clock.destroy();clean();svg.querySelector('.beam-light').replaceChildren();svg.querySelector('.beam-glow').replaceChildren();defs.replaceChildren();}};
+}