@dstackai/sqircle 0.1.1 → 0.1.2

package/dist/style.css

@@ -1,2 +1,2 @@
-.squircle-scene{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:0 0;width:100%;height:auto;display:block;overflow:visible}.squircle-scene.sq-theme-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.sq-layer{cursor:pointer}.sq-layer.is-selected{outline:none}.sq-variant{transition:opacity var(--sq-transition-ms,.22s) ease}.sq-hover{opacity:0;pointer-events:none}.sq-layer.sq-has-hover:hover>.sq-base{opacity:0}.sq-layer.sq-has-hover:hover>.sq-hover{opacity:1}.sq-face{pointer-events:all;shape-rendering:geometricprecision;stroke-linejoin:round}.sq-hidden{fill:none;pointer-events:none;stroke-dasharray:8 8;stroke-linecap:round;stroke-linejoin:round}.sq-inlay{fill:none;pointer-events:none;shape-rendering:geometricprecision;stroke-dasharray:9 8;stroke-linejoin:round}.sq-label{clip-rule:evenodd;fill-rule:evenodd;paint-order:stroke;pointer-events:none;shape-rendering:geometricprecision;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;transition:fill .25s,stroke .25s,stroke-width .25s,opacity .25s}:root{color:#111821;background:0 0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:0 0;margin:0}button,input,select{font:inherit}.squircle-editor{--editor-text:#111821;--editor-muted:#697484;--editor-faint:#8b98aa;--editor-soft:#f6f9fc;--editor-panel:#ffffffdb;--editor-panel-soft:#ffffffb8;--editor-panel-muted:#ffffff75;--editor-line:#dfe7f1;--editor-line-strong:#dbe5ef;--editor-control-bg:#fff;--editor-control-text:#17202b;--editor-active-text:#073c68;--editor-accent:#09f;--editor-accent-2:#7c58f7;--editor-accent-soft:#0099ff24;--editor-danger:#9c2340;--editor-code-bg:#ffffffb8;--editor-code-text:#263140;--editor-stage-sheen:#b8e7ff2e;color:var(--editor-text);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;grid-template-rows:auto minmax(0,1fr);width:min(100%,1320px);min-height:100vh;margin:0 auto;padding:clamp(14px,3vw,32px);display:grid}.squircle-editor-dark{--editor-text:#f4f8ff;--editor-muted:#aab7c8;--editor-faint:#7f8da2;--editor-soft:#101925;--editor-panel:#0d141ff0;--editor-panel-soft:#151f2ddb;--editor-panel-muted:#0c131db8;--editor-line:#25364a;--editor-line-strong:#33485f;--editor-control-bg:#121d2b;--editor-control-text:#eef6ff;--editor-active-text:#e5f6ff;--editor-accent:#42b4ff;--editor-accent-2:#a88cff;--editor-accent-soft:#42b4ff2b;--editor-danger:#ff8ca3;--editor-code-bg:#090e16d6;--editor-code-text:#d8e8ff;--editor-stage-sheen:#42b4ff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.squircle-editor-topbar{justify-content:space-between;align-items:end;gap:18px;padding-bottom:14px;display:flex}.squircle-editor-topbar h1{letter-spacing:0;margin:0;font-size:clamp(28px,5vw,48px)}.squircle-editor-topbar p{color:var(--editor-muted);margin:4px 0 0;font-size:14px;font-weight:650}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.squircle-editor button{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);cursor:pointer;border-radius:6px;font-weight:800}.squircle-editor button:hover{border-color:color-mix(in srgb, var(--editor-accent) 52%, transparent);color:var(--editor-active-text)}.squircle-editor button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.icon-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid}.primary-action{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line-strong));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent)}.danger{color:var(--editor-danger)}.theme-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;gap:2px;padding:3px;display:inline-flex}.theme-switch button{min-width:68px;min-height:28px;color:var(--editor-muted);background:0 0;border-color:#0000}.theme-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 48%, var(--editor-line));color:var(--editor-active-text);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 92%, var(--editor-accent)), var(--editor-panel-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent), 0 1px 5px #0f141a1f}.squircle-editor-workspace{border:1px solid var(--editor-line);background:linear-gradient(145deg, var(--editor-stage-sheen), transparent 48%), var(--editor-panel);border-radius:8px;grid-template-columns:minmax(250px,300px) minmax(520px,1fr) minmax(300px,380px);min-height:0;display:grid;overflow:hidden}@media (width>=1061px){.squircle-editor{height:100vh;overflow:hidden}}.side-panel{min-width:0;padding:14px;overflow:auto}.layers-panel{align-content:start;gap:14px;display:grid}.side-panel:first-child{border-right:1px solid var(--editor-line)}.inspector-panel{border-left:1px solid var(--editor-line)}.panel-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-heading h2{margin:0;font-size:15px}.panel-heading span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:850;display:block}.panel-actions{justify-content:flex-end;gap:6px;display:flex}.squircle-editor-layer-list{gap:9px;display:grid}.squircle-editor-layer-row{background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:7px;padding:3px;transition:border-color .17s,background .17s,box-shadow .17s;display:grid}.layer-select{text-align:left;background:0 0;border-color:#0000;justify-items:start;gap:8px;min-width:0;padding:10px;display:grid}.layer-select strong{font-size:13px}.layer-card-topline,.layer-card-meta{align-items:center;width:100%;min-width:0;display:flex}.layer-card-topline{gap:7px}.layer-card-meta{justify-content:space-between;gap:8px}.layer-number{background:var(--editor-panel-soft);width:25px;min-width:25px;height:22px;color:var(--editor-faint);border-radius:5px;justify-content:center;align-items:center;font-size:11px;font-weight:900;display:inline-flex}.material-pill{border:1px solid var(--editor-line);color:var(--editor-muted);text-transform:uppercase;border-radius:999px;margin-left:auto;padding:3px 6px;font-size:10px;font-weight:900}.material-pill-solid{border-color:color-mix(in srgb, var(--editor-accent) 40%, var(--editor-line));color:var(--editor-active-text)}.material-pill-transparent{border-color:color-mix(in srgb, var(--editor-accent-2) 32%, var(--editor-line));color:color-mix(in srgb, var(--editor-active-text) 72%, var(--editor-accent-2))}.layer-palette-chip,.layer-feature-tags{min-width:0;color:var(--editor-muted);align-items:center;font-size:11px;font-weight:820;display:inline-flex}.layer-palette-chip{gap:6px}.layer-feature-tags{flex-wrap:wrap;justify-content:flex-end;gap:4px}.layer-feature-tags span{border:1px solid var(--editor-line);background:var(--editor-panel-muted);border-radius:999px;padding:2px 5px;font-size:10px}.layer-select span{color:var(--editor-muted)}.squircle-editor-layer-row.is-active{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), transparent 65%), var(--editor-panel-soft);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 13%, transparent), inset 4px 0 0 color-mix(in srgb, var(--editor-accent) 76%, var(--editor-accent-2));color:var(--editor-active-text)}.squircle-editor-layer-row.is-active .layer-number{background:color-mix(in srgb, var(--editor-accent) 18%, var(--editor-control-bg));color:var(--editor-active-text)}.layer-visibility{min-height:100%;color:var(--editor-muted);align-self:stretch}.layer-visibility[aria-pressed=false]{color:var(--editor-faint);opacity:.66}.squircle-editor-preview{grid-template-rows:auto minmax(320px,1fr) auto;gap:12px;min-width:0;min-height:0;padding:18px;display:grid}.preview-toolbar,.preview-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.preview-toolbar h2{margin:0;font-size:14px}.preview-toolbar span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:820;display:block}.preview-actions{justify-content:flex-end}.code-toggle-button{align-items:center;gap:7px;padding:0 10px;display:inline-flex}.code-toggle-button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 56%, var(--editor-line));background:var(--editor-accent-soft);color:var(--editor-active-text)}.preview-stage{border:1px solid color-mix(in srgb, var(--editor-line) 74%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-panel-soft) 72%, transparent), transparent 56%), color-mix(in srgb, var(--editor-panel-muted) 84%, transparent);border-radius:8px;place-items:center;min-height:0;display:grid;overflow:hidden}.preview-stage .squircle-scene{place-self:center;max-width:660px;padding:16px}.code-panel{border:1px solid var(--editor-line);background:var(--editor-code-bg);border-radius:6px;grid-template-rows:auto;min-width:0;display:grid;overflow:hidden}.code-panel.is-open{grid-template-rows:auto minmax(120px,220px)}.code-panel-header{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;display:flex}.code-panel-header h2{color:var(--editor-control-text);letter-spacing:0;margin:0;font-size:13px}.code-panel-header p{color:var(--editor-muted);margin:1px 0 0;font-size:11px;font-weight:760}.copy-code-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid;position:relative}.copy-status{border:1px solid var(--editor-line);background:var(--editor-control-bg);color:var(--editor-active-text);opacity:0;pointer-events:none;border-radius:5px;padding:3px 6px;font-size:11px;font-weight:850;transition:opacity .16s,transform .16s;position:absolute;bottom:calc(100% + 5px);right:0;transform:translateY(2px)}.copy-status:not(:empty){opacity:1;transform:translateY(0)}.code-output{min-width:0;color:var(--editor-code-text);margin:0;padding:12px;font-size:11px;line-height:1.45;overflow:auto}.code-output code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.editor-section{border-top:1px solid var(--editor-line);gap:10px;padding:12px 0;display:grid}.editor-section:first-of-type{border-top:0;padding-top:0}.editor-section h3{color:var(--editor-muted);letter-spacing:0;text-transform:uppercase;margin:0;font-size:12px}.inspector-heading{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:start;gap:12px;padding-bottom:12px;display:flex}.inspector-heading h2{margin:1px 0 0;font-size:18px}.inspector-heading p{color:var(--editor-muted);margin:4px 0 0;font-size:12px;font-weight:760}.inspector-kicker{color:var(--editor-faint);text-transform:uppercase;font-size:11px;font-weight:900}.state-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:12px 0 2px;padding:4px;display:grid}.state-switch button{min-height:34px;color:var(--editor-muted);background:0 0;border-color:#0000;position:relative}.state-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 58%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:0 1px 5px #0f141a1a}.state-dot{background:var(--editor-accent);border-radius:50%;width:6px;height:6px;position:absolute;top:7px;right:9px}.editor-section-details{gap:0}.editor-section-details summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.editor-section-details summary::-webkit-details-marker{display:none}.editor-section-details summary:after{content:"+";color:var(--editor-muted);font-size:16px;font-weight:850}.editor-section-details[open] summary:after{content:"-"}.editor-section-body{gap:10px;padding-top:10px;display:grid}.field{color:var(--editor-muted);gap:5px;font-size:12px;font-weight:800;display:grid}.variant-controls{gap:11px;display:grid}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.feature-switch{text-align:left;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:42px;padding:0 10px;display:flex}.feature-switch[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 72%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.feature-switch-label{font-size:13px;font-weight:900}.feature-switch-state{color:var(--editor-muted);text-transform:uppercase;font-size:11px;font-weight:900}.nested-fields{border:1px solid color-mix(in srgb, var(--editor-line) 82%, transparent);background:var(--editor-panel-muted);border-radius:8px;gap:9px;padding:10px;display:grid}.field input[type=text],.field input[type=range]{width:100%}.field input[type=text]{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);border-radius:6px;padding:0 8px}.segmented-field{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:3px;padding:3px;display:grid}.segmented-field button{min-width:0;min-height:30px;color:var(--editor-muted);background:0 0;border-color:#0000;padding:0 7px;font-size:12px}.segmented-field button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 54%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 14%, transparent), 0 1px 4px #0f141a1a}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.palette-grid button{min-width:0;min-height:32px;color:var(--editor-muted);grid-template-columns:auto 1fr;align-items:center;gap:5px;padding:0 6px;font-size:12px;display:grid}.palette-grid button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 62%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.palette-swatch{border:1px solid var(--editor-line);border-radius:4px;width:16px;height:16px}.forced-token{border:1px dashed var(--editor-line-strong);background:var(--editor-panel-muted);min-height:32px;color:var(--editor-muted);border-radius:6px;align-items:center;padding:0 9px;font-size:12px;font-weight:850;display:flex}.empty-note{color:var(--editor-muted);align-content:start;gap:12px;margin:0;font-size:13px;font-weight:700;display:grid}.empty-note h2{color:var(--editor-text);margin:0;font-size:16px}.empty-note .primary-action{width:max-content;padding:0 12px}@media (width<=1060px){.squircle-editor-workspace{grid-template-columns:1fr}.side-panel:first-child,.inspector-panel{border:0;border-bottom:1px solid var(--editor-line)}}@media (width<=700px){.squircle-editor{max-width:100%;overflow-x:hidden}.squircle-editor-topbar{flex-direction:column;align-items:stretch}.topbar-title{min-width:0}.squircle-editor-topbar p{overflow-wrap:anywhere}.topbar-actions{justify-content:stretch}.topbar-actions button{flex:1}.squircle-editor-workspace,.side-panel,.squircle-editor-preview,.preview-stage,.code-panel{width:100%;min-width:0;max-width:100%}.squircle-editor-layer-row{grid-template-columns:minmax(0,1fr);padding-right:76px;position:relative}.layer-visibility{z-index:2;height:34px;min-height:34px;position:absolute;top:auto;bottom:9px;right:46px}.layer-select{overflow:hidden}.layer-card-meta{flex-direction:column;align-items:flex-start}.preview-toolbar{flex-direction:column;align-items:stretch}.preview-actions{justify-content:stretch}.code-toggle-button{flex:1;justify-content:center}.squircle-editor-preview{padding:10px}.preview-stage{min-height:320px}.preview-stage .squircle-scene{width:min(92%,360px);max-width:360px;padding:8px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}}
+.squircle-scene{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background:0 0;width:100%;height:auto;display:block;overflow:visible}.squircle-scene.sq-theme-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.sq-layer{cursor:pointer}.sq-layer.is-selected{outline:none}.sq-variant{transition:opacity var(--sq-transition-ms,.22s) ease}.sq-hover{opacity:0;pointer-events:none}.sq-layer.sq-has-hover:hover>.sq-base{opacity:0}.sq-layer.sq-has-hover:hover>.sq-hover{opacity:1}.sq-face{pointer-events:all;shape-rendering:geometricprecision;stroke-linejoin:round}.sq-hidden{fill:none;pointer-events:none;stroke-dasharray:8 8;stroke-linecap:round;stroke-linejoin:round}.sq-inlay{fill:none;pointer-events:none;shape-rendering:geometricprecision;stroke-dasharray:9 8;stroke-linejoin:round}.sq-label{clip-rule:evenodd;fill-rule:evenodd;paint-order:stroke;pointer-events:none;shape-rendering:geometricprecision;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1;transition:fill .25s,stroke .25s,stroke-width .25s,opacity .25s}:root{color:#111821;background:0 0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:0 0;margin:0}button,input,select{font:inherit}.squircle-editor{--editor-text:#111821;--editor-muted:#697484;--editor-faint:#8b98aa;--editor-soft:#f6f9fc;--editor-panel:#ffffffdb;--editor-panel-soft:#ffffffb8;--editor-panel-muted:#ffffff75;--editor-line:#dfe7f1;--editor-line-strong:#dbe5ef;--editor-control-bg:#fff;--editor-control-text:#17202b;--editor-active-text:#073c68;--editor-accent:#09f;--editor-accent-2:#7c58f7;--editor-accent-soft:#0099ff24;--editor-danger:#9c2340;--editor-code-bg:#ffffffb8;--editor-code-text:#263140;--editor-stage-sheen:#b8e7ff2e;color:var(--editor-text);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;grid-template-rows:auto minmax(0,1fr);width:min(100%,1320px);min-height:100vh;margin:0 auto;padding:clamp(14px,3vw,32px);display:grid}.squircle-editor-dark{--editor-text:#f4f8ff;--editor-muted:#aab7c8;--editor-faint:#7f8da2;--editor-soft:#101925;--editor-panel:#0d141ff0;--editor-panel-soft:#151f2ddb;--editor-panel-muted:#0c131db8;--editor-line:#25364a;--editor-line-strong:#33485f;--editor-control-bg:#121d2b;--editor-control-text:#eef6ff;--editor-active-text:#e5f6ff;--editor-accent:#42b4ff;--editor-accent-2:#a88cff;--editor-accent-soft:#42b4ff2b;--editor-danger:#ff8ca3;--editor-code-bg:#090e16d6;--editor-code-text:#d8e8ff;--editor-stage-sheen:#42b4ff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.squircle-editor-topbar{justify-content:space-between;align-items:end;gap:18px;padding-bottom:14px;display:flex}.squircle-editor-topbar h1{letter-spacing:0;margin:0;font-size:clamp(28px,5vw,48px)}.squircle-editor-topbar p{color:var(--editor-muted);margin:4px 0 0;font-size:14px;font-weight:650}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.squircle-editor button{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);cursor:pointer;border-radius:6px;font-weight:800}.squircle-editor button:hover{border-color:color-mix(in srgb, var(--editor-accent) 52%, transparent);color:var(--editor-active-text)}.squircle-editor button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.icon-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid}.primary-action{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line-strong));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent)}.danger{color:var(--editor-danger)}.theme-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;gap:2px;padding:3px;display:inline-flex}.theme-switch button{min-width:68px;min-height:28px;color:var(--editor-muted);background:0 0;border-color:#0000}.theme-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 48%, var(--editor-line));color:var(--editor-active-text);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 92%, var(--editor-accent)), var(--editor-panel-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent), 0 1px 5px #0f141a1f}.squircle-editor-workspace{border:1px solid var(--editor-line);background:linear-gradient(145deg, var(--editor-stage-sheen), transparent 48%), var(--editor-panel);border-radius:8px;grid-template-columns:minmax(250px,300px) minmax(520px,1fr) minmax(300px,380px);min-height:0;display:grid;overflow:hidden}@media (width>=1061px){.squircle-editor{height:100vh;overflow:hidden}}.side-panel{min-width:0;padding:14px;overflow:auto}.layers-panel{align-content:start;gap:14px;display:grid}.side-panel:first-child{border-right:1px solid var(--editor-line)}.inspector-panel{border-left:1px solid var(--editor-line)}.panel-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-heading h2{margin:0;font-size:15px}.panel-heading span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:850;display:block}.panel-actions{justify-content:flex-end;gap:6px;display:flex}.squircle-editor-layer-list{gap:9px;display:grid}.squircle-editor-layer-row{background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:7px;padding:3px;transition:border-color .17s,background .17s,box-shadow .17s;display:grid}.layer-select{text-align:left;background:0 0;border-color:#0000;justify-items:start;gap:8px;min-width:0;padding:10px;display:grid}.layer-select strong{font-size:13px}.layer-card-topline,.layer-card-meta{align-items:center;width:100%;min-width:0;display:flex}.layer-card-topline{gap:7px}.layer-card-meta{justify-content:space-between;gap:8px}.layer-number{background:var(--editor-panel-soft);width:25px;min-width:25px;height:22px;color:var(--editor-faint);border-radius:5px;justify-content:center;align-items:center;font-size:11px;font-weight:900;display:inline-flex}.material-pill{border:1px solid var(--editor-line);color:var(--editor-muted);text-transform:uppercase;border-radius:999px;margin-left:auto;padding:3px 6px;font-size:10px;font-weight:900}.material-pill-solid{border-color:color-mix(in srgb, var(--editor-accent) 40%, var(--editor-line));color:var(--editor-active-text)}.material-pill-transparent{border-color:color-mix(in srgb, var(--editor-accent-2) 32%, var(--editor-line));color:color-mix(in srgb, var(--editor-active-text) 72%, var(--editor-accent-2))}.layer-palette-chip,.layer-feature-tags{min-width:0;color:var(--editor-muted);align-items:center;font-size:11px;font-weight:820;display:inline-flex}.layer-palette-chip{gap:6px}.layer-feature-tags{flex-wrap:wrap;justify-content:flex-end;gap:4px}.layer-feature-tags span{border:1px solid var(--editor-line);background:var(--editor-panel-muted);border-radius:999px;padding:2px 5px;font-size:10px}.layer-select span{color:var(--editor-muted)}.squircle-editor-layer-row.is-active{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), transparent 65%), var(--editor-panel-soft);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 13%, transparent), inset 4px 0 0 color-mix(in srgb, var(--editor-accent) 76%, var(--editor-accent-2));color:var(--editor-active-text)}.squircle-editor-layer-row.is-active .layer-number{background:color-mix(in srgb, var(--editor-accent) 18%, var(--editor-control-bg));color:var(--editor-active-text)}.layer-visibility{min-height:100%;color:var(--editor-muted);align-self:stretch}.layer-visibility[aria-pressed=false]{color:var(--editor-faint);opacity:.66}.squircle-editor-preview{grid-template-rows:auto minmax(320px,1fr) auto;gap:12px;min-width:0;min-height:0;padding:18px;display:grid}.preview-toolbar,.preview-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.preview-toolbar h2{margin:0;font-size:14px}.preview-toolbar span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:820;display:block}.preview-actions{justify-content:flex-end}.code-toggle-button{align-items:center;gap:7px;padding:0 10px;display:inline-flex}.code-toggle-button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 56%, var(--editor-line));background:var(--editor-accent-soft);color:var(--editor-active-text)}.preview-stage{border:1px solid color-mix(in srgb, var(--editor-line) 74%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-panel-soft) 72%, transparent), transparent 56%), color-mix(in srgb, var(--editor-panel-muted) 84%, transparent);border-radius:8px;place-items:center;min-height:0;display:grid;overflow:hidden}.preview-stage .squircle-scene{place-self:center;max-width:660px;padding:16px}.code-panel{border:1px solid var(--editor-line);background:var(--editor-code-bg);border-radius:6px;grid-template-rows:auto;min-width:0;display:grid;overflow:hidden}.code-panel.is-open{grid-template-rows:auto minmax(120px,220px)}.code-panel-header{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;display:flex}.code-panel-header h2{color:var(--editor-control-text);letter-spacing:0;margin:0;font-size:13px}.code-panel-header p{color:var(--editor-muted);margin:1px 0 0;font-size:11px;font-weight:760}.copy-code-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid;position:relative}.copy-status{border:1px solid var(--editor-line);background:var(--editor-control-bg);color:var(--editor-active-text);opacity:0;pointer-events:none;border-radius:5px;padding:3px 6px;font-size:11px;font-weight:850;transition:opacity .16s,transform .16s;position:absolute;bottom:calc(100% + 5px);right:0;transform:translateY(2px)}.copy-status:not(:empty){opacity:1;transform:translateY(0)}.code-output{min-width:0;color:var(--editor-code-text);margin:0;padding:12px;font-size:11px;line-height:1.45;overflow:auto}.code-output code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.editor-section{border-top:1px solid var(--editor-line);gap:10px;padding:12px 0;display:grid}.editor-section:first-of-type{border-top:0;padding-top:0}.editor-section h3{color:var(--editor-muted);letter-spacing:0;text-transform:uppercase;margin:0;font-size:12px}.inspector-heading{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:start;gap:12px;padding-bottom:12px;display:flex}.inspector-heading h2{margin:1px 0 0;font-size:18px}.inspector-heading p{color:var(--editor-muted);margin:4px 0 0;font-size:12px;font-weight:760}.inspector-kicker{color:var(--editor-faint);text-transform:uppercase;font-size:11px;font-weight:900}.state-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:12px 0 2px;padding:4px;display:grid}.state-switch button{min-height:34px;color:var(--editor-muted);background:0 0;border-color:#0000;position:relative}.state-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 58%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:0 1px 5px #0f141a1a}.state-dot{background:var(--editor-accent);border-radius:50%;width:6px;height:6px;position:absolute;top:7px;right:9px}.editor-section-details{gap:0}.editor-section-details summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.editor-section-details summary::-webkit-details-marker{display:none}.editor-section-details summary:after{content:"+";color:var(--editor-muted);font-size:16px;font-weight:850}.editor-section-details[open] summary:after{content:"-"}.editor-section-body{gap:10px;padding-top:10px;display:grid}.field{color:var(--editor-muted);gap:5px;font-size:12px;font-weight:800;display:grid}.variant-controls{gap:11px;display:grid}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.feature-switch{text-align:left;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:42px;padding:0 10px;display:flex}.feature-switch[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 72%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.feature-switch-label{font-size:13px;font-weight:900}.feature-switch-state{color:var(--editor-muted);text-transform:uppercase;font-size:11px;font-weight:900}.nested-fields{border:1px solid color-mix(in srgb, var(--editor-line) 82%, transparent);background:var(--editor-panel-muted);border-radius:8px;gap:9px;padding:10px;display:grid}.field input[type=text],.field input[type=range]{width:100%}.field input[type=text]{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);border-radius:6px;padding:0 8px}.segmented-field{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:3px;padding:3px;display:grid}.segmented-field button{min-width:0;min-height:30px;color:var(--editor-muted);background:0 0;border-color:#0000;padding:0 7px;font-size:12px}.segmented-field button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 54%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 14%, transparent), 0 1px 4px #0f141a1a}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.palette-grid button{min-width:0;min-height:32px;color:var(--editor-muted);grid-template-columns:auto 1fr;align-items:center;gap:5px;padding:0 6px;font-size:12px;display:grid}.palette-grid button span:last-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.palette-grid button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 62%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.palette-swatch{border:1px solid var(--editor-line);border-radius:4px;width:16px;height:16px}.forced-token{border:1px dashed var(--editor-line-strong);background:var(--editor-panel-muted);min-height:32px;color:var(--editor-muted);border-radius:6px;align-items:center;padding:0 9px;font-size:12px;font-weight:850;display:flex}.empty-note{color:var(--editor-muted);align-content:start;gap:12px;margin:0;font-size:13px;font-weight:700;display:grid}.empty-note h2{color:var(--editor-text);margin:0;font-size:16px}.empty-note .primary-action{width:max-content;padding:0 12px}@media (width<=1060px){.squircle-editor-workspace{grid-template-columns:1fr}.side-panel:first-child,.inspector-panel{border:0;border-bottom:1px solid var(--editor-line)}}@media (width<=700px){.squircle-editor{max-width:100%;overflow-x:hidden}.squircle-editor-topbar{flex-direction:column;align-items:stretch}.topbar-title{min-width:0}.squircle-editor-topbar p{overflow-wrap:anywhere}.topbar-actions{justify-content:stretch}.topbar-actions button{flex:1}.squircle-editor-workspace,.side-panel,.squircle-editor-preview,.preview-stage,.code-panel{width:100%;min-width:0;max-width:100%}.squircle-editor-layer-row{grid-template-columns:minmax(0,1fr);padding-right:76px;position:relative}.layer-visibility{z-index:2;height:34px;min-height:34px;position:absolute;top:auto;bottom:9px;right:46px}.layer-select{overflow:hidden}.layer-card-meta{flex-direction:column;align-items:flex-start}.preview-toolbar{flex-direction:column;align-items:stretch}.preview-actions{justify-content:stretch}.code-toggle-button{flex:1;justify-content:center}.squircle-editor-preview{padding:10px}.preview-stage{min-height:320px}.preview-stage .squircle-scene{width:min(92%,360px);max-width:360px;padding:8px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}}
 /*$vite$:1*/

package/dist/types.d.ts

@@ -1,6 +1,7 @@
 export type SquircleMaterial = "solid" | "transparent" | "wireframe";
 export type SquircleAnnotationColor = "contrast" | "auto" | "white" | "black";
 export type SquircleTextStyle = "solid" | "wireframe";
+export type SquircleEffect = "off" | "fluid" | "frosted";
 export type SquircleTheme = "light" | "dark";
 export interface SquirclePoint {
     x: number;
@@ -36,6 +37,7 @@ export interface SquircleOpacityConfig {
 export interface SquircleVariantConfig {
     material?: SquircleMaterial;
     paletteId?: string;
+    effect?: SquircleEffect;
     text?: string | boolean;
     dash?: boolean;
     textStyle?: SquircleTextStyle;

package/docs/design/README.md

@@ -6,13 +6,14 @@ Read these files when changing how a squircle looks. They are visual contracts s
 | --- | --- |
 | [geometry.md](./geometry.md) | Superellipse sampling, projection, side-wall visibility, layer offsets, regeneration checklist |
 | [rendering.md](./rendering.md) | Gradients, edge sharpness, draw order, dashed inlay, text path and paint rules |
-| [colors.md](./colors.md) | Palette stops, text contrast colors, edge colors, hover palette rules |
+| [colors.md](./colors.md) | Alpha palettes, text contrast colors, edge colors, hover palette rules |
 | [single-squircle-states.md](./single-squircle-states.md) | Reusable one-squircle state recipes for solid, transparent, wireframe, text, dash, and text + dash |
 
 ## Design Source Of Truth
 
 - Geometry is generated from math, not hand-edited point lists.
 - Filled faces use user-space gradients plus tiny in-family edge strokes.
+- Solid faces can use `off`, `fluid`, or `frosted` top-surface effects without moving geometry.
 - Wireframe faces use gradient strokes with matching top and bottom curves.
 - React top-plane text is one live SVG text element in every mode. Static fixtures keep a single compound `GPU` path for their fixed example.
 - Solid/transparent annotations use contrast colors; wireframe annotations use wire gradients.

package/docs/design/colors.md

@@ -4,15 +4,11 @@ This file is the palette contract for variants, gradients, text labels, and edge
 
 ## Sources Of Truth
 
-Colors are defined in shared CSS and in each self-contained HTML page that embeds SVG definitions. Keep them synchronized:
+Colors are defined in `src/squircle/palettes.ts` and consumed by `SquircleScene`. The root HTML files are Vite shells and do not own gradient stops. Keep these synchronized:
 
-1. SVG gradients in `index.html`, `demo.html`, and `constructor.html`:
-   - `top-13..top-20`
-   - `gpu-surface-13..gpu-surface-20` in static fixtures, mirrored as `text-surface-*` in React output
-   - `side-13..side-20`
-2. CSS variables in `public/static/styles.css`:
-   - Selected-variant selectors for `.hero-card` and `.single-drawer`
-   - `.v13..v20` classes for variant cards
+1. `SQUIRCLE_PALETTES`: alpha palettes `13..20`.
+2. Renderer docs in `README.md` and `docs/react/README.md`.
+3. This design file.
 
 Do not add or rename a variant in only one place.
 
@@ -45,7 +41,7 @@ The text surface gradient repeats the matching `top-*` stops with label-local co
 
 ## CSS Variable Contract
 
-Every selected-variant selector must target both `.hero-card` and `.single-drawer`:
+Legacy static snapshots used CSS variables such as `--top-fill` and `--side-fill`. New React work should not edit those snapshots as source of truth. If a legacy static snapshot must be refreshed, keep every selected-variant selector targeting both `.hero-card` and `.single-drawer`:
 
 ```css
 #variant-15:checked ~ .hero-card,
@@ -136,15 +132,9 @@ This is intentional: light does not interact with a wireframe surface, so top an
 
 ## Adding A Variant
 
-When adding a new variant:
-
-1. Add `top-*`, `gpu-surface-*`, and `side-*` gradients in `index.html`.
-2. Mirror those gradients in `demo.html` and `constructor.html` if those pages need the new palette.
-3. Add a hidden variant radio.
-4. Add a selected-variant CSS selector targeting `.hero-card` and `.single-drawer`.
-5. Add a `.v*` class with matching variables.
-6. Add the palette to the constructor `PALETTES` array.
-7. Add a variant card in the drawer.
-8. Add the title span in the hero copy.
-9. Update this palette table.
-10. Render hero, variant drawer, single-state drawer, demo presets, and constructor controls to confirm synchronized colors.
+When adding a new palette:
+
+1. Add it to `SQUIRCLE_PALETTES`.
+2. Include top, side, text-wire, label fill, top edge, side edge, and swatch values.
+3. Update the palette table above.
+4. Render the examples and constructor controls.

package/docs/design/rendering.md

@@ -18,6 +18,60 @@ React uses `text-surface-*` gradients to remap the top face stops into the label
 
 Wireframe mode uses the top gradient as the stroke gradient so upper and lower curves match. This intentionally avoids fake lighting on wireframes.
 
+## Solid Surface Effects
+
+`SquircleVariantConfig.effect` changes only the top-face rendering for `material: "solid"`. It is ignored by `transparent` and `wireframe`.
+
+| Effect | Rendering |
+| --- | --- |
+| `off` | A static top polygon filled by the resolved top gradient. This is the default. |
+| `fluid` | A full-resolution top-face `clipPath` containing an isometrically projected base color field plus blurred moving color blobs. A second lighter blurred layer uses screen blending. No displacement map is used. |
+| `frosted` | The same projected moving-blob field, muted by a deep base, then finished in screen space with a pale veil and a brighter neutral rim. |
+
+The moving effects are interval-driven inside `SquircleScene`; they do not query the global DOM and they do not use `requestAnimationFrame`. Motion is enabled only when a visible base or hover variant resolves to a solid `fluid` or `frosted` state.
+
+Effect color layers are authored in the flat top-face local coordinate system, not in screen coordinates. Local `(0, 0)` is the center of the raw superellipse, and local `a` is `geometry.config.halfSize`. The whole color field is then wrapped in the same isometric matrix used by labels:
+
+```text
+matrix(cosA, sinA, -cosA, sinA, cx, cy - h)
+```
+
+This means circles are intentionally authored as local circles, then become foreshortened ellipses on the tilted top plane. The top clip path stays in screen space around the generated `topPoints` polygon. For `frosted`, the white veil and bright rim also stay in screen space; only the blob/color field is projected.
+
+The SVG structure for effect faces must keep this order:
+
+```svg
+<g clip-path="url(#top-clip)">
+  <g transform="matrix(cosA,sinA,-cosA,sinA,cx,cy-h)">
+    <rect ... />
+    <g filter="url(#local-blur)">
+      <circle ... />
+    </g>
+  </g>
+  <!-- frost-only veil stays here in screen space -->
+</g>
+<!-- rim and outline stay here in screen space -->
+```
+
+Effect scale is always derived from `W = 2 * a`, the local top-plane width, not from screen pixels or the projected bbox:
+
+- Main blob radius is about `0.45 * W`.
+- Blur is about `0.13 * W`, keeping `blur / radius` near `0.27`.
+- Drift amplitude is about `0.20..0.25 * W`.
+- Blob centers are allowed to sit outside `+-a` so every frame heavily overlaps and overfills the clipped face.
+- The base rectangle covers `+-1.3a`, so the face never shows gaps between blobs.
+
+The blur filters use `filterUnits="userSpaceOnUse"` and `primitiveUnits="userSpaceOnUse"` with a local filter region centered around `(0, 0)`. If `halfSize` changes, blob radii, blur, positions, base rect, and motion amplitudes must all scale from `a` or `W` together. Scaling only some of them makes the blobs collapse into visible circles.
+
+Effect invariants:
+
+- The clip path uses the same generated `topPoints` polygon as the normal top face.
+- Fluid/frosted color blobs must never be placed directly in screen coordinates.
+- Fluid/frosted must not use `feDisplacementMap`; it turns the smooth surface field into raster clouds.
+- Annotations render after the effect, so text and dash stay readable and stay glued to the top plane.
+- Side wall geometry, layer offsets, hover transitions, and annotation transforms do not change when the effect changes.
+- Effect colors are derived from the selected alpha palette's top and side stops, except neutral white veil/rim overlays used only for glassy sharpness.
+
 ## Sharpness Edge
 
 Every filled face has a tiny in-family edge stroke:

package/docs/examples/README.md

@@ -20,8 +20,8 @@ The examples must consume `SquircleScene`, `SquircleEditor`, palettes, and helpe
 ## Behavior
 
 - `index.html` renders a main three-layer scene and a collapsed/openable drawer of single-squircle states. Palette buttons recolor the examples through React state.
-- `demo.html` renders 96 generated composition presets. Clicking a card changes the main hero composition. Each layer hover is a state/color swap only.
-- `constructor.html` renders `SquircleEditor` with three default plain wireframe layers. The Code panel exports React code using `@dstackai/sqircle` as the import path.
+- `demo.html` renders 96 generated composition presets, including alpha palettes and solid `off`/`fluid`/`frosted` surfaces. Clicking a card changes the main hero composition. Each layer hover is a state/color swap only.
+- `constructor.html` renders `SquircleEditor` with three default plain wireframe layers. The inspector exposes palette and effect controls. The Code panel exports React code using `@dstackai/sqircle` as the import path.
 - `react.html` intentionally mirrors `constructor.html` for older links.
 
 ## Rules

package/docs/react/README.md

@@ -22,7 +22,7 @@ The maintainable renderer implementation lives in `src/squircle`. The root HTML
       id: "bottom",
       offset: { y: 176 },
       base: { material: "wireframe", paletteId: "15" },
-      hover: { material: "solid", paletteId: "20" },
+      hover: { material: "solid", paletteId: "20", effect: "fluid" },
       stroke: { wire: 1.6, face: 0.35, labelWire: 1.1 }
     }
   ]}
@@ -76,6 +76,7 @@ Each layer has a required `base` variant and an optional `hover` variant. Hover
 | --- | --- | --- | --- |
 | `material` | `solid`, `transparent`, `wireframe` | `wireframe` | Prism rendering mode. |
 | `paletteId` | `13` through `20` | `15` | Palette from `SQUIRCLE_PALETTES`. |
+| `effect` | `off`, `fluid`, `frosted` | `off` | Solid-material top-face effect. Ignored by transparent and wireframe materials. |
 | `text` | `string`, `boolean` | none | Render top-plane text. Pass a string such as `"GPU"` or `"{}"`; `true` is a compatibility shorthand for `"GPU"`. |
 | `dash` | `boolean` | `false` | Render the dashed inlay. |
 | `textStyle` | `solid`, `wireframe` | `solid` | Filled or outlined text. |
@@ -141,6 +142,8 @@ Each layer has a required `base` variant and an optional `hover` variant. Hover
 | `sideEdge` | Side-wall hairline stroke color. |
 | `swatch` | Two-color UI swatch. |
 
+`effect: "off"` uses the normal static top gradient. `fluid` and `frosted` clip animated blurred color fields to the top face, but the fields are authored in the flat squircle plane and projected with the same isometric matrix as text. `frosted` adds a screen-space pale veil and brighter rim. Effect colors are derived from the selected alpha palette.
+
 ## Stroke Parameters
 
 Stroke widths and opacities are explicit data, not hard-coded CSS side effects:
@@ -172,7 +175,7 @@ Set `layer.stroke` for layer-wide defaults. Set `base.stroke` or `hover.stroke`
 - `topEdge` and `sideEdge`: hairline edge strokes
 - `swatch`: UI preview colors
 
-Do not invent colors inside a layer config. Add new palettes to `palettes.ts` and update [colors.md](../design/colors.md).
+Do not invent colors inside a layer config. Add new palettes to `palettes.ts` and update [colors.md](../design/colors.md). Effect colors are derived from palette stops except for neutral white highlight/rim overlays documented in [rendering.md](../design/rendering.md).
 
 ## Geometry
 
@@ -205,3 +208,5 @@ Then open `/index.html` and `/demo.html` from the Vite dev server and verify:
 - adding layers keeps array order as draw order.
 - no-op hover layers do not blink.
 - wireframe text outline uses the text-local gradient, not a single-stroke replacement.
+- solid palettes can switch between `off`, `fluid`, and `frosted` without moving geometry or annotations.
+- `fluid` and `frosted` read as smooth projected surface fields, not as visible screen-space circles.

package/docs/react/editor.md

@@ -84,8 +84,8 @@ The editor exposes the common constructor surface:
 - layer add/delete/visibility and preview selection
 - theme
 - scene radius, height, and dash size
-- base material, palette, text, text paint, text color, text size, font weight, dash, and dash color
-- hover material, palette, text, text paint, text color, text size, font weight, dash, and dash color
+- base material, palette, effect, text, text paint, text color, text size, font weight, dash, and dash color
+- hover material, palette, effect, text, text paint, text color, text size, font weight, dash, and dash color
 - collapsed stroke width controls for face, wire, dash, and text outline
 - generated React code
 
@@ -99,6 +99,8 @@ Supported renderer API fields that remain intentionally code-only in the editor:
 - advanced geometry beyond Radius/Height/Dash size: `angleDegrees`, `center`, `width`, `viewBoxHeight`, `samples`, `halfSize`
 - manual layer offsets and scene fitting
 
+The `Effect` segmented control appears only when the edited state has `material: "solid"`. It writes `effect: "off" | "fluid" | "frosted"`. The renderer ignores this field for `transparent` and `wireframe`, so hiding the control for those materials avoids implying that it changes glass or wire states.
+
 ## Annotation Rules
 
 Annotation color controls are contextual. Text color appears after enabling text; dash color appears after enabling dash. Wireframe material owns annotation paint through gradients, so the editor shows the forced gradient token instead of pretending `Auto / White / Black` would apply.
@@ -155,5 +157,6 @@ Then open `/constructor.html` from the Vite dev server and verify:
 - click selection works in the layer list and preview.
 - visibility, add, delete, theme switching, and shape controls update the preview.
 - base and hover state tabs expose the same variant controls.
+- palette and effect changes update the preview and copied code.
 - no-op hover layers do not blink.
 - copied React code imports the expected package path and includes active layers, theme, and geometry.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dstackai/sqircle",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "React components for precise isometric squircle-prism SVG compositions.",
   "type": "module",
   "license": "MIT",

package/dist/assets/ConstructorPage-BZYA63EF.js

@@ -1,2 +0,0 @@
-import{c as e,d as t,f as n,l as r,o as i,p as a,r as o,s,u as c}from"./pages-DQf07DWd.js";var l=a();function u({layers:e,theme:t,geometry:n,componentName:r=`CustomSquircle`,importPath:i=`./squircle`,styleImportPath:a,ariaLabel:o}){let s=te(r),c=JSON.stringify(i),l=d(i,a),u=JSON.stringify(o??`${s} composition`),f=JSON.stringify(e.map(ee),null,2),p=n?JSON.stringify(m(n),null,2):null;return[`import { SquircleScene, ${p?`type SquircleGeometryConfig, type SquircleLayerConfig, type SquircleTheme`:`type SquircleLayerConfig, type SquircleTheme`} } from ${c};`,...l?[`import ${JSON.stringify(l)};`]:[],``,`const theme: SquircleTheme = ${JSON.stringify(t)};`,...p?[``,`const geometry: SquircleGeometryConfig = ${p};`]:[],``,`const layers: SquircleLayerConfig[] = ${f};`,``,`export function ${s}() {`,`  return (`,`    <SquircleScene`,`      theme={theme}`,`      layers={layers}`,...p?[`      geometry={geometry}`]:[],`      ariaLabel={${u}}`,`    />`,`  );`,`}`,``].join(`
-`)}function d(e,t){return t===!1?null:typeof t==`string`?t:e===`@dstackai/sqircle`?`@dstackai/sqircle/style.css`:null}function ee(e){return m({...e,base:f(e.base),hover:e.hover?f(e.hover):void 0})}function f(e){let{gpu:t,gpuStyle:n,gpuColor:r,...i}=e,a=p(i.text,t),o=i.textStyle??n,s=i.textColor??r;return m({...i,text:a,textStyle:o,textColor:s})}function p(e,t){if(typeof e==`string`)return e;if(e===!0||t)return`GPU`;if(e===!1)return!1}function m(e){return Object.fromEntries(Object.entries(e).filter(([,e])=>e!==void 0))}function te(e){let t=e.trim().split(/[^a-zA-Z0-9]+/).filter(Boolean).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)||`CustomSquircle`;return/^[A-Za-z_$]/.test(t)?t:`Squircle${t}`}var h=s(),g=88,_=`GPU`,ne={exponent:c.exponent,prismHeight:c.prismHeight,inlayScale:c.inlayScale},v=0,y=100,b=4,x=24,re=4,ie=36,ae=.35,oe=.82,S=34,C=92,w=62,T=400,se=[{value:`wireframe`,label:`Wire`,title:`Gradient outline with transparent faces`},{value:`solid`,label:`Solid`,title:`Filled prism with top and side gradients`},{value:`transparent`,label:`Glass`,title:`Translucent filled prism`}],ce=[{value:`solid`,label:`Filled`,title:`Filled top-plane text`},{value:`wireframe`,label:`Outline`,title:`Outlined top-plane text`}],le=[{value:`auto`,label:`Auto`,title:`Use the palette contrast color`},{value:`white`,label:`White`,title:`Use fixed white annotation paint`},{value:`black`,label:`Black`,title:`Use fixed black annotation paint`}],ue=[{value:`300`,label:`Light`,title:`Thin top-plane label`},{value:`400`,label:`Regular`,title:`Default top-plane label weight`},{value:`500`,label:`Medium`,title:`Slightly stronger top-plane label`},{value:`600`,label:`Semi`,title:`Bold but still clean on wireframe outlines`},{value:`700`,label:`Bold`,title:`Strongest top-plane label`}];function de(e=`15`){return t([{id:`layer-1`,visible:!0,base:{material:`wireframe`,paletteId:e}},{id:`layer-2`,visible:!0,base:{material:`wireframe`,paletteId:e}},{id:`layer-3`,visible:!0,base:{material:`wireframe`,paletteId:e}}],g)}function fe({value:e,initialLayers:n,onChange:r,geometry:a,initialGeometry:o,onGeometryChange:s,title:d=`Squircle`,description:ee=`React component constructor with 0-N layers and exported code.`,className:f,layerGap:p=g,showCode:m,showConfig:te=!0,codeComponentName:_,codeImportPath:b=`./squircle`,theme:x,defaultTheme:S=`light`,onThemeChange:C,showThemeSwitch:w=!0}){let[T,se]=(0,l.useState)(()=>n??de()),[ce,le]=(0,l.useState)(()=>({...ne,...o})),[ue,fe]=(0,l.useState)(S),O=e??T,k=a??ce,A=x??ue,[j,R]=(0,l.useState)(()=>O.at(-1)?.id??null),[V,H]=(0,l.useState)(`base`),[U,W]=(0,l.useState)(!1),[G,K]=(0,l.useState)(!1),q=O.find(e=>e.id===j)??null,J=q?O.findIndex(e=>e.id===q.id)+1:null,Te=O.filter(e=>e.visible!==!1).length,Ee=m??te,De=Math.max(0,...O.map(e=>e.offset?.y??0)),Oe=(0,l.useMemo)(()=>({layers:O,geometry:{...k,viewBoxHeight:Math.max(k.viewBoxHeight??c.viewBoxHeight,De+320)},selectedLayerId:j}),[k,O,De,j]),Y=(0,l.useMemo)(()=>u({layers:O,theme:A,geometry:we(k),componentName:_??d,importPath:b,ariaLabel:`${d} composition`}),[k,A,_,b,O,d]);(0,l.useEffect)(()=>{j&&O.some(e=>e.id===j)||R(O.at(-1)?.id??null)},[O,j]),(0,l.useEffect)(()=>{K(!1)},[Y]);function X(n,i={}){let a=i.reflow?t(n,p):n;e||se(a),r?.(a)}function Z(e){let t={...k,...e};a||le(t),s?.(t)}function Q(e,t){X(O.map(n=>n.id===e?t(n):n))}function ke(e){q&&Q(q.id,t=>({...t,base:{...t.base,...e}}))}function Ae(e){q&&Q(q.id,t=>({...t,hover:{...t.hover??{},...e}}))}function $(){let e={id:xe(O),visible:!0,base:{material:`wireframe`,paletteId:O.at(-1)?.base.paletteId??`15`}},t=[...O,e];R(e.id),H(`base`),X(t,{reflow:!0})}function je(){if(!q)return;let e=O.filter(e=>e.id!==q.id);R(e.at(-1)?.id??null),H(`base`),X(e,{reflow:!0})}function Me(e){Q(e,e=>({...e,visible:e.visible===!1}))}function Ne(e){x||fe(e),C?.(e)}async function Pe(){try{await navigator.clipboard.writeText(Y)}catch{let e=document.createElement(`textarea`);e.value=Y,e.setAttribute(`readonly`,``),e.style.position=`fixed`,e.style.top=`-9999px`,document.body.append(e),e.select(),document.execCommand(`copy`),e.remove()}K(!0),window.setTimeout(()=>K(!1),1400)}return(0,h.jsxs)(`main`,{className:[`squircle-editor`,`squircle-editor-${A}`,f].filter(Boolean).join(` `),"data-theme":A,"aria-label":`Squircle editor`,children:[(0,h.jsxs)(`header`,{className:`squircle-editor-topbar`,children:[(0,h.jsxs)(`div`,{className:`topbar-title`,children:[(0,h.jsx)(`h1`,{children:d}),(0,h.jsx)(`p`,{children:ee})]}),(0,h.jsx)(`div`,{className:`topbar-actions`,children:w?(0,h.jsxs)(`div`,{className:`theme-switch`,role:`group`,"aria-label":`Theme`,children:[(0,h.jsx)(`button`,{type:`button`,"aria-pressed":A===`light`,onClick:()=>Ne(`light`),children:`Light`}),(0,h.jsx)(`button`,{type:`button`,"aria-pressed":A===`dark`,onClick:()=>Ne(`dark`),children:`Dark`})]}):null})]}),(0,h.jsxs)(`section`,{className:`squircle-editor-workspace`,children:[(0,h.jsxs)(`aside`,{className:`side-panel layers-panel`,children:[(0,h.jsxs)(`div`,{className:`panel-heading`,children:[(0,h.jsxs)(`div`,{children:[(0,h.jsx)(`h2`,{children:`Layers`}),(0,h.jsxs)(`span`,{children:[Te,`/`,O.length,` visible`]})]}),(0,h.jsxs)(`div`,{className:`panel-actions`,children:[(0,h.jsx)(`button`,{type:`button`,className:`icon-button primary-action`,"aria-label":`Add layer`,title:`Add layer`,onClick:$,children:(0,h.jsx)(he,{})}),(0,h.jsx)(`button`,{type:`button`,className:`icon-button`,"aria-label":`Clear layers`,title:`Clear layers`,onClick:()=>X([]),children:(0,h.jsx)(P,{})})]})]}),(0,h.jsx)(`div`,{className:`squircle-editor-layer-list`,children:[...O].reverse().map((e,t)=>{let n=O.length-t,r=F(e.base.paletteId),i=e.base.material??`wireframe`;return(0,h.jsxs)(`article`,{className:e.id===j?`squircle-editor-layer-row is-active`:`squircle-editor-layer-row`,children:[(0,h.jsxs)(`button`,{type:`button`,className:`layer-select`,onClick:()=>R(e.id),title:`Edit ${L(e.id,n,O.length)}`,children:[(0,h.jsxs)(`span`,{className:`layer-card-topline`,children:[(0,h.jsx)(`span`,{className:`layer-number`,children:String(n).padStart(2,`0`)}),(0,h.jsx)(`strong`,{children:L(e.id,n,O.length)}),(0,h.jsx)(`span`,{className:`material-pill material-pill-${i}`,children:I(i)})]}),(0,h.jsxs)(`span`,{className:`layer-card-meta`,children:[(0,h.jsxs)(`span`,{className:`layer-palette-chip`,children:[(0,h.jsx)(`span`,{className:`palette-swatch`,style:{background:`linear-gradient(135deg, ${r.swatch[0]}, ${r.swatch[1]})`}}),r.label]}),(0,h.jsxs)(`span`,{className:`layer-feature-tags`,children:[B(e.base)?(0,h.jsx)(`span`,{children:`Text`}):null,e.base.dash?(0,h.jsx)(`span`,{children:`Dash`}):null,e.hover?(0,h.jsx)(`span`,{children:`Hover`}):null,!B(e.base)&&!e.base.dash&&!e.hover?(0,h.jsx)(`span`,{children:`Clean`}):null]})]})]}),(0,h.jsx)(`button`,{type:`button`,className:`icon-button layer-visibility`,"aria-label":e.visible===!1?`Show layer`:`Hide layer`,"aria-pressed":e.visible!==!1,title:e.visible===!1?`Show layer`:`Hide layer`,onClick:()=>Me(e.id),children:e.visible===!1?(0,h.jsx)(_e,{}):(0,h.jsx)(ge,{})})]},e.id)})}),(0,h.jsxs)(E,{title:`Shape`,children:[(0,h.jsx)(M,{label:`Radius`,value:Se(k.exponent??c.exponent),min:v,max:y,step:1,formatValue:e=>`${Math.round(e)}%`,onChange:e=>Z({exponent:Ce(e)})}),(0,h.jsx)(M,{label:`Height`,value:k.prismHeight??c.prismHeight,min:re,max:ie,step:1,formatValue:e=>`${Math.round(e)}px`,onChange:e=>Z({prismHeight:e})}),(0,h.jsx)(M,{label:`Dash size`,value:(k.inlayScale??c.inlayScale)*100,min:ae*100,max:oe*100,step:1,formatValue:e=>`${Math.round(e)}%`,onChange:e=>Z({inlayScale:z(e/100,2)})})]})]}),(0,h.jsxs)(`section`,{className:`squircle-editor-preview`,children:[(0,h.jsxs)(`div`,{className:`preview-toolbar`,children:[(0,h.jsxs)(`div`,{children:[(0,h.jsx)(`h2`,{children:`Preview`}),(0,h.jsx)(`span`,{children:J?`Editing Layer ${J}`:`${Te} visible layers`})]}),Ee?(0,h.jsxs)(`div`,{className:`preview-actions`,children:[(0,h.jsxs)(`button`,{type:`button`,className:`code-toggle-button`,"aria-pressed":U,onClick:()=>W(e=>!e),children:[(0,h.jsx)(ye,{}),`Code`]}),(0,h.jsxs)(`button`,{type:`button`,className:`copy-code-button`,"aria-label":`Copy React code`,title:`Copy React code`,onClick:Pe,children:[(0,h.jsx)(N,{}),(0,h.jsx)(`span`,{className:`copy-status`,"aria-live":`polite`,children:G?`Copied`:``})]})]}):null]}),(0,h.jsx)(`div`,{className:`preview-stage`,children:(0,h.jsx)(i,{...Oe,theme:A,ariaLabel:`Editable squircle composition`,onLayerSelect:e=>{R(e),H(`base`)}})}),Ee?(0,h.jsxs)(`section`,{className:U?`code-panel is-open`:`code-panel`,"aria-label":`Generated React code`,children:[(0,h.jsxs)(`header`,{className:`code-panel-header`,children:[(0,h.jsxs)(`div`,{children:[(0,h.jsx)(`h2`,{children:`Code`}),(0,h.jsx)(`p`,{children:`Ready-to-use React component.`})]}),(0,h.jsxs)(`button`,{type:`button`,className:`copy-code-button`,"aria-label":`Copy React code`,title:`Copy React code`,onClick:Pe,children:[(0,h.jsx)(N,{}),(0,h.jsx)(`span`,{className:`copy-status`,"aria-live":`polite`,children:G?`Copied`:``})]})]}),U?(0,h.jsx)(`pre`,{className:`code-output`,children:(0,h.jsx)(`code`,{children:Y})}):null]}):null]}),(0,h.jsx)(`aside`,{className:q?`side-panel inspector-panel`:`side-panel inspector-panel is-empty`,children:q?(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(`div`,{className:`inspector-heading`,children:[(0,h.jsxs)(`div`,{children:[(0,h.jsx)(`span`,{className:`inspector-kicker`,children:`Selected`}),(0,h.jsx)(`h2`,{children:J?L(q.id,J,O.length):q.id}),(0,h.jsx)(`p`,{children:be(q.base)})]}),(0,h.jsxs)(`div`,{className:`panel-actions`,children:[(0,h.jsx)(`button`,{type:`button`,className:`icon-button`,"aria-label":`Close inspector`,title:`Close inspector`,onClick:()=>R(null),children:(0,h.jsx)(ve,{})}),(0,h.jsx)(`button`,{type:`button`,className:`icon-button danger`,"aria-label":`Delete layer`,title:`Delete layer`,onClick:je,children:(0,h.jsx)(P,{})})]})]}),(0,h.jsxs)(`div`,{className:`state-switch`,role:`group`,"aria-label":`Layer state`,children:[(0,h.jsx)(`button`,{type:`button`,"aria-pressed":V===`base`,onClick:()=>H(`base`),children:`Base`}),(0,h.jsxs)(`button`,{type:`button`,"aria-pressed":V===`hover`,onClick:()=>H(`hover`),children:[`Hover`,q.hover?(0,h.jsx)(`span`,{className:`state-dot`,"aria-hidden":`true`}):null]})]}),V===`base`?(0,h.jsx)(pe,{title:`Base State`,variant:q.base,onChange:ke}):(0,h.jsxs)(E,{title:`Hover State`,children:[(0,h.jsx)(D,{label:`Hover variant`,checked:!!q.hover,title:`Swap this layer to another variant on hover.`,onChange:e=>{Q(q.id,t=>({...t,hover:e?{...t.base,material:t.base.material===`wireframe`?`solid`:`wireframe`}:void 0}))}}),q.hover?(0,h.jsx)(me,{variant:{...q.base,...q.hover},onChange:Ae}):null]}),(0,h.jsxs)(E,{title:`Stroke Widths`,collapsible:!0,defaultOpen:!1,children:[(0,h.jsx)(M,{label:`Face`,value:q.stroke?.face??.35,min:0,max:1.5,step:.05,onChange:e=>Q(q.id,t=>({...t,stroke:{...t.stroke,face:e}}))}),(0,h.jsx)(M,{label:`Wire`,value:q.stroke?.wire??1.6,min:.4,max:4,step:.1,onChange:e=>Q(q.id,t=>({...t,stroke:{...t.stroke,wire:e}}))}),(0,h.jsx)(M,{label:`Dash`,value:q.stroke?.dash??2.2,min:.6,max:5,step:.1,onChange:e=>Q(q.id,t=>({...t,stroke:{...t.stroke,dash:e}}))}),(0,h.jsx)(M,{label:`Text outline`,value:q.stroke?.labelWire??1.1,min:.4,max:2,step:.05,onChange:e=>Q(q.id,t=>({...t,stroke:{...t.stroke,labelWire:e}}))})]})]}):(0,h.jsxs)(`div`,{className:`empty-note`,children:[(0,h.jsx)(`h2`,{children:`No layer selected`}),(0,h.jsx)(`button`,{type:`button`,className:`primary-action`,onClick:$,children:`Add layer`})]})})]})]})}function E({title:e,children:t,collapsible:n=!1,defaultOpen:r=!0}){return n?(0,h.jsxs)(`details`,{className:`editor-section editor-section-details`,open:r,children:[(0,h.jsx)(`summary`,{children:(0,h.jsx)(`h3`,{children:e})}),(0,h.jsx)(`div`,{className:`editor-section-body`,children:t})]}):(0,h.jsxs)(`section`,{className:`editor-section`,children:[(0,h.jsx)(`h3`,{children:e}),t]})}function pe({title:e,variant:t,onChange:n}){return(0,h.jsx)(E,{title:e,children:(0,h.jsx)(me,{variant:t,onChange:n})})}function me({variant:e,onChange:t}){return(0,h.jsxs)(`div`,{className:`variant-controls`,children:[(0,h.jsx)(k,{label:`Material`,value:e.material??`wireframe`,options:se,onChange:e=>t({material:e})}),(0,h.jsx)(A,{value:e.paletteId??`15`,onChange:e=>t({paletteId:e})}),(0,h.jsxs)(`div`,{className:`feature-grid`,"aria-label":`Top details`,children:[(0,h.jsx)(D,{label:`Text`,checked:B(e),title:`Toggle top-plane text for this state.`,onChange:n=>t(n?{text:V(e),textColor:U(e)}:{text:!1,textColor:void 0})}),(0,h.jsx)(D,{label:`Dash`,checked:e.dash??!1,title:`Toggle the dashed inlay for this state.`,onChange:n=>t(n?{dash:!0,dashColor:W(e)}:{dash:!1,dashColor:void 0})})]}),B(e)?(0,h.jsxs)(`div`,{className:`nested-fields`,children:[(0,h.jsx)(j,{label:`Text`,value:V(e),onChange:e=>t({text:e})}),(0,h.jsx)(k,{label:`Text paint`,value:H(e),options:ce,onChange:e=>t({textStyle:e})}),(0,h.jsx)(O,{label:`Text color`,value:U(e),forcedValue:K(e),onChange:e=>t({textColor:e})}),(0,h.jsx)(M,{label:`Text size`,value:e.textSize??w,min:S,max:C,step:1,formatValue:e=>`${Math.round(e)}px`,onChange:e=>t({textSize:e})}),(0,h.jsx)(k,{label:`Font weight`,value:String(e.textFontWeight??T),options:ue,onChange:e=>t({textFontWeight:Number(e)})})]}):null,e.dash?(0,h.jsx)(`div`,{className:`nested-fields`,children:(0,h.jsx)(O,{label:`Dash color`,value:W(e),forcedValue:q(e),onChange:e=>t({dashColor:e})})}):null]})}function D({label:e,checked:t,title:n,onChange:r}){return(0,h.jsxs)(`button`,{type:`button`,className:`feature-switch`,"aria-pressed":t,title:n,onClick:()=>r(!t),children:[(0,h.jsx)(`span`,{className:`feature-switch-label`,children:e}),(0,h.jsx)(`span`,{className:`feature-switch-state`,children:t?`On`:`Off`})]})}function O({label:e,value:t,forcedValue:n,onChange:r}){return n?(0,h.jsxs)(`div`,{className:`field`,children:[(0,h.jsx)(`span`,{children:e}),(0,h.jsx)(`div`,{className:`forced-token`,title:`This material controls annotation paint from the wireframe palette.`,children:n})]}):(0,h.jsx)(k,{label:e,value:t,options:le,onChange:r})}function k({label:e,value:t,options:n,onChange:r}){return(0,h.jsxs)(`div`,{className:`field`,children:[(0,h.jsx)(`span`,{children:e}),(0,h.jsx)(`div`,{className:`segmented-field`,role:`group`,"aria-label":e,children:n.map(e=>(0,h.jsx)(`button`,{type:`button`,title:e.title,"aria-pressed":e.value===t,onClick:()=>r(e.value),children:e.label},e.value))})]})}function A({value:t,onChange:n}){return(0,h.jsxs)(`div`,{className:`field palette-field`,children:[(0,h.jsx)(`span`,{children:`Palette`}),(0,h.jsx)(`div`,{className:`palette-grid`,role:`group`,"aria-label":`Palette`,children:r.map(r=>(0,h.jsxs)(`button`,{type:`button`,title:e[r].label,"aria-pressed":t===r,onClick:()=>n(r),children:[(0,h.jsx)(`span`,{className:`palette-swatch`,style:{background:`linear-gradient(135deg, ${e[r].swatch[0]}, ${e[r].swatch[1]})`}}),(0,h.jsx)(`span`,{children:r})]},r))})]})}function j({label:e,value:t,onChange:n}){return(0,h.jsxs)(`label`,{className:`field`,children:[(0,h.jsx)(`span`,{children:e}),(0,h.jsx)(`input`,{type:`text`,value:t,onChange:e=>n(e.target.value)})]})}function M({label:e,value:t,min:n,max:r,step:i,formatValue:a,onChange:o}){return(0,h.jsxs)(`label`,{className:`field`,children:[(0,h.jsxs)(`span`,{children:[e,`: `,a?a(t):t.toFixed(2)]}),(0,h.jsx)(`input`,{type:`range`,min:n,max:r,step:i,value:t,onChange:e=>o(Number(e.target.value))})]})}function N(){return(0,h.jsxs)(`svg`,{className:`copy-icon`,viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:[(0,h.jsx)(`rect`,{x:`9`,y:`9`,width:`11`,height:`11`,rx:`2`}),(0,h.jsx)(`path`,{d:`M5 15V6.8C5 5.8 5.8 5 6.8 5H15`})]})}function he(){return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,h.jsx)(`path`,{d:`M12 5v14M5 12h14`})})}function P(){return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,h.jsx)(`path`,{d:`M4 7h16M10 11v6M14 11v6M6 7l1 13h10l1-13M9 7V4h6v3`})})}function ge(){return(0,h.jsxs)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:[(0,h.jsx)(`path`,{d:`M2.5 12s3.4-6 9.5-6 9.5 6 9.5 6-3.4 6-9.5 6-9.5-6-9.5-6Z`}),(0,h.jsx)(`circle`,{cx:`12`,cy:`12`,r:`2.8`})]})}function _e(){return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,h.jsx)(`path`,{d:`M3 3l18 18M9.4 5.5A10.9 10.9 0 0 1 12 5c6.1 0 9.5 7 9.5 7a15.2 15.2 0 0 1-3 4M6.7 6.9A15.5 15.5 0 0 0 2.5 12s3.4 7 9.5 7c1.1 0 2.2-.2 3.1-.6`})})}function ve(){return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,h.jsx)(`path`,{d:`M6 6l12 12M18 6L6 18`})})}function ye(){return(0,h.jsx)(`svg`,{viewBox:`0 0 24 24`,"aria-hidden":`true`,focusable:`false`,children:(0,h.jsx)(`path`,{d:`M9 18 3 12l6-6M15 6l6 6-6 6`})})}function be(e){let t=[I(e.material??`wireframe`),F(e.paletteId).label];return B(e)&&t.push(`text: ${V(e)}`),e.dash&&t.push(`dash`),t.join(` / `)}function F(t){return e[t]??e[15]}function I(e){return e===`transparent`?`Glass`:e===`solid`?`Solid`:`Wire`}function L(e,t,n){return`Layer ${t}`}function xe(e){let t=new Set(e.map(e=>e.id)),n=e.length+1;for(;t.has(`layer-${n}`);)n+=1;return`layer-${n}`}function Se(e){let t=(x-e)/(x-b);return R(Math.round(t*100),v,y)}function Ce(e){return z(x-R(e,v,y)/100*(x-b),1)}function we(e){return{exponent:e.exponent??c.exponent,prismHeight:e.prismHeight??c.prismHeight,inlayScale:e.inlayScale??c.inlayScale}}function R(e,t,n){return Math.min(n,Math.max(t,e))}function z(e,t){let n=10**t;return Math.round(e*n)/n}function B(e){return typeof e.text==`string`?e.text.trim().length>0:e.text===!0||J(e).gpu===!0}function V(e){return typeof e.text==`string`?e.text:(e.text===!0||J(e).gpu,_)}function H(e){return e.textStyle??J(e).gpuStyle??`solid`}function U(e){return G(e.textColor??J(e).gpuColor??`contrast`)}function W(e){return G(e.dashColor??`contrast`)}function G(e){return e===`contrast`?`auto`:e}function K(e){return(e.material??`wireframe`)===`wireframe`?H(e)===`wireframe`?`Wire gradient`:`Surface gradient`:null}function q(e){return(e.material??`wireframe`)===`wireframe`?`Wire gradient`:null}function J(e){return e}(0,n().createRoot)(document.getElementById(`root`)).render((0,h.jsx)(fe,{title:`Squircle Constructor`,description:`Build 0-N React squircle layers, tune strokes and annotations, then copy the generated component code.`,initialLayers:o(),codeComponentName:`CustomSquircle`,codeImportPath:`@dstackai/sqircle`,showCode:!0}));

package/dist/assets/ConstructorPage-BthtTZhb.css

@@ -1 +0,0 @@
-:root{color:#111821;background:0 0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:0 0;margin:0}button,input,select{font:inherit}.squircle-editor{--editor-text:#111821;--editor-muted:#697484;--editor-faint:#8b98aa;--editor-soft:#f6f9fc;--editor-panel:#ffffffdb;--editor-panel-soft:#ffffffb8;--editor-panel-muted:#ffffff75;--editor-line:#dfe7f1;--editor-line-strong:#dbe5ef;--editor-control-bg:#fff;--editor-control-text:#17202b;--editor-active-text:#073c68;--editor-accent:#09f;--editor-accent-2:#7c58f7;--editor-accent-soft:#0099ff24;--editor-danger:#9c2340;--editor-code-bg:#ffffffb8;--editor-code-text:#263140;--editor-stage-sheen:#b8e7ff2e;color:var(--editor-text);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;grid-template-rows:auto minmax(0,1fr);width:min(100%,1320px);min-height:100vh;margin:0 auto;padding:clamp(14px,3vw,32px);display:grid}.squircle-editor-dark{--editor-text:#f4f8ff;--editor-muted:#aab7c8;--editor-faint:#7f8da2;--editor-soft:#101925;--editor-panel:#0d141ff0;--editor-panel-soft:#151f2ddb;--editor-panel-muted:#0c131db8;--editor-line:#25364a;--editor-line-strong:#33485f;--editor-control-bg:#121d2b;--editor-control-text:#eef6ff;--editor-active-text:#e5f6ff;--editor-accent:#42b4ff;--editor-accent-2:#a88cff;--editor-accent-soft:#42b4ff2b;--editor-danger:#ff8ca3;--editor-code-bg:#090e16d6;--editor-code-text:#d8e8ff;--editor-stage-sheen:#42b4ff17;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}.squircle-editor-topbar{justify-content:space-between;align-items:end;gap:18px;padding-bottom:14px;display:flex}.squircle-editor-topbar h1{letter-spacing:0;margin:0;font-size:clamp(28px,5vw,48px)}.squircle-editor-topbar p{color:var(--editor-muted);margin:4px 0 0;font-size:14px;font-weight:650}.topbar-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.squircle-editor button{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);cursor:pointer;border-radius:6px;font-weight:800}.squircle-editor button:hover{border-color:color-mix(in srgb, var(--editor-accent) 52%, transparent);color:var(--editor-active-text)}.squircle-editor button svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:17px;height:17px}.icon-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid}.primary-action{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line-strong));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent)}.danger{color:var(--editor-danger)}.theme-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;gap:2px;padding:3px;display:inline-flex}.theme-switch button{min-width:68px;min-height:28px;color:var(--editor-muted);background:0 0;border-color:#0000}.theme-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 48%, var(--editor-line));color:var(--editor-active-text);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 92%, var(--editor-accent)), var(--editor-panel-soft));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 16%, transparent), 0 1px 5px #0f141a1f}.squircle-editor-workspace{border:1px solid var(--editor-line);background:linear-gradient(145deg, var(--editor-stage-sheen), transparent 48%), var(--editor-panel);border-radius:8px;grid-template-columns:minmax(250px,300px) minmax(520px,1fr) minmax(300px,380px);min-height:0;display:grid;overflow:hidden}@media (width>=1061px){.squircle-editor{height:100vh;overflow:hidden}}.side-panel{min-width:0;padding:14px;overflow:auto}.layers-panel{align-content:start;gap:14px;display:grid}.side-panel:first-child{border-right:1px solid var(--editor-line)}.inspector-panel{border-left:1px solid var(--editor-line)}.panel-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.panel-heading h2{margin:0;font-size:15px}.panel-heading span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:850;display:block}.panel-actions{justify-content:flex-end;gap:6px;display:flex}.squircle-editor-layer-list{gap:9px;display:grid}.squircle-editor-layer-row{background:0 0;border:1px solid #0000;border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:7px;padding:3px;transition:border-color .17s,background .17s,box-shadow .17s;display:grid}.layer-select{text-align:left;background:0 0;border-color:#0000;justify-items:start;gap:8px;min-width:0;padding:10px;display:grid}.layer-select strong{font-size:13px}.layer-card-topline,.layer-card-meta{align-items:center;width:100%;min-width:0;display:flex}.layer-card-topline{gap:7px}.layer-card-meta{justify-content:space-between;gap:8px}.layer-number{background:var(--editor-panel-soft);width:25px;min-width:25px;height:22px;color:var(--editor-faint);border-radius:5px;justify-content:center;align-items:center;font-size:11px;font-weight:900;display:inline-flex}.material-pill{border:1px solid var(--editor-line);color:var(--editor-muted);text-transform:uppercase;border-radius:999px;margin-left:auto;padding:3px 6px;font-size:10px;font-weight:900}.material-pill-solid{border-color:color-mix(in srgb, var(--editor-accent) 40%, var(--editor-line));color:var(--editor-active-text)}.material-pill-transparent{border-color:color-mix(in srgb, var(--editor-accent-2) 32%, var(--editor-line));color:color-mix(in srgb, var(--editor-active-text) 72%, var(--editor-accent-2))}.layer-palette-chip,.layer-feature-tags{min-width:0;color:var(--editor-muted);align-items:center;font-size:11px;font-weight:820;display:inline-flex}.layer-palette-chip{gap:6px}.layer-feature-tags{flex-wrap:wrap;justify-content:flex-end;gap:4px}.layer-feature-tags span{border:1px solid var(--editor-line);background:var(--editor-panel-muted);border-radius:999px;padding:2px 5px;font-size:10px}.layer-select span{color:var(--editor-muted)}.squircle-editor-layer-row.is-active{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), transparent 65%), var(--editor-panel-soft);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 13%, transparent), inset 4px 0 0 color-mix(in srgb, var(--editor-accent) 76%, var(--editor-accent-2));color:var(--editor-active-text)}.squircle-editor-layer-row.is-active .layer-number{background:color-mix(in srgb, var(--editor-accent) 18%, var(--editor-control-bg));color:var(--editor-active-text)}.layer-visibility{min-height:100%;color:var(--editor-muted);align-self:stretch}.layer-visibility[aria-pressed=false]{color:var(--editor-faint);opacity:.66}.squircle-editor-preview{grid-template-rows:auto minmax(320px,1fr) auto;gap:12px;min-width:0;min-height:0;padding:18px;display:grid}.preview-toolbar,.preview-actions{justify-content:space-between;align-items:center;gap:10px;display:flex}.preview-toolbar h2{margin:0;font-size:14px}.preview-toolbar span{color:var(--editor-muted);margin-top:2px;font-size:12px;font-weight:820;display:block}.preview-actions{justify-content:flex-end}.code-toggle-button{align-items:center;gap:7px;padding:0 10px;display:inline-flex}.code-toggle-button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 56%, var(--editor-line));background:var(--editor-accent-soft);color:var(--editor-active-text)}.preview-stage{border:1px solid color-mix(in srgb, var(--editor-line) 74%, transparent);background:linear-gradient(180deg, color-mix(in srgb, var(--editor-panel-soft) 72%, transparent), transparent 56%), color-mix(in srgb, var(--editor-panel-muted) 84%, transparent);border-radius:8px;place-items:center;min-height:0;display:grid;overflow:hidden}.preview-stage .squircle-scene{place-self:center;max-width:660px;padding:16px}.code-panel{border:1px solid var(--editor-line);background:var(--editor-code-bg);border-radius:6px;grid-template-rows:auto;min-width:0;display:grid;overflow:hidden}.code-panel.is-open{grid-template-rows:auto minmax(120px,220px)}.code-panel-header{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;display:flex}.code-panel-header h2{color:var(--editor-control-text);letter-spacing:0;margin:0;font-size:13px}.code-panel-header p{color:var(--editor-muted);margin:1px 0 0;font-size:11px;font-weight:760}.copy-code-button{place-items:center;width:34px;min-width:34px;padding:0;display:inline-grid;position:relative}.copy-status{border:1px solid var(--editor-line);background:var(--editor-control-bg);color:var(--editor-active-text);opacity:0;pointer-events:none;border-radius:5px;padding:3px 6px;font-size:11px;font-weight:850;transition:opacity .16s,transform .16s;position:absolute;bottom:calc(100% + 5px);right:0;transform:translateY(2px)}.copy-status:not(:empty){opacity:1;transform:translateY(0)}.code-output{min-width:0;color:var(--editor-code-text);margin:0;padding:12px;font-size:11px;line-height:1.45;overflow:auto}.code-output code{font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace}.editor-section{border-top:1px solid var(--editor-line);gap:10px;padding:12px 0;display:grid}.editor-section:first-of-type{border-top:0;padding-top:0}.editor-section h3{color:var(--editor-muted);letter-spacing:0;text-transform:uppercase;margin:0;font-size:12px}.inspector-heading{border-bottom:1px solid var(--editor-line);justify-content:space-between;align-items:start;gap:12px;padding-bottom:12px;display:flex}.inspector-heading h2{margin:1px 0 0;font-size:18px}.inspector-heading p{color:var(--editor-muted);margin:4px 0 0;font-size:12px;font-weight:760}.inspector-kicker{color:var(--editor-faint);text-transform:uppercase;font-size:11px;font-weight:900}.state-switch{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:12px 0 2px;padding:4px;display:grid}.state-switch button{min-height:34px;color:var(--editor-muted);background:0 0;border-color:#0000;position:relative}.state-switch button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 58%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:0 1px 5px #0f141a1a}.state-dot{background:var(--editor-accent);border-radius:50%;width:6px;height:6px;position:absolute;top:7px;right:9px}.editor-section-details{gap:0}.editor-section-details summary{cursor:pointer;justify-content:space-between;align-items:center;list-style:none;display:flex}.editor-section-details summary::-webkit-details-marker{display:none}.editor-section-details summary:after{content:"+";color:var(--editor-muted);font-size:16px;font-weight:850}.editor-section-details[open] summary:after{content:"-"}.editor-section-body{gap:10px;padding-top:10px;display:grid}.field{color:var(--editor-muted);gap:5px;font-size:12px;font-weight:800;display:grid}.variant-controls{gap:11px;display:grid}.feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;display:grid}.feature-switch{text-align:left;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:42px;padding:0 10px;display:flex}.feature-switch[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 62%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 72%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.feature-switch-label{font-size:13px;font-weight:900}.feature-switch-state{color:var(--editor-muted);text-transform:uppercase;font-size:11px;font-weight:900}.nested-fields{border:1px solid color-mix(in srgb, var(--editor-line) 82%, transparent);background:var(--editor-panel-muted);border-radius:8px;gap:9px;padding:10px;display:grid}.field input[type=text],.field input[type=range]{width:100%}.field input[type=text]{border:1px solid var(--editor-line-strong);background:var(--editor-control-bg);min-height:34px;color:var(--editor-control-text);border-radius:6px;padding:0 8px}.segmented-field{border:1px solid var(--editor-line);background:var(--editor-panel-soft);border-radius:8px;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));gap:3px;padding:3px;display:grid}.segmented-field button{min-width:0;min-height:30px;color:var(--editor-muted);background:0 0;border-color:#0000;padding:0 7px;font-size:12px}.segmented-field button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 54%, var(--editor-line));background:linear-gradient(180deg, color-mix(in srgb, var(--editor-control-bg) 90%, var(--editor-accent)), var(--editor-control-bg));color:var(--editor-active-text);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--editor-accent) 14%, transparent), 0 1px 4px #0f141a1a}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.palette-grid button{min-width:0;min-height:32px;color:var(--editor-muted);grid-template-columns:auto 1fr;align-items:center;gap:5px;padding:0 6px;font-size:12px;display:grid}.palette-grid button[aria-pressed=true]{border-color:color-mix(in srgb, var(--editor-accent) 68%, var(--editor-line));background:linear-gradient(90deg, var(--editor-accent-soft), var(--editor-control-bg) 62%), var(--editor-control-bg);color:var(--editor-active-text);box-shadow:0 0 0 2px color-mix(in srgb, var(--editor-accent) 12%, transparent)}.palette-swatch{border:1px solid var(--editor-line);border-radius:4px;width:16px;height:16px}.forced-token{border:1px dashed var(--editor-line-strong);background:var(--editor-panel-muted);min-height:32px;color:var(--editor-muted);border-radius:6px;align-items:center;padding:0 9px;font-size:12px;font-weight:850;display:flex}.empty-note{color:var(--editor-muted);align-content:start;gap:12px;margin:0;font-size:13px;font-weight:700;display:grid}.empty-note h2{color:var(--editor-text);margin:0;font-size:16px}.empty-note .primary-action{width:max-content;padding:0 12px}@media (width<=1060px){.squircle-editor-workspace{grid-template-columns:1fr}.side-panel:first-child,.inspector-panel{border:0;border-bottom:1px solid var(--editor-line)}}@media (width<=700px){.squircle-editor{max-width:100%;overflow-x:hidden}.squircle-editor-topbar{flex-direction:column;align-items:stretch}.topbar-title{min-width:0}.squircle-editor-topbar p{overflow-wrap:anywhere}.topbar-actions{justify-content:stretch}.topbar-actions button{flex:1}.squircle-editor-workspace,.side-panel,.squircle-editor-preview,.preview-stage,.code-panel{width:100%;min-width:0;max-width:100%}.squircle-editor-layer-row{grid-template-columns:minmax(0,1fr);padding-right:76px;position:relative}.layer-visibility{z-index:2;height:34px;min-height:34px;position:absolute;top:auto;bottom:9px;right:46px}.layer-select{overflow:hidden}.layer-card-meta{flex-direction:column;align-items:flex-start}.preview-toolbar{flex-direction:column;align-items:stretch}.preview-actions{justify-content:stretch}.code-toggle-button{flex:1;justify-content:center}.squircle-editor-preview{padding:10px}.preview-stage{min-height:320px}.preview-stage .squircle-scene{width:min(92%,360px);max-width:360px;padding:8px}.palette-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.feature-grid{grid-template-columns:1fr}}

package/dist/assets/PageShell-CjHSnST7.js

@@ -1 +0,0 @@
-import{s as e}from"./pages-DQf07DWd.js";var t=e();function n({title:e,description:n,theme:i,onThemeChange:a,children:o}){return(0,t.jsxs)(`main`,{className:i===`dark`?`sq-page sq-page-dark`:`sq-page`,"data-theme":i,children:[(0,t.jsxs)(`header`,{className:`sq-page-topbar`,children:[(0,t.jsxs)(`div`,{children:[(0,t.jsx)(`a`,{className:`sq-page-mark`,href:`./index.html`,children:`Squircle`}),(0,t.jsx)(`h1`,{children:e}),(0,t.jsx)(`p`,{children:n})]}),(0,t.jsxs)(`nav`,{className:`sq-page-actions`,"aria-label":`Examples`,children:[(0,t.jsx)(`a`,{href:`./index.html`,children:`Index`}),(0,t.jsx)(`a`,{href:`./demo.html`,children:`Demo`}),(0,t.jsx)(`a`,{href:`./constructor.html`,children:`Constructor`}),(0,t.jsx)(r,{theme:i,onThemeChange:a})]})]}),o]})}function r({theme:e,onThemeChange:n}){return(0,t.jsxs)(`div`,{className:`sq-page-theme`,role:`group`,"aria-label":`Theme`,children:[(0,t.jsx)(`button`,{type:`button`,"aria-pressed":e===`light`,onClick:()=>n(`light`),children:`Light`}),(0,t.jsx)(`button`,{type:`button`,"aria-pressed":e===`dark`,onClick:()=>n(`dark`),children:`Dark`})]})}export{n as t};

package/dist/assets/demo-C2Ri3G4a.js

@@ -1 +0,0 @@
-import{c as e,f as t,n,o as r,p as i,s as a,t as o}from"./pages-DQf07DWd.js";import{t as s}from"./PageShell-CjHSnST7.js";var c=i(),l=t(),u=a();function d(){let[t,i]=(0,c.useState)(`light`),[a,l]=(0,c.useState)(`15`),d=(0,c.useMemo)(()=>n(a,96),[a]),[f,p]=(0,c.useState)(`composition-1`),m=d.find(e=>e.id===f)??d[0];return(0,u.jsxs)(s,{title:`Composition demo`,description:`A React-generated gallery of selectable 3-layer compositions. Hover a visible squircle to test its state and color swap.`,theme:t,onThemeChange:i,children:[(0,u.jsxs)(`section`,{className:`sq-demo-layout`,children:[(0,u.jsxs)(`aside`,{className:`sq-control-panel sq-demo-sidebar`,children:[(0,u.jsx)(`h2`,{children:`Color`}),(0,u.jsx)(`div`,{className:`sq-palette-list`,children:o.map(t=>(0,u.jsxs)(`button`,{type:`button`,className:a===t?`sq-swatch is-active`:`sq-swatch`,"aria-pressed":a===t,onClick:()=>l(t),children:[(0,u.jsx)(`span`,{style:{background:`linear-gradient(135deg, ${e[t].swatch[0]}, ${e[t].swatch[1]})`}}),e[t].label]},t))})]}),(0,u.jsxs)(`section`,{className:`sq-demo-main`,children:[(0,u.jsx)(`div`,{className:`sq-stage sq-demo-stage`,children:(0,u.jsx)(r,{layers:m.layers,theme:t,ariaLabel:m.name,idPrefix:`demo-main-${m.id}`})}),(0,u.jsxs)(`div`,{className:`sq-demo-caption`,children:[(0,u.jsx)(`h2`,{children:m.name}),(0,u.jsx)(`p`,{children:m.note})]})]})]}),(0,u.jsxs)(`details`,{className:`sq-drawer`,open:!0,children:[(0,u.jsx)(`summary`,{children:`Preset compositions`}),(0,u.jsx)(`div`,{className:`sq-card-grid sq-card-grid-dense`,children:d.map(e=>(0,u.jsxs)(`button`,{type:`button`,className:e.id===m.id?`sq-variant-button is-active`:`sq-variant-button`,onClick:()=>p(e.id),children:[(0,u.jsx)(r,{layers:e.layers,theme:t,ariaLabel:e.name,idPrefix:`demo-thumb-${e.id}`,geometry:{width:360,viewBoxHeight:300}}),(0,u.jsx)(`strong`,{children:e.name}),(0,u.jsx)(`span`,{children:e.note})]},e.id))})]})]})}(0,l.createRoot)(document.getElementById(`root`)).render((0,u.jsx)(d,{}));

package/dist/assets/index-CYKmiCSm.js

@@ -1 +0,0 @@
-import{a as e,c as t,f as n,i as r,o as i,p as a,s as o,t as s}from"./pages-DQf07DWd.js";import{t as c}from"./PageShell-CjHSnST7.js";var l=a(),u=n(),d=o();function f(){let[n,a]=(0,l.useState)(`light`),[o,u]=(0,l.useState)(`15`),[f,p]=(0,l.useState)(`single-5`),m=(0,l.useMemo)(()=>e(o),[o]),h=(0,l.useMemo)(()=>r(o),[o]),g=m.find(e=>e.id===f)??m[0];return(0,d.jsxs)(c,{title:`React squircle examples`,description:`Root examples now render through the reusable component instead of static SVG markup.`,theme:n,onThemeChange:a,children:[(0,d.jsxs)(`section`,{className:`sq-hero-grid`,children:[(0,d.jsx)(`div`,{className:`sq-stage sq-hero-stage`,children:(0,d.jsx)(i,{layers:h,theme:n,ariaLabel:`Three-layer squircle hero`,idPrefix:`index-hero`})}),(0,d.jsxs)(`aside`,{className:`sq-control-panel`,children:[(0,d.jsx)(`h2`,{children:`Palette`}),(0,d.jsx)(`div`,{className:`sq-palette-grid`,children:s.map(e=>(0,d.jsxs)(`button`,{type:`button`,className:o===e?`sq-swatch is-active`:`sq-swatch`,"aria-pressed":o===e,onClick:()=>u(e),children:[(0,d.jsx)(`span`,{style:{background:`linear-gradient(135deg, ${t[e].swatch[0]}, ${t[e].swatch[1]})`}}),t[e].label]},e))})]})]}),(0,d.jsxs)(`details`,{className:`sq-drawer`,open:!0,children:[(0,d.jsx)(`summary`,{children:`Single squircle states`}),(0,d.jsxs)(`div`,{className:`sq-selected-single`,children:[(0,d.jsx)(`div`,{className:`sq-stage`,children:(0,d.jsx)(i,{layers:g.layers,theme:n,ariaLabel:g.name,idPrefix:`index-${g.id}`})}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`h2`,{children:g.name}),(0,d.jsx)(`p`,{children:g.note})]})]}),(0,d.jsx)(`div`,{className:`sq-card-grid`,children:m.map(e=>(0,d.jsxs)(`button`,{type:`button`,className:e.id===g.id?`sq-variant-button is-active`:`sq-variant-button`,onClick:()=>p(e.id),children:[(0,d.jsx)(i,{layers:e.layers,theme:n,ariaLabel:e.name,idPrefix:`single-thumb-${e.id}`,geometry:{width:360,viewBoxHeight:240}}),(0,d.jsx)(`strong`,{children:e.name}),(0,d.jsx)(`span`,{children:e.note})]},e.id))})]})]})}(0,u.createRoot)(document.getElementById(`root`)).render((0,d.jsx)(f,{}));