@kkabuka/dsh-skin-solar-orbit 0.1.0

package/README.md

@@ -0,0 +1,10 @@
+# 太阳系轨道 Solar Orbit
+
+纯自动运行的艺术化线稿太阳系背景皮肤（皮肤中心 v2 契约）：
+
+- 太阳居中，柔和光晕 + 呼吸微光
+- 八大行星绕日公转（内快外慢），按特征配色：水星灰 / 金星淡金 / 地球蓝 / 火星红 / 木星棕褐 / 土星淡金带环 / 天王星青 / 海王星深蓝
+- 木火之间小行星带缓慢自转
+- 星场微闪烁 + 偶有流星划过（渐变尾迹）
+
+流星/星空技术参照 grok-shooting-stars（MIT）。

package/hooks.mjs

@@ -0,0 +1,393 @@
+/**
+ * SOLAR ORBIT — 太阳系轨道（2.5D 透视巨物版）
+ * ============================================================
+ * 立体感太阳系背景皮肤（纯自动、零依赖、原生 Canvas）：
+ *
+ *   - 太阳固定在右上角，大光晕 + 呼吸微光，如旁观巨物悬停
+ *   - 八大行星沿"投影椭圆"公转：轨道中心在太阳（右上），
+ *     椭圆长轴指向屏幕中心，大部分弧段甩在屏幕外，
+ *     只有一段弧扫过画面 → 星系只露出一角的巨物感
+ *   - 行星由远到近循环：远端点（右上，缩至 ~35%、变淡）→
+ *     近端点（左下屏幕前，放大到 11~32px、清晰、可遮住太阳）
+ *   - 每帧按深度 z 排序：远行星 → 太阳 → 近行星（遮挡关系成立）
+ *   - 小行星带 = 同投影的椭圆带，缓慢自转
+ *   - 星场带视差漂移 + 微闪烁；流星 3~7 秒一条（渐变尾迹）
+ *
+ * 数学：伪 3D = 椭圆参数方程 + z=cos(θ) 深度，近大远小 + 深浅排序，
+ *       无需 WebGL/three.js，每帧 < 1ms。
+ * 流星/星空技术参照 grok-shooting-stars（MIT，UsmanDevCraft）。
+ *
+ * 皮肤中心契约：default export defineSkinHooks() -> { apply(ctx) }
+ */
+
+export default function defineSkinHooks() {
+  "use strict";
+
+  let canvas = null;
+  let ctx2d = null;
+  let animId = 0;
+  let mounted = false;
+  let lastNow = 0;
+  let stars = [];
+  let beltDots = [];
+  let beltRot = 0;
+  let meteors = [];
+  let meteorWait = 0;
+  let frostStyle = null;
+
+  const THEMES = {
+    dark: {
+      star: "rgba(224,232,255,",
+      orbit: "rgba(150,170,225,0.22)",
+      belt: "rgba(178,198,235,",
+      sunCore: "#fff3d8",
+      sunInner: "rgba(255,224,150,",
+      sunOuter: "rgba(255,180,90,",
+      meteorHead: "rgba(214,232,255,",
+      meteorTail: "rgba(190,220,255,"
+    },
+    light: {
+      star: "rgba(96,112,160,",
+      orbit: "rgba(84,104,164,0.24)",
+      belt: "rgba(108,130,182,",
+      sunCore: "#8a5a20",
+      sunInner: "rgba(214,152,62,",
+      sunOuter: "rgba(199,122,42,",
+      meteorHead: "rgba(118,148,210,",
+      meteorTail: "rgba(108,140,205,"
+    }
+  };
+
+  /**
+   * 行星表（2.5D 艺术化）：
+   *   near = 近端点（屏幕前）行星像素半径（夸张巨物感）
+   *   o    = 轨道长半轴比例（baseR = 屏宽×0.82，越大甩出屏幕越多）
+   *   sp   = 角速度倍率（omega = 0.17*sp rad/s）
+   *   ring = 土星环
+   * 远端点半径 = near × 0.35（由远到近缩放比），透明度同样淡入淡出。
+   */
+  const PLANETS = [
+    { name: "水星",   near: 11, o: 0.50,  sp: 1.90, dark: "#b9bcc9", light: "#6f7488", ring: false },
+    { name: "金星",   near: 15, o: 0.60,  sp: 1.55, dark: "#e8c98a", light: "#a8853f", ring: false },
+    { name: "地球",   near: 17, o: 0.68,  sp: 1.28, dark: "#6fb1e8", light: "#2f6fb8", ring: false },
+    { name: "火星",   near: 14, o: 0.75,  sp: 1.05, dark: "#e07050", light: "#b04a30", ring: false },
+    { name: "木星",   near: 32, o: 0.90,  sp: 0.80, dark: "#d8a86a", light: "#8f6a3a", ring: false },
+    { name: "土星",   near: 27, o: 1.00,  sp: 0.68, dark: "#e6cf8f", light: "#9d8748", ring: true  },
+    { name: "天王星", near: 19, o: 1.06,  sp: 0.55, dark: "#9fd8d8", light: "#4a9a9a", ring: false },
+    { name: "海王星", near: 20, o: 1.12,  sp: 0.45, dark: "#7088e8", light: "#3a55b8", ring: false }
+  ];
+  const angles = PLANETS.map(() => Math.random() * Math.PI * 2);
+
+  const CONFIG = {
+    aside: 0.78,          // 太阳 X 位置（屏宽比例）
+    atop: 0.2,            // 太阳 Y 位置（屏高比例）
+    axisFlat: 0.32,       // 椭圆压扁系数 ry = rx × 轴
+    farScale: 0.35,       // 远端行星相对近端的大小
+    sunScale: 0.05,       // 太阳半径 = min(w,h) × 系数
+    starBase: 16000,
+    meteorMinWait: 3200,
+    meteorMaxWait: 7600,
+    beltCount: 90,
+  };
+
+  function isDarkMode() {
+    return !!document.body && document.body.hasAttribute("data-ds-dark-theme");
+  }
+  function rand(a, b) { return a + Math.random() * (b - a); }
+  function clamp(v, a, b) { return v < a ? a : v > b ? b : v; }
+  function theme() { return isDarkMode() ? THEMES.dark : THEMES.light; }
+
+  function resize() {
+    if (!canvas) return;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    canvas.width = window.innerWidth * dpr;
+    canvas.height = window.innerHeight * dpr;
+    if (ctx2d) {
+      ctx2d.setTransform(1, 0, 0, 1, 0, 0);
+      ctx2d.scale(dpr, dpr);
+    }
+    initStars();
+    initBelt();
+  }
+
+  function initStars() {
+    const n = clamp(Math.floor((window.innerWidth * window.innerHeight) / CONFIG.starBase), 40, 130);
+    stars = [];
+    for (let i = 0; i < n; i++) {
+      const depth = rand(0.3, 1); // 视差系数：远处的星移动慢
+      stars.push({
+        x: Math.random() * window.innerWidth,
+        y: Math.random() * window.innerHeight,
+        r: rand(0.4, 1.7),
+        tw: rand(0.6, 2.2) / 1000,
+        ph: Math.random() * Math.PI * 2,
+        vdx: rand(-0.05, 0.05) * depth, // 视差漂移速度（小）
+        vdy: rand(0.02, 0.07) * depth
+      });
+    }
+  }
+
+  function initBelt() {
+    beltDots = [];
+    for (let i = 0; i < CONFIG.beltCount; i++) {
+      beltDots.push({
+        a: (i / CONFIG.beltCount) * Math.PI * 2 + rand(-0.05, 0.05),
+        rr: rand(-0.07, 0.07),   // 径向抖动比例
+        s: rand(0.5, 1.3)
+      });
+    }
+  }
+
+  function makeMeteor(w, h) {
+    const fromLeft = Math.random() < 0.5;
+    const ang = fromLeft ? rand(0.35, 0.7) : rand(2.5, 2.9);
+    const speed = rand(5.5, 9);
+    return {
+      x: fromLeft ? -80 : rand(w * 0.3, w * 0.9),
+      y: rand(0, h * 0.32),
+      vx: Math.cos(ang) * speed,
+      vy: Math.sin(ang) * speed,
+      age: 0,
+      life: Math.round(rand(70, 130)),
+      len: rand(55, 95),
+      w: rand(1.2, 2.2)
+    };
+  }
+
+  /** 椭圆投影：绕太阳的公转角度 θ → 屏幕坐标 + 深度 z（-1 近 / +1 远） */
+  function orbitPoint(sx, sy, rx, ry, dirX, dirY, perpX, perpY, theta) {
+    const ex = Math.cos(theta) * rx;
+    const ey = Math.sin(theta) * ry;
+    return {
+      x: sx + ex * dirX + ey * perpX,
+      y: sy + ex * dirY + ey * perpY,
+      z: -Math.cos(theta)  // θ=0（近端点，朝向屏幕中心）→ z=-1；θ=π（远端）→ z=+1
+    };
+  }
+
+  function render(now, keepLoop) {
+    if (!mounted || !ctx2d || !canvas) return;
+    if (document.hidden) {
+      if (keepLoop) animId = requestAnimationFrame((t) => render(t, true));
+      return;
+    }
+    const w = window.innerWidth;
+    const h = window.innerHeight;
+    const dt = clamp(now - (lastNow || now), 0, 60);
+    lastNow = now;
+    const ms = now;
+    const T = theme();
+
+    ctx2d.clearRect(0, 0, w, h);
+
+    // ---- 1. 星场：视差漂移 + 闪烁 ----
+    for (const s of stars) {
+      s.x += s.vdx * (dt / 16.7);
+      s.y += s.vdy * (dt / 16.7);
+      if (s.x < -4) s.x = w + 4; else if (s.x > w + 4) s.x = -4;
+      if (s.y < -4) s.y = h + 4; else if (s.y > h + 4) s.y = -4;
+      const a = 0.35 + 0.55 * (0.5 + 0.5 * Math.sin(ms * s.tw + s.ph));
+      ctx2d.beginPath();
+      ctx2d.arc(s.x, s.y, s.r, 0, Math.PI * 2);
+      ctx2d.fillStyle = T.star + a.toFixed(3) + ")";
+      ctx2d.fill();
+    }
+
+    // ---- 2. 星系几何：太阳右上 + 椭球平面朝向屏幕中心 ----
+    const sx = w * CONFIG.aside;
+    const sy = h * CONFIG.atop;
+    const cdx = w / 2 - sx;
+    const cdy = h / 2 - sy;
+    const cl = Math.hypot(cdx, cdy) || 1;
+    const dirX = cdx / cl;   // 椭圆长轴方向：太阳 → 屏幕中心
+    const dirY = cdy / cl;
+    const perpX = -dirY;     // 垂直方向
+    const perpY = dirX;
+    const baseR = w * 0.82;  // 长半轴基数（让大部分弧段甩出屏幕）
+    const sunR = Math.max(34, Math.min(w, h) * CONFIG.sunScale);
+    const farAlpha = 0.4;
+
+    // 各行星当前屏幕位置（含深度）
+    const items = [];
+    for (let i = 0; i < PLANETS.length; i++) {
+      const p = PLANETS[i];
+      angles[i] += 0.17 * p.sp * (dt / 1000);
+      const rx = baseR * p.o;
+      const ry = rx * CONFIG.axisFlat;
+      const pt = orbitPoint(sx, sy, rx, ry, dirX, dirY, perpX, perpY, angles[i]);
+      items.push({ p, pt });
+    }
+    // 深度排序：远的先画（z 大在前），近的后画
+    items.sort((a, b) => b.pt.z - a.pt.z);
+
+    // 轨道椭圆（线稿只有一段可见）
+    ctx2d.strokeStyle = T.orbit;
+    ctx2d.lineWidth = 1;
+    for (const p of PLANETS) {
+      const rx = baseR * p.o;
+      const ry = rx * CONFIG.axisFlat;
+      ctx2d.beginPath();
+      ctx2d.ellipse(sx, sy, rx, ry, Math.atan2(dirY, dirX), 0, Math.PI * 2);
+      ctx2d.stroke();
+    }
+
+    // ---- 3. 深度分层绘制：远行星 → 太阳 → 近行星 ----
+    const far = items.filter((it) => it.pt.z > 0);
+    const near = items.filter((it) => it.pt.z <= 0);
+    const drawPlanet = (it) => {
+      const p = it.p;
+      const t = (1 - it.pt.z) / 2; // 0=远, 1=近
+      const R = p.near * (CONFIG.farScale + t * (1 - CONFIG.farScale));
+      const alpha = farAlpha + (1 - farAlpha) * t;
+      const color = isDarkMode() ? p.dark : p.light;
+      if (t > 0.78 && R > 10) { // 近景行星加柔光，强化巨物感
+        const glow = ctx2d.createRadialGradient(it.pt.x, it.pt.y, R * 0.4, it.pt.x, it.pt.y, R * 2.6);
+        glow.addColorStop(0, color + "60"); // 8 位 hex：颜色 + 固定 alpha
+        glow.addColorStop(1, color + "00");
+        ctx2d.globalAlpha = (t - 0.78) * 1.4;
+        ctx2d.fillStyle = glow;
+        ctx2d.beginPath();
+        ctx2d.arc(it.pt.x, it.pt.y, R * 2.6, 0, Math.PI * 2);
+        ctx2d.fill();
+        ctx2d.globalAlpha = 1;
+      }
+      ctx2d.globalAlpha = alpha;
+      ctx2d.fillStyle = color;
+      ctx2d.beginPath();
+      ctx2d.arc(it.pt.x, it.pt.y, R, 0, Math.PI * 2);
+      ctx2d.fill();
+      if (p.ring) {
+        ctx2d.strokeStyle = color;
+        ctx2d.lineWidth = Math.max(0.6, R * 0.12);
+        ctx2d.beginPath();
+        ctx2d.ellipse(it.pt.x, it.pt.y, R * 1.9, R * 0.62, -0.5, 0, Math.PI * 2);
+        ctx2d.stroke();
+      }
+      ctx2d.globalAlpha = 1;
+    };
+    for (const it of far) drawPlanet(it);
+
+    // 太阳（远行星之上、近行星之下）
+    const breathe = 0.9 + 0.1 * Math.sin(ms / 2400);
+    const glowR = sunR * 4.4;
+    const grad = ctx2d.createRadialGradient(sx, sy, sunR * 0.4, sx, sy, glowR);
+    grad.addColorStop(0, T.sunInner + (0.30 * breathe).toFixed(3) + ")");
+    grad.addColorStop(1, T.sunOuter + "0)");
+    ctx2d.fillStyle = grad;
+    ctx2d.beginPath();
+    ctx2d.arc(sx, sy, glowR, 0, Math.PI * 2);
+    ctx2d.fill();
+    ctx2d.fillStyle = T.sunCore;
+    ctx2d.beginPath();
+    ctx2d.arc(sx, sy, sunR, 0, Math.PI * 2);
+    ctx2d.fill();
+
+    for (const it of near) drawPlanet(it);
+
+    // ---- 4. 小行星带（椭圆投影，缓慢自转）----
+    beltRot += dt * 0.00018;
+    const beltRx = baseR * (PLANETS[3].o + PLANETS[4].o) / 2; // 木火之间
+    const beltRy = beltRx * CONFIG.axisFlat;
+    ctx2d.fillStyle = T.belt + "0.7)";
+    for (const b of beltDots) {
+      const pt = orbitPoint(sx, sy, beltRx * (1 + b.rr), beltRy * (1 + b.rr),
+                            dirX, dirY, perpX, perpY, b.a + beltRot);
+      ctx2d.beginPath();
+      ctx2d.arc(pt.x, pt.y, b.s, 0, Math.PI * 2);
+      ctx2d.fill();
+    }
+
+    // ---- 5. 流星（渐变尾迹，画在最上层）----
+    meteorWait -= dt;
+    if (meteorWait <= 0 && meteors.length < 2) {
+      meteors.push(makeMeteor(w, h));
+      meteorWait = rand(CONFIG.meteorMinWait, CONFIG.meteorMaxWait);
+    }
+    for (let i = meteors.length - 1; i >= 0; i--) {
+      const m = meteors[i];
+      m.x += m.vx * (dt / 16.7);
+      m.y += m.vy * (dt / 16.7);
+      m.age++;
+      if (m.age > m.life || m.x < -160 || m.x > w + 160 || m.y > h + 160) {
+        meteors.splice(i, 1);
+        continue;
+      }
+      const fadeIn = clamp(m.age / 12, 0, 1);
+      const fadeOut = clamp((m.life - m.age) / 25, 0, 1);
+      const alpha = Math.min(fadeIn, fadeOut) * 0.9;
+      const tailX = m.x - m.vx * m.len * 0.05;
+      const tailY = m.y - m.vy * m.len * 0.05;
+      const tail = ctx2d.createLinearGradient(m.x, m.y, tailX, tailY);
+      tail.addColorStop(0, T.meteorTail + alpha.toFixed(3) + ")");
+      tail.addColorStop(1, T.meteorTail + "0)");
+      ctx2d.strokeStyle = tail;
+      ctx2d.lineWidth = m.w;
+      ctx2d.lineCap = "round";
+      ctx2d.beginPath();
+      ctx2d.moveTo(m.x, m.y);
+      ctx2d.lineTo(tailX, tailY);
+      ctx2d.stroke();
+      ctx2d.fillStyle = T.meteorHead + alpha.toFixed(3) + ")";
+      ctx2d.beginPath();
+      ctx2d.arc(m.x, m.y, m.w * 0.85, 0, Math.PI * 2);
+      ctx2d.fill();
+    }
+
+    if (keepLoop) animId = requestAnimationFrame((t) => render(t, true));
+  }
+
+  return {
+    apply(ctx) {
+      if (typeof document === "undefined") return;
+      mounted = true;
+      // 面板半透明：皮肤 CSS 的半透明公式引用 --dsw-skin-scrim。
+      // canvas 皮肤没有 backgroundMedia，激活时皮肤中心会把 scrim 写成 0
+      // → 输入框/两侧面板变实心遮住画布。这里自设 scrim=1 让面板恢复毛玻璃，
+      // 卸载时还原。
+      const prevScrim = document.body.style.getPropertyValue("--dsw-skin-scrim");
+      document.body.style.setProperty("--dsw-skin-scrim", "1");
+      // 毛玻璃中和器：canvas 皮肤没有 backgroundMedia，皮肤中心的官方
+      // backdrop 场景中和器不会激活（它只认 data-dsh-backdrop-active）。
+      // 这里按同款规则自注入：清除输入座位底部遮挡渐变 + 给输入卡加模糊。
+      // 模糊强度复用官方变量 --dsh-input-card-blur（设置里可调）。
+      frostStyle = document.createElement("style");
+      frostStyle.id = "dsh-canvas-frost";
+      frostStyle.textContent =
+        "[data-composer-seat],[data-composer-seat]::before{background:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}" +
+        "[data-composer-card]{backdrop-filter:blur(var(--dsh-input-card-blur,10px)) !important;-webkit-backdrop-filter:blur(var(--dsh-input-card-blur,10px)) !important;}";
+      document.head.appendChild(frostStyle);
+      canvas = document.createElement("canvas");
+      canvas.id = "dsh-solar-bg-canvas";
+      canvas.style.cssText = "position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0;";
+      document.body.appendChild(canvas);
+      ctx2d = canvas.getContext("2d");
+      resize();
+      const reduced = window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reduced) {
+        lastNow = performance.now();
+        render(lastNow, false);
+      } else {
+        lastNow = performance.now();
+        animId = requestAnimationFrame((t) => render(t, true));
+      }
+      window.addEventListener("resize", resize);
+
+      ctx.onCleanup(() => {
+        mounted = false;
+        if (animId) cancelAnimationFrame(animId);
+        animId = 0;
+        if (prevScrim === "") document.body.style.removeProperty("--dsw-skin-scrim");
+        else document.body.style.setProperty("--dsw-skin-scrim", prevScrim);
+        if (frostStyle && frostStyle.parentNode) frostStyle.parentNode.removeChild(frostStyle);
+        frostStyle = null;
+        window.removeEventListener("resize", resize);
+        if (canvas && canvas.parentNode) canvas.parentNode.removeChild(canvas);
+        canvas = null;
+        ctx2d = null;
+        meteors = [];
+        stars = [];
+        beltDots = [];
+      });
+    }
+  };
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@kkabuka/dsh-skin-solar-orbit",
+  "version": "0.1.0",
+  "description": "2.5D Solar System orbit skin for dsh skin center v2 — perspective giant planets, meteors, parallax starfield",
+  "main": "skin.json",
+  "files": [
+    "skin.json",
+    "hooks.mjs",
+    "skin.css",
+    "patches.css",
+    "README.md"
+  ],
+  "keywords": [
+    "dsh",
+    "dsh-skin",
+    "solar",
+    "orbit",
+    "planets",
+    "meteor",
+    "canvas",
+    "skin-center"
+  ],
+  "author": "kkabuka",
+  "license": "MIT"
+}

package/patches.css

@@ -0,0 +1,275 @@
+/* 浅色模式背景与深色模式背景自适应 */
+html, body { background-color: #f4f6fb !important; }
+body[data-ds-dark-theme], html:has(body[data-ds-dark-theme]) { background-color: #0a0f1e !important; }
+#dsh-triangle-bg-canvas { z-index: 0 !important; }
+
+#dsh-triangle-bg-canvas {
+  position: fixed !important;
+  inset: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  pointer-events: none !important;
+  z-index: 1 !important;
+}
+
+[id="root"] {
+  background: none;
+}
+
+a {
+  color: #3c4e92;
+}
+
+a:visited {
+  color: #6a5fa8;
+}
+
+body[data-ds-dark-theme] a {
+  color: #94a8dc;
+}
+
+body[data-ds-dark-theme] a:visited {
+  color: #a58fdc;
+}
+
+:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+}
+
+[data-pane="sidebar"] {
+  color: var(--dsw-alias-label-primary);
+}
+
+[role="tooltip"] {
+  background: var(--dsw-alias-tooltip-bg);
+  color: var(--dsw-alias-tooltip-fg);
+}
+
+[role="dialog"], [role="dialog"] [class*="navCell"]:not([aria-current="true"]) {
+  color: var(--dsw-alias-label-primary);
+}
+
+button[role="tab"], button[role="tab"]:hover, button[role="tab"]:active, button[role="tab"]:disabled, button[role="tab"]:hover:not(:disabled), button[role="tab"]:active:not(:disabled) {
+  box-shadow: none;
+  text-shadow: none;
+  color: var(--dsw-alias-label-primary);
+  filter: none;
+  opacity: 1;
+  background-color: #0000;
+  background-image: none;
+  border: 0;
+  transform: none;
+}
+
+[data-aionui-explorer-col], [data-aionui-preview-col], .aionui-root {
+  backdrop-filter: blur(12px);
+}
+
+.aionui-dialog, .aionui-menu, .aionui-toast {
+  backdrop-filter: blur(14px);
+}
+
+.aionui-overlay {
+  background: #1c254666;
+}
+
+body[data-ds-dark-theme] .aionui-overlay {
+  background: #0000008c;
+}
+
+button, a, .aionui-btn, .aionui-menu-item, .aionui-explorer-handle, .aionui-preview-handle {
+  transition: background-color .13s, border-color .13s, box-shadow .13s, color .13s, opacity .13s;
+}
+
+::-webkit-scrollbar-thumb {
+  transition: background-color .13s;
+}
+
+a:hover {
+  color: #2c3765;
+  text-decoration: underline;
+}
+
+a:active {
+  color: #222b4d;
+}
+
+body[data-ds-dark-theme] a:hover {
+  color: #b4c3e8;
+}
+
+body[data-ds-dark-theme] a:active {
+  color: #c9d4ef;
+}
+
+button:disabled, .aionui-btn:disabled, .aionui-menu-item-disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.aionui-btn:disabled:hover, .aionui-menu-item-disabled:hover {
+  box-shadow: none;
+  background-color: #0000;
+}
+
+.aionui-explorer-handle, .aionui-preview-handle {
+  background: #d8dfec;
+}
+
+.aionui-explorer-handle:hover, .aionui-preview-handle:hover {
+  background: #7f96d2;
+  box-shadow: 0 0 6px #4a5fa866;
+}
+
+body[data-ds-dark-theme] .aionui-explorer-handle, body[data-ds-dark-theme] .aionui-preview-handle {
+  background: #33406a;
+}
+
+body[data-ds-dark-theme] .aionui-explorer-handle:hover, body[data-ds-dark-theme] .aionui-preview-handle:hover {
+  background: #6276a5;
+  box-shadow: 0 0 6px #7f96d266;
+}
+
+.aionui-floating-expand:hover {
+  background: #e4eaf7;
+  border-color: #647ebf;
+}
+
+.aionui-floating-expand:active {
+  background: #dce3f7;
+}
+
+body[data-ds-dark-theme] .aionui-floating-expand:hover {
+  background: #2c3765;
+  border-color: #647ebf;
+}
+
+body[data-ds-dark-theme] .aionui-floating-expand:active {
+  background: #33417a;
+}
+
+.aionui-collapse-chevron:hover {
+  color: #647ebf;
+}
+
+body[data-ds-dark-theme] .aionui-collapse-chevron:hover {
+  color: #a5b7e2;
+}
+
+.aionui-menu-item:not(.aionui-menu-item-disabled):hover {
+  background: #4a5fa81f;
+}
+
+body[data-ds-dark-theme] .aionui-menu-item:not(.aionui-menu-item-disabled):hover {
+  background: #a0b9eb29;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  button, a, .aionui-btn, .aionui-menu-item, .aionui-explorer-handle, .aionui-preview-handle, ::-webkit-scrollbar-thumb {
+    transition: none;
+  }
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+1), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+1) {
+  color: #4a5fa8;
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+2), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+2) {
+  color: #2e8e52;
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+3), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+3) {
+  color: #c08a33;
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+4), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+4) {
+  color: #647ebf;
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+5), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+5) {
+  color: #3c4e92;
+}
+
+[data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n), [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n) {
+  color: #58b058;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+1), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+1) {
+  color: #7f96d2;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+2), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+2) {
+  color: #58b058;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+3), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+3) {
+  color: #d9a94f;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+4), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+4) {
+  color: #94a8dc;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n+5), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n+5) {
+  color: #647ebf;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="node"]:nth-child(6n), body[data-ds-dark-theme] [data-gitgraph-lanes] > [data-gitgraph-glyph="merge"]:nth-child(6n) {
+  color: #7cc97c;
+}
+
+[data-gitgraph-ref]:not([data-gitgraph-ref-current]) {
+  background: #4a5fa81f;
+  border: 1px solid #2c3a7333;
+}
+
+body[data-ds-dark-theme] [data-gitgraph-ref]:not([data-gitgraph-ref-current]) {
+  background: #a0b9eb24;
+  border-color: #a0b4e633;
+}
+
+div:has( > div > [data-gitgraph-chip]) {
+  --dsw-alias-button-tool-bar-fill: #4a5fa814;
+  --dsw-alias-border-l2: #4a5fa861;
+  --dsw-alias-label-secondary: #2c3765;
+  --dsw-alias-label-tertiary: #647ebf;
+  --dsw-alias-interactive-bg-hover: #4a5fa824;
+  --dsw-alias-interactive-bg-active: #4a5fa833;
+}
+
+body[data-ds-dark-theme] div:has( > div > [data-gitgraph-chip]) {
+  --dsw-alias-button-tool-bar-fill: #a0b9eb14;
+  --dsw-alias-border-l2: #a0b4e661;
+  --dsw-alias-label-secondary: #c9d4ef;
+  --dsw-alias-label-tertiary: #8b9cbc;
+  --dsw-alias-interactive-bg-hover: #a0b9eb24;
+  --dsw-alias-interactive-bg-active: #a0b9eb38;
+}
+
+div:has( > div > [data-gitgraph-chip]) > button[aria-expanded="true"], [data-gitgraph-chip][aria-expanded="true"] {
+  background-color: #4a5fa829;
+}
+
+body[data-ds-dark-theme] div:has( > div > [data-gitgraph-chip]) > button[aria-expanded="true"], body[data-ds-dark-theme] [data-gitgraph-chip][aria-expanded="true"] {
+  background-color: #a0b9eb2e;
+}
+
+[data-phase="active"] [class*="composerSeat"] {
+  background: none !important;
+}
+
+[data-phase="active"] [class*="composerSeat"]:before {
+  content: "";
+  z-index: -1;
+  pointer-events: none;
+  backdrop-filter: blur(6px);
+  background: linear-gradient(#0000 0, #e8ecf5db 36px);
+  position: absolute;
+  inset: 0;
+}
+
+body[data-ds-dark-theme] [data-phase="active"] [class*="composerSeat"]:before {
+  backdrop-filter: blur(6px);
+  background: linear-gradient(#0000 0, #101624d1 36px);
+}

package/skin.css

@@ -0,0 +1,315 @@
+:root {
+  color: #1f2937;
+  background-color: transparent;
+}
+
+body[data-ds-dark-theme] {
+  color: #dbe2f2;
+  background-color: transparent;
+}
+
+:root {
+  --dsw-alias-bg-base: rgba(255, 255, 255, calc(var(--dsw-skin-scrim, 0) * .45));
+  --dsw-alias-bg-layer-1: rgba(243, 245, 251, calc(1 - var(--dsw-skin-scrim, 0) * .5));
+  --dsw-alias-bg-layer-2: rgba(233, 237, 247, calc(1 - var(--dsw-skin-scrim, 0) * .45));
+  --dsw-alias-bg-layer-3: rgba(221, 227, 241, calc(1 - var(--dsw-skin-scrim, 0) * .42));
+  --dsw-alias-bg-mask-1: #1c254666;
+  --dsw-alias-bg-mask-2: #1c254633;
+  --dsw-alias-bg-mask-3: #1c254680;
+  --dsw-alias-bg-mask-photo: #101424e0;
+  --dsw-alias-bg-module-platform: rgba(233, 237, 247, calc(1 - var(--dsw-skin-scrim, 0) * .45));
+  --dsw-alias-bg-multi-select: #dce3f7cc;
+  --dsw-alias-bg-overlay: #eef1f9eb;
+  --dsw-alias-bg-skeleton: #1c25460f;
+  --dsw-alias-border-inverted2: #fff9;
+  --dsw-alias-border-inverted: #fff6;
+  --dsw-alias-border-l1: #2c3a7326;
+  --dsw-alias-border-l2-darkmode-thin: #2c3a7333;
+  --dsw-alias-border-l2: #2c3a7338;
+  --dsw-alias-border-l3: #2c3a7352;
+  --dsw-alias-border-l4: #2c3a736b;
+  --dsw-alias-brand-primary-invert: #fff;
+  --dsw-alias-brand-primary-new-colorprimary-new-color: #4d86f8;
+  --dsw-alias-brand-primary: #4d86f8;
+  --dsw-alias-brand-text: #222b4d;
+  --dsw-alias-button-contrast-fill: #3b72e2;
+  --dsw-alias-button-elevated-fill: #fff;
+  --dsw-alias-button-floating-fill: #fff;
+  --dsw-alias-button-floating-hover: #e9edf7;
+  --dsw-alias-button-ghost-active-border: #a5b7e2;
+  --dsw-alias-button-ghost-active-fill: #dce3f7;
+  --dsw-alias-button-ghost-active-hover: #c3cfee;
+  --dsw-alias-button-info-fill: #4d86f8;
+  --dsw-alias-button-info-hover: #5d74c4;
+  --dsw-alias-button-primary-dimmed: #dce3f7;
+  --dsw-alias-button-primary-fill: #4d86f8;
+  --dsw-alias-button-primary-hover: #5d74c4;
+  --dsw-alias-button-tool-bar-fill-invisible: #4d86f85c;
+  --dsw-alias-button-tool-bar-fill: #4d86f880;
+  --dsw-alias-button-tool-bar-hover: #4d86f899;
+  --dsw-alias-interactive-bg-active: #4d86f824;
+  --dsw-alias-interactive-bg-hover-accent: #4d86f82e;
+  --dsw-alias-interactive-bg-hover-danger: #c000000f;
+  --dsw-alias-interactive-bg-hover-solid: #e4eaf7;
+  --dsw-alias-interactive-bg-hover: #4d86f814;
+  --dsw-alias-label-caption: #7c8bab;
+  --dsw-alias-label-dimmed: #909dbb;
+  --dsw-alias-label-primary-dimmed: #3e4b6d;
+  --dsw-alias-label-primary-foreground: #fff;
+  --dsw-alias-label-primary-inverted: #fff;
+  --dsw-alias-label-primary: #1f2937;
+  --dsw-alias-label-secondary: #3e4b6d;
+  --dsw-alias-label-tertiary: #5f6e93;
+  --dsw-alias-markdown-citation: #e9edf799;
+  --dsw-alias-markdown-code-block-banner: #f3f5fb94;
+  --dsw-alias-markdown-code-block: #f3f5fb94;
+  --dsw-alias-markdown-code-segment-selected: #fffc;
+  --dsw-alias-markdown-code-segment-unselected: #eef1f999;
+  --dsw-alias-markdown-inline-code: #e7ecf599;
+  --dsw-alias-markdown-placeholder: #f3f5fb94;
+  --dsw-alias-markdown-tag: #e7ecf599;
+  --dsw-alias-scrollbar-bg-l1: #d8dfec;
+  --dsw-alias-scrollbar-bg-l2: #d8dfec;
+  --dsw-alias-scrollbar-hover-l1: #a5b7e2;
+  --dsw-alias-scrollbar-hover-l2: #a5b7e2;
+  --dsw-alias-state-business-primary: #4d86f8;
+  --dsw-alias-state-business-tertiary: #dce3f7;
+  --dsw-alias-state-error-primary: #c00000;
+  --dsw-alias-state-error-secondary: #e05c5c;
+  --dsw-alias-state-success-primary: #2e8e52;
+  --dsw-alias-state-success-secondary: #58b058;
+  --dsw-alias-state-success-tertiary: #dcefe2;
+  --dsw-alias-state-warn-label: #a3732a;
+  --dsw-alias-state-warn-primary: #c08a33;
+  --dsw-alias-state-warn-secondary: #d9a94f;
+  --dsw-alias-state-warn-tertiary: #f7ecd8;
+  --dsw-alias-toast-bg: #3b72e2;
+  --dsw-alias-tooltip-bg: #ffffe1;
+  --dsw-alias-tooltip-fg: #1a2238;
+  --dsw-specific-bubble-highlight: #c3cfee;
+  --dsw-specific-bubble: #dce3f7;
+  --dsw-specific-input-major: rgba(255, 255, 255, calc(1 - var(--dsw-skin-scrim, 0) * .4));
+  --dsw-specific-login-input: rgba(255, 255, 255, calc(1 - var(--dsw-skin-scrim, 0) * .4));
+  --dsw-specific-menu: #f3f5fbf0;
+  --dsw-specific-selector: #e4eaf7d9;
+  --dsw-specific-sidebar-fill: rgba(242, 245, 250, calc(1 - var(--dsw-skin-scrim, 0) * .5));
+  --dsw-specific-sidebar-nav-item-active-accent: #a5b7e2;
+  --dsw-specific-sidebar-nav-item-active: #dce3f7;
+  --dsw-specific-sidebar-nav-item-hover: #e4eaf7;
+  --dsw-specific-tip: #f3f5fb;
+}
+
+body[data-ds-dark-theme] {
+  --dsw-alias-bg-base: rgba(16, 22, 42, calc(var(--dsw-skin-scrim, 0) * .5));
+  --dsw-alias-bg-layer-1: rgba(26, 34, 56, calc(1 - var(--dsw-skin-scrim, 0) * .45));
+  --dsw-alias-bg-layer-2: rgba(32, 42, 68, calc(1 - var(--dsw-skin-scrim, 0) * .4));
+  --dsw-alias-bg-layer-3: rgba(38, 50, 79, calc(1 - var(--dsw-skin-scrim, 0) * .36));
+  --dsw-alias-bg-mask-1: #0000008c;
+  --dsw-alias-bg-mask-2: #0000004d;
+  --dsw-alias-bg-mask-3: #0009;
+  --dsw-alias-bg-mask-photo: #060914e6;
+  --dsw-alias-bg-module-platform: rgba(32, 42, 68, calc(1 - var(--dsw-skin-scrim, 0) * .4));
+  --dsw-alias-bg-multi-select: #2c3765cc;
+  --dsw-alias-bg-overlay: #1a2238eb;
+  --dsw-alias-bg-skeleton: #ffffff0f;
+  --dsw-alias-border-inverted2: #fff9;
+  --dsw-alias-border-inverted: #fff6;
+  --dsw-alias-border-l1: #a0b4e61f;
+  --dsw-alias-border-l2-darkmode-thin: #a0b4e626;
+  --dsw-alias-border-l2: #a0b4e62e;
+  --dsw-alias-border-l3: #a0b4e642;
+  --dsw-alias-border-l4: #a0b4e657;
+  --dsw-alias-brand-primary-invert: #10141f;
+  --dsw-alias-brand-primary-new-colorprimary-new-color: #7f96d2;
+  --dsw-alias-brand-primary: #7f96d2;
+  --dsw-alias-brand-text: #c3cfee;
+  --dsw-alias-button-contrast-fill: #3b72e2;
+  --dsw-alias-button-elevated-fill: #202a44;
+  --dsw-alias-button-floating-fill: #1a2238;
+  --dsw-alias-button-floating-hover: #2c3765;
+  --dsw-alias-button-ghost-active-border: #647ebf;
+  --dsw-alias-button-ghost-active-fill: #2c3765;
+  --dsw-alias-button-ghost-active-hover: #33417a;
+  --dsw-alias-button-info-fill: #3b72e2;
+  --dsw-alias-button-info-hover: #4d86f8;
+  --dsw-alias-button-primary-dimmed: #33417a;
+  --dsw-alias-button-primary-fill: #3b72e2;
+  --dsw-alias-button-primary-hover: #4d86f8;
+  --dsw-alias-button-tool-bar-fill-invisible: #a0b9eb5c;
+  --dsw-alias-button-tool-bar-fill: #a0b9eb80;
+  --dsw-alias-button-tool-bar-hover: #a0b9eb99;
+  --dsw-alias-interactive-bg-active: #a0b9eb24;
+  --dsw-alias-interactive-bg-hover-accent: #a0b9eb33;
+  --dsw-alias-interactive-bg-hover-danger: #e05c5c1f;
+  --dsw-alias-interactive-bg-hover-solid: #2c3765;
+  --dsw-alias-interactive-bg-hover: #ffffff12;
+  --dsw-alias-label-caption: #788bb4;
+  --dsw-alias-label-dimmed: #6276a5;
+  --dsw-alias-label-primary-dimmed: #b4c0d6;
+  --dsw-alias-label-primary-foreground: #fff;
+  --dsw-alias-label-primary-inverted: #10141f;
+  --dsw-alias-label-primary: #dbe2f2;
+  --dsw-alias-label-secondary: #a9b7d0;
+  --dsw-alias-label-tertiary: #8b9cbc;
+  --dsw-alias-markdown-citation: #202a449e;
+  --dsw-alias-markdown-code-block-banner: #171e33a8;
+  --dsw-alias-markdown-code-block: #171e33a8;
+  --dsw-alias-markdown-code-segment-selected: #26324fbf;
+  --dsw-alias-markdown-code-segment-unselected: #1a223899;
+  --dsw-alias-markdown-inline-code: #1e27409e;
+  --dsw-alias-markdown-placeholder: #1a223899;
+  --dsw-alias-markdown-tag: #1e27409e;
+  --dsw-alias-scrollbar-bg-l1: #33406a;
+  --dsw-alias-scrollbar-bg-l2: #33406a;
+  --dsw-alias-scrollbar-hover-l1: #4d86f8;
+  --dsw-alias-scrollbar-hover-l2: #4d86f8;
+  --dsw-alias-state-business-primary: #7f96d2;
+  --dsw-alias-state-business-tertiary: #2c3765;
+  --dsw-alias-state-error-primary: #e05c5c;
+  --dsw-alias-state-error-secondary: #e07070;
+  --dsw-alias-state-success-primary: #58b058;
+  --dsw-alias-state-success-secondary: #58b058;
+  --dsw-alias-state-success-tertiary: #1e3f2c;
+  --dsw-alias-state-warn-label: #d9a94f;
+  --dsw-alias-state-warn-primary: #d9a94f;
+  --dsw-alias-state-warn-secondary: #d9a94f;
+  --dsw-alias-state-warn-tertiary: #4a3515;
+  --dsw-alias-toast-bg: #33417a;
+  --dsw-alias-tooltip-bg: #ffffe1;
+  --dsw-alias-tooltip-fg: #1a2238;
+  --dsw-specific-bubble-highlight: #33417a;
+  --dsw-specific-bubble: #2c3765;
+  --dsw-specific-input-major: rgba(26, 34, 56, calc(1 - var(--dsw-skin-scrim, 0) * .35));
+  --dsw-specific-login-input: rgba(26, 34, 56, calc(1 - var(--dsw-skin-scrim, 0) * .35));
+  --dsw-specific-menu: #1a2238f0;
+  --dsw-specific-selector: #1e2740d9;
+  --dsw-specific-sidebar-fill: rgba(29, 37, 57, calc(1 - var(--dsw-skin-scrim, 0) * .45));
+  --dsw-specific-sidebar-nav-item-active-accent: #33417a;
+  --dsw-specific-sidebar-nav-item-active: #2c3765;
+  --dsw-specific-sidebar-nav-item-hover: #202a44;
+  --dsw-specific-tip: #1a2238;
+}
+
+:root {
+  --dsh-scrollbar-thumb: var(--dsw-alias-scrollbar-bg-l2);
+  --dsh-scrollbar-thumb-hover: var(--dsw-alias-scrollbar-hover-l2);
+}
+
+body::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+body::-webkit-scrollbar-track {
+  background: #eef1f9;
+}
+
+body::-webkit-scrollbar-thumb {
+  background: #b4c3e8;
+  border: 2px solid #eef1f9;
+  border-radius: 5px;
+}
+
+body::-webkit-scrollbar-thumb:hover {
+  background: #7f96d2;
+}
+
+body::-webkit-scrollbar-corner {
+  background: #eef1f9;
+}
+
+body[data-ds-dark-theme]::-webkit-scrollbar-track, body[data-ds-dark-theme]::-webkit-scrollbar-corner {
+  background: #141a2b;
+}
+
+body[data-ds-dark-theme]::-webkit-scrollbar-thumb {
+  background: #455678;
+  border-color: #141a2b;
+}
+
+body[data-ds-dark-theme]::-webkit-scrollbar-thumb:hover {
+  background: #6276a5;
+}
+
+body::selection {
+  color: #fff;
+  background: #4d86f8;
+}
+
+body[data-ds-dark-theme]::selection {
+  color: #10141f;
+  background: #7f96d2;
+}
+
+body[data-ds-dark-theme] :focus-visible {
+  outline-color: var(--dsw-alias-state-business-primary);
+}
+
+:root {
+  --aion-bg-base: #fff9;
+  --aion-bg-1: #f3f5fb80;
+  --aion-bg-2: #e9edf79e;
+  --aion-bg-3: #4d86f838;
+  --aion-bg-4: #4d86f857;
+  --aion-bg-hover: #4d86f814;
+  --aion-bg-active: #4d86f824;
+  --aion-text-primary: #1f2937;
+  --aion-text-secondary: #3e4b6d;
+  --aion-text-tertiary: #5f6e93;
+  --aion-text-disabled: #909dbb;
+  --aion-primary: #4d86f8;
+  --aion-success: #2e8e52;
+  --aion-warning: #c08a33;
+  --aion-danger: #c00000;
+  --aion-brand: #a5b7e2;
+  --aion-aou-1: #eef1fb;
+  --aion-aou-2: #dce3f7;
+  --aion-aou-3: #a5b7e2;
+  --aion-aou-4: #647ebf;
+  --aion-aou-5: #4d86f8;
+  --aion-aou-6: #33417a;
+  --aion-fill-2: #4d86f80f;
+  --aion-fill-3: #4d86f824;
+  --aion-border-base: #2c3a732e;
+  --aion-overlay-shadow: 0 8px 24px #1c254640;
+  --aion-font-sans: -apple-system, "system-ui", "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
+  --aion-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+body[data-ds-dark-theme] {
+  --aion-bg-base: #1a2238d1;
+  --aion-bg-1: #1a223880;
+  --aion-bg-2: #202a4499;
+  --aion-bg-3: #a0b4e633;
+  --aion-bg-4: #a0b9eb4d;
+  --aion-bg-hover: #a0b9eb1f;
+  --aion-bg-active: #a0b9eb33;
+  --aion-text-primary: #dbe2f2;
+  --aion-text-secondary: #a9b7d0;
+  --aion-text-tertiary: #8b9cbc;
+  --aion-text-disabled: #6276a5;
+  --aion-primary: #7f96d2;
+  --aion-success: #58b058;
+  --aion-warning: #d9a94f;
+  --aion-danger: #e05c5c;
+  --aion-brand: #a5b7e2;
+  --aion-aou-1: #202a44;
+  --aion-aou-2: #26304f;
+  --aion-aou-3: #33417a;
+  --aion-aou-4: #4d86f8;
+  --aion-aou-5: #647ebf;
+  --aion-aou-6: #94a8dc;
+  --aion-fill-2: #a0b9eb1f;
+  --aion-fill-3: #a0b9eb33;
+  --aion-border-base: #a0b4e626;
+  --aion-overlay-shadow: 0 12px 32px #00000080;
+}
+
+[data-dsh-part="dialog"] {
+  backdrop-filter: blur(14px);
+  border-color: #a0b4e666;
+}
+
+body[data-ds-dark-theme] [data-dsh-part="dialog"] {
+  border-color: #a0b4e638;
+}

package/skin.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://schemas.linxin666.org/dsh-skin/v2.json",
+  "skinManifestVersion": 2,
+  "id": "solar-orbit",
+  "name": "太阳系轨道",
+  "nameEn": "Solar Orbit",
+  "author": "kkabuka",
+  "tagline": "自动运行的线稿太阳系 · 行星按颜色区分 · 流星偶划夜空",
+  "description": "纯自动运行的艺术化太阳系背景皮肤：八颗行星绕日公转（内快外慢），火星红、地球蓝、土星带环…… 木火之间点缀小行星带，偶有流星划过。全部原生 Canvas 实现，配色随深浅主题自适应。",
+  "tags": [
+    "solar",
+    "orbit",
+    "planets",
+    "space",
+    "meteor",
+    "canvas",
+    "animation"
+  ],
+  "accent": "#e8a33d",
+  "order": 5,
+  "version": "0.1.0",
+  "contributes": {
+    "stylesheet": "skin.css",
+    "patches": "patches.css"
+  },
+  "facets": {
+    "client": {
+      "entry": "hooks.mjs",
+      "apiVersion": "x-org.linxin666.skin-center/v1alpha1"
+    }
+  }
+}