diff --git a/.well-known/package.json b/.well-known/package.json index f03034e71..37cefeb93 100644 --- a/.well-known/package.json +++ b/.well-known/package.json @@ -1,6 +1,6 @@ { "name": "@ryanatkn/fuz", - "version": "0.101.3", + "version": "0.101.4", "description": "Svelte UI library", "motto": "friendly user zystem", "icon": "๐Ÿงถ", @@ -55,12 +55,12 @@ "@typescript-eslint/eslint-plugin": "^7.10.0", "@typescript-eslint/parser": "^7.10.0", "eslint": "^8.57.0", - "eslint-plugin-svelte": "^2.36.0-next.13", + "eslint-plugin-svelte": "^2.39.3", "prettier": "^3.2.5", "prettier-plugin-svelte": "^3.2.3", "prism-svelte": "^0.5.0", "prismjs": "^1.29.0", - "svelte": "^5.0.0-next.141", + "svelte": "^5.0.0-next.153", "svelte-check": "^3.7.1", "tslib": "^2.6.2", "typescript": "^5.4.5", diff --git a/.well-known/src.json b/.well-known/src.json index e41506574..0687ef267 100644 --- a/.well-known/src.json +++ b/.well-known/src.json @@ -1,6 +1,6 @@ { "name": "@ryanatkn/fuz", - "version": "0.101.3", + "version": "0.101.4", "modules": { "./package.json": { "path": "package.json", diff --git a/_app/immutable/assets/Hashlink.DTRRn5r0.css b/_app/immutable/assets/Hashlink.DTRRn5r0.css deleted file mode 100644 index bf5fca4d5..000000000 --- a/_app/immutable/assets/Hashlink.DTRRn5r0.css +++ /dev/null @@ -1 +0,0 @@ -.hashlink.svelte-1n8y6uc{font-size:var(--size_lg);position:absolute;left:-3.5rem;bottom:calc(var(--size, var(--size_md)) * .1);opacity:0;transition:opacity var(--duration_2)}.hashlink_scroll_target.svelte-1n8y6uc{position:absolute;top:calc(var(--size, var(--size_md)) * -4);left:0}@media (max-width: 1000px){.hashlink.svelte-1n8y6uc{position:static}}@media (max-width: 800px){.hashlink.svelte-1n8y6uc{opacity:1}} diff --git a/_app/immutable/assets/Hashlink.VcgNwRhJ.css b/_app/immutable/assets/Hashlink.VcgNwRhJ.css new file mode 100644 index 000000000..948f4026b --- /dev/null +++ b/_app/immutable/assets/Hashlink.VcgNwRhJ.css @@ -0,0 +1 @@ +.hashlink.svelte-iahrxw{font-size:var(--size_lg);padding:0 var(--space_sm);margin-left:var(--space_sm);opacity:0;transition:opacity var(--duration_2)}.hashlink_scroll_target.svelte-iahrxw{position:absolute;top:calc(var(--size, var(--size_md)) * -4);left:0}@media (max-width: 800px){.hashlink.svelte-iahrxw{opacity:1}} diff --git a/_app/immutable/assets/Tome_Detail.Ben6MdlA.css b/_app/immutable/assets/Tome_Detail.Ben6MdlA.css new file mode 100644 index 000000000..4b56d4e07 --- /dev/null +++ b/_app/immutable/assets/Tome_Detail.Ben6MdlA.css @@ -0,0 +1 @@ +.tome_title.svelte-187f62t{position:relative;display:flex;align-items:center;justify-content:space-between;margin-top:var(--space_xl4)}.tome_title.svelte-187f62t:hover .hashlink{opacity:1}.tome_detail.svelte-1f6fepp{margin-bottom:var(--space_xl9)}header.svelte-1f6fepp{margin-bottom:var(--space_xl3)} diff --git a/_app/immutable/assets/Tome_Detail.xdQffhOq.css b/_app/immutable/assets/Tome_Detail.xdQffhOq.css deleted file mode 100644 index ef22c85f4..000000000 --- a/_app/immutable/assets/Tome_Detail.xdQffhOq.css +++ /dev/null @@ -1 +0,0 @@ -.tome_title.svelte-5me3nn{margin-top:var(--space_xl4);position:relative}.tome_title.svelte-5me3nn:hover .hashlink{opacity:1}.tome_detail.svelte-1f6fepp{margin-bottom:var(--space_xl9)}header.svelte-1f6fepp{margin-bottom:var(--space_xl3)} diff --git a/_app/immutable/assets/Tome_Subheading.Bf2h3gFB.css b/_app/immutable/assets/Tome_Subheading.Bf2h3gFB.css deleted file mode 100644 index 71a80fbc1..000000000 --- a/_app/immutable/assets/Tome_Subheading.Bf2h3gFB.css +++ /dev/null @@ -1 +0,0 @@ -:is(h3.svelte-10wpo2b,h4.svelte-10wpo2b){position:relative}.svelte-10wpo2b:is(h3:where(.svelte-10wpo2b),h4:where(.svelte-10wpo2b)):hover .hashlink{opacity:1} diff --git a/_app/immutable/assets/Tome_Subheading.Diopi8OZ.css b/_app/immutable/assets/Tome_Subheading.Diopi8OZ.css new file mode 100644 index 000000000..df7880ef7 --- /dev/null +++ b/_app/immutable/assets/Tome_Subheading.Diopi8OZ.css @@ -0,0 +1 @@ +.tome_subheading.svelte-mngpav{position:relative;display:flex;align-items:center;justify-content:space-between}.tome_subheading.svelte-mngpav:hover .hashlink{opacity:1} diff --git a/_app/immutable/chunks/26.KLLrnQHx.js b/_app/immutable/chunks/26.KLLrnQHx.js new file mode 100644 index 000000000..c33944634 --- /dev/null +++ b/_app/immutable/chunks/26.KLLrnQHx.js @@ -0,0 +1,63 @@ +import{a as o,t as c,c as r,s as e,b as j,f as y}from"./disclose-version.B0kWSal4.js";import{g as t,w as B,I as ee,p as ke,t as K,a as we,a9 as T,d as h,K as $t}from"./runtime.B6fxmSPv.js";import{d as Le,s as te,f as kt}from"./render.BxneDx_a.js";import{p as _e}from"./proxy.DLPnr9ie.js";import{i as C}from"./if.BMt7BDry.js";import{e as je}from"./each.ClcwDRCS.js";import{t as qe}from"./class.BaeTRNXf.js";import{s as me}from"./style.iv2mhl8q.js";import{u as rt,s as $e,a as Ve}from"./store.BbeRo_gE.js";import{w as Z,g as Ze}from"./index.C7jSgUSY.js";import{C as x}from"./Code.DnJH9Jbn.js";import{r as at,a as st,g as ct,s as wt,b as xt,e as Ct,d as It,f as zt}from"./Themed.I_sfOgDp.js";import{T as Pt}from"./Tome_Detail.BhdmNuDF.js";import{D as ie}from"./Details.Cfb8fQXt.js";import{s as et,D as lt}from"./Dialog.CbPgDOpk.js";import{g as Mt}from"./tome.DHGp6Kpp.js";import{C as Dt,T as Wt}from"./Theme_Input.CMQEwBdm.js";import{T as ye}from"./Tome_Subheading.CS8mxyGY.js";import{r as Je,f as tt,d as At,s as Bt}from"./attributes.BII0BsJ8.js";import{b as Nt}from"./input.CCU3vt76.js";import{p as Se}from"./props.B34sVbFD.js";import{M as Te}from"./Mdn_Link.CgSMfiLk.js";import{h as Ot}from"./html.CqPPork4.js";import{e as Et}from"./svelte-element.DDTye03t.js";const Rt=async(v,s,a,i)=>{B(s,!1),B(a,!1);try{await navigator.clipboard.writeText(i.text)}catch{B(a,!0);return}B(s,!0)};var jt=c('copied!'),qt=c('failed'),Jt=c('
');function Lt(v,s){let a=ee(!1),i=ee(!1);var l=Jt(),b=r(l);b.__click=[Rt,a,i,s],me(b,"font-size","var(--size_lg)");var u=e(e(b,!0));C(u,()=>t(a),g=>{var _=jt();me(_,"color","var(--color_b_5)"),o(g,_)});var I=e(e(u,!0));C(I,()=>t(i),g=>{var _=qt();me(_,"color","var(--color_c_5)"),o(g,_)}),o(v,l)}Le(["click"]);var Vt=c("
"),Yt=c('
');function Ft(v,s){ke(s,!0);var a=j(),i=y(a);C(i,()=>s.variable,l=>{var b=Yt(),u=r(b),I=r(u),g=r(I),_=e(e(u,!0));C(_,()=>s.variable.summary,p=>{var k=Vt(),w=r(k);K(()=>te(w,s.variable.summary)),o(p,k)});var z=e(e(_,!0)),P=r(z),M=e(e(P,!0));Je(M);var N=e(e(z,!0)),S=r(N),$=e(e(S,!0));Je($),K(()=>{te(g,`--${s.variable.name??""}`),tt(M,s.variable.light??""),tt($,s.variable.dark??"")}),o(l,b)}),o(v,a),we()}const Kt=(v,s,a,i)=>{var l;t(s)&&((l=a.onsave)==null||l.call(a,t(i)))},Gt=(v,s)=>{s(v),alert("TODO")};var Ht=c("edit",1),Qt=c("create",1),Ut=c("save changes",1),Xt=c("create theme",1),Zt=(v,s,a)=>s(v,T(a)),eo=c(''),to=c('
',1),oo=c('
'),ro=c(`

theme

`,1);function ao(v,s){ke(s,!0);const a=Se(s,"theme",3,null);let i=ee(_e(a()?a().name:"new theme")),l=ee(_e(a()?a().variables:[]));const b=h(()=>({name:t(i),variables:t(l)})),u=h(()=>at(t(b),{empty_default_theme:!1,specificity:1})),I=h(()=>t(l).reduce((n,d)=>d.light?n+1:n,0)),g=h(()=>t(l).reduce((n,d)=>d.dark?n+1:n,0));let _=ee(null);const z=(n,d)=>{et(n),B(_,_e(d)),B(l,_e(t(l).slice()))},P=h(()=>!!a()),M=h(()=>a()?t(i)!==a().name||t(l)!==a().variables:!0);var N=ro(),S=y(N),$=r(S),p=r($);C(p,()=>t(P),n=>{var d=Ht();o(n,d)},n=>{var d=Qt();o(n,d)});var k=e(e($,!0)),w=e(e(k,!0)),O=r(w),G=r(O),H=r(G),Q=e(e(G,!0));Q.__click=[Gt,et];var oe=e(e(O,!0)),U=r(oe),ve=r(U),re=e(e(ve,!0));Je(re);var X=e(e(U,!0));X.__click=[Kt,M,s,b];var D=r(X);C(D,()=>t(P),n=>{var d=Ut();o(n,d)},n=>{var d=Xt();o(n,d)});var xe=e(e(w,!0)),ae=r(xe);je(ae,77,()=>t(l),(n,d)=>T(n).name,(n,d,q)=>{var A=eo();A.__click=[Zt,z,d];var J=r(A);K(()=>te(J,`--${T(d).name??""}`)),o(n,A)});var he=e(e(ae,!0)),ue=r(he);C(ue,()=>t(u),n=>{var d=to(),q=y(d),A=r(q);Lt(A,{get text(){return t(u)}});var J=e(e(q,!0));x(J,{get content(){return t(u)},lang:"css"}),o(n,d)});var Ce=e(e(S,!0));C(Ce,()=>t(_),n=>{var d=j(),q=y(d);{var A=(J,Ie=$t)=>{var se=oo(),ze=r(se),pe=r(ze);Ft(pe,{get variable(){return t(_)}});var Pe=e(e(pe,!0)),fe=e(e(Pe,!0));fe.__click=Ie(),o(J,se)};lt(q,{onclose:()=>B(_,null),children:A})}o(n,d)}),K(()=>{te(H,`variables: ${t(I)??""} light, ${t(g)??""} dark`),X.disabled=!t(M)}),Nt(re,()=>t(i),n=>B(i,n)),o(v,N),we()}Le(["click"]);let so=0;function ot(v,s){ke(s,!0);const a={};rt(a);const i=()=>$e(b(),"$selected_theme",a),l=()=>$e(u(),"$selected_color_scheme",a),b=Se(s,"selected_theme",11,()=>Z(Ze(st()))),u=Se(s,"selected_color_scheme",11,()=>Z(Ze(ct()))),I=Se(s,"tagName",3,"div"),g="themed_"+so++;wt(b()),xt(u());const _=h(()=>at(i(),{id:g,empty_default_theme:!1})),z=h(()=>t(_)?Ct(t(_)):null),P=h(()=>l()==="dark"||l()==="light"?l():matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");var M=j();kt(S=>{var $=j(),p=y($);C(p,()=>t(z),k=>{var w=j(),O=y(w);Ot(O,()=>t(z),!1,!1),o(k,w)}),o(S,$)});var N=y(M);Et(N,I,!1,(S,$)=>{At(S,null,{id:g,class:"themed"},""),K(()=>qe(S,"dark",t(P)==="dark"));var p=j(),k=y(p);Bt(()=>s.children,k,()=>g,()=>t(_),()=>t(z),b,u),o($,p)}),o(v,M),we()}var co=c("CSS custom properties",1),lo=c("Why the singleton?",1),no=c(``),io=c("Why nested children?",1),_o=c(``),mo=c("More about Color_Scheme_Input",1),vo=c(``),ho=c(`โš ๏ธ Scoped themes are a work in progress and may not be supported depending + on complexity. It shouldn't worsen the unscoped API.`,1),uo=(v,s,a,i,l)=>{s(T(a)),Ve(l,"light")},po=c("โ˜…",1),fo=c("โ˜†",1),bo=c('
the theme
'),go=(v,s,a,i,l)=>{s(T(a)),Ve(l,"dark")},yo=c("โ˜…",1),To=c("โ˜†",1),So=c('
the theme
'),$o=c('

Scope a theme to one branch of the DOM tree with Themed_Scope:

',1),ko=c("More about Themed",1),wo=c(``),xo=c(`

Themed adds global support for both the browser's and custom themes based on Moss style variables, which use . Themed is a singleton component that's mounted at the top-level of the page:

Themed defaults to automatic detection with , and users can also set it directly:

Pass a prop to override the default:

The builtin themes support both dark and light color schemes. Custom themes may support one or + both color schemes.

A theme is a simple JSON collection of Moss style variables that can be transformed into CSS that set custom properties. Each variable can have values for + light and/or dark color schemes. In other words, "dark" isn't a theme, it's a mode that any theme + can implement.

Themes are plain CSS that can be sourced in a variety of ways.

To use fuz's base theme:

Themed can be customized with the nonreactive, bindable, writable store props selected_theme and selected_color_scheme:

Themed sets the writable stores selected_theme and selected_color_scheme in the Svelte context:

`,1),Co=c('
'),Io=c(" ",1);function Zo(v,s){ke(s,!0);const a={};rt(a);const i=()=>$e(g,"$selected_theme",a),l=()=>$e(_,"$selected_color_scheme",a),u=Mt("Themed"),I=It.slice(),g=st(),_=ct(),z=p=>{Ve(g,p),zt(p)};let P=ee(null);var M=Io(),N=y(M);Pt(N,{tome:u,children:(p,k)=>{var w=xo(),O=y(w),G=r(O),H=r(G),Q=e(e(H,!0));Te(Q,{href:"Web/CSS/color-scheme"});var oe=e(e(Q,!0)),U=e(e(oe,!0));Te(U,{href:"Web/CSS/--*",children:(L,m)=>{var f=co();o(L,f)},$$slots:{default:!0}});var ve=e(e(G,!0));x(ve,{content:"import Themed from '@ryanatkn/fuz/Themed.svelte';",lang:"ts"});var re=e(e(ve,!0));x(re,{content:` + + {@render children()} +`});var X=e(e(re,!0));{var D=L=>{var m=lo();o(L,m)};ie(X,{summary:D,children:(L,m)=>{var f=no();o(L,f)},$$slots:{default:!0}})}var xe=e(e(X,!0));{var D=m=>{var f=io();o(m,f)};ie(xe,{summary:D,children:(m,f)=>{var E=_o(),be=r(E),Me=e(e(be,!0)),ge=e(e(Me,!0)),De=e(e(ge,!0));x(De,{content:`