@lark-apaas/coding-registry-buildless 0.1.9 → 0.1.10-alpha.20260728111946

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/components/ios-frame.jsx +6 -2
  2. package/components/tweaks-panel.jsx +75 -69
  3. package/package.json +1 -1
  4. package/scripts/deck-stage.js +11 -4
package/components/ios-frame.jsx CHANGED
@@ -141,8 +141,12 @@ function IOSDevice({
141
141
  <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
142
142
  <IOSStatusBar dark={dark} />
143
143
  </div>
144
- {/* content */}
145
- <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
144
+ {/* content — isolate:isolate keeps the screen in its own stacking
145
+ context so any z-index authored inside it stays *below* the frame
146
+ chrome (status bar z:10, island z:50, home indicator z:60); a
147
+ sticky/opaque header with a high z-index can no longer paint over
148
+ the status bar. */}
149
+ <div style={{ height: '100%', display: 'flex', flexDirection: 'column', isolation: 'isolate' }}>
146
150
  <div style={{ flex: 1, overflow: 'auto' }}>{children}</div>
147
151
  {keyboard && <IOSKeyboard dark={dark} />}
148
152
  </div>
package/components/tweaks-panel.jsx CHANGED
@@ -62,107 +62,113 @@
62
62
  /* END USAGE */
63
63
  // ─────────────────────────────────────────────────────────────────────────────
64
64
 
65
+ // Palette follows the Arco/Semi neutral token system the 创意设计模式 "设计风格"
66
+ // panel is designed in (Figma node 2008-22724): a solid white card on neutral
67
+ // grays instead of the previous warm-glass look.
68
+ // text-1 #1F2329 text-2 #646A73 text-3 #86909C
69
+ // border #DEE0E3 fill #EBECEE / #F2F3F5 accent(selected/on) #1F2329
65
70
  const __TWEAKS_STYLE = `
66
71
  .twk-panel{position:fixed;right:16px;top:16px;z-index:2147483646;width:280px;
67
72
  max-height:calc(100vh - 32px);display:flex;flex-direction:column;
68
73
  transform:scale(var(--dc-inv-zoom,1));transform-origin:top right;
69
- background:rgba(250,249,247,.78);color:#29261b;
70
- -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
71
- border:.5px solid rgba(255,255,255,.6);border-radius:14px;
72
- box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
73
- font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
74
+ background:#fff;color:#1F2329;
75
+ border:.5px solid #DEE0E3;border-radius:12px;
76
+ box-shadow:0 8px 24px 8px rgba(0,0,0,.04),0 6px 12px rgba(0,0,0,.04),0 2px 6px rgba(0,0,0,.04);
77
+ font:12px/1.5 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
74
78
  .twk-hd{display:flex;align-items:center;justify-content:space-between;
75
- padding:10px 8px 10px 14px;cursor:move;user-select:none}
76
- .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
77
- .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
78
- width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
79
- .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
80
- .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
79
+ padding:12px 12px 12px 16px;cursor:move;user-select:none;
80
+ border-bottom:.5px solid #EBECEE}
81
+ .twk-hd b{font-size:14px;font-weight:600;letter-spacing:.01em;color:#1F2329}
82
+ .twk-x{appearance:none;border:0;background:transparent;color:#86909C;
83
+ width:24px;height:24px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
84
+ .twk-x:hover{background:#F2F3F5;color:#1F2329}
85
+ .twk-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:14px;
81
86
  overflow-y:auto;overflow-x:hidden;min-height:0;
82
- scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
87
+ scrollbar-width:thin;scrollbar-color:#DEE0E3 transparent}
83
88
  .twk-body::-webkit-scrollbar{width:8px}
84
89
  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
85
- .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
90
+ .twk-body::-webkit-scrollbar-thumb{background:#DEE0E3;border-radius:4px;
86
91
  border:2px solid transparent;background-clip:content-box}
87
- .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
92
+ .twk-body::-webkit-scrollbar-thumb:hover{background:#C9CDD4;
88
93
  border:2px solid transparent;background-clip:content-box}
89
- .twk-row{display:flex;flex-direction:column;gap:5px}
94
+ .twk-row{display:flex;flex-direction:column;gap:8px}
90
95
  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
91
96
  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
92
- color:rgba(41,38,27,.72)}
97
+ color:#1F2329}
93
98
  .twk-lbl>span:first-child{font-weight:500}
94
- .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
99
+ .twk-val{color:#646A73;font-variant-numeric:tabular-nums}
95
100
 
96
- .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
97
- color:rgba(41,38,27,.45);padding:10px 0 0}
101
+ .twk-sect{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
102
+ color:#86909C;padding:10px 0 0}
98
103
  .twk-sect:first-child{padding-top:0}
99
104
 
100
- .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:26px;padding:0 8px;
101
- border:.5px solid rgba(0,0,0,.1);border-radius:7px;
102
- background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
103
- .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
104
- select.twk-field{padding-right:22px;
105
- background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
106
- background-repeat:no-repeat;background-position:right 8px center}
105
+ .twk-field{appearance:none;box-sizing:border-box;width:100%;min-width:0;height:32px;padding:0 10px;
106
+ border:.5px solid #DEE0E3;border-radius:8px;
107
+ background:#fff;color:inherit;font:inherit;outline:none}
108
+ .twk-field:focus{border-color:#1F2329;box-shadow:0 0 0 2px rgba(31,35,41,.1)}
109
+ select.twk-field{padding-right:24px;
110
+ background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%234E5969' d='M0 0h10L5 6z'/></svg>");
111
+ background-repeat:no-repeat;background-position:right 10px center}
107
112
 
108
113
  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
109
- border-radius:999px;background:rgba(0,0,0,.12);outline:none}
114
+ border-radius:999px;background:#EBECEE;outline:none}
110
115
  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
111
- width:14px;height:14px;border-radius:50%;background:#fff;
112
- border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
113
- .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
114
- background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
116
+ width:16px;height:16px;border-radius:50%;background:#fff;
117
+ border:.5px solid #DEE0E3;box-shadow:0 1px 3px rgba(0,0,0,.16);cursor:default}
118
+ .twk-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
119
+ background:#fff;border:.5px solid #DEE0E3;box-shadow:0 1px 3px rgba(0,0,0,.16);cursor:default}
115
120
 
116
121
  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
117
- background:rgba(0,0,0,.06);user-select:none}
122
+ background:#EBECEE;user-select:none}
118
123
  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
119
- background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
124
+ background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);
120
125
  transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
121
126
  .twk-seg.dragging .twk-seg-thumb{transition:none}
122
127
  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
123
- background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
128
+ background:transparent;color:#646A73;font:inherit;font-weight:500;min-height:28px;
124
129
  border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
125
- overflow-wrap:anywhere}
126
-
127
- .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
128
- background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
129
- .twk-toggle[data-on="1"]{background:#34c759}
130
- .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
131
- background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
132
- .twk-toggle[data-on="1"] i{transform:translateX(14px)}
133
-
134
- .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:26px;padding:0 0 0 8px;
135
- border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
136
- .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
130
+ overflow-wrap:anywhere;transition:color .15s}
131
+ .twk-seg button[aria-checked="true"]{color:#1F2329}
132
+
133
+ .twk-toggle{position:relative;width:36px;height:20px;border:0;border-radius:999px;
134
+ background:#E4E6E8;transition:background .15s;cursor:default;padding:0}
135
+ .twk-toggle[data-on="1"]{background:#1F2329}
136
+ .twk-toggle i{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
137
+ background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
138
+ .twk-toggle[data-on="1"] i{transform:translateX(16px)}
139
+
140
+ .twk-num{display:flex;align-items:center;box-sizing:border-box;min-width:0;height:32px;padding:0 0 0 10px;
141
+ border:.5px solid #DEE0E3;border-radius:8px;background:#fff}
142
+ .twk-num-lbl{font-weight:500;color:#646A73;cursor:ew-resize;
137
143
  user-select:none;padding-right:8px}
138
144
  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
139
- font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
145
+ font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 10px 0 0;
140
146
  outline:none;color:inherit;-moz-appearance:textfield}
141
147
  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
142
148
  -webkit-appearance:none;margin:0}
143
- .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
149
+ .twk-num-unit{padding-right:10px;color:#86909C}
144
150
 
145
- .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
146
- background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
147
- .twk-btn:hover{background:rgba(0,0,0,.88)}
148
- .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
149
- .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
151
+ .twk-btn{appearance:none;height:32px;padding:0 14px;border:0;border-radius:8px;
152
+ background:#1F2329;color:#fff;font:inherit;font-weight:500;cursor:default}
153
+ .twk-btn:hover{background:#333A44}
154
+ .twk-btn.secondary{background:#F2F3F5;color:#1F2329}
155
+ .twk-btn.secondary:hover{background:#E5E6EB}
150
156
 
151
- .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
152
- border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
157
+ .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:24px;
158
+ border:.5px solid #DEE0E3;border-radius:6px;padding:0;cursor:default;
153
159
  background:transparent;flex-shrink:0}
154
160
  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
155
161
  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
156
162
  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
157
163
 
158
- .twk-chips{display:flex;gap:6px}
159
- .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:46px;
164
+ .twk-chips{display:flex;gap:8px}
165
+ .twk-chip{position:relative;appearance:none;flex:1;min-width:0;height:40px;
160
166
  padding:0;border:0;border-radius:6px;overflow:hidden;cursor:default;
161
- box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.06);
167
+ box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
162
168
  transition:transform .12s cubic-bezier(.3,.7,.4,1),box-shadow .12s}
163
169
  .twk-chip:hover{transform:translateY(-1px);
164
- box-shadow:0 0 0 .5px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.12)}
165
- .twk-chip[data-on="1"]{box-shadow:0 0 0 1.5px rgba(0,0,0,.85),
170
+ box-shadow:0 0 0 .5px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.1)}
171
+ .twk-chip[data-on="1"]{box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.85),
166
172
  0 2px 6px rgba(0,0,0,.15)}
167
173
  .twk-chip>span{position:absolute;top:0;bottom:0;right:0;width:34%;
168
174
  display:flex;flex-direction:column;box-shadow:-1px 0 0 rgba(0,0,0,.1)}
@@ -347,8 +353,8 @@ function TweakRadio({ label, value, options, onChange }) {
347
353
  valueRef.current = value;
348
354
 
349
355
  // Segments wrap mid-word once per-segment width runs out. The track is
350
- // ~248px (280 panel − 28 body pad − 4 seg pad), each button loses 12px
351
- // to its own padding, and 11.5px system-ui averages ~6.3px/char — so 2
356
+ // ~244px (280 panel − 32 body pad − 4 seg pad), each button loses 12px
357
+ // to its own padding, and 12px system-ui averages ~6.6px/char — so 2
352
358
  // options fit ~16 chars each, 3 fit ~10. Past that (or >3 options), fall
353
359
  // back to a dropdown rather than wrap.
354
360
  const labelLen = (o) => String(typeof o === 'object' ? o.label : o).length;
@@ -559,23 +565,23 @@ Object.assign(window, {
559
565
  @keyframes twk-blink{50%{opacity:0}}
560
566
  @keyframes twk-fadein{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:none}}
561
567
  .twk-sugg{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:8px;
562
- background:rgba(0,0,0,.04);border:.5px solid rgba(0,0,0,.06);transition:all .15s}
563
- .twk-sugg:focus-within{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12)}
568
+ background:#F7F8FA;border:.5px solid #EBECEE;transition:all .15s}
569
+ .twk-sugg:focus-within{background:#F2F3F5;border-color:#DEE0E3}
564
570
  .twk-sugg-field{position:relative;flex:1;min-width:0}
565
571
  .twk-sugg-field input{width:100%;height:20px;border:0;background:transparent;
566
572
  font:inherit;outline:none;color:inherit}
567
573
  .twk-sugg-ghost{position:absolute;inset:0;display:flex;align-items:center;
568
- color:rgba(41,38,27,.42);pointer-events:none;white-space:nowrap;overflow:hidden}
569
- .twk-sugg-ghost.hint{color:rgba(41,38,27,.28)}
574
+ color:#86909C;pointer-events:none;white-space:nowrap;overflow:hidden}
575
+ .twk-sugg-ghost.hint{color:#A9AEB8}
570
576
  .twk-sugg-caret{display:inline-block;width:1px;height:13px;margin-left:1px;
571
577
  border-right:1.5px solid currentColor;opacity:.5;animation:twk-blink 1s step-end infinite}
572
578
  .twk-sugg-ideas{appearance:none;border:0;background:transparent;font:inherit;
573
- font-size:10.5px;font-weight:600;color:rgba(41,38,27,.6);cursor:default;padding:0 2px;
579
+ font-size:10.5px;font-weight:600;color:#646A73;cursor:default;padding:0 2px;
574
580
  white-space:nowrap;animation:twk-fadein .25s ease}
575
- .twk-sugg-ideas:hover{color:rgba(41,38,27,.85)}
581
+ .twk-sugg-ideas:hover{color:#1F2329}
576
582
  .twk-sugg-ideas svg{color:#D97757}
577
583
  .twk-sugg-send{appearance:none;border:0;height:20px;padding:0 8px;border-radius:5px;
578
- background:#29261b;color:#fff;font:inherit;font-size:10px;font-weight:600;cursor:default}
584
+ background:#1F2329;color:#fff;font:inherit;font-size:10px;font-weight:600;cursor:default}
579
585
  `;
580
586
  document.head.appendChild(s);
581
587
  })();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lark-apaas/coding-registry-buildless",
3
- "version": "0.1.9",
3
+ "version": "0.1.10-alpha.20260728111946",
4
4
  "description": "Miaoda registry (buildless runtime) — shadcn-style copy-in SDKs (globals + CDN-pinned, browser Babel) for buildless static HTML stacks",
5
5
  "type": "module",
6
6
  "files": [
package/scripts/deck-stage.js CHANGED
@@ -1956,7 +1956,7 @@
1956
1956
  // it scales clones by the rail's _thumbScale, so rewrite the
1957
1957
  // transform for this strip's fixed 132px frames.
1958
1958
  const entry = { slide: e2.slide, frame, host: null, clone: null };
1959
- this._materialize(entry);
1959
+ this._materialize(entry, false); // throwaway entry (not in _thumbs) — skip the recap timer
1960
1960
  if (entry.clone) entry.clone.style.transform = 'scale(' + (132 / this.designWidth) + ')';
1961
1961
  return { el: t, i: e2.i };
1962
1962
  });
@@ -2260,7 +2260,7 @@
2260
2260
  }
2261
2261
 
2262
2262
  /** Lazily build the clone for a thumb that has scrolled into view. */
2263
- _materialize(entry) {
2263
+ _materialize(entry, scheduleRecap = true) {
2264
2264
  if (entry.host) return;
2265
2265
  const dw = this.designWidth, dh = this.designHeight;
2266
2266
  let clone = entry.slide.cloneNode(true);
@@ -2375,13 +2375,20 @@
2375
2375
  // caught a blank or mid-animation canvas. Re-snapshot once after the
2376
2376
  // animation settles and overwrite each <img>. Guarded so a thumb that was
2377
2377
  // refreshed (host swapped) or removed (img detached) since is left alone.
2378
- if (canvasImgs.length) {
2378
+ // scheduleRecap=false for callers whose entry isn't tracked in _thumbs
2379
+ // (the mobile filmstrip builds throwaway entries the cleanup paths can't
2380
+ // reach) — otherwise the timer leaks and, since that path clones the
2381
+ // whole deck eagerly, N recaps would fire together as a toDataURL storm.
2382
+ if (scheduleRecap && canvasImgs.length) {
2379
2383
  clearTimeout(entry._canvasRecapTimer);
2380
2384
  entry._canvasRecapTimer = setTimeout(() => {
2381
2385
  entry._canvasRecapTimer = null;
2382
2386
  if (entry.host !== host) return;
2383
2387
  canvasImgs.forEach(({ orig, img }) => {
2384
- if (!img.isConnected || !orig.width || !orig.height) return;
2388
+ // orig.isConnected: if the app swapped the chart's <canvas> since,
2389
+ // the detached node still reports nonzero width/height — skip it so
2390
+ // we don't paint stale pixels (the swap already re-cloned the thumb).
2391
+ if (!img.isConnected || !orig.isConnected || !orig.width || !orig.height) return;
2385
2392
  try { img.src = orig.toDataURL(); } catch (e) {}
2386
2393
  });
2387
2394
  }, CANVAS_RECAP_MS);