@getvitops/generator 3.0.0 → 4.0.0

package/assets/css/patterns/tree.css

@@ -3,9 +3,38 @@
  * Consumes the generated token cascade (src/css/generated/tokens.css).
  */
 
+/* An unregistered custom element is `display: inline`, and `<wc-tree>` wraps a
+   `<ul>` — a block child in an inline box, which forces an anonymous block and
+   leaves the element unable to take sizing or spacing. It must be block whether
+   or not `elements.js` ever loads, because the tag is in the SSR'd markup either
+   way. (Same gap exists on most other `wc-*` tags; see the note in
+   `src/js/elements.ts`.) */
+wc-tree {
+  display: block;
+}
+
 /* ── Tree — hierarchical view over nested lists / <details> ───────────────── */
 .tree {
   --_p: var(--p-tree, var(--p-tree-group, var(--p-default)));
+  /* Resolved once here so the indent and the `--lines` elbow that must align to
+     it cannot disagree. Read through `--tree-indent` rather than assigning it, so
+     a consumer setting `--tree-indent` on an ancestor still wins — assigning the
+     default directly to `--tree-indent` on `.tree` would out-specify the hook and
+     silently ignore it. */
+  --_indent: var(--tree-indent, clamp(0.75rem, 2.5vw, 1.5rem));
+
+  /* The toggle column. A branch spends this on its chevron before its label; a
+     leaf has no chevron, so without compensation a leaf label sits one whole
+     column to the INLINE-START of its branch siblings and nothing at a given
+     depth lines up. Measured: 24px of misalignment at every level.
+
+     Two vars rather than one because they answer different questions —
+     `--_node-indent` is how wide the toggle column is, `--_leaf-indent` is what a
+     row without a toggle owes to sit in the same label column. Anything that
+     needs to align to the label (the description, a future `.tree__actions`
+     offset) reads `--_leaf-indent` rather than re-deriving the sum. */
+  --_node-indent: var(--tree-icon-size, 1.25rem);
+  --_leaf-indent: calc(var(--_node-indent) + var(--tree-gap, 0.25rem));
 
   list-style: none;
   margin: 0;
@@ -15,14 +44,49 @@
     position: relative;
   }
 
-  .tree__item > .tree {
-    margin-inline-start: var(--tree-indent, 1.5rem);
-    padding-inline-start: var(--tree-indent, 1.5rem);
+  /* Nested list indent. Two shapes are supported: the item may BE the
+     `<details>`, or be an `<li>` wrapping one — the latter is what `<Tree />`
+     emits, because `<ul>`/`<li>` is what gives assistive tech list position and
+     depth. Keep both; the flat shape is the pattern's original contract.
+
+     Indent is ONE `--tree-indent` per level, not two. This used to set both
+     `margin-inline-start` and `padding-inline-start` to it, putting the guide
+     border between them and costing 2× per level — 3rem × 10 levels = 480px on
+     the config schema, which is wider than a 390px viewport, so the deepest
+     fields sat entirely off-screen. The border now hugs the parent's edge and
+     the padding alone carries the offset, which looks the same at one level and
+     stays on screen at ten.
+
+     Fluid, because a tree's depth is a property of the DATA and can't be known
+     when the pattern is written: `2ch`-ish on a narrow screen, the full step on
+     a wide one. Deep trees stay usable on a phone without flattening the
+     hierarchy visually on a desktop. */
+  .tree__item > .tree,
+  .tree__item > details > .tree {
+    /* Reset BOTH box axes before re-applying the one indent this level owes.
+       Two separate leaks compounded here, each adding ~16px per level and each
+       invisible in the CSS:
+
+       1. `.tree { padding: var(--_p) }` applies to every nested `.tree`, not just
+          the outermost, so the container padding was charged once per level — on
+          all four sides, narrowing from the end as well.
+       2. `patterns/details.css` gives every non-summary child of a `<details>`
+          `margin-inline: var(--_content-margin)`. Its selector is
+          `details, .details`, which under CSS nesting takes `:is()` specificity
+          (0-1-1), so `.tree { margin: 0 }` at 0-1-0 LOSES to it. A nested tree is
+          exactly such a child.
+
+       Measured before this: 41px per level against a 24px design, so a 9-deep
+       tree spent 382px on indent and left its deepest label 162px wide. */
+    margin-inline: 0;
+    padding: 0;
+    padding-inline-start: var(--_indent);
     border-inline-start: 1px solid var(--color-bg-surface-muted);
   }
 
   .tree__content,
-  details.tree__item > summary {
+  details.tree__item > summary,
+  .tree__item > details > summary {
     display: flex;
     align-items: center;
     gap: var(--tree-gap, 0.25rem);
@@ -31,9 +95,13 @@
 
   .tree__content {
     cursor: default;
+    /* Sit in the same label column as a branch sibling, which spends this much on
+       its chevron. Without it a leaf reads as out-dented by one toggle width. */
+    padding-inline-start: var(--_leaf-indent);
   }
 
-  details.tree__item > summary {
+  details.tree__item > summary,
+  .tree__item > details > summary {
     cursor: pointer;
     list-style: none;
 
@@ -59,7 +127,8 @@
     transition: transform 0.2s ease;
   }
 
-  details.tree__item[open] > summary .tree__toggle {
+  details.tree__item[open] > summary .tree__toggle,
+  .tree__item > details[open] > summary .tree__toggle {
     transform: rotate(90deg);
   }
 
@@ -111,10 +180,10 @@
     &::before {
       content: '';
       position: absolute;
-      inset-inline-start: calc(-1 * var(--tree-indent, 1.5rem) + 0.5rem);
+      inset-inline-start: calc(-1 * var(--_indent) + 0.5rem);
       inset-block-start: 0;
       block-size: 1rem;
-      inline-size: calc(var(--tree-indent, 1.5rem) - 0.5rem);
+      inline-size: calc(var(--_indent) - 0.5rem);
       border-inline-start: 1px solid var(--color-bg-surface-muted);
       border-block-end: 1px solid var(--color-bg-surface-muted);
     }
@@ -123,4 +192,45 @@
   &.tree--lines > .tree__item::before {
     display: none;
   }
+
+  /* A node's own prose. `.tree__label` is `nowrap` + ellipsis for file-tree-style
+     single-line names, so a description can't live in it — it sits below the
+     summary row and wraps. Indented to the label, past the toggle. */
+  .tree__desc {
+    margin-block: 0.125rem 0.25rem;
+    margin-inline-start: var(--_leaf-indent);
+    color: var(--color-text-surface-muted);
+    text-wrap: pretty;
+  }
+}
+
+/* ── Tree toolbar — generated by <wc-tree>, never authored ─────────────────── */
+/*
+ * These controls only exist once the element upgrades, so they are styled but
+ * never present in a no-JS render. Kept out of the `.tree` block because the
+ * toolbar is a SIBLING of the tree, not a node in it — nesting it there would
+ * inherit `.tree`'s padding and the `.tree__item` positioning context.
+ */
+.tree__toolbar {
+  align-items: center;
+  margin-block-end: var(--p-tree, var(--p-tree-group, var(--p-default)));
+
+  /* The filter is wrapped in `.input-group` so forms.css styles it; the group is
+     what flexes, and the input fills it. */
+  .tree__filter-group {
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
+  .tree__filter {
+    inline-size: 100%;
+    min-inline-size: 0;
+  }
+
+  .tree__count {
+    color: var(--color-text-surface-muted);
+    /* Hold the row height whether or not a count is showing, so typing into the
+       filter doesn't reflow the tree by a line. */
+    min-inline-size: 6ch;
+  }
 }

package/assets/js/consent.js

@@ -1 +1 @@
-const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops_consent`,n=[`analytics`,`marketing`,`preferences`];function r(e){return{analytics:e,marketing:e,preferences:e}}function i(){return{decided:!1,ts:null,choices:r(!1)}}function a(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function o(e){if(!e)return i();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return i()}if(typeof t!=`object`||!t)return i();let a=t;if(a.v!==1||typeof a.c!=`object`||a.c===null)return i();let o=a.c,s=r(!1);for(let e of n)s[e]=o[e]===!0;return{decided:!0,ts:typeof a.ts==`number`?a.ts:null,choices:s}}function s(e){return encodeURIComponent(JSON.stringify({v:1,ts:e.ts??0,c:e.choices}))}function c(e,t){return t===`necessary`?!0:e.decided&&e.choices[t]===!0}function l(e,t){return{decided:!0,ts:t,choices:r(e)}}function u(e,t,r){let i={...e.choices};for(let e of n){let n=t[e];typeof n==`boolean`&&(i[e]=n)}return{decided:!0,ts:r,choices:i}}function d(e,t){return n.filter(n=>c(e,n)&&!c(t,n))}function f(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const p=`vitops:consent`,m=`vitops:consent-open`,h=location.protocol===`https:`;let g=o(a(document.cookie,t));const _=new Set,v=new WeakSet,y=new Set,b={idle:[],async:[],interaction:[]},x={idle:!1,async:!0,interaction:!1};function S(e){if(x[e])return;x[e]=!0;let t=b[e];b[e]=[];for(let e of t)e()}function C(e,t){x[e]?t():b[e].push(t)}function w(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}w(()=>{let e=globalThis.requestIdleCallback;e?e(()=>S(`idle`),{timeout:3e3}):setTimeout(()=>S(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);S(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});w(()=>setTimeout(()=>S(`interaction`),8e3))}const T=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function E(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function D(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))T.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function O(e){if(!v.has(e)){if(v.add(e),y.add(E(e)),e instanceof HTMLScriptElement)D(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function k(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){if(!c(g,E(t)))continue;let e=t.getAttribute(`data-strategy`);C(e===`async`||e===`interaction`?e:`idle`,()=>O(t))}}function A(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function j(e,n){let r=d(g,e),i=g;g=e,n?document.cookie=`${t}=${s(e)}${f(h)}`:document.cookie=`${t}=; path=/; max-age=0`,M(),k(),r.length&&(A(r),r.some(e=>y.has(e)&&c(i,e))&&N.reloadOnRevoke&&location.reload())}function M(){for(let e of _)e(g);document.dispatchEvent(new CustomEvent(p,{detail:g}))}const N={categories:e,reloadOnRevoke:!0,get:()=>g,granted:e=>c(g,e),needed:()=>!g.decided,set:e=>j(u(g,e,Date.now()),!0),acceptAll:()=>j(l(!0,Date.now()),!0),rejectAll:()=>j(l(!1,Date.now()),!0),reset:()=>j(i(),!1),open:()=>document.dispatchEvent(new CustomEvent(m)),subscribe(e){return _.add(e),e(g),()=>void _.delete(e)}};window.vitopsConsent=N,document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),N.open())}),document.addEventListener(`astro:page-load`,k),k(),M();const P=[`analytics`,`marketing`,`preferences`];var F=class extends HTMLElement{#e;get#t(){return window.vitopsConsent}get#n(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#t;if(!e)return;let t=this.#n;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#c),this.addEventListener(`submit`,this.#i),document.addEventListener(m,this.#r),this.#e=e.subscribe(()=>{e.needed()?this.#a():this.#o()})}disconnectedCallback(){this.removeEventListener(`click`,this.#c),this.removeEventListener(`submit`,this.#i),document.removeEventListener(m,this.#r),this.#e?.()}#r=()=>this.#a();#i=e=>e.preventDefault();#a(){this.#s(),this.hidden=!1;let e=this.#n;e?.isConnected&&!e.matches(`:popover-open`)&&e.showPopover()}#o(){this.#n?.hidePopover?.(),this.hidden=!0}#s(){let e=this.#t;if(e)for(let t of P){let n=this.querySelector(`input[name="${t}"]`);n&&(n.checked=e.granted(t))}}#c=e=>{let t=this.#t,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);!t||!n||(e.preventDefault(),n.hasAttribute(`data-consent-accept`)?t.acceptAll():n.hasAttribute(`data-consent-reject`)?t.rejectAll():t.set(this.#l()),this.#o())};#l(){let e={};for(let t of P)e[t]=this.querySelector(`input[name="${t}"]`)?.checked===!0;return e}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,F);export{e as CATEGORIES,p as CONSENT_EVENT,m as CONSENT_OPEN_EVENT,t as COOKIE_NAME,N as consent};
+const e=[`necessary`,`analytics`,`marketing`,`preferences`],t=`vitops:consent`,n=`vitops:consent-open`,r=`vitops_consent`,i=[`analytics`,`marketing`,`preferences`];function a(e){return{analytics:e,marketing:e,preferences:e}}function o(){return{ts:null,choices:a(null)}}function s(e,t){for(let n of e.split(`;`)){let e=n.trim();if(e.slice(0,t.length+1)===`${t}=`)return e.slice(t.length+1)}return null}function c(e){if(!e)return o();let t;try{t=JSON.parse(decodeURIComponent(e))}catch{return o()}if(typeof t!=`object`||!t)return o();let n=t;if(n.v!==2||typeof n.c!=`object`||n.c===null)return o();let r=n.c,s=a(null);for(let e of i){let t=r[e];typeof t==`boolean`&&(s[e]=t)}return{ts:typeof n.ts==`number`?n.ts:null,choices:s}}function l(e){let t={};for(let n of i){let r=e.choices[n];typeof r==`boolean`&&(t[n]=r)}return encodeURIComponent(JSON.stringify({v:2,ts:e.ts??0,c:t}))}function u(e,t){return t===`necessary`?!0:e.choices[t]===!0}function d(e,t){return t===`necessary`?!0:e.choices[t]!==null}function f(e,t){for(let n of t)if(!d(e,n))return!0;return!1}function p(e,t){return{ts:t,choices:a(e)}}function m(e,t,n){let r={...e.choices};for(let e of i){let n=t[e];typeof n==`boolean`&&(r[e]=n)}return{ts:n,choices:r}}function h(e,t){return i.filter(n=>u(e,n)&&!u(t,n))}function g(e){return`; path=/; max-age=15552000; SameSite=Lax${e?`; Secure`:``}`}const _=location.protocol===`https:`;let v=c(s(document.cookie,r));const y=new Set,b=new WeakSet,x=new Set,S=new Set,C=new Map;function w(e){S.has(e)||(S.add(e),R())}function T(){for(let[e,t]of C)if(d(v,e)){C.delete(e);for(let n of t)n(u(v,e))}}const E={idle:[],async:[],interaction:[]},D={idle:!1,async:!0,interaction:!1};function O(e){if(D[e])return;D[e]=!0;let t=E[e];E[e]=[];for(let e of t)e()}function k(e,t){D[e]?t():E[e].push(t)}function A(e){document.readyState===`complete`?e():addEventListener(`load`,e,{once:!0})}A(()=>{let e=globalThis.requestIdleCallback;e?e(()=>O(`idle`),{timeout:3e3}):setTimeout(()=>O(`idle`),1)});{let e=[`pointerdown`,`keydown`,`scroll`,`touchstart`],t=()=>{for(let n of e)removeEventListener(n,t);O(`interaction`)};for(let n of e)addEventListener(n,t,{once:!0,passive:!0});A(()=>setTimeout(()=>O(`interaction`),8e3))}const j=new Set([`type`,`src`,`data-vitops-tag`,`data-src`,`data-strategy`,`data-consent`,`data-consent-src`,`data-consent-cookies`]);function M(t){let n=t.getAttribute(`data-consent`);return e.includes(n??``)?n:`analytics`}function N(e){let t=e.textContent??``,n=e.getAttribute(`data-src`),r=t=>{let n=document.createElement(`script`);for(let{name:t,value:r}of Array.from(e.attributes))j.has(t)||n.setAttribute(t,r);t(n),e.parentNode?.insertBefore(n,e.nextSibling)};t.trim()&&r(e=>e.text=t),n&&r(e=>{e.async=!0,e.src=n})}function P(e){if(!b.has(e)){if(b.add(e),x.add(M(e)),e instanceof HTMLScriptElement)N(e);else{let t=e.getAttribute(`data-consent-src`);t&&e.setAttribute(`src`,t)}e.setAttribute(`data-vitops-activated`,``)}}function F(){let e=document.querySelectorAll(`script[data-vitops-tag]:not([data-vitops-activated]),[data-consent-src]:not([data-vitops-activated])`);for(let t of e){let e=t.getAttribute(`data-strategy`);k(e===`async`||e===`interaction`?e:`idle`,()=>{let e=M(t);u(v,e)?P(t):w(e)})}}function I(e){let t=new Set;for(let n of e)for(let e of document.querySelectorAll(`[data-consent="${n}"]`))for(let n of(e.getAttribute(`data-consent-cookies`)??``).split(`,`))n.trim()&&t.add(n.trim());if(!t.size)return;let n=document.cookie.split(`;`).map(e=>e.trim().split(`=`)[0]??``),r=location.hostname.split(`.`).slice(-2).join(`.`),i=[``,`; domain=${location.hostname}`,`; domain=.${r}`];for(let e of n)if([...t].some(t=>t.endsWith(`*`)?e.startsWith(t.slice(0,-1)):e===t))for(let t of i)document.cookie=`${e}=; path=/; max-age=0${t}`}function L(e,t){let n=h(v,e),i=v;v=e,t?document.cookie=`${r}=${l(e)}${g(_)}`:document.cookie=`${r}=; path=/; max-age=0`,R(),F(),n.length&&(I(n),n.some(e=>x.has(e)&&u(i,e))&&z.reloadOnRevoke&&location.reload())}function R(){T();for(let e of y)e(v);document.dispatchEvent(new CustomEvent(t,{detail:v}))}const z={categories:e,reloadOnRevoke:!0,get:()=>v,granted:e=>u(v,e),needed:()=>f(v,S),demanded:()=>e.filter(e=>S.has(e)),require(e){return w(e),u(v,e)},request(e){return w(e),d(v,e)?Promise.resolve(u(v,e)):new Promise(t=>{let n=C.get(e);n?n.push(t):C.set(e,[t])})},set:e=>L(m(v,e,Date.now()),!0),acceptAll:()=>L(p(!0,Date.now()),!0),rejectAll:()=>L(p(!1,Date.now()),!0),reset:()=>L(o(),!1),open:()=>document.dispatchEvent(new CustomEvent(n)),subscribe(e){return y.add(e),e(v),()=>void y.delete(e)}},B=window.vitopsConsent?.q;if(window.vitopsConsent=z,B)for(let[e,t]of B)t?z.request(e).then(t):z.require(e);document.addEventListener(`click`,e=>{e.target?.closest?.(`[data-consent-open]`)&&(e.preventDefault(),z.open())}),document.addEventListener(`astro:page-load`,F),F(),R();var V=class extends HTMLElement{#e;#t=`prompt`;#n=!1;get#r(){return window.vitopsConsent}get#i(){return this.querySelector(`[popover]`)}connectedCallback(){let e=this.#r;if(!e)return;let t=this.#i;t&&typeof t.showPopover!=`function`&&t.removeAttribute(`popover`),this.getAttribute(`reload-on-revoke`)===`false`&&(e.reloadOnRevoke=!1),this.addEventListener(`click`,this.#p),this.addEventListener(`submit`,this.#o),document.addEventListener(n,this.#a),this.#e=e.subscribe(()=>{this.#n&&this.#t===`settings`?this.#f():e.needed()?this.#u(`prompt`):this.#d()})}disconnectedCallback(){this.removeEventListener(`click`,this.#p),this.removeEventListener(`submit`,this.#o),document.removeEventListener(n,this.#a),this.#e?.()}#a=()=>this.#u(`settings`);#o=e=>e.preventDefault();#s(e){return this.querySelector(`[data-consent-row="${e}"]`)??this.#c(e)?.closest(`label`)??null}#c(e){return this.querySelector(`input[name="${e}"]`)}#l(e){let t=this.#r;if(!t)return[];if(e===`settings`){let e=i.filter(e=>this.#s(e));return e.length?e:[...i]}let n=t.get();return i.filter(e=>t.demanded().includes(e)&&!d(n,e))}#u(e){if(!this.#l(e).length)return;this.#t=e,this.#f(),this.hidden=!1,this.#n=!0;let t=this.#i;t?.isConnected&&!t.matches(`:popover-open`)&&t.showPopover()}#d(){this.#n=!1,this.#i?.hidePopover?.(),this.hidden=!0}#f(){let e=this.#r;if(!e)return;let t=this.#l(this.#t);for(let n of i){let r=this.#s(n);r&&(r.hidden=!t.includes(n));let i=this.#c(n);i&&(i.checked=e.granted(n))}this.#i?.classList.toggle(`consent--single`,t.length<2)}#p=e=>{let t=this.#r,n=e.target?.closest?.(`[data-consent-accept],[data-consent-reject],[data-consent-save]`);if(!t||!n)return;e.preventDefault();let r=this.#l(this.#t);n.hasAttribute(`data-consent-accept`)?t.set(this.#m(r,()=>!0)):n.hasAttribute(`data-consent-reject`)?t.set(this.#m(r,()=>!1)):t.set(this.#m(r,e=>this.#c(e)?.checked===!0)),this.#d()};#m(e,t){let n={};for(let r of e)n[r]=t(r);return n}};customElements.get(`wc-consent`)||customElements.define(`wc-consent`,V);export{e as CATEGORIES,t as CONSENT_EVENT,n as CONSENT_OPEN_EVENT,r as COOKIE_NAME,z as consent};