sliccy 3.48.3 → 4.0.0
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.
- package/dist/ui/assets/adobe-BbrAWL2k.js +2 -0
- package/dist/ui/assets/adobe-Cemo5C0u.js +1 -0
- package/dist/ui/assets/{agent-message-to-chat-B1ZRBAOx.js → agent-message-to-chat-CcbdvCBX.js} +2 -2
- package/dist/ui/assets/{anthropic-DVQtRZtV.js → anthropic-F94JdHkD.js} +2 -2
- package/dist/ui/assets/{apps-DUiS_Cic.js → apps-DW9Ugrtq.js} +1 -1
- package/dist/ui/assets/azure-openai-BIN3lyjx.js +1 -0
- package/dist/ui/assets/{azure-openai-Bj4YFMf9.js → azure-openai-DeK0lFgF.js} +1 -1
- package/dist/ui/assets/azure-openai-responses-9zsK4075.js +1 -0
- package/dist/ui/assets/base-DmaCA25W.css +1 -0
- package/dist/ui/assets/browser-ukv9lM61.js +564 -0
- package/dist/ui/assets/{bsh-watchdog-Dn4GRV6N.js → bsh-watchdog-CFGe8ITX.js} +1 -1
- package/dist/ui/assets/{cdp-DhUIZ_qy.js → cdp-n4Jl6aC4.js} +3 -3
- package/dist/ui/assets/{connect-surface-BYxjsVkn.js → connect-surface-C8QsyQkF.js} +1 -1
- package/dist/ui/assets/dialog-DnPdZfH5.css +1 -0
- package/dist/ui/assets/dip-BjtVzOV1.js +1 -0
- package/dist/ui/assets/dips-DsUu7NzC.css +1 -0
- package/dist/ui/assets/{dist-BcrIg3Xk.js → dist-Dgyr_bjn.js} +2 -2
- package/dist/ui/assets/{dist-CvzfEfDj2.js → dist-DwJ61hEj.js} +1 -1
- package/dist/ui/assets/{dist-CGfqdsk2.js → dist-tjBW4Ynj.js} +1 -1
- package/dist/ui/assets/{es-DqWJxdk8.js → es-CIP8vLYQ.js} +1 -1
- package/dist/ui/assets/esp8266-k79PMUzO.js +1 -0
- package/dist/ui/assets/{esptool-operations-CiX8mbpu.js → esptool-operations-3OtqiSvP.js} +2 -2
- package/dist/ui/assets/{fs-Cq3w-8uN.js → fs-D9uHDiI8.js} +1 -1
- package/dist/ui/assets/fs-sLaOZiPe.js +2 -0
- package/dist/ui/assets/github-copilot-BWwpRuxR.js +2 -0
- package/dist/ui/assets/{github-copilot-DXCFujJC.js → github-copilot-Bn6df3EN.js} +1 -1
- package/dist/ui/assets/github-iKf-uv0l.js +2 -0
- package/dist/ui/assets/{github-DW6SXMQm.js → github-um5_lXvs.js} +1 -1
- package/dist/ui/assets/google-BFjmrVhw.js +1 -0
- package/dist/ui/assets/google-shared-DA7BsMNj.js +11 -0
- package/dist/ui/assets/google-vertex-fXPbdwC1.js +1 -0
- package/dist/ui/assets/hosted-config-apply-CTLeJas_.js +1 -0
- package/dist/ui/assets/iconsAndAliases-Bzj1tGpU.js +1 -0
- package/dist/ui/assets/{kernel-worker-Ctc9f-Os.js → kernel-worker-OJsR9uqi.js} +657 -660
- package/dist/ui/assets/legacy-styles-CJFCJMPl.js +2 -0
- package/dist/ui/assets/{lick-ws-bridge-Dzpk2SWe.js → lick-ws-bridge-BvcLlt-k.js} +1 -1
- package/dist/ui/assets/llm-session-id-DVmZ9C2t.js +1 -0
- package/dist/ui/assets/{local-llm-qyoAxJOh.js → local-llm-4QlmT-tX.js} +2 -2
- package/dist/ui/assets/magick-wasm-CzacIjJk.js +1 -0
- package/dist/ui/assets/main-CAjMV3Ro.js +88 -0
- package/dist/ui/assets/main-cherry-Cs47oYGZ.js +1 -0
- package/dist/ui/assets/{mistral-CMJILYv2.js → mistral-2x1R-8qy.js} +2 -2
- package/dist/ui/assets/mount-CCWGGelc.js +2 -0
- package/dist/ui/assets/mount-id-BuG8r64x.js +1 -0
- package/dist/ui/assets/{mount-BSixaSFY.js → mount-ihMevaxm.js} +1 -1
- package/dist/ui/assets/mount-picker-popup-DuIeknAs.js +1 -0
- package/dist/ui/assets/new-session-FKHfcyjF.js +1 -0
- package/dist/ui/assets/oauth-bootstrap-GcJnv7ZS.js +2 -0
- package/dist/ui/assets/oauth-service-C4iJUflq.js +1 -0
- package/dist/ui/assets/onboarding-orchestrator-CMwxiNyG.js +1 -0
- package/dist/ui/assets/openai-codex-Cd_FQwBX.js +1 -0
- package/dist/ui/assets/{openai-codex-responses-bUy20doI.js → openai-codex-responses-D6G4oCNQ.js} +2 -2
- package/dist/ui/assets/{openai-codex-Dzqpt2le.js → openai-codex-stad_9EL.js} +1 -1
- package/dist/ui/assets/openai-completions-B-04OvVB.js +5 -0
- package/dist/ui/assets/openai-responses-7lIT3cT2.js +1 -0
- package/dist/ui/assets/{openai-responses-shared-CZOJCHE4.js → openai-responses-shared-CWQY06he.js} +3 -3
- package/dist/ui/assets/panel-rpc-handlers-Cv_5zztD.js +2 -0
- package/dist/ui/assets/{picker-approval-tzbkMw-e.js → picker-approval-DeEn9TVD.js} +1 -1
- package/dist/ui/assets/preview-vfs-responder-dyQBWIl5.js +1 -0
- package/dist/ui/assets/provider-98CPXvln.js +2 -0
- package/dist/ui/assets/{provider-settings-CE6hFpk-.js → provider-settings-BHTU6Oq1.js} +3 -3
- package/dist/ui/assets/provider-store-access-DQA9SE91.js +1 -0
- package/dist/ui/assets/provider-store-access-DRY_bX7j.js +1 -0
- package/dist/ui/assets/{provider-CE260Ekz.js → provider-uxfYSUeg.js} +1 -1
- package/dist/ui/assets/{providers-mK9FsSeX.js → providers-ClvthlnA.js} +1 -1
- package/dist/ui/assets/{proxied-fetch-CrQaiubT.js → proxied-fetch-DK_0fIag.js} +1 -1
- package/dist/ui/assets/proxy-error-9UvXMpzG.js +1 -0
- package/dist/ui/assets/quick-llm-Dt3qzpkf.js +1 -0
- package/dist/ui/assets/remote-cdp-transport-DGfqLmXT.js +1 -0
- package/dist/ui/assets/remote-sprinkle-vfs-e81pZJKo.js +1 -0
- package/dist/ui/assets/{remote-terminal-view-a6PmeX3F.js → remote-terminal-view-D1kkPl1J.js} +3 -3
- package/dist/ui/assets/secret-env-CmNKUmzu.js +1 -0
- package/dist/ui/assets/serial-port-registry-Bc4wlwED.js +1 -0
- package/dist/ui/assets/session-freezer-tB8QnZcp.js +1 -0
- package/dist/ui/assets/session-store-D32FcG0Q.js +1 -0
- package/dist/ui/assets/setup-sprinkle-exec-CKhXbNXd.js +1 -0
- package/dist/ui/assets/setup-sudo-Bbfk21e1.js +1 -0
- package/dist/ui/assets/shared-B7TdM-Ik.js +1 -0
- package/dist/ui/assets/slicc-editor-BmqZL3Y5.js +12 -0
- package/dist/ui/assets/sprinkle-bridge-DrAUCEC_.js +2 -0
- package/dist/ui/assets/sprinkle-components-Z-5QHGGU.css +1 -0
- package/dist/ui/assets/sprinkle-manager-d2jZNgyG.js +1 -0
- package/dist/ui/assets/sprinkle-op-handler-Dta4p7Tc.js +1 -0
- package/dist/ui/assets/sprinkle-renderer-CYvBEU3p.js +192 -0
- package/dist/ui/assets/{store-B7ftqnoh.js → store-BzwlOEnO.js} +1 -1
- package/dist/ui/assets/{sudo-DflPC4JA.js → sudo-bOqvYoca.js} +1 -1
- package/dist/ui/assets/sync-dialog-DcLi4B3X.js +1 -0
- package/dist/ui/assets/theme-BBwuyzvz.js +1 -0
- package/dist/ui/assets/tokens-Drbn7djl.css +1 -0
- package/dist/ui/assets/tray-leave-runtime-CNDoDnAL.js +1 -0
- package/dist/ui/assets/upgrade-detection-C6lp-50u.js +1 -0
- package/dist/ui/assets/usb-device-registry-BP58Vi0S.js +1 -0
- package/dist/ui/assets/usb-operations-CkcrNzZw.js +1 -0
- package/dist/ui/assets/voice-input-BwyW3uqq.js +1 -0
- package/dist/ui/assets/wc-attach-BGY9fjZ2.js +13 -0
- package/dist/ui/assets/wc-browser-DunWpcR7.js +1 -0
- package/dist/ui/assets/wc-detached-BRgr8s0-.js +1 -0
- package/dist/ui/assets/wc-extension-aIAysc0n.js +2 -0
- package/dist/ui/assets/wc-float-label-dfUH87GD.js +1 -0
- package/dist/ui/assets/wc-history-nav-C5w8ianG.js +1 -0
- package/dist/ui/assets/wc-live-C6fyMRSK.js +250 -0
- package/dist/ui/assets/wc-nav-BXic2-dY.js +2 -0
- package/dist/ui/assets/wc-onboarding-3iBOy9Nz.js +2 -0
- package/dist/ui/assets/wc-placeholder-B8YCKa-r.js +4 -0
- package/dist/ui/assets/wc-settings-NLWwHmCR.js +24 -0
- package/dist/ui/assets/wc-shell-BlYl5z4M.js +3680 -0
- package/dist/ui/assets/wc-shell-WkeczD9x.css +1 -0
- package/dist/ui/assets/wc-sprinkles-B9Uz_XZG.js +2 -0
- package/dist/ui/assets/wc-tray-ChJE1e4m.js +5 -0
- package/dist/ui/assets/wc-voice-BBKCesX0.js +1 -0
- package/dist/ui/assets/welcome-detection-CMcvBaT6.js +1 -0
- package/dist/ui/assets/{xai-grok-Ce3jrjPU.js → xai-grok-BJlD5UbE.js} +1 -1
- package/dist/ui/assets/xai-grok-CflYL-Ds.js +1 -0
- package/dist/ui/electron-overlay-entry.js +7 -7
- package/dist/ui/index.html +1 -15
- package/dist/ui/packages/webapp/index.html +1 -15
- package/package.json +13 -7
- package/dist/ui/assets/adobe-BVxkTkBA.js +0 -1
- package/dist/ui/assets/adobe-BaVc81Mq.js +0 -2
- package/dist/ui/assets/agent-bridge-1hkOc9UU.js +0 -1
- package/dist/ui/assets/azure-openai-CrpUvCJp.js +0 -1
- package/dist/ui/assets/azure-openai-responses-KQPM7_wG.js +0 -1
- package/dist/ui/assets/bedrock-camp-ChanTZ04.js +0 -4
- package/dist/ui/assets/chat-fixture-CLDS_yKK.js +0 -26
- package/dist/ui/assets/clipboard-DgFtRQbq.js +0 -1
- package/dist/ui/assets/cost-command-BazGePkN.js +0 -1
- package/dist/ui/assets/diagnostics-mI-AnKx_.js +0 -1
- package/dist/ui/assets/esp8266-BPLrOmN4.js +0 -1
- package/dist/ui/assets/follower-sprinkle-bridge-Cubr4a_u.js +0 -1
- package/dist/ui/assets/github-F35-YtZY.js +0 -2
- package/dist/ui/assets/github-copilot-Dlry89H4.js +0 -2
- package/dist/ui/assets/google-BbVPHS50.js +0 -1
- package/dist/ui/assets/google-shared-BgawM9oG.js +0 -11
- package/dist/ui/assets/google-vertex-DGjVDVSA.js +0 -1
- package/dist/ui/assets/hosted-config-apply-uAym2aS5.js +0 -1
- package/dist/ui/assets/json-parse-BUunmmNl.js +0 -3
- package/dist/ui/assets/logger-DDBAeTLF.js +0 -1
- package/dist/ui/assets/magick-wasm-DsRaV3bT.js +0 -1
- package/dist/ui/assets/main-B-eXD0kW.css +0 -1
- package/dist/ui/assets/main-XZvrwEPY.js +0 -1813
- package/dist/ui/assets/main-cherry-C8OzitLa.js +0 -1
- package/dist/ui/assets/migration-run-tAIZ_Vie.js +0 -1
- package/dist/ui/assets/mime-types-B9LIwKG5.js +0 -1
- package/dist/ui/assets/mount-picker-popup-DncaR5N8.js +0 -1
- package/dist/ui/assets/nuke-command-BhwqmxIE.js +0 -1
- package/dist/ui/assets/oauth-bootstrap-17sjJ7zA.js +0 -2
- package/dist/ui/assets/oauth-service-Cw2PKb2X.js +0 -1
- package/dist/ui/assets/onboarding-orchestrator-Cbhplrds.js +0 -1
- package/dist/ui/assets/openai-codex-B_UmsArI.js +0 -1
- package/dist/ui/assets/openai-completions-B_5Ph3h0.js +0 -5
- package/dist/ui/assets/openai-responses-BQOBB5px.js +0 -1
- package/dist/ui/assets/opfs-leader-election-BJDtxHPr.js +0 -1
- package/dist/ui/assets/opfs-readonly-banner-BwveszbN.js +0 -1
- package/dist/ui/assets/panel-rpc-handlers-DePUvbzJ.js +0 -2
- package/dist/ui/assets/panel-vfs-guard-1E455_lR.js +0 -1
- package/dist/ui/assets/preload-helper-zJ_50EbN.js +0 -1
- package/dist/ui/assets/provider-DGMIgool.js +0 -2
- package/dist/ui/assets/provider-store-access-BENMwIW9.js +0 -1
- package/dist/ui/assets/provider-store-access-Dc2P9OXk.js +0 -1
- package/dist/ui/assets/rum-DW84CvBs.js +0 -1
- package/dist/ui/assets/secret-env-DcfTe28K.js +0 -1
- package/dist/ui/assets/slicc-editor-BdfBeQCF.js +0 -12
- package/dist/ui/assets/src-C9oNvq2b.js +0 -2
- package/dist/ui/assets/src-CcMujGBk.js +0 -3
- package/dist/ui/assets/tool-ui-YOPqzMmL.js +0 -1
- package/dist/ui/assets/transform-messages-B3Q-Bwv-.js +0 -1
- package/dist/ui/assets/tray-leave-runtime-dx7sASN4.js +0 -1
- package/dist/ui/assets/upgrade-detection-BRW_vA2B.js +0 -1
- package/dist/ui/assets/xai-grok-CoA-aDhu.js +0 -1
- /package/dist/ui/assets/{dist-C6lFkA1A2.js → dist-C6lFkA1A.js} +0 -0
|
@@ -0,0 +1,3680 @@
|
|
|
1
|
+
const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/quick-llm-Dt3qzpkf.js","assets/chunk-aKtaBQYM.js","assets/main-CAjMV3Ro.js","assets/modulepreload-polyfill-Dezn_h7o.js","assets/iconsAndAliases-Bzj1tGpU.js","assets/llm-session-id-DVmZ9C2t.js"])))=>i.map(i=>d[i]);
|
|
2
|
+
import{n as e}from"./chunk-aKtaBQYM.js";import{Dt as t}from"./main-CAjMV3Ro.js";import{t as n}from"./iconsAndAliases-Bzj1tGpU.js";var r=new Set([`webhook`,`cron`,`sprinkle`,`fswatch`,`session-reload`,`navigate`,`upgrade`,`workflow`,`scoop-notify`,`scoop-idle`,`scoop-wait`]);function i(e){return e!=null&&r.has(e)}var{entries:a,setPrototypeOf:o,isFrozen:s,getPrototypeOf:c,getOwnPropertyDescriptor:l}=Object,{freeze:u,seal:d,create:f}=Object,{apply:p,construct:m}=typeof Reflect<`u`&&Reflect;u||=function(e){return e},d||=function(e){return e},p||=function(e,t){var n=[...arguments].slice(2);return e.apply(t,n)},m||=function(e){return new e(...[...arguments].slice(1))};var h=b(Array.prototype.forEach),ee=b(Array.prototype.lastIndexOf),te=b(Array.prototype.pop),g=b(Array.prototype.push),ne=b(Array.prototype.splice),_=b(String.prototype.toLowerCase),re=b(String.prototype.toString),ie=b(String.prototype.match),ae=b(String.prototype.replace),oe=b(String.prototype.indexOf),se=b(String.prototype.trim),v=b(Object.prototype.hasOwnProperty),y=b(RegExp.prototype.test),ce=le(TypeError);function b(e){return function(t){t instanceof RegExp&&(t.lastIndex=0);var n=[...arguments].slice(1);return p(e,t,n)}}function le(e){return function(){return m(e,[...arguments])}}function x(e,t){let n=arguments.length>2&&arguments[2]!==void 0?arguments[2]:_;o&&o(e,null);let r=t.length;for(;r--;){let i=t[r];if(typeof i==`string`){let e=n(i);e!==i&&(s(t)||(t[r]=e),i=e)}e[i]=!0}return e}function ue(e){for(let t=0;t<e.length;t++)v(e,t)||(e[t]=null);return e}function S(e){let t=f(null);for(let[n,r]of a(e))v(e,n)&&(Array.isArray(r)?t[n]=ue(r):r&&typeof r==`object`&&r.constructor===Object?t[n]=S(r):t[n]=r);return t}function de(e,t){for(;e!==null;){let n=l(e,t);if(n){if(n.get)return b(n.get);if(typeof n.value==`function`)return b(n.value)}e=c(e)}function n(){return null}return n}var fe=u(`a.abbr.acronym.address.area.article.aside.audio.b.bdi.bdo.big.blink.blockquote.body.br.button.canvas.caption.center.cite.code.col.colgroup.content.data.datalist.dd.decorator.del.details.dfn.dialog.dir.div.dl.dt.element.em.fieldset.figcaption.figure.font.footer.form.h1.h2.h3.h4.h5.h6.head.header.hgroup.hr.html.i.img.input.ins.kbd.label.legend.li.main.map.mark.marquee.menu.menuitem.meter.nav.nobr.ol.optgroup.option.output.p.picture.pre.progress.q.rp.rt.ruby.s.samp.search.section.select.shadow.slot.small.source.spacer.span.strike.strong.style.sub.summary.sup.table.tbody.td.template.textarea.tfoot.th.thead.time.tr.track.tt.u.ul.var.video.wbr`.split(`.`)),pe=u(`svg.a.altglyph.altglyphdef.altglyphitem.animatecolor.animatemotion.animatetransform.circle.clippath.defs.desc.ellipse.enterkeyhint.exportparts.filter.font.g.glyph.glyphref.hkern.image.inputmode.line.lineargradient.marker.mask.metadata.mpath.part.path.pattern.polygon.polyline.radialgradient.rect.stop.style.switch.symbol.text.textpath.title.tref.tspan.view.vkern`.split(`.`)),me=u([`feBlend`,`feColorMatrix`,`feComponentTransfer`,`feComposite`,`feConvolveMatrix`,`feDiffuseLighting`,`feDisplacementMap`,`feDistantLight`,`feDropShadow`,`feFlood`,`feFuncA`,`feFuncB`,`feFuncG`,`feFuncR`,`feGaussianBlur`,`feImage`,`feMerge`,`feMergeNode`,`feMorphology`,`feOffset`,`fePointLight`,`feSpecularLighting`,`feSpotLight`,`feTile`,`feTurbulence`]),he=u([`animate`,`color-profile`,`cursor`,`discard`,`font-face`,`font-face-format`,`font-face-name`,`font-face-src`,`font-face-uri`,`foreignobject`,`hatch`,`hatchpath`,`mesh`,`meshgradient`,`meshpatch`,`meshrow`,`missing-glyph`,`script`,`set`,`solidcolor`,`unknown`,`use`]),ge=u(`math.menclose.merror.mfenced.mfrac.mglyph.mi.mlabeledtr.mmultiscripts.mn.mo.mover.mpadded.mphantom.mroot.mrow.ms.mspace.msqrt.mstyle.msub.msup.msubsup.mtable.mtd.mtext.mtr.munder.munderover.mprescripts`.split(`.`)),_e=u([`maction`,`maligngroup`,`malignmark`,`mlongdiv`,`mscarries`,`mscarry`,`msgroup`,`mstack`,`msline`,`msrow`,`semantics`,`annotation`,`annotation-xml`,`mprescripts`,`none`]),ve=u([`#text`]),ye=u(`accept.action.align.alt.autocapitalize.autocomplete.autopictureinpicture.autoplay.background.bgcolor.border.capture.cellpadding.cellspacing.checked.cite.class.clear.color.cols.colspan.controls.controlslist.coords.crossorigin.datetime.decoding.default.dir.disabled.disablepictureinpicture.disableremoteplayback.download.draggable.enctype.enterkeyhint.exportparts.face.for.headers.height.hidden.high.href.hreflang.id.inert.inputmode.integrity.ismap.kind.label.lang.list.loading.loop.low.max.maxlength.media.method.min.minlength.multiple.muted.name.nonce.noshade.novalidate.nowrap.open.optimum.part.pattern.placeholder.playsinline.popover.popovertarget.popovertargetaction.poster.preload.pubdate.radiogroup.readonly.rel.required.rev.reversed.role.rows.rowspan.spellcheck.scope.selected.shape.size.sizes.slot.span.srclang.start.src.srcset.step.style.summary.tabindex.title.translate.type.usemap.valign.value.width.wrap.xmlns.slot`.split(`.`)),be=u(`accent-height.accumulate.additive.alignment-baseline.amplitude.ascent.attributename.attributetype.azimuth.basefrequency.baseline-shift.begin.bias.by.class.clip.clippathunits.clip-path.clip-rule.color.color-interpolation.color-interpolation-filters.color-profile.color-rendering.cx.cy.d.dx.dy.diffuseconstant.direction.display.divisor.dur.edgemode.elevation.end.exponent.fill.fill-opacity.fill-rule.filter.filterunits.flood-color.flood-opacity.font-family.font-size.font-size-adjust.font-stretch.font-style.font-variant.font-weight.fx.fy.g1.g2.glyph-name.glyphref.gradientunits.gradienttransform.height.href.id.image-rendering.in.in2.intercept.k.k1.k2.k3.k4.kerning.keypoints.keysplines.keytimes.lang.lengthadjust.letter-spacing.kernelmatrix.kernelunitlength.lighting-color.local.marker-end.marker-mid.marker-start.markerheight.markerunits.markerwidth.maskcontentunits.maskunits.max.mask.mask-type.media.method.mode.min.name.numoctaves.offset.operator.opacity.order.orient.orientation.origin.overflow.paint-order.path.pathlength.patterncontentunits.patterntransform.patternunits.points.preservealpha.preserveaspectratio.primitiveunits.r.rx.ry.radius.refx.refy.repeatcount.repeatdur.restart.result.rotate.scale.seed.shape-rendering.slope.specularconstant.specularexponent.spreadmethod.startoffset.stddeviation.stitchtiles.stop-color.stop-opacity.stroke-dasharray.stroke-dashoffset.stroke-linecap.stroke-linejoin.stroke-miterlimit.stroke-opacity.stroke.stroke-width.style.surfacescale.systemlanguage.tabindex.tablevalues.targetx.targety.transform.transform-origin.text-anchor.text-decoration.text-rendering.textlength.type.u1.u2.unicode.values.viewbox.visibility.version.vert-adv-y.vert-origin-x.vert-origin-y.width.word-spacing.wrap.writing-mode.xchannelselector.ychannelselector.x.x1.x2.xmlns.y.y1.y2.z.zoomandpan`.split(`.`)),xe=u(`accent.accentunder.align.bevelled.close.columnsalign.columnlines.columnspan.denomalign.depth.dir.display.displaystyle.encoding.fence.frame.height.href.id.largeop.length.linethickness.lspace.lquote.mathbackground.mathcolor.mathsize.mathvariant.maxsize.minsize.movablelimits.notation.numalign.open.rowalign.rowlines.rowspacing.rowspan.rspace.rquote.scriptlevel.scriptminsize.scriptsizemultiplier.selection.separator.separators.stretchy.subscriptshift.supscriptshift.symmetric.voffset.width.xmlns`.split(`.`)),Se=u([`xlink:href`,`xml:id`,`xlink:title`,`xml:space`,`xmlns:xlink`]),Ce=d(/\{\{[\w\W]*|[\w\W]*\}\}/gm),we=d(/<%[\w\W]*|[\w\W]*%>/gm),Te=d(/\$\{[\w\W]*/gm),Ee=d(/^data-[\-\w.\u00B7-\uFFFF]+$/),De=d(/^aria-[\-\w]+$/),Oe=d(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|sms|cid|xmpp|matrix):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i),C=d(/^(?:\w+script|data):/i),ke=d(/[\u0000-\u0020\u00A0\u1680\u180E\u2000-\u2029\u205F\u3000]/g),Ae=d(/^html$/i),je=d(/^[a-z][.\w]*(-[.\w]+)+$/i),Me=Object.freeze({__proto__:null,ARIA_ATTR:De,ATTR_WHITESPACE:ke,CUSTOM_ELEMENT:je,DATA_ATTR:Ee,DOCTYPE_NAME:Ae,ERB_EXPR:we,IS_ALLOWED_URI:Oe,IS_SCRIPT_OR_DATA:C,MUSTACHE_EXPR:Ce,TMPLIT_EXPR:Te}),Ne={element:1,attribute:2,text:3,cdataSection:4,entityReference:5,entityNode:6,progressingInstruction:7,comment:8,document:9,documentType:10,documentFragment:11,notation:12},Pe=function(){return typeof window>`u`?null:window},Fe=function(e,t){if(typeof e!=`object`||typeof e.createPolicy!=`function`)return null;let n=null,r=`data-tt-policy-suffix`;t&&t.hasAttribute(r)&&(n=t.getAttribute(r));let i=`dompurify`+(n?`#`+n:``);try{return e.createPolicy(i,{createHTML(e){return e},createScriptURL(e){return e}})}catch{return console.warn(`TrustedTypes policy `+i+` could not be created.`),null}},Ie=function(){return{afterSanitizeAttributes:[],afterSanitizeElements:[],afterSanitizeShadowDOM:[],beforeSanitizeAttributes:[],beforeSanitizeElements:[],beforeSanitizeShadowDOM:[],uponSanitizeAttribute:[],uponSanitizeElement:[],uponSanitizeShadowNode:[]}};function Le(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:Pe(),t=e=>Le(e);if(t.version=`3.3.3`,t.removed=[],!e||!e.document||e.document.nodeType!==Ne.document||!e.Element)return t.isSupported=!1,t;let{document:n}=e,r=n,i=r.currentScript,{DocumentFragment:o,HTMLTemplateElement:s,Node:c,Element:l,NodeFilter:d,NamedNodeMap:p=e.NamedNodeMap||e.MozNamedAttrMap,HTMLFormElement:m,DOMParser:b,trustedTypes:le}=e,ue=l.prototype,Ce=de(ue,`cloneNode`),we=de(ue,`remove`),Te=de(ue,`nextSibling`),Ee=de(ue,`childNodes`),De=de(ue,`parentNode`);if(typeof s==`function`){let e=n.createElement(`template`);e.content&&e.content.ownerDocument&&(n=e.content.ownerDocument)}let C,ke=``,{implementation:je,createNodeIterator:w,createDocumentFragment:Re,getElementsByTagName:ze}=n,{importNode:Be}=r,T=Ie();t.isSupported=typeof a==`function`&&typeof De==`function`&&je&&je.createHTMLDocument!==void 0;let{MUSTACHE_EXPR:E,ERB_EXPR:D,TMPLIT_EXPR:Ve,DATA_ATTR:O,ARIA_ATTR:He,IS_SCRIPT_OR_DATA:Ue,ATTR_WHITESPACE:We,CUSTOM_ELEMENT:Ge}=Me,{IS_ALLOWED_URI:Ke}=Me,k=null,qe=x({},[...fe,...pe,...me,...ge,...ve]),A=null,Je=x({},[...ye,...be,...xe,...Se]),j=Object.seal(f(null,{tagNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeNameCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},allowCustomizedBuiltInElements:{writable:!0,configurable:!1,enumerable:!0,value:!1}})),Ye=null,Xe=null,M=Object.seal(f(null,{tagCheck:{writable:!0,configurable:!1,enumerable:!0,value:null},attributeCheck:{writable:!0,configurable:!1,enumerable:!0,value:null}})),Ze=!0,Qe=!0,$e=!1,et=!0,tt=!1,nt=!0,N=!1,rt=!1,it=!1,at=!1,ot=!1,st=!1,ct=!0,lt=!1,ut=!0,dt=!1,ft={},P=null,pt=x({},[`annotation-xml`,`audio`,`colgroup`,`desc`,`foreignobject`,`head`,`iframe`,`math`,`mi`,`mn`,`mo`,`ms`,`mtext`,`noembed`,`noframes`,`noscript`,`plaintext`,`script`,`style`,`svg`,`template`,`thead`,`title`,`video`,`xmp`]),mt=null,ht=x({},[`audio`,`video`,`img`,`source`,`image`,`track`]),gt=null,_t=x({},[`alt`,`class`,`for`,`id`,`label`,`name`,`pattern`,`placeholder`,`role`,`summary`,`title`,`value`,`style`,`xmlns`]),vt=`http://www.w3.org/1998/Math/MathML`,yt=`http://www.w3.org/2000/svg`,F=`http://www.w3.org/1999/xhtml`,bt=F,xt=!1,St=null,Ct=x({},[vt,yt,F],re),wt=x({},[`mi`,`mo`,`mn`,`ms`,`mtext`]),Tt=x({},[`annotation-xml`]),Et=x({},[`title`,`style`,`font`,`a`,`script`]),Dt=null,Ot=[`application/xhtml+xml`,`text/html`],I=null,kt=null,At=n.createElement(`form`),jt=function(e){return e instanceof RegExp||e instanceof Function},Mt=function(){let e=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};if(!(kt&&kt===e)){if((!e||typeof e!=`object`)&&(e={}),e=S(e),Dt=Ot.indexOf(e.PARSER_MEDIA_TYPE)===-1?`text/html`:e.PARSER_MEDIA_TYPE,I=Dt===`application/xhtml+xml`?re:_,k=v(e,`ALLOWED_TAGS`)?x({},e.ALLOWED_TAGS,I):qe,A=v(e,`ALLOWED_ATTR`)?x({},e.ALLOWED_ATTR,I):Je,St=v(e,`ALLOWED_NAMESPACES`)?x({},e.ALLOWED_NAMESPACES,re):Ct,gt=v(e,`ADD_URI_SAFE_ATTR`)?x(S(_t),e.ADD_URI_SAFE_ATTR,I):_t,mt=v(e,`ADD_DATA_URI_TAGS`)?x(S(ht),e.ADD_DATA_URI_TAGS,I):ht,P=v(e,`FORBID_CONTENTS`)?x({},e.FORBID_CONTENTS,I):pt,Ye=v(e,`FORBID_TAGS`)?x({},e.FORBID_TAGS,I):S({}),Xe=v(e,`FORBID_ATTR`)?x({},e.FORBID_ATTR,I):S({}),ft=v(e,`USE_PROFILES`)?e.USE_PROFILES:!1,Ze=e.ALLOW_ARIA_ATTR!==!1,Qe=e.ALLOW_DATA_ATTR!==!1,$e=e.ALLOW_UNKNOWN_PROTOCOLS||!1,et=e.ALLOW_SELF_CLOSE_IN_ATTR!==!1,tt=e.SAFE_FOR_TEMPLATES||!1,nt=e.SAFE_FOR_XML!==!1,N=e.WHOLE_DOCUMENT||!1,at=e.RETURN_DOM||!1,ot=e.RETURN_DOM_FRAGMENT||!1,st=e.RETURN_TRUSTED_TYPE||!1,it=e.FORCE_BODY||!1,ct=e.SANITIZE_DOM!==!1,lt=e.SANITIZE_NAMED_PROPS||!1,ut=e.KEEP_CONTENT!==!1,dt=e.IN_PLACE||!1,Ke=e.ALLOWED_URI_REGEXP||Oe,bt=e.NAMESPACE||F,wt=e.MATHML_TEXT_INTEGRATION_POINTS||wt,Tt=e.HTML_INTEGRATION_POINTS||Tt,j=e.CUSTOM_ELEMENT_HANDLING||{},e.CUSTOM_ELEMENT_HANDLING&&jt(e.CUSTOM_ELEMENT_HANDLING.tagNameCheck)&&(j.tagNameCheck=e.CUSTOM_ELEMENT_HANDLING.tagNameCheck),e.CUSTOM_ELEMENT_HANDLING&&jt(e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)&&(j.attributeNameCheck=e.CUSTOM_ELEMENT_HANDLING.attributeNameCheck),e.CUSTOM_ELEMENT_HANDLING&&typeof e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements==`boolean`&&(j.allowCustomizedBuiltInElements=e.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements),tt&&(Qe=!1),ot&&(at=!0),ft&&(k=x({},ve),A=f(null),ft.html===!0&&(x(k,fe),x(A,ye)),ft.svg===!0&&(x(k,pe),x(A,be),x(A,Se)),ft.svgFilters===!0&&(x(k,me),x(A,be),x(A,Se)),ft.mathMl===!0&&(x(k,ge),x(A,xe),x(A,Se))),v(e,`ADD_TAGS`)||(M.tagCheck=null),v(e,`ADD_ATTR`)||(M.attributeCheck=null),e.ADD_TAGS&&(typeof e.ADD_TAGS==`function`?M.tagCheck=e.ADD_TAGS:(k===qe&&(k=S(k)),x(k,e.ADD_TAGS,I))),e.ADD_ATTR&&(typeof e.ADD_ATTR==`function`?M.attributeCheck=e.ADD_ATTR:(A===Je&&(A=S(A)),x(A,e.ADD_ATTR,I))),e.ADD_URI_SAFE_ATTR&&x(gt,e.ADD_URI_SAFE_ATTR,I),e.FORBID_CONTENTS&&(P===pt&&(P=S(P)),x(P,e.FORBID_CONTENTS,I)),e.ADD_FORBID_CONTENTS&&(P===pt&&(P=S(P)),x(P,e.ADD_FORBID_CONTENTS,I)),ut&&(k[`#text`]=!0),N&&x(k,[`html`,`head`,`body`]),k.table&&(x(k,[`tbody`]),delete Ye.tbody),e.TRUSTED_TYPES_POLICY){if(typeof e.TRUSTED_TYPES_POLICY.createHTML!=`function`)throw ce(`TRUSTED_TYPES_POLICY configuration option must provide a "createHTML" hook.`);if(typeof e.TRUSTED_TYPES_POLICY.createScriptURL!=`function`)throw ce(`TRUSTED_TYPES_POLICY configuration option must provide a "createScriptURL" hook.`);C=e.TRUSTED_TYPES_POLICY,ke=C.createHTML(``)}else C===void 0&&(C=Fe(le,i)),C!==null&&typeof ke==`string`&&(ke=C.createHTML(``));u&&u(e),kt=e}},Nt=x({},[...pe,...me,...he]),Pt=x({},[...ge,..._e]),Ft=function(e){let t=De(e);(!t||!t.tagName)&&(t={namespaceURI:bt,tagName:`template`});let n=_(e.tagName),r=_(t.tagName);return St[e.namespaceURI]?e.namespaceURI===yt?t.namespaceURI===F?n===`svg`:t.namespaceURI===vt?n===`svg`&&(r===`annotation-xml`||wt[r]):!!Nt[n]:e.namespaceURI===vt?t.namespaceURI===F?n===`math`:t.namespaceURI===yt?n===`math`&&Tt[r]:!!Pt[n]:e.namespaceURI===F?t.namespaceURI===yt&&!Tt[r]||t.namespaceURI===vt&&!wt[r]?!1:!Pt[n]&&(Et[n]||!Nt[n]):!!(Dt===`application/xhtml+xml`&&St[e.namespaceURI]):!1},It=function(e){g(t.removed,{element:e});try{De(e).removeChild(e)}catch{we(e)}},L=function(e,n){try{g(t.removed,{attribute:n.getAttributeNode(e),from:n})}catch{g(t.removed,{attribute:null,from:n})}if(n.removeAttribute(e),e===`is`)if(at||ot)try{It(n)}catch{}else try{n.setAttribute(e,``)}catch{}},Lt=function(e){let t=null,r=null;if(it)e=`<remove></remove>`+e;else{let t=ie(e,/^[\r\n\t ]+/);r=t&&t[0]}Dt===`application/xhtml+xml`&&bt===F&&(e=`<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body>`+e+`</body></html>`);let i=C?C.createHTML(e):e;if(bt===F)try{t=new b().parseFromString(i,Dt)}catch{}if(!t||!t.documentElement){t=je.createDocument(bt,`template`,null);try{t.documentElement.innerHTML=xt?ke:i}catch{}}let a=t.body||t.documentElement;return e&&r&&a.insertBefore(n.createTextNode(r),a.childNodes[0]||null),bt===F?ze.call(t,N?`html`:`body`)[0]:N?t.documentElement:a},Rt=function(e){return w.call(e.ownerDocument||e,e,d.SHOW_ELEMENT|d.SHOW_COMMENT|d.SHOW_TEXT|d.SHOW_PROCESSING_INSTRUCTION|d.SHOW_CDATA_SECTION,null)},zt=function(e){return e instanceof m&&(typeof e.nodeName!=`string`||typeof e.textContent!=`string`||typeof e.removeChild!=`function`||!(e.attributes instanceof p)||typeof e.removeAttribute!=`function`||typeof e.setAttribute!=`function`||typeof e.namespaceURI!=`string`||typeof e.insertBefore!=`function`||typeof e.hasChildNodes!=`function`)},R=function(e){return typeof c==`function`&&e instanceof c};function z(e,n,r){h(e,e=>{e.call(t,n,r,kt)})}let Bt=function(e){let n=null;if(z(T.beforeSanitizeElements,e,null),zt(e))return It(e),!0;let r=I(e.nodeName);if(z(T.uponSanitizeElement,e,{tagName:r,allowedTags:k}),nt&&e.hasChildNodes()&&!R(e.firstElementChild)&&y(/<[/\w!]/g,e.innerHTML)&&y(/<[/\w!]/g,e.textContent)||e.nodeType===Ne.progressingInstruction||nt&&e.nodeType===Ne.comment&&y(/<[/\w]/g,e.data))return It(e),!0;if(!(M.tagCheck instanceof Function&&M.tagCheck(r))&&(!k[r]||Ye[r])){if(!Ye[r]&&Vt(r)&&(j.tagNameCheck instanceof RegExp&&y(j.tagNameCheck,r)||j.tagNameCheck instanceof Function&&j.tagNameCheck(r)))return!1;if(ut&&!P[r]){let t=De(e)||e.parentNode,n=Ee(e)||e.childNodes;if(n&&t){let r=n.length;for(let i=r-1;i>=0;--i){let r=Ce(n[i],!0);r.__removalCount=(e.__removalCount||0)+1,t.insertBefore(r,Te(e))}}}return It(e),!0}return e instanceof l&&!Ft(e)||(r===`noscript`||r===`noembed`||r===`noframes`)&&y(/<\/no(script|embed|frames)/i,e.innerHTML)?(It(e),!0):(tt&&e.nodeType===Ne.text&&(n=e.textContent,h([E,D,Ve],e=>{n=ae(n,e,` `)}),e.textContent!==n&&(g(t.removed,{element:e.cloneNode()}),e.textContent=n)),z(T.afterSanitizeElements,e,null),!1)},B=function(e,t,r){if(Xe[t]||ct&&(t===`id`||t===`name`)&&(r in n||r in At))return!1;if(!(Qe&&!Xe[t]&&y(O,t))&&!(Ze&&y(He,t))&&!(M.attributeCheck instanceof Function&&M.attributeCheck(t,e))){if(!A[t]||Xe[t]){if(!(Vt(e)&&(j.tagNameCheck instanceof RegExp&&y(j.tagNameCheck,e)||j.tagNameCheck instanceof Function&&j.tagNameCheck(e))&&(j.attributeNameCheck instanceof RegExp&&y(j.attributeNameCheck,t)||j.attributeNameCheck instanceof Function&&j.attributeNameCheck(t,e))||t===`is`&&j.allowCustomizedBuiltInElements&&(j.tagNameCheck instanceof RegExp&&y(j.tagNameCheck,r)||j.tagNameCheck instanceof Function&&j.tagNameCheck(r))))return!1}else if(!gt[t]&&!y(Ke,ae(r,We,``))&&!((t===`src`||t===`xlink:href`||t===`href`)&&e!==`script`&&oe(r,`data:`)===0&&mt[e])&&!($e&&!y(Ue,ae(r,We,``)))&&r)return!1}return!0},Vt=function(e){return e!==`annotation-xml`&&ie(e,Ge)},Ht=function(e){z(T.beforeSanitizeAttributes,e,null);let{attributes:n}=e;if(!n||zt(e))return;let r={attrName:``,attrValue:``,keepAttr:!0,allowedAttributes:A,forceKeepAttr:void 0},i=n.length;for(;i--;){let{name:a,namespaceURI:o,value:s}=n[i],c=I(a),l=s,u=a===`value`?l:se(l);if(r.attrName=c,r.attrValue=u,r.keepAttr=!0,r.forceKeepAttr=void 0,z(T.uponSanitizeAttribute,e,r),u=r.attrValue,lt&&(c===`id`||c===`name`)&&(L(a,e),u=`user-content-`+u),nt&&y(/((--!?|])>)|<\/(style|script|title|xmp|textarea|noscript|iframe|noembed|noframes)/i,u)){L(a,e);continue}if(c===`attributename`&&ie(u,`href`)){L(a,e);continue}if(r.forceKeepAttr)continue;if(!r.keepAttr){L(a,e);continue}if(!et&&y(/\/>/i,u)){L(a,e);continue}tt&&h([E,D,Ve],e=>{u=ae(u,e,` `)});let d=I(e.nodeName);if(!B(d,c,u)){L(a,e);continue}if(C&&typeof le==`object`&&typeof le.getAttributeType==`function`&&!o)switch(le.getAttributeType(d,c)){case`TrustedHTML`:u=C.createHTML(u);break;case`TrustedScriptURL`:u=C.createScriptURL(u);break}if(u!==l)try{o?e.setAttributeNS(o,a,u):e.setAttribute(a,u),zt(e)?It(e):te(t.removed)}catch{L(a,e)}}z(T.afterSanitizeAttributes,e,null)},Ut=function e(t){let n=null,r=Rt(t);for(z(T.beforeSanitizeShadowDOM,t,null);n=r.nextNode();)z(T.uponSanitizeShadowNode,n,null),Bt(n),Ht(n),n.content instanceof o&&e(n.content);z(T.afterSanitizeShadowDOM,t,null)};return t.sanitize=function(e){let n=arguments.length>1&&arguments[1]!==void 0?arguments[1]:{},i=null,a=null,s=null,l=null;if(xt=!e,xt&&(e=`<!-->`),typeof e!=`string`&&!R(e))if(typeof e.toString==`function`){if(e=e.toString(),typeof e!=`string`)throw ce(`dirty is not a string, aborting`)}else throw ce(`toString is not a function`);if(!t.isSupported)return e;if(rt||Mt(n),t.removed=[],typeof e==`string`&&(dt=!1),dt){if(e.nodeName){let t=I(e.nodeName);if(!k[t]||Ye[t])throw ce(`root node is forbidden and cannot be sanitized in-place`)}}else if(e instanceof c)i=Lt(`<!---->`),a=i.ownerDocument.importNode(e,!0),a.nodeType===Ne.element&&a.nodeName===`BODY`||a.nodeName===`HTML`?i=a:i.appendChild(a);else{if(!at&&!tt&&!N&&e.indexOf(`<`)===-1)return C&&st?C.createHTML(e):e;if(i=Lt(e),!i)return at?null:st?ke:``}i&&it&&It(i.firstChild);let u=Rt(dt?e:i);for(;s=u.nextNode();)Bt(s),Ht(s),s.content instanceof o&&Ut(s.content);if(dt)return e;if(at){if(ot)for(l=Re.call(i.ownerDocument);i.firstChild;)l.appendChild(i.firstChild);else l=i;return(A.shadowroot||A.shadowrootmode)&&(l=Be.call(r,l,!0)),l}let d=N?i.outerHTML:i.innerHTML;return N&&k[`!doctype`]&&i.ownerDocument&&i.ownerDocument.doctype&&i.ownerDocument.doctype.name&&y(Ae,i.ownerDocument.doctype.name)&&(d=`<!DOCTYPE `+i.ownerDocument.doctype.name+`>
|
|
3
|
+
`+d),tt&&h([E,D,Ve],e=>{d=ae(d,e,` `)}),C&&st?C.createHTML(d):d},t.setConfig=function(){Mt(arguments.length>0&&arguments[0]!==void 0?arguments[0]:{}),rt=!0},t.clearConfig=function(){kt=null,rt=!1},t.isValidAttribute=function(e,t,n){return kt||Mt({}),B(I(e),I(t),n)},t.addHook=function(e,t){typeof t==`function`&&g(T[e],t)},t.removeHook=function(e,t){if(t!==void 0){let n=ee(T[e],t);return n===-1?void 0:ne(T[e],n,1)[0]}return te(T[e])},t.removeHooks=function(e){T[e]=[]},t.removeAllHooks=function(){T=Ie()},t}var w=Le(),Re=w.sanitize.bind(w);w.isSupported,w.addHook.bind(w),w.removeHook.bind(w),w.removeHooks.bind(w),w.removeAllHooks.bind(w),w.setConfig.bind(w),w.clearConfig.bind(w),w.isValidAttribute.bind(w),w.version,w.removed;function ze(){return{async:!1,breaks:!1,extensions:null,gfm:!0,hooks:null,pedantic:!1,renderer:null,silent:!1,tokenizer:null,walkTokens:null}}var Be=ze();function T(e){Be=e}var E={exec:()=>null};function D(e,t=``){let n=typeof e==`string`?e:e.source,r={replace:(e,t)=>{let i=typeof t==`string`?t:t.source;return i=i.replace(O.caret,`$1`),n=n.replace(e,i),r},getRegex:()=>new RegExp(n,t)};return r}var Ve=(()=>{try{return!0}catch{return!1}})(),O={codeRemoveIndent:/^(?: {1,4}| {0,3}\t)/gm,outputLinkReplace:/\\([\[\]])/g,indentCodeCompensation:/^(\s+)(?:```)/,beginningSpace:/^\s+/,endingHash:/#$/,startingSpaceChar:/^ /,endingSpaceChar:/ $/,nonSpaceChar:/[^ ]/,newLineCharGlobal:/\n/g,tabCharGlobal:/\t/g,multipleSpaceGlobal:/\s+/g,blankLine:/^[ \t]*$/,doubleBlankLine:/\n[ \t]*\n[ \t]*$/,blockquoteStart:/^ {0,3}>/,blockquoteSetextReplace:/\n {0,3}((?:=+|-+) *)(?=\n|$)/g,blockquoteSetextReplace2:/^ {0,3}>[ \t]?/gm,listReplaceNesting:/^ {1,4}(?=( {4})*[^ ])/g,listIsTask:/^\[[ xX]\] +\S/,listReplaceTask:/^\[[ xX]\] +/,listTaskCheckbox:/\[[ xX]\]/,anyLine:/\n.*\n/,hrefBrackets:/^<(.*)>$/,tableDelimiter:/[:|]/,tableAlignChars:/^\||\| *$/g,tableRowBlankLine:/\n[ \t]*$/,tableAlignRight:/^ *-+: *$/,tableAlignCenter:/^ *:-+: *$/,tableAlignLeft:/^ *:-+ *$/,startATag:/^<a /i,endATag:/^<\/a>/i,startPreScriptTag:/^<(pre|code|kbd|script)(\s|>)/i,endPreScriptTag:/^<\/(pre|code|kbd|script)(\s|>)/i,startAngleBracket:/^</,endAngleBracket:/>$/,pedanticHrefTitle:/^([^'"]*[^\s])\s+(['"])(.*)\2/,unicodeAlphaNumeric:/[\p{L}\p{N}]/u,escapeTest:/[&<>"']/,escapeReplace:/[&<>"']/g,escapeTestNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/,escapeReplaceNoEncode:/[<>"']|&(?!(#\d{1,7}|#[Xx][a-fA-F0-9]{1,6}|\w+);)/g,caret:/(^|[^\[])\^/g,percentDecode:/%25/g,findPipe:/\|/g,splitPipe:/ \|/,slashPipe:/\\\|/g,carriageReturn:/\r\n|\r/g,spaceLine:/^ +$/gm,notSpaceStart:/^\S*/,endingNewline:/\n$/,listItemRegex:e=>RegExp(`^( {0,3}${e})((?:[ ][^\\n]*)?(?:\\n|$))`),nextBulletRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}(?:[*+-]|\\d{1,9}[.)])((?:[ ][^\\n]*)?(?:\\n|$))`),hrRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}((?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$)`),fencesBeginRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}(?:\`\`\`|~~~)`),headingBeginRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}#`),htmlBeginRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}<(?:[a-z].*>|!--)`,`i`),blockquoteBeginRegex:e=>RegExp(`^ {0,${Math.min(3,e-1)}}>`)},He=/^(?:[ \t]*(?:\n|$))+/,Ue=/^((?: {4}| {0,3}\t)[^\n]+(?:\n(?:[ \t]*(?:\n|$))*)?)+/,We=/^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})([^\n]*)(?:\n|$)(?:|([\s\S]*?)(?:\n|$))(?: {0,3}\1[~`]* *(?=\n|$)|$)/,Ge=/^ {0,3}((?:-[\t ]*){3,}|(?:_[ \t]*){3,}|(?:\*[ \t]*){3,})(?:\n+|$)/,Ke=/^ {0,3}(#{1,6})(?=\s|$)(.*)(?:\n+|$)/,k=/ {0,3}(?:[*+-]|\d{1,9}[.)])/,qe=/^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/,A=D(qe).replace(/bull/g,k).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/\|table/g,``).getRegex(),Je=D(qe).replace(/bull/g,k).replace(/blockCode/g,/(?: {4}| {0,3}\t)/).replace(/fences/g,/ {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g,/ {0,3}>/).replace(/heading/g,/ {0,3}#{1,6}/).replace(/html/g,/ {0,3}<[^\n>]+>\n/).replace(/table/g,/ {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex(),j=/^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/,Ye=/^[^\n]+/,Xe=/(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/,M=D(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace(`label`,Xe).replace(`title`,/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex(),Ze=D(/^(bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g,k).getRegex(),Qe=`address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul`,$e=/<!--(?:-?>|[\s\S]*?(?:-->|$))/,et=D(`^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ ]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ ]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ ]*)+\\n|$))`,`i`).replace(`comment`,$e).replace(`tag`,Qe).replace(`attribute`,/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),tt=D(j).replace(`hr`,Ge).replace(`heading`,` {0,3}#{1,6}(?:\\s|$)`).replace(`|lheading`,``).replace(`|table`,``).replace(`blockquote`,` {0,3}>`).replace(`fences`," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace(`list`,` {0,3}(?:[*+-]|1[.)])[ \\t]`).replace(`html`,`</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)`).replace(`tag`,Qe).getRegex(),nt={blockquote:D(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace(`paragraph`,tt).getRegex(),code:Ue,def:M,fences:We,heading:Ke,hr:Ge,html:et,lheading:A,list:Ze,newline:He,paragraph:tt,table:E,text:Ye},N=D(`^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)`).replace(`hr`,Ge).replace(`heading`,` {0,3}#{1,6}(?:\\s|$)`).replace(`blockquote`,` {0,3}>`).replace(`code`,`(?: {4}| {0,3} )[^\\n]`).replace(`fences`," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace(`list`,` {0,3}(?:[*+-]|1[.)])[ \\t]`).replace(`html`,`</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)`).replace(`tag`,Qe).getRegex(),rt={...nt,lheading:Je,table:N,paragraph:D(j).replace(`hr`,Ge).replace(`heading`,` {0,3}#{1,6}(?:\\s|$)`).replace(`|lheading`,``).replace(`table`,N).replace(`blockquote`,` {0,3}>`).replace(`fences`," {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace(`list`,` {0,3}(?:[*+-]|1[.)])[ \\t]`).replace(`html`,`</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)`).replace(`tag`,Qe).getRegex()},it={...nt,html:D(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace(`comment`,$e).replace(/tag/g,`(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b`).getRegex(),def:/^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/,heading:/^(#{1,6})(.*)(?:\n+|$)/,fences:E,lheading:/^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/,paragraph:D(j).replace(`hr`,Ge).replace(`heading`,` *#{1,6} *[^
|
|
4
|
+
]`).replace(`lheading`,A).replace(`|table`,``).replace(`blockquote`,` {0,3}>`).replace(`|fences`,``).replace(`|list`,``).replace(`|html`,``).replace(`|tag`,``).getRegex()},at=/^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/,ot=/^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,st=/^( {2,}|\\)\n(?!\s*$)/,ct=/^(`+|[^`])(?:(?= {2,}\n)|[\s\S]*?(?:(?=[\\<!\[`*_]|\b_|$)|[^ ](?= {2,}\n)))/,lt=/[\p{P}\p{S}]/u,ut=/[\s\p{P}\p{S}]/u,dt=/[^\s\p{P}\p{S}]/u,ft=D(/^((?![*_])punctSpace)/,`u`).replace(/punctSpace/g,ut).getRegex(),P=/(?!~)[\p{P}\p{S}]/u,pt=/(?!~)[\s\p{P}\p{S}]/u,mt=/(?:[^\s\p{P}\p{S}]|~)/u,ht=D(/link|precode-code|html/,`g`).replace(`link`,/\[(?:[^\[\]`]|(?<a>`+)[^`]+\k<a>(?!`))*?\]\((?:\\[\s\S]|[^\\\(\)]|\((?:\\[\s\S]|[^\\\(\)])*\))*\)/).replace(`precode-`,Ve?"(?<!`)()":"(^^|[^`])").replace(`code`,/(?<b>`+)[^`]+\k<b>(?!`)/).replace(`html`,/<(?! )[^<>]*?>/).getRegex(),gt=/^(?:\*+(?:((?!\*)punct)|([^\s*]))?)|^_+(?:((?!_)punct)|([^\s_]))?/,_t=D(gt,`u`).replace(/punct/g,lt).getRegex(),vt=D(gt,`u`).replace(/punct/g,P).getRegex(),yt=`^[^_*]*?__[^_*]*?\\*[^_*]*?(?=__)|[^*]+(?=[^*])|(?!\\*)punct(\\*+)(?=[\\s]|$)|notPunctSpace(\\*+)(?!\\*)(?=punctSpace|$)|(?!\\*)punctSpace(\\*+)(?=notPunctSpace)|[\\s](\\*+)(?!\\*)(?=punct)|(?!\\*)punct(\\*+)(?!\\*)(?=punct)|notPunctSpace(\\*+)(?=notPunctSpace)`,F=D(yt,`gu`).replace(/notPunctSpace/g,dt).replace(/punctSpace/g,ut).replace(/punct/g,lt).getRegex(),bt=D(yt,`gu`).replace(/notPunctSpace/g,mt).replace(/punctSpace/g,pt).replace(/punct/g,P).getRegex(),xt=D(`^[^_*]*?\\*\\*[^_*]*?_[^_*]*?(?=\\*\\*)|[^_]+(?=[^_])|(?!_)punct(_+)(?=[\\s]|$)|notPunctSpace(_+)(?!_)(?=punctSpace|$)|(?!_)punctSpace(_+)(?=notPunctSpace)|[\\s](_+)(?!_)(?=punct)|(?!_)punct(_+)(?!_)(?=punct)`,`gu`).replace(/notPunctSpace/g,dt).replace(/punctSpace/g,ut).replace(/punct/g,lt).getRegex(),St=D(/^~~?(?:((?!~)punct)|[^\s~])/,`u`).replace(/punct/g,lt).getRegex(),Ct=D(`^[^~]+(?=[^~])|(?!~)punct(~~?)(?=[\\s]|$)|notPunctSpace(~~?)(?!~)(?=punctSpace|$)|(?!~)punctSpace(~~?)(?=notPunctSpace)|[\\s](~~?)(?!~)(?=punct)|(?!~)punct(~~?)(?!~)(?=punct)|notPunctSpace(~~?)(?=notPunctSpace)`,`gu`).replace(/notPunctSpace/g,dt).replace(/punctSpace/g,ut).replace(/punct/g,lt).getRegex(),wt=D(/\\(punct)/,`gu`).replace(/punct/g,lt).getRegex(),Tt=D(/^<(scheme:[^\s\x00-\x1f<>]*|email)>/).replace(`scheme`,/[a-zA-Z][a-zA-Z0-9+.-]{1,31}/).replace(`email`,/[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/).getRegex(),Et=D($e).replace(`(?:-->|$)`,`-->`).getRegex(),Dt=D(`^comment|^</[a-zA-Z][\\w:-]*\\s*>|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^<![a-zA-Z]+\\s[\\s\\S]*?>|^<!\\[CDATA\\[[\\s\\S]*?\\]\\]>`).replace(`comment`,Et).replace(`attribute`,/\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/).getRegex(),Ot=/(?:\[(?:\\[\s\S]|[^\[\]\\])*\]|\\[\s\S]|`+(?!`)[^`]*?`+(?!`)|``+(?=\])|[^\[\]\\`])*?/,I=D(/^!?\[(label)\]\(\s*(href)(?:(?:[ \t]+(?:\n[ \t]*)?|\n[ \t]*)(title))?\s*\)/).replace(`label`,Ot).replace(`href`,/<(?:\\.|[^\n<>\\])+>|[^ \t\n\x00-\x1f]*/).replace(`title`,/"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/).getRegex(),kt=D(/^!?\[(label)\]\[(ref)\]/).replace(`label`,Ot).replace(`ref`,Xe).getRegex(),At=D(/^!?\[(ref)\](?:\[\])?/).replace(`ref`,Xe).getRegex(),jt=D(`reflink|nolink(?!\\()`,`g`).replace(`reflink`,kt).replace(`nolink`,At).getRegex(),Mt=/[hH][tT][tT][pP][sS]?|[fF][tT][pP]/,Nt={_backpedal:E,anyPunctuation:wt,autolink:Tt,blockSkip:ht,br:st,code:ot,del:E,delLDelim:E,delRDelim:E,emStrongLDelim:_t,emStrongRDelimAst:F,emStrongRDelimUnd:xt,escape:at,link:I,nolink:At,punctuation:ft,reflink:kt,reflinkSearch:jt,tag:Dt,text:ct,url:E},Pt={...Nt,link:D(/^!?\[(label)\]\((.*?)\)/).replace(`label`,Ot).getRegex(),reflink:D(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace(`label`,Ot).getRegex()},Ft={...Nt,emStrongRDelimAst:bt,emStrongLDelim:vt,delLDelim:St,delRDelim:Ct,url:D(/^((?:protocol):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/).replace(`protocol`,Mt).replace(`email`,/[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(),_backpedal:/(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/,del:/^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/,text:D(/^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|protocol:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/).replace(`protocol`,Mt).getRegex()},It={...Ft,br:D(st).replace(`{2,}`,`*`).getRegex(),text:D(Ft.text).replace(`\\b_`,`\\b_| {2,}\\n`).replace(/\{2,\}/g,`*`).getRegex()},L={normal:nt,gfm:rt,pedantic:it},Lt={normal:Nt,gfm:Ft,breaks:It,pedantic:Pt},Rt={"&":`&`,"<":`<`,">":`>`,'"':`"`,"'":`'`},zt=e=>Rt[e];function R(e,t){if(t){if(O.escapeTest.test(e))return e.replace(O.escapeReplace,zt)}else if(O.escapeTestNoEncode.test(e))return e.replace(O.escapeReplaceNoEncode,zt);return e}function z(e){try{e=encodeURI(e).replace(O.percentDecode,`%`)}catch{return null}return e}function Bt(e,t){let n=e.replace(O.findPipe,(e,t,n)=>{let r=!1,i=t;for(;--i>=0&&n[i]===`\\`;)r=!r;return r?`|`:` |`}).split(O.splitPipe),r=0;if(n[0].trim()||n.shift(),n.length>0&&!n.at(-1)?.trim()&&n.pop(),t)if(n.length>t)n.splice(t);else for(;n.length<t;)n.push(``);for(;r<n.length;r++)n[r]=n[r].trim().replace(O.slashPipe,`|`);return n}function B(e,t,n){let r=e.length;if(r===0)return``;let i=0;for(;i<r;){let a=e.charAt(r-i-1);if(a===t&&!n)i++;else if(a!==t&&n)i++;else break}return e.slice(0,r-i)}function Vt(e){let t=e.split(`
|
|
5
|
+
`),n=t.length-1;for(;n>=0&&!t[n].trim();)n--;return t.length-n<=2?e:t.slice(0,n+1).join(`
|
|
6
|
+
`)}function Ht(e,t){if(e.indexOf(t[1])===-1)return-1;let n=0;for(let r=0;r<e.length;r++)if(e[r]===`\\`)r++;else if(e[r]===t[0])n++;else if(e[r]===t[1]&&(n--,n<0))return r;return n>0?-2:-1}function Ut(e,t=0){let n=t,r=``;for(let t of e)if(t===` `){let e=4-n%4;r+=` `.repeat(e),n+=e}else r+=t,n++;return r}function Wt(e,t,n,r,i){let a=t.href,o=t.title||null,s=e[1].replace(i.other.outputLinkReplace,`$1`);r.state.inLink=!0;let c={type:e[0].charAt(0)===`!`?`image`:`link`,raw:n,href:a,title:o,text:s,tokens:r.inlineTokens(s)};return r.state.inLink=!1,c}function Gt(e,t,n){let r=e.match(n.other.indentCodeCompensation);if(r===null)return t;let i=r[1];return t.split(`
|
|
7
|
+
`).map(e=>{let t=e.match(n.other.beginningSpace);if(t===null)return e;let[r]=t;return r.length>=i.length?e.slice(i.length):e}).join(`
|
|
8
|
+
`)}var Kt=class{options;rules;lexer;constructor(e){this.options=e||Be}space(e){let t=this.rules.block.newline.exec(e);if(t&&t[0].length>0)return{type:`space`,raw:t[0]}}code(e){let t=this.rules.block.code.exec(e);if(t){let e=this.options.pedantic?t[0]:Vt(t[0]);return{type:`code`,raw:e,codeBlockStyle:`indented`,text:e.replace(this.rules.other.codeRemoveIndent,``)}}}fences(e){let t=this.rules.block.fences.exec(e);if(t){let e=t[0],n=Gt(e,t[3]||``,this.rules);return{type:`code`,raw:e,lang:t[2]?t[2].trim().replace(this.rules.inline.anyPunctuation,`$1`):t[2],text:n}}}heading(e){let t=this.rules.block.heading.exec(e);if(t){let e=t[2].trim();if(this.rules.other.endingHash.test(e)){let t=B(e,`#`);(this.options.pedantic||!t||this.rules.other.endingSpaceChar.test(t))&&(e=t.trim())}return{type:`heading`,raw:B(t[0],`
|
|
9
|
+
`),depth:t[1].length,text:e,tokens:this.lexer.inline(e)}}}hr(e){let t=this.rules.block.hr.exec(e);if(t)return{type:`hr`,raw:B(t[0],`
|
|
10
|
+
`)}}blockquote(e){let t=this.rules.block.blockquote.exec(e);if(t){let e=B(t[0],`
|
|
11
|
+
`).split(`
|
|
12
|
+
`),n=``,r=``,i=[];for(;e.length>0;){let t=!1,a=[],o;for(o=0;o<e.length;o++)if(this.rules.other.blockquoteStart.test(e[o]))a.push(e[o]),t=!0;else if(!t)a.push(e[o]);else break;e=e.slice(o);let s=a.join(`
|
|
13
|
+
`),c=s.replace(this.rules.other.blockquoteSetextReplace,`
|
|
14
|
+
$1`).replace(this.rules.other.blockquoteSetextReplace2,``);n=n?`${n}
|
|
15
|
+
${s}`:s,r=r?`${r}
|
|
16
|
+
${c}`:c;let l=this.lexer.state.top;if(this.lexer.state.top=!0,this.lexer.blockTokens(c,i,!0),this.lexer.state.top=l,e.length===0)break;let u=i.at(-1);if(u?.type===`code`)break;if(u?.type===`blockquote`){let t=u,a=t.raw+`
|
|
17
|
+
`+e.join(`
|
|
18
|
+
`),o=this.blockquote(a);i[i.length-1]=o,n=n.substring(0,n.length-t.raw.length)+o.raw,r=r.substring(0,r.length-t.text.length)+o.text;break}else if(u?.type===`list`){let t=u,a=t.raw+`
|
|
19
|
+
`+e.join(`
|
|
20
|
+
`),o=this.list(a);i[i.length-1]=o,n=n.substring(0,n.length-u.raw.length)+o.raw,r=r.substring(0,r.length-t.raw.length)+o.raw,e=a.substring(i.at(-1).raw.length).split(`
|
|
21
|
+
`);continue}}return{type:`blockquote`,raw:n,tokens:i,text:r}}}list(e){let t=this.rules.block.list.exec(e);if(t){let n=t[1].trim(),r=n.length>1,i={type:`list`,raw:``,ordered:r,start:r?+n.slice(0,-1):``,loose:!1,items:[]};n=r?`\\d{1,9}\\${n.slice(-1)}`:`\\${n}`,this.options.pedantic&&(n=r?n:`[*+-]`);let a=this.rules.other.listItemRegex(n),o=!1;for(;e;){let n=!1,r=``,s=``;if(!(t=a.exec(e))||this.rules.block.hr.test(e))break;r=t[0],e=e.substring(r.length);let c=Ut(t[2].split(`
|
|
22
|
+
`,1)[0],t[1].length),l=e.split(`
|
|
23
|
+
`,1)[0],u=!c.trim(),d=0;if(this.options.pedantic?(d=2,s=c.trimStart()):u?d=t[1].length+1:(d=c.search(this.rules.other.nonSpaceChar),d=d>4?1:d,s=c.slice(d),d+=t[1].length),u&&this.rules.other.blankLine.test(l)&&(r+=l+`
|
|
24
|
+
`,e=e.substring(l.length+1),n=!0),!n){let t=this.rules.other.nextBulletRegex(d),n=this.rules.other.hrRegex(d),i=this.rules.other.fencesBeginRegex(d),a=this.rules.other.headingBeginRegex(d),o=this.rules.other.htmlBeginRegex(d),f=this.rules.other.blockquoteBeginRegex(d);for(;e;){let p=e.split(`
|
|
25
|
+
`,1)[0],m;if(l=p,this.options.pedantic?(l=l.replace(this.rules.other.listReplaceNesting,` `),m=l):m=l.replace(this.rules.other.tabCharGlobal,` `),i.test(l)||a.test(l)||o.test(l)||f.test(l)||t.test(l)||n.test(l))break;if(m.search(this.rules.other.nonSpaceChar)>=d||!l.trim())s+=`
|
|
26
|
+
`+m.slice(d);else{if(u||c.replace(this.rules.other.tabCharGlobal,` `).search(this.rules.other.nonSpaceChar)>=4||i.test(c)||a.test(c)||n.test(c))break;s+=`
|
|
27
|
+
`+l}u=!l.trim(),r+=p+`
|
|
28
|
+
`,e=e.substring(p.length+1),c=m.slice(d)}}i.loose||(o?i.loose=!0:this.rules.other.doubleBlankLine.test(r)&&(o=!0)),i.items.push({type:`list_item`,raw:r,task:!!this.options.gfm&&this.rules.other.listIsTask.test(s),loose:!1,text:s,tokens:[]}),i.raw+=r}let s=i.items.at(-1);if(s)s.raw=s.raw.trimEnd(),s.text=s.text.trimEnd();else return;i.raw=i.raw.trimEnd();for(let e of i.items){if(this.lexer.state.top=!1,e.tokens=this.lexer.blockTokens(e.text,[]),e.task){if(e.text=e.text.replace(this.rules.other.listReplaceTask,``),e.tokens[0]?.type===`text`||e.tokens[0]?.type===`paragraph`){e.tokens[0].raw=e.tokens[0].raw.replace(this.rules.other.listReplaceTask,``),e.tokens[0].text=e.tokens[0].text.replace(this.rules.other.listReplaceTask,``);for(let e=this.lexer.inlineQueue.length-1;e>=0;e--)if(this.rules.other.listIsTask.test(this.lexer.inlineQueue[e].src)){this.lexer.inlineQueue[e].src=this.lexer.inlineQueue[e].src.replace(this.rules.other.listReplaceTask,``);break}}let t=this.rules.other.listTaskCheckbox.exec(e.raw);if(t){let n={type:`checkbox`,raw:t[0]+` `,checked:t[0]!==`[ ]`};e.checked=n.checked,i.loose?e.tokens[0]&&[`paragraph`,`text`].includes(e.tokens[0].type)&&`tokens`in e.tokens[0]&&e.tokens[0].tokens?(e.tokens[0].raw=n.raw+e.tokens[0].raw,e.tokens[0].text=n.raw+e.tokens[0].text,e.tokens[0].tokens.unshift(n)):e.tokens.unshift({type:`paragraph`,raw:n.raw,text:n.raw,tokens:[n]}):e.tokens.unshift(n)}}if(!i.loose){let t=e.tokens.filter(e=>e.type===`space`);i.loose=t.length>0&&t.some(e=>this.rules.other.anyLine.test(e.raw))}}if(i.loose)for(let e of i.items){e.loose=!0;for(let t of e.tokens)t.type===`text`&&(t.type=`paragraph`)}return i}}html(e){let t=this.rules.block.html.exec(e);if(t){let e=Vt(t[0]);return{type:`html`,block:!0,raw:e,pre:t[1]===`pre`||t[1]===`script`||t[1]===`style`,text:e}}}def(e){let t=this.rules.block.def.exec(e);if(t){let e=t[1].toLowerCase().replace(this.rules.other.multipleSpaceGlobal,` `),n=t[2]?t[2].replace(this.rules.other.hrefBrackets,`$1`).replace(this.rules.inline.anyPunctuation,`$1`):``,r=t[3]?t[3].substring(1,t[3].length-1).replace(this.rules.inline.anyPunctuation,`$1`):t[3];return{type:`def`,tag:e,raw:B(t[0],`
|
|
29
|
+
`),href:n,title:r}}}table(e){let t=this.rules.block.table.exec(e);if(!t||!this.rules.other.tableDelimiter.test(t[2]))return;let n=Bt(t[1]),r=t[2].replace(this.rules.other.tableAlignChars,``).split(`|`),i=t[3]?.trim()?t[3].replace(this.rules.other.tableRowBlankLine,``).split(`
|
|
30
|
+
`):[],a={type:`table`,raw:B(t[0],`
|
|
31
|
+
`),header:[],align:[],rows:[]};if(n.length===r.length){for(let e of r)this.rules.other.tableAlignRight.test(e)?a.align.push(`right`):this.rules.other.tableAlignCenter.test(e)?a.align.push(`center`):this.rules.other.tableAlignLeft.test(e)?a.align.push(`left`):a.align.push(null);for(let e=0;e<n.length;e++)a.header.push({text:n[e],tokens:this.lexer.inline(n[e]),header:!0,align:a.align[e]});for(let e of i)a.rows.push(Bt(e,a.header.length).map((e,t)=>({text:e,tokens:this.lexer.inline(e),header:!1,align:a.align[t]})));return a}}lheading(e){let t=this.rules.block.lheading.exec(e);if(t){let e=t[1].trim();return{type:`heading`,raw:B(t[0],`
|
|
32
|
+
`),depth:t[2].charAt(0)===`=`?1:2,text:e,tokens:this.lexer.inline(e)}}}paragraph(e){let t=this.rules.block.paragraph.exec(e);if(t){let e=t[1].charAt(t[1].length-1)===`
|
|
33
|
+
`?t[1].slice(0,-1):t[1];return{type:`paragraph`,raw:t[0],text:e,tokens:this.lexer.inline(e)}}}text(e){let t=this.rules.block.text.exec(e);if(t)return{type:`text`,raw:t[0],text:t[0],tokens:this.lexer.inline(t[0])}}escape(e){let t=this.rules.inline.escape.exec(e);if(t)return{type:`escape`,raw:t[0],text:t[1]}}tag(e){let t=this.rules.inline.tag.exec(e);if(t)return!this.lexer.state.inLink&&this.rules.other.startATag.test(t[0])?this.lexer.state.inLink=!0:this.lexer.state.inLink&&this.rules.other.endATag.test(t[0])&&(this.lexer.state.inLink=!1),!this.lexer.state.inRawBlock&&this.rules.other.startPreScriptTag.test(t[0])?this.lexer.state.inRawBlock=!0:this.lexer.state.inRawBlock&&this.rules.other.endPreScriptTag.test(t[0])&&(this.lexer.state.inRawBlock=!1),{type:`html`,raw:t[0],inLink:this.lexer.state.inLink,inRawBlock:this.lexer.state.inRawBlock,block:!1,text:t[0]}}link(e){let t=this.rules.inline.link.exec(e);if(t){let e=t[2].trim();if(!this.options.pedantic&&this.rules.other.startAngleBracket.test(e)){if(!this.rules.other.endAngleBracket.test(e))return;let t=B(e.slice(0,-1),`\\`);if((e.length-t.length)%2==0)return}else{let e=Ht(t[2],`()`);if(e===-2)return;if(e>-1){let n=(t[0].indexOf(`!`)===0?5:4)+t[1].length+e;t[2]=t[2].substring(0,e),t[0]=t[0].substring(0,n).trim(),t[3]=``}}let n=t[2],r=``;if(this.options.pedantic){let e=this.rules.other.pedanticHrefTitle.exec(n);e&&(n=e[1],r=e[3])}else r=t[3]?t[3].slice(1,-1):``;return n=n.trim(),this.rules.other.startAngleBracket.test(n)&&(n=this.options.pedantic&&!this.rules.other.endAngleBracket.test(e)?n.slice(1):n.slice(1,-1)),Wt(t,{href:n&&n.replace(this.rules.inline.anyPunctuation,`$1`),title:r&&r.replace(this.rules.inline.anyPunctuation,`$1`)},t[0],this.lexer,this.rules)}}reflink(e,t){let n;if((n=this.rules.inline.reflink.exec(e))||(n=this.rules.inline.nolink.exec(e))){let e=t[(n[2]||n[1]).replace(this.rules.other.multipleSpaceGlobal,` `).toLowerCase()];if(!e){let e=n[0].charAt(0);return{type:`text`,raw:e,text:e}}return Wt(n,e,n[0],this.lexer,this.rules)}}emStrong(e,t,n=``){let r=this.rules.inline.emStrongLDelim.exec(e);if(!(!r||!r[1]&&!r[2]&&!r[3]&&!r[4]||r[4]&&n.match(this.rules.other.unicodeAlphaNumeric))&&(!(r[1]||r[3])||!n||this.rules.inline.punctuation.exec(n))){let n=[...r[0]].length-1,i,a,o=n,s=0,c=r[0][0]===`*`?this.rules.inline.emStrongRDelimAst:this.rules.inline.emStrongRDelimUnd;for(c.lastIndex=0,t=t.slice(-1*e.length+n);(r=c.exec(t))!==null;){if(i=r[1]||r[2]||r[3]||r[4]||r[5]||r[6],!i)continue;if(a=[...i].length,r[3]||r[4]){o+=a;continue}else if((r[5]||r[6])&&n%3&&!((n+a)%3)){s+=a;continue}if(o-=a,o>0)continue;a=Math.min(a,a+o+s);let t=[...r[0]][0].length,c=e.slice(0,n+r.index+t+a);if(Math.min(n,a)%2){let e=c.slice(1,-1);return{type:`em`,raw:c,text:e,tokens:this.lexer.inlineTokens(e)}}let l=c.slice(2,-2);return{type:`strong`,raw:c,text:l,tokens:this.lexer.inlineTokens(l)}}}}codespan(e){let t=this.rules.inline.code.exec(e);if(t){let e=t[2].replace(this.rules.other.newLineCharGlobal,` `),n=this.rules.other.nonSpaceChar.test(e),r=this.rules.other.startingSpaceChar.test(e)&&this.rules.other.endingSpaceChar.test(e);return n&&r&&(e=e.substring(1,e.length-1)),{type:`codespan`,raw:t[0],text:e}}}br(e){let t=this.rules.inline.br.exec(e);if(t)return{type:`br`,raw:t[0]}}del(e,t,n=``){let r=this.rules.inline.delLDelim.exec(e);if(r&&(!r[1]||!n||this.rules.inline.punctuation.exec(n))){let n=[...r[0]].length-1,i,a,o=n,s=this.rules.inline.delRDelim;for(s.lastIndex=0,t=t.slice(-1*e.length+n);(r=s.exec(t))!==null;){if(i=r[1]||r[2]||r[3]||r[4]||r[5]||r[6],!i||(a=[...i].length,a!==n))continue;if(r[3]||r[4]){o+=a;continue}if(o-=a,o>0)continue;a=Math.min(a,a+o);let t=[...r[0]][0].length,s=e.slice(0,n+r.index+t+a),c=s.slice(n,-n);return{type:`del`,raw:s,text:c,tokens:this.lexer.inlineTokens(c)}}}}autolink(e){let t=this.rules.inline.autolink.exec(e);if(t){let e,n;return t[2]===`@`?(e=t[1],n=`mailto:`+e):(e=t[1],n=e),{type:`link`,raw:t[0],text:e,href:n,tokens:[{type:`text`,raw:e,text:e}]}}}url(e){let t;if(t=this.rules.inline.url.exec(e)){let e,n;if(t[2]===`@`)e=t[0],n=`mailto:`+e;else{let r;do r=t[0],t[0]=this.rules.inline._backpedal.exec(t[0])?.[0]??``;while(r!==t[0]);e=t[0],n=t[1]===`www.`?`http://`+t[0]:t[0]}return{type:`link`,raw:t[0],text:e,href:n,tokens:[{type:`text`,raw:e,text:e}]}}}inlineText(e){let t=this.rules.inline.text.exec(e);if(t){let e=this.lexer.state.inRawBlock;return{type:`text`,raw:t[0],text:t[0],escaped:e}}}},V=class e{tokens;options;state;inlineQueue;tokenizer;constructor(e){this.tokens=[],this.tokens.links=Object.create(null),this.options=e||Be,this.options.tokenizer=this.options.tokenizer||new Kt,this.tokenizer=this.options.tokenizer,this.tokenizer.options=this.options,this.tokenizer.lexer=this,this.inlineQueue=[],this.state={inLink:!1,inRawBlock:!1,top:!0};let t={other:O,block:L.normal,inline:Lt.normal};this.options.pedantic?(t.block=L.pedantic,t.inline=Lt.pedantic):this.options.gfm&&(t.block=L.gfm,this.options.breaks?t.inline=Lt.breaks:t.inline=Lt.gfm),this.tokenizer.rules=t}static get rules(){return{block:L,inline:Lt}}static lex(t,n){return new e(n).lex(t)}static lexInline(t,n){return new e(n).inlineTokens(t)}lex(e){e=e.replace(O.carriageReturn,`
|
|
34
|
+
`),this.blockTokens(e,this.tokens);for(let e=0;e<this.inlineQueue.length;e++){let t=this.inlineQueue[e];this.inlineTokens(t.src,t.tokens)}return this.inlineQueue=[],this.tokens}blockTokens(e,t=[],n=!1){for(this.tokenizer.lexer=this,this.options.pedantic&&(e=e.replace(O.tabCharGlobal,` `).replace(O.spaceLine,``));e;){let r;if(this.options.extensions?.block?.some(n=>(r=n.call({lexer:this},e,t))?(e=e.substring(r.raw.length),t.push(r),!0):!1))continue;if(r=this.tokenizer.space(e)){e=e.substring(r.raw.length);let n=t.at(-1);r.raw.length===1&&n!==void 0?n.raw+=`
|
|
35
|
+
`:t.push(r);continue}if(r=this.tokenizer.code(e)){e=e.substring(r.raw.length);let n=t.at(-1);n?.type===`paragraph`||n?.type===`text`?(n.raw+=(n.raw.endsWith(`
|
|
36
|
+
`)?``:`
|
|
37
|
+
`)+r.raw,n.text+=`
|
|
38
|
+
`+r.text,this.inlineQueue.at(-1).src=n.text):t.push(r);continue}if(r=this.tokenizer.fences(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.heading(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.hr(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.blockquote(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.list(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.html(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.def(e)){e=e.substring(r.raw.length);let n=t.at(-1);n?.type===`paragraph`||n?.type===`text`?(n.raw+=(n.raw.endsWith(`
|
|
39
|
+
`)?``:`
|
|
40
|
+
`)+r.raw,n.text+=`
|
|
41
|
+
`+r.raw,this.inlineQueue.at(-1).src=n.text):this.tokens.links[r.tag]||(this.tokens.links[r.tag]={href:r.href,title:r.title},t.push(r));continue}if(r=this.tokenizer.table(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.lheading(e)){e=e.substring(r.raw.length),t.push(r);continue}let i=e;if(this.options.extensions?.startBlock){let t=1/0,n=e.slice(1),r;this.options.extensions.startBlock.forEach(e=>{r=e.call({lexer:this},n),typeof r==`number`&&r>=0&&(t=Math.min(t,r))}),t<1/0&&t>=0&&(i=e.substring(0,t+1))}if(this.state.top&&(r=this.tokenizer.paragraph(i))){let a=t.at(-1);n&&a?.type===`paragraph`?(a.raw+=(a.raw.endsWith(`
|
|
42
|
+
`)?``:`
|
|
43
|
+
`)+r.raw,a.text+=`
|
|
44
|
+
`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=a.text):t.push(r),n=i.length!==e.length,e=e.substring(r.raw.length);continue}if(r=this.tokenizer.text(e)){e=e.substring(r.raw.length);let n=t.at(-1);n?.type===`text`?(n.raw+=(n.raw.endsWith(`
|
|
45
|
+
`)?``:`
|
|
46
|
+
`)+r.raw,n.text+=`
|
|
47
|
+
`+r.text,this.inlineQueue.pop(),this.inlineQueue.at(-1).src=n.text):t.push(r);continue}if(e){let t=`Infinite loop on byte: `+e.charCodeAt(0);if(this.options.silent){console.error(t);break}else throw Error(t)}}return this.state.top=!0,t}inline(e,t=[]){return this.inlineQueue.push({src:e,tokens:t}),t}inlineTokens(e,t=[]){this.tokenizer.lexer=this;let n=e,r=null;if(this.tokens.links){let e=Object.keys(this.tokens.links);if(e.length>0)for(;(r=this.tokenizer.rules.inline.reflinkSearch.exec(n))!==null;)e.includes(r[0].slice(r[0].lastIndexOf(`[`)+1,-1))&&(n=n.slice(0,r.index)+`[`+`a`.repeat(r[0].length-2)+`]`+n.slice(this.tokenizer.rules.inline.reflinkSearch.lastIndex))}for(;(r=this.tokenizer.rules.inline.anyPunctuation.exec(n))!==null;)n=n.slice(0,r.index)+`++`+n.slice(this.tokenizer.rules.inline.anyPunctuation.lastIndex);let i;for(;(r=this.tokenizer.rules.inline.blockSkip.exec(n))!==null;)i=r[2]?r[2].length:0,n=n.slice(0,r.index+i)+`[`+`a`.repeat(r[0].length-i-2)+`]`+n.slice(this.tokenizer.rules.inline.blockSkip.lastIndex);n=this.options.hooks?.emStrongMask?.call({lexer:this},n)??n;let a=!1,o=``;for(;e;){a||(o=``),a=!1;let r;if(this.options.extensions?.inline?.some(n=>(r=n.call({lexer:this},e,t))?(e=e.substring(r.raw.length),t.push(r),!0):!1))continue;if(r=this.tokenizer.escape(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.tag(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.link(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.reflink(e,this.tokens.links)){e=e.substring(r.raw.length);let n=t.at(-1);r.type===`text`&&n?.type===`text`?(n.raw+=r.raw,n.text+=r.text):t.push(r);continue}if(r=this.tokenizer.emStrong(e,n,o)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.codespan(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.br(e)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.del(e,n,o)){e=e.substring(r.raw.length),t.push(r);continue}if(r=this.tokenizer.autolink(e)){e=e.substring(r.raw.length),t.push(r);continue}if(!this.state.inLink&&(r=this.tokenizer.url(e))){e=e.substring(r.raw.length),t.push(r);continue}let i=e;if(this.options.extensions?.startInline){let t=1/0,n=e.slice(1),r;this.options.extensions.startInline.forEach(e=>{r=e.call({lexer:this},n),typeof r==`number`&&r>=0&&(t=Math.min(t,r))}),t<1/0&&t>=0&&(i=e.substring(0,t+1))}if(r=this.tokenizer.inlineText(i)){e=e.substring(r.raw.length),r.raw.slice(-1)!==`_`&&(o=r.raw.slice(-1)),a=!0;let n=t.at(-1);n?.type===`text`?(n.raw+=r.raw,n.text+=r.text):t.push(r);continue}if(e){let t=`Infinite loop on byte: `+e.charCodeAt(0);if(this.options.silent){console.error(t);break}else throw Error(t)}}return t}},qt=class{options;parser;constructor(e){this.options=e||Be}space(e){return``}code({text:e,lang:t,escaped:n}){let r=(t||``).match(O.notSpaceStart)?.[0],i=e.replace(O.endingNewline,``)+`
|
|
48
|
+
`;return r?`<pre><code class="language-`+R(r)+`">`+(n?i:R(i,!0))+`</code></pre>
|
|
49
|
+
`:`<pre><code>`+(n?i:R(i,!0))+`</code></pre>
|
|
50
|
+
`}blockquote({tokens:e}){return`<blockquote>
|
|
51
|
+
${this.parser.parse(e)}</blockquote>
|
|
52
|
+
`}html({text:e}){return e}def(e){return``}heading({tokens:e,depth:t}){return`<h${t}>${this.parser.parseInline(e)}</h${t}>
|
|
53
|
+
`}hr(e){return`<hr>
|
|
54
|
+
`}list(e){let t=e.ordered,n=e.start,r=``;for(let t=0;t<e.items.length;t++){let n=e.items[t];r+=this.listitem(n)}let i=t?`ol`:`ul`,a=t&&n!==1?` start="`+n+`"`:``;return`<`+i+a+`>
|
|
55
|
+
`+r+`</`+i+`>
|
|
56
|
+
`}listitem(e){return`<li>${this.parser.parse(e.tokens)}</li>
|
|
57
|
+
`}checkbox({checked:e}){return`<input `+(e?`checked="" `:``)+`disabled="" type="checkbox"> `}paragraph({tokens:e}){return`<p>${this.parser.parseInline(e)}</p>
|
|
58
|
+
`}table(e){let t=``,n=``;for(let t=0;t<e.header.length;t++)n+=this.tablecell(e.header[t]);t+=this.tablerow({text:n});let r=``;for(let t=0;t<e.rows.length;t++){let i=e.rows[t];n=``;for(let e=0;e<i.length;e++)n+=this.tablecell(i[e]);r+=this.tablerow({text:n})}return r&&=`<tbody>${r}</tbody>`,`<table>
|
|
59
|
+
<thead>
|
|
60
|
+
`+t+`</thead>
|
|
61
|
+
`+r+`</table>
|
|
62
|
+
`}tablerow({text:e}){return`<tr>
|
|
63
|
+
${e}</tr>
|
|
64
|
+
`}tablecell(e){let t=this.parser.parseInline(e.tokens),n=e.header?`th`:`td`;return(e.align?`<${n} align="${e.align}">`:`<${n}>`)+t+`</${n}>
|
|
65
|
+
`}strong({tokens:e}){return`<strong>${this.parser.parseInline(e)}</strong>`}em({tokens:e}){return`<em>${this.parser.parseInline(e)}</em>`}codespan({text:e}){return`<code>${R(e,!0)}</code>`}br(e){return`<br>`}del({tokens:e}){return`<del>${this.parser.parseInline(e)}</del>`}link({href:e,title:t,tokens:n}){let r=this.parser.parseInline(n),i=z(e);if(i===null)return r;e=i;let a=`<a href="`+e+`"`;return t&&(a+=` title="`+R(t)+`"`),a+=`>`+r+`</a>`,a}image({href:e,title:t,text:n,tokens:r}){r&&(n=this.parser.parseInline(r,this.parser.textRenderer));let i=z(e);if(i===null)return R(n);e=i;let a=`<img src="${e}" alt="${R(n)}"`;return t&&(a+=` title="${R(t)}"`),a+=`>`,a}text(e){return`tokens`in e&&e.tokens?this.parser.parseInline(e.tokens):`escaped`in e&&e.escaped?e.text:R(e.text)}},Jt=class{strong({text:e}){return e}em({text:e}){return e}codespan({text:e}){return e}del({text:e}){return e}html({text:e}){return e}text({text:e}){return e}link({text:e}){return``+e}image({text:e}){return``+e}br(){return``}checkbox({raw:e}){return e}},H=class e{options;renderer;textRenderer;constructor(e){this.options=e||Be,this.options.renderer=this.options.renderer||new qt,this.renderer=this.options.renderer,this.renderer.options=this.options,this.renderer.parser=this,this.textRenderer=new Jt}static parse(t,n){return new e(n).parse(t)}static parseInline(t,n){return new e(n).parseInline(t)}parse(e){this.renderer.parser=this;let t=``;for(let n=0;n<e.length;n++){let r=e[n];if(this.options.extensions?.renderers?.[r.type]){let e=r,n=this.options.extensions.renderers[e.type].call({parser:this},e);if(n!==!1||![`space`,`hr`,`heading`,`code`,`table`,`blockquote`,`list`,`html`,`def`,`paragraph`,`text`].includes(e.type)){t+=n||``;continue}}let i=r;switch(i.type){case`space`:t+=this.renderer.space(i);break;case`hr`:t+=this.renderer.hr(i);break;case`heading`:t+=this.renderer.heading(i);break;case`code`:t+=this.renderer.code(i);break;case`table`:t+=this.renderer.table(i);break;case`blockquote`:t+=this.renderer.blockquote(i);break;case`list`:t+=this.renderer.list(i);break;case`checkbox`:t+=this.renderer.checkbox(i);break;case`html`:t+=this.renderer.html(i);break;case`def`:t+=this.renderer.def(i);break;case`paragraph`:t+=this.renderer.paragraph(i);break;case`text`:t+=this.renderer.text(i);break;default:{let e=`Token with "`+i.type+`" type was not found.`;if(this.options.silent)return console.error(e),``;throw Error(e)}}}return t}parseInline(e,t=this.renderer){this.renderer.parser=this;let n=``;for(let r=0;r<e.length;r++){let i=e[r];if(this.options.extensions?.renderers?.[i.type]){let e=this.options.extensions.renderers[i.type].call({parser:this},i);if(e!==!1||![`escape`,`html`,`link`,`image`,`strong`,`em`,`codespan`,`br`,`del`,`text`].includes(i.type)){n+=e||``;continue}}let a=i;switch(a.type){case`escape`:n+=t.text(a);break;case`html`:n+=t.html(a);break;case`link`:n+=t.link(a);break;case`image`:n+=t.image(a);break;case`checkbox`:n+=t.checkbox(a);break;case`strong`:n+=t.strong(a);break;case`em`:n+=t.em(a);break;case`codespan`:n+=t.codespan(a);break;case`br`:n+=t.br(a);break;case`del`:n+=t.del(a);break;case`text`:n+=t.text(a);break;default:{let e=`Token with "`+a.type+`" type was not found.`;if(this.options.silent)return console.error(e),``;throw Error(e)}}}return n}},Yt=class{options;block;constructor(e){this.options=e||Be}static passThroughHooks=new Set([`preprocess`,`postprocess`,`processAllTokens`,`emStrongMask`]);static passThroughHooksRespectAsync=new Set([`preprocess`,`postprocess`,`processAllTokens`]);preprocess(e){return e}postprocess(e){return e}processAllTokens(e){return e}emStrongMask(e){return e}provideLexer(e=this.block){return e?V.lex:V.lexInline}provideParser(e=this.block){return e?H.parse:H.parseInline}},Xt=class{defaults=ze();options=this.setOptions;parse=this.parseMarkdown(!0);parseInline=this.parseMarkdown(!1);Parser=H;Renderer=qt;TextRenderer=Jt;Lexer=V;Tokenizer=Kt;Hooks=Yt;constructor(...e){this.use(...e)}walkTokens(e,t){let n=[];for(let r of e)switch(n=n.concat(t.call(this,r)),r.type){case`table`:{let e=r;for(let r of e.header)n=n.concat(this.walkTokens(r.tokens,t));for(let r of e.rows)for(let e of r)n=n.concat(this.walkTokens(e.tokens,t));break}case`list`:{let e=r;n=n.concat(this.walkTokens(e.items,t));break}default:{let e=r;this.defaults.extensions?.childTokens?.[e.type]?this.defaults.extensions.childTokens[e.type].forEach(r=>{let i=e[r].flat(1/0);n=n.concat(this.walkTokens(i,t))}):e.tokens&&(n=n.concat(this.walkTokens(e.tokens,t)))}}return n}use(...e){let t=this.defaults.extensions||{renderers:{},childTokens:{}};return e.forEach(e=>{let n={...e};if(n.async=this.defaults.async||n.async||!1,e.extensions&&(e.extensions.forEach(e=>{if(!e.name)throw Error(`extension name required`);if(`renderer`in e){let n=t.renderers[e.name];n?t.renderers[e.name]=function(...t){let r=e.renderer.apply(this,t);return r===!1&&(r=n.apply(this,t)),r}:t.renderers[e.name]=e.renderer}if(`tokenizer`in e){if(!e.level||e.level!==`block`&&e.level!==`inline`)throw Error(`extension level must be 'block' or 'inline'`);let n=t[e.level];n?n.unshift(e.tokenizer):t[e.level]=[e.tokenizer],e.start&&(e.level===`block`?t.startBlock?t.startBlock.push(e.start):t.startBlock=[e.start]:e.level===`inline`&&(t.startInline?t.startInline.push(e.start):t.startInline=[e.start]))}`childTokens`in e&&e.childTokens&&(t.childTokens[e.name]=e.childTokens)}),n.extensions=t),e.renderer){let t=this.defaults.renderer||new qt(this.defaults);for(let n in e.renderer){if(!(n in t))throw Error(`renderer '${n}' does not exist`);if([`options`,`parser`].includes(n))continue;let r=n,i=e.renderer[r],a=t[r];t[r]=(...e)=>{let n=i.apply(t,e);return n===!1&&(n=a.apply(t,e)),n||``}}n.renderer=t}if(e.tokenizer){let t=this.defaults.tokenizer||new Kt(this.defaults);for(let n in e.tokenizer){if(!(n in t))throw Error(`tokenizer '${n}' does not exist`);if([`options`,`rules`,`lexer`].includes(n))continue;let r=n,i=e.tokenizer[r],a=t[r];t[r]=(...e)=>{let n=i.apply(t,e);return n===!1&&(n=a.apply(t,e)),n}}n.tokenizer=t}if(e.hooks){let t=this.defaults.hooks||new Yt;for(let n in e.hooks){if(!(n in t))throw Error(`hook '${n}' does not exist`);if([`options`,`block`].includes(n))continue;let r=n,i=e.hooks[r],a=t[r];Yt.passThroughHooks.has(n)?t[r]=e=>{if(this.defaults.async&&Yt.passThroughHooksRespectAsync.has(n))return(async()=>{let n=await i.call(t,e);return a.call(t,n)})();let r=i.call(t,e);return a.call(t,r)}:t[r]=(...e)=>{if(this.defaults.async)return(async()=>{let n=await i.apply(t,e);return n===!1&&(n=await a.apply(t,e)),n})();let n=i.apply(t,e);return n===!1&&(n=a.apply(t,e)),n}}n.hooks=t}if(e.walkTokens){let t=this.defaults.walkTokens,r=e.walkTokens;n.walkTokens=function(e){let n=[];return n.push(r.call(this,e)),t&&(n=n.concat(t.call(this,e))),n}}this.defaults={...this.defaults,...n}}),this}setOptions(e){return this.defaults={...this.defaults,...e},this}lexer(e,t){return V.lex(e,t??this.defaults)}parser(e,t){return H.parse(e,t??this.defaults)}parseMarkdown(e){return(t,n)=>{let r={...n},i={...this.defaults,...r},a=this.onError(!!i.silent,!!i.async);if(this.defaults.async===!0&&r.async===!1)return a(Error(`marked(): The async option was set to true by an extension. Remove async: false from the parse options object to return a Promise.`));if(typeof t>`u`||t===null)return a(Error(`marked(): input parameter is undefined or null`));if(typeof t!=`string`)return a(Error(`marked(): input parameter is of type `+Object.prototype.toString.call(t)+`, string expected`));if(i.hooks&&(i.hooks.options=i,i.hooks.block=e),i.async)return(async()=>{let n=i.hooks?await i.hooks.preprocess(t):t,r=await(i.hooks?await i.hooks.provideLexer(e):e?V.lex:V.lexInline)(n,i),a=i.hooks?await i.hooks.processAllTokens(r):r;i.walkTokens&&await Promise.all(this.walkTokens(a,i.walkTokens));let o=await(i.hooks?await i.hooks.provideParser(e):e?H.parse:H.parseInline)(a,i);return i.hooks?await i.hooks.postprocess(o):o})().catch(a);try{i.hooks&&(t=i.hooks.preprocess(t));let n=(i.hooks?i.hooks.provideLexer(e):e?V.lex:V.lexInline)(t,i);i.hooks&&(n=i.hooks.processAllTokens(n)),i.walkTokens&&this.walkTokens(n,i.walkTokens);let r=(i.hooks?i.hooks.provideParser(e):e?H.parse:H.parseInline)(n,i);return i.hooks&&(r=i.hooks.postprocess(r)),r}catch(e){return a(e)}}}onError(e,t){return n=>{if(n.message+=`
|
|
66
|
+
Please report this to https://github.com/markedjs/marked.`,e){let e=`<p>An error occurred:</p><pre>`+R(n.message+``,!0)+`</pre>`;return t?Promise.resolve(e):e}if(t)return Promise.reject(n);throw n}}},Zt=new Xt;function U(e,t){return Zt.parse(e,t)}U.options=U.setOptions=function(e){return Zt.setOptions(e),U.defaults=Zt.defaults,T(U.defaults),U},U.getDefaults=ze,U.defaults=Be,U.use=function(...e){return Zt.use(...e),U.defaults=Zt.defaults,T(U.defaults),U},U.walkTokens=function(e,t){return Zt.walkTokens(e,t)},U.parseInline=Zt.parseInline,U.Parser=H,U.parser=H.parse,U.Renderer=qt,U.TextRenderer=Jt,U.Lexer=V,U.lexer=V.lex,U.Tokenizer=Kt,U.Hooks=Yt,U.parse=U,U.options,U.setOptions,U.use,U.walkTokens,U.parseInline,H.parse,V.lex;function Qt(e){return e.replace(/&/g,`&`).replace(/</g,`<`).replace(/>/g,`>`).replace(/"/g,`"`).replace(/'/g,`'`)}function $t(e,t){let n=Qt(e);return t===`shtml`||([`js`,`javascript`,`ts`,`typescript`,`jsx`,`tsx`].includes(t)?n=tn(n):t===`json`?n=nn(n):[`bash`,`sh`,`shell`,`zsh`].includes(t)&&(n=rn(n))),n}function en(e){let t=[];return{html:e.replace(/<span class="tok-(?:comment|string)">[\s\S]*?<\/span>/g,e=>{let n=String.fromCharCode(57344+t.length);return t.push(e),n}),restore:e=>e.replace(/[\ue000-\uf8ff]/g,e=>t[e.charCodeAt(0)-57344]??e)}}function tn(e){e=e.replace(/(\/\/[^\n]*)/g,`<span class="tok-comment">$1</span>`),e=e.replace(/(\/\*[\s\S]*?\*\/)/g,`<span class="tok-comment">$1</span>`),e=e.replace(/("[^&]*?"|'[^&]*?'|`[^`]*?`)/g,`<span class="tok-string">$1</span>`);let t=en(e);return e=t.html,e=e.replace(RegExp(`\\b(${`const.let.var.function.return.if.else.for.while.class.extends.import.export.from.default.new.this.async.await.try.catch.throw.typeof.instanceof.interface.type.enum.implements.abstract.public.private.protected.readonly.static.void.null.undefined.true.false`.split(`.`).join(`|`)})\\b`,`g`),`<span class="tok-keyword">$1</span>`),e=e.replace(/\b(\d+\.?\d*)\b/g,`<span class="tok-number">$1</span>`),e=e.replace(/\b([a-zA-Z_$][\w$]*)\s*(?=\()/g,`<span class="tok-fn">$1</span>`),t.restore(e)}function nn(e){return e=e.replace(/("[^&]*?")\s*:/g,`<span class="tok-keyword">$1</span>:`),e=e.replace(/:\s*("[^&]*?")/g,`: <span class="tok-string">$1</span>`),e=e.replace(/\b(\d+\.?\d*)\b/g,`<span class="tok-number">$1</span>`),e=e.replace(/\b(true|false|null)\b/g,`<span class="tok-keyword">$1</span>`),e}function rn(e){return e=e.replace(/(#[^\n]*)/g,`<span class="tok-comment">$1</span>`),e=e.replace(/("[^&]*?"|'[^&]*?')/g,`<span class="tok-string">$1</span>`),e=e.replace(RegExp(`\\b(${[`if`,`then`,`else`,`fi`,`for`,`do`,`done`,`while`,`case`,`esac`,`echo`,`export`,`cd`,`ls`,`mkdir`,`rm`,`cp`,`mv`,`cat`,`grep`,`npm`,`node`,`git`].join(`|`)})\\b`,`g`),`<span class="tok-keyword">$1</span>`),e}var an=new Xt({gfm:!0,breaks:!0,async:!1,renderer:{code({text:e,lang:t}){let n=t??``,r=$t(e,n);return`<pre><code${n?` class="language-${Qt(n)}"`:``}>${r}</code></pre>\n`},link({href:e,title:t,tokens:n}){let r=e??``;if(r.startsWith(`javascript:`))return this.parser.parseInline(n);let i=t?` title="${Qt(t)}"`:``,a=this.parser.parseInline(n);return`<a href="${Qt(r)}"${i} target="_blank" rel="noopener noreferrer">${a}</a>`},image({href:e,title:t,text:n}){let r=e??``,i=n?` alt="${Qt(n)}"`:``,a=t?` title="${Qt(t)}"`:``;return`<img src="${Qt(r)}"${i}${a}>`}}}),on={ALLOWED_TAGS:`a.b.i.em.strong.p.br.code.pre.ul.ol.li.h1.h2.h3.h4.h5.h6.table.thead.tbody.tr.th.td.del.blockquote.hr.img.span.div.details.summary.input`.split(`.`),ALLOWED_ATTR:[`href`,`src`,`alt`,`title`,`class`,`target`,`rel`,`type`,`checked`,`disabled`],ALLOW_DATA_ATTR:!1};function sn(e){return Re(e,on)}function cn(e){return e.replace(/<a\s([^>]*?)>/g,(e,t)=>{let n=t;return/(^|\s)target\s*=/i.test(n)?n=n.replace(/(^|\s)target\s*=\s*(['"])[^'"]*\2/gi,`$1target="_blank"`):n+=` target="_blank"`,/(^|\s)rel\s*=/i.test(n)?n=n.replace(/(^|\s)rel\s*=\s*(['"])[^'"]*\2/gi,`$1rel="noopener noreferrer"`):n+=` rel="noopener noreferrer"`,`<a ${n}>`})}var ln=/<p><strong>Error:<\/strong>\s*([\s\S]*?)<\/p>/g,un=/<pre><code class="language-shtml">[\s\S]*?<\/code><\/pre>/g,dn=`<div class="msg__dip-pending" role="status" aria-live="polite" aria-label="Pouring a dip"><span class="msg__dip-pending-label">Pouring a dip…</span><span class="msg__dip-pending-status" aria-hidden="true"></span></div>`;function fn(e){return cn(sn(an.parse(e)))}function pn(e){return e.replace(ln,(e,t)=>`<div class="msg__error" role="alert"><div class="msg__error-label">Error</div><div class="msg__error-body">${t}</div></div>`)}function mn(e){return e.replace(un,dn)}function hn(e){return fn(e)}function gn(e,t=!1){let n=pn(fn(e));return t&&(n=mn(n)),n}function W(e,t){typeof customElements>`u`||customElements.get(e)||customElements.define(e,t)}function G(e,t){for(let n of t)n==null||n===!1||e.append(typeof n==`string`||typeof n==`number`?document.createTextNode(String(n)):n)}function K(e,t,...n){let r=document.createElement(e);if(t)for(let[e,n]of Object.entries(t))n==null||n===!1||(e===`class`?r.className=String(n):r.setAttribute(e,n===!0?``:String(n)));return G(r,n),r}function q(e){let t=new CSSStyleSheet;return t.replaceSync(e),t}function _n(e){return e.replace(/[-_ ]+(.)/g,(e,t)=>t.toUpperCase()).replace(/^(.)/,(e,t)=>t.toUpperCase())}var vn=n;function yn(e){return _n(e)in vn}var bn=`http://www.w3.org/2000/svg`;function J(e,t={}){let n=t.size??16,r=document.createElementNS(bn,`svg`),i=(e,t)=>r.setAttribute(e,String(t));i(`xmlns`,bn),i(`width`,n),i(`height`,n),i(`viewBox`,`0 0 24 24`),i(`fill`,`none`),i(`stroke`,`currentColor`),i(`stroke-width`,t.strokeWidth??2),i(`stroke-linecap`,`round`),i(`stroke-linejoin`,`round`),i(`aria-hidden`,`true`),t.class&&i(`class`,t.class),t.part&&i(`part`,t.part);let a=vn[_n(e)];if(!a)return console.warn(`[slicc-webcomponents] unknown lucide icon: ${e}`),r;for(let[e,t]of a){let n=document.createElementNS(bn,e);for(let[e,r]of Object.entries(t))n.setAttribute(e,String(r));r.appendChild(n)}return r}var xn=20,Sn=16,Cn=18,wn=q(`
|
|
67
|
+
:host{display:block;width:100%;
|
|
68
|
+
--am-accent:var(--accent,#3b63fb);
|
|
69
|
+
--am-accent-subtle:color-mix(in oklab,var(--am-accent) 12%,var(--canvas,#fff));
|
|
70
|
+
--am-sunken:var(--bg,#f3f3f3);
|
|
71
|
+
--am-hover:rgba(0,0,0,0.05);
|
|
72
|
+
font:400 13px var(--ui,"adobe-clean","Inter",system-ui,sans-serif);}
|
|
73
|
+
/* Dark flips via the library's outer scopes (.dark / [data-theme="dark"] / body.dark);
|
|
74
|
+
:host-context reaches the light-DOM ancestor from inside the shadow root. The
|
|
75
|
+
theme attribute is the per-element override. */
|
|
76
|
+
:host-context(.dark),:host-context([data-theme="dark"]),:host([theme="dark"]){
|
|
77
|
+
--am-accent-subtle:color-mix(in oklab,var(--am-accent) 22%,transparent);
|
|
78
|
+
--am-hover:rgba(255,255,255,0.06);
|
|
79
|
+
--am-sunken:var(--bg,#141414);}
|
|
80
|
+
:host([theme="light"]){--am-accent-subtle:color-mix(in oklab,var(--am-accent) 12%,#fff);--am-hover:rgba(0,0,0,0.05);--am-sunken:#f3f3f3;}
|
|
81
|
+
*{box-sizing:border-box;}
|
|
82
|
+
/* .wrap is the positioning anchor; .row stays in flow (toolbar height unchanged),
|
|
83
|
+
.results pops OUT absolutely so the footer band's height never grows when the
|
|
84
|
+
menu opens. */
|
|
85
|
+
.wrap{display:flex;flex-direction:column;position:relative;}
|
|
86
|
+
.row{display:flex;align-items:center;gap:8px;}
|
|
87
|
+
.trigger{flex:0 0 auto;width:32px;height:32px;border:none;border-radius:8px;background:transparent;color:var(--ink,#131313);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .13s ease,color .13s ease;}
|
|
88
|
+
.trigger:hover{background:var(--am-hover);}
|
|
89
|
+
.trigger[aria-expanded="true"]{background:var(--am-accent-subtle);color:var(--am-accent);}
|
|
90
|
+
/* The glyph itself swaps plus -> x; the quarter-turn rides on the swap so the
|
|
91
|
+
open state spins in. The lucide x glyph is symmetric under a 90deg rotation,
|
|
92
|
+
so the rotation is purely motion -- it never corrupts the rendered glyph. */
|
|
93
|
+
.trigger .ti{display:flex;transition:transform .16s ease;}
|
|
94
|
+
.trigger[aria-expanded="true"] .ti{transform:rotate(90deg);}
|
|
95
|
+
.trigger .ti svg{display:block;}
|
|
96
|
+
/* Respect prefers-reduced-motion: hold the static end state, no spin. */
|
|
97
|
+
@media (prefers-reduced-motion: reduce){.trigger .ti{transition:none;}}
|
|
98
|
+
/* the search field slides in beside the +/× — collapsed until open */
|
|
99
|
+
.searchbox{flex:1;min-width:0;position:relative;display:none;}
|
|
100
|
+
:host([data-open]) .searchbox{display:block;}
|
|
101
|
+
.searchbox .si{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--txt-3,#717171);display:flex;pointer-events:none;}
|
|
102
|
+
.searchbox input{width:100%;border:1px solid var(--line,#e1e1e1);background:var(--am-sunken);color:var(--ink,#131313);border-radius:9px;padding:7px 10px 7px 32px;font:inherit;outline:none;}
|
|
103
|
+
.searchbox input:focus{border-color:var(--am-accent);}
|
|
104
|
+
/* results panel pops upward OUT of the footer band, overlaying the chat thread
|
|
105
|
+
above. Absolute positioning keeps the toolbar/inputcard/composer heights
|
|
106
|
+
constant so the chat layout never reflows when the menu opens. */
|
|
107
|
+
.results{position:absolute;left:-4px;right:-4px;bottom:calc(100% + 6px);
|
|
108
|
+
max-height:0;overflow:hidden;opacity:0;pointer-events:none;
|
|
109
|
+
background:var(--canvas,#fff);border:1px solid var(--line,#e1e1e1);border-radius:12px;
|
|
110
|
+
box-shadow:0 -10px 28px -10px rgba(10,10,10,.20),0 -2px 6px -2px rgba(10,10,10,.08);
|
|
111
|
+
transition:max-height .18s ease,opacity .14s ease;z-index:5;}
|
|
112
|
+
:host([data-open]) .results{max-height:300px;overflow-y:auto;opacity:1;pointer-events:auto;padding:6px;}
|
|
113
|
+
.sec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-3,#717171);font-weight:650;margin:8px 6px 4px;}
|
|
114
|
+
.item{display:flex;align-items:center;gap:10px;width:100%;padding:8px;border-radius:9px;cursor:pointer;text-align:left;color:var(--ink,#131313);}
|
|
115
|
+
.item .ic{flex:0 0 auto;color:var(--txt-2,#505050);display:flex;} .item.quick .ic{color:var(--am-accent);}
|
|
116
|
+
.item .tx{min-width:0;} .item .lb{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .item .sb{font-size:11px;color:var(--txt-3,#717171);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
117
|
+
.item.active,.item:hover{background:var(--am-accent-subtle);}
|
|
118
|
+
.empty{padding:18px 10px;text-align:center;color:var(--txt-3,#717171);font-size:12px;}
|
|
119
|
+
.sep{height:1px;background:var(--line,#e1e1e1);margin:6px 4px;}
|
|
120
|
+
.drop{position:absolute;inset:0;border-radius:10px;display:none;align-items:center;justify-content:center;text-align:center;background:var(--am-accent-subtle);border:2px dashed var(--am-accent);color:var(--am-accent);font-size:13px;font-weight:600;pointer-events:none;}
|
|
121
|
+
:host([data-dropping]) .drop{display:flex;}
|
|
122
|
+
`),Tn=[{kind:`file`,label:`Files`,icon:`file`,entries:[{id:`/workspace/README.md`,label:`README.md`,sub:`/workspace`},{id:`/workspace/src/main.ts`,label:`main.ts`,sub:`/workspace/src`},{id:`/workspace/src/orchestrator.ts`,label:`orchestrator.ts`,sub:`/workspace/src`},{id:`/workspace/notes/launch-plan.md`,label:`launch-plan.md`,sub:`/workspace/notes`},{id:`/shared/CLAUDE.md`,label:`CLAUDE.md`,sub:`/shared`},{id:`/tmp/screenshot-3.png`,label:`screenshot-3.png`,sub:`/tmp`}]},{kind:`skill`,label:`Skills`,icon:`sparkles`,entries:[{id:`slicc-handoff`,label:`slicc-handoff`,sub:`Continue work in the SLICC browser agent`},{id:`playwright-cli`,label:`playwright-cli`,sub:`Automate browser interactions`},{id:`mixtape`,label:`mixtape`,sub:`Curate themed music playlists`},{id:`wavespeed`,label:`wavespeed`,sub:`Generate images, video and speech`},{id:`save-the-cat`,label:`save-the-cat`,sub:`Screenwriting beat sheets`}]},{kind:`conversation`,label:`Conversations`,icon:`message-square`,entries:[{id:`c1`,label:`Dark mode toggle`,sub:`Frozen · 2h ago`},{id:`c2`,label:`Refactor the mount backend`,sub:`Frozen · yesterday`},{id:`c3`,label:`Add slash menu (declined)`,sub:`Frozen · 3 days ago`},{id:`c4`,label:`WebGL shader walkthrough`,sub:`Frozen · last week`}]}],En=[{kind:`upload`,icon:`upload`,label:`Upload from this computer`,sub:`Drag & drop or click to browse`,quick:!0},{kind:`capture`,mode:`photo`,icon:`image`,label:`Take a photo`,quick:!0},{kind:`capture`,mode:`screenshot`,icon:`monitor`,label:`Take a screenshot`,quick:!0}];W(`slicc-add-menu`,class extends HTMLElement{static observedAttributes=[`theme`];#e;#t=null;#n=null;#r=!1;#i=``;#a=0;#o=[];#s=0;#c;#l;#u;#d;#f;#p;#m=e=>{this.#r&&!this.contains(e.target)&&this.close()};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[wn]}connectedCallback(){this.#h()}disconnectedCallback(){document.removeEventListener(`mousedown`,this.#m)}attributeChangedCallback(){}get results(){return this.#t}set results(e){this.#t=e,this.#r&&this.#b()}get provider(){return this.#n}set provider(e){this.#n=e,this.#r&&this.#b()}get isOpen(){return this.#r}#h(){let e=K(`input`,{type:`file`,multiple:!0,hidden:!0}),t=K(`div`,{class:`body`}),n=K(`div`,{class:`results`,part:`results`,role:`listbox`},t,K(`div`,{class:`drop`},`Drop files to add`)),r=K(`span`,{class:`ti`},J(`plus`,{size:xn})),i=K(`button`,{class:`trigger`,part:`trigger`,"aria-haspopup":`true`,"aria-expanded":`false`,title:`Add to prompt`},r),a=K(`input`,{type:`text`,placeholder:`Search files, skills, conversations…`}),o=K(`div`,{class:`wrap`,part:`wrap`},n,K(`div`,{class:`row`},i,K(`div`,{class:`searchbox`},K(`span`,{class:`si`},J(`search`,{size:Sn})),a)));this.#e.replaceChildren(e,o),this.#c=i,this.#l=r,this.#u=o,this.#d=a,this.#f=t,this.#p=e,this.#g(),this.#b()}#g(){this.#c.addEventListener(`click`,()=>this.toggle()),this.#d.addEventListener(`input`,()=>{this.#i=this.#d.value,this.#a=0,this.#b()}),this.#d.addEventListener(`keydown`,e=>this.#w(e)),this.#p.addEventListener(`change`,()=>{for(let e of Array.from(this.#p.files??[]))this.#E({kind:`upload`,name:e.name,size:e.size,file:e});this.#p.value=``,this.close()});for(let e of[`dragenter`,`dragover`])this.#u.addEventListener(e,e=>{e.preventDefault(),this.#r||this.open(),this.setAttribute(`data-dropping`,``)});for(let e of[`dragleave`,`drop`])this.#u.addEventListener(e,t=>{t.preventDefault();let n=t;e===`dragleave`&&this.#u.contains(n.relatedTarget)||this.removeAttribute(`data-dropping`)});this.#u.addEventListener(`drop`,e=>{let t=e.dataTransfer?.files;if(t?.length){for(let e of Array.from(t))this.#E({kind:`upload`,name:e.name,size:e.size,file:e});this.close()}})}toggle(){this.#r?this.close():this.open()}#_(e){this.#l.replaceChildren(J(e?`x`:`plus`,{size:xn}))}open(){this.#r||(this.#r=!0,this.setAttribute(`data-open`,``),this.#c.setAttribute(`aria-expanded`,`true`),this.#_(!0),document.addEventListener(`mousedown`,this.#m),this.#i=``,this.#d.value=``,this.#a=0,this.#b(),requestAnimationFrame(()=>this.#d.focus()))}close(){this.#r&&(this.#r=!1,this.removeAttribute(`data-open`),this.removeAttribute(`data-dropping`),this.#c.setAttribute(`aria-expanded`,`false`),this.#_(!1),document.removeEventListener(`mousedown`,this.#m))}async#v(e){if(this.#n){let t=await this.#n(e);if(t)return t}return this.#t??Tn}#y(e){let t=this.#i.trim().toLowerCase(),n=e=>!t||`${e.label} ${e.sub??``}`.toLowerCase().includes(t),r=[];if(!t)for(let e of En)r.push({type:`quick`,data:e});else if(`upload take a photo screenshot`.includes(t))for(let e of En)e.label.toLowerCase().includes(t)&&r.push({type:`quick`,data:e});for(let i of e){let e=i.entries.filter(n).slice(0,t?8:4);if(e.length){r.push({type:`sec`,label:i.label});for(let t of e)r.push({type:`row`,section:i,data:t})}}return r}async#b(){let e=++this.#s,t=await this.#v(this.#i.trim().toLowerCase());if(e!==this.#s)return;let n=this.#y(t);this.#o=[];let r=[],i=!1;for(let e of n)if(e.type===`sec`)i&&r.push(K(`div`,{class:`sep`})),r.push(K(`div`,{class:`sec`},e.label)),i=!1;else if(e.type===`quick`){let t=this.#o.length;this.#o.push(e.data.kind===`upload`?{kind:`upload`,name:``,size:0}:{kind:`capture`,mode:e.data.mode??`photo`,label:e.data.label});let n=K(`span`,{class:`tx`},K(`div`,{class:`lb`},e.data.label));e.data.sub&&n.append(K(`div`,{class:`sb`},e.data.sub)),r.push(K(`div`,{class:`item quick`,"data-i":t},K(`span`,{class:`ic`},J(e.data.icon,{size:Cn})),n)),i=!0}else{let t=this.#o.length;this.#o.push({kind:e.section.kind,id:e.data.id,label:e.data.label}),r.push(K(`div`,{class:`item`,"data-i":t},K(`span`,{class:`ic`},J(e.section.icon,{size:Cn})),K(`span`,{class:`tx`},K(`div`,{class:`lb`},e.data.label),K(`div`,{class:`sb`},e.data.sub??``))))}r.length?this.#f.replaceChildren(...r):this.#f.replaceChildren(K(`div`,{class:`empty`},`No matches for “${this.#i}”.`));for(let e of Array.from(this.#f.querySelectorAll(`.item`))){let t=Number(e.dataset.i);e.addEventListener(`mouseenter`,()=>this.#S(t)),e.addEventListener(`click`,()=>this.#T(t))}this.#a>=this.#o.length&&(this.#a=0),this.#x()}#x(){for(let e of Array.from(this.#f.querySelectorAll(`.item`)))e.classList.toggle(`active`,Number(e.dataset.i)===this.#a)}#S(e){this.#a=e,this.#x()}#C(e){if(!this.#o.length)return;this.#a=(this.#a+e+this.#o.length)%this.#o.length,this.#x();let t=this.#f.querySelector(`.item[data-i="${this.#a}"]`);t&&t.scrollIntoView({block:`nearest`})}#w(e){e.key===`ArrowDown`?(e.preventDefault(),this.#C(1)):e.key===`ArrowUp`?(e.preventDefault(),this.#C(-1)):e.key===`Enter`?(e.preventDefault(),this.#T(this.#a)):e.key===`Escape`&&(e.preventDefault(),this.close(),this.#c.focus())}#T(e){let t=this.#o[e];if(t){if(t.kind===`upload`){this.#p.click();return}this.#E(t),this.close()}}#E(e){this.dispatchEvent(new CustomEvent(`slicc-add`,{detail:e,bubbles:!0,composed:!0}))}});var Dn=`
|
|
123
|
+
slicc-action-card { display: block; }
|
|
124
|
+
|
|
125
|
+
/* in-chat tool / terminal / git card (.tcard) */
|
|
126
|
+
slicc-action-card .tcard {
|
|
127
|
+
border: 1px solid var(--line);
|
|
128
|
+
border-radius: 12px;
|
|
129
|
+
overflow: hidden;
|
|
130
|
+
margin: 2px 0 18px;
|
|
131
|
+
background: var(--canvas);
|
|
132
|
+
}
|
|
133
|
+
slicc-action-card .tcard .th {
|
|
134
|
+
display: flex;
|
|
135
|
+
align-items: center;
|
|
136
|
+
gap: 8px;
|
|
137
|
+
padding: 8px 12px;
|
|
138
|
+
border-bottom: 1px solid var(--line);
|
|
139
|
+
font-family: var(--ui);
|
|
140
|
+
font-size: 11px;
|
|
141
|
+
color: var(--txt-2);
|
|
142
|
+
}
|
|
143
|
+
slicc-action-card .tcard .th .ic {
|
|
144
|
+
width: 18px;
|
|
145
|
+
height: 18px;
|
|
146
|
+
border-radius: 5px;
|
|
147
|
+
display: grid;
|
|
148
|
+
place-items: center;
|
|
149
|
+
font-size: 10px;
|
|
150
|
+
/* --canvas, not #fff: --ink flips near-white in dark mode. */
|
|
151
|
+
color: var(--canvas, #fff);
|
|
152
|
+
background: var(--ink);
|
|
153
|
+
flex: 0 0 auto;
|
|
154
|
+
}
|
|
155
|
+
slicc-action-card .tcard .th .ic.cy { background: var(--cyan); }
|
|
156
|
+
slicc-action-card .tcard .th .ic.vi { background: var(--violet); }
|
|
157
|
+
slicc-action-card .tcard .th .ic.am { background: var(--amber); }
|
|
158
|
+
slicc-action-card .tcard .th .ic.gh { background: #1f2328; }
|
|
159
|
+
slicc-action-card .tcard .th .nm { color: var(--ink); font-weight: 500; }
|
|
160
|
+
slicc-action-card .tcard .th .badge {
|
|
161
|
+
margin-left: auto;
|
|
162
|
+
font-size: 9px;
|
|
163
|
+
border-radius: 26px;
|
|
164
|
+
padding: 1px 8px;
|
|
165
|
+
background: var(--ghost);
|
|
166
|
+
color: var(--txt-2);
|
|
167
|
+
}
|
|
168
|
+
slicc-action-card .tcard .tb {
|
|
169
|
+
font-family: var(--mono);
|
|
170
|
+
font-size: 12px;
|
|
171
|
+
line-height: 1.65;
|
|
172
|
+
padding: 10px 12px;
|
|
173
|
+
background: #0c0c0e;
|
|
174
|
+
color: #d6d6da;
|
|
175
|
+
white-space: pre-wrap;
|
|
176
|
+
overflow: auto;
|
|
177
|
+
}
|
|
178
|
+
slicc-action-card .tcard .tb .p { color: #7dd3fc; }
|
|
179
|
+
slicc-action-card .tcard .tb .ok { color: #22c55e; }
|
|
180
|
+
slicc-action-card .tcard .tb .mut { color: #8a8a92; }
|
|
181
|
+
slicc-action-card .tcard .tb .add { color: #22c55e; }
|
|
182
|
+
slicc-action-card .tcard .tb .del { color: #f87171; }
|
|
183
|
+
slicc-action-card .tcard .tb .warn { color: #fbbf24; }
|
|
184
|
+
slicc-action-card .tcard.light .tb { background: var(--canvas); color: var(--ink); }
|
|
185
|
+
|
|
186
|
+
/* PR card (.prcard) */
|
|
187
|
+
slicc-action-card .prcard {
|
|
188
|
+
border: 1px solid var(--line);
|
|
189
|
+
border-radius: 12px;
|
|
190
|
+
margin: 2px 0 18px;
|
|
191
|
+
background: var(--canvas);
|
|
192
|
+
overflow: hidden;
|
|
193
|
+
}
|
|
194
|
+
slicc-action-card .prcard .ph {
|
|
195
|
+
display: flex;
|
|
196
|
+
align-items: center;
|
|
197
|
+
gap: 9px;
|
|
198
|
+
padding: 11px 13px;
|
|
199
|
+
font-family: var(--ui);
|
|
200
|
+
}
|
|
201
|
+
slicc-action-card .prcard .ph .gi {
|
|
202
|
+
width: 22px;
|
|
203
|
+
height: 22px;
|
|
204
|
+
border-radius: 6px;
|
|
205
|
+
background: #1f2328;
|
|
206
|
+
color: #fff;
|
|
207
|
+
display: grid;
|
|
208
|
+
place-items: center;
|
|
209
|
+
font-size: 12px;
|
|
210
|
+
flex: 0 0 auto;
|
|
211
|
+
}
|
|
212
|
+
slicc-action-card .prcard .ph .pt { font-weight: 600; font-size: 13.5px; color: var(--ink); }
|
|
213
|
+
slicc-action-card .prcard .ph .pn { font-family: var(--ui); color: var(--txt-3); font-size: 12px; }
|
|
214
|
+
slicc-action-card .prcard .ph .open {
|
|
215
|
+
margin-left: auto;
|
|
216
|
+
font-size: 10px;
|
|
217
|
+
font-weight: 700;
|
|
218
|
+
color: #fff;
|
|
219
|
+
background: #1a7f37;
|
|
220
|
+
border-radius: 26px;
|
|
221
|
+
padding: 3px 10px;
|
|
222
|
+
}
|
|
223
|
+
slicc-action-card .prcard .pmeta {
|
|
224
|
+
display: flex;
|
|
225
|
+
flex-wrap: wrap;
|
|
226
|
+
gap: 14px;
|
|
227
|
+
padding: 0 13px 12px;
|
|
228
|
+
font-family: var(--ui);
|
|
229
|
+
font-size: 11px;
|
|
230
|
+
color: var(--txt-2);
|
|
231
|
+
}
|
|
232
|
+
slicc-action-card .prcard .pmeta b { color: var(--ink); }
|
|
233
|
+
slicc-action-card .prcard .pmeta .add { color: #1a7f37; }
|
|
234
|
+
slicc-action-card .prcard .pmeta .del { color: #cf222e; }
|
|
235
|
+
`,On=`slicc-action-card-style`;function kn(e){if(e.getElementById(On))return;let t=e.createElement(`style`);t.id=On,t.textContent=Dn,(e.head??e.documentElement).appendChild(t)}var An=new Set([`tool`,`light`,`pr`]),jn=new Set([`ink`,`cy`,`vi`,`am`,`gh`]);W(`slicc-action-card`,class extends HTMLElement{static observedAttributes=[`variant`,`glyph`,`tone`,`title`,`badge`,`number`,`status`,`branch`,`files`,`add`,`del`,`checks`];#e=[];#t=!1;connectedCallback(){kn(this.ownerDocument),this.classList.add(`slicc-action-card`),this.#a(),this.#n()}attributeChangedCallback(e,t,n){!this.isConnected||t===n||(this.#n(),e===`variant`&&this.dispatchEvent(new CustomEvent(`slicc-action-card-change`,{bubbles:!0,composed:!0,detail:{variant:this.variant}})))}get variant(){let e=this.getAttribute(`variant`);return e&&An.has(e)?e:`tool`}set variant(e){this.setAttribute(`variant`,An.has(e)?e:`tool`)}get glyph(){return this.getAttribute(`glyph`)}set glyph(e){e==null?this.removeAttribute(`glyph`):this.setAttribute(`glyph`,e)}get tone(){let e=this.getAttribute(`tone`);return e&&jn.has(e)?e:`ink`}set tone(e){this.setAttribute(`tone`,jn.has(e)?e:`ink`)}get title(){return this.getAttribute(`title`)??``}set title(e){e==null?this.removeAttribute(`title`):this.setAttribute(`title`,e)}get badge(){return this.getAttribute(`badge`)}set badge(e){e==null?this.removeAttribute(`badge`):this.setAttribute(`badge`,e)}get number(){return this.getAttribute(`number`)}set number(e){e==null?this.removeAttribute(`number`):this.setAttribute(`number`,e)}get status(){return this.getAttribute(`status`)}set status(e){e==null?this.removeAttribute(`status`):this.setAttribute(`status`,e)}get branch(){return this.getAttribute(`branch`)}set branch(e){e==null?this.removeAttribute(`branch`):this.setAttribute(`branch`,e)}get files(){return this.getAttribute(`files`)}set files(e){e==null?this.removeAttribute(`files`):this.setAttribute(`files`,e)}get add(){return this.getAttribute(`add`)}set add(e){e==null?this.removeAttribute(`add`):this.setAttribute(`add`,e)}get del(){return this.getAttribute(`del`)}set del(e){e==null?this.removeAttribute(`del`):this.setAttribute(`del`,e)}get checks(){return this.getAttribute(`checks`)}set checks(e){e==null?this.removeAttribute(`checks`):this.setAttribute(`checks`,e)}#n(){let e=this.variant;e===`pr`?this.#i():this.#r(e===`light`)}#r(e){let t=this.glyph,n=this.tone,r=this.title,i=this.badge,a=n===`ink`?`ic`:`ic ${n}`,o=K(`div`,{class:`th`,part:`header`});G(o,[K(`span`,{class:a,part:`icon`},t??null),` `,K(`span`,{class:`nm`,part:`title`},r),i==null?null:K(`span`,{class:`badge`,part:`badge`},i)]);let s=K(`div`,{class:`tb`,part:`body`});s.append(...this.#e);let c=K(`div`,{class:e?`tcard light`:`tcard`,part:`card`},o,s);this.replaceChildren(c)}#i(){let e=this.title,t=this.number,n=this.status??`Open`,r=this.branch,i=this.files,a=this.add,o=this.del,s=this.checks,c=K(`div`,{class:`ph`,part:`header`});G(c,[K(`span`,{class:`gi`,part:`icon`},`⎇`),K(`span`,{class:`pt`,part:`title`},e),t==null?null:K(`span`,{class:`pn`,part:`number`},t),K(`span`,{class:`open`,part:`status`},n)]);let l=K(`div`,{class:`pmeta`,part:`meta`}),u=this.#e.filter(e=>e instanceof HTMLElement&&e.getAttribute(`slot`)===`meta`);u.length>0?l.append(...u):G(l,[r==null?null:K(`span`,null,r),i==null?null:K(`span`,null,K(`b`,null,i),` files`),a==null?null:K(`span`,{class:`add`},`+${a}`),o==null?null:K(`span`,{class:`del`},`−${o}`),s==null?null:K(`span`,null,`checks `,K(`b`,{style:`color:#1a7f37`},s))]);let d=K(`div`,{class:`prcard`,part:`card`},c,l);this.replaceChildren(d)}#a(){this.#t||(this.#t=!0,this.#e=Array.from(this.childNodes))}});var Mn=`
|
|
236
|
+
slicc-action-row {
|
|
237
|
+
display: block;
|
|
238
|
+
margin: -2px 0 16px;
|
|
239
|
+
font-family: var(--ui);
|
|
240
|
+
/* Re-derive the accent here so it tracks the locally inherited --ctx
|
|
241
|
+
(a :root-declared derivation bakes in :root's --ctx — see tokens.css). */
|
|
242
|
+
--accent: color-mix(in srgb, var(--ctx) 55%, var(--ink));
|
|
243
|
+
}
|
|
244
|
+
slicc-action-row .slicc-act__head {
|
|
245
|
+
display: flex;
|
|
246
|
+
align-items: center;
|
|
247
|
+
gap: 8px;
|
|
248
|
+
width: 100%;
|
|
249
|
+
background: none;
|
|
250
|
+
border: 1px solid transparent;
|
|
251
|
+
border-radius: 9px;
|
|
252
|
+
padding: 7px 10px;
|
|
253
|
+
font: inherit;
|
|
254
|
+
font-size: 12px;
|
|
255
|
+
color: var(--txt-2);
|
|
256
|
+
cursor: pointer;
|
|
257
|
+
text-align: left;
|
|
258
|
+
transition: background 0.15s;
|
|
259
|
+
}
|
|
260
|
+
slicc-action-row .slicc-act__head:hover {
|
|
261
|
+
background: var(--ghost);
|
|
262
|
+
}
|
|
263
|
+
slicc-action-row .slicc-act__head:focus-visible {
|
|
264
|
+
outline: 2px solid var(--violet);
|
|
265
|
+
outline-offset: 1px;
|
|
266
|
+
}
|
|
267
|
+
slicc-action-row .slicc-act__ic {
|
|
268
|
+
width: 18px;
|
|
269
|
+
height: 18px;
|
|
270
|
+
border-radius: 5px;
|
|
271
|
+
display: grid;
|
|
272
|
+
place-items: center;
|
|
273
|
+
font-size: 10px;
|
|
274
|
+
/* The chip ground is the derived context accent; --canvas ink on top keeps
|
|
275
|
+
the glyph readable in BOTH themes (accent leans dark on light canvases,
|
|
276
|
+
light on dark ones). */
|
|
277
|
+
color: var(--canvas);
|
|
278
|
+
background: var(--accent);
|
|
279
|
+
flex: 0 0 auto;
|
|
280
|
+
}
|
|
281
|
+
slicc-action-row .slicc-act__ic.vi { background: var(--violet); }
|
|
282
|
+
slicc-action-row .slicc-act__ic.am { background: var(--amber); }
|
|
283
|
+
slicc-action-row .slicc-act__ic.cy { background: var(--cyan); }
|
|
284
|
+
slicc-action-row .slicc-act__ic.gh { background: #1f2328; }
|
|
285
|
+
slicc-action-row .slicc-act__label {
|
|
286
|
+
color: var(--ink);
|
|
287
|
+
font-weight: 500;
|
|
288
|
+
}
|
|
289
|
+
slicc-action-row .slicc-act__badge {
|
|
290
|
+
margin-left: auto;
|
|
291
|
+
color: var(--txt-3);
|
|
292
|
+
}
|
|
293
|
+
slicc-action-row .slicc-act__badge:empty {
|
|
294
|
+
display: none;
|
|
295
|
+
}
|
|
296
|
+
slicc-action-row .slicc-act__chev {
|
|
297
|
+
color: var(--txt-3);
|
|
298
|
+
transition: transform 0.15s;
|
|
299
|
+
}
|
|
300
|
+
slicc-action-row[open] .slicc-act__chev {
|
|
301
|
+
transform: rotate(90deg);
|
|
302
|
+
}
|
|
303
|
+
slicc-action-row .slicc-act__body {
|
|
304
|
+
display: none;
|
|
305
|
+
margin: 3px 0 0 28px;
|
|
306
|
+
background: var(--ghost);
|
|
307
|
+
border: 1px solid var(--line);
|
|
308
|
+
border-radius: 9px;
|
|
309
|
+
padding: 9px 11px;
|
|
310
|
+
font-family: var(--mono);
|
|
311
|
+
font-size: 11.5px;
|
|
312
|
+
line-height: 1.65;
|
|
313
|
+
white-space: pre-wrap;
|
|
314
|
+
color: var(--txt-2);
|
|
315
|
+
}
|
|
316
|
+
slicc-action-row[open] .slicc-act__body {
|
|
317
|
+
display: block;
|
|
318
|
+
}
|
|
319
|
+
slicc-action-row .slicc-act__body .add { color: #1a7f37; }
|
|
320
|
+
slicc-action-row .slicc-act__body .del { color: #cf222e; }
|
|
321
|
+
slicc-action-row .slicc-act__body .ok { color: #1a7f37; }
|
|
322
|
+
slicc-action-row .slicc-act__body .p { color: #6b6b6b; }
|
|
323
|
+
slicc-action-row .slicc-act__body .mut { color: var(--txt-3); }
|
|
324
|
+
slicc-action-row .vlink {
|
|
325
|
+
color: var(--violet);
|
|
326
|
+
font-weight: 600;
|
|
327
|
+
text-decoration: none;
|
|
328
|
+
border-bottom: 1px dotted color-mix(in srgb, var(--violet) 55%, transparent);
|
|
329
|
+
cursor: pointer;
|
|
330
|
+
}
|
|
331
|
+
slicc-action-row .vlink:hover {
|
|
332
|
+
border-bottom-style: solid;
|
|
333
|
+
}
|
|
334
|
+
`,Nn=`slicc-action-row-style`;function Pn(e){if(e.getElementById(Nn))return;let t=e.createElement(`style`);t.id=Nn,t.textContent=Mn,(e.head??e.documentElement).appendChild(t)}var Fn=new Set([`ink`,`vi`,`am`,`cy`,`gh`]);W(`slicc-action-row`,class extends HTMLElement{static observedAttributes=[`open`,`icon`,`tone`,`label`,`result`];#e;#t;#n;#r;#i;#a=!1;#o=()=>this.#s();connectedCallback(){Pn(this.ownerDocument),this.#c(),this.#l()}disconnectedCallback(){this.#e?.removeEventListener(`click`,this.#o)}attributeChangedCallback(e,t,n){t===n||!this.#a||(e===`open`?(this.#e.setAttribute(`aria-expanded`,String(n!==null)),this.dispatchEvent(new CustomEvent(`slicc-action-row-toggle`,{bubbles:!0,composed:!0,detail:{open:n!==null}}))):this.#l())}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get icon(){return this.getAttribute(`icon`)}set icon(e){e==null?this.removeAttribute(`icon`):this.setAttribute(`icon`,e)}get tone(){let e=this.getAttribute(`tone`);return e&&Fn.has(e)?e:`ink`}set tone(e){this.setAttribute(`tone`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get result(){return this.getAttribute(`result`)}set result(e){e==null?this.removeAttribute(`result`):this.setAttribute(`result`,e)}#s(){this.open=!this.open}#c(){if(this.#a)return;this.#a=!0;let e=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLElement&&e.classList.contains(`slicc-act__head`))&&!(e instanceof HTMLElement&&e.classList.contains(`slicc-act__body`)));this.#e=this.ownerDocument.createElement(`button`),this.#e.type=`button`,this.#e.className=`slicc-act__head`,this.#e.setAttribute(`part`,`head`),this.#t=K(`span`,{class:`slicc-act__ic`,part:`icon`}),this.#n=K(`span`,{class:`slicc-act__label`,part:`label`}),this.#r=K(`span`,{class:`slicc-act__badge`,part:`badge`}),G(this.#e,[this.#t,this.#n,this.#r,K(`span`,{class:`slicc-act__chev`,part:`chevron`,"aria-hidden":`true`},`▸`)]),this.#i=this.ownerDocument.createElement(`div`),this.#i.className=`slicc-act__body`,this.#i.setAttribute(`part`,`body`);for(let t of e)t instanceof HTMLElement&&t.getAttribute(`slot`)===`body`?this.#i.appendChild(t):this.#n.appendChild(t);this.replaceChildren(this.#e,this.#i),this.#e.addEventListener(`click`,this.#o)}#l(){if(!this.#a)return;let e=this.tone;this.#t.className=`slicc-act__ic${e===`ink`?``:` ${e}`}`;let t=this.icon??``;t&&yn(t)?this.#t.replaceChildren(J(t,{size:12})):this.#t.textContent=t;let n=this.label;n!=null&&(this.#n.textContent=n),this.#e.setAttribute(`aria-expanded`,String(this.open)),this.#r.textContent=this.result??``}});var In=`
|
|
335
|
+
slicc-agent-message { display: block; margin-bottom: 18px; font-size: 15px; line-height: 1.5; --accent: color-mix(in srgb, var(--ctx) 55%, var(--ink)); }
|
|
336
|
+
slicc-agent-message .body { font-family: var(--ui); font-size: 14px; }
|
|
337
|
+
slicc-agent-message .body p { margin: 0 0 8px; }
|
|
338
|
+
slicc-agent-message strong { font-weight: 600; color: var(--accent); }
|
|
339
|
+
/* Inline code carries the active context accent (--ctx flips per
|
|
340
|
+
cone/scoop/freezer). The mixes lean heavily on --canvas / --ink so the
|
|
341
|
+
wash stays subtle and contrast holds in light AND dark. */
|
|
342
|
+
slicc-agent-message code { font-family: var(--mono); font-size: 12.5px; background: color-mix(in srgb, var(--ctx) 12%, var(--canvas)); border: 1px solid color-mix(in srgb, var(--ctx) 20%, transparent); color: var(--accent); border-radius: 6px; padding: 1px 6px; }
|
|
343
|
+
slicc-agent-message .body h1, slicc-agent-message .body h2, slicc-agent-message .body h3, slicc-agent-message .body h4, slicc-agent-message .body h5, slicc-agent-message .body h6 { font-family: var(--ui); margin: 1.2em 0 0.35em; font-weight: 700; line-height: 1.25; }
|
|
344
|
+
slicc-agent-message .body > :first-child { margin-top: 0; }
|
|
345
|
+
slicc-agent-message .body > :last-child { margin-bottom: 0; }
|
|
346
|
+
slicc-agent-message .body h1 { font-size: 22px; }
|
|
347
|
+
slicc-agent-message .body h2 { font-size: 18px; }
|
|
348
|
+
slicc-agent-message .body h3 { font-size: 16px; }
|
|
349
|
+
slicc-agent-message .body h4 { font-size: 14px; }
|
|
350
|
+
slicc-agent-message .body h5, slicc-agent-message .body h6 { font-size: 13px; color: var(--txt-2); }
|
|
351
|
+
slicc-agent-message .body a { color: var(--accent); text-decoration: none; }
|
|
352
|
+
slicc-agent-message .body a:hover { text-decoration: underline; }
|
|
353
|
+
slicc-agent-message .body ul:not(.plan):not(.check), slicc-agent-message .body ol { margin: 0.45em 0; padding-left: 1.4em; }
|
|
354
|
+
slicc-agent-message .body li { margin: 3px 0; }
|
|
355
|
+
slicc-agent-message .body blockquote { margin: 0.45em 0; border-left: 3px solid var(--accent); padding-left: 12px; color: var(--txt-2); }
|
|
356
|
+
slicc-agent-message .body hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
|
|
357
|
+
slicc-agent-message .body del { color: var(--txt-3); }
|
|
358
|
+
/* Fenced blocks get a soft context-accent wash + accent edge instead of the
|
|
359
|
+
flat grey card — same --ctx-derived mixes as inline code. */
|
|
360
|
+
slicc-agent-message .body pre { margin: 8px 0; background: color-mix(in srgb, var(--ctx) 7%, var(--canvas)); border: 1px solid color-mix(in srgb, var(--ctx) 22%, var(--line)); border-left: 3px solid color-mix(in srgb, var(--ctx) 55%, var(--line)); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
|
|
361
|
+
slicc-agent-message .body pre code { background: none; border: none; color: var(--ink); border-radius: 0; padding: 0; font-size: inherit; }
|
|
362
|
+
/* Wide tables scroll INSIDE themselves — display:block turns the table into
|
|
363
|
+
its own scroll container, so a narrow chat column never drags the whole
|
|
364
|
+
history sideways. */
|
|
365
|
+
slicc-agent-message .body table { display: block; max-width: 100%; width: fit-content; overflow-x: auto; border-collapse: collapse; margin: 2px 0 12px; font-size: 13px; border: 1px solid var(--line); border-radius: 8px; }
|
|
366
|
+
slicc-agent-message .body th, slicc-agent-message .body td { border: 1px solid var(--line); padding: 6px 11px; text-align: left; }
|
|
367
|
+
slicc-agent-message .body th { background: var(--ghost); font-weight: 600; }
|
|
368
|
+
slicc-agent-message .plan { list-style: none; margin: 4px 0 0; padding: 0; }
|
|
369
|
+
slicc-agent-message .plan li { position: relative; padding-left: 20px; margin: 5px 0; font-size: 14px; }
|
|
370
|
+
slicc-agent-message .plan li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; }
|
|
371
|
+
slicc-agent-message .plan li:nth-child(1)::before { background: var(--rose); }
|
|
372
|
+
slicc-agent-message .plan li:nth-child(2)::before { background: var(--violet); }
|
|
373
|
+
slicc-agent-message .plan li:nth-child(3)::before { background: var(--cyan); }
|
|
374
|
+
slicc-agent-message .check { list-style: none; margin: 6px 0 0; padding: 0; }
|
|
375
|
+
slicc-agent-message .check li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; margin: 6px 0; }
|
|
376
|
+
slicc-agent-message .check li .ck { width: 18px; height: 18px; border-radius: 50%; background: #1a7f37; color: #fff; display: grid; place-items: center; font-size: 11px; flex: 0 0 auto; }
|
|
377
|
+
slicc-agent-message .check li .ck.r { background: var(--rose); }
|
|
378
|
+
slicc-agent-message .check li .ck.cy { background: var(--cyan); }
|
|
379
|
+
slicc-agent-message .check li .ck.vi { background: var(--violet); }
|
|
380
|
+
slicc-agent-message .check li .ck.am { background: var(--amber); }
|
|
381
|
+
slicc-agent-message .thinkrow { margin-bottom: 14px; }
|
|
382
|
+
slicc-agent-message .thinkrow-row { display: inline-flex; align-items: center; gap: 10px; }
|
|
383
|
+
slicc-agent-message .progress { font-family: var(--ui); font-size: 13px; color: var(--txt-2); }
|
|
384
|
+
slicc-agent-message .dots { display: inline-flex; gap: 7px; align-items: flex-end; padding: 6px 2px; }
|
|
385
|
+
slicc-agent-message .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--d); animation: slicc-am-bdot 1.05s infinite ease-in-out; }
|
|
386
|
+
slicc-agent-message .dots i:nth-child(2) { animation-delay: .16s; }
|
|
387
|
+
slicc-agent-message .dots i:nth-child(3) { animation-delay: .32s; }
|
|
388
|
+
@keyframes slicc-am-bdot { 0%, 75%, 100% { transform: translateY(0); opacity: .45; } 38% { transform: translateY(-8px); opacity: 1; } }
|
|
389
|
+
slicc-agent-message .tw-caret { display: inline-block; width: 2px; height: 1.05em; vertical-align: -2px; margin-left: 1px; background: var(--ink); animation: slicc-am-cblink .9s steps(1) infinite; }
|
|
390
|
+
@keyframes slicc-am-cblink { 50% { opacity: 0; } }
|
|
391
|
+
`,Ln=`slicc-agent-message-style`;function Rn(e){if(e.getElementById(Ln))return;let t=e.createElement(`style`);t.id=Ln,t.textContent=In,(e.head??e.documentElement).appendChild(t)}var zn=[`#f43f5e`,`#06b6d4`,`#8b5cf6`],Bn=new Set([``,`r`,`cy`,`vi`,`am`]);function Vn(){let e=K(`div`,{class:`dots`,part:`dots`,"aria-hidden":`true`});for(let t of zn)e.append(K(`i`,{style:`--d:${t}`}));return e}function Hn(e){let t=K(`ul`,{class:`plan`,part:`plan`});for(let n of e)t.append(K(`li`,null,n));return t}function Un(e){let t=K(`ul`,{class:`check`,part:`check`});for(let n of e){let e=n.variant&&Bn.has(n.variant)?n.variant:``,r=e?`ck ${e}`:`ck`,i=n.glyph??`✓`;t.append(K(`li`,null,K(`span`,{class:r},i),K(`span`,{class:`ctext`},n.text)))}return t}W(`slicc-agent-message`,class extends HTMLElement{static observedAttributes=[`thinking`,`streaming`,`progress`];#e;#t=null;#n=null;#r=null;#i=!1;connectedCallback(){Rn(this.ownerDocument),this.#o(),this.#s(),this.#l()}attributeChangedCallback(e,t,n){t===n||!this.isConnected||(e===`thinking`?(this.#s(),this.dispatchEvent(new CustomEvent(`slicc-agent-message-thinking`,{bubbles:!0,composed:!0,detail:{thinking:n!==null}}))):e===`progress`?this.#c():e===`streaming`&&(this.#l(),this.dispatchEvent(new CustomEvent(`slicc-agent-message-streaming`,{bubbles:!0,composed:!0,detail:{streaming:n!==null}}))))}get thinking(){return this.hasAttribute(`thinking`)}set thinking(e){e?this.setAttribute(`thinking`,``):this.removeAttribute(`thinking`)}get streaming(){return this.hasAttribute(`streaming`)}set streaming(e){e?this.setAttribute(`streaming`,``):this.removeAttribute(`streaming`)}get progress(){return this.getAttribute(`progress`)}set progress(e){e==null?this.removeAttribute(`progress`):this.setAttribute(`progress`,e)}get body(){return this.#o(),this.#e}setBodyHtml(e){this.#o();let t=this.ownerDocument.createRange();t.selectNodeContents(this.#e),this.#a(t.createContextualFragment(e))}setPlan(e){this.#a(Hn(e))}setCheck(e){this.#a(Un(e))}#a(e){this.#o(),this.#e.replaceChildren(e),this.#l()}#o(){if(this.#i)return;this.#i=!0,this.classList.add(`msg`,`bot`);let e=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLElement&&e.classList.contains(`body`)));this.#e=this.ownerDocument.createElement(`div`),this.#e.className=`body`,this.#e.setAttribute(`part`,`body`);for(let t of e)this.#e.appendChild(t);this.appendChild(this.#e)}#s(){let e=this.thinking;this.classList.toggle(`thinkrow`,e),e?(this.#e.style.display=`none`,this.#t||(this.#t=this.ownerDocument.createElement(`div`),this.#t.className=`thinkrow-row`,this.#t.appendChild(Vn()),this.insertBefore(this.#t,this.#e)),this.#c()):(this.#e.style.removeProperty(`display`),this.#t&&(this.#t.remove(),this.#t=null,this.#n=null))}#c(){if(!this.#t)return;let e=this.progress;e?(this.#n||(this.#n=this.ownerDocument.createElement(`span`),this.#n.className=`progress`,this.#n.setAttribute(`part`,`progress`),this.#n.setAttribute(`aria-live`,`polite`),this.#t.appendChild(this.#n)),this.#n.textContent=e):this.#n&&=(this.#n.remove(),null)}#l(){this.streaming?this.#r?.isConnected?this.#e.appendChild(this.#r):(this.#r=this.ownerDocument.createElement(`span`),this.#r.className=`tw-caret`,this.#r.setAttribute(`part`,`caret`),this.#r.setAttribute(`aria-hidden`,`true`),this.#e.appendChild(this.#r)):this.#r&&=(this.#r.remove(),null)}});var Wn=`
|
|
392
|
+
slicc-chat-table { display: block; }
|
|
393
|
+
slicc-chat-table > .ctable {
|
|
394
|
+
width: 100%;
|
|
395
|
+
border-collapse: collapse;
|
|
396
|
+
margin: 2px 0 18px;
|
|
397
|
+
font-size: 13px;
|
|
398
|
+
border: 1px solid var(--line);
|
|
399
|
+
border-radius: 11px;
|
|
400
|
+
overflow: hidden;
|
|
401
|
+
}
|
|
402
|
+
slicc-chat-table > .ctable thead th {
|
|
403
|
+
background: var(--ghost);
|
|
404
|
+
text-align: left;
|
|
405
|
+
font-weight: 600;
|
|
406
|
+
font-size: 11px;
|
|
407
|
+
letter-spacing: .02em;
|
|
408
|
+
color: var(--txt-2);
|
|
409
|
+
padding: 8px 12px;
|
|
410
|
+
border-bottom: 1px solid var(--line);
|
|
411
|
+
}
|
|
412
|
+
slicc-chat-table > .ctable td {
|
|
413
|
+
padding: 8px 12px;
|
|
414
|
+
border-bottom: 1px solid var(--line);
|
|
415
|
+
}
|
|
416
|
+
slicc-chat-table > .ctable tr:last-child td { border-bottom: none; }
|
|
417
|
+
slicc-chat-table > .ctable td:first-child {
|
|
418
|
+
font-weight: 500;
|
|
419
|
+
color: var(--ink);
|
|
420
|
+
}
|
|
421
|
+
slicc-chat-table > .ctable .was { color: var(--txt-2); }
|
|
422
|
+
slicc-chat-table > .ctable .now { color: #1a7f37; font-weight: 500; }
|
|
423
|
+
slicc-chat-table > .ctable code {
|
|
424
|
+
font-family: var(--mono);
|
|
425
|
+
font-size: 11.5px;
|
|
426
|
+
background: var(--ghost);
|
|
427
|
+
border-radius: 5px;
|
|
428
|
+
padding: 1px 5px;
|
|
429
|
+
}
|
|
430
|
+
`,Gn=`slicc-chat-table-style`;function Kn(e){if(e.getElementById(Gn))return;let t=e.createElement(`style`);t.id=Gn,t.textContent=Wn,(e.head??e.documentElement).appendChild(t)}function qn(e){return e.split(`,`).map(e=>e.trim()).filter(e=>e.length>0)}W(`slicc-chat-table`,class extends HTMLElement{static observedAttributes=[`headers`];#e;#t;#n;#r=!1;connectedCallback(){Kn(this.ownerDocument),this.#i()}attributeChangedCallback(e,t,n){e!==`headers`||t===n||(this.#r&&this.#a(),this.isConnected&&this.dispatchEvent(new CustomEvent(`slicc-chat-table-change`,{bubbles:!0,composed:!0,detail:{headers:this.headers}})))}get headers(){let e=this.getAttribute(`headers`);return e?qn(e):[]}set headers(e){e==null?this.removeAttribute(`headers`):Array.isArray(e)?this.setAttribute(`headers`,e.join(`,`)):this.setAttribute(`headers`,e)}#i(){if(this.#r)return;this.#r=!0;let e=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLTableElement&&e.classList.contains(`ctable`)));this.#e=this.ownerDocument.createElement(`table`),this.#e.className=`ctable`,this.#e.setAttribute(`part`,`table`),this.#t=this.ownerDocument.createElement(`thead`),this.#t.setAttribute(`part`,`head`),this.#n=this.ownerDocument.createElement(`tbody`),this.#n.setAttribute(`part`,`body`),this.#e.append(this.#t,this.#n);for(let t of e)t instanceof HTMLElement&&t.getAttribute(`slot`)===`head`?this.#t.appendChild(t):this.#n.appendChild(t);this.#a(),this.appendChild(this.#e)}#a(){if(!this.#r)return;let e=this.#t.querySelector(`tr`);if(e&&!e.hasAttribute(`data-slicc-generated`))return;let t=this.headers;if(t.length===0){this.#t.replaceChildren();return}let n=K(`tr`,{"data-slicc-generated":``});for(let e of t)n.append(K(`th`,null,e));this.#t.replaceChildren(n)}});function Jn(e){if(typeof window>`u`||!window.location)return null;try{return new URLSearchParams(window.location.search).get(e)}catch{return null}}function Yn(e,t,n={}){if(!(typeof window>`u`||!window.history?.replaceState))try{let r=new URL(window.location.href),i=r.searchParams.get(e);if(i===t||i===null&&(t===null||t===``))return;t==null||t===``?r.searchParams.delete(e):r.searchParams.set(e,t),n.push?window.history.pushState(window.history.state,``,r):window.history.replaceState(window.history.state,``,r)}catch{}}var Xn=`
|
|
431
|
+
slicc-chat-thread {
|
|
432
|
+
flex: 1 1 auto;
|
|
433
|
+
display: block;
|
|
434
|
+
overflow-y: auto;
|
|
435
|
+
min-height: 0;
|
|
436
|
+
/* Always reserve the scrollbar gutter so the reading column's width — and
|
|
437
|
+
therefore its aspect ratio — stays fixed when a context swap changes the
|
|
438
|
+
content length (a long, overflowing context shows a scrollbar; a short one
|
|
439
|
+
does not, which would otherwise shift the centered column on every swap). */
|
|
440
|
+
scrollbar-gutter: stable;
|
|
441
|
+
}
|
|
442
|
+
slicc-chat-thread[hidden] {
|
|
443
|
+
display: none;
|
|
444
|
+
}
|
|
445
|
+
/* New-content chip: shown when content arrives while the viewer is scrolled
|
|
446
|
+
away (requestFollow). Sticky at the scrollport bottom, zero layout height.
|
|
447
|
+
--accent re-declared per the custom-property gotcha (tracks local --ctx). */
|
|
448
|
+
slicc-chat-thread {
|
|
449
|
+
--accent: color-mix(in srgb, var(--ctx) 55%, var(--ink));
|
|
450
|
+
}
|
|
451
|
+
slicc-chat-thread > .slicc-thread__follow {
|
|
452
|
+
position: sticky;
|
|
453
|
+
bottom: 18px;
|
|
454
|
+
height: 0;
|
|
455
|
+
display: none;
|
|
456
|
+
justify-content: center;
|
|
457
|
+
overflow: visible;
|
|
458
|
+
pointer-events: none;
|
|
459
|
+
z-index: 3;
|
|
460
|
+
}
|
|
461
|
+
slicc-chat-thread[has-new] > .slicc-thread__follow {
|
|
462
|
+
display: flex;
|
|
463
|
+
}
|
|
464
|
+
slicc-chat-thread > .slicc-thread__follow button {
|
|
465
|
+
pointer-events: auto;
|
|
466
|
+
transform: translateY(-100%);
|
|
467
|
+
display: inline-flex;
|
|
468
|
+
align-items: center;
|
|
469
|
+
gap: 6px;
|
|
470
|
+
font: 600 12px var(--ui);
|
|
471
|
+
color: var(--canvas);
|
|
472
|
+
background: var(--accent);
|
|
473
|
+
border: none;
|
|
474
|
+
border-radius: 999px;
|
|
475
|
+
padding: 6px 12px;
|
|
476
|
+
cursor: pointer;
|
|
477
|
+
box-shadow: var(--shadow-pane);
|
|
478
|
+
}
|
|
479
|
+
slicc-chat-thread > .slicc-thread__inner {
|
|
480
|
+
box-sizing: border-box;
|
|
481
|
+
max-width: 776px;
|
|
482
|
+
margin: 0 auto;
|
|
483
|
+
padding: 56px 72px;
|
|
484
|
+
font-family: var(--ui);
|
|
485
|
+
/* Primary text color for the reading column. Without this the message prose
|
|
486
|
+
inherits the UA default (black). --ink flips light/dark with the theme. */
|
|
487
|
+
color: var(--ink);
|
|
488
|
+
/* NO background / blur / feather here: the reading column sits directly on
|
|
489
|
+
the shader field. Text contrast comes from the shader itself rendering
|
|
490
|
+
low-contrast (its strokes stay close to the base color) — the old frosted
|
|
491
|
+
card muted the shader everywhere instead. */
|
|
492
|
+
}
|
|
493
|
+
slicc-chat-thread[open] > .slicc-thread__inner {
|
|
494
|
+
padding: 24px 32px;
|
|
495
|
+
}
|
|
496
|
+
/* Narrow / extension-sidebar: the reading column fills the full width — no
|
|
497
|
+
centered 776px cap. */
|
|
498
|
+
@media (max-width: 560px) {
|
|
499
|
+
slicc-chat-thread > .slicc-thread__inner,
|
|
500
|
+
slicc-chat-thread[open] > .slicc-thread__inner {
|
|
501
|
+
max-width: none;
|
|
502
|
+
margin: 0;
|
|
503
|
+
padding: 16px 14px;
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
`,Zn=`slicc-chat-thread-style`;function Qn(e){if(e.getElementById(Zn))return;let t=e.createElement(`style`);t.id=Zn,t.textContent=Xn,(e.head??e.documentElement).appendChild(t)}W(`slicc-chat-thread`,class e extends HTMLElement{static observedAttributes=[`open`,`context`,`accent`,`url-state`];#e;#t=!1;#n=null;#r=null;#i=null;#a=null;#o=()=>{this.urlState&&(this.#a!=null&&clearTimeout(this.#a),this.#a=setTimeout(()=>{this.#a=null,Yn(`at`,String(Math.round(this.scrollTop)))},300))};#s=()=>{if(!this.urlState)return;let e=Jn(`ctx`);if(e&&e!==this.context)this.dispatchEvent(new CustomEvent(`slicc-url-context`,{bubbles:!0,composed:!0,detail:{context:e}}));else{let e=Jn(`at`);e!=null&&(this.scrollTop=Number.parseInt(e,10)||0)}};#c=null;#l=new Map;connectedCallback(){Qn(this.ownerDocument),this.#m(),this.#p(),this.scrollToBottom(),this.urlState&&(this.#r=Jn(`at`),this.#i=Jn(`ctx`),this.addEventListener(`scroll`,this.#o,{passive:!0}),window.addEventListener(`popstate`,this.#s))}disconnectedCallback(){this.#n&&=(this.#e?.removeEventListener(`click`,this.#n),null),this.removeEventListener(`scroll`,this.#o),window.removeEventListener(`popstate`,this.#s),this.#a!=null&&(clearTimeout(this.#a),this.#a=null)}attributeChangedCallback(e,t,n){t!==n&&(e===`accent`&&this.#t&&this.#p(),e===`context`&&this.urlState&&n!=null&&this.isConnected&&(n!==this.#i&&(this.#r=null),Yn(`ctx`,n,{push:!0})))}get urlState(){return this.hasAttribute(`url-state`)}set urlState(e){this.toggleAttribute(`url-state`,e)}get urlContext(){return this.urlState?Jn(`ctx`):null}get open(){return this.hasAttribute(`open`)}set open(e){e?this.setAttribute(`open`,``):this.removeAttribute(`open`)}get context(){return this.getAttribute(`context`)}set context(e){e==null?this.removeAttribute(`context`):this.setAttribute(`context`,e)}get accent(){return this.getAttribute(`accent`)}set accent(e){e==null?this.removeAttribute(`accent`):this.setAttribute(`accent`,e)}get inner(){return this.#m(),this.#e}switchContext(e){this.#m();let t=this.context;if(e===t)return;t!=null&&this.#l.set(t,this.#f());let n=this.#l.get(e);this.#e.replaceChildren(...n?Array.from(n.cloneNode(!0).childNodes):[]),this.context=e,this.removeAttribute(`has-new`),this.dispatchEvent(new CustomEvent(`slicc-context-change`,{bubbles:!0,composed:!0,detail:{context:e,previous:t}})),this.scrollToBottom()}append(...e){this.#m(),e.length>0&&(this.#r=null),this.#e.append(...e),this.requestFollow()}static FOLLOW_SLACK=80;#u(){return this.scrollHeight-this.scrollTop-this.clientHeight<=e.FOLLOW_SLACK}requestFollow(){this.#m(),this.#u()?(this.scrollToBottom(),this.removeAttribute(`has-new`)):this.setAttribute(`has-new`,``)}#d=()=>{this.hasAttribute(`has-new`)&&this.#u()&&this.removeAttribute(`has-new`)};replaceContent(...e){this.#m(),this.#e.replaceChildren(...e),this.removeAttribute(`has-new`),this.scrollToBottom();let t=this.#r;t!=null&&e.length>0&&requestAnimationFrame(()=>{this.#r===t&&(this.scrollTop=Number.parseInt(t,10)||0)})}scrollToBottom(){this.scrollTop=this.scrollHeight}#f(){let e=this.ownerDocument.createDocumentFragment();for(let t of Array.from(this.#e.childNodes))e.appendChild(t.cloneNode(!0));return e}#p(){let e=this.accent;e?this.style.setProperty(`--ctx`,e):this.style.removeProperty(`--ctx`)}#m(){if(this.#t)return;this.#t=!0;let e=this.querySelector(`:scope > .slicc-thread__inner`);if(e instanceof HTMLElement)this.#e=e;else{let e=Array.from(this.childNodes);this.#e=this.ownerDocument.createElement(`div`),this.#e.className=`slicc-thread__inner`,this.#e.setAttribute(`part`,`inner`);for(let t of e)this.#e.appendChild(t);this.appendChild(this.#e)}this.#c=this.ownerDocument.createElement(`div`),this.#c.className=`slicc-thread__follow`;let t=this.ownerDocument.createElement(`button`);t.type=`button`,t.append(`New messages ↓`),t.addEventListener(`click`,()=>{this.scrollToBottom(),this.removeAttribute(`has-new`)}),this.#c.append(t),this.appendChild(this.#c),this.addEventListener(`scroll`,this.#d,{passive:!0}),this.#n=e=>{let t=e.target;t instanceof HTMLElement&&this.dispatchEvent(new CustomEvent(`slicc-thread-action`,{bubbles:!0,composed:!0,detail:{target:t}}))},this.#e.addEventListener(`click`,this.#n)}});var $n=q(`
|
|
507
|
+
:host {
|
|
508
|
+
display: flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
gap: 8px;
|
|
511
|
+
flex-wrap: wrap;
|
|
512
|
+
font-family: var(--ui);
|
|
513
|
+
font-size: 12px;
|
|
514
|
+
color: var(--txt-2);
|
|
515
|
+
margin: -4px 0 18px;
|
|
516
|
+
padding: 7px 10px;
|
|
517
|
+
border: 1px solid transparent;
|
|
518
|
+
border-radius: 9px;
|
|
519
|
+
transition: background .25s, border-color .25s;
|
|
520
|
+
}
|
|
521
|
+
:host([source]) {
|
|
522
|
+
/* Mix the source tint over the inherited --canvas (which flips #fff -> dark
|
|
523
|
+
with the theme), so the highlight tracks light/dark automatically without a
|
|
524
|
+
fragile, Chromium-only :host-context() override. */
|
|
525
|
+
background: color-mix(in srgb, var(--c, var(--violet)) 8%, var(--canvas));
|
|
526
|
+
border-color: color-mix(in srgb, var(--c, var(--violet)) 28%, var(--line));
|
|
527
|
+
}
|
|
528
|
+
/* Slots disappear from layout so their content are direct flex children of the
|
|
529
|
+
host — preserving the prototype's per-chip 8px gap + wrap. */
|
|
530
|
+
slot { display: contents; }
|
|
531
|
+
.darrow { color: var(--txt-3); flex: 0 0 auto; }
|
|
532
|
+
.label { display: contents; }
|
|
533
|
+
b { font-weight: 600; }
|
|
534
|
+
.scoop { font-weight: 600; }
|
|
535
|
+
code {
|
|
536
|
+
font-family: var(--mono);
|
|
537
|
+
font-size: 11.5px;
|
|
538
|
+
background: var(--ghost);
|
|
539
|
+
border-radius: 5px;
|
|
540
|
+
padding: 1px 5px;
|
|
541
|
+
}
|
|
542
|
+
`),er=[`feed`,`scoop`,`drop`,`sprinkle`],tr={feed:`arrow-right`,scoop:`circle-plus`,drop:`circle-check`,sprinkle:`sparkles`},nr={feed:`Delegated to`,scoop:`Spun up`,drop:`Wrapped up`,sprinkle:``},rr={feed_scoop:`Delegated to`,scoop_scoop:`Spun up`,drop_scoop:`Wrapped up`,"sprinkle-opened":`Opened`};function ir(e){return rr[e]??e}function ar(e){return er.includes(e??``)?e:`feed`}function or(e){return e.split(`,`).map(e=>e.trim()).filter(e=>e.length>0)}W(`slicc-delegation-line`,class extends HTMLElement{static observedAttributes=[`kind`,`hue`,`verb`,`scoop`,`label`,`args`,`source`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[$n]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get kind(){return ar(this.getAttribute(`kind`))}set kind(e){this.setAttribute(`kind`,ar(e))}get hue(){return this.getAttribute(`hue`)}set hue(e){e==null?this.removeAttribute(`hue`):this.setAttribute(`hue`,e)}get verb(){return this.getAttribute(`verb`)}set verb(e){e==null?this.removeAttribute(`verb`):this.setAttribute(`verb`,e)}get scoop(){return this.getAttribute(`scoop`)}set scoop(e){e==null?this.removeAttribute(`scoop`):this.setAttribute(`scoop`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get args(){return this.getAttribute(`args`)}set args(e){e==null?this.removeAttribute(`args`):this.setAttribute(`args`,e)}get source(){return this.hasAttribute(`source`)}set source(e){this.toggleAttribute(`source`,e)}#t(){let e=this.kind,t=this.hue,n=this.verb,r=n==null?nr[e]:ir(n),i=this.scoop,a=this.label,o=this.args?or(this.args):[];t?this.style.setProperty(`--c`,t):this.style.removeProperty(`--c`);let s=K(`span`,{class:`darrow`,part:`arrow`},K(`slot`,{name:`arrow`},J(tr[e],{size:13}))),c=K(`slot`,{name:`label`});r&&c.append(K(`span`,{class:`verb`},r)),i&&c.append(K(`b`,{class:`scoop`,part:`scoop`,style:t?`color:${t}`:void 0},i)),a&&c.append(K(`span`,{class:`prose`},a));let l=K(`span`,{class:`label`,part:`label`},c),u=K(`slot`,{name:`args`});for(let e of o)u.append(K(`code`,{part:`code`},e));this.#e.replaceChildren(s,l,u)}});var sr=q(`
|
|
543
|
+
:host {
|
|
544
|
+
display: block;
|
|
545
|
+
border: 1px solid var(--line);
|
|
546
|
+
border-radius: 9px;
|
|
547
|
+
overflow: hidden;
|
|
548
|
+
cursor: pointer;
|
|
549
|
+
background: color-mix(in srgb, var(--canvas) 86%, transparent);
|
|
550
|
+
transition: .12s;
|
|
551
|
+
-webkit-user-select: none;
|
|
552
|
+
user-select: none;
|
|
553
|
+
}
|
|
554
|
+
:host(:hover) { transform: translateY(-1px); }
|
|
555
|
+
:host([selected]) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--violet); }
|
|
556
|
+
:host(:focus-visible) { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--violet); }
|
|
557
|
+
.ch { height: 38px; }
|
|
558
|
+
.cl {
|
|
559
|
+
font-family: var(--ui);
|
|
560
|
+
font-size: 10px;
|
|
561
|
+
color: var(--txt-2);
|
|
562
|
+
padding: 5px 7px;
|
|
563
|
+
background: var(--canvas);
|
|
564
|
+
}
|
|
565
|
+
/* palette chips carry inline-style light backgrounds — tone them down for dark mode */
|
|
566
|
+
:host-context(.dark) .ch,
|
|
567
|
+
:host-context([data-theme="dark"]) .ch { filter: brightness(.55) saturate(.85); }
|
|
568
|
+
`);W(`slicc-palette-cell`,class extends HTMLElement{static observedAttributes=[`color`,`label`,`group`,`selected`];#e;#t=null;#n=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[sr]}connectedCallback(){this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,`0`),this.setAttribute(`role`,`button`),this.#o(),this.#i()}disconnectedCallback(){this.#a()}attributeChangedCallback(){this.isConnected&&this.#o()}get color(){return this.getAttribute(`color`)}set color(e){e==null?this.removeAttribute(`color`):this.setAttribute(`color`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get group(){return this.getAttribute(`group`)}set group(e){e==null?this.removeAttribute(`group`):this.setAttribute(`group`,e)}get selected(){return this.hasAttribute(`selected`)}set selected(e){this.toggleAttribute(`selected`,e)}select(){this.#r(),this.selected=!0,this.dispatchEvent(new CustomEvent(`palette-select`,{bubbles:!0,composed:!0,detail:{color:this.color,label:this.label,group:this.group}}))}#r(){let e=this.group;if(!e)return;let t=this.getRootNode().querySelectorAll(`slicc-palette-cell[group="${CSS.escape(e)}"][selected]`);for(let e of t)e!==this&&(e.selected=!1)}#i(){this.#t||(this.#t=()=>this.select(),this.#n=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.select())},this.addEventListener(`click`,this.#t),this.addEventListener(`keydown`,this.#n))}#a(){this.#t&&this.removeEventListener(`click`,this.#t),this.#n&&this.removeEventListener(`keydown`,this.#n),this.#t=null,this.#n=null}#o(){this.setAttribute(`aria-pressed`,this.selected?`true`:`false`);let e=this.color??`transparent`,t=this.label,n=K(`div`,{class:`ch`,part:`chip`,style:`background:${e}`}),r=K(`div`,{class:`cl`,part:`label`},t??K(`slot`));this.#e.replaceChildren(n,r)}});var cr=[`#f43f5e`,`#f59e0b`,`#06b6d4`,`#8b5cf6`,`#ec4899`,`#22c55e`],lr=46,ur=72,dr=6.283185;function fr(e,t){return e+Math.random()*(t-e)}var pr=[{color:`#faf6f1`,label:`paper`},{color:`#fff7ed`,label:`cream`},{color:`#f5f3ff`,label:`lilac`},{color:`#fef2f2`,label:`blush`}],mr=[{color:`#8b5cf6`,label:`violet`},{color:`#f43f5e`,label:`rose`},{color:`#06b6d4`,label:`cyan`},{color:`#ef7000`,label:`cone`}],hr=0,gr=q(`
|
|
569
|
+
:host {
|
|
570
|
+
position: relative;
|
|
571
|
+
display: block;
|
|
572
|
+
border: 1px solid var(--line);
|
|
573
|
+
border-radius: 13px;
|
|
574
|
+
overflow: hidden;
|
|
575
|
+
margin: 14px 0 6px;
|
|
576
|
+
background: var(--canvas);
|
|
577
|
+
box-shadow: rgba(10, 10, 10, .05) 0 4px 14px -6px;
|
|
578
|
+
font-family: var(--ui);
|
|
579
|
+
}
|
|
580
|
+
canvas.sprk {
|
|
581
|
+
position: absolute;
|
|
582
|
+
inset: 0;
|
|
583
|
+
width: 100%;
|
|
584
|
+
height: 100%;
|
|
585
|
+
z-index: 0;
|
|
586
|
+
display: block;
|
|
587
|
+
pointer-events: none;
|
|
588
|
+
}
|
|
589
|
+
.dh, .dbody { position: relative; z-index: 1; }
|
|
590
|
+
.dh {
|
|
591
|
+
display: flex;
|
|
592
|
+
align-items: center;
|
|
593
|
+
gap: 9px;
|
|
594
|
+
padding: 9px 13px;
|
|
595
|
+
border-bottom: 1px solid var(--line);
|
|
596
|
+
font-family: var(--ui);
|
|
597
|
+
font-size: 12px;
|
|
598
|
+
color: var(--txt-2);
|
|
599
|
+
background: color-mix(in srgb, var(--canvas) 82%, transparent);
|
|
600
|
+
backdrop-filter: blur(2px);
|
|
601
|
+
}
|
|
602
|
+
.sg {
|
|
603
|
+
width: 20px;
|
|
604
|
+
height: 20px;
|
|
605
|
+
border-radius: 6px;
|
|
606
|
+
display: grid;
|
|
607
|
+
place-items: center;
|
|
608
|
+
color: #fff;
|
|
609
|
+
background: var(--c, var(--violet));
|
|
610
|
+
}
|
|
611
|
+
.sg svg { display: block; }
|
|
612
|
+
.nm { color: var(--ink); font-weight: 500; }
|
|
613
|
+
.tag {
|
|
614
|
+
margin-left: auto;
|
|
615
|
+
font-size: 10px;
|
|
616
|
+
color: var(--c, var(--violet));
|
|
617
|
+
background: color-mix(in srgb, var(--c, var(--violet)) 12%, #fff);
|
|
618
|
+
border: 1px solid color-mix(in srgb, var(--c, var(--violet)) 30%, var(--line));
|
|
619
|
+
border-radius: 26px;
|
|
620
|
+
padding: 2px 9px;
|
|
621
|
+
}
|
|
622
|
+
.dbody { padding: 13px; }
|
|
623
|
+
.dprompt { font-size: 13px; color: var(--ink); margin: 0 0 11px; }
|
|
624
|
+
.pgrid {
|
|
625
|
+
display: grid;
|
|
626
|
+
grid-template-columns: repeat(4, 1fr);
|
|
627
|
+
gap: 8px;
|
|
628
|
+
margin-bottom: 12px;
|
|
629
|
+
}
|
|
630
|
+
.pgrid.accent { margin-top: -2px; }
|
|
631
|
+
.dfoot { display: flex; align-items: center; gap: 10px; }
|
|
632
|
+
.dapply {
|
|
633
|
+
font: inherit;
|
|
634
|
+
font-size: 12px;
|
|
635
|
+
font-weight: 600;
|
|
636
|
+
color: #fff;
|
|
637
|
+
background: var(--violet);
|
|
638
|
+
border: none;
|
|
639
|
+
border-radius: 9999px;
|
|
640
|
+
padding: 8px 16px;
|
|
641
|
+
cursor: pointer;
|
|
642
|
+
}
|
|
643
|
+
.dapply:hover { filter: brightness(1.08); }
|
|
644
|
+
.dapply:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
|
|
645
|
+
.dnote { font-size: 11.5px; color: var(--txt-2); }
|
|
646
|
+
/* dark: the tag pill mixes over --canvas instead of #fff (prototype body.dark .dip .dh .tag) */
|
|
647
|
+
:host-context(.dark) .tag,
|
|
648
|
+
:host-context([data-theme="dark"]) .tag {
|
|
649
|
+
background: color-mix(in srgb, var(--c, var(--violet)) 22%, var(--canvas));
|
|
650
|
+
border-color: color-mix(in srgb, var(--c, var(--violet)) 38%, var(--line));
|
|
651
|
+
}
|
|
652
|
+
@media (prefers-reduced-motion: reduce) {
|
|
653
|
+
canvas.sprk { display: none; }
|
|
654
|
+
}
|
|
655
|
+
`);W(`slicc-dip`,class extends HTMLElement{static observedAttributes=[`name`,`hue`,`prompt`];#e;#t=`d${++hr}`;#n=null;#r=null;#i=0;#a=null;#o=[];#s=0;#c=0;#l=-999;#u=-999;#d=null;#f=null;#p=null;#m=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[gr]}connectedCallback(){this.#v(),this.#b(),this.#w()}disconnectedCallback(){this.#T(),this.#x()}attributeChangedCallback(){this.isConnected&&(this.#v(),this.#b(),this.#w())}get name(){return this.getAttribute(`name`)??`palette.shtml`}set name(e){e==null?this.removeAttribute(`name`):this.setAttribute(`name`,e)}get hue(){return this.getAttribute(`hue`)}set hue(e){e==null?this.removeAttribute(`hue`):this.setAttribute(`hue`,e)}get prompt(){return this.getAttribute(`prompt`)}set prompt(e){e==null?this.removeAttribute(`prompt`):this.setAttribute(`prompt`,e)}get selectedCanvas(){return this.#h(`canvas:${this.#t}`)}get selectedAccent(){return this.#h(`accent:${this.#t}`)}#h(e){let t=this.querySelector(`slicc-palette-cell[group="${CSS.escape(e)}"][selected]`);return t?{color:t.getAttribute(`color`)??``,label:t.getAttribute(`label`)??``}:null}#g(e,t,n){let r=e.startsWith(`canvas`)?`canvas`:`accent`;if(!this.querySelector(`slicc-palette-cell[slot="${r}"]`))for(let i of t){let t=this.ownerDocument.createElement(`slicc-palette-cell`);t.setAttribute(`slot`,r),t.setAttribute(`color`,i.color),t.setAttribute(`label`,i.label),t.setAttribute(`group`,e),i.label===n&&t.setAttribute(`selected`,``),this.appendChild(t)}}#_(){return[document.createTextNode(`Tune the hero’s `),K(`b`,null,`canvas`),document.createTextNode(` & `),K(`b`,null,`accent`),document.createTextNode(`, then apply:`)]}#v(){let e=this.hue,t=e?`--c:${e}`:void 0,n=K(`slot`,{name:`prompt`});this.prompt?n.append(this.prompt):n.append(...this.#_()),this.#e.replaceChildren(K(`canvas`,{class:`sprk`,part:`field`,"aria-hidden":`true`}),K(`div`,{class:`dh`,part:`header`,style:t},K(`span`,{class:`sg`,part:`glyph`},J(`sparkles`,{size:12})),K(`span`,{class:`nm`,part:`name`},this.name),K(`span`,{class:`tag`,part:`tag`},`sprinkle · dip`)),K(`div`,{class:`dbody`,part:`body`,style:t},K(`p`,{class:`dprompt`,part:`prompt`},n),K(`div`,{class:`pgrid canvas`,part:`grid-canvas`},K(`slot`,{name:`canvas`})),K(`div`,{class:`pgrid accent`,part:`grid-accent`},K(`slot`,{name:`accent`})),K(`div`,{class:`dfoot`},K(`button`,{class:`dapply`,part:`apply`,type:`button`},`Apply to hero →`),K(`span`,{class:`dnote`,part:`note`})))),this.#g(`canvas:${this.#t}`,pr,`paper`),this.#g(`accent:${this.#t}`,mr,`cone`),this.#y()}#y(){let e=this.#e.querySelector(`.dnote`);e&&(e.textContent=`${this.selectedCanvas?.label??`paper`} · ${this.selectedAccent?.label??`violet`}`)}#b(){this.#p||(this.#p=()=>this.#y(),this.addEventListener(`palette-select`,this.#p)),this.#m||=()=>this.#S(),this.#e.querySelector(`.dapply`)?.addEventListener(`click`,this.#m)}#x(){this.#p&&=(this.removeEventListener(`palette-select`,this.#p),null),this.#m=null}#S(){this.#y(),this.dispatchEvent(new CustomEvent(`slicc-dip-apply`,{bubbles:!0,composed:!0,detail:{canvas:this.selectedCanvas,accent:this.selectedAccent}}))}#C(){return typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches}#w(){if(this.#T(),this.#C())return;let e=this.#e.querySelector(`canvas.sprk`),t=e?.getContext(`2d`)??null;!e||!t||(this.#n=e,this.#r=t,this.#o=[],this.#E(),typeof ResizeObserver==`function`&&(this.#a=new ResizeObserver(()=>this.#E()),this.#a.observe(this)),this.#d=e=>{let t=this.getBoundingClientRect();this.#l=e.clientX-t.left,this.#u=e.clientY-t.top},this.#f=()=>{this.#l=-999,this.#u=-999},this.addEventListener(`pointermove`,this.#d),this.addEventListener(`pointerleave`,this.#f),this.#i=requestAnimationFrame(()=>this.#O()))}#T(){this.#i&&cancelAnimationFrame(this.#i),this.#i=0,this.#a?.disconnect(),this.#a=null,this.#d&&this.removeEventListener(`pointermove`,this.#d),this.#f&&this.removeEventListener(`pointerleave`,this.#f),this.#d=null,this.#f=null}#E(){let e=this.#n,t=this.#r;if(!e||!t)return;let n=this.getBoundingClientRect(),r=Math.min(typeof devicePixelRatio==`number`?devicePixelRatio:1,2);if(this.#s=n.width,this.#c=n.height||90,e.width=Math.max(1,Math.round(this.#s*r)),e.height=Math.max(1,Math.round(this.#c*r)),t.setTransform(r,0,0,r,0,0),!this.#o.length)for(let e=0;e<lr;e++)this.#o.push({x:fr(0,this.#s),y:fr(0,this.#c),vx:fr(-.1,.1),vy:fr(-.08,.08),rot:fr(0,dr),rv:fr(-.014,.014),s:fr(1.2,2.2),col:cr[e%cr.length]})}#D(e,t,n,r,i){let a=this.#r;a&&(a.roundRect?(a.beginPath(),a.roundRect(e,t,n,r,i)):(a.beginPath(),a.moveTo(e+i,t),a.arcTo(e+n,t,e+n,t+r,i),a.arcTo(e+n,t+r,e,t+r,i),a.arcTo(e,t+r,e,t,i),a.arcTo(e,t,e+n,t,i),a.closePath()))}#O(){let e=this.#r;if(e){e.clearRect(0,0,this.#s,this.#c);for(let t of this.#o){let n=t.x-this.#l,r=t.y-this.#u,i=n*n+r*r;if(i<ur*ur){let e=Math.sqrt(i)||1,a=(ur-e)/ur*.5;t.vx+=n/e*a,t.vy+=r/e*a}t.vx*=.95,t.vy*=.95,t.x+=t.vx+.04,t.y+=t.vy,t.rot+=t.rv,t.x<-6&&(t.x=this.#s+6),t.x>this.#s+6&&(t.x=-6),t.y<-6&&(t.y=this.#c+6),t.y>this.#c+6&&(t.y=-6);let a=t.s*4,o=t.s*1.55;e.save(),e.translate(t.x,t.y),e.rotate(t.rot),e.globalAlpha=.5,e.fillStyle=t.col,this.#D(-a/2,-o/2,a,o,o/2),e.fill(),e.globalAlpha=.85,e.fillStyle=`#fff`,this.#D(-a/2+o*.3,-o*.34,a-o*.6,o*.3,o*.15),e.fill(),e.restore(),e.globalAlpha=1}this.#i=requestAnimationFrame(()=>this.#O())}}});var _r=9,vr=3,yr=45,br=q(`
|
|
656
|
+
:host {
|
|
657
|
+
display: inline-flex;
|
|
658
|
+
align-items: center;
|
|
659
|
+
line-height: 1;
|
|
660
|
+
/* size scales the whole rig; 1.3px border at the 9px base. */
|
|
661
|
+
--_eye: 9px;
|
|
662
|
+
--_border: 1.3px;
|
|
663
|
+
}
|
|
664
|
+
.eyes {
|
|
665
|
+
display: inline-flex;
|
|
666
|
+
gap: 3px;
|
|
667
|
+
}
|
|
668
|
+
.eye {
|
|
669
|
+
width: var(--_eye);
|
|
670
|
+
height: var(--_eye);
|
|
671
|
+
border-radius: 50%;
|
|
672
|
+
background: #fff;
|
|
673
|
+
border: var(--_border) solid #000;
|
|
674
|
+
position: relative;
|
|
675
|
+
display: inline-block;
|
|
676
|
+
box-sizing: border-box;
|
|
677
|
+
/* Eyelid pivot is the eye centre so the lid closes top-and-bottom. */
|
|
678
|
+
transform-origin: center;
|
|
679
|
+
}
|
|
680
|
+
.eye::after {
|
|
681
|
+
content: "";
|
|
682
|
+
position: absolute;
|
|
683
|
+
width: 42%;
|
|
684
|
+
height: 42%;
|
|
685
|
+
border-radius: 50%;
|
|
686
|
+
background: #000;
|
|
687
|
+
left: 50%;
|
|
688
|
+
top: 55%;
|
|
689
|
+
transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
|
|
690
|
+
}
|
|
691
|
+
/* Inverted variant — white border + white pupil (prototype .scoop.active). */
|
|
692
|
+
:host([inverted]) .eye { border-color: #fff; }
|
|
693
|
+
:host([inverted]) .eye::after { background: #fff; }
|
|
694
|
+
/* Dead state — replace the pupil with an "X" glyph centered in the sclera. */
|
|
695
|
+
:host([eyes="dead"]) .eye::after { display: none; }
|
|
696
|
+
.x {
|
|
697
|
+
position: absolute;
|
|
698
|
+
inset: 0;
|
|
699
|
+
display: grid;
|
|
700
|
+
place-items: center;
|
|
701
|
+
font-family: var(--ui), system-ui, sans-serif;
|
|
702
|
+
font-weight: 700;
|
|
703
|
+
font-size: calc(var(--_eye) * 0.85);
|
|
704
|
+
line-height: 1;
|
|
705
|
+
color: #000;
|
|
706
|
+
/* nudge onto the sclera centre to mirror the live pupil's top:55% bias */
|
|
707
|
+
transform: translateY(3%);
|
|
708
|
+
user-select: none;
|
|
709
|
+
}
|
|
710
|
+
:host([inverted]) .x { color: #fff; }
|
|
711
|
+
|
|
712
|
+
/*
|
|
713
|
+
* Blinking — the eyelid closes briefly then reopens on a slow loop. Squashing
|
|
714
|
+
* the eye's vertical scale to ~0.1 reads as a blink; because the pupil
|
|
715
|
+
* (.eye::after) is a child, it squashes with the lid, while its own --px/--py
|
|
716
|
+
* translate keeps composing with cursor-tracking. The two eyes use slightly
|
|
717
|
+
* different cycle lengths (~3.4s / ~4.6s) so the loop lands in the 3-5s band
|
|
718
|
+
* and never feels metronomic. Dead eyes (no live pupil) never blink.
|
|
719
|
+
*/
|
|
720
|
+
@keyframes slicc-eye-blink {
|
|
721
|
+
/* The lid is open for the vast majority of the cycle; the brief dip lives in
|
|
722
|
+
the last few percent. The 95%->97.5%->100% close+reopen spans ~5% of the
|
|
723
|
+
cycle: ~170ms at 3.4s and ~230ms at 4.6s — a quick, natural blink. */
|
|
724
|
+
0%, 95%, 100% { transform: scaleY(1); }
|
|
725
|
+
97.5% { transform: scaleY(0.1); }
|
|
726
|
+
}
|
|
727
|
+
:host([blink]:not([eyes="dead"])) .eye {
|
|
728
|
+
animation: slicc-eye-blink 3.4s ease-in-out infinite;
|
|
729
|
+
}
|
|
730
|
+
:host([blink]:not([eyes="dead"])) [part~="eye-right"] {
|
|
731
|
+
animation-duration: 4.6s;
|
|
732
|
+
}
|
|
733
|
+
@media (prefers-reduced-motion: reduce) {
|
|
734
|
+
:host([blink]) .eye { animation: none; }
|
|
735
|
+
}
|
|
736
|
+
`);W(`slicc-googly-eyes`,class extends HTMLElement{static observedAttributes=[`inverted`,`tracking`,`blink`,`eyes`,`size`];#e;#t=[];#n=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[br]}connectedCallback(){this.#r(),this.#i()}disconnectedCallback(){this.#o()}attributeChangedCallback(e,t,n){this.isConnected&&(e===`size`||e===`eyes`?(this.#r(),this.#i()):e===`tracking`&&this.#i())}get inverted(){return this.hasAttribute(`inverted`)}set inverted(e){this.toggleAttribute(`inverted`,e)}get tracking(){return this.getAttribute(`tracking`)!==`off`}set tracking(e){e?this.setAttribute(`tracking`,`on`):this.setAttribute(`tracking`,`off`)}get blink(){return this.hasAttribute(`blink`)}set blink(e){this.toggleAttribute(`blink`,e)}get eyes(){return this.getAttribute(`eyes`)===`dead`?`dead`:`open`}set eyes(e){this.setAttribute(`eyes`,e===`dead`?`dead`:`open`)}get size(){let e=Number.parseFloat(this.getAttribute(`size`)??``);return Number.isFinite(e)&&e>0?e:_r}set size(e){this.setAttribute(`size`,String(e))}#r(){let e=this.size,t=1.3/_r*e,n=this.eyes===`dead`,r=e=>K(`span`,{class:`eye`,part:e},n?K(`span`,{class:`x`,"aria-hidden":`true`},`×`):null),i=K(`span`,{class:`eyes`,part:`eyes`,style:`--_eye:${e}px;--_border:${t}px`,role:`img`,"aria-label":n?`dead eyes`:`googly eyes`},r(`eye eye-left`),K(`slot`),r(`eye eye-right`));this.#e.replaceChildren(i),this.#t=Array.from(this.#e.querySelectorAll(`.eye`)),this.#s()}#i(){this.tracking&&this.eyes===`open`?this.#a():(this.#o(),this.#s())}#a(){this.#n||(this.#n=e=>this.#c(e),document.addEventListener(`mousemove`,this.#n))}#o(){this.#n&&=(document.removeEventListener(`mousemove`,this.#n),null)}#s(){for(let e of this.#t)e.style.setProperty(`--px`,`0px`),e.style.setProperty(`--py`,`0px`)}#c(e){for(let t of this.#t){let n=t.getBoundingClientRect(),r=n.left+n.width/2,i=n.top+n.height/2,a=Math.atan2(e.clientY-i,e.clientX-r),o=Math.min(vr,Math.hypot(e.clientX-r,e.clientY-i)/yr);t.style.setProperty(`--px`,`${(Math.cos(a)*o).toFixed(2)}px`),t.style.setProperty(`--py`,`${(Math.sin(a)*o).toFixed(2)}px`)}}});var xr=q(`
|
|
737
|
+
:host{display:block;font-family:var(--ui);}
|
|
738
|
+
:host([hidden]){display:none;}
|
|
739
|
+
.handoff{border:1px solid var(--line);border-radius:13px;padding:13px 15px;margin:2px 0 18px;}
|
|
740
|
+
.handoff .top{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
|
|
741
|
+
.handoff .av{width:26px;height:26px;border-radius:9999px;border:1px solid color-mix(in srgb,var(--violet) 40%,var(--line));display:grid;place-items:center;background:color-mix(in srgb,var(--violet) 14%,#fff);}
|
|
742
|
+
.handoff .av .eyes{display:inline-flex;gap:3px;}
|
|
743
|
+
.handoff .lbl2{font-family:var(--ui);font-size:11px;color:var(--txt-2);}
|
|
744
|
+
.handoff .lbl2 .hand{display:inline-flex;vertical-align:-2px;margin-right:5px;color:var(--violet);}
|
|
745
|
+
.handoff .lbl2 .hand svg{display:block;}
|
|
746
|
+
.handoff .lbl2 .pre{color:var(--txt-3);}
|
|
747
|
+
.handoff .lbl2 b{color:var(--violet);font-weight:600;}
|
|
748
|
+
.handoff p{margin:0;font-size:14px;color:var(--ink);}
|
|
749
|
+
:host-context(body.dark) .handoff .av,
|
|
750
|
+
:host-context(.dark) .handoff .av,
|
|
751
|
+
:host-context([data-theme="dark"]) .handoff .av{background:color-mix(in srgb,var(--violet) 24%,var(--canvas));}
|
|
752
|
+
.opened{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--ghost);border-radius:11px;padding:9px 11px;margin:2px 0 18px;font-size:13px;color:var(--txt-2);}
|
|
753
|
+
.opened .sg{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;background:var(--rainbow);flex:0 0 auto;}
|
|
754
|
+
.opened .sg svg{display:block;}
|
|
755
|
+
.opened b{color:var(--ink);font-weight:600;}
|
|
756
|
+
`),Sr=`Handoff request from`;W(`slicc-handoff-card`,class extends HTMLElement{static observedAttributes=[`variant`,`name`,`pre`,`text`,`eyes`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[xr]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get variant(){return this.getAttribute(`variant`)===`opened`?`opened`:`handoff`}set variant(e){this.setAttribute(`variant`,e===`opened`?`opened`:`handoff`)}get name(){return this.getAttribute(`name`)}set name(e){e==null?this.removeAttribute(`name`):this.setAttribute(`name`,e)}get pre(){return this.getAttribute(`pre`)}set pre(e){e==null?this.removeAttribute(`pre`):this.setAttribute(`pre`,e)}get text(){return this.getAttribute(`text`)}set text(e){e==null?this.removeAttribute(`text`):this.setAttribute(`text`,e)}get eyes(){return this.getAttribute(`eyes`)===`dead`?`dead`:`open`}set eyes(e){this.setAttribute(`eyes`,e===`dead`?`dead`:`open`)}#t(){this.variant===`opened`?this.#i():this.#r()}#n(){let e=this.text;return e==null?K(`slot`):document.createTextNode(e)}#r(){let e=this.pre??Sr,t=this.name,n=K(`slicc-googly-eyes`,{class:`eyes`});this.eyes===`dead`&&n.setAttribute(`eyes`,`dead`);let r=K(`div`,{class:`top`,part:`top`},K(`span`,{class:`av`,part:`avatar`},n),K(`span`,{class:`lbl2`,part:`label`},K(`span`,{class:`hand`,part:`hand`,"aria-hidden":`true`},J(`hand`,{size:13})),K(`span`,{class:`pre`},e),` `,t==null?null:K(`b`,{part:`name`},t))),i=K(`p`,{part:`text`},this.#n());this.#e.replaceChildren(K(`div`,{class:`handoff`,part:`card`},r,i))}#i(){let e=this.name,t=K(`span`,{class:`sg`,part:`glyph`,"aria-hidden":`true`},J(`sparkles`,{size:12})),n=K(`span`,{part:`text`},e==null?null:K(`b`,{part:`name`},e),e==null?null:` `,this.#n());this.#e.replaceChildren(K(`div`,{class:`opened`,part:`card`},t,n))}});var Cr=14,wr=`event`,Tr={webhook:`webhook`,cron:`clock`,workflow:`workflow`,"session-reload":`rotate-ccw`,navigate:`compass`,upgrade:`circle-arrow-up`,sprinkle:`sparkles`,fswatch:`eye`,"scoop-notify":`bell-ring`,"scoop-idle":`moon`,"scoop-wait":`hourglass`},Er=`bell`;function Dr(e){return e&&Tr[e.toLowerCase()]||Er}var Or=q(`
|
|
757
|
+
:host{
|
|
758
|
+
/* Licks are right-aligned in the chat column (mirroring the lickIn slide-in
|
|
759
|
+
from the right): the host is a full-width flex row that pushes the card to
|
|
760
|
+
the right edge, and the card shrinks to its content. This keeps the right
|
|
761
|
+
edge pinned across collapse/expand — the card width changes with content,
|
|
762
|
+
but it always hugs the column's right side. */
|
|
763
|
+
display:flex;justify-content:flex-end;width:100%;
|
|
764
|
+
font-family:var(--ui,"adobe-clean","Inter",system-ui,sans-serif);
|
|
765
|
+
/* light defaults, lifted verbatim from the prototype */
|
|
766
|
+
--lick-bg:color-mix(in srgb,var(--amber) 9%,#fff);
|
|
767
|
+
--lick-border:color-mix(in srgb,var(--amber) 45%,var(--line));
|
|
768
|
+
--lick-head:#9a6300;
|
|
769
|
+
}
|
|
770
|
+
/* Dark flips via the library's outer scopes (.dark / [data-theme="dark"] / body.dark);
|
|
771
|
+
:host-context reaches the light-DOM ancestor from inside the shadow root, and the
|
|
772
|
+
theme attribute is the per-element override — same pattern as slicc-add-menu. */
|
|
773
|
+
:host-context(.dark),:host-context([data-theme="dark"]),:host([theme="dark"]){
|
|
774
|
+
--lick-bg:color-mix(in srgb,var(--amber) 18%,var(--canvas));
|
|
775
|
+
--lick-border:color-mix(in srgb,var(--amber) 40%,var(--line));
|
|
776
|
+
--lick-head:#e5b35a;
|
|
777
|
+
}
|
|
778
|
+
:host([theme="light"]){
|
|
779
|
+
--lick-bg:color-mix(in srgb,var(--amber) 9%,#fff);
|
|
780
|
+
--lick-border:color-mix(in srgb,var(--amber) 45%,var(--line));
|
|
781
|
+
--lick-head:#9a6300;
|
|
782
|
+
}
|
|
783
|
+
*{box-sizing:border-box;}
|
|
784
|
+
|
|
785
|
+
.lick{
|
|
786
|
+
margin:2px 0 16px;
|
|
787
|
+
/* Shrink to content and cap the width so the right-aligned card never spans
|
|
788
|
+
the full column; the body wraps within this cap. */
|
|
789
|
+
max-width:85%;
|
|
790
|
+
border:1px solid var(--lick-border);
|
|
791
|
+
background:var(--lick-bg);
|
|
792
|
+
border-radius:12px;
|
|
793
|
+
padding:10px 12px;
|
|
794
|
+
box-shadow:rgba(10,10,10,.05) 0 4px 14px -6px;
|
|
795
|
+
animation:lickIn .4s ease both;
|
|
796
|
+
}
|
|
797
|
+
/* Static (no entrance) — for already-settled cards and reduced-motion. */
|
|
798
|
+
:host([no-animate]) .lick{animation:none;}
|
|
799
|
+
@media (prefers-reduced-motion: reduce){.lick{animation:none;}}
|
|
800
|
+
|
|
801
|
+
.lh{
|
|
802
|
+
display:flex;align-items:center;gap:7px;
|
|
803
|
+
font-family:var(--ui);font-size:10.5px;color:var(--lick-head);
|
|
804
|
+
margin-bottom:4px;
|
|
805
|
+
}
|
|
806
|
+
/* The lucide bell icon inherits the header color via stroke:currentColor. */
|
|
807
|
+
.lh .bell{display:inline-flex;flex:0 0 auto;align-items:center;color:var(--lick-head);}
|
|
808
|
+
.lh .bell svg{display:block;}
|
|
809
|
+
/* The clickable affordance only exists while collapsible. */
|
|
810
|
+
:host([collapsible]) .lh{cursor:pointer;user-select:none;}
|
|
811
|
+
.lk{
|
|
812
|
+
margin-left:auto;border-radius:26px;background:var(--lick-pill,var(--amber));
|
|
813
|
+
color:var(--lick-pill-ink,#3a2600);font-size:9px;font-weight:700;padding:1px 7px;
|
|
814
|
+
}
|
|
815
|
+
|
|
816
|
+
.lb{font-size:12.5px;color:var(--ink);line-height:1.4;}
|
|
817
|
+
.lb ::slotted(b),.lb b{font-weight:600;}
|
|
818
|
+
/* Collapsed hides the body but keeps the header card visible. */
|
|
819
|
+
:host([collapsed]) .lb{display:none;}
|
|
820
|
+
|
|
821
|
+
@keyframes lickIn{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
|
|
822
|
+
`),kr=`·`;W(`slicc-lick-card`,class extends HTMLElement{static observedAttributes=[`kind`,`event-label`,`body`,`count`,`no-animate`,`collapsible`,`collapsed`,`theme`,`hue`];#e;#t=null;#n=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Or]}connectedCallback(){this.#r()}disconnectedCallback(){this.#a()}attributeChangedCallback(){this.isConnected&&this.#r()}get kind(){return this.getAttribute(`kind`)}set kind(e){e==null?this.removeAttribute(`kind`):this.setAttribute(`kind`,e)}get eventLabel(){return this.getAttribute(`event-label`)}set eventLabel(e){e==null?this.removeAttribute(`event-label`):this.setAttribute(`event-label`,e)}get body(){return this.getAttribute(`body`)}set body(e){e==null?this.removeAttribute(`body`):this.setAttribute(`body`,e)}get count(){let e=Number.parseInt(this.getAttribute(`count`)??``,10);return Number.isFinite(e)&&e>0?e:1}set count(e){e>1?this.setAttribute(`count`,String(e)):this.removeAttribute(`count`)}get noAnimate(){return this.hasAttribute(`no-animate`)}set noAnimate(e){this.toggleAttribute(`no-animate`,e)}get collapsible(){return this.hasAttribute(`collapsible`)}set collapsible(e){this.toggleAttribute(`collapsible`,e)}get collapsed(){return this.hasAttribute(`collapsed`)}set collapsed(e){this.toggleAttribute(`collapsed`,e)}get theme(){let e=this.getAttribute(`theme`);return e===`light`||e===`dark`?e:null}set theme(e){e==null?this.removeAttribute(`theme`):this.setAttribute(`theme`,e)}toggle(){this.collapsible&&(this.collapsed=!this.collapsed,this.dispatchEvent(new CustomEvent(`slicc-lick-toggle`,{detail:{collapsed:this.collapsed},bubbles:!0,composed:!0})))}#r(){let e=this.kind??``,t=this.count,n=this.getAttribute(`hue`);n?(this.style.setProperty(`--lick-pill`,n),this.style.setProperty(`--lick-pill-ink`,`#fff`)):(this.style.removeProperty(`--lick-pill`),this.style.removeProperty(`--lick-pill-ink`));let r=this.eventLabel??wr,i=t>1?`${r} ×${t}`:r,a=this.body,o=this.collapsible,s=e?`lick ${kr} ${e}`:`lick ${kr}`,c=K(`span`,{class:`bell`,part:`bell`,"aria-hidden":!0});c.append(J(Dr(e),{size:Cr}));let l={class:`lh`,part:`header`};o&&(l.tabindex=`0`,l.role=`button`,l[`aria-expanded`]=this.collapsed?`false`:`true`);let u=K(`div`,{class:`lick`,part:`card`},K(`div`,l,c,` `,K(`span`,{class:`kind`,part:`kind`},`${s} `),K(`span`,{class:`lk`,part:`event`},i)),K(`div`,{class:`lb`,part:`body`},a??K(`slot`)));this.#e.replaceChildren(u),this.#i()}#i(){if(this.#a(),!this.collapsible)return;let e=this.#e.querySelector(`.lh`);e&&(this.#t=()=>this.toggle(),this.#n=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.toggle())},e.addEventListener(`click`,this.#t),e.addEventListener(`keydown`,this.#n))}#a(){let e=this.#e.querySelector(`.lh`);e&&this.#t&&e.removeEventListener(`click`,this.#t),e&&this.#n&&e.removeEventListener(`keydown`,this.#n),this.#t=null,this.#n=null}});var Ar=`
|
|
823
|
+
slicc-tool-cluster {
|
|
824
|
+
display: block;
|
|
825
|
+
margin: -2px 0 16px;
|
|
826
|
+
font-family: var(--ui);
|
|
827
|
+
/* Re-derive the accent so it tracks the locally inherited --ctx. */
|
|
828
|
+
--accent: color-mix(in srgb, var(--ctx) 55%, var(--ink));
|
|
829
|
+
}
|
|
830
|
+
slicc-tool-cluster .slicc-cluster__head {
|
|
831
|
+
display: flex;
|
|
832
|
+
align-items: center;
|
|
833
|
+
gap: 8px;
|
|
834
|
+
width: 100%;
|
|
835
|
+
background: none;
|
|
836
|
+
border: 1px solid transparent;
|
|
837
|
+
border-radius: 9px;
|
|
838
|
+
padding: 7px 10px;
|
|
839
|
+
font: inherit;
|
|
840
|
+
font-size: 12px;
|
|
841
|
+
color: var(--txt-2);
|
|
842
|
+
cursor: pointer;
|
|
843
|
+
text-align: left;
|
|
844
|
+
transition: background 0.15s;
|
|
845
|
+
}
|
|
846
|
+
slicc-tool-cluster .slicc-cluster__head:hover {
|
|
847
|
+
background: var(--ghost);
|
|
848
|
+
}
|
|
849
|
+
slicc-tool-cluster .slicc-cluster__head:focus-visible {
|
|
850
|
+
outline: 2px solid var(--ctx);
|
|
851
|
+
outline-offset: 1px;
|
|
852
|
+
}
|
|
853
|
+
slicc-tool-cluster .slicc-cluster__ic {
|
|
854
|
+
width: 18px;
|
|
855
|
+
height: 18px;
|
|
856
|
+
border-radius: 5px;
|
|
857
|
+
display: grid;
|
|
858
|
+
place-items: center;
|
|
859
|
+
color: var(--canvas);
|
|
860
|
+
background: var(--accent);
|
|
861
|
+
flex: 0 0 auto;
|
|
862
|
+
}
|
|
863
|
+
slicc-tool-cluster .slicc-cluster__label {
|
|
864
|
+
color: var(--ink);
|
|
865
|
+
font-weight: 500;
|
|
866
|
+
overflow: hidden;
|
|
867
|
+
text-overflow: ellipsis;
|
|
868
|
+
white-space: nowrap;
|
|
869
|
+
}
|
|
870
|
+
slicc-tool-cluster .slicc-cluster__count {
|
|
871
|
+
margin-left: auto;
|
|
872
|
+
color: var(--txt-3);
|
|
873
|
+
flex: 0 0 auto;
|
|
874
|
+
}
|
|
875
|
+
slicc-tool-cluster .slicc-cluster__chev {
|
|
876
|
+
color: var(--txt-3);
|
|
877
|
+
transition: transform 0.15s;
|
|
878
|
+
flex: 0 0 auto;
|
|
879
|
+
}
|
|
880
|
+
slicc-tool-cluster[open] .slicc-cluster__chev {
|
|
881
|
+
transform: rotate(90deg);
|
|
882
|
+
}
|
|
883
|
+
/* The collapsed body keeps its rows in the DOM (state survives) but hidden;
|
|
884
|
+
expanded, the rows indent behind a context-accent rail. */
|
|
885
|
+
slicc-tool-cluster .slicc-cluster__body {
|
|
886
|
+
display: none;
|
|
887
|
+
margin: 2px 0 0 12px;
|
|
888
|
+
padding-left: 12px;
|
|
889
|
+
border-left: 2px solid color-mix(in srgb, var(--ctx) 35%, var(--line));
|
|
890
|
+
}
|
|
891
|
+
slicc-tool-cluster[open] .slicc-cluster__body {
|
|
892
|
+
display: block;
|
|
893
|
+
}
|
|
894
|
+
/* Rows inside the cluster drop their own bottom gap — the cluster owns it. */
|
|
895
|
+
slicc-tool-cluster .slicc-cluster__body slicc-action-row {
|
|
896
|
+
margin-bottom: 4px;
|
|
897
|
+
}
|
|
898
|
+
`,jr=`slicc-tool-cluster-style`;function Mr(e){if(e.getElementById(jr))return;let t=e.createElement(`style`);t.id=jr,t.textContent=Ar,(e.head??e.documentElement).appendChild(t)}var Nr=`A few quick steps`;W(`slicc-tool-cluster`,class extends HTMLElement{static observedAttributes=[`open`,`label`,`count`];#e;#t;#n;#r;#i=!1;#a=()=>{this.open=!this.open};connectedCallback(){Mr(this.ownerDocument),this.#o(),this.#s()}disconnectedCallback(){this.#e?.removeEventListener(`click`,this.#a)}attributeChangedCallback(e,t,n){t===n||!this.#i||(e===`open`?(this.#e.setAttribute(`aria-expanded`,String(n!==null)),this.dispatchEvent(new CustomEvent(`slicc-tool-cluster-toggle`,{bubbles:!0,composed:!0,detail:{open:n!==null}}))):this.#s())}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get label(){return this.getAttribute(`label`)??Nr}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get count(){let e=Number.parseInt(this.getAttribute(`count`)??``,10);return Number.isFinite(e)&&e>0?e:0}set count(e){e>0?this.setAttribute(`count`,String(e)):this.removeAttribute(`count`)}get body(){return this.#o(),this.#r}append(...e){this.#o(),this.#r.append(...e),this.#s()}#o(){if(this.#i)return;this.#i=!0;let e=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLElement&&e.classList.contains(`slicc-cluster__head`))&&!(e instanceof HTMLElement&&e.classList.contains(`slicc-cluster__body`)));this.#e=this.ownerDocument.createElement(`button`),this.#e.type=`button`,this.#e.className=`slicc-cluster__head`,this.#e.setAttribute(`part`,`head`),this.#t=K(`span`,{class:`slicc-cluster__label`,part:`label`}),this.#n=K(`span`,{class:`slicc-cluster__count`,part:`count`}),G(this.#e,[K(`span`,{class:`slicc-cluster__ic`,part:`icon`},J(`layers`,{size:12})),this.#t,this.#n,K(`span`,{class:`slicc-cluster__chev`,part:`chevron`,"aria-hidden":`true`},`▸`)]),this.#r=this.ownerDocument.createElement(`div`),this.#r.className=`slicc-cluster__body`,this.#r.setAttribute(`part`,`body`);for(let t of e)this.#r.appendChild(t);this.replaceChildren(this.#e,this.#r),this.#e.addEventListener(`click`,this.#a)}#s(){if(!this.#i)return;this.#t.textContent=this.label;let e=this.count||this.#r.children.length;this.#n.textContent=e>0?`${e} steps`:``,this.#e.setAttribute(`aria-expanded`,String(this.open))}});var Pr=q(`
|
|
899
|
+
:host{display:block;margin-bottom:18px;font-family:var(--ui);font-size:15px;line-height:1.5;}
|
|
900
|
+
:host([hidden]){display:none;}
|
|
901
|
+
.msg{display:flex;justify-content:flex-end;}
|
|
902
|
+
.stack{display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:80%;}
|
|
903
|
+
.b{background:var(--deep);color:#fff;padding:10px 14px;border-radius:16px 16px 4px 16px;font-size:14px;max-width:100%;}
|
|
904
|
+
:host-context(body.dark) .b,
|
|
905
|
+
:host-context(.dark) .b,
|
|
906
|
+
:host-context([data-theme="dark"]) .b{color:#0a0a0a;}
|
|
907
|
+
/* markdown chrome inside the bubble — all currentColor-relative so it adapts to the theme flip */
|
|
908
|
+
.b > :first-child{margin-top:0;}
|
|
909
|
+
.b > :last-child{margin-bottom:0;}
|
|
910
|
+
.b p{margin:0 0 8px;}
|
|
911
|
+
.b strong,.b b{font-weight:600;}
|
|
912
|
+
.b a{color:inherit;text-decoration:underline;}
|
|
913
|
+
/* Code inside the dark bubble: the wash leans on the active context accent
|
|
914
|
+
(--ctx) instead of plain currentColor; the text keeps the bubble's light
|
|
915
|
+
ink, so the translucent tint never costs contrast. */
|
|
916
|
+
.b code{font-family:var(--mono);font-size:12.5px;background:color-mix(in srgb,var(--ctx) 32%,transparent);border-radius:6px;padding:1px 6px;}
|
|
917
|
+
.b pre{margin:8px 0;background:color-mix(in srgb,var(--ctx) 22%,transparent);border-left:3px solid color-mix(in srgb,var(--ctx) 60%,transparent);border-radius:8px;padding:9px 11px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.55;white-space:pre-wrap;}
|
|
918
|
+
.b pre code{background:none;padding:0;border-radius:0;font-size:inherit;}
|
|
919
|
+
.b ul,.b ol{margin:6px 0;padding-left:1.3em;}
|
|
920
|
+
.b li{margin:2px 0;}
|
|
921
|
+
.b blockquote{margin:6px 0;border-left:3px solid color-mix(in srgb,currentColor 45%,transparent);padding-left:10px;}
|
|
922
|
+
.b h1,.b h2,.b h3,.b h4{margin:8px 0 4px;font-weight:700;line-height:1.25;}
|
|
923
|
+
.b h1{font-size:18px;}.b h2{font-size:16px;}.b h3,.b h4{font-size:14px;}
|
|
924
|
+
/* attachment chips — mirror the webapp's .attachment-chip structure */
|
|
925
|
+
.attachments{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
|
|
926
|
+
.attachment-chip{display:inline-flex;align-items:center;gap:8px;max-width:240px;padding:6px 9px;border:1px solid var(--line);border-radius:10px;background:var(--ghost);font-family:var(--ui);}
|
|
927
|
+
.attachment-chip__visual{display:inline-flex;flex:0 0 auto;width:30px;height:30px;border-radius:7px;overflow:hidden;align-items:center;justify-content:center;background:var(--bg);color:var(--txt-2);}
|
|
928
|
+
.attachment-chip__visual img{width:100%;height:100%;object-fit:cover;display:block;}
|
|
929
|
+
.attachment-chip__visual svg{display:block;}
|
|
930
|
+
.attachment-chip__body{display:flex;flex-direction:column;min-width:0;}
|
|
931
|
+
.attachment-chip__name{font-size:12px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
932
|
+
.attachment-chip__meta{font-size:10.5px;color:var(--txt-3);}
|
|
933
|
+
/* Queued (not yet sent — the agent is mid-turn): the bubble dims and a small
|
|
934
|
+
clock tag sits under it, so pending input reads distinctly from sent input. */
|
|
935
|
+
:host([queued]) .b{opacity:.62;}
|
|
936
|
+
.queued-tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;color:var(--txt-3);}
|
|
937
|
+
.queued-tag svg{display:block;}
|
|
938
|
+
`),Fr={image:`image`,text:`file-text`,file:`file`};function Ir(e){return e<1024?`${e} B`:e<1024*1024?`${(e/1024).toFixed(1)} KB`:`${(e/(1024*1024)).toFixed(1)} MB`}W(`slicc-user-message`,class extends HTMLElement{static observedAttributes=[`text`,`queued`];#e;#t=null;#n=[];constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Pr]}connectedCallback(){this.#a()}attributeChangedCallback(){this.isConnected&&this.#a()}get text(){return this.getAttribute(`text`)}set text(e){e==null?this.removeAttribute(`text`):this.setAttribute(`text`,e)}get queued(){return this.hasAttribute(`queued`)}set queued(e){this.toggleAttribute(`queued`,e)}setBodyHtml(e){this.#t=e,this.#a()}setAttachments(e){this.#n=e.slice(),this.#a()}#r(){if(this.#t!=null)return this.ownerDocument.createRange().createContextualFragment(this.#t);let e=this.text;return e==null?K(`slot`):this.ownerDocument.createTextNode(e)}#i(e){let t=e.kind??`file`,n=K(`span`,{class:`attachment-chip__visual`});t===`image`&&e.src?n.append(K(`img`,{src:e.src,alt:e.name||`Attached image`})):n.append(J(Fr[t],{size:16}));let r=e.size==null?e.mime:`${e.mime||`file`} · ${Ir(e.size)}`,i=K(`span`,{class:`attachment-chip__body`},K(`span`,{class:`attachment-chip__name`},e.name),r?K(`span`,{class:`attachment-chip__meta`},r):null);return K(`div`,{class:`attachment-chip attachment-chip--${t}`},n,i)}#a(){let e=this.#n.length>0,t=this.text!=null||this.#t!=null,n=this.childNodes.length>0,r=t||n||!e,i=K(`div`,{class:`stack`,part:`stack`});if(e){let e=K(`div`,{class:`attachments`,part:`attachments`});for(let t of this.#n)e.append(this.#i(t));i.append(e)}r&&i.append(K(`div`,{class:`b`,part:`bubble`},this.#r())),this.queued&&i.append(K(`span`,{class:`queued-tag`,part:`queued`},J(`clock`,{size:11}),`queued`));let a=K(`div`,{class:`msg user`,part:`message`},i);this.#e.replaceChildren(a)}});var Lr=`
|
|
939
|
+
slicc-composer {
|
|
940
|
+
flex: 0 0 auto;
|
|
941
|
+
display: block;
|
|
942
|
+
box-sizing: border-box;
|
|
943
|
+
font-family: var(--ui);
|
|
944
|
+
border-top: 1px solid var(--line);
|
|
945
|
+
background: color-mix(in srgb, var(--ctx) 12%, color-mix(in srgb, var(--bg) 68%, transparent));
|
|
946
|
+
backdrop-filter: blur(18px) saturate(1.4);
|
|
947
|
+
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
|
948
|
+
padding: 14px 16px 14px;
|
|
949
|
+
position: relative;
|
|
950
|
+
z-index: 2;
|
|
951
|
+
}
|
|
952
|
+
slicc-composer[hidden] {
|
|
953
|
+
display: none;
|
|
954
|
+
}
|
|
955
|
+
slicc-composer > .slicc-composer__inner {
|
|
956
|
+
box-sizing: border-box;
|
|
957
|
+
max-width: 680px;
|
|
958
|
+
margin: 0 auto;
|
|
959
|
+
}
|
|
960
|
+
/* narrow-chat (.shell.open): keep just model + thinking — drop the keyboard hint.
|
|
961
|
+
The composed <slicc-composer-meta> keeps its hint in shadow DOM, so the
|
|
962
|
+
light-DOM class hooks can't reach it — pierce via its exported part too,
|
|
963
|
+
or the "⏎ send · ⇧⏎ newline" line overflows the narrowed chat column
|
|
964
|
+
straight into the workbench pane. */
|
|
965
|
+
slicc-composer[open] .slicc-composer__hint,
|
|
966
|
+
slicc-composer[open] [data-composer-hint],
|
|
967
|
+
slicc-composer[open] slicc-composer-meta::part(hint) {
|
|
968
|
+
display: none;
|
|
969
|
+
}
|
|
970
|
+
|
|
971
|
+
/* Push-to-talk "walkie-talkie" overlay. While the pointer is held on the
|
|
972
|
+
textarea the band turns into one big active push button: a centered mic over
|
|
973
|
+
the frosted band, a dictation prompt, and a (simulated) model-load progress
|
|
974
|
+
bar. The overlay is a direct host child (not the 680px inner band) so it
|
|
975
|
+
covers the whole footer, and sits above it via z-index. */
|
|
976
|
+
slicc-composer .slicc-composer__ptt {
|
|
977
|
+
position: absolute;
|
|
978
|
+
inset: 0;
|
|
979
|
+
z-index: 3;
|
|
980
|
+
display: flex;
|
|
981
|
+
flex-direction: column;
|
|
982
|
+
align-items: center;
|
|
983
|
+
justify-content: center;
|
|
984
|
+
gap: 10px;
|
|
985
|
+
box-sizing: border-box;
|
|
986
|
+
padding: 16px;
|
|
987
|
+
text-align: center;
|
|
988
|
+
cursor: pointer;
|
|
989
|
+
user-select: none;
|
|
990
|
+
-webkit-user-select: none;
|
|
991
|
+
color: var(--ink);
|
|
992
|
+
background: color-mix(in srgb, var(--ctx) 22%, color-mix(in srgb, var(--bg) 82%, transparent));
|
|
993
|
+
backdrop-filter: blur(10px) saturate(1.4);
|
|
994
|
+
-webkit-backdrop-filter: blur(10px) saturate(1.4);
|
|
995
|
+
}
|
|
996
|
+
slicc-composer .slicc-composer__ptt-mic {
|
|
997
|
+
display: flex;
|
|
998
|
+
align-items: center;
|
|
999
|
+
justify-content: center;
|
|
1000
|
+
width: 56px;
|
|
1001
|
+
height: 56px;
|
|
1002
|
+
border-radius: 50%;
|
|
1003
|
+
color: var(--ctx);
|
|
1004
|
+
background: color-mix(in srgb, var(--ctx) 16%, transparent);
|
|
1005
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctx) 32%, transparent);
|
|
1006
|
+
}
|
|
1007
|
+
slicc-composer .slicc-composer__ptt-label {
|
|
1008
|
+
font-family: var(--ui);
|
|
1009
|
+
font-size: 15px;
|
|
1010
|
+
font-weight: 600;
|
|
1011
|
+
}
|
|
1012
|
+
slicc-composer .slicc-composer__ptt-load {
|
|
1013
|
+
display: flex;
|
|
1014
|
+
flex-direction: column;
|
|
1015
|
+
align-items: center;
|
|
1016
|
+
gap: 6px;
|
|
1017
|
+
width: min(280px, 70%);
|
|
1018
|
+
}
|
|
1019
|
+
slicc-composer .slicc-composer__ptt-load-text {
|
|
1020
|
+
font-family: var(--ui);
|
|
1021
|
+
font-size: 12px;
|
|
1022
|
+
color: var(--txt-2);
|
|
1023
|
+
}
|
|
1024
|
+
slicc-composer .slicc-composer__ptt-bar {
|
|
1025
|
+
width: 100%;
|
|
1026
|
+
height: 6px;
|
|
1027
|
+
border-radius: 999px;
|
|
1028
|
+
overflow: hidden;
|
|
1029
|
+
background: color-mix(in srgb, var(--ink) 12%, transparent);
|
|
1030
|
+
}
|
|
1031
|
+
slicc-composer .slicc-composer__ptt-bar-fill {
|
|
1032
|
+
width: 100%;
|
|
1033
|
+
height: 100%;
|
|
1034
|
+
border-radius: inherit;
|
|
1035
|
+
transform-origin: left center;
|
|
1036
|
+
background: var(--ctx);
|
|
1037
|
+
animation-name: slicc-ptt-load;
|
|
1038
|
+
animation-duration: 1.2s;
|
|
1039
|
+
animation-timing-function: ease-out;
|
|
1040
|
+
animation-fill-mode: forwards;
|
|
1041
|
+
}
|
|
1042
|
+
/* Listening affordance: model ready — drop the loader, pulse the mic so the big
|
|
1043
|
+
button reads as actively recording. */
|
|
1044
|
+
slicc-composer .slicc-composer__ptt.is-listening .slicc-composer__ptt-load {
|
|
1045
|
+
display: none;
|
|
1046
|
+
}
|
|
1047
|
+
slicc-composer .slicc-composer__ptt.is-listening .slicc-composer__ptt-mic {
|
|
1048
|
+
animation-name: slicc-ptt-pulse;
|
|
1049
|
+
animation-duration: 1.1s;
|
|
1050
|
+
animation-timing-function: ease-in-out;
|
|
1051
|
+
animation-iteration-count: infinite;
|
|
1052
|
+
}
|
|
1053
|
+
@keyframes slicc-ptt-load {
|
|
1054
|
+
from { transform: scaleX(0); }
|
|
1055
|
+
to { transform: scaleX(1); }
|
|
1056
|
+
}
|
|
1057
|
+
@keyframes slicc-ptt-pulse {
|
|
1058
|
+
0%, 100% { transform: scale(1); }
|
|
1059
|
+
50% { transform: scale(1.08); }
|
|
1060
|
+
}
|
|
1061
|
+
/* Reduced motion: no progress sweep and no mic pulse — hold the static ready
|
|
1062
|
+
state (the fill sits full) while the gesture stays fully functional. */
|
|
1063
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1064
|
+
slicc-composer .slicc-composer__ptt-bar-fill {
|
|
1065
|
+
animation-name: none;
|
|
1066
|
+
transform: scaleX(1);
|
|
1067
|
+
}
|
|
1068
|
+
slicc-composer .slicc-composer__ptt.is-listening .slicc-composer__ptt-mic {
|
|
1069
|
+
animation-name: none;
|
|
1070
|
+
}
|
|
1071
|
+
}
|
|
1072
|
+
`,Rr=`slicc-composer-style`,zr=`Make the landing hero feel warmer, and add a clear call to action above the fold.`;function Br(e){if(e.getElementById(Rr))return;let t=e.createElement(`style`);t.id=Rr,t.textContent=Lr,(e.head??e.documentElement).appendChild(t)}W(`slicc-composer`,class extends HTMLElement{static observedAttributes=[`open`];#e;#t=!1;#n=null;#r=!1;#i=null;connectedCallback(){Br(this.ownerDocument),this.#a(),this.addEventListener(`mousedown`,this.#o)}disconnectedCallback(){this.removeEventListener(`mousedown`,this.#o),this.#u(!1)}attributeChangedCallback(){}get open(){return this.hasAttribute(`open`)}set open(e){e?this.setAttribute(`open`,``):this.removeAttribute(`open`)}get inner(){return this.#a(),this.#e}append(...e){this.#a(),this.#e.append(...e)}#a(){if(this.#t)return;this.#t=!0;let e=this.querySelector(`:scope > .slicc-composer__inner`);if(e instanceof HTMLElement){this.#e=e;return}let t=Array.from(this.childNodes);this.#e=this.ownerDocument.createElement(`div`),this.#e.className=`slicc-composer__inner`,this.#e.setAttribute(`part`,`inner`);for(let e of t)this.#e.appendChild(e);this.appendChild(this.#e)}#o=e=>{if(!this.hasAttribute(`ptt`)||this.#r||e.button!==0)return;let t=e.target?.closest?.(`textarea`);!(t instanceof HTMLTextAreaElement)||!this.contains(t)||(e.preventDefault(),this.#r=!0,this.#i=t,this.#n=this.#d(),this.appendChild(this.#n),this.ownerDocument.addEventListener(`mouseup`,this.#c),this.addEventListener(`mouseleave`,this.#l),typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches?this.#s():this.#n.querySelector(`.slicc-composer__ptt-bar-fill`)?.addEventListener(`animationend`,()=>this.#s(),{once:!0}))};#s(){!this.#r||!this.#n||(this.#n.classList.remove(`is-loading`),this.#n.classList.add(`is-listening`),this.#n.setAttribute(`aria-label`,`Listening — release to dictate`))}#c=()=>{this.#u(!0)};#l=()=>{this.#u(!1)};#u(e){if(!this.#r)return;this.#r=!1,this.ownerDocument.removeEventListener(`mouseup`,this.#c),this.removeEventListener(`mouseleave`,this.#l),this.#n?.remove(),this.#n=null;let t=this.#i;this.#i=null,e&&t&&(t.value=t.value?`${t.value} ${zr}`:zr,t.dispatchEvent(new Event(`input`,{bubbles:!0})),t.focus())}#d(){return K(`div`,{class:`slicc-composer__ptt is-loading`,"data-ptt":!0,role:`button`,"aria-pressed":`true`,"aria-label":`Push to talk to dictate`},K(`div`,{class:`slicc-composer__ptt-mic`},J(`mic`,{size:28})),K(`div`,{class:`slicc-composer__ptt-label`},`Keep mouse pressed to dictate`),K(`div`,{class:`slicc-composer__ptt-load`},K(`span`,{class:`slicc-composer__ptt-load-text`},`Loading speech recognition model`),K(`div`,{class:`slicc-composer__ptt-bar`},K(`div`,{class:`slicc-composer__ptt-bar-fill`}))))}});var Vr=[`off`,`low`,`medium`,`high`,`xhigh`,`max`],Hr={off:{label:`Secco`,gloss:`bone dry — not a drop (ask any prosecco)`,tint:`var(--txt-3)`},low:{label:`Goccia`,gloss:`one drop — bar-speak: «macchiato, solo una goccia»`,tint:`color-mix(in srgb, var(--violet) 20%, var(--txt-3))`},medium:{label:`Bagnato`,gloss:`properly wet`,tint:`color-mix(in srgb, var(--violet) 40%, var(--txt-3))`},high:{label:`Affogato`,gloss:`drowned — the menu item itself`,tint:`color-mix(in srgb, var(--violet) 60%, var(--txt-3))`},xhigh:{label:`Inzuppato`,gloss:`soaked through, biscotto-style`,tint:`color-mix(in srgb, var(--violet) 80%, var(--txt-3))`},max:{label:`Sprofondato`,gloss:`sunk to the bottom`,tint:`var(--violet)`}},Ur=`max`,Wr=`Opus 4.8`,Gr=[{name:`Opus 4.8`,provider:`Anthropic`,id:`claude-opus-4-8`},{name:`Sonnet 4.6`,provider:`Anthropic`,id:`claude-sonnet-4-6`},{name:`Haiku 4.5`,provider:`Anthropic`,id:`claude-haiku-4-5`}],Kr=8;function qr(e){let t=typeof e==`string`?{name:e}:e;return{...t,name:t.name,id:t.id??t.name}}var Jr=`max`,Yr=13;function Xr(){return J(`sparkles`,{size:Yr,class:`ic`,part:`model-icon`})}function Zr(){return J(`brain`,{size:Yr,class:`brain`,part:`brain`})}function Qr(){return J(`chevron-down`,{size:11,part:`caret`})}var $r=`http://www.w3.org/2000/svg`;function ei(){let e=document.createElementNS($r,`svg`);e.setAttribute(`width`,`0`),e.setAttribute(`height`,`0`),e.setAttribute(`aria-hidden`,`true`),e.setAttribute(`style`,`position:absolute`);let t=document.createElementNS($r,`defs`),n=document.createElementNS($r,`linearGradient`);n.setAttribute(`id`,`meta-rainbow`),n.setAttribute(`x1`,`0`),n.setAttribute(`y1`,`0`),n.setAttribute(`x2`,`1`),n.setAttribute(`y2`,`0`);for(let[e,t]of[[`0%`,`#f43f5e`],[`28%`,`#f59e0b`],[`64%`,`#06b6d4`],[`100%`,`#8b5cf6`]]){let r=document.createElementNS($r,`stop`);r.setAttribute(`offset`,e),r.setAttribute(`stop-color`,t),n.appendChild(r)}return t.appendChild(n),e.appendChild(t),e}var ti=q(`
|
|
1073
|
+
:host{display:block;}
|
|
1074
|
+
*{box-sizing:border-box;}
|
|
1075
|
+
.meta{display:flex;align-items:center;gap:8px;max-width:680px;margin:11px auto 0;font-family:var(--ui);}
|
|
1076
|
+
.ctl{height:var(--ctl-h,30px);border:1px solid var(--line);border-radius:8px;background:var(--canvas);color:var(--ink);font:inherit;font-size:12.5px;font-weight:500;padding:0 9px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;flex:0 0 auto;}
|
|
1077
|
+
.ctl:hover{background:var(--ghost);}
|
|
1078
|
+
.ctl .ic{display:block;vertical-align:-2px;flex:0 0 auto;stroke:url(#meta-rainbow);}
|
|
1079
|
+
.ctl .cx{color:var(--txt-3);font-size:10px;display:inline-flex;align-items:center;}
|
|
1080
|
+
.ctl .cx svg{display:block;}
|
|
1081
|
+
/* The thinking pill ramps as a whole with the effort intensity: its text,
|
|
1082
|
+
border, caret and a background wash are all derived from the per-level
|
|
1083
|
+
accent (--tw, set inline) — from a muted grey (Secco) up to full violet
|
|
1084
|
+
(Sprofondato). */
|
|
1085
|
+
.ctl.tsel{color:var(--tw,var(--ink));
|
|
1086
|
+
border-color:color-mix(in srgb,var(--tw,var(--line)) 40%,var(--line));
|
|
1087
|
+
background:color-mix(in srgb,var(--tw,transparent) 8%,var(--canvas));}
|
|
1088
|
+
.ctl.tsel:hover{background:color-mix(in srgb,var(--tw,transparent) 16%,var(--canvas));}
|
|
1089
|
+
.ctl.tsel .cx{color:inherit;opacity:.7;}
|
|
1090
|
+
.ctl.tsel.x{border-color:color-mix(in srgb,var(--tw) 55%,var(--line));
|
|
1091
|
+
background:color-mix(in srgb,var(--tw) 14%,var(--canvas));}
|
|
1092
|
+
.ctl.tsel.x:hover{background:color-mix(in srgb,var(--tw) 20%,var(--canvas));}
|
|
1093
|
+
.brain{color:var(--violet);display:block;vertical-align:-2px;flex:0 0 auto;}
|
|
1094
|
+
/* Model dropdown — anchored to the model pill and opening UPWARD (the meta row
|
|
1095
|
+
sits at the very bottom of the composer, so a downward menu would clip). */
|
|
1096
|
+
.mwrap{position:relative;flex:0 0 auto;display:inline-flex;}
|
|
1097
|
+
.ctl .cx svg{transition:transform .15s ease;}
|
|
1098
|
+
.mwrap.open .ctl .cx svg{transform:rotate(180deg);}
|
|
1099
|
+
.menu{position:absolute;bottom:calc(100% + 6px);left:0;min-width:170px;
|
|
1100
|
+
background:var(--canvas);border:1px solid var(--line);border-radius:10px;
|
|
1101
|
+
box-shadow:0 -10px 28px -10px rgba(10,10,10,.22),0 -2px 8px -4px rgba(10,10,10,.12);
|
|
1102
|
+
padding:5px;opacity:0;transform:translateY(4px);pointer-events:none;
|
|
1103
|
+
transition:opacity .12s ease,transform .12s ease;z-index:20;}
|
|
1104
|
+
.mwrap.open .menu{opacity:1;transform:none;pointer-events:auto;}
|
|
1105
|
+
/* type-ahead search (shown when the list is long) */
|
|
1106
|
+
.msearch{width:100%;box-sizing:border-box;margin:0 0 5px;padding:6px 9px;border:1px solid var(--line);
|
|
1107
|
+
border-radius:7px;background:var(--ghost);color:var(--ink);font:inherit;font-size:12.5px;outline:none;}
|
|
1108
|
+
.msearch:focus{border-color:var(--accent,#3b63fb);}
|
|
1109
|
+
.mlist{display:flex;flex-direction:column;max-height:240px;overflow-y:auto;}
|
|
1110
|
+
.mitem{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:none;
|
|
1111
|
+
background:transparent;color:var(--ink);font:inherit;font-size:12.5px;border-radius:7px;
|
|
1112
|
+
cursor:pointer;text-align:left;white-space:nowrap;}
|
|
1113
|
+
.mitem:hover,.mitem:focus-visible{background:var(--ghost);outline:none;}
|
|
1114
|
+
.mitem .mname{min-width:0;overflow:hidden;text-overflow:ellipsis;}
|
|
1115
|
+
.mitem .mprov{margin-left:6px;color:var(--txt-3);font-size:11px;}
|
|
1116
|
+
.mitem .tick{margin-left:auto;display:inline-flex;color:var(--violet);visibility:hidden;}
|
|
1117
|
+
.mitem[aria-selected="true"] .tick{visibility:visible;}
|
|
1118
|
+
.mempty{padding:10px;color:var(--txt-3);font-size:12px;text-align:center;}
|
|
1119
|
+
@media (prefers-reduced-motion: reduce){.menu,.ctl .cx svg{transition:none;}}
|
|
1120
|
+
.mspacer{flex:1;}
|
|
1121
|
+
.hint{font-size:11px;color:var(--txt-3);display:inline-flex;align-items:center;gap:7px;}
|
|
1122
|
+
.hint .kbd{font-family:var(--ui);border:1px solid var(--line);border-radius:5px;padding:1px 6px;color:var(--txt-2);}
|
|
1123
|
+
.hint .sep{width:3px;height:3px;border-radius:50%;background:var(--line);}
|
|
1124
|
+
:host([narrow]) .hint{display:none;}
|
|
1125
|
+
/* Narrow / extension-sidebar: the ⏎ / ⇧⏎ keyboard hints don't fit (and touch
|
|
1126
|
+
users have no keyboard) — drop them regardless of the narrow-chat attribute. */
|
|
1127
|
+
@media (max-width: 560px){ .hint{display:none;} }
|
|
1128
|
+
`);W(`slicc-composer-meta`,class extends HTMLElement{static observedAttributes=[`model`,`thinking`,`narrow`,`no-thinking`];#e;#t=null;#n=null;#r=null;#i=null;#a=null;#o=null;#s=null;#c=!1;#l=``;#u=e=>{this.#c&&!e.composedPath().includes(this)&&this.#b()};#d=e=>{e.key===`Escape`&&this.#c&&(e.stopPropagation(),this.#b(),this.#r?.focus())};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ti]}connectedCallback(){this.#m()}disconnectedCallback(){this.#_(),document.removeEventListener(`mousedown`,this.#u),document.removeEventListener(`keydown`,this.#d,!0)}attributeChangedCallback(){this.isConnected&&this.#m()}get model(){return this.getAttribute(`model`)??Wr}set model(e){e==null?this.removeAttribute(`model`):this.setAttribute(`model`,e)}get models(){return(this.#s??[...Gr]).map(e=>typeof e==`string`?e:{...e})}set models(e){this.#s=Array.isArray(e)?e.slice():null,this.isConnected&&this.#m()}get#f(){return(this.#s??Gr).map(qr)}get#p(){return this.#s!==null&&this.#s.length===0}get thinking(){let e=this.getAttribute(`thinking`);return Vr.includes(e??``)?e:Jr}set thinking(e){this.setAttribute(`thinking`,e)}get narrow(){return this.hasAttribute(`narrow`)}set narrow(e){this.toggleAttribute(`narrow`,e)}get noThinking(){return this.hasAttribute(`no-thinking`)}set noThinking(e){this.toggleAttribute(`no-thinking`,e)}get accented(){return this.thinking===Ur}#m(){this.#_();let e=this.model,t=this.thinking,n=Hr[t],r=t===Ur,i=this.#p,a=i?K(`button`,{type:`button`,class:`ctl msel`,part:`model`},Xr(),` `,`Add AI`):K(`button`,{type:`button`,class:`ctl msel`,part:`model`,"aria-haspopup":`menu`,"aria-expanded":`false`},Xr(),` `,e,` `,K(`span`,{class:`cx`},Qr())),o=K(`div`,{class:`menu`,part:`model-menu`,role:`menu`});if(this.#f.length>Kr){let e=K(`input`,{class:`msearch`,part:`model-search`,type:`text`,placeholder:`Search models…`,"aria-label":`Search models`});e.value=this.#l,e.addEventListener(`input`,()=>{this.#l=e.value,this.#h()}),e.addEventListener(`click`,e=>e.stopPropagation()),o.append(e)}this.#o=K(`div`,{class:`mlist`,role:`none`}),o.append(this.#o);let s=K(`div`,{class:`mwrap`},a,o),c=!this.noThinking&&!i,l=null;if(c){let e=Zr();e.style.color=n.tint,l=K(`button`,{type:`button`,class:`ctl tsel${r?` x`:``}`,part:`thinking`,title:n.gloss},e,` `,K(`span`,{class:`tlabel`},n.label),` `,K(`span`,{class:`cx`},Qr())),l.style.setProperty(`--tw`,n.tint)}let u=K(`slot`,{name:`hint`});G(u,[K(`span`,{class:`kbd`},`⏎`),` send `,K(`span`,{class:`sep`}),` `,K(`span`,{class:`kbd`},`⇧⏎`),` newline`]);let d=K(`div`,{class:`meta`,part:`meta`},s,l??!1,K(`div`,{class:`mspacer`}),K(`span`,{class:`hint`,part:`hint`},u));this.#e.replaceChildren(ei(),d),this.#a=s,this.#r=this.#e.querySelector(`.msel`),this.#i=this.#e.querySelector(`.tsel`),this.#h(),this.#x(),this.#g()}#h(){let e=this.#o;if(!e)return;let t=this.#l.trim().toLowerCase(),n=this.#f.filter(e=>!t||`${e.name} ${e.provider??``}`.toLowerCase().includes(t)),r=this.model,i=[];for(let e of n){let t=e.name===r,n=K(`button`,{type:`button`,class:`mitem`,role:`menuitemradio`,"data-id":e.id,"aria-selected":t?`true`:`false`},K(`span`,{class:`mname`},e.name),e.provider?K(`span`,{class:`mprov`},e.provider):!1,K(`span`,{class:`tick`},J(`check`,{size:14})));n.addEventListener(`click`,()=>this.#S(e.id)),i.push(n)}e.replaceChildren(...i.length?i:[K(`div`,{class:`mempty`},`No models match.`)])}#g(){this.#r&&(this.#t=e=>{if(e.stopPropagation(),this.#p){this.dispatchEvent(new CustomEvent(`add-ai`,{bubbles:!0,composed:!0}));return}this.#v()},this.#r.addEventListener(`click`,this.#t)),this.#i&&(this.#n=()=>this.#C(),this.#i.addEventListener(`click`,this.#n))}#_(){this.#r&&this.#t&&this.#r.removeEventListener(`click`,this.#t),this.#i&&this.#n&&this.#i.removeEventListener(`click`,this.#n),this.#t=null,this.#n=null,this.#r=null,this.#i=null,this.#a=null,this.#o=null}get menuOpen(){return this.#c}#v(){this.#c?this.#b():this.#y()}#y(){if(this.#c)return;this.#c=!0,this.#l=``,this.#h(),this.#x();let e=this.#e.querySelector(`.msearch`);e&&(e.value=``,requestAnimationFrame(()=>e.focus())),document.addEventListener(`mousedown`,this.#u),document.addEventListener(`keydown`,this.#d,!0)}#b(){this.#c&&(this.#c=!1,this.#x(),document.removeEventListener(`mousedown`,this.#u),document.removeEventListener(`keydown`,this.#d,!0))}#x(){this.#a?.classList.toggle(`open`,this.#c),this.#r?.setAttribute(`aria-expanded`,this.#c?`true`:`false`)}#S(e){let t=this.#f.find(t=>t.id===e)??{name:e,id:e,provider:void 0};this.#b(),t.name!==this.model&&(this.model=t.name),this.dispatchEvent(new CustomEvent(`model-change`,{detail:{model:t.name,provider:t.provider,id:t.id},bubbles:!0,composed:!0}))}#C(){let e=Vr[(Vr.indexOf(this.thinking)+1)%Vr.length];this.thinking=e,this.dispatchEvent(new CustomEvent(`thinking-change`,{detail:{thinking:e,label:Hr[e].label,accented:e===Ur},bubbles:!0,composed:!0}))}});async function ni(e){let t=new TextEncoder().encode(e),n=await crypto.subtle.digest(`SHA-256`,t);return Array.from(new Uint8Array(n)).map(e=>e.toString(16).padStart(2,`0`)).join(``)}async function ri(e,t={}){let n=(e??``).trim().toLowerCase();if(n===``)return null;let r=await ni(n),i=t.size??80,a=t.fallback??`mp`;return`https://www.gravatar.com/avatar/${r}?s=${i}&d=${encodeURIComponent(a)}`}var ii=q(`
|
|
1129
|
+
:host { display: inline-flex; }
|
|
1130
|
+
:host([hidden]) { display: none; }
|
|
1131
|
+
|
|
1132
|
+
.send {
|
|
1133
|
+
position: relative;
|
|
1134
|
+
width: 36px;
|
|
1135
|
+
height: 36px;
|
|
1136
|
+
border-radius: 9999px;
|
|
1137
|
+
border: none;
|
|
1138
|
+
cursor: pointer;
|
|
1139
|
+
background: var(--rainbow);
|
|
1140
|
+
color: #fff;
|
|
1141
|
+
font-family: var(--ui);
|
|
1142
|
+
display: grid;
|
|
1143
|
+
place-items: center;
|
|
1144
|
+
padding: 0;
|
|
1145
|
+
line-height: 1;
|
|
1146
|
+
overflow: hidden;
|
|
1147
|
+
isolation: isolate;
|
|
1148
|
+
}
|
|
1149
|
+
.send:hover:not(:disabled) { filter: brightness(1.06); }
|
|
1150
|
+
.send:disabled { cursor: not-allowed; opacity: 0.45; }
|
|
1151
|
+
|
|
1152
|
+
/*
|
|
1153
|
+
* Avatar / gravatar face: an email or src paints the user's picture as the
|
|
1154
|
+
* circular ground (behind the icon). When absent, the rainbow gradient above
|
|
1155
|
+
* shows through. A soft scrim darkens the face so the white glyph stays legible.
|
|
1156
|
+
*/
|
|
1157
|
+
.face {
|
|
1158
|
+
position: absolute;
|
|
1159
|
+
inset: 0;
|
|
1160
|
+
border-radius: inherit;
|
|
1161
|
+
object-fit: cover;
|
|
1162
|
+
width: 100%;
|
|
1163
|
+
height: 100%;
|
|
1164
|
+
z-index: 0;
|
|
1165
|
+
pointer-events: none;
|
|
1166
|
+
}
|
|
1167
|
+
.send.has-face::after {
|
|
1168
|
+
content: "";
|
|
1169
|
+
position: absolute;
|
|
1170
|
+
inset: 0;
|
|
1171
|
+
border-radius: inherit;
|
|
1172
|
+
background: rgba(0, 0, 0, 0.32);
|
|
1173
|
+
z-index: 1;
|
|
1174
|
+
pointer-events: none;
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
/* The glyph layer rides above the face + scrim. */
|
|
1178
|
+
.glyph,
|
|
1179
|
+
.stop {
|
|
1180
|
+
position: relative;
|
|
1181
|
+
z-index: 2;
|
|
1182
|
+
display: grid;
|
|
1183
|
+
place-items: center;
|
|
1184
|
+
pointer-events: none;
|
|
1185
|
+
color: #fff;
|
|
1186
|
+
}
|
|
1187
|
+
.glyph svg,
|
|
1188
|
+
.stop svg { display: block; }
|
|
1189
|
+
|
|
1190
|
+
/*
|
|
1191
|
+
* Idle micro-interactions on the arrow glyph, driven by JS-toggled classes so
|
|
1192
|
+
* they stay deterministic + testable (the browser's :hover / :active states are
|
|
1193
|
+
* not synthesizable from script). On hover the arrow wiggles in anticipation;
|
|
1194
|
+
* on press it dips down a couple px (preparing to leap); release fires the
|
|
1195
|
+
* 'whoosh' fly-out below. The is-hover wiggle yields to is-whoosh via :not().
|
|
1196
|
+
*/
|
|
1197
|
+
.glyph.is-hover:not(.is-whoosh) {
|
|
1198
|
+
animation: slicc-send-wiggle 720ms ease-in-out infinite;
|
|
1199
|
+
}
|
|
1200
|
+
.glyph.is-press:not(.is-whoosh) {
|
|
1201
|
+
animation: none;
|
|
1202
|
+
transform: translateY(2px);
|
|
1203
|
+
}
|
|
1204
|
+
@keyframes slicc-send-wiggle {
|
|
1205
|
+
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
1206
|
+
25% { transform: translateY(-1px) rotate(-7deg); }
|
|
1207
|
+
75% { transform: translateY(-1px) rotate(7deg); }
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
/*
|
|
1211
|
+
* 'Whoosh up' on send: the arrow translates up and fades, then resets. Toggled
|
|
1212
|
+
* as a class from JS on click and removed on \`animationend\` so it re-fires
|
|
1213
|
+
* every send and stays testable.
|
|
1214
|
+
*/
|
|
1215
|
+
.glyph.is-whoosh { animation: slicc-send-whoosh 360ms cubic-bezier(0.4, 0, 0.2, 1) both; }
|
|
1216
|
+
@keyframes slicc-send-whoosh {
|
|
1217
|
+
0% { transform: translateY(0); opacity: 1; }
|
|
1218
|
+
55% { transform: translateY(-14px); opacity: 0; }
|
|
1219
|
+
56% { transform: translateY(8px); opacity: 0; }
|
|
1220
|
+
100% { transform: translateY(0); opacity: 1; }
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
/*
|
|
1224
|
+
* Busy 'surprise' glyph: the stop square breathes with a soft pulse so the
|
|
1225
|
+
* streaming state reads as alive without being distracting.
|
|
1226
|
+
*/
|
|
1227
|
+
.send.is-busy .stop { animation: slicc-send-pulse 1.6s ease-in-out infinite; }
|
|
1228
|
+
@keyframes slicc-send-pulse {
|
|
1229
|
+
0%, 100% { transform: scale(1); opacity: 0.92; }
|
|
1230
|
+
50% { transform: scale(1.14); opacity: 1; }
|
|
1231
|
+
}
|
|
1232
|
+
|
|
1233
|
+
/*
|
|
1234
|
+
* Busy slow fill: a solid (currentColor) copy of the stop square, stacked over
|
|
1235
|
+
* the outline copy, is revealed by an animated clip-path that runs twelve
|
|
1236
|
+
* alternating phases — six fills, each sweeping the square solid from a
|
|
1237
|
+
* different direction (inside-out, left-to-right, top-to-bottom, right-to-left,
|
|
1238
|
+
* bottom-to-top, top-left corner), each immediately followed by a clear that
|
|
1239
|
+
* drains the square back to empty along the inverse of that direction. Each
|
|
1240
|
+
* phase takes 10s for a 120s loop. Every fill peaks at the full square and
|
|
1241
|
+
* every clear bottoms out empty, so the invisible hand-offs between phases (and
|
|
1242
|
+
* across the loop) carry no visible snap. The fill's static (no-animation) state
|
|
1243
|
+
* is fully filled, so reduced motion shows a solid square.
|
|
1244
|
+
*/
|
|
1245
|
+
.stop { position: relative; }
|
|
1246
|
+
.stop-fill {
|
|
1247
|
+
position: absolute;
|
|
1248
|
+
inset: 0;
|
|
1249
|
+
display: grid;
|
|
1250
|
+
place-items: center;
|
|
1251
|
+
clip-path: inset(0 0 0 0);
|
|
1252
|
+
}
|
|
1253
|
+
.stop-fill svg rect { fill: currentColor; }
|
|
1254
|
+
.send.is-busy .stop-fill { animation: slicc-send-fill 120s linear infinite; }
|
|
1255
|
+
@keyframes slicc-send-fill {
|
|
1256
|
+
/* 1 · FILL inside-out (0–10s): grows from the centre to full */
|
|
1257
|
+
0% { clip-path: inset(50% 50% 50% 50%); }
|
|
1258
|
+
8.33% { clip-path: inset(0 0 0 0); }
|
|
1259
|
+
/* 2 · CLEAR outside-in (10–20s): collapses from full back to the centre */
|
|
1260
|
+
16.66% { clip-path: inset(50% 50% 50% 50%); }
|
|
1261
|
+
/* 3 · FILL left-to-right (20–30s) */
|
|
1262
|
+
16.67% { clip-path: inset(0 100% 0 0); }
|
|
1263
|
+
25% { clip-path: inset(0 0 0 0); }
|
|
1264
|
+
/* 4 · CLEAR right-to-left drain (30–40s): empties back toward the left */
|
|
1265
|
+
33.33% { clip-path: inset(0 100% 0 0); }
|
|
1266
|
+
/* 5 · FILL top-to-bottom (40–50s) */
|
|
1267
|
+
33.34% { clip-path: inset(0 0 100% 0); }
|
|
1268
|
+
41.66% { clip-path: inset(0 0 0 0); }
|
|
1269
|
+
/* 6 · CLEAR bottom-to-top drain (50–60s): empties back toward the top */
|
|
1270
|
+
50% { clip-path: inset(0 0 100% 0); }
|
|
1271
|
+
/* 7 · FILL right-to-left (60–70s) */
|
|
1272
|
+
50.01% { clip-path: inset(0 0 0 100%); }
|
|
1273
|
+
58.33% { clip-path: inset(0 0 0 0); }
|
|
1274
|
+
/* 8 · CLEAR left-to-right drain (70–80s): empties back toward the right */
|
|
1275
|
+
66.66% { clip-path: inset(0 0 0 100%); }
|
|
1276
|
+
/* 9 · FILL bottom-to-top (80–90s) */
|
|
1277
|
+
66.67% { clip-path: inset(100% 0 0 0); }
|
|
1278
|
+
75% { clip-path: inset(0 0 0 0); }
|
|
1279
|
+
/* 10 · CLEAR top-to-bottom drain (90–100s): empties back toward the bottom */
|
|
1280
|
+
83.33% { clip-path: inset(100% 0 0 0); }
|
|
1281
|
+
/* 11 · FILL diagonal from the top-left corner (100–110s) */
|
|
1282
|
+
83.34% { clip-path: inset(0 100% 100% 0); }
|
|
1283
|
+
91.66% { clip-path: inset(0 0 0 0); }
|
|
1284
|
+
/* 12 · CLEAR back to the top-left corner (110–120s) */
|
|
1285
|
+
100% { clip-path: inset(0 100% 100% 0); }
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
/*
|
|
1289
|
+
* Respect prefers-reduced-motion: no motion, just the state swap. The idle
|
|
1290
|
+
* wiggle/press, the whoosh, the busy pulse and the busy fill all hold a static
|
|
1291
|
+
* state (the fill stays solid), and events are unaffected.
|
|
1292
|
+
*/
|
|
1293
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1294
|
+
.glyph.is-whoosh,
|
|
1295
|
+
.glyph.is-hover,
|
|
1296
|
+
.glyph.is-press,
|
|
1297
|
+
.send.is-busy .stop,
|
|
1298
|
+
.send.is-busy .stop-fill {
|
|
1299
|
+
animation: none;
|
|
1300
|
+
}
|
|
1301
|
+
.glyph.is-press { transform: none; }
|
|
1302
|
+
}
|
|
1303
|
+
`),ai=18,oi=72;W(`slicc-send-button`,class extends HTMLElement{static observedAttributes=[`disabled`,`busy`,`email`,`src`,`label`];#e;#t=null;#n=0;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ii]}connectedCallback(){this.#d()}attributeChangedCallback(){this.isConnected&&this.#d()}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,!!e)}get busy(){return this.hasAttribute(`busy`)}set busy(e){this.toggleAttribute(`busy`,!!e)}get email(){return this.getAttribute(`email`)}set email(e){e==null?this.removeAttribute(`email`):this.setAttribute(`email`,e)}get src(){return this.getAttribute(`src`)}set src(e){e==null?this.removeAttribute(`src`):this.setAttribute(`src`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#r=()=>{if(!this.disabled){if(this.busy){this.dispatchEvent(new CustomEvent(`stop`,{bubbles:!0,composed:!0}));return}this.#l(),this.dispatchEvent(new CustomEvent(`send`,{bubbles:!0,composed:!0}))}};#i(){return this.#e.querySelector(`.glyph`)}#a=()=>{this.disabled||this.busy||this.#i()?.classList.add(`is-hover`)};#o=()=>{this.#i()?.classList.remove(`is-hover`,`is-press`)};#s=()=>{if(this.disabled||this.busy)return;let e=this.#i();e?.classList.add(`is-press`),e?.classList.remove(`is-hover`)};#c=()=>{this.#i()?.classList.remove(`is-press`)};#l(){let e=this.#e.querySelector(`.glyph`);e&&(e.classList.remove(`is-whoosh`),e.offsetWidth,e.classList.add(`is-whoosh`),e.addEventListener(`animationend`,()=>e.classList.remove(`is-whoosh`),{once:!0}))}#u(){let e=++this.#n;if(!this.#t)return;let t=t=>{if(e!==this.#n)return;let n=this.#t;if(n)if(n.querySelector(`.face`)?.remove(),t){let e=document.createElement(`img`);e.className=`face`,e.setAttribute(`part`,`face`),e.alt=``,e.src=t,n.prepend(e),n.classList.add(`has-face`)}else n.classList.remove(`has-face`)},n=this.src;if(n){t(n);return}let r=this.email;if(!r||r.trim()===``){t(null);return}t(null),ri(r,{size:oi}).then(t).catch(()=>t(null))}#d(){let e=this.busy,t=this.disabled,n=this.label??(e?`Stop`:`Send`),r=e?K(`slot`,{name:`busy`},K(`span`,{class:`stop`,part:`stop`},J(`square`,{size:ai}),K(`span`,{class:`stop-fill`},J(`square`,{size:ai})))):K(`slot`,null,K(`span`,{class:`glyph`,part:`glyph`},J(`arrow-up`,{size:ai}))),i=K(`button`,{part:`button`,class:`send${e?` is-busy`:``}`,type:`button`,title:n,"aria-label":n,disabled:t||void 0},r);this.#e.replaceChildren(i),this.#t=i,this.#t.addEventListener(`click`,this.#r),this.#t.addEventListener(`pointerenter`,this.#a),this.#t.addEventListener(`pointerleave`,this.#o),this.#t.addEventListener(`pointerdown`,this.#s),this.#t.addEventListener(`pointerup`,this.#c),this.#u()}});var si=`
|
|
1304
|
+
slicc-input-card {
|
|
1305
|
+
display: block;
|
|
1306
|
+
}
|
|
1307
|
+
slicc-input-card > .slicc-input-card__card {
|
|
1308
|
+
display: flex;
|
|
1309
|
+
flex-direction: column;
|
|
1310
|
+
gap: 9px;
|
|
1311
|
+
border: 1px solid var(--line);
|
|
1312
|
+
border-radius: 16px;
|
|
1313
|
+
background: var(--canvas);
|
|
1314
|
+
padding: 14px 12px 10px 16px;
|
|
1315
|
+
box-shadow: rgba(10, 10, 10, 0.05) 0 2px 12px -2px;
|
|
1316
|
+
transition: 0.14s;
|
|
1317
|
+
}
|
|
1318
|
+
slicc-input-card > .slicc-input-card__card:focus-within {
|
|
1319
|
+
border-color: var(--violet);
|
|
1320
|
+
box-shadow:
|
|
1321
|
+
0 0 0 3px color-mix(in srgb, var(--violet) 15%, transparent),
|
|
1322
|
+
rgba(10, 10, 10, 0.05) 0 2px 12px -2px;
|
|
1323
|
+
}
|
|
1324
|
+
slicc-input-card .ta {
|
|
1325
|
+
border: none;
|
|
1326
|
+
outline: none;
|
|
1327
|
+
resize: none;
|
|
1328
|
+
background: transparent;
|
|
1329
|
+
font: inherit;
|
|
1330
|
+
font-family: var(--ui);
|
|
1331
|
+
font-size: 16px;
|
|
1332
|
+
line-height: 1.5;
|
|
1333
|
+
color: var(--ink);
|
|
1334
|
+
min-height: 28px;
|
|
1335
|
+
max-height: 140px;
|
|
1336
|
+
overflow-y: hidden;
|
|
1337
|
+
}
|
|
1338
|
+
slicc-input-card .ta::placeholder {
|
|
1339
|
+
color: var(--txt-3);
|
|
1340
|
+
/* Long (LLM-suggested) placeholders ellipsize instead of clipping when
|
|
1341
|
+
the workbench narrows the chat column. */
|
|
1342
|
+
white-space: nowrap;
|
|
1343
|
+
overflow: hidden;
|
|
1344
|
+
text-overflow: ellipsis;
|
|
1345
|
+
}
|
|
1346
|
+
slicc-input-card .toolbar {
|
|
1347
|
+
display: flex;
|
|
1348
|
+
align-items: center;
|
|
1349
|
+
gap: 7px;
|
|
1350
|
+
}
|
|
1351
|
+
/* The add-menu fills the toolbar so its searchbox can slide in next to the +/×,
|
|
1352
|
+
matching the prototype (.toolbar slicc-add-menu{flex:1;min-width:0;}). */
|
|
1353
|
+
slicc-input-card .toolbar slicc-add-menu {
|
|
1354
|
+
flex: 1;
|
|
1355
|
+
min-width: 0;
|
|
1356
|
+
}
|
|
1357
|
+
`,ci=`slicc-input-card-style`;function li(e){if(e.getElementById(ci))return;let t=e.createElement(`style`);t.id=ci,t.textContent=si,(e.head??e.documentElement).appendChild(t)}var ui=`Ask sliccy, or describe a change…`;W(`slicc-input-card`,class extends HTMLElement{static observedAttributes=[`value`,`placeholder`,`disabled`];#e;#t;#n;#r=!1;connectedCallback(){li(this.ownerDocument),this.#i(),this.#a(),this.#u()}attributeChangedCallback(e,t,n){!this.#r||t===n||(this.#a(),e===`value`&&this.#u())}get value(){return this.#r?this.#t.value:this.getAttribute(`value`)??``}set value(e){let t=e??``;this.#r&&(this.#t.value=t,this.#u()),t===``?this.removeAttribute(`value`):this.setAttribute(`value`,t)}get placeholder(){return this.getAttribute(`placeholder`)??ui}set placeholder(e){e==null?this.removeAttribute(`placeholder`):this.setAttribute(`placeholder`,e)}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,!!e)}focus(e){this.#i(),this.#t.focus(e)}clear(){this.value=``}#i(){if(this.#r)return;this.#r=!0;let e=this.ownerDocument,t=Array.from(this.children).filter(e=>e.getAttribute(`slot`)===`toolbar`);if(this.replaceChildren(),this.#e=e.createElement(`div`),this.#e.className=`slicc-input-card__card`,this.#e.setAttribute(`part`,`card`),this.#t=e.createElement(`textarea`),this.#t.className=`ta`,this.#t.setAttribute(`part`,`textarea`),this.#t.rows=1,this.#n=e.createElement(`div`),this.#n.className=`toolbar`,this.#n.setAttribute(`part`,`toolbar`),t.length>0)for(let e of t)this.#n.appendChild(e);else this.#n.append(K(`slicc-add-menu`),K(`slicc-send-button`));this.#e.append(this.#t,this.#n),this.appendChild(this.#e),this.#t.addEventListener(`input`,this.#o),this.#t.addEventListener(`keydown`,this.#s),this.#n.addEventListener(`send`,this.#c)}#a(){if(!this.#r)return;let e=this.#t;e.placeholder=this.placeholder,e.disabled=this.disabled;let t=this.getAttribute(`value`)??``;e.value!==t&&(e.value=t)}#o=e=>{e.stopPropagation();let t=this.#t.value;t===``?this.removeAttribute(`value`):this.setAttribute(`value`,t),this.#u(),this.dispatchEvent(new CustomEvent(`input`,{bubbles:!0,composed:!0,detail:{value:t}}))};#s=e=>{if(e.isComposing)return;if(e.key===`Enter`&&!e.shiftKey){e.preventDefault(),this.#l();return}let t=this.#t,n=t.selectionStart===t.selectionEnd;e.key===`ArrowUp`&&n&&t.selectionStart===0?(e.preventDefault(),this.dispatchEvent(new CustomEvent(`history-up`,{bubbles:!0,composed:!0}))):e.key===`ArrowDown`&&n&&t.selectionStart===t.value.length&&this.dispatchEvent(new CustomEvent(`history-down`,{bubbles:!0,composed:!0}))};#c=e=>{e.stopPropagation(),this.#l()};focusEnd(){if(!this.#r)return;let e=this.#t;e.focus();let t=e.value.length;e.setSelectionRange(t,t)}#l(){if(this.disabled)return;let e=this.#t.value;e.trim()!==``&&this.dispatchEvent(new CustomEvent(`submit`,{bubbles:!0,composed:!0,detail:{value:e}}))}#u(){if(!this.#r)return;let e=this.#t;e.style.height=`auto`;let t=e.scrollHeight;e.style.height=`${Math.min(t,140)}px`,e.style.overflowY=t>140?`auto`:`hidden`}});var di=1e3;function fi(e,t){let n=t.longPressMs??1e3,r=t.modifierClickAsLongPress??!0,i=null,a=!1,o=()=>{t.onPressEnd?.()},s=()=>{i!==null&&(clearTimeout(i),i=null),o()},c=e=>{e.button===0&&(e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(a=!1,s(),t.onPressStart?.(e),i=setTimeout(()=>{a=!0,o(),i=null,t.onLongPress()},n)))},l=()=>s(),u=()=>s(),d=()=>s(),f=()=>s(),p=e=>{if(a){a=!1,e.preventDefault();return}if((e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)&&r){e.preventDefault(),t.onLongPress();return}t.onShortClick(e)};return e.addEventListener(`mousedown`,c),e.addEventListener(`mouseup`,l),e.addEventListener(`mouseleave`,u),e.addEventListener(`blur`,d),e.addEventListener(`contextmenu`,f),e.addEventListener(`click`,p),{destroy:()=>{s(),e.removeEventListener(`mousedown`,c),e.removeEventListener(`mouseup`,l),e.removeEventListener(`mouseleave`,u),e.removeEventListener(`blur`,d),e.removeEventListener(`contextmenu`,f),e.removeEventListener(`click`,p)}}}var pi=q(`
|
|
1358
|
+
:host { display: inline-grid; }
|
|
1359
|
+
:host([hidden]) { display: none; }
|
|
1360
|
+
|
|
1361
|
+
.di {
|
|
1362
|
+
position: relative;
|
|
1363
|
+
width: 34px;
|
|
1364
|
+
height: 34px;
|
|
1365
|
+
border-radius: 9px;
|
|
1366
|
+
border: 1px solid transparent;
|
|
1367
|
+
background: transparent;
|
|
1368
|
+
color: var(--txt-2);
|
|
1369
|
+
cursor: pointer;
|
|
1370
|
+
display: grid;
|
|
1371
|
+
place-items: center;
|
|
1372
|
+
font-size: 14px;
|
|
1373
|
+
font-family: var(--ui);
|
|
1374
|
+
padding: 0;
|
|
1375
|
+
margin: 0;
|
|
1376
|
+
line-height: 1;
|
|
1377
|
+
-webkit-appearance: none;
|
|
1378
|
+
appearance: none;
|
|
1379
|
+
}
|
|
1380
|
+
|
|
1381
|
+
.di:hover { background: var(--ghost); color: var(--ink); }
|
|
1382
|
+
|
|
1383
|
+
/* sprinkle launcher: status dot in the per-kind hue (--h, default violet) */
|
|
1384
|
+
.di.sp::after {
|
|
1385
|
+
content: "";
|
|
1386
|
+
position: absolute;
|
|
1387
|
+
right: 5px;
|
|
1388
|
+
top: 6px;
|
|
1389
|
+
width: 5px;
|
|
1390
|
+
height: 5px;
|
|
1391
|
+
border-radius: 50%;
|
|
1392
|
+
background: var(--h, var(--violet));
|
|
1393
|
+
}
|
|
1394
|
+
|
|
1395
|
+
/* active / open: subtle outer glow in the active context accent (--ctx) — no
|
|
1396
|
+
blinding solid fill in dark mode, just a tint + ring + glow */
|
|
1397
|
+
.di.on {
|
|
1398
|
+
background: color-mix(in srgb, var(--ctx) 14%, transparent);
|
|
1399
|
+
color: var(--ink);
|
|
1400
|
+
border-color: color-mix(in srgb, var(--ctx) 35%, transparent);
|
|
1401
|
+
box-shadow:
|
|
1402
|
+
0 0 0 1px color-mix(in srgb, var(--ctx) 45%, transparent),
|
|
1403
|
+
0 0 12px 2px color-mix(in srgb, var(--ctx) 38%, transparent);
|
|
1404
|
+
}
|
|
1405
|
+
|
|
1406
|
+
/* lit: transient ring + tint in the per-kind hue (--h). The fill mixes over the
|
|
1407
|
+
inherited var(--canvas) so it re-bases correctly in dark mode. */
|
|
1408
|
+
.di.lit {
|
|
1409
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--h, var(--violet)) 45%, transparent);
|
|
1410
|
+
background: color-mix(in srgb, var(--h, var(--violet)) 16%, var(--canvas));
|
|
1411
|
+
color: var(--ink);
|
|
1412
|
+
transition: box-shadow 0.3s, background 0.3s;
|
|
1413
|
+
}
|
|
1414
|
+
|
|
1415
|
+
/* tooltip to the left of the button — absolutely positioned, no reflow */
|
|
1416
|
+
.tip {
|
|
1417
|
+
position: absolute;
|
|
1418
|
+
right: 42px;
|
|
1419
|
+
top: 50%;
|
|
1420
|
+
transform: translateY(-50%);
|
|
1421
|
+
background: var(--ink);
|
|
1422
|
+
/* --canvas, not #fff: --ink flips near-white in dark mode and hardcoded
|
|
1423
|
+
white text would vanish on it (the freezer-card tip got this right). */
|
|
1424
|
+
color: var(--canvas, #fff);
|
|
1425
|
+
font-size: 11px;
|
|
1426
|
+
font-family: var(--ui);
|
|
1427
|
+
white-space: nowrap;
|
|
1428
|
+
padding: 3px 8px;
|
|
1429
|
+
border-radius: 6px;
|
|
1430
|
+
opacity: 0;
|
|
1431
|
+
pointer-events: none;
|
|
1432
|
+
transition: 0.12s;
|
|
1433
|
+
}
|
|
1434
|
+
|
|
1435
|
+
.di:hover .tip { opacity: 1; }
|
|
1436
|
+
|
|
1437
|
+
.glyph { display: grid; place-items: center; line-height: 1; }
|
|
1438
|
+
.glyph svg { display: block; }
|
|
1439
|
+
`),mi=`square`,hi=18;W(`slicc-dock-item`,class extends HTMLElement{static observedAttributes=[`item-id`,`kind`,`hue`,`icon`,`tip`,`active`,`lit`];#e;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[pi]}disconnectedCallback(){this.#t?.destroy(),this.#t=null}connectedCallback(){this.#n()}attributeChangedCallback(){this.isConnected&&this.#n()}get itemId(){return this.getAttribute(`item-id`)}set itemId(e){e==null?this.removeAttribute(`item-id`):this.setAttribute(`item-id`,e)}get kind(){return this.getAttribute(`kind`)===`sprinkle`?`sprinkle`:`tool`}set kind(e){this.setAttribute(`kind`,e===`sprinkle`?`sprinkle`:`tool`)}get hue(){return this.getAttribute(`hue`)}set hue(e){e==null?this.removeAttribute(`hue`):this.setAttribute(`hue`,e)}get icon(){return this.getAttribute(`icon`)??mi}set icon(e){e==null?this.removeAttribute(`icon`):this.setAttribute(`icon`,e)}get tip(){return this.getAttribute(`tip`)}set tip(e){e==null?this.removeAttribute(`tip`):this.setAttribute(`tip`,e)}get active(){return this.hasAttribute(`active`)}set active(e){this.toggleAttribute(`active`,!!e)}get lit(){return this.hasAttribute(`lit`)}set lit(e){this.toggleAttribute(`lit`,!!e)}#n(){let e=[`di`];this.kind===`sprinkle`&&e.push(`sp`),this.active&&e.push(`on`),this.lit&&e.push(`lit`);let t=this.tip,n=J(this.icon,{size:hi,part:`icon`}),r=t??this.itemId??`dock item`,i=K(`button`,{type:`button`,part:`button`,class:e.join(` `),"aria-label":r,"aria-pressed":this.active?`true`:`false`},K(`span`,{class:`glyph`,part:`glyph`},K(`slot`,null,n)),t?K(`span`,{class:`tip`,part:`tip`},t):null),a=this.hue;a&&i.style.setProperty(`--h`,a),this.#t?.destroy(),this.#t=fi(i,{onShortClick:this.#r,onLongPress:()=>this.#i(`longpress`)}),this.#e.replaceChildren(i)}#r=()=>{this.#i(this.active?`collapse`:`select`)};#i(e){this.dispatchEvent(new CustomEvent(e,{detail:{id:this.itemId},bubbles:!0,composed:!0}))}});var gi=[{id:`browser`,icon:`globe`,label:`Browser · CDP`,kind:`tool`},{id:`files`,icon:`folder`,label:`Files · VFS`,kind:`tool`},{id:`term`,icon:`square-terminal`,label:`Terminal`,kind:`tool`},{id:`memory`,icon:`brain`,label:`Memory`,kind:`tool`}],_i={id:`new`,icon:`plus`,label:`New sprinkle`,kind:`sprinkle`},vi=`
|
|
1440
|
+
.slicc-dock {
|
|
1441
|
+
flex: 0 0 48px;
|
|
1442
|
+
box-sizing: border-box;
|
|
1443
|
+
display: flex;
|
|
1444
|
+
flex-direction: column;
|
|
1445
|
+
align-items: center;
|
|
1446
|
+
gap: 8px;
|
|
1447
|
+
background: color-mix(in srgb, var(--ctx) 12%, var(--bg));
|
|
1448
|
+
border-left: 1px solid var(--line);
|
|
1449
|
+
padding: 10px 0;
|
|
1450
|
+
position: relative;
|
|
1451
|
+
z-index: 2;
|
|
1452
|
+
}
|
|
1453
|
+
.slicc-dock .div {
|
|
1454
|
+
width: 22px;
|
|
1455
|
+
height: 1px;
|
|
1456
|
+
background: var(--line);
|
|
1457
|
+
margin: 2px 0;
|
|
1458
|
+
}
|
|
1459
|
+
.slicc-dock .grow { flex: 1; }
|
|
1460
|
+
`,yi=`slicc-dock-style`;function bi(e){if(e.getElementById(yi))return;let t=e.createElement(`style`);t.id=yi,t.textContent=vi,(e.head??e.documentElement).appendChild(t)}function xi(e){return e===`sprinkle`?`sprinkle`:`tool`}W(`slicc-dock`,class extends HTMLElement{static get observedAttributes(){return[`active`,`system-tools`]}#e=[];#t=null;#n=null;#r=null;#i=!1;connectedCallback(){bi(this.ownerDocument),this.classList.add(`slicc-dock`),this.setAttribute(`part`,`rail`),this.setAttribute(`role`,`toolbar`),this.setAttribute(`aria-orientation`,`vertical`),this.#i||=(this.#a(),!0),this.#t||(this.#t=e=>this.#u(e),this.#n=e=>this.#d(e),this.#r=e=>this.#f(e),this.addEventListener(`select`,this.#t),this.addEventListener(`collapse`,this.#n),this.addEventListener(`longpress`,this.#r)),this.#c()}disconnectedCallback(){this.#t&&=(this.removeEventListener(`select`,this.#t),null),this.#n&&=(this.removeEventListener(`collapse`,this.#n),null),this.#r&&=(this.removeEventListener(`longpress`,this.#r),null)}attributeChangedCallback(e){this.#i&&(e===`active`?this.#l():e===`system-tools`&&this.#c())}get items(){return this.#e.map(e=>({...e}))}set items(e){this.#e=Array.isArray(e)?e.map(e=>({...e})):[],this.#i&&this.isConnected&&this.#c()}get active(){return this.getAttribute(`active`)}set active(e){e==null?this.removeAttribute(`active`):this.setAttribute(`active`,e)}get systemTools(){return this.hasAttribute(`system-tools`)}set systemTools(e){this.toggleAttribute(`system-tools`,!!e)}selectItem(e){this.active=e,this.dispatchEvent(new CustomEvent(`slicc-dock-select`,{detail:{id:e,kind:this.#o(e)},bubbles:!0,composed:!0}))}clearActive(){this.active=null}collapse(){let e=this.active;this.active=null,e!=null&&this.dispatchEvent(new CustomEvent(`slicc-dock-collapse`,{detail:{id:e},bubbles:!0,composed:!0}))}#a(){let e=[...this.querySelectorAll(`slicc-dock-item`)];if(e.length===0)return;let t=[];for(let n of e){let e=xi(n.getAttribute(`kind`)),r=n.getAttribute(`item-id`)??n.dataset.t??n.getAttribute(`tip`)??``;e===`tool`||r===`new`||r===``||t.push({id:r,icon:n.getAttribute(`icon`)??void 0,label:n.getAttribute(`tip`)??void 0,kind:`sprinkle`,hue:n.getAttribute(`hue`)??void 0})}for(let t of e)t.remove();this.#e.length===0&&(this.#e=t)}#o(e){return gi.some(t=>t.id===e)?`tool`:e===_i.id?`sprinkle`:this.#e.find(t=>t.id===e)?.kind??`tool`}#s(e,t){let n=e.id,r=xi(e.kind),i=e.icon??``,a=e.label??n,o=t!=null&&t===n,s=e.hue;return K(`slicc-dock-item`,{"data-t":n,"item-id":n,kind:r,icon:i||!1,tip:a,hue:s||!1,active:o})}#c(){let e=this.active,t=[];for(let n of this.#e)xi(n.kind)===`sprinkle`&&t.push(this.#s(n,e));if(t.push(this.#s(_i,e)),t.push(K(`div`,{class:`grow`})),this.systemTools){t.push(K(`div`,{class:`div`}));for(let n of gi)t.push(this.#s(n,e))}this.replaceChildren(),G(this,t)}#l(){let e=this.active;for(let t of this.querySelectorAll(`slicc-dock-item`))t.toggleAttribute(`active`,t.dataset.t===e)}#u(e){let t=this.#p(e);t!=null&&(e.stopPropagation(),this.selectItem(t))}#d(e){let t=this.#p(e);t!=null&&(e.stopPropagation(),this.active!==t&&(this.active=t),this.collapse())}#f(e){let t=this.#p(e);t!=null&&(e.stopPropagation(),this.active!==t&&this.selectItem(t),this.dispatchEvent(new CustomEvent(`slicc-dock-longpress`,{detail:{id:t,kind:this.#o(t)},bubbles:!0,composed:!0})))}#p(e){let t=e.detail;if(t&&typeof t.id==`string`)return t.id;let n=e.target?.closest(`slicc-dock-item`);return n&&this.contains(n)?n.dataset.t??null:null}});var Si=q(`
|
|
1461
|
+
:host { display: none; }
|
|
1462
|
+
:host([open]) { display: block; }
|
|
1463
|
+
.overlay {
|
|
1464
|
+
position: fixed; inset: 0; z-index: 120;
|
|
1465
|
+
display: flex; flex-direction: column; box-sizing: border-box;
|
|
1466
|
+
padding: 20px clamp(20px, 5vw, 64px);
|
|
1467
|
+
background: rgba(0,0,0,.55);
|
|
1468
|
+
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
|
|
1469
|
+
opacity: 0; transition: opacity .16s ease;
|
|
1470
|
+
}
|
|
1471
|
+
:host([open]) .overlay { opacity: 1; }
|
|
1472
|
+
.bar {
|
|
1473
|
+
flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
|
|
1474
|
+
padding: 4px 2px 16px; color: #fff; font-family: var(--ui);
|
|
1475
|
+
}
|
|
1476
|
+
.title { font-size: 16px; font-weight: 700; }
|
|
1477
|
+
.count {
|
|
1478
|
+
font-size: 12px; font-weight: 600; color: rgba(255,255,255,.7);
|
|
1479
|
+
background: rgba(255,255,255,.12); border-radius: 999px; padding: 2px 9px;
|
|
1480
|
+
}
|
|
1481
|
+
.grow { flex: 1; }
|
|
1482
|
+
.close {
|
|
1483
|
+
width: 34px; height: 34px; display: grid; place-items: center;
|
|
1484
|
+
border: none; background: rgba(255,255,255,.1); color: #fff;
|
|
1485
|
+
border-radius: 9px; cursor: pointer; transition: background .12s ease;
|
|
1486
|
+
}
|
|
1487
|
+
.close:hover { background: rgba(255,255,255,.2); }
|
|
1488
|
+
.close svg { display: block; }
|
|
1489
|
+
.grid {
|
|
1490
|
+
flex: 1 1 auto; min-height: 0; overflow: auto; padding: 2px;
|
|
1491
|
+
display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
1492
|
+
gap: 16px; align-content: start;
|
|
1493
|
+
}
|
|
1494
|
+
.card {
|
|
1495
|
+
display: flex; flex-direction: column;
|
|
1496
|
+
background: var(--canvas); border: 1px solid var(--line);
|
|
1497
|
+
border-radius: 12px; overflow: hidden; cursor: pointer; font-family: var(--ui);
|
|
1498
|
+
transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
|
|
1499
|
+
}
|
|
1500
|
+
.card:hover {
|
|
1501
|
+
border-color: color-mix(in srgb, var(--ctx) 40%, var(--line));
|
|
1502
|
+
box-shadow: var(--shadow-pane); transform: translateY(-2px);
|
|
1503
|
+
}
|
|
1504
|
+
.card:focus-visible { outline: 2px solid var(--ctx); outline-offset: 2px; }
|
|
1505
|
+
.card.on {
|
|
1506
|
+
border-color: color-mix(in srgb, var(--ctx) 55%, transparent);
|
|
1507
|
+
box-shadow: 0 0 0 1px color-mix(in srgb, var(--ctx) 55%, transparent);
|
|
1508
|
+
}
|
|
1509
|
+
.shot {
|
|
1510
|
+
display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
|
|
1511
|
+
background: var(--ghost); color: var(--txt-3);
|
|
1512
|
+
}
|
|
1513
|
+
.shot.ph { display: grid; place-items: center; }
|
|
1514
|
+
.shot.ph svg { display: block; }
|
|
1515
|
+
.meta { display: flex; align-items: center; gap: 8px; padding: 9px 10px; min-width: 0; }
|
|
1516
|
+
.label { display: flex; flex-direction: column; min-width: 0; flex: 1; }
|
|
1517
|
+
.name {
|
|
1518
|
+
font-size: 13px; font-weight: 600; color: var(--ink);
|
|
1519
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
1520
|
+
}
|
|
1521
|
+
.url {
|
|
1522
|
+
font-size: 11px; color: var(--txt-2);
|
|
1523
|
+
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
1524
|
+
}
|
|
1525
|
+
.x {
|
|
1526
|
+
flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
|
|
1527
|
+
border: none; background: transparent; color: var(--txt-3);
|
|
1528
|
+
border-radius: 7px; cursor: pointer; transition: background .12s ease, color .12s ease;
|
|
1529
|
+
}
|
|
1530
|
+
.x:hover { background: var(--ghost); color: var(--ink); }
|
|
1531
|
+
.x svg { display: block; }
|
|
1532
|
+
.empty {
|
|
1533
|
+
flex: 1; display: grid; place-items: center; text-align: center;
|
|
1534
|
+
color: rgba(255,255,255,.7); font-family: var(--ui); font-size: 14px;
|
|
1535
|
+
}
|
|
1536
|
+
@media (prefers-reduced-motion: reduce) { .overlay, .card { transition: none; } }
|
|
1537
|
+
`),Ci=`Open tabs`;W(`slicc-tab-overlay`,class extends HTMLElement{static observedAttributes=[`open`,`heading`];#e;#t=[];#n=null;#r=null;#i=e=>{e.key===`Escape`&&this.open&&(e.stopPropagation(),this.#u(`escape`))};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Si]}connectedCallback(){this.#s(),this.#c()}disconnectedCallback(){document.removeEventListener(`keydown`,this.#i,!0)}attributeChangedCallback(e){this.isConnected&&(e===`open`?this.#c():this.#s())}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,!!e)}get heading(){return this.getAttribute(`heading`)??Ci}set heading(e){e==null?this.removeAttribute(`heading`):this.setAttribute(`heading`,e)}get tabs(){return this.#t.map(e=>({...e}))}set tabs(e){this.#t=Array.isArray(e)?e.map(e=>({...e})):[],this.isConnected&&this.#s()}show(){this.open||=!0}hide(){this.open&&this.#u(`api`)}#a(){let e=K(`button`,{class:`close`,part:`close`,type:`button`,"aria-label":`Close tabs overlay`},J(`x`,{size:18}));return e.addEventListener(`click`,()=>this.#u(`close-button`)),e}#o(e){let t=e.title??e.id,n=e.screenshot?K(`img`,{class:`shot`,part:`shot`,src:e.screenshot,alt:t,loading:`lazy`}):K(`div`,{class:`shot ph`,part:`shot`},J(`globe`,{size:28})),r=K(`button`,{class:`x`,part:`card-close`,type:`button`,"aria-label":`Close ${t}`},J(`x`,{size:14}));r.addEventListener(`click`,t=>{t.stopPropagation(),this.#l(`tab-close`,e.id)});let i=K(`div`,{class:`label`},K(`span`,{class:`name`,part:`title`},t),e.url?K(`span`,{class:`url`},e.url):null),a=K(`div`,{class:e.active?`card on`:`card`,part:`card`,role:`button`,tabindex:`0`,"data-tab-id":e.id,"aria-label":t,"aria-current":e.active?`true`:!1},n,K(`div`,{class:`meta`},i,r));return a.addEventListener(`click`,()=>this.#l(`tab-activate`,e.id)),a.addEventListener(`keydown`,t=>{(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),this.#l(`tab-activate`,e.id))}),a}#s(){let e=K(`div`,{class:`bar`,part:`bar`},K(`span`,{class:`title`},this.heading),K(`span`,{class:`count`},String(this.#t.length)),K(`span`,{class:`grow`}),this.#a()),t;if(this.#t.length===0)t=K(`div`,{class:`empty`},`No open tabs.`);else{t=K(`div`,{class:`grid`,part:`grid`,role:`list`});for(let e of this.#t)t.appendChild(this.#o(e))}this.#n=K(`div`,{class:`overlay`,part:`overlay`},e,t),this.#n.addEventListener(`mousedown`,e=>{e.target===this.#n&&this.#u(`backdrop`)}),this.#e.replaceChildren(this.#n)}#c(){this.open?(this.#r=this.getRootNode().activeElement,document.addEventListener(`keydown`,this.#i,!0),requestAnimationFrame(()=>this.#n?.querySelector(`.close`)?.focus())):(document.removeEventListener(`keydown`,this.#i,!0),this.#r?.focus?.(),this.#r=null)}#l(e,t){this.dispatchEvent(new CustomEvent(e,{detail:{id:t},bubbles:!0,composed:!0}))}#u(e){this.open=!1,this.dispatchEvent(new CustomEvent(`overlay-close`,{detail:{reason:e},bubbles:!0,composed:!0}))}});var wi=`#3b6cb2`,Ti=`
|
|
1538
|
+
.slicc-freezer {
|
|
1539
|
+
position: fixed;
|
|
1540
|
+
left: 0;
|
|
1541
|
+
top: 0;
|
|
1542
|
+
bottom: 0;
|
|
1543
|
+
width: 44px;
|
|
1544
|
+
z-index: 6;
|
|
1545
|
+
background: color-mix(in srgb, var(--ctx) 12%, var(--bg));
|
|
1546
|
+
border-right: 1px solid var(--line);
|
|
1547
|
+
transition: width .4s cubic-bezier(.4, 0, .2, 1);
|
|
1548
|
+
overflow: hidden;
|
|
1549
|
+
display: flex;
|
|
1550
|
+
flex-direction: column;
|
|
1551
|
+
box-shadow: rgba(10, 10, 10, .06) 1px 0 14px -4px;
|
|
1552
|
+
font-family: var(--ui);
|
|
1553
|
+
}
|
|
1554
|
+
.slicc-freezer[open] { width: 260px; }
|
|
1555
|
+
.dark .slicc-freezer,
|
|
1556
|
+
[data-theme="dark"] .slicc-freezer { box-shadow: rgba(0, 0, 0, .35) 1px 0 14px -4px; }
|
|
1557
|
+
|
|
1558
|
+
.slicc-freezer .fzh {
|
|
1559
|
+
position: relative;
|
|
1560
|
+
z-index: 1;
|
|
1561
|
+
display: flex;
|
|
1562
|
+
align-items: center;
|
|
1563
|
+
gap: 8px;
|
|
1564
|
+
padding: 0 10px;
|
|
1565
|
+
min-height: var(--barh);
|
|
1566
|
+
border-bottom: 1px solid var(--line);
|
|
1567
|
+
background: transparent;
|
|
1568
|
+
flex: 0 0 auto;
|
|
1569
|
+
}
|
|
1570
|
+
.slicc-freezer .fztgl {
|
|
1571
|
+
font: inherit;
|
|
1572
|
+
font-size: 14px;
|
|
1573
|
+
line-height: 1;
|
|
1574
|
+
width: 26px;
|
|
1575
|
+
height: 26px;
|
|
1576
|
+
border-radius: 8px;
|
|
1577
|
+
border: 1px solid var(--line);
|
|
1578
|
+
background: var(--canvas);
|
|
1579
|
+
color: var(--txt-2);
|
|
1580
|
+
cursor: pointer;
|
|
1581
|
+
display: grid;
|
|
1582
|
+
place-items: center;
|
|
1583
|
+
flex: 0 0 auto;
|
|
1584
|
+
}
|
|
1585
|
+
.slicc-freezer .fztgl:hover { background: var(--ghost); color: var(--ink); }
|
|
1586
|
+
.slicc-freezer .fztgl svg { display: block; transition: transform .25s cubic-bezier(.4, 0, .2, 1); }
|
|
1587
|
+
.slicc-freezer .fztgl[aria-expanded="true"] svg { transform: scaleX(-1); }
|
|
1588
|
+
|
|
1589
|
+
.slicc-freezer .fzsearch {
|
|
1590
|
+
display: none;
|
|
1591
|
+
flex: 1;
|
|
1592
|
+
min-width: 0;
|
|
1593
|
+
font: inherit;
|
|
1594
|
+
font-size: 12px;
|
|
1595
|
+
color: var(--ink);
|
|
1596
|
+
background: var(--canvas);
|
|
1597
|
+
border: 1px solid var(--line);
|
|
1598
|
+
border-radius: 8px;
|
|
1599
|
+
padding: 5px 9px;
|
|
1600
|
+
outline: none;
|
|
1601
|
+
}
|
|
1602
|
+
.slicc-freezer .fzsearch::placeholder { color: var(--txt-3); }
|
|
1603
|
+
.slicc-freezer .fzsearch:focus { border-color: var(--txt-3); background: var(--canvas); }
|
|
1604
|
+
.slicc-freezer[open] .fzsearch { display: block; }
|
|
1605
|
+
|
|
1606
|
+
.slicc-freezer .fzrail {
|
|
1607
|
+
position: relative;
|
|
1608
|
+
z-index: 1;
|
|
1609
|
+
flex: 1;
|
|
1610
|
+
overflow-y: auto;
|
|
1611
|
+
display: flex;
|
|
1612
|
+
flex-direction: column;
|
|
1613
|
+
gap: 8px;
|
|
1614
|
+
padding: 11px 0;
|
|
1615
|
+
align-items: center;
|
|
1616
|
+
}
|
|
1617
|
+
.slicc-freezer[open] .fzrail { align-items: stretch; padding: 11px 8px 16px; }
|
|
1618
|
+
|
|
1619
|
+
/* ice-blue accent while a freezer context is active (prototype _ctxAccent) —
|
|
1620
|
+
tints the toggle + the new-chat icon; cards keep their snow palette. */
|
|
1621
|
+
.slicc-freezer[ctx] .fztgl { color: var(--fz-ctx, ${wi}); border-color: color-mix(in srgb, var(--fz-ctx, ${wi}) 40%, var(--line)); }
|
|
1622
|
+
.slicc-freezer[ctx] ::part(new-icon),
|
|
1623
|
+
.slicc-freezer[ctx] slicc-freezer-new::part(new-icon) {
|
|
1624
|
+
background: color-mix(in srgb, var(--fz-ctx, ${wi}) 14%, var(--canvas));
|
|
1625
|
+
border-color: color-mix(in srgb, var(--fz-ctx, ${wi}) 40%, var(--line));
|
|
1626
|
+
color: var(--fz-ctx, ${wi});
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
/* match-hidden: search filtered a session row out (only meaningful when open,
|
|
1630
|
+
collapsed shows icons only). Works on both the composed card element and a raw
|
|
1631
|
+
prototype .fzcard row. */
|
|
1632
|
+
.slicc-freezer[open] slicc-freezer-card.match-hidden,
|
|
1633
|
+
.slicc-freezer[open] .fzcard.match-hidden { display: none; }
|
|
1634
|
+
`,Ei=`slicc-freezer-style`;function Di(e){if(e.getElementById(Ei))return;let t=e.createElement(`style`);t.id=Ei,t.textContent=Ti,(e.head??e.documentElement).appendChild(t)}var Oi=`http://www.w3.org/2000/svg`;function ki(){let e=document.createElementNS(Oi,`svg`);for(let[t,n]of[[`width`,`14`],[`height`,`14`],[`viewBox`,`0 0 16 16`],[`fill`,`none`],[`stroke`,`currentColor`],[`stroke-width`,`1.6`],[`stroke-linecap`,`round`],[`stroke-linejoin`,`round`],[`aria-hidden`,`true`]])e.setAttribute(t,n);let t=document.createElementNS(Oi,`rect`);for(let[e,n]of[[`x`,`2.5`],[`y`,`3.5`],[`width`,`11`],[`height`,`9`],[`rx`,`1.5`]])t.setAttribute(e,n);let n=document.createElementNS(Oi,`line`);for(let[e,t]of[[`x1`,`6`],[`y1`,`3.5`],[`x2`,`6`],[`y2`,`12.5`]])n.setAttribute(e,t);let r=document.createElementNS(Oi,`polyline`);return r.setAttribute(`points`,`9,6.5 10.5,8 9,9.5`),e.append(t,n,r),e}W(`slicc-freezer`,class extends HTMLElement{static observedAttributes=[`open`,`ctx`,`search-placeholder`];#e;#t;#n;#r;#i=!1;#a=null;#o=null;connectedCallback(){Di(this.ownerDocument),this.classList.add(`slicc-freezer`),this.setAttribute(`part`,`freezer`),this.hasAttribute(`aria-label`)||this.setAttribute(`aria-label`,`Past sessions (freezer)`),this.#s(),this.#l(),this.#u()}disconnectedCallback(){this.#a&&this.#t&&(this.#t.removeEventListener(`click`,this.#a),this.#a=null),this.#o&&this.#n&&(this.#n.removeEventListener(`input`,this.#o),this.#o=null)}attributeChangedCallback(e,t,n){this.#i&&(e===`open`?(this.#l(),this.#u()):e===`search-placeholder`&&(this.#n.placeholder=n??`search past sessions`))}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get ctx(){return this.hasAttribute(`ctx`)}set ctx(e){this.toggleAttribute(`ctx`,e)}get searchPlaceholder(){return this.getAttribute(`search-placeholder`)??`search past sessions`}set searchPlaceholder(e){e==null?this.removeAttribute(`search-placeholder`):this.setAttribute(`search-placeholder`,e)}get query(){return this.#i?this.#n.value:``}set query(e){this.#s(),this.#n.value=e,this.#d()}get rail(){return this.#s(),this.#r}toggle(e){let t=e??!this.open;t===this.open&&this.#l(),this.open=t,this.#l(),this.#u(),this.dispatchEvent(new CustomEvent(`freezer-toggle`,{detail:{open:t},bubbles:!0,composed:!0}))}append(...e){this.#s(),this.#r.append(...e),this.#u()}#s(){if(this.#i)return;let e=this.querySelector(`:scope > .fzh`),t=this.querySelector(`:scope > .fzrail`);if(e instanceof HTMLElement&&t instanceof HTMLElement){this.#c(e,t);return}let n=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLElement&&(e.classList.contains(`fzh`)||e.classList.contains(`fzrail`)))),r=this.ownerDocument,i=r.createElement(`div`);i.className=`fzh`,i.setAttribute(`part`,`header`);let a=r.createElement(`button`);a.className=`fztgl`,a.type=`button`,a.setAttribute(`part`,`toggle`),a.setAttribute(`aria-label`,`Toggle freezer`),a.append(ki());let o=r.createElement(`input`);o.className=`fzsearch`,o.type=`text`,o.setAttribute(`part`,`search`),o.placeholder=this.searchPlaceholder,o.setAttribute(`aria-label`,`Search past sessions`),i.append(a,o);let s=r.createElement(`div`);s.className=`fzrail`,s.setAttribute(`part`,`rail`);for(let e of n)s.appendChild(e);this.replaceChildren(i,s),this.#c(i,s)}#c(e,t){this.#i=!0,this.#e=e,this.#r=t;let n=e.querySelector(`.fztgl`),r=e.querySelector(`.fzsearch`);n&&(this.#t=n),r&&(this.#n=r),this.#t&&!this.#a&&(this.#a=()=>this.toggle(),this.#t.addEventListener(`click`,this.#a)),this.#n&&!this.#o&&(this.#o=()=>this.#d(),this.#n.addEventListener(`input`,this.#o))}#l(){if(!this.#t)return;let e=this.open;this.#t.setAttribute(`aria-expanded`,e?`true`:`false`),this.#t.title=e?`Collapse freezer`:`Expand freezer`}#u(){if(!this.#i)return;let e=this.open,t=this.#r.querySelectorAll(`slicc-freezer-card, slicc-freezer-new`);for(let n of t)n.toggleAttribute(`expanded`,e)}#d(){let e=this.#n.value.trim().toLowerCase(),t=this.#r.querySelectorAll(`slicc-freezer-card, .fzcard`);for(let n of t){let t=(n.textContent??``).toLowerCase();n.classList.toggle(`match-hidden`,e.length>0&&!t.includes(e))}}});var Ai=14,ji=q(`
|
|
1635
|
+
:host {
|
|
1636
|
+
display: inline-grid;
|
|
1637
|
+
place-items: center;
|
|
1638
|
+
width: 28px;
|
|
1639
|
+
height: 28px;
|
|
1640
|
+
flex: 0 0 auto;
|
|
1641
|
+
vertical-align: middle;
|
|
1642
|
+
}
|
|
1643
|
+
:host([hidden]) { display: none; }
|
|
1644
|
+
|
|
1645
|
+
.snow {
|
|
1646
|
+
width: 28px;
|
|
1647
|
+
height: 28px;
|
|
1648
|
+
display: grid;
|
|
1649
|
+
place-items: center;
|
|
1650
|
+
border-radius: 50%;
|
|
1651
|
+
background: var(--ghost);
|
|
1652
|
+
border: 1px solid var(--line);
|
|
1653
|
+
color: var(--txt-2);
|
|
1654
|
+
line-height: 1;
|
|
1655
|
+
flex: 0 0 auto;
|
|
1656
|
+
font-family: var(--ui);
|
|
1657
|
+
}
|
|
1658
|
+
|
|
1659
|
+
/* thawing — rose flash (prototype: .fzcard.thawed .snow) */
|
|
1660
|
+
:host([thawed]) .snow {
|
|
1661
|
+
border-color: color-mix(in srgb, var(--rose) 45%, var(--line));
|
|
1662
|
+
background: color-mix(in srgb, var(--rose) 14%, var(--canvas));
|
|
1663
|
+
color: #b91c4d;
|
|
1664
|
+
}
|
|
1665
|
+
|
|
1666
|
+
/* slotted overrides + the default lucide glyph; the slot's fallback shows when
|
|
1667
|
+
nothing is slotted */
|
|
1668
|
+
::slotted(*), .ic { line-height: 1; }
|
|
1669
|
+
.ic { display: block; }
|
|
1670
|
+
`);W(`slicc-snowflake`,class extends HTMLElement{static observedAttributes=[`thawed`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ji];let e=K(`span`,{class:`snow`,part:`badge`},K(`slot`,null,J(`snowflake`,{size:Ai,part:`glyph`,class:`ic`})));this.#e.replaceChildren(e)}get thawed(){return this.hasAttribute(`thawed`)}set thawed(e){this.toggleAttribute(`thawed`,e)}});var Mi=`
|
|
1671
|
+
slicc-freezer-card {
|
|
1672
|
+
position: relative;
|
|
1673
|
+
display: flex;
|
|
1674
|
+
align-items: center;
|
|
1675
|
+
gap: 10px;
|
|
1676
|
+
min-height: 36px;
|
|
1677
|
+
padding: 4px 8px;
|
|
1678
|
+
border-radius: 8px;
|
|
1679
|
+
cursor: pointer;
|
|
1680
|
+
flex: 0 0 auto;
|
|
1681
|
+
font-family: var(--ui);
|
|
1682
|
+
transition: background-color 0.15s;
|
|
1683
|
+
}
|
|
1684
|
+
/* Collapsed (icon-only) rail rows get a hover title — the session name appears
|
|
1685
|
+
as a dark pill to the right of the badge, mirroring the dock rail's tip.
|
|
1686
|
+
The pill is VIEWPORT-FIXED (coords stamped on hover from the row's rect):
|
|
1687
|
+
the freezer host clips its overflow for the width animation, so an
|
|
1688
|
+
absolutely-positioned tip hanging outside the 44px rail would be cut off. */
|
|
1689
|
+
slicc-freezer-card .slicc-fzcard__tip {
|
|
1690
|
+
position: fixed; left: var(--tip-x, 0); top: var(--tip-y, 0);
|
|
1691
|
+
transform: translateY(-50%) translateX(-3px);
|
|
1692
|
+
z-index: 30; background: var(--ink); color: var(--canvas, #fff);
|
|
1693
|
+
font: 500 11px var(--ui); white-space: nowrap; padding: 3px 8px; border-radius: 6px;
|
|
1694
|
+
box-shadow: 0 4px 12px -4px rgba(10,10,10,.3);
|
|
1695
|
+
opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; display: none;
|
|
1696
|
+
}
|
|
1697
|
+
slicc-freezer-card:not([expanded]) .slicc-fzcard__tip { display: block; }
|
|
1698
|
+
slicc-freezer-card:not([expanded]):hover .slicc-fzcard__tip,
|
|
1699
|
+
slicc-freezer-card:not([expanded]):focus-within .slicc-fzcard__tip { opacity: 1; transform: translateY(-50%); }
|
|
1700
|
+
slicc-freezer-card .slicc-fzcard__tip:empty { display: none; }
|
|
1701
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1702
|
+
slicc-freezer-card .slicc-fzcard__tip,
|
|
1703
|
+
slicc-freezer-card slicc-snowflake::part(badge) { transition: none; }
|
|
1704
|
+
}
|
|
1705
|
+
slicc-freezer-card[hidden] {
|
|
1706
|
+
display: none;
|
|
1707
|
+
}
|
|
1708
|
+
slicc-freezer-card:not([expanded]) {
|
|
1709
|
+
gap: 0;
|
|
1710
|
+
justify-content: center;
|
|
1711
|
+
padding: 4px 0;
|
|
1712
|
+
}
|
|
1713
|
+
slicc-freezer-card[expanded]:hover {
|
|
1714
|
+
background: var(--ghost);
|
|
1715
|
+
}
|
|
1716
|
+
/* Collapsed (icon-only) hover: a full-row ghost fill reads as a clashing
|
|
1717
|
+
rectangle around the lone centered badge, so swap it for a soft circular ring
|
|
1718
|
+
hugging the snowflake (painted on its ::part(badge) circle, which carries the
|
|
1719
|
+
50% radius) — the affordance reads as a ring, not a rectangle. Token-based. */
|
|
1720
|
+
slicc-freezer-card slicc-snowflake::part(badge) {
|
|
1721
|
+
transition: box-shadow 0.15s;
|
|
1722
|
+
}
|
|
1723
|
+
slicc-freezer-card:not([expanded]):hover slicc-snowflake::part(badge),
|
|
1724
|
+
slicc-freezer-card:not([expanded]):focus-within slicc-snowflake::part(badge) {
|
|
1725
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ctx) 35%, var(--line));
|
|
1726
|
+
}
|
|
1727
|
+
slicc-freezer-card .slicc-fzcard__text {
|
|
1728
|
+
flex: 1;
|
|
1729
|
+
min-width: 0;
|
|
1730
|
+
opacity: 0;
|
|
1731
|
+
transition: opacity 0.18s;
|
|
1732
|
+
}
|
|
1733
|
+
slicc-freezer-card:not([expanded]) .slicc-fzcard__text {
|
|
1734
|
+
width: 0;
|
|
1735
|
+
min-width: 0;
|
|
1736
|
+
flex: 0 0 0;
|
|
1737
|
+
overflow: hidden;
|
|
1738
|
+
}
|
|
1739
|
+
slicc-freezer-card[expanded] .slicc-fzcard__text {
|
|
1740
|
+
opacity: 1;
|
|
1741
|
+
transition: opacity 0.25s 0.15s;
|
|
1742
|
+
}
|
|
1743
|
+
slicc-freezer-card .slicc-fzcard__title {
|
|
1744
|
+
font-size: 12.5px;
|
|
1745
|
+
font-weight: 600;
|
|
1746
|
+
color: var(--ink);
|
|
1747
|
+
white-space: nowrap;
|
|
1748
|
+
overflow: hidden;
|
|
1749
|
+
text-overflow: ellipsis;
|
|
1750
|
+
}
|
|
1751
|
+
slicc-freezer-card .slicc-fzcard__meta {
|
|
1752
|
+
margin-top: 2px;
|
|
1753
|
+
font-family: var(--ui);
|
|
1754
|
+
font-size: 10.5px;
|
|
1755
|
+
color: var(--txt-3);
|
|
1756
|
+
white-space: nowrap;
|
|
1757
|
+
overflow: hidden;
|
|
1758
|
+
text-overflow: ellipsis;
|
|
1759
|
+
}
|
|
1760
|
+
slicc-freezer-card[thawed] {
|
|
1761
|
+
background: color-mix(in srgb, var(--rose) 12%, transparent);
|
|
1762
|
+
}
|
|
1763
|
+
`,Ni=`slicc-freezer-card-style`;function Pi(e){if(e.getElementById(Ni))return;let t=e.createElement(`style`);t.id=Ni,t.textContent=Mi,(e.head??e.documentElement).appendChild(t)}var Fi=1400,Ii=14;W(`slicc-freezer-card`,class extends HTMLElement{static observedAttributes=[`title`,`meta`,`slug`,`icon`,`thawed`];#e;#t;#n;#r;#i=null;#a=null;#o=!1;#s=null;#c=()=>this.#u();#l=()=>{if(!this.#i)return;let e=this.getBoundingClientRect();this.#i.style.setProperty(`--tip-x`,`${e.right+8}px`),this.#i.style.setProperty(`--tip-y`,`${e.top+e.height/2}px`)};connectedCallback(){Pi(this.ownerDocument),this.#d(),this.#f()}disconnectedCallback(){this.removeEventListener(`click`,this.#c),this.removeEventListener(`pointerenter`,this.#l),this.removeEventListener(`focusin`,this.#l),this.#s!=null&&(clearTimeout(this.#s),this.#s=null)}attributeChangedCallback(e,t,n){t===n||!this.#o||(e===`thawed`?this.#e.toggleAttribute(`thawed`,n!==null):e===`icon`?this.#p():this.#f())}get title(){return this.getAttribute(`title`)??``}set title(e){e==null?this.removeAttribute(`title`):this.setAttribute(`title`,e)}get meta(){return this.getAttribute(`meta`)??``}set meta(e){e==null?this.removeAttribute(`meta`):this.setAttribute(`meta`,e)}get slug(){return this.getAttribute(`slug`)??``}set slug(e){e==null?this.removeAttribute(`slug`):this.setAttribute(`slug`,e)}get icon(){return this.getAttribute(`icon`)}set icon(e){e==null?this.removeAttribute(`icon`):this.setAttribute(`icon`,e)}get expanded(){return this.hasAttribute(`expanded`)}set expanded(e){this.toggleAttribute(`expanded`,e)}get thawed(){return this.hasAttribute(`thawed`)}set thawed(e){this.toggleAttribute(`thawed`,e)}get hidden(){return this.hasAttribute(`hidden`)}set hidden(e){this.toggleAttribute(`hidden`,e)}get badge(){return this.#d(),this.#e}#u(){this.dispatchEvent(new CustomEvent(`freezer-card-select`,{bubbles:!0,composed:!0,detail:{slug:this.slug}})),this.flashThaw()}flashThaw(e=Fi){this.#s!=null&&clearTimeout(this.#s),this.thawed=!0,this.#s=setTimeout(()=>{this.thawed=!1,this.#s=null},e)}#d(){if(this.#o)return;this.#o=!0;let e=this.querySelector(`:scope > .slicc-fzcard__text`);if(e instanceof HTMLElement){this.#t=e,this.#n=e.querySelector(`.slicc-fzcard__title`),this.#r=e.querySelector(`.slicc-fzcard__meta`),this.#e=this.querySelector(`:scope > slicc-snowflake`),this.#i=this.querySelector(`:scope > .slicc-fzcard__tip`),this.addEventListener(`click`,this.#c),this.addEventListener(`pointerenter`,this.#l),this.addEventListener(`focusin`,this.#l);return}let t=Array.from(this.childNodes);this.#e=this.ownerDocument.createElement(`slicc-snowflake`),this.#e.setAttribute(`part`,`badge`),this.#n=K(`div`,{class:`slicc-fzcard__title`,part:`title`}),this.#r=K(`div`,{class:`slicc-fzcard__meta`,part:`meta`}),this.#t=K(`div`,{class:`slicc-fzcard__text`,part:`text`},this.#n,this.#r);for(let e of t)this.#n.appendChild(e);this.#i=K(`span`,{class:`slicc-fzcard__tip`,part:`tip`,"aria-hidden":`true`}),this.replaceChildren(this.#e,this.#t,this.#i),this.addEventListener(`click`,this.#c),this.addEventListener(`pointerenter`,this.#l),this.addEventListener(`focusin`,this.#l)}#f(){if(!this.#o)return;let e=this.getAttribute(`title`);e!=null&&(this.#n.textContent=e),this.#r.textContent=this.meta,this.#i&&(this.#i.textContent=e??(this.#n.textContent||``)),this.#e.toggleAttribute(`thawed`,this.thawed),this.#p()}#p(){if(!this.#o)return;let e=this.getAttribute(`icon`);if(e){let t=J(e,{size:Ii,class:`ic`,part:`icon`});this.#a?this.#a.replaceWith(t):this.#e.appendChild(t),this.#a=t}else this.#a&&=(this.#a.remove(),null)}});var Li=`square-pen`,Ri=`loader-circle`,zi=16,Bi=`New chat`,Vi=350,Hi=[[`save`,`archive`,`Save & start new`],[`skip`,`fast-forward`,`New chat — skip memory`],[`erase`,`trash-2`,`Erase & start new`]],Ui=q(`
|
|
1764
|
+
:host { display: block; }
|
|
1765
|
+
:host([hidden]) { display: none; }
|
|
1766
|
+
*{ box-sizing: border-box; }
|
|
1767
|
+
|
|
1768
|
+
/* .fznew — full-width new-chat button at the top of the freezer rail */
|
|
1769
|
+
.fznew {
|
|
1770
|
+
display: flex;
|
|
1771
|
+
align-items: center;
|
|
1772
|
+
gap: 10px;
|
|
1773
|
+
min-height: 36px;
|
|
1774
|
+
padding: 4px 8px;
|
|
1775
|
+
margin-bottom: 4px;
|
|
1776
|
+
border-radius: 8px;
|
|
1777
|
+
cursor: pointer;
|
|
1778
|
+
flex: 0 0 auto;
|
|
1779
|
+
background: transparent;
|
|
1780
|
+
border: none;
|
|
1781
|
+
color: var(--ink);
|
|
1782
|
+
font: inherit;
|
|
1783
|
+
font-family: var(--ui);
|
|
1784
|
+
text-align: left;
|
|
1785
|
+
width: 100%;
|
|
1786
|
+
transition: background-color .15s;
|
|
1787
|
+
}
|
|
1788
|
+
/* collapsed (icon-only) — prototype: .freezer:not(.open) .fznew */
|
|
1789
|
+
:host(:not([expanded])) .fznew {
|
|
1790
|
+
gap: 0;
|
|
1791
|
+
justify-content: center;
|
|
1792
|
+
padding: 4px 0;
|
|
1793
|
+
width: auto;
|
|
1794
|
+
align-self: center;
|
|
1795
|
+
}
|
|
1796
|
+
.fznew:hover { background: var(--ghost); }
|
|
1797
|
+
.fznew:focus-visible { outline: 2px solid var(--ctx); outline-offset: 2px; }
|
|
1798
|
+
|
|
1799
|
+
/* .nico — 28px circular icon badge, context-tinted with --ctx */
|
|
1800
|
+
.nico {
|
|
1801
|
+
width: 28px;
|
|
1802
|
+
height: 28px;
|
|
1803
|
+
display: grid;
|
|
1804
|
+
place-items: center;
|
|
1805
|
+
border-radius: 50%;
|
|
1806
|
+
background: color-mix(in srgb, var(--ctx) 14%, var(--canvas));
|
|
1807
|
+
border: 1px solid color-mix(in srgb, var(--ctx) 40%, var(--line));
|
|
1808
|
+
color: var(--ctx);
|
|
1809
|
+
flex: 0 0 auto;
|
|
1810
|
+
}
|
|
1811
|
+
.nico svg { display: block; }
|
|
1812
|
+
|
|
1813
|
+
/* .nlbl — "New chat" label, fades in when expanded. Weight 500 (lighter than
|
|
1814
|
+
the prototype's 600) to sit with the rest of the rail's UI text. */
|
|
1815
|
+
.nlbl {
|
|
1816
|
+
flex: 1;
|
|
1817
|
+
min-width: 0;
|
|
1818
|
+
font-size: 12.5px;
|
|
1819
|
+
font-weight: 500;
|
|
1820
|
+
color: var(--ink);
|
|
1821
|
+
white-space: nowrap;
|
|
1822
|
+
overflow: hidden;
|
|
1823
|
+
text-overflow: ellipsis;
|
|
1824
|
+
opacity: 0;
|
|
1825
|
+
transition: opacity .18s;
|
|
1826
|
+
}
|
|
1827
|
+
:host(:not([expanded])) .nlbl {
|
|
1828
|
+
width: 0;
|
|
1829
|
+
min-width: 0;
|
|
1830
|
+
flex: 0 0 0;
|
|
1831
|
+
overflow: hidden;
|
|
1832
|
+
}
|
|
1833
|
+
:host([expanded]) .nlbl {
|
|
1834
|
+
opacity: 1;
|
|
1835
|
+
transition: opacity .25s .15s;
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
/* .fznew-options — the three gesture actions, surfaced as a small legend of
|
|
1839
|
+
directly-clickable rows. Hidden at rest; in expanded mode they are revealed
|
|
1840
|
+
only on hover or keyboard focus (focus-within), so the rail stays calm by
|
|
1841
|
+
default and the legend is a discoverable hover affordance rather than
|
|
1842
|
+
persistent chrome. Collapsed, the press gesture on the badge is the only
|
|
1843
|
+
affordance. */
|
|
1844
|
+
.fznew-options { display: none; }
|
|
1845
|
+
:host([expanded]:hover) .fznew-options,
|
|
1846
|
+
:host([expanded]:focus-within) .fznew-options {
|
|
1847
|
+
display: flex;
|
|
1848
|
+
flex-direction: column;
|
|
1849
|
+
gap: 1px;
|
|
1850
|
+
margin: 2px 0 4px;
|
|
1851
|
+
padding-left: 38px;
|
|
1852
|
+
}
|
|
1853
|
+
.fznew-opt {
|
|
1854
|
+
appearance: none;
|
|
1855
|
+
background: transparent;
|
|
1856
|
+
border: none;
|
|
1857
|
+
margin: 0;
|
|
1858
|
+
font: inherit;
|
|
1859
|
+
font-family: var(--ui);
|
|
1860
|
+
font-size: 11px;
|
|
1861
|
+
font-weight: 500;
|
|
1862
|
+
color: var(--txt-3);
|
|
1863
|
+
text-align: left;
|
|
1864
|
+
padding: 3px 6px;
|
|
1865
|
+
border-radius: 6px;
|
|
1866
|
+
cursor: pointer;
|
|
1867
|
+
display: flex;
|
|
1868
|
+
align-items: center;
|
|
1869
|
+
gap: 6px;
|
|
1870
|
+
white-space: nowrap;
|
|
1871
|
+
}
|
|
1872
|
+
.fznew-opt:hover { background: var(--ghost); color: var(--ink); }
|
|
1873
|
+
.fznew-opt:focus-visible { outline: 2px solid var(--ctx); outline-offset: 1px; }
|
|
1874
|
+
.fznew-opt svg { display: block; flex: 0 0 auto; }
|
|
1875
|
+
|
|
1876
|
+
/* .fznew-spinner — busy/pending progress: the badge glyph swaps to a spinning
|
|
1877
|
+
lucide loader the moment the new-chat work is kicked off (optimistically on a
|
|
1878
|
+
save click, or whenever the host sets the busy attribute), so there is
|
|
1879
|
+
immediate feedback before any save/reload completes. */
|
|
1880
|
+
.fznew-spinner { display: grid; place-items: center; color: var(--ctx); }
|
|
1881
|
+
.fznew-spinner svg { display: block; animation: slicc-fznew-spin 0.8s linear infinite; }
|
|
1882
|
+
@keyframes slicc-fznew-spin { to { transform: rotate(360deg); } }
|
|
1883
|
+
|
|
1884
|
+
/* Respect prefers-reduced-motion: no fade, no spin — just hold the static end
|
|
1885
|
+
state (the loader glyph still shows, it simply does not rotate). */
|
|
1886
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1887
|
+
.fznew, .nlbl { transition: none; }
|
|
1888
|
+
.fznew-spinner svg { animation: none; }
|
|
1889
|
+
}
|
|
1890
|
+
`);W(`slicc-freezer-new`,class extends HTMLElement{static observedAttributes=[`expanded`,`label`,`busy`];#e;#t=null;#n=null;#r=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Ui]}connectedCallback(){this.#i()}disconnectedCallback(){this.#n?.destroy(),this.#n=null,this.#s()}attributeChangedCallback(){this.isConnected&&this.#i()}get expanded(){return this.hasAttribute(`expanded`)}set expanded(e){this.toggleAttribute(`expanded`,e)}get label(){return this.getAttribute(`label`)??Bi}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get busy(){return this.hasAttribute(`busy`)}set busy(e){this.toggleAttribute(`busy`,e)}#i(){let e=this.label,t=this.busy,n=K(`span`,{class:`nico`,part:`badge`},t?K(`span`,{class:`fznew-spinner`,part:`spinner`},J(Ri,{size:zi,part:`icon`})):K(`slot`,{name:`icon`},J(Li,{size:zi,part:`icon`}))),r=K(`span`,{class:`nlbl`,part:`label`},K(`slot`,null,e)),i=K(`button`,{class:`fznew`,part:`button`,type:`button`,"aria-label":e,title:e,"aria-busy":t?`true`:void 0},n,r);this.#t=i,this.#o(i),this.#e.replaceChildren(i,this.#a())}#a(){let e=K(`div`,{class:`fznew-options`,part:`options`});for(let[t,n,r]of Hi){let i=K(`button`,{class:`fznew-opt fznew-opt--${t}`,part:`option-${t}`,type:`button`},J(n,{size:13}),K(`span`,{class:`fznew-opt__text`},r));i.addEventListener(`click`,()=>this.#c(t)),e.appendChild(i)}return e}#o(e){this.#n?.destroy(),this.#s(),this.#n=fi(e,{onLongPress:()=>{if(this.#r!==null){this.#s(),this.#c(`skip`);return}this.#c(`erase`)},onShortClick:()=>{if(this.#r!==null){this.#s(),this.#c(`skip`);return}this.#r=setTimeout(()=>{this.#r=null,this.#c(`save`)},Vi)}})}#s(){this.#r!==null&&(clearTimeout(this.#r),this.#r=null)}#c(e){e===`save`&&(this.busy=!0),this.dispatchEvent(new CustomEvent(`new-chat-${e}`,{bubbles:!0,composed:!0}))}});var Wi=`attribute vec2 a_pos; void main(){ gl_Position = vec4(a_pos,0.0,1.0); }`,Gi=`precision highp float;
|
|
1891
|
+
uniform vec2 u_res; uniform float u_time; uniform float u_energy;
|
|
1892
|
+
uniform vec2 u_center; uniform vec3 u_evt; uniform float u_freeze; uniform float u_dark;
|
|
1893
|
+
uniform float u_density; uniform float u_falloff; uniform float u_life;
|
|
1894
|
+
uniform float u_blink; uniform float u_thick; uniform vec3 u_tint; uniform float u_scroll;
|
|
1895
|
+
vec3 themeBg(){ return mix(vec3(0.97,0.95,0.89), vec3(0.09,0.08,0.06), u_dark); }`,Ki=`
|
|
1896
|
+
float hash21(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }
|
|
1897
|
+
float vnoise(vec2 p){ vec2 i=floor(p),f=fract(p);
|
|
1898
|
+
float a=hash21(i),b=hash21(i+vec2(1.,0.)),c=hash21(i+vec2(0.,1.)),d=hash21(i+vec2(1.,1.));
|
|
1899
|
+
vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }
|
|
1900
|
+
float fbm(vec2 p){ float v=0.,a=0.5; for(int i=0;i<5;i++){ v+=a*vnoise(p); p=p*2.02+vec2(7.1,3.7); a*=0.5;} return v; }
|
|
1901
|
+
vec2 warp(vec2 p, float t){ float a=fbm(p+vec2(0.0,1.7)+t*0.10); float b=fbm(p+vec2(5.2,1.3)-t*0.08); return p+0.85*vec2(a,b); }`,qi={cone:`${Gi}${Ki}
|
|
1902
|
+
float cellCycle(vec2 q){ float s=hash21(q+11.7);
|
|
1903
|
+
return 0.5+0.32*sin(u_time*u_blink+s*6.2831)+0.18*sin(u_time*0.6*u_blink+s*19.0); }
|
|
1904
|
+
void main(){
|
|
1905
|
+
vec2 uv=gl_FragCoord.xy/u_res; float aspect=u_res.x/u_res.y;
|
|
1906
|
+
vec2 p=uv-0.5; p.x*=aspect; vec2 c=u_center-0.5; c.x*=aspect;
|
|
1907
|
+
vec3 bg=themeBg(); float dist=length(p-c);
|
|
1908
|
+
/* Chat scroll pans the (periodic) lattice with the content. */
|
|
1909
|
+
p.y-=u_scroll;
|
|
1910
|
+
float ca=cos(0.7853981634), sa=sin(0.7853981634);
|
|
1911
|
+
vec2 pr=mat2(ca,-sa,sa,ca)*p; float cells=12.0; vec2 g=pr*cells; g.x+=g.y*0.5;
|
|
1912
|
+
vec2 id=floor(g); vec2 f=fract(g)-0.5;
|
|
1913
|
+
float dia=mix(length(f),abs(f.x)+abs(f.y),0.82);
|
|
1914
|
+
float ph=hash21(id)*6.2831; float radius=0.42+0.05*sin(u_time*0.5+ph);
|
|
1915
|
+
float aa=2.2/cells; float outline=smoothstep(u_thick+aa,u_thick,abs(dia-radius));
|
|
1916
|
+
float seedDen=clamp(u_density+u_energy*0.20*exp(-dist*2.0),0.0,1.0);
|
|
1917
|
+
float selfCyc=cellCycle(id); float selfSoft=smoothstep(-0.05,0.05,seedDen-selfCyc);
|
|
1918
|
+
float selfHard=step(selfCyc,seedDen); float nbs=0.0;
|
|
1919
|
+
for(int j=-1;j<=1;j++){ for(int i=-1;i<=1;i++){ if(i==0&&j==0) continue;
|
|
1920
|
+
vec2 nb=id+vec2(float(i),float(j)); nbs+=step(cellCycle(nb),seedDen); } }
|
|
1921
|
+
float survive=smoothstep(1.5,1.9,nbs)-smoothstep(3.1,3.5,nbs);
|
|
1922
|
+
float birth=smoothstep(2.6,3.0,nbs)-smoothstep(3.0,3.4,nbs);
|
|
1923
|
+
float gol=clamp(selfHard*survive+(1.0-selfHard)*birth,0.0,1.0);
|
|
1924
|
+
float golMix=1.0-smoothstep(0.0,max(u_life,0.001),dist);
|
|
1925
|
+
float onState=mix(selfSoft,gol,golMix);
|
|
1926
|
+
float falloff=clamp(1.0-u_falloff*max(dist-0.12,0.0),0.0,1.0);
|
|
1927
|
+
falloff=clamp(falloff+u_energy*0.30*exp(-dist*2.0),0.0,1.0); onState*=falloff;
|
|
1928
|
+
float bevel=clamp(0.5-(f.x-f.y)*0.9,0.0,1.0);
|
|
1929
|
+
vec3 lineCol=mix(vec3(0.78,0.55,0.30),vec3(0.86,0.62,0.36),u_dark);
|
|
1930
|
+
vec3 hiCol=mix(vec3(0.90,0.72,0.46),vec3(0.92,0.74,0.48),u_dark);
|
|
1931
|
+
vec3 tint=mix(lineCol,hiCol,bevel*0.6); float stroke=outline*onState;
|
|
1932
|
+
// Low-contrast lattice: chat prose sits DIRECTLY on this field (the frosted
|
|
1933
|
+
// reading card is gone), so strokes stay close to the base color — toward
|
|
1934
|
+
// the light bg in light mode, toward the dark bg in dark mode.
|
|
1935
|
+
vec3 col=mix(bg,tint,clamp(stroke*0.20,0.0,0.20));
|
|
1936
|
+
col+=u_evt*u_energy*stroke*exp(-dist*dist*4.0)*0.18;
|
|
1937
|
+
gl_FragColor=vec4(col,1.0);
|
|
1938
|
+
}`,scoop:`${Gi}${Ki}
|
|
1939
|
+
vec3 pal(float t){ vec3 strawberry=vec3(1.0,0.45,0.62); vec3 vanilla=vec3(1.0,0.95,0.82);
|
|
1940
|
+
vec3 pistachio=vec3(0.60,0.86,0.52);
|
|
1941
|
+
vec3 col=mix(strawberry,vanilla,smoothstep(0.0,0.5,t)); col=mix(col,pistachio,smoothstep(0.5,1.0,t)); return col; }
|
|
1942
|
+
void main(){
|
|
1943
|
+
vec2 uv=gl_FragCoord.xy/u_res; float aspect=u_res.x/u_res.y;
|
|
1944
|
+
vec2 p=uv-0.5; p.x*=aspect; p.y-=u_scroll; vec2 c=u_center-0.5; c.x*=aspect;
|
|
1945
|
+
vec3 bg=mix(themeBg(),u_tint,0.14); vec2 sp=p-c; float r=length(sp); float a=atan(sp.y,sp.x);
|
|
1946
|
+
float breathe=1.0+0.06*sin(u_time*0.4);
|
|
1947
|
+
float swirl=a+r*(2.2+0.8*sin(u_time*0.15))-u_time*0.18-u_energy*2.0*exp(-r*2.0);
|
|
1948
|
+
vec2 q=vec2(cos(swirl),sin(swirl))*r*breathe;
|
|
1949
|
+
vec2 w=warp(q*1.8+vec2(0.0,u_time*0.06),u_time);
|
|
1950
|
+
float n=fbm(w*1.4); n+=0.4*fbm(w*2.6-u_time*0.05); n=clamp(n/1.4,0.0,1.0);
|
|
1951
|
+
float ribbon=fbm(w*2.2+n*1.5); float t=clamp(n*0.7+ribbon*0.4,0.0,1.0);
|
|
1952
|
+
vec3 ice=pal(t); float hl=smoothstep(0.45,0.7,ribbon); ice=mix(ice,ice+vec3(0.18),hl*0.6);
|
|
1953
|
+
ice=mix(ice,u_tint,clamp(0.32+hl*0.30,0.0,0.85)); ice+=u_energy*u_evt*0.4*exp(-r*1.5);
|
|
1954
|
+
ice*=0.95+0.08*sin(u_time*0.4); float mask=smoothstep(0.62,0.0,r);
|
|
1955
|
+
vec3 col=mix(bg,ice,clamp(mask,0.0,1.0)*0.80); col+=ice*mask*hl*0.12;
|
|
1956
|
+
gl_FragColor=vec4(col,1.0);
|
|
1957
|
+
}`,freezer:`${Gi}${Ki}
|
|
1958
|
+
/* Inside-of-a-freezer ground: icy WHITE in light mode (never the warm theme
|
|
1959
|
+
canvas — blue-on-beige read as sand, not frost), cold blue-black in dark. */
|
|
1960
|
+
vec3 freezerBg(){ return mix(vec3(0.965,0.98,1.0), vec3(0.05,0.08,0.13), u_dark); }
|
|
1961
|
+
void main(){
|
|
1962
|
+
vec2 uv=gl_FragCoord.xy/u_res; uv.y-=u_scroll; float aspect=u_res.x/u_res.y; vec2 p=(uv-0.5); p.x*=aspect;
|
|
1963
|
+
/* Glacial clock: frost creeps, it never flows. */
|
|
1964
|
+
float t=u_time*0.08;
|
|
1965
|
+
vec3 iceCol=mix(vec3(0.55,0.80,1.0),vec3(0.36,0.52,0.78),u_dark);
|
|
1966
|
+
vec3 deepIce=mix(vec3(0.20,0.44,0.84),vec3(0.12,0.24,0.46),u_dark);
|
|
1967
|
+
vec3 bg=mix(freezerBg(),iceCol,0.10); float dc=distance(uv,vec2(0.0,0.0));
|
|
1968
|
+
float ragged=0.10*fbm(uv*6.0+3.0)+0.05*fbm(uv*14.0); float front=u_freeze*0.66+ragged-0.05;
|
|
1969
|
+
float edge=front-dc; float frozen=smoothstep(-0.04,0.06,edge); float wetBand=smoothstep(0.12,0.0,abs(edge));
|
|
1970
|
+
float ripple=0.015*sin(dc*40.0-t*0.4)*frozen; vec2 q=uv*aspect+vec2(ripple,ripple*0.5);
|
|
1971
|
+
float crystals=fbm(q*9.0); crystals+=0.5*fbm(q*20.0+4.0); crystals/=1.5;
|
|
1972
|
+
float facet=smoothstep(0.45,0.55,crystals); float veins=smoothstep(0.03,0.0,abs(fract(crystals*6.0)-0.5)-0.02);
|
|
1973
|
+
vec3 col=bg; vec3 wet=mix(bg,iceCol,0.5); float wetSpec=pow(clamp(fbm(uv*10.0-t*0.2),0.0,1.0),2.0);
|
|
1974
|
+
wet+=wetSpec*vec3(1.0)*0.25; col=mix(col,wet,wetBand*0.45);
|
|
1975
|
+
vec3 frost=mix(deepIce,iceCol,facet); frost+=veins*vec3(1.0)*0.30;
|
|
1976
|
+
float spark=smoothstep(0.92,1.0,fbm(uv*30.0))*(0.5+0.5*sin(t*0.6+crystals*20.0));
|
|
1977
|
+
frost+=spark*vec3(1.0)*0.4*frozen; col=mix(col,frost,frozen*0.85);
|
|
1978
|
+
float rim=smoothstep(0.05,0.0,abs(edge))*0.6; col+=rim*iceCol;
|
|
1979
|
+
/* The field is a BACKGROUND: chat prose sits directly on it, so the final
|
|
1980
|
+
wash pins the whole pattern close to the icy ground — the same ~20%
|
|
1981
|
+
deviation budget the cone lattice uses (strokes at 0.20 toward tint). */
|
|
1982
|
+
col=mix(freezerBg(),col,0.22);
|
|
1983
|
+
gl_FragColor=vec4(col,1.0);
|
|
1984
|
+
}`},Ji=new Set([`cone`,`scoop`,`freezer`]),Yi={cone:`radial-gradient(120% 120% at 35% 45%, color-mix(in srgb,#e0a866 40%,var(--bg)) 0%, var(--bg) 60%)`,scoop:`radial-gradient(120% 120% at 40% 50%, color-mix(in srgb,#ff9bc0 40%,var(--bg)) 0%, var(--bg) 62%)`,freezer:`radial-gradient(120% 120% at 0% 100%, color-mix(in srgb,#7fb0e6 55%,var(--bg)) 0%, var(--bg) 70%)`},Xi=q(`
|
|
1985
|
+
:host { position: relative; display: block; pointer-events: none; }
|
|
1986
|
+
.canvas, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
|
|
1987
|
+
.fallback { display: none; }
|
|
1988
|
+
:host([no-webgl]) .canvas { display: none; }
|
|
1989
|
+
:host([no-webgl]) .fallback { display: block; }`),Zi=2,Qi=.35,$i=[`u_res`,`u_scroll`,`u_time`,`u_energy`,`u_center`,`u_evt`,`u_freeze`,`u_dark`,`u_density`,`u_falloff`,`u_life`,`u_blink`,`u_thick`,`u_tint`];function ea(e,t,n,r){return Number.isFinite(e)?Math.max(t,Math.min(n,e)):r}function ta(e,t){if(!e||typeof getComputedStyle!=`function`)return t;let n=document.createElement(`span`);n.style.color=e,n.style.display=`none`,document.body.appendChild(n);let r=getComputedStyle(n).color;n.remove();let i=r.match(/[\d.]+/g)?.map(Number);return!i||i.length<3?t:[i[0]/255,i[1]/255,i[2]/255]}var na=class extends HTMLElement{static observedAttributes=[`mode`,`tint`,`coverage`,`intensity`,`scroll`];#e;#t=null;#n=null;#r=null;#i=null;#a={};#o=-1;#s=0;#c=0;#l=0;#u=null;#d=!1;#f=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Xi];let e=K(`canvas`,{class:`canvas`,part:`canvas`}),t=K(`div`,{class:`fallback`,part:`fallback`,"aria-hidden":`true`});this.#e.replaceChildren(e,t),this.#t=e}connectedCallback(){if(this.#d=typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches,this.#p(),!this.#_()){this.setAttribute(`no-webgl`,``);return}this.removeAttribute(`no-webgl`),typeof ResizeObserver<`u`&&(this.#u=new ResizeObserver(()=>this.#m()),this.#u.observe(this)),this.#c=performance.now()/1e3,this.#d?this.#b():this.#x()}disconnectedCallback(){this.#S(),this.#u?.disconnect(),this.#u=null,this.#C()}attributeChangedCallback(e){this.isConnected&&(e===`mode`&&this.#n&&this.mode!==this.#f&&this.#g(),this.#p(),this.#m())}get mode(){let e=this.getAttribute(`mode`);return e&&Ji.has(e)?e:`cone`}set mode(e){this.setAttribute(`mode`,e)}get coverage(){return ea(Number.parseFloat(this.getAttribute(`coverage`)??``),0,1,.66)}set coverage(e){this.setAttribute(`coverage`,String(e))}get intensity(){return ea(Number.parseFloat(this.getAttribute(`intensity`)??``),0,4,1)}set intensity(e){this.setAttribute(`intensity`,String(e))}get scrollOffset(){let e=Number.parseFloat(this.getAttribute(`scroll`)??``);return Number.isFinite(e)?e:0}set scrollOffset(e){this.setAttribute(`scroll`,String(e))}get noWebgl(){return this.hasAttribute(`no-webgl`)}pulse(e=1){this.#l=Math.min(1.4,this.#l+e),this.#d&&this.#b()}#p(){let e=this.#e.querySelector(`.fallback`);e&&(e.style.background=Yi[this.mode])}#m(){this.#d&&this.#n&&this.#b()}#h(e,t,n){let r=e.createShader(t);return r?(e.shaderSource(r,n),e.compileShader(r),e.getShaderParameter(r,e.COMPILE_STATUS)?r:(e.deleteShader(r),null)):null}#g(){let e=this.#n;if(!e)return!1;let t=this.#h(e,e.VERTEX_SHADER,Wi),n=this.#h(e,e.FRAGMENT_SHADER,qi[this.mode]);if(!t||!n)return!1;let r=e.createProgram();if(!r||(e.attachShader(r,t),e.attachShader(r,n),e.linkProgram(r),!e.getProgramParameter(r,e.LINK_STATUS)))return!1;this.#r&&e.deleteProgram(this.#r),this.#r=r,e.useProgram(r),this.#o=e.getAttribLocation(r,`a_pos`),this.#a={};for(let t of $i)this.#a[t]=e.getUniformLocation(r,t);return this.#f=this.mode,!0}#_(){let e=this.#t;if(!e)return!1;let t={premultipliedAlpha:!0,alpha:!0,antialias:!0},n=null;try{n=e.getContext(`webgl`,t)??e.getContext(`experimental-webgl`,t)}catch{n=null}if(!n)return!1;if(this.#n=n,!this.#g())return this.#n=null,!1;let r=n.createBuffer();return r?(this.#i=r,n.bindBuffer(n.ARRAY_BUFFER,r),n.bufferData(n.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),n.STATIC_DRAW),!0):(this.#n=null,!1)}#v(){let e=this.#t;if(!e)return;let t=Math.min(Zi,typeof window<`u`&&window.devicePixelRatio||1),n=Math.max(1,e.clientWidth*t|0),r=Math.max(1,e.clientHeight*t|0);(e.width!==n||e.height!==r)&&(e.width=n,e.height=r)}#y(){if(typeof getComputedStyle!=`function`)return 0;let e=getComputedStyle(this).getPropertyValue(`--ink`).trim();if(!e)return 0;let[t,n,r]=ta(e,[0,0,0]);return+(.2126*t+.7152*n+.0722*r>.5)}#b(){let e=this.#n,t=this.#t,n=this.#r;if(!e||!t||!n||!this.#i)return;this.#v();let r=performance.now()/1e3-this.#c,i=.5+.5*Math.sin(r*.12),a=.5+.5*Math.sin(r*.097+1),o=.2*(1-i)+.46*i,s=.74*(1-a)+.3*a,c=this.#y(),l=ta(this.getAttribute(`tint`)??``,[.545,.361,.965]),u=ta(this.getAttribute(`tint`)??``,[.957,.247,.369]);e.viewport(0,0,t.width,t.height),e.useProgram(n),e.bindBuffer(e.ARRAY_BUFFER,this.#i),e.enableVertexAttribArray(this.#o),e.vertexAttribPointer(this.#o,2,e.FLOAT,!1,0,0);let d=this.#a;e.uniform2f(d.u_res??null,t.width,t.height),e.uniform1f(d.u_time??null,r),e.uniform1f(d.u_energy??null,this.#l),e.uniform2f(d.u_center??null,o,s),e.uniform3f(d.u_evt??null,u[0],u[1],u[2]),e.uniform1f(d.u_freeze??null,ea(this.coverage*this.intensity,0,1,.66)*2.2),e.uniform1f(d.u_dark??null,c),e.uniform1f(d.u_scroll??null,this.scrollOffset*Qi/Math.max(1,t.clientHeight||t.height)),e.uniform1f(d.u_density??null,.29),e.uniform1f(d.u_falloff??null,.3),e.uniform1f(d.u_life??null,.35),e.uniform1f(d.u_blink??null,.05),e.uniform1f(d.u_thick??null,.02),e.uniform3f(d.u_tint??null,l[0],l[1],l[2]),e.drawArrays(e.TRIANGLES,0,3),this.#l*=.95,this.#l<.001&&(this.#l=0)}#x(){if(this.#s)return;let e=()=>{this.#b(),this.#s=requestAnimationFrame(e)};this.#s=requestAnimationFrame(e)}#S(){this.#s&&cancelAnimationFrame(this.#s),this.#s=0}#C(){let e=this.#n;e&&(this.#i&&e.deleteBuffer(this.#i),this.#r&&e.deleteProgram(this.#r),e.getExtension(`WEBGL_lose_context`)?.loseContext()),this.#n=null,this.#r=null,this.#i=null,this.#f=null}};W(`slicc-shader`,na),W(`slicc-frost-shader`,class extends na{connectedCallback(){this.getAttribute(`mode`)!==`freezer`&&this.setAttribute(`mode`,`freezer`),super.connectedCallback()}});var ra=new Set([`user`,`feedback`,`project`]),ia={user:{hue:`--rose`,label:`user`},feedback:{hue:`--cyan`,label:`feedback`},project:{hue:`--violet`,label:`project`}};function aa(e){return e===`feedback`||e===`project`?e:`user`}var oa=q(`
|
|
1990
|
+
:host {
|
|
1991
|
+
display: inline-flex;
|
|
1992
|
+
vertical-align: middle;
|
|
1993
|
+
--mtag-fill: 12%;
|
|
1994
|
+
--mtag-border: 28%;
|
|
1995
|
+
}
|
|
1996
|
+
:host([hidden]) { display: none; }
|
|
1997
|
+
.mtag {
|
|
1998
|
+
display: inline-flex;
|
|
1999
|
+
align-items: center;
|
|
2000
|
+
box-sizing: border-box;
|
|
2001
|
+
font-family: var(--ui);
|
|
2002
|
+
font-size: 10px;
|
|
2003
|
+
line-height: 1.4;
|
|
2004
|
+
border-radius: 26px;
|
|
2005
|
+
padding: 1px 8px;
|
|
2006
|
+
white-space: nowrap;
|
|
2007
|
+
color: var(--mtag-hue, var(--rose));
|
|
2008
|
+
background: color-mix(in srgb, var(--mtag-hue, var(--rose)) var(--mtag-fill), var(--canvas));
|
|
2009
|
+
border: 1px solid color-mix(in srgb, var(--mtag-hue, var(--rose)) var(--mtag-border), var(--line));
|
|
2010
|
+
}
|
|
2011
|
+
`),sa=`slicc-memtag-dark`,ca=`
|
|
2012
|
+
.dark slicc-memtag,
|
|
2013
|
+
[data-theme="dark"] slicc-memtag {
|
|
2014
|
+
--mtag-fill: 22%;
|
|
2015
|
+
--mtag-border: 38%;
|
|
2016
|
+
}
|
|
2017
|
+
`;function la(e){if(e.getElementById(sa))return;let t=e.createElement(`style`);t.id=sa,t.textContent=ca,(e.head??e.documentElement).appendChild(t)}W(`slicc-memtag`,class extends HTMLElement{static observedAttributes=[`type`,`label`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[oa]}connectedCallback(){la(this.ownerDocument),this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get type(){return aa(this.getAttribute(`type`))}set type(e){this.setAttribute(`type`,ra.has(e)?e:`user`)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#t(){let{hue:e,label:t}=ia[this.type],n=this.label??K(`slot`,null,t),r=K(`span`,{class:`mtag`,part:`tag`,style:`--mtag-hue:var(${e})`},n);this.#e.replaceChildren(r)}});var ua=`
|
|
2018
|
+
slicc-memrow {
|
|
2019
|
+
display: block;
|
|
2020
|
+
border: 1px solid var(--line);
|
|
2021
|
+
border-radius: 11px;
|
|
2022
|
+
padding: 11px 13px;
|
|
2023
|
+
margin-bottom: 9px;
|
|
2024
|
+
font-family: var(--ui);
|
|
2025
|
+
color: var(--ink);
|
|
2026
|
+
}
|
|
2027
|
+
slicc-memrow .mt {
|
|
2028
|
+
display: flex;
|
|
2029
|
+
align-items: center;
|
|
2030
|
+
gap: 8px;
|
|
2031
|
+
}
|
|
2032
|
+
slicc-memrow .mt b {
|
|
2033
|
+
font-size: 13px;
|
|
2034
|
+
font-weight: 600;
|
|
2035
|
+
}
|
|
2036
|
+
slicc-memrow .mtag {
|
|
2037
|
+
margin-left: auto;
|
|
2038
|
+
font-family: var(--ui);
|
|
2039
|
+
font-size: 10px;
|
|
2040
|
+
border-radius: 26px;
|
|
2041
|
+
padding: 1px 8px;
|
|
2042
|
+
}
|
|
2043
|
+
slicc-memrow slicc-memtag {
|
|
2044
|
+
margin-left: auto;
|
|
2045
|
+
}
|
|
2046
|
+
slicc-memrow .ms {
|
|
2047
|
+
font-size: 12.5px;
|
|
2048
|
+
color: var(--txt-2);
|
|
2049
|
+
margin-top: 5px;
|
|
2050
|
+
line-height: 1.5;
|
|
2051
|
+
}
|
|
2052
|
+
slicc-memrow .mtag.us {
|
|
2053
|
+
color: var(--rose);
|
|
2054
|
+
background: color-mix(in srgb, var(--rose) 12%, #fff);
|
|
2055
|
+
border: 1px solid color-mix(in srgb, var(--rose) 28%, var(--line));
|
|
2056
|
+
}
|
|
2057
|
+
slicc-memrow .mtag.fb {
|
|
2058
|
+
color: var(--cyan);
|
|
2059
|
+
background: color-mix(in srgb, var(--cyan) 12%, #fff);
|
|
2060
|
+
border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--line));
|
|
2061
|
+
}
|
|
2062
|
+
slicc-memrow .mtag.pj {
|
|
2063
|
+
color: var(--violet);
|
|
2064
|
+
background: color-mix(in srgb, var(--violet) 12%, #fff);
|
|
2065
|
+
border: 1px solid color-mix(in srgb, var(--violet) 28%, var(--line));
|
|
2066
|
+
}
|
|
2067
|
+
slicc-memrow.fresh {
|
|
2068
|
+
border-color: color-mix(in srgb, var(--rose) 45%, var(--line));
|
|
2069
|
+
background: color-mix(in srgb, var(--rose) 7%, #fff);
|
|
2070
|
+
}
|
|
2071
|
+
.dark slicc-memrow.fresh,
|
|
2072
|
+
[data-theme="dark"] slicc-memrow.fresh {
|
|
2073
|
+
background: color-mix(in srgb, var(--rose) 16%, var(--canvas));
|
|
2074
|
+
border-color: color-mix(in srgb, var(--rose) 40%, var(--line));
|
|
2075
|
+
}
|
|
2076
|
+
.dark slicc-memrow .mtag.us,
|
|
2077
|
+
[data-theme="dark"] slicc-memrow .mtag.us {
|
|
2078
|
+
background: color-mix(in srgb, var(--rose) 22%, var(--canvas));
|
|
2079
|
+
border-color: color-mix(in srgb, var(--rose) 38%, var(--line));
|
|
2080
|
+
}
|
|
2081
|
+
.dark slicc-memrow .mtag.fb,
|
|
2082
|
+
[data-theme="dark"] slicc-memrow .mtag.fb {
|
|
2083
|
+
background: color-mix(in srgb, var(--cyan) 22%, var(--canvas));
|
|
2084
|
+
border-color: color-mix(in srgb, var(--cyan) 38%, var(--line));
|
|
2085
|
+
}
|
|
2086
|
+
.dark slicc-memrow .mtag.pj,
|
|
2087
|
+
[data-theme="dark"] slicc-memrow .mtag.pj {
|
|
2088
|
+
background: color-mix(in srgb, var(--violet) 22%, var(--canvas));
|
|
2089
|
+
border-color: color-mix(in srgb, var(--violet) 38%, var(--line));
|
|
2090
|
+
}
|
|
2091
|
+
`,da=`slicc-memrow-style`;function fa(e){if(e.getElementById(da))return;let t=e.createElement(`style`);t.id=da,t.textContent=ua,(e.head??e.documentElement).appendChild(t)}function pa(e){return e===`feedback`||e===`project`?e:`user`}W(`slicc-memrow`,class extends HTMLElement{static get observedAttributes(){return[`title`,`summary`,`tag`,`fresh`]}#e=!1;#t=null;#n=null;#r=null;#i=null;#a=null;#o=null;connectedCallback(){fa(this.ownerDocument),this.#e||this.#s(),this.#c(),this.#l()}disconnectedCallback(){this.#u()}attributeChangedCallback(){this.#e&&this.#c()}get title(){return this.getAttribute(`title`)??``}set title(e){e==null?this.removeAttribute(`title`):this.setAttribute(`title`,e)}get summary(){return this.getAttribute(`summary`)??``}set summary(e){e==null?this.removeAttribute(`summary`):this.setAttribute(`summary`,e)}get tag(){return pa(this.getAttribute(`tag`))}set tag(e){this.setAttribute(`tag`,e)}get fresh(){return this.hasAttribute(`fresh`)}set fresh(e){this.toggleAttribute(`fresh`,e)}#s(){this.#e=!0;let e=this.ownerDocument.createElement(`div`);e.className=`mt`;let t=this.ownerDocument.createElement(`b`),n=this.ownerDocument.createElement(`slicc-memtag`);e.append(t,n);let r=this.ownerDocument.createElement(`div`);for(r.className=`ms`;this.firstChild;)r.appendChild(this.firstChild);this.append(e,r),this.#t=e,this.#n=t,this.#r=n,this.#i=r}#c(){let e=this.#n,t=this.#r,n=this.#i;if(!e||!t||!n)return;e.textContent=this.title;let r=this.tag;t.className=``,t.setAttribute(`type`,r),t.textContent=``;let i=n.firstChild,a=this.summary;i&&i.nodeType===Node.TEXT_NODE?i.textContent=a:a&&n.insertBefore(this.ownerDocument.createTextNode(a),i),this.classList.toggle(`fresh`,this.fresh)}#l(){this.#a||(this.#a=e=>this.#d(e),this.addEventListener(`click`,this.#a)),this.#o||(this.#o=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.#d(e))},this.addEventListener(`keydown`,this.#o))}#u(){this.#a&&=(this.removeEventListener(`click`,this.#a),null),this.#o&&=(this.removeEventListener(`keydown`,this.#o),null)}#d(e){this.dispatchEvent(new CustomEvent(`select`,{bubbles:!0,composed:!0,detail:{title:this.title,summary:this.summary,tag:this.tag,sourceEvent:e}}))}});var ma=`
|
|
2092
|
+
slicc-palette-grid {
|
|
2093
|
+
display: block;
|
|
2094
|
+
flex: 1;
|
|
2095
|
+
overflow: auto;
|
|
2096
|
+
padding: 18px;
|
|
2097
|
+
font-family: var(--ui);
|
|
2098
|
+
color: var(--ink);
|
|
2099
|
+
}
|
|
2100
|
+
slicc-palette-grid h4 {
|
|
2101
|
+
margin: 0 0 12px;
|
|
2102
|
+
font-size: 13px;
|
|
2103
|
+
font-weight: 600;
|
|
2104
|
+
}
|
|
2105
|
+
slicc-palette-grid .palgrid {
|
|
2106
|
+
display: grid;
|
|
2107
|
+
grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
|
|
2108
|
+
gap: 10px;
|
|
2109
|
+
}
|
|
2110
|
+
`,ha=`slicc-palette-grid-style`;function ga(e){if(e.getElementById(ha))return;let t=e.createElement(`style`);t.id=ha,t.textContent=ma,(e.head??e.documentElement).appendChild(t)}var _a=[{label:`canvas #faf6f1`,color:`#faf6f1`},{label:`cone #ef7000`,color:`#ef7000`},{label:`scoop #8b5cf6`,color:`#8b5cf6`},{label:`scoop #06b6d4`,color:`#06b6d4`},{label:`scoop #f43f5e`,color:`#f43f5e`},{label:`ink #0a0a0a`,color:`#0a0a0a`}],va=`brand palette · tokens`;W(`slicc-palette-grid`,class extends HTMLElement{static get observedAttributes(){return[`heading`]}#e=!1;#t=null;#n=null;#r=[];#i=null;#a=null;connectedCallback(){ga(this.ownerDocument),this.#e||this.#o(),this.#s(),this.#l()}disconnectedCallback(){this.#u()}attributeChangedCallback(){this.#e&&this.#s()}get heading(){return this.getAttribute(`heading`)??va}set heading(e){e==null?this.removeAttribute(`heading`):this.setAttribute(`heading`,e)}get tokens(){return(this.#i??_a).map(e=>({...e}))}set tokens(e){this.#i=Array.isArray(e)?e.map(e=>({label:String(e.label??``),color:String(e.color??``)})):null,this.#e&&this.#c()}#o(){for(this.#e=!0,this.#r=[];this.firstChild;)this.#r.push(this.firstChild),this.removeChild(this.firstChild);let e=this.ownerDocument.createElement(`h4`),t=this.ownerDocument.createElement(`div`);t.className=`palgrid`,this.append(e,t),this.#t=e,this.#n=t,this.#c()}#s(){this.#t&&(this.#t.textContent=this.heading)}#c(){let e=this.#n;if(e){e.replaceChildren();for(let t of this.#r)e.appendChild(t);for(let t of this.tokens){let n=this.ownerDocument.createElement(`slicc-palette-cell`);n.setAttribute(`color`,t.color),n.setAttribute(`label`,t.label),e.appendChild(n)}}}#l(){this.#a||(this.#a=e=>{let t=e.detail??{};this.dispatchEvent(new CustomEvent(`select`,{bubbles:!0,composed:!0,detail:{label:t.label??``,color:t.color??``,sourceEvent:e}}))},this.addEventListener(`palette-select`,this.#a))}#u(){this.#a&&=(this.removeEventListener(`palette-select`,this.#a),null)}});var ya=q(`
|
|
2111
|
+
:host { display: inline-block; position: relative; font-family: var(--ui); }
|
|
2112
|
+
.trigger {
|
|
2113
|
+
display: inline-flex; align-items: center; justify-content: center;
|
|
2114
|
+
border: none; background: transparent; padding: 0; cursor: pointer;
|
|
2115
|
+
border-radius: 9999px; line-height: 0;
|
|
2116
|
+
}
|
|
2117
|
+
.trigger:focus-visible { outline: 2px solid var(--accent, #3b63fb); outline-offset: 2px; }
|
|
2118
|
+
/* The dropdown — anchored under the trigger, right-aligned like the prototype nav. */
|
|
2119
|
+
.pop {
|
|
2120
|
+
position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
|
|
2121
|
+
min-width: 220px;
|
|
2122
|
+
background: var(--canvas, #fff);
|
|
2123
|
+
border: 1px solid var(--line, #e1e1e1);
|
|
2124
|
+
border-radius: 12px;
|
|
2125
|
+
box-shadow: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08);
|
|
2126
|
+
padding: 8px 0;
|
|
2127
|
+
opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
|
|
2128
|
+
pointer-events: none; transition: opacity .14s ease, transform .14s ease;
|
|
2129
|
+
}
|
|
2130
|
+
:host([open]) .pop { opacity: 1; transform: none; pointer-events: auto; }
|
|
2131
|
+
.user { padding: 12px 16px; border-bottom: 1px solid var(--line, #e1e1e1); }
|
|
2132
|
+
.user .name { font-size: 14px; font-weight: 600; color: var(--ink, #131313); }
|
|
2133
|
+
.user .prov { font-size: 11px; color: var(--txt-3, #717171); margin-top: 2px; }
|
|
2134
|
+
.cap { padding: 4px 16px 8px; font-size: 11px; color: var(--txt-3, #717171); }
|
|
2135
|
+
.sep { height: 1px; background: var(--line, #e1e1e1); margin: 4px 0; }
|
|
2136
|
+
.item {
|
|
2137
|
+
display: flex; align-items: center; gap: 8px; width: 100%;
|
|
2138
|
+
padding: 8px 16px; border: none; background: transparent;
|
|
2139
|
+
color: var(--ink, #131313); font: inherit; font-size: 13px;
|
|
2140
|
+
cursor: pointer; text-align: left;
|
|
2141
|
+
transition: background .12s ease;
|
|
2142
|
+
}
|
|
2143
|
+
.item:hover, .item:focus-visible { background: var(--ghost, rgba(0,0,0,.05)); outline: none; }
|
|
2144
|
+
.item[disabled] { color: var(--txt-3, #717171); cursor: default; }
|
|
2145
|
+
.item[disabled]:hover { background: transparent; }
|
|
2146
|
+
.item.danger { color: var(--rose, #f43f5e); }
|
|
2147
|
+
.item.danger:hover { background: color-mix(in srgb, var(--rose, #f43f5e) 8%, transparent); }
|
|
2148
|
+
.item .ic { flex: 0 0 auto; display: flex; color: var(--txt-2, #505050); }
|
|
2149
|
+
.item.danger .ic { color: var(--rose, #f43f5e); }
|
|
2150
|
+
@media (prefers-reduced-motion: reduce) { .pop { transition: none; } }
|
|
2151
|
+
`);W(`slicc-avatar-menu`,class extends HTMLElement{static observedAttributes=[`open`];#e;#t;#n;#r=[];#i=null;#a=e=>{this.open&&!e.composedPath().includes(this)&&this.hide()};#o=e=>{e.key===`Escape`&&this.open&&(this.hide(),this.#t.focus())};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ya],this.#t=K(`button`,{class:`trigger`,part:`trigger`,type:`button`,"aria-haspopup":`menu`,"aria-expanded":`false`},K(`slot`)),this.#n=K(`div`,{class:`pop`,part:`popover`,role:`menu`}),this.#e.replaceChildren(this.#t,this.#n),this.#t.addEventListener(`click`,()=>this.toggle())}connectedCallback(){this.#c()}disconnectedCallback(){document.removeEventListener(`mousedown`,this.#a),document.removeEventListener(`keydown`,this.#o)}attributeChangedCallback(e){if(e===`open`){let e=this.open;this.#t.setAttribute(`aria-expanded`,e?`true`:`false`),e?(document.addEventListener(`mousedown`,this.#a),document.addEventListener(`keydown`,this.#o)):(document.removeEventListener(`mousedown`,this.#a),document.removeEventListener(`keydown`,this.#o))}}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get user(){return this.#i}set user(e){this.#i=e,this.#c()}get items(){return this.#r.map(e=>({...e}))}set items(e){this.#r=Array.isArray(e)?e.map(e=>({...e})):[],this.#c()}show(){this.open||(this.open=!0,this.#s())}hide(){this.open&&(this.open=!1,this.#s())}toggle(){this.open?this.hide():this.show()}#s(){this.dispatchEvent(new CustomEvent(`slicc-avatar-menu-toggle`,{detail:{open:this.open},bubbles:!0,composed:!0}))}#c(){let e=[];if(this.#i){let t=K(`div`,{class:`user`},K(`div`,{class:`name`},this.#i.name));this.#i.provider&&t.append(K(`div`,{class:`prov`},this.#i.provider)),e.push(t)}for(let t of this.#r)if(t.kind===`separator`)e.push(K(`div`,{class:`sep`,role:`separator`}));else if(t.kind===`caption`)e.push(K(`div`,{class:`cap`},t.label??``));else{let n=K(`button`,{class:`item${t.danger?` danger`:``}`,part:`item`,type:`button`,role:`menuitem`,"data-id":t.id??``,disabled:t.disabled?!0:void 0});t.icon&&n.append(K(`span`,{class:`ic`},J(t.icon,{size:16}))),n.append(K(`span`,{class:`lb`},t.label??``)),t.disabled||n.addEventListener(`click`,()=>this.#l(t.id??``)),e.push(n)}this.#n.replaceChildren(...e)}#l(e){this.dispatchEvent(new CustomEvent(`slicc-avatar-action`,{detail:{id:e},bubbles:!0,composed:!0})),this.hide()}});var ba=`
|
|
2152
|
+
.slicc-nav {
|
|
2153
|
+
display: flex;
|
|
2154
|
+
align-items: center;
|
|
2155
|
+
gap: 14px;
|
|
2156
|
+
box-sizing: border-box;
|
|
2157
|
+
padding: 0 24px;
|
|
2158
|
+
height: var(--barh, 44px);
|
|
2159
|
+
min-height: var(--barh, 44px);
|
|
2160
|
+
font-family: var(--ui);
|
|
2161
|
+
background: color-mix(in srgb, var(--ctx) 12%, color-mix(in srgb, var(--canvas) 68%, transparent));
|
|
2162
|
+
backdrop-filter: blur(18px) saturate(1.4);
|
|
2163
|
+
-webkit-backdrop-filter: blur(18px) saturate(1.4);
|
|
2164
|
+
border-bottom: 1px solid var(--line);
|
|
2165
|
+
flex: 0 0 auto;
|
|
2166
|
+
z-index: 4;
|
|
2167
|
+
}
|
|
2168
|
+
.slicc-nav[hidden] { display: none; }
|
|
2169
|
+
/* The flexible gap that pushes the floatbar / theme toggle / avatar to the
|
|
2170
|
+
right edge (prototype .nav .spacer{flex:1}). */
|
|
2171
|
+
.slicc-nav > .slicc-nav__spacer,
|
|
2172
|
+
.slicc-nav > .spacer { flex: 1; }
|
|
2173
|
+
/* Narrow / extension-sidebar: tighten the bar's padding + gap so the logo,
|
|
2174
|
+
the (overflowing) switcher, and the right-side controls all still fit. */
|
|
2175
|
+
@media (max-width: 560px) {
|
|
2176
|
+
.slicc-nav { gap: 8px; padding: 0 10px; }
|
|
2177
|
+
}
|
|
2178
|
+
`,xa=`slicc-nav-style`;function Sa(e){if(e.getElementById(xa))return;let t=e.createElement(`style`);t.id=xa,t.textContent=ba,(e.head??e.documentElement).appendChild(t)}W(`slicc-nav`,class extends HTMLElement{static observedAttributes=[`accent`];#e=!1;connectedCallback(){Sa(this.ownerDocument),this.classList.add(`slicc-nav`),this.setAttribute(`part`,`bar`),this.#t(),this.#n(this.getAttribute(`accent`))}attributeChangedCallback(e,t,n){e!==`accent`||t===n||this.isConnected&&(this.#n(n),this.dispatchEvent(new CustomEvent(`slicc-nav-accent-change`,{detail:{accent:n},bubbles:!0,composed:!0})))}get accent(){return this.getAttribute(`accent`)}set accent(e){e==null?this.removeAttribute(`accent`):this.setAttribute(`accent`,e)}get spacer(){return this.#t(),this.querySelector(`:scope > .slicc-nav__spacer, :scope > .spacer`)}#t(){if(this.#e||(this.#e=!0,this.querySelector(`:scope > .slicc-nav__spacer, :scope > .spacer`)))return;let e=this.ownerDocument.createElement(`div`);e.className=`slicc-nav__spacer`,e.setAttribute(`part`,`spacer`),e.setAttribute(`aria-hidden`,`true`);let t=this.querySelector(`:scope > slicc-floatbar, :scope > slicc-theme-toggle, :scope > slicc-avatar`);t?this.insertBefore(e,t):this.appendChild(e)}#n(e){e==null||e.trim()===``?this.style.removeProperty(`--ctx`):this.style.setProperty(`--ctx`,e)}});var Ca=q(`
|
|
2179
|
+
:host { display: none; }
|
|
2180
|
+
:host([open]) { display: block; }
|
|
2181
|
+
.overlay {
|
|
2182
|
+
position: fixed; inset: 0; z-index: 100;
|
|
2183
|
+
display: flex; align-items: center; justify-content: center;
|
|
2184
|
+
background: rgba(0,0,0,.55);
|
|
2185
|
+
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
|
|
2186
|
+
padding: 24px;
|
|
2187
|
+
opacity: 0; transition: opacity .16s ease;
|
|
2188
|
+
}
|
|
2189
|
+
:host([open]) .overlay { opacity: 1; }
|
|
2190
|
+
.dialog {
|
|
2191
|
+
position: relative;
|
|
2192
|
+
width: 440px; max-width: 90vw; max-height: 86vh; overflow: auto;
|
|
2193
|
+
box-sizing: border-box;
|
|
2194
|
+
background: var(--canvas, #fff);
|
|
2195
|
+
border: 1px solid var(--line, #e1e1e1);
|
|
2196
|
+
border-radius: 16px;
|
|
2197
|
+
box-shadow: 0 18px 50px -12px rgba(10,10,10,.35), 0 4px 12px -4px rgba(10,10,10,.18);
|
|
2198
|
+
padding: 22px;
|
|
2199
|
+
font-family: var(--ui);
|
|
2200
|
+
transform: translateY(8px) scale(.98); transition: transform .18s cubic-bezier(.4,0,.2,1);
|
|
2201
|
+
}
|
|
2202
|
+
:host([open]) .dialog { transform: none; }
|
|
2203
|
+
/* The card takes programmatic focus (tabindex -1) for modal focus management;
|
|
2204
|
+
suppress its focus ring — inner controls still show their own :focus-visible. */
|
|
2205
|
+
.dialog:focus { outline: none; }
|
|
2206
|
+
.title { font-size: 17px; font-weight: 700; color: var(--ink, #131313); padding-right: 28px; }
|
|
2207
|
+
.desc { font-size: 13px; color: var(--txt-2, #505050); margin-top: 6px; line-height: 1.5; }
|
|
2208
|
+
.body { margin-top: 16px; }
|
|
2209
|
+
.body::slotted(*) { font-family: var(--ui); }
|
|
2210
|
+
.footer { margin-top: 20px; display: flex; gap: 8px; justify-content: flex-end; }
|
|
2211
|
+
.footer[hidden] { display: none; }
|
|
2212
|
+
.x {
|
|
2213
|
+
position: absolute; top: 14px; right: 14px;
|
|
2214
|
+
width: 28px; height: 28px; display: grid; place-items: center;
|
|
2215
|
+
border: none; background: transparent; border-radius: 8px;
|
|
2216
|
+
color: var(--txt-3, #717171); cursor: pointer; transition: background .12s ease, color .12s ease;
|
|
2217
|
+
}
|
|
2218
|
+
.x:hover { background: var(--ghost, rgba(0,0,0,.05)); color: var(--ink, #131313); }
|
|
2219
|
+
.x svg { display: block; }
|
|
2220
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2221
|
+
.overlay, .dialog { transition: none; }
|
|
2222
|
+
}
|
|
2223
|
+
`);W(`slicc-dialog`,class extends HTMLElement{static observedAttributes=[`open`,`heading`,`description`,`no-close-button`];#e;#t;#n;#r;#i;#a;#o=null;#s=e=>{e.key===`Escape`&&this.open&&(e.stopPropagation(),this.#c(`escape`))};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Ca],this.#r=K(`div`,{class:`title`,part:`title`,id:`slicc-dialog-title`}),this.#i=K(`div`,{class:`desc`,part:`description`}),this.#a=K(`button`,{class:`x`,part:`close`,type:`button`,"aria-label":`Close`},J(`x`,{size:18}));let e=K(`div`,{class:`body`},K(`slot`)),t=K(`div`,{class:`footer`},K(`slot`,{name:`footer`}));this.#n=K(`div`,{class:`dialog`,part:`dialog`,role:`dialog`,"aria-modal":`true`,"aria-labelledby":`slicc-dialog-title`,tabindex:`-1`},this.#a,this.#r,this.#i,e,t),this.#t=K(`div`,{class:`overlay`,part:`overlay`},this.#n),this.#e.replaceChildren(this.#t),this.#a.addEventListener(`click`,()=>this.#c(`close-button`)),this.#t.addEventListener(`mousedown`,e=>{e.target===this.#t&&!this.persistent&&this.#c(`backdrop`)})}connectedCallback(){this.#u()}disconnectedCallback(){document.removeEventListener(`keydown`,this.#s,!0)}attributeChangedCallback(e){e===`open`?this.#u():this.#l()}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get heading(){return this.getAttribute(`heading`)}set heading(e){e==null?this.removeAttribute(`heading`):this.setAttribute(`heading`,e)}get description(){return this.getAttribute(`description`)}set description(e){e==null?this.removeAttribute(`description`):this.setAttribute(`description`,e)}get persistent(){return this.hasAttribute(`persistent`)}set persistent(e){this.toggleAttribute(`persistent`,e)}show(){this.open||=!0}hide(){this.open&&this.#c(`api`)}#c(e){this.open=!1,this.dispatchEvent(new CustomEvent(`slicc-dialog-close`,{detail:{reason:e},bubbles:!0,composed:!0}))}#l(){this.#r.textContent=this.heading??``,this.#r.style.display=this.heading?``:`none`,this.#i.textContent=this.description??``,this.#i.style.display=this.description?``:`none`,this.#a.style.display=this.hasAttribute(`no-close-button`)?`none`:``}#u(){this.#l(),this.open?(this.#o=this.getRootNode().activeElement,document.addEventListener(`keydown`,this.#s,!0),requestAnimationFrame(()=>this.#n.focus())):(document.removeEventListener(`keydown`,this.#s,!0),this.#o?.focus?.(),this.#o=null)}});var wa=`
|
|
2224
|
+
slicc-camera-dialog slicc-dialog::part(dialog) {
|
|
2225
|
+
width: min(560px, 92vw);
|
|
2226
|
+
}
|
|
2227
|
+
slicc-camera-dialog .slicc-camera__body {
|
|
2228
|
+
display: flex;
|
|
2229
|
+
flex-direction: column;
|
|
2230
|
+
gap: 10px;
|
|
2231
|
+
font-family: var(--ui);
|
|
2232
|
+
}
|
|
2233
|
+
slicc-camera-dialog .slicc-camera__video {
|
|
2234
|
+
width: 100%;
|
|
2235
|
+
aspect-ratio: 4 / 3;
|
|
2236
|
+
object-fit: cover;
|
|
2237
|
+
border-radius: 10px;
|
|
2238
|
+
background: #000;
|
|
2239
|
+
}
|
|
2240
|
+
/* User-facing cameras preview mirrored (like every selfie view); the captured
|
|
2241
|
+
frame stays unmirrored — the canvas draws the raw track. */
|
|
2242
|
+
slicc-camera-dialog .slicc-camera__video[data-mirrored] {
|
|
2243
|
+
transform: scaleX(-1);
|
|
2244
|
+
}
|
|
2245
|
+
slicc-camera-dialog .slicc-camera__select {
|
|
2246
|
+
font: 400 12.5px var(--ui);
|
|
2247
|
+
color: var(--ink);
|
|
2248
|
+
background: var(--canvas);
|
|
2249
|
+
border: 1px solid var(--line);
|
|
2250
|
+
border-radius: 8px;
|
|
2251
|
+
padding: 7px 9px;
|
|
2252
|
+
outline: none;
|
|
2253
|
+
width: 100%;
|
|
2254
|
+
box-sizing: border-box;
|
|
2255
|
+
}
|
|
2256
|
+
slicc-camera-dialog .slicc-camera__select:focus {
|
|
2257
|
+
border-color: var(--ctx);
|
|
2258
|
+
}
|
|
2259
|
+
slicc-camera-dialog .slicc-camera__select[hidden] {
|
|
2260
|
+
display: none;
|
|
2261
|
+
}
|
|
2262
|
+
slicc-camera-dialog .slicc-camera__status {
|
|
2263
|
+
font-size: 11.5px;
|
|
2264
|
+
color: var(--txt-3);
|
|
2265
|
+
min-height: 14px;
|
|
2266
|
+
}
|
|
2267
|
+
slicc-camera-dialog .slicc-camera__btn {
|
|
2268
|
+
display: inline-flex;
|
|
2269
|
+
align-items: center;
|
|
2270
|
+
gap: 6px;
|
|
2271
|
+
font: 500 12px var(--ui);
|
|
2272
|
+
color: var(--ink);
|
|
2273
|
+
background: transparent;
|
|
2274
|
+
border: 1px solid var(--line);
|
|
2275
|
+
border-radius: 8px;
|
|
2276
|
+
padding: 6px 12px;
|
|
2277
|
+
cursor: pointer;
|
|
2278
|
+
}
|
|
2279
|
+
slicc-camera-dialog .slicc-camera__btn:hover {
|
|
2280
|
+
background: var(--ghost);
|
|
2281
|
+
}
|
|
2282
|
+
slicc-camera-dialog .slicc-camera__btn--snap {
|
|
2283
|
+
background: var(--ink);
|
|
2284
|
+
color: var(--canvas);
|
|
2285
|
+
border-color: var(--ink);
|
|
2286
|
+
}
|
|
2287
|
+
slicc-camera-dialog .slicc-camera__btn--snap:hover {
|
|
2288
|
+
background: color-mix(in srgb, var(--ink) 85%, var(--canvas));
|
|
2289
|
+
}
|
|
2290
|
+
`,Ta=`slicc-camera-dialog-style`;function Ea(e){if(e.getElementById(Ta))return;let t=e.createElement(`style`);t.id=Ta,t.textContent=wa,(e.head??e.documentElement).appendChild(t)}var Da=`Take a photo`;W(`slicc-camera-dialog`,class extends HTMLElement{static observedAttributes=[`heading`,`preferred-device`];media=null;#e;#t;#n;#r;#i=!1;#a=null;#o=null;connectedCallback(){Ea(this.ownerDocument),this.#h()}disconnectedCallback(){this.#m()}attributeChangedCallback(e){e===`heading`&&this.#i&&this.#e.setAttribute(`heading`,this.heading)}get heading(){return this.getAttribute(`heading`)??Da}set heading(e){e==null?this.removeAttribute(`heading`):this.setAttribute(`heading`,e)}get preferredDevice(){return this.getAttribute(`preferred-device`)}set preferredDevice(e){e==null?this.removeAttribute(`preferred-device`):this.setAttribute(`preferred-device`,e)}#s(){return this.media??(typeof navigator<`u`?navigator.mediaDevices:null)??null}async open(){this.#h();let e=this.#s();if(!e)return null;try{this.#a=await this.#c(e,this.preferredDevice)}catch{return null}return this.#l(this.#a),await this.#u(e),this.#e.setAttribute(`heading`,this.heading),this.#e.show?.(),new Promise(e=>{this.#o=e})}async#c(e,t){if(t)try{return await e.getUserMedia({video:{deviceId:{exact:t}}})}catch{}return e.getUserMedia({video:!0})}#l(e){this.#t.srcObject=e,this.#t.play?.()?.catch(()=>void 0);let t=e.getVideoTracks()[0]?.getSettings?.().facingMode;this.#t.toggleAttribute(`data-mirrored`,t!==`environment`)}async#u(e){let t=[];try{t=(await e.enumerateDevices()).filter(e=>e.kind===`videoinput`)}catch{t=[]}this.#n.replaceChildren(...t.map((e,t)=>K(`option`,{value:e.deviceId},e.label||`Camera ${t+1}`)));let n=this.#a?.getVideoTracks()[0]?.getSettings?.().deviceId;n&&(this.#n.value=n),this.#n.toggleAttribute(`hidden`,t.length<2)}async#d(e){let t=this.#s();if(t){this.#r.textContent=``;try{let n=await t.getUserMedia({video:{deviceId:{exact:e}}});this.#m(),this.#a=n,this.#l(n),this.dispatchEvent(new CustomEvent(`slicc-camera-device-change`,{detail:{deviceId:e},bubbles:!0,composed:!0}))}catch{this.#r.textContent=`Could not switch camera — keeping the current one.`}}}#f(){let e=this.ownerDocument.createElement(`canvas`);if(e.width=this.#t.videoWidth,e.height=this.#t.videoHeight,e.width===0||e.height===0){this.#r.textContent=`No frame yet — give the camera a moment.`;return}e.getContext(`2d`)?.drawImage(this.#t,0,0);let t=e.toDataURL(`image/png`);this.dispatchEvent(new CustomEvent(`slicc-camera-capture`,{detail:{dataUrl:t},bubbles:!0,composed:!0})),this.#p(t)}#p(e){this.#m();let t=this.#o;this.#o=null,this.#e.hide?.(),t?.(e)}#m(){for(let e of this.#a?.getTracks()??[])e.stop();this.#a=null,this.#t&&(this.#t.srcObject=null)}#h(){if(this.#i)return;this.#i=!0,this.#t=K(`video`,{class:`slicc-camera__video`,part:`video`,autoplay:!0,muted:!0,playsinline:!0}),this.#n=K(`select`,{class:`slicc-camera__select`,part:`picker`,"aria-label":`Camera`,hidden:!0}),this.#n.addEventListener(`change`,()=>{this.#d(this.#n.value)}),this.#r=K(`div`,{class:`slicc-camera__status`});let e=K(`button`,{type:`button`,class:`slicc-camera__btn`,part:`cancel`,slot:`footer`},`Cancel`);e.addEventListener(`click`,()=>this.#p(null));let t=K(`button`,{type:`button`,class:`slicc-camera__btn slicc-camera__btn--snap`,part:`snap`,slot:`footer`},J(`camera`,{size:14}),` Snap`);t.addEventListener(`click`,()=>this.#f());let n=K(`div`,{class:`slicc-camera__body`},this.#t,this.#n,this.#r);this.#e=this.ownerDocument.createElement(`slicc-dialog`),this.#e.setAttribute(`heading`,this.heading),this.#e.append(n,e,t),this.#e.addEventListener(`slicc-dialog-close`,()=>{this.#o&&this.#p(null)}),this.append(this.#e)}});var Oa=new Set([`top`,`bottom`,`left`,`right`]),ka=q(`
|
|
2291
|
+
:host { position: relative; display: inline-flex; }
|
|
2292
|
+
:host([hidden]) { display: none; }
|
|
2293
|
+
.tip {
|
|
2294
|
+
position: absolute; z-index: 60;
|
|
2295
|
+
background: var(--ink); color: var(--canvas, #fff);
|
|
2296
|
+
font: 500 11px var(--ui, ui-sans-serif, system-ui, sans-serif);
|
|
2297
|
+
white-space: nowrap; padding: 3px 8px; border-radius: 6px;
|
|
2298
|
+
box-shadow: 0 4px 12px -4px rgba(10,10,10,.3);
|
|
2299
|
+
opacity: 0; pointer-events: none;
|
|
2300
|
+
transition: opacity .12s ease, transform .12s ease;
|
|
2301
|
+
}
|
|
2302
|
+
/* placement: the tip is centered on the cross axis and offset on the main axis,
|
|
2303
|
+
with a small slide-in from the trigger that settles on reveal. */
|
|
2304
|
+
.tip[data-p="top"] { bottom: calc(100% + 6px); left: 50%; transform: translate(-50%, 3px); }
|
|
2305
|
+
.tip[data-p="bottom"] { top: calc(100% + 6px); left: 50%; transform: translate(-50%, -3px); }
|
|
2306
|
+
.tip[data-p="left"] { right: calc(100% + 6px); top: 50%; transform: translate(3px, -50%); }
|
|
2307
|
+
.tip[data-p="right"] { left: calc(100% + 6px); top: 50%; transform: translate(-3px, -50%); }
|
|
2308
|
+
:host(:hover) .tip, :host(:focus-within) .tip, :host([open]) .tip { opacity: 1; }
|
|
2309
|
+
:host(:hover) .tip[data-p="top"], :host(:focus-within) .tip[data-p="top"], :host([open]) .tip[data-p="top"] { transform: translate(-50%, 0); }
|
|
2310
|
+
:host(:hover) .tip[data-p="bottom"], :host(:focus-within) .tip[data-p="bottom"], :host([open]) .tip[data-p="bottom"] { transform: translate(-50%, 0); }
|
|
2311
|
+
:host(:hover) .tip[data-p="left"], :host(:focus-within) .tip[data-p="left"], :host([open]) .tip[data-p="left"] { transform: translate(0, -50%); }
|
|
2312
|
+
:host(:hover) .tip[data-p="right"], :host(:focus-within) .tip[data-p="right"], :host([open]) .tip[data-p="right"] { transform: translate(0, -50%); }
|
|
2313
|
+
.tip:empty { display: none; }
|
|
2314
|
+
@media (prefers-reduced-motion: reduce) { .tip { transition: none; } }
|
|
2315
|
+
`);W(`slicc-tooltip`,class extends HTMLElement{static observedAttributes=[`label`,`placement`];#e;#t;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ka],this.#t=K(`span`,{class:`tip`,part:`tip`,role:`tooltip`,"aria-hidden":`true`}),this.#e.replaceChildren(K(`slot`),this.#t)}connectedCallback(){this.#n()}attributeChangedCallback(){this.#n()}get label(){return this.getAttribute(`label`)??``}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get placement(){let e=this.getAttribute(`placement`);return e&&Oa.has(e)?e:`top`}set placement(e){this.setAttribute(`placement`,e)}#n(){this.#t.textContent=this.label,this.#t.setAttribute(`data-p`,this.placement)}});var Aa=18,ja=16,Ma=50,Na=85,Pa=2.2,Fa={cx:55,cy:50,r:38},Ia={cx:145,cy:50,r:38},La=`http://www.w3.org/2000/svg`;function Y(e,t,...n){let r=document.createElementNS(La,e);if(t)for(let[e,n]of Object.entries(t))r.setAttribute(e,String(n));for(let e of n)r.appendChild(e);return r}var Ra={cone:{vb:`70 330 440 570`,eyes:{top:-18.5,left:17,width:70,height:44},zoom:3,glyph:96},scoop:{vb:`0 0 580 470`,eyes:{top:30,left:15,width:70,height:45},zoom:2.65,glyph:96}},za={cone:`#D2691E`,scoop:`#FFB6C1`};function Ba(e){return e<=Ma?1:e>=Na?Pa:1+(e-Ma)/(Na-Ma)*(Pa-1)}function Va(e){let t=e.replace(`#`,``);t.length===3&&(t=t.split(``).map(e=>e+e).join(``));let n=Number.parseInt(t,16);return{r:n>>16&255,g:n>>8&255,b:n&255}}function Ha(e,t,n){return`#${[e,t,n].map(e=>Math.max(0,Math.min(255,Math.round(e))).toString(16).padStart(2,`0`)).join(``)}`}function Ua(e,t){let{r:n,g:r,b:i}=Va(e),a=t<0?0:255,o=Math.abs(t);return Ha(n+(a-n)*o,r+(a-r)*o,i+(a-i)*o)}function Wa(e,t,n){return[Y(`path`,{d:`M108.22,414.88l189.84,460.03c1.36,3.3,6.09,3.16,7.25-.22l159.34-463.34c.87-2.53-1.03-5.16-3.7-5.13l-349.18,3.32c-2.74.03-4.59,2.82-3.55,5.35Z`,fill:e,stroke:t,"stroke-linejoin":`round`,"stroke-width":20}),Y(`path`,{d:`M261.93,482.48h0c15.03-15.03,4.46-40.72-16.79-40.83h0c-21.37-.11-32.14,25.72-17.03,40.83h0c9.34,9.34,24.48,9.34,33.82,0Z`,fill:n}),Y(`path`,{d:`M384.85,527.49l-51.82,51.82c-2.24,2.24-2.24,5.86,0,8.1l55.71,55.71c2.24,2.24,5.86,2.24,8.1,0h0c.62-.62,1.08-1.36,1.37-2.19l26.52-77.11c.71-2.07.18-4.36-1.37-5.91l-30.41-30.41c-2.24-2.24-5.86-2.24-8.1,0Z`,fill:n}),Y(`rect`,{x:274.59,y:463.59,width:84.73,height:95.66,rx:42.36,ry:42.36,transform:`translate(-268.79 373.91) rotate(-45)`,fill:n}),Y(`rect`,{x:291.06,y:603.84,width:72.24,height:90.24,rx:36.12,ry:36.12,transform:`translate(-363.06 421.43) rotate(-45)`,fill:n}),Y(`path`,{d:`M371.7,684.58l-25.94,25.94c-2.24,2.24-2.24,5.86,0,8.1l12.67,12.67c2.99,2.99,8.09,1.82,9.46-2.19l13.28-38.61c1.97-5.74-5.17-10.2-9.46-5.91Z`,fill:n}),Y(`path`,{d:`M159.42,564.14l2.73,6.83c1.52,3.82,6.46,4.83,9.37,1.93l2.05-2.05c2.24-2.24,2.24-5.86,0-8.1l-4.78-4.78c-4.4-4.4-11.67.39-9.37,6.17Z`,fill:n}),Y(`path`,{d:`M243.92,633.11l-48.65-48.65c-5.24-5.24-13.74-5.24-18.99,0h0c-3.8,3.8-4.97,9.49-2.98,14.47l27.77,69.54c3.58,8.95,15.14,11.33,21.96,4.51l20.89-20.89c5.24-5.24,5.24-13.74,0-18.99Z`,fill:n}),Y(`path`,{d:`M211.32,533.1h0c14.11-14.11,14.11-36.98,0-51.08l-34.94-34.94c-.72-.72-.72-1.89,0-2.62h0c1.16-1.16.34-3.15-1.3-3.16l-11.23-.06c-25.62-.13-43.23,25.72-33.73,49.51l5.37,13.45c1.82,4.55,4.54,8.68,8,12.15l16.74,16.74c14.11,14.11,36.98,14.11,51.08,0Z`,fill:n}),Y(`path`,{d:`M263.74,792.53h0c-5.69,5.69-7.45,14.23-4.46,21.71l22.5,56.36c6.92,17.34,31.68,16.74,37.75-.92l8.66-25.2c2.5-7.28.64-15.35-4.8-20.79l-31.17-31.17c-7.87-7.87-20.62-7.87-28.48,0Z`,fill:n}),Y(`path`,{d:`M392.94,503.07l40.81-40.81c2.24-2.24,5.86-2.24,8.1,0l.06.06c2.24,2.24,2.24,5.86,0,8.1l-40.81,40.81c-2.24,2.24-2.24,5.86,0,8.1l22.48,22.48c2.99,2.99,8.09,1.82,9.46-2.19l30.71-89.32c1.27-3.71-1.47-7.57-5.39-7.59l-120.63-.6c-5.11-.03-7.69,6.16-4.08,9.77l51.18,51.18c2.24,2.24,5.86,2.24,8.1,0Z`,fill:n}),Y(`rect`,{x:217.18,y:527.25,width:72.24,height:95.66,rx:36.12,ry:36.12,transform:`translate(-332.45 347.55) rotate(-45)`,fill:n}),Y(`path`,{d:`M350.28,739.46h0c-9.24-9.24-24.22-9.24-33.46,0l-13.94,13.94c-9.24,9.24-9.24,24.22,0,33.46l6.81,6.81c12.37,12.37,33.42,7.5,39.1-9.04l7.13-20.75c2.94-8.55.75-18.03-5.64-24.42Z`,fill:n}),Y(`path`,{d:`M234.18,749.12l13.2,33.06c1.52,3.82,6.46,4.83,9.37,1.93l9.93-9.93c2.24-2.24,2.24-5.86,0-8.1l-23.13-23.13c-4.4-4.4-11.67.39-9.37,6.17Z`,fill:n}),Y(`rect`,{x:236.26,y:661.25,width:67.04,height:90.24,rx:33.52,ry:33.52,transform:`translate(-420.46 397.65) rotate(-45)`,fill:n}),Y(`ellipse`,{cx:288.37,cy:404.38,rx:182.34,ry:67.01,fill:e,stroke:t,"stroke-miterlimit":10,"stroke-width":20})]}function Ga(e,t){return[Y(`path`,{d:`M566.75,340.67c0-29.85-12.97-56.87-33.96-76.47,4.8-9.98,7.44-20.71,7.44-31.9,0-38.29-30.62-71.33-74.92-86.77.33-3.07.51-6.17.51-9.3,0-69.72-84.29-126.24-188.26-126.24s-188.26,56.52-188.26,126.24c0,4,.29,7.95.83,11.86-34.94,15.4-58.48,44.25-58.48,77.34,0,18.21,7.15,35.15,19.39,49.26-25.1,19.88-41.05,49.47-41.05,82.54,0,59.85,52.15,108.37,116.49,108.37,10.83,0,21.3-1.4,31.26-3.98,31.42,41.91,83.55,69.34,142.55,69.34,64.73,0,121.2-33,151.11-81.94,63.8-.57,115.34-48.85,115.34-108.34Z`,fill:e,stroke:t,"stroke-width":20})]}function Ka(e,t,n,r,i){return[Y(`g`,{class:`eye-blink eye-${r}`},Y(`circle`,{cx:e,cy:t,r:n,fill:`#fff`,stroke:`#000`,"stroke-width":4}),Y(`g`,{class:`pupil pupil-${r}`},Y(`circle`,{cx:e,cy:t,r:i,fill:`#000`}),Y(`circle`,{cx:e-i*.3,cy:t-i*.35,r:i*.4,fill:`#fff`})))]}function qa(e,t,n){return[Y(`circle`,{cx:e,cy:t,r:n,fill:`#fff`,stroke:`#000`,"stroke-width":4}),Y(`line`,{x1:e-15,y1:t-15,x2:e+15,y2:t+15,stroke:`#000`,"stroke-width":8,"stroke-linecap":`round`}),Y(`line`,{x1:e+15,y1:t-15,x2:e-15,y2:t+15,stroke:`#000`,"stroke-width":8,"stroke-linecap":`round`})]}function Ja(e,t){if(e===`none`)return null;let n=Fa,r=Ia;return Y(`svg`,{class:`eyes-svg`,viewBox:`0 0 200 100`,width:`100%`,height:`100%`,preserveAspectRatio:`xMidYMid meet`},...e===`dead`?[...qa(n.cx,n.cy,n.r),...qa(r.cx,r.cy,r.r)]:[...Ka(n.cx,n.cy,n.r,`l`,t),...Ka(r.cx,r.cy,r.r,`r`,t)])}function Ya(e,t,n,r,i,a){let o=r-t,s=i-n,c=Math.hypot(o,s),l=Math.min(c,a),u=c>0?o/c*l:0,d=c>0?s/c*l:0;e.setAttribute(`transform`,`translate(${u},${d})`)}var Xa=q(`
|
|
2316
|
+
:host{position:relative;display:inline-block;--pill-w:190px;--label:#eef1f6;--icon-tint:color-mix(in oklab,var(--accent) 22%,transparent);}
|
|
2317
|
+
@media (prefers-color-scheme: light){:host(:not([theme="dark"])){--label:#1b2030;--icon-tint:color-mix(in oklab,var(--accent) 30%,#fff);}}
|
|
2318
|
+
/* The library's class-based dark scope (body.dark / .dark / [data-theme=dark])
|
|
2319
|
+
reaches the host via :host-context, so the label stays readable in dark mode
|
|
2320
|
+
even when the OS prefers-color-scheme is light. Ordered BEFORE the explicit
|
|
2321
|
+
theme rules so a per-element theme="light"/"dark" attribute still overrides. */
|
|
2322
|
+
:host-context(.dark),:host-context([data-theme="dark"]){--label:#eef1f6;--icon-tint:color-mix(in oklab,var(--accent) 22%,transparent);}
|
|
2323
|
+
:host([theme="light"]){--label:#1b2030;--icon-tint:color-mix(in oklab,var(--accent) 30%,#fff);}
|
|
2324
|
+
:host([theme="dark"]){--label:#eef1f6;--icon-tint:color-mix(in oklab,var(--accent) 22%,transparent);}
|
|
2325
|
+
*{box-sizing:border-box;}
|
|
2326
|
+
.pill{position:relative;display:inline-flex;align-items:center;gap:8px;width:var(--pill-w);font:500 13px ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--accent);background:transparent;border:1.5px solid var(--accent);border-radius:9999px;padding:0 14px 0 0;cursor:pointer;line-height:1;overflow:hidden;transition:background .2s ease,color .2s ease;}
|
|
2327
|
+
.pill.active{background:var(--accent);} .pill.active .label{color:#fff;}
|
|
2328
|
+
.pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
|
|
2329
|
+
/* The face wash fades radially into the pill ground instead of ending in a
|
|
2330
|
+
hard rectangle — most visible on the ACTIVE pill, where the flat tint box
|
|
2331
|
+
used to cut against the accent fill right of the eyes. */
|
|
2332
|
+
.icon{position:relative;z-index:0;width:30px;height:30px;flex:0 0 auto;background:radial-gradient(135% 145% at 20% 78%,var(--icon-tint) 42%,transparent 75%);}
|
|
2333
|
+
.icon-inner{position:absolute;inset:0;transform-origin:0 0;transform:translate(var(--tx),var(--ty)) scale(var(--zoom));transition:transform .4s cubic-bezier(.34,1.4,.5,1);}
|
|
2334
|
+
.pill:hover .icon-inner,.pill:focus-visible .icon-inner{transform:translate(var(--ox,0%),var(--oy,0%)) scale(var(--ozoom,1));}
|
|
2335
|
+
.glyph{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--g);height:var(--g);display:block;overflow:visible;}
|
|
2336
|
+
.eyes{position:absolute;pointer-events:none;} .eyes-svg{display:block;overflow:visible;}
|
|
2337
|
+
/* Periodic eyelid blink (mirrors slicc-googly-eyes): a quick scaleY squash.
|
|
2338
|
+
The two eyes run different cycle lengths so the blink drifts in and out of
|
|
2339
|
+
sync and never feels metronomic. Dead eyes have no .eye-blink wrapper. */
|
|
2340
|
+
@keyframes slicc-pill-blink{0%,92%,100%{transform:scaleY(1);}96%{transform:scaleY(0.08);}}
|
|
2341
|
+
:host([blink]) .eye-blink{transform-box:fill-box;transform-origin:center;animation:slicc-pill-blink 3.4s ease-in-out infinite;}
|
|
2342
|
+
:host([blink]) .eye-blink.eye-r{animation-duration:4.6s;}
|
|
2343
|
+
@media (prefers-reduced-motion: reduce){:host([blink]) .eye-blink{animation:none;}}
|
|
2344
|
+
.label{position:relative;z-index:1;flex:1 1 auto;min-width:0;color:var(--label);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
|
|
2345
|
+
/* Compact chip: just the eyes/glyph (no label), with the title on hover. The
|
|
2346
|
+
[compact] attribute forces it; a narrow / extension-sidebar viewport (≤560px)
|
|
2347
|
+
applies it automatically so the header switcher fits. */
|
|
2348
|
+
:host([compact]) .pill{width:auto;padding:0;}
|
|
2349
|
+
:host([compact]) .label{display:none;}
|
|
2350
|
+
@media (max-width:560px){ .pill{width:auto;padding:0;} .label{display:none;} }
|
|
2351
|
+
/* The hover title lives on the host (the .pill clips its overflow), shown only
|
|
2352
|
+
in compact mode on hover/focus. Dark pill, like the prototype dock .tip. */
|
|
2353
|
+
.tip{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(-3px);
|
|
2354
|
+
background:var(--ink);color:var(--canvas,#fff);font:500 11px ui-sans-serif,system-ui,sans-serif;
|
|
2355
|
+
white-space:nowrap;padding:3px 8px;border-radius:6px;opacity:0;pointer-events:none;
|
|
2356
|
+
transition:opacity .12s ease,transform .12s ease;z-index:30;display:none;}
|
|
2357
|
+
:host([compact]) .tip{display:block;}
|
|
2358
|
+
@media (max-width:560px){ .tip{display:block;} }
|
|
2359
|
+
:host([compact]:hover) .tip,:host([compact]:focus-within) .tip{opacity:1;transform:translateX(-50%);}
|
|
2360
|
+
@media (max-width:560px){ :host(:hover) .tip,:host(:focus-within) .tip{opacity:1;transform:translateX(-50%);} }
|
|
2361
|
+
@media (prefers-reduced-motion: reduce){ .tip{transition:none;} }
|
|
2362
|
+
`);W(`slicc-pill`,class extends HTMLElement{static observedAttributes=[`type`,`color`,`eyes`,`active`,`label`,`pupil`,`fill`,`theme`];#e;#t=null;#n=null;#r=null;#i=null;#a=ja;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Xa]}connectedCallback(){this.#o(),this.#s()}disconnectedCallback(){this.#c()}attributeChangedCallback(){this.isConnected&&(this.#o(),this.#s())}get type(){return this.getAttribute(`type`)===`cone`?`cone`:`scoop`}set type(e){this.setAttribute(`type`,e===`cone`?`cone`:`scoop`)}get color(){return this.getAttribute(`color`)}set color(e){e==null?this.removeAttribute(`color`):this.setAttribute(`color`,e)}get eyeState(){let e=this.getAttribute(`eyes`);return e===`none`||e===`dead`?e:`open`}set eyeState(e){this.setAttribute(`eyes`,e)}get active(){return this.hasAttribute(`active`)}set active(e){this.toggleAttribute(`active`,e)}get compact(){return this.hasAttribute(`compact`)}set compact(e){this.toggleAttribute(`compact`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get theme(){let e=this.getAttribute(`theme`);return e===`light`||e===`dark`?e:null}set theme(e){e==null?this.removeAttribute(`theme`):this.setAttribute(`theme`,e)}get pupilScale(){let e=Number.parseFloat(this.getAttribute(`pupil`)??``);if(Number.isFinite(e))return Math.max(.3,Math.min(2.4,e));let t=Number.parseFloat(this.getAttribute(`fill`)??``);return Number.isFinite(t)?Ba(Math.max(0,Math.min(100,t))):1}#o(){let e=this.type,t=Ra[e],n=this.color??za[e],r=this.active,i=this.label,a=e===`cone`?Wa(n,Ua(n,-.38),Ua(n,.3)):Ga(n,Ua(n,-.32)),o=t.eyes,s=(o.left+o.width/2)/100,c=(o.top+o.height/2)/100,l=((.5-t.zoom*s)*100).toFixed(2),u=((.5-t.zoom*c)*100).toFixed(2),d=o.left/100,f=(o.left+o.width)/100,p=o.top/100,m=(o.top+o.height)/100,h=Math.min(0,d),ee=Math.max(1,f),te=Math.min(0,p),g=Math.max(1,m),ne=Math.min(1,1/Math.max(ee-h,g-te)),_=((.5-ne*(h+ee)/2)*100).toFixed(2),re=((.5-ne*(te+g)/2)*100).toFixed(2),ie=Aa*this.pupilScale;this.#a=Math.max(2,Math.min(ja,Fa.r-ie-4));let ae=Y(`svg`,{class:`glyph`,viewBox:t.vb,preserveAspectRatio:`xMidYMid meet`,style:`--g:${t.glyph}%`},...a),oe=Ja(this.eyeState,ie),se=K(`span`,{class:`eyes`,style:`top:${o.top}%;left:${o.left}%;width:${o.width}%;height:${o.height}%`});oe&&se.append(oe);let v=K(`span`,{class:`icon`,part:`icon`},K(`span`,{class:`icon-inner`,style:`--tx:${l}%;--ty:${u}%;--zoom:${t.zoom};--ox:${_}%;--oy:${re}%;--ozoom:${ne.toFixed(4)}`},ae,se)),y=K(`span`,{class:`label`,part:`label`},i??K(`slot`)),ce=K(`button`,{class:`pill ${r?`active`:``}`,part:`pill`,style:`--accent:${n}`,"aria-label":i||!1},v,y),b=i?K(`span`,{class:`tip`,part:`tip`,"aria-hidden":`true`},i):null;this.#e.replaceChildren(ce,...b?[b]:[]),this.#n=this.#e.querySelector(`.pupil-l`),this.#r=this.#e.querySelector(`.pupil-r`),this.#i=this.#e.querySelector(`.eyes-svg`)}#s(){let e=this.eyeState===`open`&&this.type===`cone`;e&&!this.#t?(this.#t=e=>this.#l(e),document.addEventListener(`mousemove`,this.#t)):!e&&this.#t&&this.#c()}#c(){this.#t&&=(document.removeEventListener(`mousemove`,this.#t),null)}#l(e){if(!this.#i||!this.#n||!this.#r)return;let t=this.#i.getBoundingClientRect();if(!t.width||!t.height)return;let n=(e.clientX-t.left)*(200/t.width),r=(e.clientY-t.top)*(100/t.height);Ya(this.#n,Fa.cx,Fa.cy,n,r,this.#a),Ya(this.#r,Ia.cx,Ia.cy,n,r,this.#a)}});var Za=q(`
|
|
2363
|
+
:host {
|
|
2364
|
+
display: inline-grid;
|
|
2365
|
+
place-items: center;
|
|
2366
|
+
width: var(--avatar-size, var(--ctl-h, 30px));
|
|
2367
|
+
height: var(--avatar-size, var(--ctl-h, 30px));
|
|
2368
|
+
border-radius: 9999px;
|
|
2369
|
+
background: var(--rainbow);
|
|
2370
|
+
color: #fff;
|
|
2371
|
+
font-family: var(--ui);
|
|
2372
|
+
font-size: 11px;
|
|
2373
|
+
font-weight: 600;
|
|
2374
|
+
line-height: 1;
|
|
2375
|
+
flex: 0 0 auto;
|
|
2376
|
+
cursor: pointer;
|
|
2377
|
+
overflow: hidden;
|
|
2378
|
+
-webkit-user-select: none;
|
|
2379
|
+
user-select: none;
|
|
2380
|
+
}
|
|
2381
|
+
:host([hidden]) { display: none; }
|
|
2382
|
+
:host(:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
|
|
2383
|
+
.me {
|
|
2384
|
+
display: grid;
|
|
2385
|
+
place-items: center;
|
|
2386
|
+
width: 100%;
|
|
2387
|
+
height: 100%;
|
|
2388
|
+
border-radius: inherit;
|
|
2389
|
+
/* The rainbow gradient stays the ground behind the (optional) gravatar image. */
|
|
2390
|
+
background: var(--rainbow);
|
|
2391
|
+
background-size: cover;
|
|
2392
|
+
background-position: center;
|
|
2393
|
+
background-repeat: no-repeat;
|
|
2394
|
+
}
|
|
2395
|
+
/* When a gravatar image has resolved, layer it over the rainbow ground and
|
|
2396
|
+
hide the initials (the image is the foreground; rainbow remains underneath). */
|
|
2397
|
+
.me.has-img { color: transparent; }
|
|
2398
|
+
.img {
|
|
2399
|
+
width: 100%;
|
|
2400
|
+
height: 100%;
|
|
2401
|
+
border-radius: inherit;
|
|
2402
|
+
object-fit: cover;
|
|
2403
|
+
display: block;
|
|
2404
|
+
}
|
|
2405
|
+
`),Qa=class extends HTMLElement{static observedAttributes=[`initials`,`name`,`src`,`email`,`size`,`label`];#e;#t=0;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Za],this.addEventListener(`click`,this.#i),this.addEventListener(`keydown`,this.#a)}connectedCallback(){this.hasAttribute(`role`)||this.setAttribute(`role`,`button`),this.hasAttribute(`tabindex`)||this.setAttribute(`tabindex`,`0`),this.#o()}disconnectedCallback(){this.#t++}attributeChangedCallback(e,t,n){e===`size`&&this.#r(n),this.isConnected&&this.#o()}get initials(){return this.getAttribute(`initials`)}set initials(e){e==null?this.removeAttribute(`initials`):this.setAttribute(`initials`,e)}get name(){return this.getAttribute(`name`)}set name(e){e==null?this.removeAttribute(`name`):this.setAttribute(`name`,e)}get src(){return this.getAttribute(`src`)}set src(e){e==null?this.removeAttribute(`src`):this.setAttribute(`src`,e)}get email(){return this.getAttribute(`email`)}set email(e){e==null?this.removeAttribute(`email`):this.setAttribute(`email`,e)}get size(){return this.getAttribute(`size`)}set size(e){e==null?this.removeAttribute(`size`):this.setAttribute(`size`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get resolvedInitials(){let e=this.initials;return e!=null&&e.trim()!==``?e.trim().slice(0,2).toUpperCase():eo(this.name)||`?`}async gravatarUrl(e=this.email){let t=e?.trim().toLowerCase();return t?`https://www.gravatar.com/avatar/${await $a(t)}?s=${this.#n()}&d=404`:null}#n(){let e=this.getBoundingClientRect().width;return Math.max(1,Math.round((e>0?e:30)*2))}#r(e){e==null||e.trim()===``?this.style.removeProperty(`--avatar-size`):this.style.setProperty(`--avatar-size`,e)}#i=()=>{this.dispatchEvent(new CustomEvent(`slicc-avatar-click`,{bubbles:!0,composed:!0}))};#a=e=>{(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),this.click())};#o(){let e=++this.#t,t=this.src,n=this.email,r=this.resolvedInitials,i=this.label??this.name??(r===`?`?`Account`:r);this.setAttribute(`aria-label`,i);let a=K(`div`,{class:`me`,part:`avatar`},K(`slot`,null,t?K(`img`,{class:`img`,part:`image`,src:t,alt:i}):K(`span`,{class:`ini`,part:`initials`},r)));this.#e.replaceChildren(a),!t&&n&&this.#s(n,e)}#s(e,t){this.gravatarUrl(e).then(e=>{if(!e||t!==this.#t)return;let n=new Image;n.onload=()=>{if(t!==this.#t||!this.isConnected)return;let n=this.#e.querySelector(`.me`);n&&(n.style.backgroundImage=`url("${e}")`,n.classList.add(`has-img`))},n.src=e}).catch(()=>{})}};async function $a(e){let t=new TextEncoder().encode(e),n=await crypto.subtle.digest(`SHA-256`,t);return Array.from(new Uint8Array(n)).map(e=>e.toString(16).padStart(2,`0`)).join(``)}function eo(e){if(!e)return``;let t=e.trim().split(/\s+/).filter(Boolean);return t.length===0?``:t.length===1?t[0].slice(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}W(`slicc-avatar`,Qa);var to=q(`
|
|
2406
|
+
:host { display: inline-flex; flex: 0 0 auto; }
|
|
2407
|
+
:host([hidden]) { display: none; }
|
|
2408
|
+
.col {
|
|
2409
|
+
flex: 0 0 auto;
|
|
2410
|
+
border: 1px solid var(--line);
|
|
2411
|
+
background: var(--canvas);
|
|
2412
|
+
border-radius: 8px;
|
|
2413
|
+
height: 28px;
|
|
2414
|
+
padding: 0 9px;
|
|
2415
|
+
cursor: pointer;
|
|
2416
|
+
color: var(--txt-2);
|
|
2417
|
+
font-family: var(--ui);
|
|
2418
|
+
font-size: 12px;
|
|
2419
|
+
display: inline-flex;
|
|
2420
|
+
align-items: center;
|
|
2421
|
+
line-height: 1;
|
|
2422
|
+
}
|
|
2423
|
+
.col:hover { background: var(--ghost); color: var(--ink); }
|
|
2424
|
+
.icon { display: inline-flex; place-items: center; pointer-events: none; }
|
|
2425
|
+
.icon svg { display: block; }
|
|
2426
|
+
`),no=`panel-right-close`,ro=`Collapse`,io=16;W(`slicc-collapse-btn`,class extends HTMLElement{static observedAttributes=[`label`,`icon`];#e;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[to]}connectedCallback(){this.#n()}attributeChangedCallback(){this.isConnected&&this.#n()}get label(){return this.getAttribute(`label`)??ro}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get icon(){return this.getAttribute(`icon`)??no}set icon(e){e==null?this.removeAttribute(`icon`):this.setAttribute(`icon`,e)}#n(){let e=this.label,t=J(this.icon,{size:io,part:`icon`}),n=K(`button`,{class:`col`,part:`button`,type:`button`,"aria-label":e,title:e},K(`slot`,null,K(`span`,{class:`icon`},t)));n.addEventListener(`click`,this.#r),this.#t=n,this.#e.replaceChildren(n)}#r=()=>{this.dispatchEvent(new CustomEvent(`collapse`,{bubbles:!0,composed:!0}))}});var ao=q(`
|
|
2427
|
+
:host {
|
|
2428
|
+
display: flex;
|
|
2429
|
+
align-items: center;
|
|
2430
|
+
gap: 12px;
|
|
2431
|
+
margin: 18px 0 16px;
|
|
2432
|
+
font-family: var(--ui);
|
|
2433
|
+
font-size: 11px;
|
|
2434
|
+
color: var(--txt-3);
|
|
2435
|
+
text-transform: uppercase;
|
|
2436
|
+
letter-spacing: .08em;
|
|
2437
|
+
}
|
|
2438
|
+
:host([hidden]) { display: none; }
|
|
2439
|
+
/* The label sits centred between the hairlines and never absorbs their space. */
|
|
2440
|
+
.label { white-space: nowrap; flex: 0 0 auto; min-width: 0; }
|
|
2441
|
+
/*
|
|
2442
|
+
* The flanking 1px hairlines. Each pseudo-element MUST carry content + a
|
|
2443
|
+
* non-zero height + a visible background, and the host MUST be flex, or the
|
|
2444
|
+
* line collapses to nothing. The --line fallback keeps the hairline visible
|
|
2445
|
+
* even if the design token failed to inherit.
|
|
2446
|
+
*/
|
|
2447
|
+
:host::before,
|
|
2448
|
+
:host::after {
|
|
2449
|
+
content: "";
|
|
2450
|
+
flex: 1 1 0;
|
|
2451
|
+
height: 1px;
|
|
2452
|
+
min-width: 0;
|
|
2453
|
+
background: var(--line, #e5e5e5);
|
|
2454
|
+
}
|
|
2455
|
+
`);W(`slicc-day-separator`,class extends HTMLElement{static observedAttributes=[`label`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ao]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#t(){let e=this.label??K(`slot`);this.#e.replaceChildren(K(`span`,{class:`label`,part:`label`},e))}});var oo=`CLI float`;function so(e){if(e==null)return null;let t=e.trim();if(t===``)return null;let n=Number.parseFloat(t.replace(/^\$/,``));return Number.isFinite(n)?`$${n.toFixed(2)}`:null}var co=`(max-width: 560px)`,lo=q(`
|
|
2456
|
+
:host {
|
|
2457
|
+
position: relative;
|
|
2458
|
+
display: inline-flex;
|
|
2459
|
+
align-items: center;
|
|
2460
|
+
gap: 7px;
|
|
2461
|
+
flex: 0 0 auto;
|
|
2462
|
+
box-sizing: border-box;
|
|
2463
|
+
height: var(--ctl-h, 30px);
|
|
2464
|
+
padding: 0 12px;
|
|
2465
|
+
border: 1px solid var(--line);
|
|
2466
|
+
border-radius: 9999px;
|
|
2467
|
+
background: var(--canvas);
|
|
2468
|
+
color: var(--txt-2);
|
|
2469
|
+
font-family: var(--ui);
|
|
2470
|
+
font-size: 11px;
|
|
2471
|
+
line-height: 1;
|
|
2472
|
+
white-space: nowrap;
|
|
2473
|
+
}
|
|
2474
|
+
:host([hidden]) { display: none; }
|
|
2475
|
+
|
|
2476
|
+
/* linked → rose-tinted border (mixes --rose into --line) */
|
|
2477
|
+
:host([linked]) {
|
|
2478
|
+
border-color: color-mix(in srgb, var(--rose) 40%, var(--line));
|
|
2479
|
+
}
|
|
2480
|
+
|
|
2481
|
+
.fdot {
|
|
2482
|
+
width: 7px;
|
|
2483
|
+
height: 7px;
|
|
2484
|
+
flex: 0 0 auto;
|
|
2485
|
+
border-radius: 50%;
|
|
2486
|
+
background: #22c55e;
|
|
2487
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 22%, transparent);
|
|
2488
|
+
}
|
|
2489
|
+
|
|
2490
|
+
.label { white-space: nowrap; }
|
|
2491
|
+
|
|
2492
|
+
/* thin divider between the label and the cost segment */
|
|
2493
|
+
.sep {
|
|
2494
|
+
width: 1px;
|
|
2495
|
+
height: 12px;
|
|
2496
|
+
flex: 0 0 auto;
|
|
2497
|
+
background: var(--line);
|
|
2498
|
+
}
|
|
2499
|
+
|
|
2500
|
+
/* $ SPENT cost segment: lucide coin icon + formatted amount */
|
|
2501
|
+
.spent {
|
|
2502
|
+
display: inline-flex;
|
|
2503
|
+
align-items: center;
|
|
2504
|
+
gap: 3px;
|
|
2505
|
+
flex: 0 0 auto;
|
|
2506
|
+
white-space: nowrap;
|
|
2507
|
+
font-variant-numeric: tabular-nums;
|
|
2508
|
+
}
|
|
2509
|
+
.spent svg {
|
|
2510
|
+
display: block;
|
|
2511
|
+
flex: 0 0 auto;
|
|
2512
|
+
width: 12px;
|
|
2513
|
+
height: 12px;
|
|
2514
|
+
}
|
|
2515
|
+
|
|
2516
|
+
/* Hover/focus tip surfacing the collapsed label + spend + connection state.
|
|
2517
|
+
Hidden in the wide pill (the full label already shows everything); only the
|
|
2518
|
+
narrow square badge reveals it, mirroring slicc-pill's dark .tip convention.
|
|
2519
|
+
Decorative (aria-hidden); the accessible name rides the host title attribute. */
|
|
2520
|
+
.tip {
|
|
2521
|
+
position: absolute;
|
|
2522
|
+
top: calc(100% + 7px);
|
|
2523
|
+
left: 50%;
|
|
2524
|
+
transform: translateX(-50%) translateY(-3px);
|
|
2525
|
+
background: var(--ink);
|
|
2526
|
+
color: var(--canvas, #fff);
|
|
2527
|
+
font-family: var(--ui);
|
|
2528
|
+
font-size: 11px;
|
|
2529
|
+
font-weight: 500;
|
|
2530
|
+
line-height: 1;
|
|
2531
|
+
white-space: nowrap;
|
|
2532
|
+
padding: 3px 8px;
|
|
2533
|
+
border-radius: 6px;
|
|
2534
|
+
opacity: 0;
|
|
2535
|
+
pointer-events: none;
|
|
2536
|
+
transition: opacity 0.12s ease, transform 0.12s ease;
|
|
2537
|
+
z-index: 30;
|
|
2538
|
+
display: none;
|
|
2539
|
+
}
|
|
2540
|
+
|
|
2541
|
+
/* Narrow / extension-sidebar: collapse to just the connection status light —
|
|
2542
|
+
the runtime label, its divider, and the cost segment all drop, and the host
|
|
2543
|
+
shrinks to a square (width == height == --ctl-h) so it reads as a compact
|
|
2544
|
+
round badge instead of an elongated upright pill, never crowding the
|
|
2545
|
+
switcher / avatar / theme toggle. */
|
|
2546
|
+
@media (max-width: 560px) {
|
|
2547
|
+
:host {
|
|
2548
|
+
width: var(--ctl-h, 30px);
|
|
2549
|
+
aspect-ratio: 1 / 1;
|
|
2550
|
+
padding: 0;
|
|
2551
|
+
gap: 0;
|
|
2552
|
+
justify-content: center;
|
|
2553
|
+
}
|
|
2554
|
+
.label, .sep, .spent { display: none; }
|
|
2555
|
+
.tip { display: block; }
|
|
2556
|
+
:host(:hover) .tip,
|
|
2557
|
+
:host(:focus-within) .tip {
|
|
2558
|
+
opacity: 1;
|
|
2559
|
+
transform: translateX(-50%);
|
|
2560
|
+
}
|
|
2561
|
+
}
|
|
2562
|
+
|
|
2563
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2564
|
+
.tip { transition: none; }
|
|
2565
|
+
}
|
|
2566
|
+
`);W(`slicc-floatbar`,class extends HTMLElement{static observedAttributes=[`label`,`linked`,`online`,`spent`];#e;#t;#n=()=>{this.isConnected&&this.#i()};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[lo],this.#t=typeof window<`u`&&typeof window.matchMedia==`function`?window.matchMedia(co):null}connectedCallback(){this.#t?.addEventListener(`change`,this.#n),this.#a()}disconnectedCallback(){this.#t?.removeEventListener(`change`,this.#n)}attributeChangedCallback(){this.isConnected&&this.#a()}get label(){return this.getAttribute(`label`)??oo}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get linked(){return this.hasAttribute(`linked`)}set linked(e){this.toggleAttribute(`linked`,!!e)}get online(){return this.hasAttribute(`online`)}set online(e){this.toggleAttribute(`online`,!!e)}get spent(){return this.getAttribute(`spent`)}set spent(e){e==null?this.removeAttribute(`spent`):this.setAttribute(`spent`,String(e))}#r(){let e=[this.label],t=so(this.spent);return t!=null&&e.push(t),e.push(this.online?`online`:`offline`),e.join(` · `)}#i(){this.#t?.matches?this.setAttribute(`title`,this.#r()):this.removeAttribute(`title`)}#a(){let e=[];this.online&&e.push(K(`span`,{class:`fdot`,part:`dot`})),e.push(K(`span`,{class:`label`,part:`label`},K(`slot`,null,this.label)));let t=so(this.spent);t!=null&&(e.push(K(`span`,{class:`sep`,part:`sep`})),e.push(K(`span`,{class:`spent`,part:`spent`},J(`circle-dollar-sign`,{size:12}),K(`span`,{class:`amount`},t)))),e.push(K(`span`,{class:`tip`,part:`tip`,"aria-hidden":`true`},this.#r())),this.#e.replaceChildren(...e),this.#i()}});var uo=q(`
|
|
2567
|
+
:host { display: inline-grid; }
|
|
2568
|
+
:host([hidden]) { display: none; }
|
|
2569
|
+
.iconbtn {
|
|
2570
|
+
width: 30px;
|
|
2571
|
+
height: 30px;
|
|
2572
|
+
border-radius: 8px;
|
|
2573
|
+
border: 1px solid var(--line);
|
|
2574
|
+
background: var(--canvas);
|
|
2575
|
+
color: var(--txt-2);
|
|
2576
|
+
font-family: var(--ui);
|
|
2577
|
+
font-size: 16px;
|
|
2578
|
+
line-height: 1;
|
|
2579
|
+
cursor: pointer;
|
|
2580
|
+
display: grid;
|
|
2581
|
+
place-items: center;
|
|
2582
|
+
padding: 0;
|
|
2583
|
+
margin: 0;
|
|
2584
|
+
-webkit-appearance: none;
|
|
2585
|
+
appearance: none;
|
|
2586
|
+
}
|
|
2587
|
+
.iconbtn:hover { background: var(--ghost); color: var(--ink); }
|
|
2588
|
+
.iconbtn:disabled {
|
|
2589
|
+
cursor: default;
|
|
2590
|
+
opacity: 0.45;
|
|
2591
|
+
}
|
|
2592
|
+
.iconbtn:disabled:hover { background: var(--canvas); color: var(--txt-2); }
|
|
2593
|
+
.icon { display: grid; place-items: center; pointer-events: none; }
|
|
2594
|
+
.icon svg { display: block; }
|
|
2595
|
+
`),fo=`plus`,po=16;W(`slicc-icon-button`,class extends HTMLElement{static observedAttributes=[`icon`,`disabled`,`label`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[uo]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get icon(){return this.getAttribute(`icon`)??fo}set icon(e){e==null?this.removeAttribute(`icon`):this.setAttribute(`icon`,e)}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){e?this.setAttribute(`disabled`,``):this.removeAttribute(`disabled`)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#t(){let e=this.label,t=K(`slot`,null,K(`span`,{class:`icon`},J(this.icon,{size:po,part:`icon`}))),n=K(`button`,{type:`button`,class:`iconbtn`,part:`button`,"aria-label":e??void 0,title:e??void 0,disabled:this.disabled},t);this.#e.replaceChildren(n)}});var mo=400,ho=q(`
|
|
2596
|
+
:host{position:fixed;inset:0;z-index:1000;display:none;}
|
|
2597
|
+
:host([open]){display:block;}
|
|
2598
|
+
.overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;cursor:pointer;}
|
|
2599
|
+
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .35s cubic-bezier(.2,0,.13,1);}
|
|
2600
|
+
.overlay.visible .backdrop{opacity:1;}
|
|
2601
|
+
.overlay.closing .backdrop{opacity:0;}
|
|
2602
|
+
.image{position:absolute;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.4),0 8px 20px rgba(0,0,0,.3);max-width:90vw;max-height:90vh;object-fit:contain;transform-origin:center center;will-change:transform;transition:transform .35s cubic-bezier(.2,0,.13,1),border-radius .35s cubic-bezier(.2,0,.13,1);}
|
|
2603
|
+
`),go=null,_o=class extends HTMLElement{#e;#t=null;#n=null;#r=null;#i=null;#a=!1;#o=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ho]}disconnectedCallback(){this.#l(),go===this&&(go=null)}get src(){return this.getAttribute(`src`)}set src(e){e==null?this.removeAttribute(`src`):this.setAttribute(`src`,e)}get isOpen(){return this.hasAttribute(`open`)}open(e,t){go&&go!==this&&go.#s(),this.#l(),this.#a=!1,this.src=e,this.setAttribute(`open`,``),go=this,this.#r=t??this;let n=document.createElement(`div`);n.className=`overlay`,n.setAttribute(`part`,`overlay`);let r=document.createElement(`div`);r.className=`backdrop`,r.setAttribute(`part`,`backdrop`),n.appendChild(r);let i=document.createElement(`img`);i.className=`image`,i.setAttribute(`part`,`image`),i.src=e,i.alt=`Image preview`,n.appendChild(i),this.#e.appendChild(n),this.#t=n,this.#n=i;let a=this.#r.getBoundingClientRect(),o=()=>{let e=window.innerWidth,t=window.innerHeight,r=e*.9,o=t*.9,s=i.naturalWidth||a.width*4,c=i.naturalHeight||a.height*4,l=Math.min(r/s,o/c,1),u=s*l,d=c*l,f=(e-u)/2,p=(t-d)/2,m=a.width/u,h=a.height/d,ee=a.left+a.width/2,te=a.top+a.height/2,g=f+u/2,ne=p+d/2,_=ee-g,re=te-ne;i.style.position=`absolute`,i.style.width=`${u}px`,i.style.height=`${d}px`,i.style.left=`${f}px`,i.style.top=`${p}px`,i.style.transform=`translate(${_}px, ${re}px) scale(${m}, ${h})`,i.style.borderRadius=`${6/Math.min(m,h)}px`,requestAnimationFrame(()=>{requestAnimationFrame(()=>{i.style.transform=`translate(0, 0) scale(1, 1)`,i.style.borderRadius=`6px`,n.classList.add(`visible`)})})};i.complete&&i.naturalWidth>0?o():(i.onload=()=>o(),i.onerror=()=>this.#s()),this.#i=e=>{e.key===`Escape`&&this.close()},n.addEventListener(`click`,()=>this.close()),document.addEventListener(`keydown`,this.#i),this.dispatchEvent(new CustomEvent(`slicc-image-preview-open`,{bubbles:!0,composed:!0,detail:{src:e}}))}close(){let e=this.#t,t=this.#n;if(this.#a||!e||!t||go!==this)return;this.#a=!0,e.classList.add(`closing`),e.classList.remove(`visible`);let n=this.#r,r=n?n.getBoundingClientRect():null;if(r&&r.width>0&&r.height>0){let e=t.getBoundingClientRect(),n=r.width/e.width,i=r.height/e.height,a=r.left+r.width/2,o=r.top+r.height/2,s=e.left+e.width/2,c=e.top+e.height/2,l=a-s,u=o-c;t.style.transform=`translate(${l}px, ${u}px) scale(${n}, ${i})`,t.style.borderRadius=`${6/Math.min(n,i)}px`}this.dispatchEvent(new CustomEvent(`slicc-image-preview-close`,{bubbles:!0,composed:!0,detail:{src:this.src}}));let i=()=>this.#c();this.#o=setTimeout(i,mo),e.addEventListener(`transitionend`,e=>{e.propertyName===`transform`&&(this.#o&&clearTimeout(this.#o),i())})}#s(){this.#l()}#c(){this.#l()}#l(){this.#o&&=(clearTimeout(this.#o),null),this.#i&&=(document.removeEventListener(`keydown`,this.#i),null),this.#t&&=(this.#t.remove(),null),this.#n=null,this.#r=null,this.removeAttribute(`open`),this.removeAttribute(`src`),go===this&&(go=null)}static show(e,t){let n=document.querySelector(`slicc-image-preview[data-shared]`);return n||(n=document.createElement(`slicc-image-preview`),n.setAttribute(`data-shared`,``),document.body.appendChild(n)),n.open(e,t),()=>n.close()}};W(`slicc-image-preview`,_o);var vo=q(`
|
|
2604
|
+
:host { display: inline-flex; align-items: center; height: var(--ctl-h, 30px); font-family: var(--ui); line-height: 1; }
|
|
2605
|
+
.logo { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; color: var(--ink); }
|
|
2606
|
+
.b {
|
|
2607
|
+
font-weight: 500; font-size: 12px; margin-left: 7px;
|
|
2608
|
+
background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent;
|
|
2609
|
+
}
|
|
2610
|
+
/* Narrow / extension-sidebar: drop the gradient suffix badge to save width. */
|
|
2611
|
+
@media (max-width: 560px) { .b { display: none; } }
|
|
2612
|
+
`);W(`slicc-logo`,class extends HTMLElement{static observedAttributes=[`badge`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[vo]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get badge(){return this.getAttribute(`badge`)}set badge(e){e==null?this.removeAttribute(`badge`):this.setAttribute(`badge`,e)}#t(){let e=K(`span`,{class:`logo`,part:`logo`},`sliccy`);this.badge&&e.append(K(`span`,{class:`b`,part:`badge`},this.badge)),this.#e.replaceChildren(e)}});var yo=`
|
|
2613
|
+
slicc-pane {
|
|
2614
|
+
display: flex;
|
|
2615
|
+
flex-direction: column;
|
|
2616
|
+
min-height: 0;
|
|
2617
|
+
}
|
|
2618
|
+
slicc-pane > .slicc-pane__surface {
|
|
2619
|
+
flex: 1 1 auto;
|
|
2620
|
+
display: flex;
|
|
2621
|
+
flex-direction: column;
|
|
2622
|
+
min-height: 0;
|
|
2623
|
+
background: var(--canvas);
|
|
2624
|
+
border: 1px solid var(--line);
|
|
2625
|
+
border-radius: 14px;
|
|
2626
|
+
box-shadow: var(--shadow-pane);
|
|
2627
|
+
overflow: hidden;
|
|
2628
|
+
}
|
|
2629
|
+
slicc-pane[elevated] > .slicc-pane__surface {
|
|
2630
|
+
box-shadow:
|
|
2631
|
+
rgba(10, 10, 10, 0.1) 0 14px 36px -12px,
|
|
2632
|
+
rgba(10, 10, 10, 0.05) 0 4px 10px -4px;
|
|
2633
|
+
}
|
|
2634
|
+
.dark slicc-pane[elevated] > .slicc-pane__surface,
|
|
2635
|
+
[data-theme="dark"] slicc-pane[elevated] > .slicc-pane__surface {
|
|
2636
|
+
box-shadow:
|
|
2637
|
+
rgba(0, 0, 0, 0.45) 0 14px 36px -12px,
|
|
2638
|
+
rgba(0, 0, 0, 0.3) 0 4px 10px -4px;
|
|
2639
|
+
}
|
|
2640
|
+
slicc-pane .slicc-pane__header {
|
|
2641
|
+
flex: 0 0 auto;
|
|
2642
|
+
}
|
|
2643
|
+
slicc-pane .slicc-pane__header:empty {
|
|
2644
|
+
display: none;
|
|
2645
|
+
}
|
|
2646
|
+
slicc-pane .slicc-pane__body {
|
|
2647
|
+
flex: 1 1 auto;
|
|
2648
|
+
min-height: 0;
|
|
2649
|
+
overflow: auto;
|
|
2650
|
+
}
|
|
2651
|
+
`,bo=`slicc-pane-style`;function xo(e){if(e.getElementById(bo))return;let t=e.createElement(`style`);t.id=bo,t.textContent=yo,(e.head??e.documentElement).appendChild(t)}W(`slicc-pane`,class extends HTMLElement{static observedAttributes=[`elevated`];#e;#t;#n=!1;connectedCallback(){xo(this.ownerDocument),this.#r()}attributeChangedCallback(e,t,n){e===`elevated`&&t!==n&&this.isConnected&&this.dispatchEvent(new CustomEvent(`slicc-pane-change`,{bubbles:!0,composed:!0,detail:{elevated:n!==null}}))}get elevated(){return this.hasAttribute(`elevated`)}set elevated(e){e?this.setAttribute(`elevated`,``):this.removeAttribute(`elevated`)}#r(){if(this.#n)return;this.#n=!0;let e=Array.from(this.childNodes).filter(e=>!(e instanceof HTMLElement&&e.classList.contains(`slicc-pane__surface`))),t=this.ownerDocument.createElement(`div`);t.className=`slicc-pane__surface`,t.setAttribute(`part`,`surface`),this.#e=this.ownerDocument.createElement(`div`),this.#e.className=`slicc-pane__header`,this.#e.setAttribute(`part`,`header`),this.#t=this.ownerDocument.createElement(`div`),this.#t.className=`slicc-pane__body`,this.#t.setAttribute(`part`,`body`),t.append(this.#e,this.#t);for(let t of e)t instanceof HTMLElement&&t.getAttribute(`slot`)===`header`?this.#e.appendChild(t):this.#t.appendChild(t);this.appendChild(t)}});function So(e){return e===`tool`||e===`sprinkle`}var Co=q(`
|
|
2652
|
+
:host { display: none; flex: 0 0 auto; }
|
|
2653
|
+
:host([kind="tool"]), :host([kind="sprinkle"]) { display: inline-block; }
|
|
2654
|
+
.ptag {
|
|
2655
|
+
font-family: var(--ui);
|
|
2656
|
+
font-size: 10px;
|
|
2657
|
+
color: var(--violet);
|
|
2658
|
+
background: color-mix(in srgb, var(--violet) 12%, #fff);
|
|
2659
|
+
border: 1px solid color-mix(in srgb, var(--violet) 30%, var(--line));
|
|
2660
|
+
border-radius: 26px;
|
|
2661
|
+
padding: 2px 9px;
|
|
2662
|
+
flex: 0 0 auto;
|
|
2663
|
+
}
|
|
2664
|
+
:host-context(body.dark) .ptag,
|
|
2665
|
+
:host-context(.dark) .ptag,
|
|
2666
|
+
:host-context([data-theme="dark"]) .ptag {
|
|
2667
|
+
background: color-mix(in srgb, var(--violet) 22%, var(--canvas));
|
|
2668
|
+
border-color: color-mix(in srgb, var(--violet) 38%, var(--line));
|
|
2669
|
+
}
|
|
2670
|
+
`);W(`slicc-pane-tag`,class extends HTMLElement{static observedAttributes=[`kind`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Co]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get kind(){let e=this.getAttribute(`kind`);return So(e)?e:null}set kind(e){e==null?this.removeAttribute(`kind`):this.setAttribute(`kind`,e)}#t(){let e=K(`span`,{class:`ptag`,part:`tag`},K(`slot`,null,this.kind??``));this.#e.replaceChildren(e)}});var wo=`
|
|
2671
|
+
slicc-press-button {
|
|
2672
|
+
display: inline-flex;
|
|
2673
|
+
}
|
|
2674
|
+
.slicc-press-btn__btn {
|
|
2675
|
+
appearance: none;
|
|
2676
|
+
background: transparent;
|
|
2677
|
+
border: none;
|
|
2678
|
+
padding: 0;
|
|
2679
|
+
margin: 0;
|
|
2680
|
+
font: inherit;
|
|
2681
|
+
color: inherit;
|
|
2682
|
+
cursor: inherit;
|
|
2683
|
+
display: inline-flex;
|
|
2684
|
+
align-items: center;
|
|
2685
|
+
justify-content: center;
|
|
2686
|
+
width: 100%;
|
|
2687
|
+
height: 100%;
|
|
2688
|
+
border-radius: inherit;
|
|
2689
|
+
position: relative;
|
|
2690
|
+
}
|
|
2691
|
+
.slicc-press-btn__btn:disabled {
|
|
2692
|
+
cursor: default;
|
|
2693
|
+
opacity: 0.5;
|
|
2694
|
+
}
|
|
2695
|
+
.slicc-press-btn__press-layer {
|
|
2696
|
+
position: absolute;
|
|
2697
|
+
inset: 0;
|
|
2698
|
+
border-radius: inherit;
|
|
2699
|
+
overflow: hidden;
|
|
2700
|
+
pointer-events: none;
|
|
2701
|
+
z-index: 0;
|
|
2702
|
+
}
|
|
2703
|
+
.slicc-press-btn__btn > :not(.slicc-press-btn__press-layer) {
|
|
2704
|
+
position: relative;
|
|
2705
|
+
z-index: 1;
|
|
2706
|
+
}
|
|
2707
|
+
.slicc-press-btn__press {
|
|
2708
|
+
position: absolute;
|
|
2709
|
+
border-radius: 50%;
|
|
2710
|
+
background: var(--press-ripple, var(--ctx));
|
|
2711
|
+
opacity: 0.85;
|
|
2712
|
+
transform: translate(-50%, -50%);
|
|
2713
|
+
pointer-events: none;
|
|
2714
|
+
transition-property: width, height;
|
|
2715
|
+
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
2716
|
+
will-change: width, height;
|
|
2717
|
+
}
|
|
2718
|
+
/*
|
|
2719
|
+
* Click / double-click delight animations. Toggled as classes on the inner
|
|
2720
|
+
* <button> from JS and removed on \`animationend\` (so they re-fire every press
|
|
2721
|
+
* and stay testable). \`transform-origin: center\` keeps the squish/wobble
|
|
2722
|
+
* pivoting around the button's middle.
|
|
2723
|
+
*
|
|
2724
|
+
* Single press → a quick tactile "squish" (scale down and spring back).
|
|
2725
|
+
* Double press → a distinct playful "wobble" (a side-to-side rubber-band tilt).
|
|
2726
|
+
*/
|
|
2727
|
+
.slicc-press-btn__btn {
|
|
2728
|
+
transform-origin: center;
|
|
2729
|
+
}
|
|
2730
|
+
.slicc-press-btn__btn.is-squish {
|
|
2731
|
+
animation: slicc-press-squish 220ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
2732
|
+
}
|
|
2733
|
+
.slicc-press-btn__btn.is-wobble {
|
|
2734
|
+
animation: slicc-press-wobble 520ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
|
2735
|
+
}
|
|
2736
|
+
@keyframes slicc-press-squish {
|
|
2737
|
+
0% { transform: scale(1); }
|
|
2738
|
+
35% { transform: scale(0.82); }
|
|
2739
|
+
70% { transform: scale(1.06); }
|
|
2740
|
+
100% { transform: scale(1); }
|
|
2741
|
+
}
|
|
2742
|
+
@keyframes slicc-press-wobble {
|
|
2743
|
+
0% { transform: rotate(0deg) scale(1); }
|
|
2744
|
+
15% { transform: rotate(-9deg) scale(1.08); }
|
|
2745
|
+
30% { transform: rotate(7deg) scale(1.08); }
|
|
2746
|
+
45% { transform: rotate(-5deg) scale(1.04); }
|
|
2747
|
+
60% { transform: rotate(3deg) scale(1.02); }
|
|
2748
|
+
75% { transform: rotate(-1.5deg) scale(1.01); }
|
|
2749
|
+
100% { transform: rotate(0deg) scale(1); }
|
|
2750
|
+
}
|
|
2751
|
+
/*
|
|
2752
|
+
* Respect prefers-reduced-motion: no animation, hold the static end state.
|
|
2753
|
+
* The classes may still be toggled by JS (events are unaffected) but paint
|
|
2754
|
+
* nothing — the button stays put.
|
|
2755
|
+
*/
|
|
2756
|
+
@media (prefers-reduced-motion: reduce) {
|
|
2757
|
+
.slicc-press-btn__btn.is-squish,
|
|
2758
|
+
.slicc-press-btn__btn.is-wobble {
|
|
2759
|
+
animation: none;
|
|
2760
|
+
}
|
|
2761
|
+
}
|
|
2762
|
+
`,To=`slicc-press-button-style`;function Eo(e){if(e.getElementById(To))return;let t=e.createElement(`style`);t.id=To,t.textContent=wo,(e.head??e.documentElement).appendChild(t)}var Do=`slicc-press-btn`,Oo=`is-squish`,ko=`is-wobble`;W(`slicc-press-button`,class extends HTMLElement{static get observedAttributes(){return[`label`,`tooltip`,`tooltip-pos`,`disabled`]}innerBtn=null;pressLayer=null;handle=null;initialized=!1;pendingShortTimer=null;pendingShortEvent=null;animEndListener=null;connectedCallback(){Eo(this.ownerDocument),this.initialized?this.handle===null&&this.attachGesture():this.initialize(),this.syncAttributes()}disconnectedCallback(){this.handle?.destroy(),this.handle=null,this.clearPendingShort(),this.clearRipple(),this.clearAnimation()}attributeChangedCallback(){this.initialized&&this.syncAttributes()}get disabled(){return this.hasAttribute(`disabled`)}set disabled(e){this.toggleAttribute(`disabled`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get tooltip(){return this.getAttribute(`tooltip`)}set tooltip(e){e==null?this.removeAttribute(`tooltip`):this.setAttribute(`tooltip`,e)}setIcon(e){this.initialized||this.initialize();let t=this.innerBtn,n=this.pressLayer;for(let e of Array.from(t.childNodes))e!==n&&e.remove();let r=new DOMParser().parseFromString(e,`text/html`).body;for(;r.firstChild;)t.appendChild(r.firstChild)}focus(e){this.initialized||this.initialize(),this.innerBtn?.focus(e)}initialize(){this.initialized=!0;let e=K(`span`,{class:`${Do}__press-layer`,part:`press-layer`}),t=K(`button`,{type:`button`,class:`${Do}__btn`,part:`button`},e);for(;this.firstChild;)t.appendChild(this.firstChild);this.appendChild(t),this.innerBtn=t,this.pressLayer=e,this.attachGesture()}syncAttributes(){let e=this.innerBtn;if(!e)return;let t=this.getAttribute(`label`);t==null?e.removeAttribute(`aria-label`):e.setAttribute(`aria-label`,t);let n=this.getAttribute(`tooltip`);n==null?delete e.dataset.tooltip:e.dataset.tooltip=n;let r=this.getAttribute(`tooltip-pos`);r==null?delete e.dataset.tooltipPos:e.dataset.tooltipPos=r,this.hasAttribute(`disabled`)?e.setAttribute(`disabled`,``):e.removeAttribute(`disabled`)}longPressMs(){let e=this.getAttribute(`long-press-ms`);if(e==null)return di;let t=Number(e);return Number.isFinite(t)&&t>0?t:di}doubleClickMs(){let e=this.getAttribute(`double-click-ms`);if(e==null)return 350;let t=Number(e);return Number.isFinite(t)&&t>0?t:350}doubleClickDisabled(){return this.hasAttribute(`disable-double-click`)}emit(e,t){e===`short-click`?this.playAnimation(Oo):e===`double-click`&&this.playAnimation(ko);let n=t?{sourceEvent:t}:{};this.dispatchEvent(new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n}))}playAnimation(e){let t=this.innerBtn;if(!t)return;this.clearAnimation(),t.offsetWidth,t.classList.add(e);let n=e=>{e.target===t&&this.clearAnimation()};this.animEndListener=n,t.addEventListener(`animationend`,n)}clearAnimation(){let e=this.innerBtn;e&&(this.animEndListener&&=(e.removeEventListener(`animationend`,this.animEndListener),null),e.classList.remove(Oo,ko))}clearPendingShort(){this.pendingShortTimer!==null&&(clearTimeout(this.pendingShortTimer),this.pendingShortTimer=null),this.pendingShortEvent=null}attachGesture(){this.handle=fi(this,{longPressMs:this.longPressMs(),onPressStart:e=>this.paintRipple(e),onPressEnd:()=>this.clearRipple(),onLongPress:()=>{if(this.pendingShortTimer!==null){this.clearPendingShort(),this.emit(`double-click`);return}this.emit(`long-press`)},onShortClick:e=>{if(this.doubleClickDisabled()){this.emit(`short-click`,e);return}if(this.pendingShortTimer!==null){this.clearPendingShort(),this.emit(`double-click`,e);return}this.pendingShortEvent=e,this.pendingShortTimer=setTimeout(()=>{this.pendingShortTimer=null;let e=this.pendingShortEvent;this.pendingShortEvent=null,this.emit(`short-click`,e??void 0)},this.doubleClickMs())}})}paintRipple(e){this.clearRipple();let t=this.pressLayer;if(!t)return;let n=t.getBoundingClientRect(),r=e.clientX-n.left,i=e.clientY-n.top,a=Math.max(r,n.width-r),o=Math.max(i,n.height-i),s=Math.ceil(Math.hypot(a,o))+2,c=this.ownerDocument.createElement(`span`);c.className=`${Do}__press`,c.style.left=`${r}px`,c.style.top=`${i}px`,c.style.width=`0px`,c.style.height=`0px`,c.style.transitionDuration=`${this.longPressMs()}ms`,t.appendChild(c),requestAnimationFrame(()=>{c.isConnected&&(c.style.width=`${s*2}px`,c.style.height=`${s*2}px`)})}clearRipple(){let e=this.pressLayer;if(e)for(;e.firstChild;)e.firstChild.remove()}});var Ao=q(`
|
|
2763
|
+
:host { display: inline-flex; }
|
|
2764
|
+
:host([hidden]) { display: none; }
|
|
2765
|
+
|
|
2766
|
+
.sw {
|
|
2767
|
+
width: 28px;
|
|
2768
|
+
height: 28px;
|
|
2769
|
+
border-radius: 8px;
|
|
2770
|
+
border: 1px solid var(--line);
|
|
2771
|
+
background: var(--swatch-color, transparent);
|
|
2772
|
+
cursor: pointer;
|
|
2773
|
+
padding: 0;
|
|
2774
|
+
margin: 0;
|
|
2775
|
+
font: inherit;
|
|
2776
|
+
-webkit-appearance: none;
|
|
2777
|
+
appearance: none;
|
|
2778
|
+
display: block;
|
|
2779
|
+
box-sizing: border-box;
|
|
2780
|
+
}
|
|
2781
|
+
|
|
2782
|
+
/* Hue/accent swatch: drop the border so the hue fills edge to edge. */
|
|
2783
|
+
.sw.hue { border: none; }
|
|
2784
|
+
|
|
2785
|
+
/* Selected: violet double-ring (white inner ring + violet outer ring). */
|
|
2786
|
+
.sw.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--violet); }
|
|
2787
|
+
|
|
2788
|
+
.sw:focus-visible {
|
|
2789
|
+
outline: 2px solid var(--violet);
|
|
2790
|
+
outline-offset: 2px;
|
|
2791
|
+
}
|
|
2792
|
+
`);W(`slicc-swatch`,class extends HTMLElement{static observedAttributes=[`color`,`hue`,`selected`,`label`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Ao]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get color(){return this.getAttribute(`color`)}set color(e){e==null?this.removeAttribute(`color`):this.setAttribute(`color`,e)}get hue(){return this.hasAttribute(`hue`)}set hue(e){this.toggleAttribute(`hue`,!!e)}get selected(){return this.hasAttribute(`selected`)}set selected(e){this.toggleAttribute(`selected`,!!e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#t(){let e=this.color,t=[`sw`];this.hue&&t.push(`hue`),this.selected&&t.push(`on`);let n=K(`button`,{type:`button`,part:`button`,class:t.join(` `),"aria-pressed":this.selected?`true`:`false`,"aria-label":this.label??e??`color swatch`},K(`slot`));e&&n.style.setProperty(`--swatch-color`,e),n.addEventListener(`click`,this.#n),this.#e.replaceChildren(n)}#n=()=>{this.selected=!0,this.dispatchEvent(new CustomEvent(`select`,{detail:{color:this.color},bubbles:!0,composed:!0}))}});var jo=new Set([`rose`,`cyan`,`violet`,`amber`,`waffle`,`green`]),Mo=q(`
|
|
2793
|
+
:host {
|
|
2794
|
+
display: inline-flex;
|
|
2795
|
+
vertical-align: middle;
|
|
2796
|
+
}
|
|
2797
|
+
/* Base chip — lifted from the prototype's .mtag / .ptag tinted-pill styling. */
|
|
2798
|
+
.tag {
|
|
2799
|
+
display: inline-flex;
|
|
2800
|
+
align-items: center;
|
|
2801
|
+
gap: 5px;
|
|
2802
|
+
box-sizing: border-box;
|
|
2803
|
+
font-family: var(--ui);
|
|
2804
|
+
font-size: 10px;
|
|
2805
|
+
line-height: 1.4;
|
|
2806
|
+
border-radius: 26px;
|
|
2807
|
+
padding: 2px 9px;
|
|
2808
|
+
white-space: nowrap;
|
|
2809
|
+
/* Neutral default — no hue attribute. */
|
|
2810
|
+
color: var(--txt-2);
|
|
2811
|
+
background: color-mix(in srgb, var(--ink) 5%, var(--canvas));
|
|
2812
|
+
border: 1px solid var(--line);
|
|
2813
|
+
}
|
|
2814
|
+
/* Optional leading dot, shown via [has-dot]; tinted to the chip's text color. */
|
|
2815
|
+
.dot {
|
|
2816
|
+
width: 5px;
|
|
2817
|
+
height: 5px;
|
|
2818
|
+
border-radius: 50%;
|
|
2819
|
+
background: currentColor;
|
|
2820
|
+
flex: 0 0 auto;
|
|
2821
|
+
}
|
|
2822
|
+
.label {
|
|
2823
|
+
min-width: 0;
|
|
2824
|
+
}
|
|
2825
|
+
|
|
2826
|
+
/*
|
|
2827
|
+
* Hue tints. color-mix re-bases over var(--canvas) (not #fff) so a single rule
|
|
2828
|
+
* is light/dark aware — exactly how the prototype's dark overrides re-route the
|
|
2829
|
+
* hardcoded #fff mixes to var(--canvas). Light is the default polarity.
|
|
2830
|
+
*/
|
|
2831
|
+
:host([hue="rose"]) .tag { color: var(--rose); background: color-mix(in srgb, var(--rose) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--rose) 28%, var(--line)); }
|
|
2832
|
+
:host([hue="cyan"]) .tag { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--cyan) 28%, var(--line)); }
|
|
2833
|
+
:host([hue="violet"]) .tag { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--violet) 28%, var(--line)); }
|
|
2834
|
+
:host([hue="amber"]) .tag { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--amber) 28%, var(--line)); }
|
|
2835
|
+
:host([hue="waffle"]) .tag { color: var(--waffle); background: color-mix(in srgb, var(--waffle) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--waffle) 28%, var(--line)); }
|
|
2836
|
+
:host([hue="green"]) .tag { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--canvas)); border-color: color-mix(in srgb, var(--green) 28%, var(--line)); }
|
|
2837
|
+
|
|
2838
|
+
/*
|
|
2839
|
+
* Dark-mode deepening — mirrors the prototype's body.dark .mtag.* overrides
|
|
2840
|
+
* (22% fill / 38% border over var(--canvas)). Matches any dark scope wrapper.
|
|
2841
|
+
*/
|
|
2842
|
+
:host-context(.dark) .tag,
|
|
2843
|
+
:host-context([data-theme="dark"]) .tag {
|
|
2844
|
+
background: color-mix(in srgb, var(--ink) 6%, var(--canvas));
|
|
2845
|
+
}
|
|
2846
|
+
:host-context(.dark)[hue="rose"] .tag, :host-context([data-theme="dark"])[hue="rose"] .tag { background: color-mix(in srgb, var(--rose) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--rose) 38%, var(--line)); }
|
|
2847
|
+
:host-context(.dark)[hue="cyan"] .tag, :host-context([data-theme="dark"])[hue="cyan"] .tag { background: color-mix(in srgb, var(--cyan) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--cyan) 38%, var(--line)); }
|
|
2848
|
+
:host-context(.dark)[hue="violet"] .tag, :host-context([data-theme="dark"])[hue="violet"] .tag { background: color-mix(in srgb, var(--violet) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--violet) 38%, var(--line)); }
|
|
2849
|
+
:host-context(.dark)[hue="amber"] .tag, :host-context([data-theme="dark"])[hue="amber"] .tag { background: color-mix(in srgb, var(--amber) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--amber) 38%, var(--line)); }
|
|
2850
|
+
:host-context(.dark)[hue="waffle"] .tag, :host-context([data-theme="dark"])[hue="waffle"] .tag { background: color-mix(in srgb, var(--waffle) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--waffle) 38%, var(--line)); }
|
|
2851
|
+
:host-context(.dark)[hue="green"] .tag, :host-context([data-theme="dark"])[hue="green"] .tag { background: color-mix(in srgb, var(--green) 22%, var(--canvas)); border-color: color-mix(in srgb, var(--green) 38%, var(--line)); }
|
|
2852
|
+
`);W(`slicc-tag`,class extends HTMLElement{static observedAttributes=[`hue`,`label`,`dot`];#e;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Mo]}connectedCallback(){this.#t()}attributeChangedCallback(){this.isConnected&&this.#t()}get hue(){let e=this.getAttribute(`hue`);return e&&jo.has(e)?e:null}set hue(e){e==null?this.removeAttribute(`hue`):this.setAttribute(`hue`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get dot(){return this.hasAttribute(`dot`)}set dot(e){e?this.setAttribute(`dot`,``):this.removeAttribute(`dot`)}#t(){let e=this.label??K(`slot`),t=K(`span`,{class:`tag`,part:`tag`},this.dot?K(`span`,{class:`dot`,part:`dot`}):null,K(`span`,{class:`label`,part:`label`},e));this.#e.replaceChildren(t)}});var No=`
|
|
2853
|
+
.slicc-chatpane {
|
|
2854
|
+
flex: 0 0 auto;
|
|
2855
|
+
width: calc(100% - 48px);
|
|
2856
|
+
box-sizing: border-box;
|
|
2857
|
+
display: flex;
|
|
2858
|
+
flex-direction: column;
|
|
2859
|
+
min-height: 0;
|
|
2860
|
+
font-family: var(--ui);
|
|
2861
|
+
color: var(--ink);
|
|
2862
|
+
background: var(--bg);
|
|
2863
|
+
transition: width .38s cubic-bezier(.4, 0, .2, 1);
|
|
2864
|
+
}
|
|
2865
|
+
.slicc-chatpane[hidden] {
|
|
2866
|
+
display: none;
|
|
2867
|
+
}
|
|
2868
|
+
/* narrow-chat (.shell.open .chatpane): the column shrinks to 34% and slides. */
|
|
2869
|
+
.slicc-chatpane[narrow] {
|
|
2870
|
+
width: 34%;
|
|
2871
|
+
}
|
|
2872
|
+
/* The reading column is background-free in every layout (the frosted card was
|
|
2873
|
+
dropped — the shader renders low-contrast instead). In the narrow column the
|
|
2874
|
+
inner additionally fills the full width AND viewport height of the thread.
|
|
2875
|
+
The min-height is the FULL viewport (not the parent's 100%) so a freezer /
|
|
2876
|
+
scoop with little history still fills to the bottom of the screen instead of
|
|
2877
|
+
ending abruptly partway down — messages stay top-aligned and the filler
|
|
2878
|
+
space sits below; long histories still scroll. The 100vh declaration is the
|
|
2879
|
+
fallback for engines without dynamic-viewport units; the 100dvh override
|
|
2880
|
+
tracks mobile browser chrome (URL bar) collapse. Out-specifies the thread's
|
|
2881
|
+
own [open] inner rule (0,3,0 vs 0,2,1). */
|
|
2882
|
+
.slicc-chatpane[narrow] .slicc-thread__inner {
|
|
2883
|
+
width: 100%;
|
|
2884
|
+
max-width: none;
|
|
2885
|
+
min-height: 100vh;
|
|
2886
|
+
min-height: 100dvh;
|
|
2887
|
+
margin: 0;
|
|
2888
|
+
background: none;
|
|
2889
|
+
backdrop-filter: none;
|
|
2890
|
+
-webkit-backdrop-filter: none;
|
|
2891
|
+
border-radius: 0;
|
|
2892
|
+
-webkit-mask-image: none;
|
|
2893
|
+
mask-image: none;
|
|
2894
|
+
}
|
|
2895
|
+
`,Po=`slicc-chatpane-style`;function Fo(e){if(e.getElementById(Po))return;let t=e.createElement(`style`);t.id=Po,t.textContent=No,(e.head??e.documentElement).appendChild(t)}var Io=[`slicc-chat-thread`,`slicc-composer`];W(`slicc-chatpane`,class extends HTMLElement{static observedAttributes=[`narrow`];#e=null;#t=!1;connectedCallback(){Fo(this.ownerDocument),this.classList.add(`slicc-chatpane`),this.setAttribute(`part`,`pane`),this.#t=!0,this.#n(),this.#r()}disconnectedCallback(){this.#e?.disconnect(),this.#e=null}attributeChangedCallback(e,t,n){e!==`narrow`||t===n||this.isConnected&&(this.#n(),this.dispatchEvent(new CustomEvent(`slicc-chatpane-narrow-change`,{detail:{narrow:this.narrow},bubbles:!0,composed:!0})))}get narrow(){return this.hasAttribute(`narrow`)}set narrow(e){e?this.setAttribute(`narrow`,``):this.removeAttribute(`narrow`)}get nav(){return this.querySelector(`:scope > slicc-nav`)}get thread(){return this.querySelector(`:scope > slicc-chat-thread`)}get composer(){return this.querySelector(`:scope > slicc-composer`)}#n(){if(!this.#t)return;let e=this.narrow;for(let t of Io)for(let n of this.querySelectorAll(`:scope > ${t}`))e?n.setAttribute(`open`,``):n.removeAttribute(`open`)}#r(){this.#e||(this.#e=new MutationObserver(()=>this.#n()),this.#e.observe(this,{childList:!0}))}});var Lo=`
|
|
2896
|
+
.slicc-shell { display: flex; flex: 1; min-height: 0; }
|
|
2897
|
+
.slicc-shell > slicc-chatpane,
|
|
2898
|
+
.slicc-shell > .chatpane {
|
|
2899
|
+
flex: 0 0 auto;
|
|
2900
|
+
width: calc(100% - 48px);
|
|
2901
|
+
min-height: 0;
|
|
2902
|
+
transition: width .38s cubic-bezier(.4, 0, .2, 1);
|
|
2903
|
+
}
|
|
2904
|
+
.slicc-shell[open] > slicc-chatpane,
|
|
2905
|
+
.slicc-shell[open] > .chatpane { width: 34%; }
|
|
2906
|
+
.slicc-shell > slicc-workbench-pane,
|
|
2907
|
+
.slicc-shell > .workbench {
|
|
2908
|
+
flex: 0 0 auto;
|
|
2909
|
+
width: 0;
|
|
2910
|
+
margin: 0;
|
|
2911
|
+
opacity: 0;
|
|
2912
|
+
overflow: hidden;
|
|
2913
|
+
transition: width .38s cubic-bezier(.4, 0, .2, 1), margin .38s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
|
|
2914
|
+
}
|
|
2915
|
+
.slicc-shell[open] > slicc-workbench-pane,
|
|
2916
|
+
.slicc-shell[open] > .workbench {
|
|
2917
|
+
width: calc(66% - 72px);
|
|
2918
|
+
margin: 12px;
|
|
2919
|
+
opacity: 1;
|
|
2920
|
+
}
|
|
2921
|
+
/* Pin the dock to its full 48px basis. This selector outranks the dock's own
|
|
2922
|
+
"flex: 0 0 48px" rule, so an "auto" basis here would collapse the rail to its
|
|
2923
|
+
~35px icon-content width and leave a bare-shader strip down the right edge. */
|
|
2924
|
+
.slicc-shell > slicc-dock,
|
|
2925
|
+
.slicc-shell > .dock { flex: 0 0 48px; }
|
|
2926
|
+
|
|
2927
|
+
/* Narrow / extension-sidebar layout: a viewport this thin can't host a
|
|
2928
|
+
chat | workbench side-by-side split, so when the workbench opens it becomes a
|
|
2929
|
+
full-bleed overlay ON TOP of the (full-width) chat, leaving only the 48px dock
|
|
2930
|
+
rail exposed so its icons stay tappable to toggle the workbench closed again. */
|
|
2931
|
+
@media (max-width: 560px) {
|
|
2932
|
+
.slicc-shell { position: relative; }
|
|
2933
|
+
.slicc-shell > slicc-chatpane,
|
|
2934
|
+
.slicc-shell > .chatpane,
|
|
2935
|
+
.slicc-shell[open] > slicc-chatpane,
|
|
2936
|
+
.slicc-shell[open] > .chatpane { width: calc(100% - 48px); }
|
|
2937
|
+
.slicc-shell[open] > slicc-workbench-pane,
|
|
2938
|
+
.slicc-shell[open] > .workbench {
|
|
2939
|
+
position: absolute; top: 0; right: 48px; bottom: 0; left: 0;
|
|
2940
|
+
width: auto; margin: 0; border-radius: 0; opacity: 1;
|
|
2941
|
+
z-index: 5;
|
|
2942
|
+
/* Opaque so the full-height overlay reads as its own view, not a panel
|
|
2943
|
+
floating over a visible chat thread. */
|
|
2944
|
+
background: var(--bg);
|
|
2945
|
+
}
|
|
2946
|
+
}
|
|
2947
|
+
`,Ro=`slicc-shell-style`;function zo(e){if(e.getElementById(Ro))return;let t=e.createElement(`style`);t.id=Ro,t.textContent=Lo,(e.head??e.documentElement).appendChild(t)}W(`slicc-shell`,class extends HTMLElement{static observedAttributes=[`open`,`url-state`];#e=null;#t=null;#n=!1;#r=e=>{if(!this.urlState)return;let t=e.detail?.id;typeof t==`string`&&Yn(`ws`,t)};#i=()=>{this.urlState&&Yn(`ws`,null)};#a=()=>{if(!this.urlState)return;let e=Jn(`ws`);e?this.#o(e):this.open&&this.collapse()};connectedCallback(){if(zo(this.ownerDocument),this.classList.add(`slicc-shell`),this.setAttribute(`part`,`shell`),this.#n=!0,this.#s(),this.#e=e=>{let t=e.detail?.id;typeof t==`string`&&this.select(t)},this.#t=()=>this.collapse(),this.addEventListener(`dock-select`,this.#e),this.addEventListener(`dock-collapse`,this.#t),this.addEventListener(`slicc-dock-select`,this.#r),this.addEventListener(`slicc-dock-collapse`,this.#i),this.urlState){window.addEventListener(`popstate`,this.#a);let e=Jn(`ws`);e&&queueMicrotask(()=>this.#o(e))}}disconnectedCallback(){this.#e&&this.removeEventListener(`dock-select`,this.#e),this.#t&&this.removeEventListener(`dock-collapse`,this.#t),this.#e=null,this.#t=null,this.removeEventListener(`slicc-dock-select`,this.#r),this.removeEventListener(`slicc-dock-collapse`,this.#i),window.removeEventListener(`popstate`,this.#a)}get urlState(){return this.hasAttribute(`url-state`)}set urlState(e){this.toggleAttribute(`url-state`,e)}#o(e){this.dock?.selectItem?.(e)}attributeChangedCallback(e,t,n){e===`open`&&t!==n&&this.isConnected&&this.#s()}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}get chatpane(){return this.querySelector(`:scope > slicc-chatpane, :scope > .chatpane`)}get workbench(){return this.querySelector(`:scope > slicc-workbench-pane, :scope > .workbench`)}get dock(){return this.querySelector(`:scope > slicc-dock, :scope > .dock`)}select(e){this.open=!0,this.#c(e),this.dispatchEvent(new CustomEvent(`slicc-shell-select`,{detail:{id:e},bubbles:!0,composed:!0}))}collapse(){this.open=!1,this.dock?.clearActive?.(),this.dispatchEvent(new CustomEvent(`slicc-shell-collapse`,{bubbles:!0,composed:!0}))}#s(){if(!this.#n)return;let e=this.open;this.chatpane?.toggleAttribute(`narrow`,e),this.workbench?.toggleAttribute(`open`,e)}#c(e){this.dock?.selectItem?.(e);let t=this.workbench;t?.selectSurface&&t.selectSurface(e),this.#s()}});var Bo=q(`
|
|
2948
|
+
:host{display:inline-block;}
|
|
2949
|
+
.switcher-more{position:relative;}
|
|
2950
|
+
.morebtn{display:none;font:inherit;font-size:13px;font-weight:600;color:var(--txt-2);background:transparent;border:1px solid var(--line);border-radius:9999px;height:var(--ctl-h,30px);padding:0 11px;cursor:pointer;line-height:1;align-items:center;}
|
|
2951
|
+
.morebtn:hover{background:var(--ghost);color:var(--ink);}
|
|
2952
|
+
:host([count]:not([count="0"])) .morebtn,.switcher-more.has-overflow .morebtn{display:inline-flex;}
|
|
2953
|
+
.pop{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:180px;z-index:20;flex-direction:column;gap:4px;}
|
|
2954
|
+
.switcher-more.open .pop{display:flex;}
|
|
2955
|
+
.pop slicc-pill{display:block;width:100%;--pill-w:100%;animation:scoopReveal .24s ease both;animation-delay:calc(var(--i,0) * 45ms);}
|
|
2956
|
+
@keyframes scoopReveal{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
|
|
2957
|
+
@media (prefers-reduced-motion: reduce){.pop slicc-pill{animation:none;}}
|
|
2958
|
+
/* Narrow / mobile viewport: a <slicc-pill> compacts to icon-only by default
|
|
2959
|
+
(its own viewport media query). The dropdown stacks column-wise with ample
|
|
2960
|
+
horizontal room, so its overflow chips keep their WIDE, labeled form instead.
|
|
2961
|
+
Outer-tree ::part rules win the cascade over the pill's internal rules, so we
|
|
2962
|
+
restore the full-width button geometry + re-show the label here; the now
|
|
2963
|
+
redundant hover tip is suppressed. Non-overflow pills elsewhere are untouched. */
|
|
2964
|
+
@media (max-width:560px){
|
|
2965
|
+
.pop slicc-pill::part(pill){width:100%;padding:0 14px 0 0;}
|
|
2966
|
+
.pop slicc-pill::part(label){display:block;}
|
|
2967
|
+
.pop slicc-pill::part(tip){display:none;}
|
|
2968
|
+
}
|
|
2969
|
+
`);W(`slicc-scoop-overflow`,class extends HTMLElement{static observedAttributes=[`open`];#e;#t=[];#n;#r;#i;#a=e=>{this.open&&!this.contains(e.target)&&this.close()};constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[Bo]}connectedCallback(){this.#o()}disconnectedCallback(){document.removeEventListener(`click`,this.#a)}attributeChangedCallback(e){e===`open`&&this.#n&&this.#c()}get items(){return this.#t}set items(e){this.#t=Array.isArray(e)?e:[],this.isConnected&&this.#s()}get count(){return this.#t.length}get hasOverflow(){return this.#t.length>0}get open(){return this.hasAttribute(`open`)}set open(e){this.toggleAttribute(`open`,e)}show(){this.open||=!0}close(){this.open&&=!1}toggle(){this.open=!this.open}#o(){let e=K(`slot`,{name:`more`},`⋯`);this.#r=K(`button`,{class:`morebtn`,part:`more`,type:`button`,title:`More scoops`,"aria-haspopup":`true`,"aria-expanded":`false`},e),this.#i=K(`div`,{class:`pop`,part:`pop`}),this.#n=K(`div`,{class:`switcher-more`,part:`wrap`},this.#r,this.#i),this.#r.addEventListener(`click`,e=>{e.stopPropagation(),this.toggle()}),this.#e.replaceChildren(this.#n),this.#s(),this.#c()}#s(){let e=this.#t.length;if(e>0?this.setAttribute(`count`,String(e)):this.removeAttribute(`count`),this.#n.classList.toggle(`has-overflow`,e>0),this.#r.setAttribute(`aria-haspopup`,`true`),e===0){this.#i.replaceChildren(K(`slot`,{name:`empty`})),this.open&&this.close();return}let t=[];this.#t.forEach((e,n)=>{let r=e.id,i=e.label??e.id,a=K(`slicc-pill`,{class:`scoop`,part:`pill`,"data-k":r,type:e.type===`cone`?`cone`:`scoop`,eyes:e.eyes===`open`||e.eyes===`dead`?e.eyes:`none`,color:e.color??!1,label:i,style:`--i:${n}`});a.addEventListener(`click`,()=>{let e=a.dataset.k??``,t=this.#t.find(t=>t.id===e);this.#l(e,t?.label??e)}),t.push(a)}),this.#i.replaceChildren(...t)}#c(){let e=this.open;this.#n.classList.toggle(`open`,e),this.#r.setAttribute(`aria-expanded`,e?`true`:`false`),document.removeEventListener(`click`,this.#a),e&&document.addEventListener(`click`,this.#a)}#l(e,t){this.dispatchEvent(new CustomEvent(`slicc-scoop-select`,{detail:{id:e,label:t},bubbles:!0,composed:!0})),this.close()}});var Vo={cone:`var(--waffle)`,researcher:`var(--cyan)`,designer:`var(--violet)`,tester:`var(--amber)`,triage:`var(--green)`},Ho=40,Uo=6,Wo=`
|
|
2970
|
+
.slicc-scoop-switcher {
|
|
2971
|
+
display: flex;
|
|
2972
|
+
gap: ${Uo}px;
|
|
2973
|
+
flex-wrap: nowrap;
|
|
2974
|
+
min-width: 0;
|
|
2975
|
+
overflow: hidden;
|
|
2976
|
+
}
|
|
2977
|
+
/* Each chip carries an explicit width: as a flex item the pill is blockified,
|
|
2978
|
+
so its inline-block shadow content no longer establishes an intrinsic size and
|
|
2979
|
+
the chip (and the whole switcher) would collapse to 0. --pill-w is the pill's
|
|
2980
|
+
own width token. */
|
|
2981
|
+
.slicc-scoop-switcher .scoop { flex: 0 0 auto; width: var(--pill-w, 140px); --h: var(--rose); }
|
|
2982
|
+
.slicc-scoop-switcher .scoop[data-k=cone] { --h: var(--waffle); }
|
|
2983
|
+
.slicc-scoop-switcher .scoop[data-k=researcher] { --h: var(--cyan); }
|
|
2984
|
+
.slicc-scoop-switcher .scoop[data-k=designer] { --h: var(--violet); }
|
|
2985
|
+
.slicc-scoop-switcher .scoop[data-k=tester] { --h: var(--amber); }
|
|
2986
|
+
.slicc-scoop-switcher .scoop[data-k=triage] { --h: var(--green); }
|
|
2987
|
+
.slicc-scoop-switcher .scoop.hide { display: none; }
|
|
2988
|
+
/* slicc-pill renders its own pill in shadow DOM — strip the legacy .scoop chrome
|
|
2989
|
+
on the host so only the pill's own rounded chip shows (prototype Wave 11d). */
|
|
2990
|
+
.slicc-scoop-switcher slicc-pill.scoop {
|
|
2991
|
+
display: inline-block;
|
|
2992
|
+
padding: 0;
|
|
2993
|
+
border: none;
|
|
2994
|
+
background: transparent;
|
|
2995
|
+
border-radius: 9999px;
|
|
2996
|
+
--pill-w: 140px;
|
|
2997
|
+
line-height: 1;
|
|
2998
|
+
vertical-align: middle;
|
|
2999
|
+
}
|
|
3000
|
+
.slicc-scoop-switcher slicc-pill.scoop::part(icon) { width: 27px; height: 27px; }
|
|
3001
|
+
.slicc-scoop-switcher slicc-pill.scoop::part(pill) { outline: none; }
|
|
3002
|
+
.slicc-scoop-switcher slicc-pill.scoop:focus,
|
|
3003
|
+
.slicc-scoop-switcher slicc-pill.scoop:focus-visible { outline: none; }
|
|
3004
|
+
/* landing glow ("lit") — a 3px hue ring; re-tints over --canvas in dark mode */
|
|
3005
|
+
.slicc-scoop-switcher slicc-pill.scoop.lit::part(pill) {
|
|
3006
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--h) 45%, transparent);
|
|
3007
|
+
}
|
|
3008
|
+
.dark .slicc-scoop-switcher slicc-pill.scoop.lit::part(icon),
|
|
3009
|
+
[data-theme="dark"] .slicc-scoop-switcher slicc-pill.scoop.lit::part(icon) {
|
|
3010
|
+
background: color-mix(in srgb, var(--h) 24%, var(--canvas));
|
|
3011
|
+
}
|
|
3012
|
+
/* Narrow / extension-sidebar: chips collapse to icon-only (the pill hides its
|
|
3013
|
+
own label <=560px) — reserve just the icon width so the reflow fits several
|
|
3014
|
+
scoops as eyes-only chips instead of overflowing all but one. The hover title
|
|
3015
|
+
comes from slicc-pill's compact .tip. */
|
|
3016
|
+
@media (max-width: 560px) {
|
|
3017
|
+
.slicc-scoop-switcher .scoop { width: 34px; }
|
|
3018
|
+
.slicc-scoop-switcher slicc-pill.scoop { --pill-w: 34px; }
|
|
3019
|
+
}
|
|
3020
|
+
`,Go=`slicc-scoop-switcher-style`;function Ko(e){if(e.getElementById(Go))return;let t=e.createElement(`style`);t.id=Go,t.textContent=Wo,(e.head??e.documentElement).appendChild(t)}function qo(e){return Vo[e]??`var(--rose)`}function Jo(e,t){let n=e.getAttribute(`eyes`);return n===`open`||n===`none`||n===`dead`?n:t}W(`slicc-scoop-switcher`,class extends HTMLElement{static get observedAttributes(){return[`active`,`attention`]}#e=[];#t=null;#n=null;#r=!1;#i=null;#a=!1;#o=null;#s=e=>{let t=this.#f(e);t!==this.#o&&(this.#o=t,this.#m())};#c=()=>{this.#o!==null&&(this.#o=null,this.#m())};connectedCallback(){Ko(this.ownerDocument),this.classList.add(`slicc-scoop-switcher`),this.setAttribute(`part`,`row`),this.#a||=(this.#u(),!0),this.#i||(this.#i=e=>this.#v(e),this.addEventListener(`click`,this.#i)),this.addEventListener(`pointerover`,this.#s),this.addEventListener(`pointerleave`,this.#c),this.#d(),this.#y(),requestAnimationFrame(()=>this.reflow())}disconnectedCallback(){this.#n?.disconnect(),this.#n=null,this.#i&&=(this.removeEventListener(`click`,this.#i),null),this.removeEventListener(`pointerover`,this.#s),this.removeEventListener(`pointerleave`,this.#c)}attributeChangedCallback(e){this.#a&&(e===`active`?this.#h():e===`attention`&&this.#m())}get scoops(){return this.#e.map(e=>({...e}))}set scoops(e){this.#e=Array.isArray(e)?e.map(e=>({...e})):[],this.#a&&this.isConnected&&(this.#d(),this.reflow())}get attention(){return this.getAttribute(`attention`)}set attention(e){e==null?this.removeAttribute(`attention`):this.setAttribute(`attention`,e)}get active(){return this.getAttribute(`active`)}set active(e){e==null?this.removeAttribute(`active`):this.setAttribute(`active`,e)}reflow(){if(!(!this.isConnected||this.#r)){this.#r=!0;try{this.#l()}finally{this.#r=!1}}}#l(){let e=[...this.querySelectorAll(`slicc-pill.scoop`)];for(let t of e)t.classList.remove(`hide`);let t=e.filter(e=>e.offsetParent!==null||e.offsetWidth>0);if(t.length===0){this.#g([]);return}let n=this.clientWidth;if(n<=0){this.#g([]),requestAnimationFrame(()=>{this.isConnected&&this.clientWidth>0&&this.reflow()});return}let r=t.map(e=>e.offsetWidth);if(r.reduce((e,t)=>e+t,0)+Uo*Math.max(0,t.length-1)<=n+1){this.#g([]);return}let i=Math.max(0,n-Ho),a=[],o=0;t.forEach((e,t)=>{if(t===0){o+=r[t];return}let n=Uo+r[t];a.length===0&&o+n<=i?o+=n:(e.classList.add(`hide`),a.push(e))}),this.#g(a)}select(e){this.active=e;let t=this.#e.find(t=>t.key===e)?.label??e;this.dispatchEvent(new CustomEvent(`slicc-scoop-select`,{detail:{id:e,key:e,label:t},bubbles:!0,composed:!0}))}#u(){let e=[...this.querySelectorAll(`slicc-pill`)];if(e.length===0)return;let t=e.map(e=>{let t=e.dataset.k??e.getAttribute(`label`)??``,n=e.getAttribute(`type`)===`cone`?`cone`:`scoop`;return{key:t,type:n,color:e.getAttribute(`color`)??void 0,label:e.getAttribute(`label`)??t,eyes:Jo(e,n===`cone`?`open`:`none`),ephemeral:e.classList.contains(`ephemeral`)}});for(let t of e)t.remove();this.#e.length===0&&(this.#e=t)}#d(){let e=this.active,t=this.#e.map(t=>{let n=t.key,r=t.type===`cone`||n===`cone`?`cone`:`scoop`,i=t.label??n,a=t.eyes??(r===`cone`?`open`:`none`),o=e!=null&&e===n,s=qo(n);return K(`slicc-pill`,{class:`scoop${t.ephemeral?` ephemeral`:``}`,"data-k":n,type:r,color:t.color?t.color:!1,eyes:a,fill:typeof t.fill==`number`&&Number.isFinite(t.fill)?String(Math.round(Math.min(100,Math.max(0,t.fill)))):!1,label:i,active:o,style:`--h:${s}`})});this.replaceChildren(...t),this.#m()}#f(e){let t=e.target?.closest?.(`slicc-pill.scoop`);return t&&this.contains(t)?t.dataset.k??null:null}#p(e){let t=this.#e.find(t=>t.key===e),n=t?.type===`cone`||e===`cone`?`cone`:`scoop`;return t?.eyes??(n===`cone`?`open`:`none`)}#m(){let e=this.attention;for(let t of this.querySelectorAll(`slicc-pill.scoop`)){let n=t.dataset.k??``,r=this.#o===null?e!==null&&e===n:this.#o===n,i=this.#p(n);t.setAttribute(`eyes`,r?i:`none`),t.toggleAttribute(`blink`,r&&this.#o===null&&i===`open`)}}#h(){let e=this.active;for(let t of this.querySelectorAll(`slicc-pill.scoop`)){let n=t.dataset.k===e;t.classList.toggle(`active`,n),t.toggleAttribute(`active`,n)}}#g(e){if(e.length===0){this.#t&&(this.#t.items=[]);return}let t=this.#_();t.items=e.map(e=>{let t=e.dataset.k??``;return{id:t,label:e.getAttribute(`label`)??t,type:e.getAttribute(`type`)===`cone`?`cone`:`scoop`,color:e.getAttribute(`color`)??void 0,eyes:Jo(e,e.getAttribute(`type`)===`cone`?`open`:`none`)}})}#_(){if(this.#t)return this.#t;let e=this.ownerDocument.createElement(`slicc-scoop-overflow`);return e.addEventListener(`slicc-scoop-select`,e=>{let t=e.detail?.id;typeof t==`string`&&(e.stopPropagation(),this.select(t))}),this.after(e),this.#t=e,e}#v(e){let t=e.target?.closest(`slicc-pill.scoop`);if(!t||!this.contains(t))return;let n=t.dataset.k;n&&this.select(n)}#y(){this.#n||typeof ResizeObserver>`u`||(this.#n=new ResizeObserver(()=>this.reflow()),this.#n.observe(this),this.parentElement&&this.#n.observe(this.parentElement))}});var Yo=`/**
|
|
3021
|
+
* SLICC design tokens — lifted verbatim from the prototype
|
|
3022
|
+
* (proto/StellarRubySwift.html :root + body.dark). Light is the default; dark is
|
|
3023
|
+
* opt-in. Per project decision the prototype's token vocabulary and light-default
|
|
3024
|
+
* polarity are the library contract (reconciliation with the webapp's --s2-* /
|
|
3025
|
+
* dark-default system happens later, during wire-in).
|
|
3026
|
+
*
|
|
3027
|
+
* Custom properties are inherited, so these values pierce shadow boundaries —
|
|
3028
|
+
* shadow-DOM components reference var(--canvas) etc. and resolve against whatever
|
|
3029
|
+
* theme scope wraps them. Apply dark via ANY of: \`body.dark\`, \`.dark\` on a wrapper
|
|
3030
|
+
* (e.g. <slicc-theme theme="dark">), or \`[data-theme="dark"]\` on the document root.
|
|
3031
|
+
*/
|
|
3032
|
+
:root {
|
|
3033
|
+
--canvas: #fff;
|
|
3034
|
+
--bg: #f4f4f6;
|
|
3035
|
+
--ghost: #ececef;
|
|
3036
|
+
--desk: #ececef;
|
|
3037
|
+
--ink: #0a0a0a;
|
|
3038
|
+
--deep: #000;
|
|
3039
|
+
--txt-2: #737373;
|
|
3040
|
+
--txt-3: #a1a1a1;
|
|
3041
|
+
--line: #e5e5e5;
|
|
3042
|
+
--red: #c22b10;
|
|
3043
|
+
--green: #168a35;
|
|
3044
|
+
--green-bg: #ecf8ef;
|
|
3045
|
+
--green-line: #cbe9d3;
|
|
3046
|
+
--rose: #f43f5e;
|
|
3047
|
+
--cyan: #06b6d4;
|
|
3048
|
+
--violet: #8b5cf6;
|
|
3049
|
+
--amber: #f59e0b;
|
|
3050
|
+
--waffle: #b07823;
|
|
3051
|
+
--ctx: #f59e0b;
|
|
3052
|
+
/* The derived emphasis accent: bold text, links, blockquote edges, icon
|
|
3053
|
+
chips. NOTE the CSS custom-property gotcha: var() inside a custom
|
|
3054
|
+
property substitutes at the DECLARING element, so this :root value bakes
|
|
3055
|
+
in :root's --ctx. Components that must track a locally-overridden --ctx
|
|
3056
|
+
re-declare the same formula on their own host selector (agent-message,
|
|
3057
|
+
action-row, tool-cluster, …). Because --ink flips with the theme, the
|
|
3058
|
+
accent lands dark-leaning on light canvases and light-leaning on dark
|
|
3059
|
+
ones — contrast for free. */
|
|
3060
|
+
--accent: color-mix(in srgb, var(--ctx) 55%, var(--ink));
|
|
3061
|
+
--shaderbg: #f7f2e3;
|
|
3062
|
+
--rainbow: linear-gradient(90deg, #f43f5e 0%, #f59e0b 28%, #06b6d4 64%, #8b5cf6 100%);
|
|
3063
|
+
--ui: "adobe-clean", "Inter", system-ui, sans-serif;
|
|
3064
|
+
--mono: "Source Code Pro", "JetBrains Mono", ui-monospace, monospace;
|
|
3065
|
+
--shadow-pane: rgba(10, 10, 10, 0.06) 0 8px 26px -10px;
|
|
3066
|
+
--barh: 44px;
|
|
3067
|
+
--ctl-h: 30px;
|
|
3068
|
+
}
|
|
3069
|
+
|
|
3070
|
+
.dark,
|
|
3071
|
+
[data-theme="dark"] {
|
|
3072
|
+
--canvas: #161618;
|
|
3073
|
+
--bg: #0e0e10;
|
|
3074
|
+
--ghost: #1f1f22;
|
|
3075
|
+
--desk: #1f1f22;
|
|
3076
|
+
--ink: #f5f5f2;
|
|
3077
|
+
--deep: #f5f5f2;
|
|
3078
|
+
--txt-2: #9b9ba1;
|
|
3079
|
+
--txt-3: #6c6c72;
|
|
3080
|
+
--line: #2a2a2e;
|
|
3081
|
+
--shaderbg: #171410;
|
|
3082
|
+
--shadow-pane: rgba(0, 0, 0, 0.35) 0 8px 26px -10px;
|
|
3083
|
+
}
|
|
3084
|
+
`,Xo=`slicc-tokens`;function Zo(e=document){if(e.getElementById(Xo))return;let t=e.createElement(`style`);t.id=Xo,t.textContent=Yo,(e.head??e.documentElement).appendChild(t)}function Qo(e,t=document.body){t.classList.toggle(`dark`,e===`dark`),t.setAttribute(`data-theme`,e)}function $o(e=document.body){if(typeof window>`u`||typeof window.matchMedia!=`function`)return()=>{};let t=window.matchMedia(`(prefers-color-scheme: dark)`),n=()=>Qo(t.matches?`dark`:`light`,e);return n(),t.addEventListener(`change`,n),()=>t.removeEventListener(`change`,n)}var es=q(`
|
|
3085
|
+
:host { display: inline-flex; flex: 0 0 auto; }
|
|
3086
|
+
.themetgl {
|
|
3087
|
+
font: inherit; font-family: var(--ui); font-size: 14px; line-height: 1;
|
|
3088
|
+
width: var(--ctl-h, 30px); height: var(--ctl-h, 30px);
|
|
3089
|
+
border-radius: 9999px;
|
|
3090
|
+
background: var(--ghost); color: var(--ink); border: 1px solid var(--line);
|
|
3091
|
+
cursor: pointer; display: grid; place-items: center; flex: 0 0 auto;
|
|
3092
|
+
padding: 0;
|
|
3093
|
+
}
|
|
3094
|
+
.themetgl:hover { background: color-mix(in srgb, var(--ink) 8%, var(--ghost)); }
|
|
3095
|
+
.themetgl svg { display: block; }
|
|
3096
|
+
`),ts=16,ns={light:`moon`,dark:`sun`},rs={light:`Switch to dark mode`,dark:`Switch to light mode`};W(`slicc-theme-toggle`,class extends HTMLElement{static observedAttributes=[`theme`];#e;#t=null;#n=!1;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[es];let e=K(`button`,{class:`themetgl`,part:`button`,type:`button`,"aria-pressed":`false`},K(`slot`,{name:`glyph-light`},J(ns.light,{size:ts})),K(`slot`,{name:`glyph-dark`,hidden:!0},J(ns.dark,{size:ts})));this.#e.replaceChildren(e),this.#t=e}connectedCallback(){this.#t?.addEventListener(`click`,this.#i),this.#a(this.theme??`light`,{silent:!0})}disconnectedCallback(){this.#t?.removeEventListener(`click`,this.#i)}attributeChangedCallback(e,t,n){e!==`theme`||t===n||this.#n||this.isConnected&&this.#a(this.#r(n)??`light`,{silent:!0})}get theme(){return this.#r(this.getAttribute(`theme`))}set theme(e){this.#a(e===`dark`?`dark`:`light`,{silent:!0})}get pressed(){return this.theme===`dark`}#r(e){return e===`dark`?`dark`:e===`light`?`light`:null}#i=()=>{this.#a(this.theme===`dark`?`light`:`dark`)};#a(e,t={}){this.#n=!0;try{if(Qo(e),this.getAttribute(`theme`)!==e&&this.setAttribute(`theme`,e),this.#t){this.#t.setAttribute(`aria-pressed`,e===`dark`?`true`:`false`),this.#t.title=rs[e];let t=this.#e.querySelector(`slot[name="glyph-light"]`),n=this.#e.querySelector(`slot[name="glyph-dark"]`);t?.toggleAttribute(`hidden`,e===`dark`),n?.toggleAttribute(`hidden`,e===`light`)}for(let t of document.querySelectorAll(`slicc-pill, slicc-add-menu`))t.setAttribute(`theme`,e)}finally{this.#n=!1}t.silent||this.dispatchEvent(new CustomEvent(`slicc-theme-change`,{detail:{theme:e},bubbles:!0,composed:!0}))}}),W(`slicc-theme`,class extends HTMLElement{static observedAttributes=[`theme`];connectedCallback(){Zo(this.ownerDocument),this.classList.add(`slicc-theme`),this.#e()}attributeChangedCallback(e,t,n){e===`theme`&&t!==n&&this.isConnected&&this.#e()}get theme(){return this.getAttribute(`theme`)===`dark`?`dark`:`light`}set theme(e){this.setAttribute(`theme`,e===`dark`?`dark`:`light`)}#e(){let e=this.theme;Qo(e,this),this.dispatchEvent(new CustomEvent(`slicc-theme-change`,{detail:{theme:e},bubbles:!0,composed:!0}))}});var is=`
|
|
3097
|
+
slicc-file-tree {
|
|
3098
|
+
width: 190px;
|
|
3099
|
+
flex: 0 0 auto;
|
|
3100
|
+
box-sizing: border-box;
|
|
3101
|
+
display: block;
|
|
3102
|
+
border-right: 1px solid var(--line);
|
|
3103
|
+
overflow: auto;
|
|
3104
|
+
padding: 10px 8px;
|
|
3105
|
+
font-family: var(--ui);
|
|
3106
|
+
font-size: 12px;
|
|
3107
|
+
}
|
|
3108
|
+
slicc-file-tree .grp {
|
|
3109
|
+
color: var(--txt-3);
|
|
3110
|
+
padding: 5px 8px 3px;
|
|
3111
|
+
}
|
|
3112
|
+
slicc-file-tree .grp + .grp {
|
|
3113
|
+
margin-top: 8px;
|
|
3114
|
+
}
|
|
3115
|
+
slicc-file-tree .f {
|
|
3116
|
+
display: flex;
|
|
3117
|
+
align-items: center;
|
|
3118
|
+
gap: 7px;
|
|
3119
|
+
padding: 4px 8px;
|
|
3120
|
+
border-radius: 7px;
|
|
3121
|
+
color: var(--ink);
|
|
3122
|
+
cursor: pointer;
|
|
3123
|
+
}
|
|
3124
|
+
slicc-file-tree .f:hover {
|
|
3125
|
+
background: var(--ghost);
|
|
3126
|
+
}
|
|
3127
|
+
slicc-file-tree .f.on {
|
|
3128
|
+
background: color-mix(in srgb, var(--violet) 10%, var(--canvas));
|
|
3129
|
+
color: var(--violet);
|
|
3130
|
+
}
|
|
3131
|
+
slicc-file-tree .f::before {
|
|
3132
|
+
content: "";
|
|
3133
|
+
width: 5px;
|
|
3134
|
+
height: 5px;
|
|
3135
|
+
flex: 0 0 auto;
|
|
3136
|
+
border-radius: 1px;
|
|
3137
|
+
background: var(--txt-3);
|
|
3138
|
+
}
|
|
3139
|
+
slicc-file-tree .f.on::before {
|
|
3140
|
+
background: var(--violet);
|
|
3141
|
+
}
|
|
3142
|
+
slicc-file-tree .dir {
|
|
3143
|
+
display: flex;
|
|
3144
|
+
align-items: center;
|
|
3145
|
+
gap: 6px;
|
|
3146
|
+
padding: 4px 8px;
|
|
3147
|
+
border-radius: 7px;
|
|
3148
|
+
color: var(--ink);
|
|
3149
|
+
cursor: pointer;
|
|
3150
|
+
user-select: none;
|
|
3151
|
+
}
|
|
3152
|
+
slicc-file-tree .dir:hover {
|
|
3153
|
+
background: var(--ghost);
|
|
3154
|
+
}
|
|
3155
|
+
slicc-file-tree .dir .chev {
|
|
3156
|
+
flex: 0 0 auto;
|
|
3157
|
+
color: var(--txt-3);
|
|
3158
|
+
transition: transform 0.12s ease;
|
|
3159
|
+
}
|
|
3160
|
+
slicc-file-tree .dir.open .chev {
|
|
3161
|
+
transform: rotate(90deg);
|
|
3162
|
+
}
|
|
3163
|
+
slicc-file-tree .children {
|
|
3164
|
+
padding-left: 12px;
|
|
3165
|
+
}
|
|
3166
|
+
slicc-file-tree .children[hidden] {
|
|
3167
|
+
display: none;
|
|
3168
|
+
}
|
|
3169
|
+
|
|
3170
|
+
.dark slicc-file-tree .f.on,
|
|
3171
|
+
[data-theme="dark"] slicc-file-tree .f.on {
|
|
3172
|
+
background: color-mix(in srgb, var(--violet) 22%, var(--canvas));
|
|
3173
|
+
}
|
|
3174
|
+
`,as=`slicc-file-tree-style`;function os(e){if(e.getElementById(as))return;let t=e.createElement(`style`);t.id=as,t.textContent=is,(e.head??e.documentElement).appendChild(t)}function ss(e,t){let n=[];for(let r of e)if(r.kind===`group`)n.push(K(`div`,{class:`grp`},r.label));else if(r.kind===`dir`){let e=t.has(r.id);n.push(K(`div`,{class:e?`dir open`:`dir`,"data-dir-id":r.id,"aria-expanded":e?`true`:`false`},J(`chevron-right`,{size:14,class:`chev`}),r.label));let i=K(`div`,{class:`children`,hidden:e?void 0:!0});G(i,ss(r.children??[],t)),n.push(i)}else n.push(K(`div`,{class:`f`,"data-id":r.id},r.label));return n}var cs=class extends HTMLElement{static get observedAttributes(){return[`selected`]}#e=null;#t=new Map;#n=new Set;#r=!1;#i=null;connectedCallback(){os(this.ownerDocument),this.#r||=(this.#e??(this.#e=this.#o(),this.#l()),!0),this.#s(),this.#d()}disconnectedCallback(){this.#i&&=(this.removeEventListener(`click`,this.#i),null)}attributeChangedCallback(e){e===`selected`&&this.#r&&this.isConnected&&this.#a()}get items(){return this.#e?this.#e.slice():[]}set items(e){this.#e=Array.isArray(e)?e.slice():[],this.#r=!0,this.#l(),this.isConnected&&(this.#s(),this.#d())}toggleDir(e){if(!this.#u(e,this.#e??[]))return;let t=!this.#n.has(e);t?this.#n.add(e):this.#n.delete(e),this.#s(),this.dispatchEvent(new CustomEvent(`dir-toggle`,{bubbles:!0,composed:!0,detail:{id:e,open:t}}))}isDirOpen(e){return this.#n.has(e)}get selected(){return this.getAttribute(`selected`)}set selected(e){e==null?this.removeAttribute(`selected`):this.setAttribute(`selected`,e)}selectFile(e){if(!this.querySelector(`.f[data-id="${ls(e)}"]`))return;this.getAttribute(`selected`)!==e&&this.setAttribute(`selected`,e),this.#a();let t=this.#t.get(e)??e;this.dispatchEvent(new CustomEvent(`file-select`,{bubbles:!0,composed:!0,detail:{id:e,path:t}}))}#a(){let e=this.getAttribute(`selected`);for(let t of this.querySelectorAll(`.f`))t.classList.toggle(`on`,t.dataset.id===e)}#o(){let e=[];for(let t of Array.from(this.children)){if(!(t instanceof HTMLElement))continue;let n=(t.textContent??``).trim();if(n)if(t.classList.contains(`grp`)||t.hasAttribute(`data-group`)||t.dataset.group!=null)e.push({kind:`group`,label:n});else{let r=t.dataset.id??t.id??n;e.push({kind:`file`,id:r,label:n})}}return e}#s(){let e=this.#e??[];this.#t.clear(),this.#c(e),this.replaceChildren(...ss(e,this.#n)),this.#a()}#c(e){for(let t of e)t.kind===`file`?this.#t.set(t.id,t.path??t.label):t.kind===`dir`&&this.#c(t.children??[])}#l(){this.#n.clear();let e=t=>{for(let n of t)n.kind===`dir`&&(n.open&&this.#n.add(n.id),e(n.children??[]))};e(this.#e??[])}#u(e,t){for(let n of t)if(n.kind===`dir`&&(n.id===e||this.#u(e,n.children??[])))return!0;return!1}#d(){this.#i||(this.#i=e=>{let t=e.target,n=t?.closest(`.dir`);if(n&&this.contains(n)){let e=n.dataset.dirId;e!=null&&this.toggleDir(e);return}let r=t?.closest(`.f`);if(!r||!this.contains(r))return;let i=r.dataset.id;i!=null&&this.selectFile(i)},this.addEventListener(`click`,this.#i))}};function ls(e){return e.replace(/\\/g,`\\\\`).replace(/"/g,`\\"`)}W(`slicc-file-tree`,cs);var us=`
|
|
3175
|
+
slicc-surface {
|
|
3176
|
+
position: absolute;
|
|
3177
|
+
inset: 0;
|
|
3178
|
+
display: none;
|
|
3179
|
+
box-sizing: border-box;
|
|
3180
|
+
font-family: var(--ui);
|
|
3181
|
+
}
|
|
3182
|
+
/* Active reveal — the prototype's \`.surface.on\`. Default (and \`layout="flex"\`)
|
|
3183
|
+
reveals as a flex row (Files / Terminal / Hero studio). */
|
|
3184
|
+
slicc-surface[active] {
|
|
3185
|
+
display: flex;
|
|
3186
|
+
}
|
|
3187
|
+
/* \`.surface.mem.on,.surface.pal.on\` — the Memory / Palette scroll lists reveal as
|
|
3188
|
+
a plain block. */
|
|
3189
|
+
slicc-surface[active][layout="block"] {
|
|
3190
|
+
display: block;
|
|
3191
|
+
}
|
|
3192
|
+
/* \`.surface.browser.on\` — the Browser/CDP surface stacks its bar over the compare
|
|
3193
|
+
grid and paints the prototype's literal paper backdrop. */
|
|
3194
|
+
slicc-surface[active][layout="column"] {
|
|
3195
|
+
display: flex;
|
|
3196
|
+
flex-direction: column;
|
|
3197
|
+
background: #fafafa;
|
|
3198
|
+
}
|
|
3199
|
+
/* Browser-fullscreen (Fullscreen API): the surface normally inherits the pane's
|
|
3200
|
+
backdrop; standalone over the UA's black fullscreen backdrop it needs its own
|
|
3201
|
+
opaque canvas, and the absolute inset anchors to the viewport. */
|
|
3202
|
+
slicc-surface:fullscreen {
|
|
3203
|
+
background: var(--canvas, #fff);
|
|
3204
|
+
position: fixed;
|
|
3205
|
+
}
|
|
3206
|
+
`,ds=`slicc-surface-style`;function fs(e){if(e.getElementById(ds))return;let t=e.createElement(`style`);t.id=ds,t.textContent=us,(e.head??e.documentElement).appendChild(t)}function ps(e){return e===`block`||e===`column`?e:`flex`}W(`slicc-surface`,class extends HTMLElement{static observedAttributes=[`surface-id`,`active`,`layout`];connectedCallback(){fs(this.ownerDocument),this.#e()}attributeChangedCallback(e,t,n){this.isConnected&&(e===`surface-id`?this.#e():e===`active`&&t!==n&&this.dispatchEvent(new CustomEvent(`surface-toggle`,{bubbles:!0,composed:!0,detail:{surfaceId:this.surfaceId,active:this.active,layout:this.layout}})))}get surfaceId(){return this.getAttribute(`surface-id`)}set surfaceId(e){e==null?this.removeAttribute(`surface-id`):this.setAttribute(`surface-id`,e)}get active(){return this.hasAttribute(`active`)}set active(e){this.toggleAttribute(`active`,e)}get layout(){return ps(this.getAttribute(`layout`))}set layout(e){this.setAttribute(`layout`,ps(e))}#e(){let e=this.surfaceId;e==null?delete this.dataset.s:this.dataset.s=e}});var ms=q(`
|
|
3207
|
+
:host{display:inline-flex;white-space:nowrap;}
|
|
3208
|
+
.tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--ui);font-size:12px;color:var(--txt-2);background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 10px;cursor:pointer;white-space:nowrap;}
|
|
3209
|
+
.tab:hover{background:var(--ghost);color:var(--ink);}
|
|
3210
|
+
.tab.on{color:var(--ink);background:var(--ghost);}
|
|
3211
|
+
.gl{font-size:11px;color:var(--txt-3);}
|
|
3212
|
+
.tab.on .gl{color:var(--ink);}
|
|
3213
|
+
/* sprinkle tabs read as defined chips (more visible), violet-tinted when active */
|
|
3214
|
+
.tab.sp{color:var(--ink);background:var(--canvas);border-color:var(--line);}
|
|
3215
|
+
.tab.sp:hover{border-color:color-mix(in srgb,var(--violet) 30%,var(--line));background:var(--canvas);}
|
|
3216
|
+
.tab.sp.on{background:color-mix(in srgb,var(--violet) 9%,var(--canvas));border-color:color-mix(in srgb,var(--violet) 34%,var(--line));color:var(--ink);}
|
|
3217
|
+
:host([theme="dark"]) .tab.sp.on{background:color-mix(in srgb,var(--violet) 18%,var(--canvas));border-color:color-mix(in srgb,var(--violet) 40%,var(--line));}
|
|
3218
|
+
.sg{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:4px;color:#fff;background:var(--rainbow);}
|
|
3219
|
+
.x{margin-left:3px;width:15px;height:15px;border-radius:4px;display:grid;place-items:center;color:var(--txt-3);}
|
|
3220
|
+
.x:hover{background:var(--line);color:var(--ink);}
|
|
3221
|
+
.sg svg,.x svg{display:block;}
|
|
3222
|
+
`),hs=13;W(`slicc-tab`,class extends HTMLElement{static observedAttributes=[`tab-id`,`kind`,`active`,`closable`,`badge`,`glyph`,`label`,`theme`];#e;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:`open`}),this.#e.adoptedStyleSheets=[ms]}connectedCallback(){this.#n(),this.#r()}disconnectedCallback(){this.#i()}attributeChangedCallback(){this.isConnected&&this.#n()}get tabId(){return this.getAttribute(`tab-id`)}set tabId(e){e==null?this.removeAttribute(`tab-id`):this.setAttribute(`tab-id`,e)}get kind(){return this.getAttribute(`kind`)===`sprinkle`?`sprinkle`:`tool`}set kind(e){this.setAttribute(`kind`,e===`sprinkle`?`sprinkle`:`tool`)}get active(){return this.hasAttribute(`active`)}set active(e){this.toggleAttribute(`active`,e)}get closable(){return this.hasAttribute(`closable`)}set closable(e){this.toggleAttribute(`closable`,e)}get badge(){return this.getAttribute(`badge`)}set badge(e){e==null?this.removeAttribute(`badge`):this.setAttribute(`badge`,e)}get glyph(){return this.getAttribute(`glyph`)}set glyph(e){e==null?this.removeAttribute(`glyph`):this.setAttribute(`glyph`,e)}get label(){return this.getAttribute(`label`)}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}#n(){let e=this.kind===`sprinkle`,t=K(`button`,{class:`tab${e?` sp`:``}${this.active?` on`:``}`,part:`tab`,type:`button`});if(this.tabId!=null&&t.setAttribute(`data-t`,this.tabId),e){let e=this.badge??`sparkles`;t.append(K(`span`,{class:`sg`,part:`badge`,"aria-hidden":`true`},J(e,{size:hs})))}else this.glyph!=null&&t.append(K(`span`,{class:`gl`,part:`glyph`,"aria-hidden":`true`},this.glyph));let n=this.label;t.append(n==null?K(`slot`):document.createTextNode(n)),this.closable&&t.append(K(`span`,{class:`x`,part:`close`,"data-close":``,role:`button`,"aria-label":`Close tab`},J(`x`,{size:hs}))),this.#e.replaceChildren(t)}#r(){this.#t||(this.#t=e=>this.#a(e),this.#e.addEventListener(`click`,this.#t))}#i(){this.#t&&=(this.#e.removeEventListener(`click`,this.#t),null)}#a(e){let t=e.target,n={tabId:this.tabId};if(t?.closest(`[data-close]`)){e.stopPropagation(),this.dispatchEvent(new CustomEvent(`close`,{detail:n,bubbles:!0,composed:!0}));return}this.dispatchEvent(new CustomEvent(`select`,{detail:n,bubbles:!0,composed:!0}))}});var gs=`
|
|
3223
|
+
slicc-tab-bar {
|
|
3224
|
+
display: flex;
|
|
3225
|
+
align-items: center;
|
|
3226
|
+
gap: 4px;
|
|
3227
|
+
min-width: 0;
|
|
3228
|
+
overflow-x: auto;
|
|
3229
|
+
font-family: var(--ui);
|
|
3230
|
+
}
|
|
3231
|
+
slicc-tab-bar[hidden] {
|
|
3232
|
+
display: none;
|
|
3233
|
+
}
|
|
3234
|
+
`,_s=`slicc-tab-bar-style`;function vs(e){if(e.getElementById(_s))return;let t=e.createElement(`style`);t.id=_s,t.textContent=gs,(e.head??e.documentElement).appendChild(t)}function ys(e){return e===`sprinkle`?`sprinkle`:`tool`}W(`slicc-tab-bar`,class extends HTMLElement{static observedAttributes=[`active`];#e=[];#t=!1;#n=null;#r=null;#i=null;connectedCallback(){vs(this.ownerDocument),this.#c(),this.#p()}disconnectedCallback(){this.#l(),this.#t=!1}attributeChangedCallback(e){e===`active`&&this.isConnected&&this.#o()}get active(){return this.getAttribute(`active`)}set active(e){e==null?this.removeAttribute(`active`):this.setAttribute(`active`,e)}get tabs(){return this.#e.map(e=>({...e}))}set tabs(e){this.#e=(e??[]).map(e=>({...e})),this.active!=null&&!this.#e.some(e=>e.id===this.active)&&this.#a(this.#e[0]?.id??null),this.#t=!1,this.isConnected&&this.#p()}addTab(e){let t={...e,kind:ys(e.kind)},n=this.#e.findIndex(e=>e.id===t.id);return n>=0?this.#e[n]=t:this.#e.push(t),this.#t=!1,this.isConnected&&this.#p(),this.selectTab(t.id),t}removeTab(e){let t=this.#e.findIndex(t=>t.id===e);if(t<0)return;let n=this.active===e;if(this.#e.splice(t,1),this.#t=!1,this.isConnected&&this.#p(),this.dispatchEvent(new CustomEvent(`tab-close`,{detail:{id:e},bubbles:!0,composed:!0})),n){let e=this.#e[0]?.id??null;e==null?this.#a(null):this.selectTab(e)}}selectTab(e){this.#e.some(t=>t.id===e)&&this.active!==e&&(this.#a(e),this.dispatchEvent(new CustomEvent(`tab-select`,{detail:{id:e},bubbles:!0,composed:!0})))}#a(e){e==null?this.removeAttribute(`active`):this.setAttribute(`active`,e),this.#o()}#o(){let e=this.active;for(let t of this.querySelectorAll(`:scope > slicc-tab`)){let n=t.getAttribute(`tab-id`);t.toggleAttribute(`active`,n!=null&&n===e)}}#s(e){if(!(e instanceof Element))return null;let t=e.closest(`slicc-tab`);return!t||t.parentElement!==this?null:t.getAttribute(`tab-id`)}#c(){this.#r||(this.#r=e=>this.#u(e),this.#i=e=>this.#d(e),this.addEventListener(`select`,this.#r),this.addEventListener(`close`,this.#i),this.#n=e=>this.#f(e),this.addEventListener(`click`,this.#n))}#l(){this.#r&&this.removeEventListener(`select`,this.#r),this.#i&&this.removeEventListener(`close`,this.#i),this.#n&&this.removeEventListener(`click`,this.#n),this.#r=null,this.#i=null,this.#n=null}#u(e){if(e.target===this)return;let t=this.#s(e.target);t!=null&&(e.stopPropagation(),this.selectTab(t))}#d(e){if(e.target===this)return;let t=this.#s(e.target);t!=null&&(e.stopPropagation(),this.removeTab(t))}#f(e){let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`slicc-tab`);if(!n||n.parentElement!==this)return;let r=n.getAttribute(`tab-id`);if(r==null)return;let i=t.closest(`.x, [data-close]`);if(i&&n.contains(i)){e.stopPropagation(),this.removeTab(r);return}this.selectTab(r)}#p(){if(this.#t)return;this.#t=!0;let e=this.active,t=[];for(let n of this.#e){let r=ys(n.kind);r!==`tool`&&t.push(K(`slicc-tab`,{"tab-id":n.id,kind:r,label:n.label,part:`tab`,closable:n.closable?!0:void 0,glyph:n.glyph||void 0,active:e!=null&&e===n.id?!0:void 0}))}this.replaceChildren(...t)}});var bs=`/**
|
|
3235
|
+
* Copyright (c) 2014 The xterm.js authors. All rights reserved.
|
|
3236
|
+
* Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
|
|
3237
|
+
* https://github.com/chjj/term.js
|
|
3238
|
+
* @license MIT
|
|
3239
|
+
*
|
|
3240
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
3241
|
+
* of this software and associated documentation files (the "Software"), to deal
|
|
3242
|
+
* in the Software without restriction, including without limitation the rights
|
|
3243
|
+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
3244
|
+
* copies of the Software, and to permit persons to whom the Software is
|
|
3245
|
+
* furnished to do so, subject to the following conditions:
|
|
3246
|
+
*
|
|
3247
|
+
* The above copyright notice and this permission notice shall be included in
|
|
3248
|
+
* all copies or substantial portions of the Software.
|
|
3249
|
+
*
|
|
3250
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
3251
|
+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
3252
|
+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
3253
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
3254
|
+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
3255
|
+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
|
3256
|
+
* THE SOFTWARE.
|
|
3257
|
+
*
|
|
3258
|
+
* Originally forked from (with the author's permission):
|
|
3259
|
+
* Fabrice Bellard's javascript vt100 for jslinux:
|
|
3260
|
+
* http://bellard.org/jslinux/
|
|
3261
|
+
* Copyright (c) 2011 Fabrice Bellard
|
|
3262
|
+
* The original design remains. The terminal itself
|
|
3263
|
+
* has been extended to include xterm CSI codes, among
|
|
3264
|
+
* other features.
|
|
3265
|
+
*/
|
|
3266
|
+
|
|
3267
|
+
/**
|
|
3268
|
+
* Default styles for xterm.js
|
|
3269
|
+
*/
|
|
3270
|
+
|
|
3271
|
+
.xterm {
|
|
3272
|
+
cursor: text;
|
|
3273
|
+
position: relative;
|
|
3274
|
+
user-select: none;
|
|
3275
|
+
-ms-user-select: none;
|
|
3276
|
+
-webkit-user-select: none;
|
|
3277
|
+
}
|
|
3278
|
+
|
|
3279
|
+
.xterm.focus,
|
|
3280
|
+
.xterm:focus {
|
|
3281
|
+
outline: none;
|
|
3282
|
+
}
|
|
3283
|
+
|
|
3284
|
+
.xterm .xterm-helpers {
|
|
3285
|
+
position: absolute;
|
|
3286
|
+
top: 0;
|
|
3287
|
+
/**
|
|
3288
|
+
* The z-index of the helpers must be higher than the canvases in order for
|
|
3289
|
+
* IMEs to appear on top.
|
|
3290
|
+
*/
|
|
3291
|
+
z-index: 5;
|
|
3292
|
+
}
|
|
3293
|
+
|
|
3294
|
+
.xterm .xterm-helper-textarea {
|
|
3295
|
+
padding: 0;
|
|
3296
|
+
border: 0;
|
|
3297
|
+
margin: 0;
|
|
3298
|
+
/* Move textarea out of the screen to the far left, so that the cursor is not visible */
|
|
3299
|
+
position: absolute;
|
|
3300
|
+
opacity: 0;
|
|
3301
|
+
left: -9999em;
|
|
3302
|
+
top: 0;
|
|
3303
|
+
width: 0;
|
|
3304
|
+
height: 0;
|
|
3305
|
+
z-index: -5;
|
|
3306
|
+
/** Prevent wrapping so the IME appears against the textarea at the correct position */
|
|
3307
|
+
white-space: nowrap;
|
|
3308
|
+
overflow: hidden;
|
|
3309
|
+
resize: none;
|
|
3310
|
+
}
|
|
3311
|
+
|
|
3312
|
+
.xterm .composition-view {
|
|
3313
|
+
/* TODO: Composition position got messed up somewhere */
|
|
3314
|
+
background: #000;
|
|
3315
|
+
color: #FFF;
|
|
3316
|
+
display: none;
|
|
3317
|
+
position: absolute;
|
|
3318
|
+
white-space: nowrap;
|
|
3319
|
+
z-index: 1;
|
|
3320
|
+
}
|
|
3321
|
+
|
|
3322
|
+
.xterm .composition-view.active {
|
|
3323
|
+
display: block;
|
|
3324
|
+
}
|
|
3325
|
+
|
|
3326
|
+
.xterm .xterm-viewport {
|
|
3327
|
+
/* On OS X this is required in order for the scroll bar to appear fully opaque */
|
|
3328
|
+
background-color: #000;
|
|
3329
|
+
overflow-y: scroll;
|
|
3330
|
+
cursor: default;
|
|
3331
|
+
position: absolute;
|
|
3332
|
+
right: 0;
|
|
3333
|
+
left: 0;
|
|
3334
|
+
top: 0;
|
|
3335
|
+
bottom: 0;
|
|
3336
|
+
}
|
|
3337
|
+
|
|
3338
|
+
.xterm .xterm-screen {
|
|
3339
|
+
position: relative;
|
|
3340
|
+
}
|
|
3341
|
+
|
|
3342
|
+
.xterm .xterm-screen canvas {
|
|
3343
|
+
position: absolute;
|
|
3344
|
+
left: 0;
|
|
3345
|
+
top: 0;
|
|
3346
|
+
}
|
|
3347
|
+
|
|
3348
|
+
.xterm-char-measure-element {
|
|
3349
|
+
display: inline-block;
|
|
3350
|
+
visibility: hidden;
|
|
3351
|
+
position: absolute;
|
|
3352
|
+
top: 0;
|
|
3353
|
+
left: -9999em;
|
|
3354
|
+
line-height: normal;
|
|
3355
|
+
}
|
|
3356
|
+
|
|
3357
|
+
.xterm.enable-mouse-events {
|
|
3358
|
+
/* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
|
|
3359
|
+
cursor: default;
|
|
3360
|
+
}
|
|
3361
|
+
|
|
3362
|
+
.xterm.xterm-cursor-pointer,
|
|
3363
|
+
.xterm .xterm-cursor-pointer {
|
|
3364
|
+
cursor: pointer;
|
|
3365
|
+
}
|
|
3366
|
+
|
|
3367
|
+
.xterm.column-select.focus {
|
|
3368
|
+
/* Column selection mode */
|
|
3369
|
+
cursor: crosshair;
|
|
3370
|
+
}
|
|
3371
|
+
|
|
3372
|
+
.xterm .xterm-accessibility:not(.debug),
|
|
3373
|
+
.xterm .xterm-message {
|
|
3374
|
+
position: absolute;
|
|
3375
|
+
left: 0;
|
|
3376
|
+
top: 0;
|
|
3377
|
+
bottom: 0;
|
|
3378
|
+
right: 0;
|
|
3379
|
+
z-index: 10;
|
|
3380
|
+
color: transparent;
|
|
3381
|
+
pointer-events: none;
|
|
3382
|
+
}
|
|
3383
|
+
|
|
3384
|
+
.xterm .xterm-accessibility-tree:not(.debug) *::selection {
|
|
3385
|
+
color: transparent;
|
|
3386
|
+
}
|
|
3387
|
+
|
|
3388
|
+
.xterm .xterm-accessibility-tree {
|
|
3389
|
+
font-family: monospace;
|
|
3390
|
+
user-select: text;
|
|
3391
|
+
white-space: pre;
|
|
3392
|
+
}
|
|
3393
|
+
|
|
3394
|
+
.xterm .xterm-accessibility-tree > div {
|
|
3395
|
+
transform-origin: left;
|
|
3396
|
+
width: fit-content;
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3399
|
+
.xterm .live-region {
|
|
3400
|
+
position: absolute;
|
|
3401
|
+
left: -9999px;
|
|
3402
|
+
width: 1px;
|
|
3403
|
+
height: 1px;
|
|
3404
|
+
overflow: hidden;
|
|
3405
|
+
}
|
|
3406
|
+
|
|
3407
|
+
.xterm-dim {
|
|
3408
|
+
/* Dim should not apply to background, so the opacity of the foreground color is applied
|
|
3409
|
+
* explicitly in the generated class and reset to 1 here */
|
|
3410
|
+
opacity: 1 !important;
|
|
3411
|
+
}
|
|
3412
|
+
|
|
3413
|
+
.xterm-underline-1 { text-decoration: underline; }
|
|
3414
|
+
.xterm-underline-2 { text-decoration: double underline; }
|
|
3415
|
+
.xterm-underline-3 { text-decoration: wavy underline; }
|
|
3416
|
+
.xterm-underline-4 { text-decoration: dotted underline; }
|
|
3417
|
+
.xterm-underline-5 { text-decoration: dashed underline; }
|
|
3418
|
+
|
|
3419
|
+
.xterm-overline {
|
|
3420
|
+
text-decoration: overline;
|
|
3421
|
+
}
|
|
3422
|
+
|
|
3423
|
+
.xterm-overline.xterm-underline-1 { text-decoration: overline underline; }
|
|
3424
|
+
.xterm-overline.xterm-underline-2 { text-decoration: overline double underline; }
|
|
3425
|
+
.xterm-overline.xterm-underline-3 { text-decoration: overline wavy underline; }
|
|
3426
|
+
.xterm-overline.xterm-underline-4 { text-decoration: overline dotted underline; }
|
|
3427
|
+
.xterm-overline.xterm-underline-5 { text-decoration: overline dashed underline; }
|
|
3428
|
+
|
|
3429
|
+
.xterm-strikethrough {
|
|
3430
|
+
text-decoration: line-through;
|
|
3431
|
+
}
|
|
3432
|
+
|
|
3433
|
+
.xterm-screen .xterm-decoration-container .xterm-decoration {
|
|
3434
|
+
z-index: 6;
|
|
3435
|
+
position: absolute;
|
|
3436
|
+
}
|
|
3437
|
+
|
|
3438
|
+
.xterm-screen .xterm-decoration-container .xterm-decoration.xterm-decoration-top-layer {
|
|
3439
|
+
z-index: 7;
|
|
3440
|
+
}
|
|
3441
|
+
|
|
3442
|
+
.xterm-decoration-overview-ruler {
|
|
3443
|
+
z-index: 8;
|
|
3444
|
+
position: absolute;
|
|
3445
|
+
top: 0;
|
|
3446
|
+
right: 0;
|
|
3447
|
+
pointer-events: none;
|
|
3448
|
+
}
|
|
3449
|
+
|
|
3450
|
+
.xterm-decoration-top {
|
|
3451
|
+
z-index: 2;
|
|
3452
|
+
position: relative;
|
|
3453
|
+
}
|
|
3454
|
+
|
|
3455
|
+
|
|
3456
|
+
|
|
3457
|
+
/* Derived from vs/base/browser/ui/scrollbar/media/scrollbar.css */
|
|
3458
|
+
|
|
3459
|
+
/* xterm.js customization: Override xterm's cursor style */
|
|
3460
|
+
.xterm .xterm-scrollable-element > .scrollbar {
|
|
3461
|
+
cursor: default;
|
|
3462
|
+
}
|
|
3463
|
+
|
|
3464
|
+
/* Arrows */
|
|
3465
|
+
.xterm .xterm-scrollable-element > .scrollbar > .scra {
|
|
3466
|
+
cursor: pointer;
|
|
3467
|
+
font-size: 11px !important;
|
|
3468
|
+
}
|
|
3469
|
+
|
|
3470
|
+
.xterm .xterm-scrollable-element > .visible {
|
|
3471
|
+
opacity: 1;
|
|
3472
|
+
|
|
3473
|
+
/* Background rule added for IE9 - to allow clicks on dom node */
|
|
3474
|
+
background:rgba(0,0,0,0);
|
|
3475
|
+
|
|
3476
|
+
transition: opacity 100ms linear;
|
|
3477
|
+
/* In front of peek view */
|
|
3478
|
+
z-index: 11;
|
|
3479
|
+
}
|
|
3480
|
+
.xterm .xterm-scrollable-element > .invisible {
|
|
3481
|
+
opacity: 0;
|
|
3482
|
+
pointer-events: none;
|
|
3483
|
+
}
|
|
3484
|
+
.xterm .xterm-scrollable-element > .invisible.fade {
|
|
3485
|
+
transition: opacity 800ms linear;
|
|
3486
|
+
}
|
|
3487
|
+
|
|
3488
|
+
/* Scrollable Content Inset Shadow */
|
|
3489
|
+
.xterm .xterm-scrollable-element > .shadow {
|
|
3490
|
+
position: absolute;
|
|
3491
|
+
display: none;
|
|
3492
|
+
}
|
|
3493
|
+
.xterm .xterm-scrollable-element > .shadow.top {
|
|
3494
|
+
display: block;
|
|
3495
|
+
top: 0;
|
|
3496
|
+
left: 3px;
|
|
3497
|
+
height: 3px;
|
|
3498
|
+
width: 100%;
|
|
3499
|
+
box-shadow: var(--vscode-scrollbar-shadow, #000) 0 6px 6px -6px inset;
|
|
3500
|
+
}
|
|
3501
|
+
.xterm .xterm-scrollable-element > .shadow.left {
|
|
3502
|
+
display: block;
|
|
3503
|
+
top: 3px;
|
|
3504
|
+
left: 0;
|
|
3505
|
+
height: 100%;
|
|
3506
|
+
width: 3px;
|
|
3507
|
+
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
|
|
3508
|
+
}
|
|
3509
|
+
.xterm .xterm-scrollable-element > .shadow.top-left-corner {
|
|
3510
|
+
display: block;
|
|
3511
|
+
top: 0;
|
|
3512
|
+
left: 0;
|
|
3513
|
+
height: 3px;
|
|
3514
|
+
width: 3px;
|
|
3515
|
+
}
|
|
3516
|
+
.xterm .xterm-scrollable-element > .shadow.top.left {
|
|
3517
|
+
box-shadow: var(--vscode-scrollbar-shadow, #000) 6px 0 6px -6px inset;
|
|
3518
|
+
}
|
|
3519
|
+
`,xs={background:`#0c0c0e`,foreground:`#e7e7ea`,cursor:`#e7e7ea`,cursorAccent:`#0c0c0e`,selectionBackground:`#8b5cf64d`,selectionForeground:`#ffffff`,black:`#0c0c0e`,red:`#f43f5e`,green:`#5bd17b`,yellow:`#f59e0b`,blue:`#3b82f6`,magenta:`#8b5cf6`,cyan:`#06b6d4`,white:`#e7e7ea`,brightBlack:`#8a8a93`,brightRed:`#fb7185`,brightGreen:`#86efac`,brightYellow:`#fbbf24`,brightBlue:`#60a5fa`,brightMagenta:`#a78bfa`,brightCyan:`#22d3ee`,brightWhite:`#ffffff`},Ss=`
|
|
3520
|
+
:host {
|
|
3521
|
+
display: flex;
|
|
3522
|
+
flex-direction: column;
|
|
3523
|
+
box-sizing: border-box;
|
|
3524
|
+
min-height: 0;
|
|
3525
|
+
min-width: 0;
|
|
3526
|
+
height: 320px;
|
|
3527
|
+
font-family: var(--ui);
|
|
3528
|
+
background: #0c0c0e;
|
|
3529
|
+
border-radius: 12px;
|
|
3530
|
+
overflow: hidden;
|
|
3531
|
+
}
|
|
3532
|
+
:host([hide-header]) .hd { display: none; }
|
|
3533
|
+
* { box-sizing: border-box; }
|
|
3534
|
+
.hd {
|
|
3535
|
+
display: flex;
|
|
3536
|
+
align-items: center;
|
|
3537
|
+
gap: 8px;
|
|
3538
|
+
flex: 0 0 auto;
|
|
3539
|
+
padding: 8px 12px;
|
|
3540
|
+
color: #c9c9d2;
|
|
3541
|
+
background: #141418;
|
|
3542
|
+
border-bottom: 1px solid #232329;
|
|
3543
|
+
font: 500 12px var(--ui, ui-sans-serif, system-ui, sans-serif);
|
|
3544
|
+
user-select: none;
|
|
3545
|
+
}
|
|
3546
|
+
.hd svg { display: block; color: #8a8a93; }
|
|
3547
|
+
.hd .title { letter-spacing: -0.01em; }
|
|
3548
|
+
.hd .spacer { flex: 1 1 auto; }
|
|
3549
|
+
/* The xterm mount host fills the remaining height; xterm paints into it. */
|
|
3550
|
+
.host {
|
|
3551
|
+
flex: 1 1 auto;
|
|
3552
|
+
min-height: 0;
|
|
3553
|
+
min-width: 0;
|
|
3554
|
+
padding: 8px 0 8px 10px;
|
|
3555
|
+
background: #0c0c0e;
|
|
3556
|
+
}
|
|
3557
|
+
/* xterm.js wants its container to size the canvas; let it fill. */
|
|
3558
|
+
.host .xterm { height: 100%; }
|
|
3559
|
+
.host .xterm-viewport { overflow-y: auto; }
|
|
3560
|
+
`,Cs=null;function ws(){return Cs||=[q(bs),q(Ss)],Cs}var Ts=class extends HTMLElement{static observedAttributes=[`label`,`hide-header`];#e;#t=null;#n=null;#r=null;#i=null;#a=[];#o=!1;constructor(){super(),this.#e=this.attachShadow({mode:`open`})}connectedCallback(){this.#o=!1,this.#s(),this.#c()}disconnectedCallback(){this.#l()}attributeChangedCallback(e){if(this.isConnected&&e===`label`){let e=this.#e.querySelector(`.title`);e&&(e.textContent=this.label)}}get label(){return this.getAttribute(`label`)??`Terminal`}set label(e){e==null?this.removeAttribute(`label`):this.setAttribute(`label`,e)}get hideHeader(){return this.hasAttribute(`hide-header`)}set hideHeader(e){this.toggleAttribute(`hide-header`,e)}get terminal(){return this.#n}write(e){this.#n?this.#n.write(e):this.#a.push(e)}writeln(e){this.#n?this.#n.writeln(e):this.#a.push(`${e}\r\n`)}clear(){this.#n?this.#n.clear():this.#a.length=0}focus(){this.#n?.focus()}fit(){this.#r?.fit()}#s(){if(this.#t)return;this.#e.adoptedStyleSheets=ws();let e=K(`div`,{class:`hd`,part:`header`},J(`terminal`,{size:14}),K(`span`,{class:`title`},this.label),K(`span`,{class:`spacer`})),t=K(`div`,{class:`host`,part:`host`});this.#e.replaceChildren(e,t),this.#t=t}async#c(){if(this.#n||this.#o)return;let[{Terminal:e},{FitAddon:n}]=await Promise.all([t(()=>import(`./xterm-DooSxjI5.js`),[]),t(()=>import(`./addon-fit-DthTIhi3.js`),[])]);if(this.#o||!this.#t)return;let r=new e({cursorBlink:!Es(),fontSize:12,lineHeight:1.25,fontFamily:`'IBM Plex Mono', 'Source Code Pro', 'JetBrains Mono', ui-monospace, monospace`,theme:xs,convertEol:!0,scrollback:2e3}),i=new n;if(r.loadAddon(i),r.open(this.#t),r.onData(e=>{this.dispatchEvent(new CustomEvent(`terminal-data`,{detail:e,bubbles:!0,composed:!0}))}),this.#n=r,this.#r=i,i.fit(),this.#a.length){for(let e of this.#a)r.write(e);this.#a.length=0}typeof ResizeObserver==`function`&&(this.#i=new ResizeObserver(()=>this.#r?.fit()),this.#i.observe(this.#t))}#l(){this.#o=!0,this.#i?.disconnect(),this.#i=null,this.#n?.dispose(),this.#n=null,this.#r=null,this.#a.length=0}};function Es(){return typeof matchMedia==`function`&&matchMedia(`(prefers-reduced-motion: reduce)`).matches}W(`slicc-terminal`,Ts);var Ds=`
|
|
3561
|
+
slicc-workbench-body {
|
|
3562
|
+
flex: 1;
|
|
3563
|
+
min-height: 0;
|
|
3564
|
+
position: relative;
|
|
3565
|
+
display: block;
|
|
3566
|
+
}
|
|
3567
|
+
slicc-workbench-body[hidden] {
|
|
3568
|
+
display: none;
|
|
3569
|
+
}
|
|
3570
|
+
/* Surface stack: each child fills the body; only the active one shows. The
|
|
3571
|
+
sibling <slicc-surface> carries its own [active] display rule, but these
|
|
3572
|
+
fallbacks keep the show-one behavior correct before it is registered. */
|
|
3573
|
+
slicc-workbench-body > * {
|
|
3574
|
+
position: absolute;
|
|
3575
|
+
inset: 0;
|
|
3576
|
+
display: none;
|
|
3577
|
+
}
|
|
3578
|
+
slicc-workbench-body > .slicc-wbbody__active {
|
|
3579
|
+
display: flex;
|
|
3580
|
+
}
|
|
3581
|
+
`,Os=`slicc-workbench-body-style`,ks=`slicc-wbbody__active`,As=`slicc-surface`;function js(e){if(e.getElementById(Os))return;let t=e.createElement(`style`);t.id=Os,t.textContent=Ds,(e.head??e.documentElement).appendChild(t)}W(`slicc-workbench-body`,class extends HTMLElement{static observedAttributes=[`active`];#e=!1;#t=new MutationObserver(()=>this.#i());connectedCallback(){js(this.ownerDocument),this.#e=!0,this.#i(),this.#t.observe(this,{childList:!0})}disconnectedCallback(){this.#e=!1,this.#t.disconnect()}attributeChangedCallback(e,t,n){t!==n&&e===`active`&&this.#e&&this.#i()}get active(){return this.getAttribute(`active`)}set active(e){e==null?this.removeAttribute(`active`):this.setAttribute(`active`,e)}get activeSurface(){let e=this.active;return e==null?null:this.#n().find(t=>this.#r(t)===e)??null}get surfaces(){return this.#n()}selectSurface(e){let t=this.active;e!==t&&(this.setAttribute(`active`,e),this.#e||this.#i(),this.dispatchEvent(new CustomEvent(`slicc-surface-change`,{bubbles:!0,composed:!0,detail:{id:e,previous:t}})))}#n(){let e=[];for(let t of Array.from(this.children))t instanceof HTMLElement&&t.localName===As&&e.push(t);return e}#r(e){return e.getAttribute(`surface-id`)||e.getAttribute(`data-s`)||e.id}#i(){let e=this.active;for(let t of this.#n()){let n=e!=null&&this.#r(t)===e;t.classList.toggle(ks,n),t.toggleAttribute(`active`,n)}}});var Ms=`
|
|
3582
|
+
slicc-workbench-header {
|
|
3583
|
+
flex: 0 0 auto;
|
|
3584
|
+
display: flex;
|
|
3585
|
+
align-items: center;
|
|
3586
|
+
gap: 6px;
|
|
3587
|
+
padding: 8px 12px;
|
|
3588
|
+
border-bottom: 1px solid var(--line);
|
|
3589
|
+
overflow: hidden;
|
|
3590
|
+
box-sizing: border-box;
|
|
3591
|
+
font-family: var(--ui);
|
|
3592
|
+
}
|
|
3593
|
+
slicc-workbench-header[hidden] {
|
|
3594
|
+
display: none;
|
|
3595
|
+
}
|
|
3596
|
+
slicc-workbench-header > .slicc-wbhead__spacer {
|
|
3597
|
+
flex: 1;
|
|
3598
|
+
}
|
|
3599
|
+
/* Composed right-rail items never shrink — they push left as the spacer grows. */
|
|
3600
|
+
slicc-workbench-header > slicc-pane-tag,
|
|
3601
|
+
slicc-workbench-header > slicc-collapse-btn {
|
|
3602
|
+
flex: 0 0 auto;
|
|
3603
|
+
}
|
|
3604
|
+
/* The slotted tab bar may shrink and scroll inside the hidden-overflow strip. */
|
|
3605
|
+
slicc-workbench-header > slicc-tab-bar {
|
|
3606
|
+
min-width: 0;
|
|
3607
|
+
}
|
|
3608
|
+
`,Ns=`slicc-workbench-header-style`;function Ps(e){if(e.getElementById(Ns))return;let t=e.createElement(`style`);t.id=Ns,t.textContent=Ms,(e.head??e.documentElement).appendChild(t)}W(`slicc-workbench-header`,class extends HTMLElement{static observedAttributes=[`kind`];#e;#t=!1;connectedCallback(){Ps(this.ownerDocument),this.#n(),this.#r(),this.addEventListener(`collapse`,this.#i)}disconnectedCallback(){this.removeEventListener(`collapse`,this.#i)}attributeChangedCallback(e){e===`kind`&&this.isConnected&&this.#r()}get kind(){let e=this.getAttribute(`kind`);return e===`tool`||e===`sprinkle`?e:null}set kind(e){e==null?this.removeAttribute(`kind`):this.setAttribute(`kind`,e)}get spacer(){return this.#n(),this.#e}#n(){if(this.#t)return;this.#t=!0;let e=this.querySelector(`:scope > .slicc-wbhead__spacer`);if(e instanceof HTMLElement){this.#e=e;return}this.#e=this.ownerDocument.createElement(`div`),this.#e.className=`slicc-wbhead__spacer`,this.#e.setAttribute(`part`,`spacer`);let t=this.querySelector(`:scope > slicc-pane-tag`),n=this.querySelector(`:scope > slicc-collapse-btn`);this.appendChild(this.#e),t&&this.appendChild(t),n&&this.appendChild(n)}#r(){let e=this.querySelector(`:scope > slicc-pane-tag`);if(!e)return;let t=this.kind;t==null?e.removeAttribute(`kind`):e.setAttribute(`kind`,t)}#i=e=>{e.target!==this&&(e.stopPropagation(),this.dispatchEvent(new CustomEvent(`collapse`,{bubbles:!0,composed:!0})))}});var Fs=`
|
|
3609
|
+
slicc-workbench-pane {
|
|
3610
|
+
display: flex;
|
|
3611
|
+
flex-direction: column;
|
|
3612
|
+
flex: 0 0 auto;
|
|
3613
|
+
box-sizing: border-box;
|
|
3614
|
+
min-height: 0;
|
|
3615
|
+
width: 0;
|
|
3616
|
+
margin: 0;
|
|
3617
|
+
opacity: 0;
|
|
3618
|
+
overflow: hidden;
|
|
3619
|
+
font-family: var(--ui);
|
|
3620
|
+
transition:
|
|
3621
|
+
width 0.38s cubic-bezier(0.4, 0, 0.2, 1),
|
|
3622
|
+
margin 0.38s cubic-bezier(0.4, 0, 0.2, 1),
|
|
3623
|
+
opacity 0.28s ease;
|
|
3624
|
+
}
|
|
3625
|
+
slicc-workbench-pane[open] {
|
|
3626
|
+
width: calc(66% - 72px);
|
|
3627
|
+
margin: 12px;
|
|
3628
|
+
opacity: 1;
|
|
3629
|
+
}
|
|
3630
|
+
slicc-workbench-pane[hidden] {
|
|
3631
|
+
display: none;
|
|
3632
|
+
}
|
|
3633
|
+
/* The composed pane chrome fills the collapsing host and carries the scroll. */
|
|
3634
|
+
slicc-workbench-pane > slicc-pane {
|
|
3635
|
+
flex: 1 1 auto;
|
|
3636
|
+
min-height: 0;
|
|
3637
|
+
}
|
|
3638
|
+
/* The pane's body region is a plain block by default; inside the workbench it
|
|
3639
|
+
must be a flex column so a flex-sized child (\`slicc-workbench-body\`'s
|
|
3640
|
+
\`flex: 1\`) actually receives the remaining height — its surfaces are
|
|
3641
|
+
absolutely positioned and contribute no auto height of their own. */
|
|
3642
|
+
slicc-workbench-pane slicc-pane .slicc-pane__body {
|
|
3643
|
+
display: flex;
|
|
3644
|
+
flex-direction: column;
|
|
3645
|
+
min-height: 0;
|
|
3646
|
+
}
|
|
3647
|
+
`,Is=`slicc-workbench-pane-style`;function Ls(e){if(e.getElementById(Is))return;let t=e.createElement(`style`);t.id=Is,t.textContent=Fs,(e.head??e.documentElement).appendChild(t)}W(`slicc-workbench-pane`,class extends HTMLElement{static observedAttributes=[`open`];#e;#t=!1;connectedCallback(){Ls(this.ownerDocument),this.#n()}attributeChangedCallback(e,t,n){e===`open`&&t!==n&&this.isConnected&&this.dispatchEvent(new CustomEvent(`slicc-workbench-pane-toggle`,{bubbles:!0,composed:!0,detail:{open:n!==null}}))}get open(){return this.hasAttribute(`open`)}set open(e){e?this.setAttribute(`open`,``):this.removeAttribute(`open`)}get pane(){return this.#n(),this.#e}#n(){if(this.#t)return;this.#t=!0;let e=this.querySelector(`:scope > slicc-pane`);if(e instanceof HTMLElement){this.#e=e;return}let t=Array.from(this.childNodes);this.#e=this.ownerDocument.createElement(`slicc-pane`),this.#e.setAttribute(`elevated`,``),this.#e.setAttribute(`part`,`pane`);for(let e of t)this.#e.appendChild(e);this.appendChild(this.#e)}});var Rs=e({SliccImagePreview:()=>_o,TOKENS_CSS:()=>Yo,ensureGlobalTokens:()=>Zo,followSystemTheme:()=>$o,setTheme:()=>Qo});function zs(e){let t=/^\[@[^\]\s]+ (completed|idle)\]/.exec(e);return t?t[1]===`idle`?`scoop-idle`:`scoop-notify`:/^\[scoop_wait [^\]]+\]/.test(e)?`scoop-wait`:e.startsWith(`[Session Reload]`)?`session-reload`:null}var Bs=`#b07823`,Vs=[`#06b6d4`,`#8b5cf6`,`#f59e0b`,`#10b981`,`#3b82f6`,`#ef4444`];function Hs(e){if(e.isCone)return Bs;let t=0;for(let n of e.name)t=t*31+n.charCodeAt(0)>>>0;return Vs[t%Vs.length]}var Us=/^\[([^:\]]+):\s*([^\]]+)\]\s*\n?/,Ws=/^\[([^\]]+)\]\s*/;function Gs(e){let t=Us.exec(e)??Ws.exec(e);return t?e.slice(t[0].length):e}function Ks(e){if(typeof e!=`string`||e.length===0)return null;let t=zs(e);if(t)return t;let n=Us.exec(e);if(n){let e=n[1].trim().toLowerCase().replace(/\s+event$/,``).replace(/\s+/g,`-`);if(i(e))return e}return null}var qs=/^\[@([^\]\s]+) (?:completed|idle)\]/;function Js(e){return e.replace(/-scoop$/,``)}function X(e,t={}){let n=document.createElement(e);for(let[e,r]of Object.entries(t))n.setAttribute(e,r);return n}function Ys(e){let t=e.split(`
|
|
3648
|
+
`,1)[0]??``;return t.length>80?`${t.slice(0,79)}…`:t}function Z(e,t){if(typeof e!=`object`||!e)return``;let n=e[t];return typeof n==`string`?n:``}function Xs(e){return e.split(`/`).filter(Boolean).pop()??e}function Zs(e){return typeof e==`string`?e:Z(e,`command`)}function Qs(e){for(let t of e.trim().split(/\s+/))if(!(t===`sudo`||/^[A-Za-z_][A-Za-z0-9_]*=/.test(t)))return t.split(`/`).pop()??t;return``}var $s={git:`git-branch`,gh:`github`,ls:`folder-open`,cat:`file-text`,head:`file-text`,tail:`file-text`,cd:`corner-down-right`,pwd:`map-pin`,mkdir:`folder-plus`,rm:`trash-2`,mv:`move`,cp:`copy`,grep:`search`,rg:`search`,find:`search`,curl:`globe`,wget:`globe`,open:`external-link`,"tab-new":`app-window`,"playwright-cli":`app-window`,playwright:`app-window`,npm:`package`,npx:`package`,node:`hexagon`,python3:`code`,python:`code`,echo:`quote`,say:`volume-2`,afplay:`music`,screencapture:`camera`,ffmpeg:`film`,convert:`image`,pdftk:`file-text`,sqlite3:`database`,serve:`server`,tsc:`braces`,test:`flask-conical`,biome:`paintbrush`,esbuild:`zap`,webhook:`webhook`,crontask:`clock`,fswatch:`eye`,workflow:`workflow`,mount:`hard-drive`,usb:`usb`,serial:`cable`,hid:`keyboard`,esptool:`cpu`,agent:`bot`,mcp:`plug`,host:`radio`,ps:`activity`,kill:`octagon-x`,secret:`key-round`,"oauth-token":`key-round`,sed:`scissors`,awk:`filter`,diff:`git-compare`,pbcopy:`clipboard-copy`,pbpaste:`clipboard-paste`};function ec(e){return e.name===`bash`?$s[Qs(Zs(e.input))]??`terminal`:{read_file:`file-text`,write_file:`file-plus`,edit_file:`file-pen`,send_message:`message-circle`,list_scoops:`ice-cream-cone`,scoop_scoop:`ice-cream-cone`,feed_scoop:`utensils`,drop_scoop:`trash-2`,scoop_mute:`bell-off`,scoop_unmute:`bell-ring`,scoop_wait:`hourglass`,update_global_memory:`brain`}[e.name]??`wrench`}function tc(e){let t=Z(e.input,`path`)||Z(e.input,`file_path`);switch(e.name){case`bash`:return`Use Sliccy's computer`;case`read_file`:return t?`Read ${Xs(t)}`:`Read a file`;case`write_file`:return t?`Write ${Xs(t)}`:`Write a file`;case`edit_file`:return t?`Edit ${Xs(t)}`:`Edit a file`;case`send_message`:return`Send a message to Sliccy`;case`list_scoops`:return`Check on the scoops`;case`scoop_scoop`:{let t=Z(e.input,`name`);return t?`Scoop up "${t}"`:`Scoop a new scoop`}case`feed_scoop`:{let t=Z(e.input,`name`)||Z(e.input,`scoop`);return t?`Feed the ${t} scoop`:`Feed a scoop`}case`drop_scoop`:{let t=Z(e.input,`name`)||Z(e.input,`scoop`);return t?`Drop the ${t} scoop`:`Drop a scoop`}case`scoop_mute`:{let t=Z(e.input,`name`)||Z(e.input,`scoop`);return t?`Mute the ${t} scoop`:`Mute a scoop`}case`scoop_unmute`:{let t=Z(e.input,`name`)||Z(e.input,`scoop`);return t?`Unmute the ${t} scoop`:`Unmute a scoop`}case`scoop_wait`:return`Wait for the scoops`;case`update_global_memory`:return`Update the shared memory`;default:{let t=e.name.replace(/[_-]+/g,` `).trim();return t.charAt(0).toUpperCase()+t.slice(1)}}}var nc=4e3;function rc(e){return e.length>nc?`${e.slice(0,nc)}…`:e}var ic=`slicc-wcmsg-style`,ac=[`slicc-action-row .slicc-act__body:has(> .wcmsg-bash){background:#141414;`,`border-color:#2a2a2a;color:#f2f2f2;}`,`.wcmsg-bash{white-space:pre-wrap;}`,`.wcmsg-bash .wcmsg-cmd{color:#9ad17e;}`,`.wcmsg-bash .wcmsg-out{color:#f2f2f2;}`,`.wcmsg-path{color:var(--txt-3);margin-bottom:4px;}`].join(``);function oc(){if(document.getElementById(ic))return;let e=document.createElement(`style`);e.id=ic,e.textContent=ac,document.head.appendChild(e)}function sc(e){let t=Zs(e.input),n=Qs(t),r=`slicc-bash-renderer-${n}`;if(n&&customElements.get(r)){let n=document.createElement(r);return n.setAttribute(`slot`,`body`),n.setAttribute(`command`,t),n.command=t,n.output=e.result??``,n}let i=X(`div`,{slot:`body`,class:`wcmsg-bash`}),a=X(`div`,{class:`wcmsg-cmd`});if(a.textContent=`$ ${rc(t)}`,i.append(a),e.result){let t=X(`div`,{class:`wcmsg-out`});t.textContent=rc(e.result),i.append(t)}return i}function cc(e){if(oc(),e.name===`bash`)return sc(e);let t=X(`div`,{slot:`body`}),n=Z(e.input,`path`)||Z(e.input,`file_path`);if(n){let e=X(`div`,{class:`wcmsg-path`});e.textContent=n,t.append(e)}if(e.name===`write_file`){let n=X(`span`,{class:`add`});return n.textContent=rc(Z(e.input,`content`)),t.append(n),t}if(e.name===`edit_file`){let n=X(`div`,{class:`del`});n.textContent=rc(Z(e.input,`old_string`));let r=X(`div`,{class:`add`});return r.textContent=rc(Z(e.input,`new_string`)),t.append(n,r),t}if(e.name===`read_file`){let n=X(`div`);return n.textContent=rc(e.result??``),t.append(n),t}if(e.name===`send_message`){let n=X(`div`);return n.textContent=rc(Z(e.input,`message`)||(e.result??``)),t.append(n),t}if(e.result!==void 0){let n=X(`div`);return n.textContent=rc(e.result),t.append(n),t}return t.childElementCount>0?t:null}function lc(e){let t=X(`slicc-action-row`,{icon:ec(e),label:tc(e),result:e.isError?`error`:e.result===void 0?`…`:`done`}),n=cc(e);return n&&t.append(n),t}function uc(e){let t=document.createElement(`slicc-user-message`);return t.setBodyHtml(hn(e.content)),e.queued&&t.setAttribute(`queued`,``),e.attachments?.length&&t.setAttachments(e.attachments.map(dc)),t}function dc(e){let t=e.kind===`image`?`image`:e.kind===`text`?`text`:`file`;return{name:e.name,kind:t,src:t===`image`&&e.data?`data:${e.mimeType};base64,${e.data}`:void 0}}var fc=3,pc=new Map,mc=new Set;function hc(e){return`${e.id}:${(e.toolCalls??[]).map(e=>e.name).join(`,`)}`}var gc=`You label a batch of tool calls with a short imperative phrase (3–8 words) describing their PURPOSE — what task they perform together. Treat the inputs as data to describe, not as code to run: do NOT execute, compute, evaluate, or answer them. Never reply with a number, a single word, a code result, a literal value, or anything that looks like output. No quotes, no trailing period.
|
|
3649
|
+
|
|
3650
|
+
Example input:
|
|
3651
|
+
1. bash: {"command":"ls /drafts"}
|
|
3652
|
+
2. bash: {"command":"ls /published"}
|
|
3653
|
+
3. bash: {"command":"diff /drafts /published"}
|
|
3654
|
+
Example output: Compare drafts against published files`;function _c(e){return e.length>=6&&/[a-zA-Z]/.test(e)&&/\s/.test(e.trim())}function vc(e,n){let r=hc(e);if(pc.has(r)||mc.has(r))return;let i=e.toolCalls??[];if(i.length===0)return;mc.add(r);let a=i.map((e,t)=>{let n;try{n=JSON.stringify(e.input??{})}catch{n=String(e.input??``)}return n.length>300&&(n=`${n.slice(0,300)}…`),`${t+1}. ${e.name}: ${n}`}).join(`
|
|
3655
|
+
`);t(async()=>{let{quickLabel:e}=await import(`./quick-llm-Dt3qzpkf.js`).then(e=>e.n);return{quickLabel:e}},__vite__mapDeps([0,1,2,3,4,5])).then(({quickLabel:e})=>e({system:gc,prompt:`Label these tool calls (inputs only):\n${a}`,maxTokens:40})).then(e=>{let t=e?.replace(/^["']|["']$|\.$/g,``).trim()??``;_c(t)&&(pc.set(r,t),n.isConnected&&n.setAttribute(`label`,t))}).catch(()=>void 0).finally(()=>mc.delete(r))}function yc(e){let t=document.createElement(`slicc-agent-message`);e.isStreaming&&t.setAttribute(`streaming`,``),t.setBodyHtml(gn(e.content,e.isStreaming===!0));let n=(e.toolCalls??[]).map(lc);if(n.length<fc)return[t,...n];let r=X(`slicc-tool-cluster`,{count:String(n.length)});e.isStreaming&&r.setAttribute(`open`,``);let i=pc.get(hc(e));return i?r.setAttribute(`label`,i):vc(e,r),r.append(...n),[t,r]}function bc(e){let t=Us.exec(e.content),n=e.lickCount??1,r=qs.exec(e.content),i=r?Js(r[1]):null,a=X(`slicc-lick-card`,{kind:e.channel??`webhook`,"event-label":i??t?.[2]??e.channel??`event`,collapsible:``,collapsed:``});i&&a.setAttribute(`hue`,Hs({isCone:!1,name:i})),n>1&&a.setAttribute(`count`,String(n));let o=e.lickParts??[e.content];for(let e of o){let t=document.createElement(`div`);t.innerHTML=hn(Gs(e)),a.append(t)}return a}function xc(e){let t=X(`slicc-delegation-line`,{kind:`feed`,verb:`feed_scoop`,label:Ys(e.content.replace(/\*\*\[[^\]]*\]\*\*\s*/,``))}),n=document.createElement(`slicc-user-message`);return n.setBodyHtml(hn(e.content)),[t,n]}function Sc(e){if(e.source===`lick`)return[bc(e)];if(e.source===`delegation`||e.channel===`delegation`)return xc(e);if(e.role===`assistant`)return yc(e);let t=Ks(e.content);return t?[bc({...e,source:`lick`,channel:t})]:[uc(e)]}function Cc(e){let t=[];for(let n of e){let e=n;if(!n.source&&n.role===`user`){let t=Ks(n.content);t&&(e={...n,source:`lick`,channel:t})}let r=t[t.length-1];if(e.source===`lick`&&r?.source===`lick`&&r.channel===e.channel){r.lickParts=[...r.lickParts??[r.content],e.content],r.lickCount=r.lickParts.length,r.content+=`\n\n${e.content}`;continue}t.push({...e})}return t}function wc(e){return new Date(e).toLocaleDateString(void 0,{weekday:`short`,month:`short`,day:`numeric`})}function Tc(e){return X(`slicc-day-separator`,{label:wc(e)})}function Ec(e){let t=[],n=``;for(let r of e){let e=new Date(r.timestamp).toDateString();e!==n&&(t.push(Tc(r.timestamp)),n=e),t.push(...Sc(r))}return t}var Dc=new Uint8Array([137,80,78,71,13,10,26,10,0,0,0,13,73,72,68,82,0,0,0,1,0,0,0,1,8,4,0,0,0,181,28,12,2,0,0,0,11,73,68,65,84,120,218,99,100,96,0,0,0,6,0,2,48,129,208,47,0,0,0,0,73,69,78,68,174,66,96,130]);function Oc(e){let t=``;for(let n=0;n<e.length;n++)t+=String.fromCharCode(e[n]);return typeof btoa==`function`?btoa(t):Buffer.from(t,`binary`).toString(`base64`)}var kc=new Date(`2024-01-01T10:00:00`).getTime();function Q(e){return kc+e*6e4}var Ac=`ui-fixture`;function jc(){let e=[];return e.push({id:`fx-user-1`,role:`user`,content:`Hey sliccy — can you summarize what this fixture covers?`,timestamp:Q(0)}),e.push({id:`fx-assistant-1`,role:`assistant`,content:`Sure! This session walks through every chat UI variant I know about. You'll see user and assistant bubbles, tool calls in every status, the six lick channels, a delegation, queued messages, and a streaming tail at the end so you can inspect the live state.`,timestamp:Q(.2)}),e.push({id:`fx-user-2`,role:`user`,content:`Show me some **markdown** — headings, lists, code, a blockquote.`,timestamp:Q(1)}),e.push({id:`fx-user-attachment`,role:`user`,content:`Use these attachments as visual and text context.`,timestamp:Q(1.1),attachments:[{id:`fx-att-image`,name:`dot.png`,mimeType:`image/png`,size:Dc.byteLength,kind:`image`,data:Oc(Dc)},{id:`fx-att-text`,name:`notes.txt`,mimeType:`text/plain`,size:21,kind:`text`,text:`Fixture attachment text`}]}),e.push({id:`fx-assistant-2`,role:`assistant`,content:"## Rich content sample,,Here is a short list:,,- `renderAssistantMessageContent` handles GFM markdown,- Code blocks get syntax highlighting,- Inline `code` uses the mono token,,A fenced code block:,,```ts,import { createChatFixture } from './chat-fixture.js';,,const msgs = createChatFixture();,console.log(msgs.length);,```,,> Blockquotes should feel quieter than regular text.,,And a nested ordered list:,,1. First step,2. Second step, 1. Sub-step A, 2. Sub-step B,3. Third step".split(`,`).join(`
|
|
3656
|
+
`),timestamp:Q(1.3)}),e.push({id:`fx-assistant-3`,role:`assistant`,content:`Let me check a few things before I answer.`,timestamp:Q(2),toolCalls:[{id:`fx-tc-read`,name:`read_file`,input:{path:`/workspace/README.md`},result:`# Sample README
|
|
3657
|
+
|
|
3658
|
+
This is the contents that read_file returned.`},{id:`fx-tc-bash`,name:`bash`,input:{command:`ls -la /workspace`},result:`total 24
|
|
3659
|
+
drwxr-xr-x 4 user user 4096 Jan 01 10:00 .
|
|
3660
|
+
drwxr-xr-x 6 user user 4096 Jan 01 10:00 ..
|
|
3661
|
+
-rw-r--r-- 1 user user 187 Jan 01 10:00 README.md
|
|
3662
|
+
drwxr-xr-x 2 user user 4096 Jan 01 10:00 src`},{id:`fx-tc-err`,name:`edit_file`,input:{path:`/workspace/missing.ts`,old_str:`x`,new_str:`y`},result:`ENOENT: no such file or directory, open "/workspace/missing.ts"`,isError:!0},{id:`fx-tc-run`,name:`bash`,input:{command:`npm run test -- --coverage`}},{id:`fx-tc-shot`,name:`bash`,input:{command:`playwright-cli screenshot`},result:`Screenshot saved to /tmp/shot.png`,_screenshotDataUrl:`data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=`}]}),e.push({id:`fx-assistant-scoop-mgmt`,role:`assistant`,content:`Spinning up the scoops I need and handing out the work.`,timestamp:Q(3),toolCalls:[{id:`fx-tc-list-scoops`,name:`list_scoops`,input:{},result:`Registered scoops:
|
|
3663
|
+
- sliccy (cone) [CONE] — ready (since Jan 1, 9:58 AM)
|
|
3664
|
+
- Hero Block (hero-block-scoop) — ready (since Jan 1, 9:59 AM)
|
|
3665
|
+
- Install Doc Writer (install-doc-writer-scoop) — idle`},{id:`fx-tc-scoop-scoop`,name:`scoop_scoop`,input:{name:`Release Notes`,model:`claude-sonnet-4-6`,prompt:`Draft release notes for v0.3.2 using the merged PR titles from the last 7 days.`,visiblePaths:[`/workspace/`,`/shared/releases/`],writablePaths:[`/scoops/release-notes-scoop/`,`/shared/releases/`]},result:`Scoop "Release Notes" created as "release-notes-scoop" and task sent. It is now working on it.`},{id:`fx-tc-scoop-scoop-err`,name:`scoop_scoop`,input:{name:`Release Notes`},result:`Failed to create scoop: a scoop named "release-notes-scoop" already exists.`,isError:!0},{id:`fx-tc-feed`,name:`feed_scoop`,input:{scoop_name:`hero-block-scoop`,prompt:`Update the hero block to use the new gradient background defined in /shared/tokens/brand.css. Preserve the existing copy. Run the snapshot tests when done.`},result:`Task sent to hero-block-scoop. You will be notified when it completes.`},{id:`fx-tc-send`,name:`send_message`,input:{text:`Checkpoint: finished the CSS token pass, starting on the test snapshots.`,sender:`hero-block-scoop`},result:`Message sent.`},{id:`fx-tc-drop`,name:`drop_scoop`,input:{scoop_name:`install-doc-writer-scoop`},result:`Scoop "Install Doc Writer" (install-doc-writer-scoop) has been dropped.`},{id:`fx-tc-memory`,name:`update_global_memory`,input:{content:`# Global Memory
|
|
3666
|
+
|
|
3667
|
+
- Brand colors now live in /shared/tokens/brand.css
|
|
3668
|
+
- Release notes ship on Wednesdays
|
|
3669
|
+
`},result:`Global memory updated successfully.`}]}),e.push({id:`fx-delegation-1`,role:`user`,content:"**[Instructions from sliccy]**\n\nRead `/workspace/README.md` and extract the install steps into `/shared/install.md`.",timestamp:Q(4),source:`delegation`,channel:`delegation`}),e.push({id:`fx-assistant-delegated`,role:`assistant`,content:"Extracted the install steps. Wrote them to `/shared/install.md`. The section covers prerequisites, npm install, and the dev server launch.",timestamp:Q(4.4),source:`cone`}),e.push({id:`fx-lick-webhook`,role:`user`,content:"[Webhook Event: github-push]\n```json\n"+JSON.stringify({ref:`refs/heads/main`,repository:{full_name:`example/repo`},head_commit:{message:`fix(ui): tighten button contrast in dark mode`}},null,2)+"\n```",timestamp:Q(6),source:`lick`,channel:`webhook`}),e.push({id:`fx-lick-cron`,role:`user`,content:"[Cron Event: daily-digest]\n```json\n"+JSON.stringify({time:new Date(Q(8)).toISOString()},null,2)+"\n```",timestamp:Q(8),source:`lick`,channel:`cron`}),e.push({id:`fx-lick-sprinkle`,role:`user`,content:"[Sprinkle Event: welcome]\n```json\n"+JSON.stringify({action:`onboarding-complete`,data:{mountWorkspace:!0}},null,2)+"\n```",timestamp:Q(10),source:`lick`,channel:`sprinkle`}),e.push({id:`fx-lick-fswatch`,role:`user`,content:"[File Watch Event: src-watch]\n```json\n"+JSON.stringify({changes:[{type:`modified`,path:`/workspace/src/app.ts`},{type:`created`,path:`/workspace/src/utils.ts`}]},null,2)+"\n```",timestamp:Q(12),source:`lick`,channel:`fswatch`}),e.push({id:`fx-lick-navigate`,role:`user`,content:"[Navigate Event: https://www.sliccy.ai/handoff?handoff=demo]\n```json\n"+JSON.stringify({url:`https://www.sliccy.ai/handoff?handoff=demo`,verb:`handoff`,target:`https://www.sliccy.ai/handoff?handoff=demo`,instruction:`demo`,title:`Handoff`},null,2)+"\n```",timestamp:Q(14),source:`lick`,channel:`navigate`}),e.push({id:`fx-lick-session-reload`,role:`user`,content:`[Session Reload: mount-recovery]
|
|
3670
|
+
|
|
3671
|
+
A previously-mounted directory needs to be reauthorized:
|
|
3672
|
+
|
|
3673
|
+
- \`/mnt/workspace\` (was \`workspace/\`)`,timestamp:Q(16),source:`lick`,channel:`session-reload`}),e.push({id:`fx-lick-upgrade`,role:`user`,content:`[Upgrade Event: 0.4.1→0.5.0]
|
|
3674
|
+
|
|
3675
|
+
SLICC was upgraded from \`0.4.1\` to \`0.5.0\`.
|
|
3676
|
+
Released: 2026-04-15T12:00:00Z
|
|
3677
|
+
|
|
3678
|
+
Use the **upgrade** skill (\`/workspace/skills/upgrade/SKILL.md\`) to:
|
|
3679
|
+
- Show the user the changelog between these tags from GitHub
|
|
3680
|
+
- Offer to merge new bundled vfs-root content into their workspace (three-way merge: bundled snapshot vs user's VFS, reconciled with the GitHub tag-to-tag diff).`,timestamp:Q(17),source:`lick`,channel:`upgrade`}),e.push({id:`fx-queued-1`,role:`user`,content:`Also double-check the install.md formatting after you finish.`,timestamp:Q(18),queued:!0}),e.push({id:`fx-assistant-streaming`,role:`assistant`,content:`Great, running the coverage suite now. I'll report back as soon as it `,timestamp:Q(20),isStreaming:!0,toolCalls:[{id:`fx-tc-streaming`,name:`bash`,input:{command:`npm run test -- --coverage`}}]}),e}var Mc=e({FREEZER_TINT:()=>Nc,applyShellContext:()=>Gc,mountWcShell:()=>Wc,mountWcUiPreview:()=>qc,submittedText:()=>Kc}),Nc=`#3b6cb2`,Pc=`slicc-wcui-style`,Fc=[`html,body{margin:0;padding:0;height:100%;}`,`.wcui-frame{position:relative;transform:translateZ(0);width:100%;height:100vh;`,`overflow:hidden;background:var(--bg);font-family:var(--ui);}`,`.wcui-shader{position:absolute;inset:0;z-index:0;}`,`.wcui-frame slicc-chatpane{background:transparent;}`,`.wcui-appcol{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;`,`box-sizing:border-box;padding-left:var(--rail-w,44px);`,`transition:padding-left .4s cubic-bezier(.4,0,.2,1);}`,`@media (max-width:560px){.wcui-appcol{padding-left:44px;}}`,`.wcui-term{flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 4px 8px 10px;`,`box-sizing:border-box;background:#141414;}`,`.wcui-term .terminal-panel__terminal-host{flex:1 1 auto;min-height:0;}`,`.wcui-term .terminal-panel__preview{flex:0 0 auto;}`,`.wcui-frame slicc-file-tree{width:100%;border-right:none;}`,`.wcui-memory{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;`,`gap:8px;padding:10px;}`,`.wcui-placeholder{flex:1;display:flex;align-items:center;justify-content:center;`,`padding:24px;color:var(--txt-2);font-size:13px;text-align:center;}`].join(``);function Ic(e){if(e.getElementById(Pc))return;let t=e.createElement(`style`);t.id=Pc,t.textContent=Fc,e.head.appendChild(t)}var Lc=null;function Rc(){Lc?.(),Lc=$o()}function $(e,t={}){let n=document.createElement(e);for(let[e,r]of Object.entries(t))n.setAttribute(e,r);return n}function zc(e){let t=$(`slicc-nav`,{accent:`var(--waffle)`}),n=$(`slicc-scoop-switcher`);n.scoops=[...e.scoops];let r=$(`slicc-floatbar`,{label:e.floatLabel,spent:`0.00`}),i=document.createElement(`slicc-avatar-menu`);return i.append($(`slicc-avatar`,{name:`SLICC`})),t.append(...e.badge?[$(`slicc-logo`,{badge:e.badge})]:[],n,r,i),{nav:t,switcher:n,floatbar:r,avatarMenu:i}}function Bc(e){let t=$(`slicc-composer`),n=$(`slicc-input-card`,{placeholder:e.placeholder}),r=$(`slicc-composer-meta`,{model:`Preview`,thinking:`off`});return t.append(n,r),{composer:t,inputCard:n,composerMeta:r}}function Vc(){let e=$(`slicc-workbench-pane`),t=$(`slicc-workbench-header`,{slot:`header`,hidden:``}),n=$(`slicc-tab-bar`,{active:`files`});t.append(n);let r=$(`slicc-workbench-body`,{active:`files`}),i=$(`slicc-surface`,{"surface-id":`files`,layout:`flex`,active:``}),a=$(`slicc-file-tree`);i.append(a);let o=$(`slicc-surface`,{"surface-id":`term`,layout:`flex`}),s=$(`div`,{class:`wcui-term`});o.append(s);let c=$(`slicc-surface`,{"surface-id":`memory`,layout:`flex`}),l=$(`div`,{class:`wcui-memory`});c.append(l);let u=$(`slicc-surface`,{"surface-id":`browser`,layout:`flex`}),d=$(`div`,{class:`wcui-placeholder`});return d.textContent=`The Browser dock item opens the full-screen tab switcher: every open tab — local and tray followers — with live screenshot thumbnails. Click a card to focus it, ✕ to close it.`,u.append(d),r.append(i,o,c,u),e.append(t,r),{workbench:e,body:r,header:t,tree:a,termSurface:s,memoryHost:l,tabBar:n}}function Hc(e,t,n,r){e.addEventListener(`slicc-dock-select`,e=>{let i=e.detail?.id;i&&i!==`browser`&&(t.setAttribute(`open`,``),n.setAttribute(`active`,i),r?.(i))}),e.addEventListener(`slicc-dock-collapse`,()=>{t.removeAttribute(`open`)}),e.addEventListener(`slicc-dock-longpress`,e=>{let i=e.detail?.id;if(!i?.startsWith(`sprinkle:`))return;t.setAttribute(`open`,``),n.setAttribute(`active`,i),r?.(i);let a=i.replace(/\\/g,`\\\\`).replace(/"/g,`\\"`);n.querySelector(`[surface-id="${a}"]`)?.requestFullscreen?.().catch(()=>{})})}function Uc(e,t,n){e.addEventListener(`tab-select`,e=>{let r=e.detail?.id;r&&(t.setAttribute(`active`,r),n?.(r))})}function Wc(e,t){Zo(document),Ic(document),Rc();let n=$(`div`,{class:`wcui-frame`}),r=$(`slicc-shader`,{mode:`cone`,tint:`var(--waffle)`,class:`wcui-shader`}),i=$(`slicc-freezer`);i.append($(`slicc-freezer-new`));let a=$(`div`,{class:`wcui-appcol`}),o=t.urlState?{"url-state":``}:{},s=$(`slicc-shell`,o),c=$(`slicc-chatpane`),l=$(`slicc-chat-thread`,{context:`cone`,accent:`var(--waffle)`,...o});l.append(...Ec(t.messages));let{composer:u,inputCard:d,composerMeta:f}=Bc(t);c.append(l,u);let{workbench:p,body:m,header:h,tree:ee,termSurface:te,memoryHost:g,tabBar:ne}=Vc(),_=$(`slicc-dock`,{"system-tools":``});s.append(c,p,_),Hc(_,s,m,t.onSurfaceActivate),Uc(h,m,t.onSurfaceActivate),i.addEventListener(`freezer-toggle`,e=>{let t=e.detail?.open===!0;a.style.setProperty(`--rail-w`,t?`260px`:`44px`)});let re=0;l.addEventListener(`scroll`,()=>{re||=requestAnimationFrame(()=>{re=0,r.setAttribute(`scroll`,String(Math.round(l.scrollTop)))})},{passive:!0});let{nav:ie,switcher:ae,floatbar:oe,avatarMenu:se}=zc(t);return a.append(ie,s),n.append(r,i,a),e.replaceChildren(n),{frame:n,shader:r,thread:l,inputCard:d,composerMeta:f,switcher:ae,floatbar:oe,shell:s,workbenchBody:m,workbenchHeader:h,dock:_,freezer:i,fileTree:ee,termSurface:te,memoryHost:g,tabBar:ne,avatarMenu:se}}function Gc(e,t){let{shader:n,frame:r,freezer:i}=e;t.kind===`cone`?(n.setAttribute(`mode`,`cone`),n.setAttribute(`tint`,`var(--waffle)`),r.style.removeProperty(`--ctx`),i.removeAttribute(`ctx`)):t.kind===`scoop`?(n.setAttribute(`mode`,`scoop`),n.setAttribute(`tint`,t.accent),r.style.setProperty(`--ctx`,t.accent),i.removeAttribute(`ctx`)):(n.setAttribute(`mode`,`freezer`),n.setAttribute(`tint`,Nc),r.style.setProperty(`--ctx`,Nc),i.setAttribute(`ctx`,``))}function Kc(e){return e.detail?.value}function qc(e){let t=Wc(e,{messages:jc(),scoops:[{key:`cone`,type:`cone`,color:`#b07823`,label:`sliccy`,eyes:`open`},{key:Ac,type:`scoop`,color:`#06b6d4`,label:Ac,eyes:`open`}],floatLabel:`standalone · preview`,placeholder:`Preview harness — submissions echo into the thread…`,badge:`fixture`});t.fileTree.items=[{kind:`group`,label:`workspace/`},{kind:`file`,id:`/workspace/CLAUDE.md`,label:`CLAUDE.md`},{kind:`group`,label:`shared/`},{kind:`file`,id:`/shared/CLAUDE.md`,label:`CLAUDE.md`}],t.switcher.setAttribute(`attention`,`cone`),t.inputCard.addEventListener(`submit`,e=>{let n=Kc(e)?.trim();if(!n)return;let r={id:`wc-echo-${t.thread.childElementCount}`,role:`user`,content:n,timestamp:Date.now()};t.thread.append(...Sc(r))})}export{Mc as a,Sc as c,i as d,Kc as i,Hs as l,Gc as n,Cc as o,Wc as r,Tc as s,Nc as t,Rs as u};
|