# Menca Stone & Restoration LLC — website Static site. No build step, no dependencies. Two things in here: ``` index.html the whole site assets/menca-logo.png the logo (also used as the favicon) ``` --- ## Publish it (GitHub → Cloudflare Pages) **1. Put it on GitHub** 1. github.com → **New repository** → name it `menca-stone-site` → Public → Create. 2. On the new repo page click **uploading an existing file**. 3. Drag in `index.html` **and the `assets` folder**. Commit. **2. Connect Cloudflare Pages** 1. dash.cloudflare.com → **Workers & Pages** → **Create** → **Pages** → **Connect to Git**. 2. Authorize GitHub, pick `menca-stone-site`. 3. Build settings — leave everything empty: - Framework preset: **None** - Build command: *(blank)* - Build output directory: `/` 4. **Save and Deploy.** You get a live URL like `menca-stone-site.pages.dev` in under a minute. **3. Point your domain at it** 1. Buy the domain (Cloudflare Registrar is easiest since it's the same dashboard — or Namecheap). 2. In your Pages project → **Custom domains** → **Set up a domain** → enter `mencastone.com`. 3. If the domain is registered at Cloudflare it wires itself up. If it's elsewhere, Cloudflare shows you the DNS record to paste at your registrar. 4. HTTPS is automatic and free. **Updating the site later:** replace `index.html` in the GitHub repo (edit in place with the pencil icon, or upload a new file). Cloudflare redeploys automatically within ~30 seconds. --- ## Before you go live **Replace the placeholder contact info.** Open `index.html` and search for these — each appears a few times: - `info@mencastone.com` - `(201) 000-0000` and `+12010000000` (the `tel:` link — digits only, no spaces) - `+1-201-000-0000` in the Google business info block near the bottom **Add real photos.** Put image files in `assets/`, then find the `EDIT YOUR JOBS HERE` block near the bottom of `index.html`: ```js {title:'Marble Floor Restoration', tag:'Marble · Ramsey, NJ', cap:'Etching removed, honed & polished', before:'assets/floor-before.jpg', after:'assets/floor-after.jpg'}, ``` Fill in `before` and `after` with your file names. Any pair left as `''` keeps the stone-texture placeholder, so you can add jobs one at a time. `HERO` right below it is the big portrait slider at the top. Photo tips: shoot before and after from the **same spot and angle**. Work-grid sliders are square, the hero is portrait. Resize to about 1600px wide and save as JPG so the page stays fast. **Photos already in place:** `counter-before.jpg` / `counter-after.jpg` (hero slider + the Kitchen Countertop card) and `technician.jpg` (Why Menca panel). The other five work cards are still stone-texture placeholders — send more pairs and they get filled the same way. **The logo** (`assets/menca-logo-mark.png`) has had its black background removed so it sits cleanly on the dark page. `menca-logo.png` is the untouched original, kept as the favicon. --- ## The estimate form It currently opens the visitor's own email app with all their answers pre-filled — works on any host with zero setup, but the visitor has to press send. If you'd rather have submissions land in your inbox automatically (and let people attach photos directly), the simplest upgrade is **Formspree** or **Netlify Forms** — both are free at small volume and are a one-line change to the form tag. Ask and I'll wire it up. Menca Stone & Restoration LLC | Marble, Granite & Travertine Restoration — NJ & NY
Request an Estimate
New York City & New Jersey

Natural stone,
restored to its original life.

Menca Stone & Restoration brings marble, granite and travertine surfaces back to their best — polishing, honing, and repair work for homes and businesses across New Jersey and New York.

Request a Free Estimate View Our Work
NJ / NYService Region
Res. + Comm.Project Types
Licensed LLCRamsey, NJ
Before After
Marble island — honed, polished & sealed
What We Do

Restoration services built around natural stone.

Every surface is different — we assess the stone, the wear, and the finish before recommending a process.

01

Marble Restoration

Full restoration of marble floors, countertops and vanities — removing dullness, etching and years of wear.

02

Granite Restoration

Restoring shine and structural integrity to granite countertops and surfaces without damaging the stone.

03

Travertine Repair

Filling, leveling and refinishing travertine — indoors and out — for a smooth, consistent surface.

04

Stone Polishing

Machine polishing that brings back natural shine and reflectivity across marble, granite and travertine.

05

Crack & Chip Repair

Precision repair of cracks, chips and cosmetic damage, blended to match the surrounding stone.

06

Honing & Refinishing

Correcting etching, scratches and uneven texture to restore a smooth, even finish.

Our Work

Real jobs. Real transformations.

Drag each slider to see the surface before Menca arrived, and after the restoration was complete.

Why Menca

We restore the beauty of natural stone through hands-on restoration, polishing, repair, honing and refinishing — with the same level of care whether it's one countertop or a full commercial floor.

  • ✓Specialists, not generalists. Stone restoration is what we do — not a side service alongside general contracting.
  • ✓Residential & commercial experience. From home countertops to commercial lobbies and floors.
  • ✓Straightforward estimates. Send photos of your surface and we'll walk you through the process and cost.
  • ✓Local to NJ & NY. Based in Bergen County and serving the surrounding region.
Where We Work

Serving homeowners and businesses across Bergen County & the surrounding region.

Based in Ramsey, NJ, Menca Stone & Restoration travels throughout Northern New Jersey and into the New York area for residential and commercial projects.

Ramsey, NJ Bergen County Northern NJ Rockland County, NY Greater NYC Area
Get In Touch

Have a stone surface that needs restoring?

Tell us about the surface and what you're looking to have done. We'll follow up to discuss your project and provide an estimate.

TEL
Call or Text(201) 000-0000
EML
LOC
Based InRamsey, NJ — serving NJ & NY
SOC
We typically respond within 1 business day.

Have photos of the surface? Attach them to the email that opens, or send them to info@mencastone.com.

Menca Stone & Restoration LLC | Premium Stone Restoration — NJ & NY
MENCA
Stone & Restoration
Free Estimate
Bergen County & Northern NJ

Natural stone,
restored to its original life.

Menca Stone & Restoration brings marble, granite and travertine surfaces back to their best — polishing, honing, and repair work for homes and businesses across New Jersey and New York.

Request a Free Estimate View Our Work
NJ / NYService Region
Res. + Comm.Project Types
100%Craftsmanship
Polished & sealed marble floor
Before After
What We Do

Restoration services built around natural stone.

Every surface is different — we assess the stone, the wear, and the finish before recommending a process.

01

Marble Restoration

Full restoration of marble floors, countertops and vanities — removing dullness, etching and years of wear.

02

Granite Restoration

Restoring shine and structural integrity to granite countertops and surfaces without damaging the stone.

03

Travertine Repair

Filling, leveling and refinishing travertine — indoors and out — for a smooth, consistent surface.

04

Stone Polishing

Machine polishing that brings back natural shine and reflectivity across marble, granite and travertine.

05

Crack & Chip Repair

Precision repair of cracks, chips and cosmetic damage, blended to match the surrounding stone.

06

Honing & Refinishing

Correcting etching, scratches and uneven texture to restore a smooth, even finish.

Our Work

Real jobs. Real transformations.

Drag each slider to see the surface before Menca arrived, and after the restoration was complete.

Add photo: technician at work
Why Menca

We restore the beauty of natural stone through hands-on restoration, polishing, repair, honing and refinishing — with the same level of care whether it's one countertop or a full commercial floor.

  • ✓Specialists, not generalists. Stone restoration is what we do — not a side service alongside general contracting.
  • ✓Residential & commercial experience. From home countertops to commercial lobbies and floors.
  • ✓Straightforward estimates. Send photos of your surface and we'll walk you through the process and cost.
  • ✓Local to NJ & NY. Based in Bergen County and serving the surrounding region.
Where We Work

Serving homeowners and businesses across Bergen County & the surrounding region.

Based in Ramsey, NJ, Menca Stone & Restoration travels throughout Northern New Jersey and into the New York area for residential and commercial projects.

Ramsey, NJ Bergen County Northern NJ Rockland County, NY Greater NYC Area
Get In Touch

Have a stone surface that needs restoring?

Send a few photos of the surface and tell us what you're looking to have done. We'll follow up to discuss your project and provide an estimate.

Call or Text(___) ___-____ — add Menca's number
Emailinfo@mencastone.com — update with real address
Based InRamsey, NJ — serving NJ & NY

Click to upload or drag photos of the surface here

We typically respond within 1 business day.
Menca Stone & Restoration LLC | Stone Restoration — NJ & NY
REQUEST AN ESTIMATE Menca Stone & Restoration LLC
New York city & New jersey 

Natural stone,
restored to its original life.

Menca Stone & Restoration brings marble, granite and travertine surfaces back to their best — polishing, honing, and repair work for homes and businesses across New Jersey and New York.

NJ / NY Service Region
Res. + Comm. Project Types
Licensed LLC Ramsey, NJ
Before After
⟷
Marble island — honed, polished & sealed
What We Do

Restoration services built around natural stone.

Every surface is different — we assess the stone, the wear, and the finish before recommending a process.

{{ s.num }}

{{ s.title }}

{{ s.body }}
Our Work

Real jobs. Real transformations.

Drag each slider to see the surface before Menca arrived, and after the restoration was complete.

Before After
⟷
{{ job.cap }}

{{ job.title }}

{{ job.tag }}
Why Menca

We restore the beauty of natural stone through hands-on restoration, polishing, repair, honing and refinishing — with the same level of care whether it's one countertop or a full commercial floor.

  • ✓ {{ r.head }} {{ r.body }}
Where We Work

Serving homeowners and businesses across Bergen County & the surrounding region.

Based in Ramsey, NJ, Menca Stone & Restoration travels throughout Northern New Jersey and into the New York area for residential and commercial projects.

{{ t }}
Get In Touch

Have a stone surface that needs restoring?

Tell us about the surface and what you're looking to have done. We'll follow up to discuss your project and provide an estimate.

TEL
Call or Text {{ phone }}
EML
Email {{ email }}
LOC
Based In Ramsey, NJ — serving NJ & NY
SOC
Instagram @mencastone.llc
{{ note }}

Have photos of the surface? Attach them to the email that opens, or send them to {{ email }}.

 // GENERATED from dc-runtime/src/*.ts — do not edit. Rebuild with `cd dc-runtime && bun run build`. "use strict"; (() => { var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); // src/react.ts function getReact() { const R = window.React; if (!R) throw new Error("dc-runtime: window.React is not available yet"); return R; } function getReactDOM() { const RD = window.ReactDOM; if (!RD) throw new Error("dc-runtime: window.ReactDOM is not available yet"); return RD; } var h = ((...args) => getReact().createElement( ...args )); // src/parse.ts function parseDcDocument(doc) { const dc = doc.querySelector("x-dc"); if (!dc) return null; const scriptEl = doc.querySelector("script[data-dc-script]"); const { props, preview } = parseDataProps( scriptEl?.getAttribute("data-props") ?? null ); return { template: dc.innerHTML, js: scriptEl ? scriptEl.textContent || "" : "", props, preview }; } function parseDcText(src) { const openMatch = /]*)?>/.exec(src); if (!openMatch) return null; const close = src.lastIndexOf(""); if (close === -1 || close < openMatch.index) return null; const template = src.slice(openMatch.index + openMatch[0].length, close); const doc = new DOMParser().parseFromString(src, "text/html"); const scriptEl = doc.querySelector("script[data-dc-script]"); const { props, preview } = parseDataProps( scriptEl?.getAttribute("data-props") ?? null ); return { template, js: scriptEl ? scriptEl.textContent || "" : "", props, preview }; } function parseDataProps(raw) { if (!raw) return { props: null, preview: null }; let parsed; try { parsed = JSON.parse(raw); } catch { return { props: null, preview: null }; } if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) { return { props: null, preview: null }; } const obj = parsed; const preview = obj.$preview && typeof obj.$preview === "object" ? obj.$preview : null; const rest = {}; for (const k of Object.keys(obj)) { if (k[0] !== "$") rest[k] = obj[k]; } return { props: Object.keys(rest).length ? rest : null, preview }; } function dcNameFromPath(pathname) { let p = pathname || ""; try { p = decodeURIComponent(p); } catch { } const base = p.split("/").pop() || "Root"; return base.replace(/\.dc\.html$/, "").replace(/\.html?$/, "") || "Root"; } // src/boot.ts var BASE_CSS = ` .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent); border:1px solid color-mix(in srgb,currentColor 50%,transparent); border-radius:2px;box-sizing:border-box;overflow:hidden} @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}} html.sc-dc-streaming .sc-placeholder, html.sc-dc-streaming .sc-interp.sc-missing{position:relative; background:color-mix(in srgb,currentColor 5%,transparent); border-color:transparent} html.sc-dc-streaming .sc-placeholder::before, html.sc-dc-streaming .sc-interp.sc-missing::before{content:''; position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%); background-size:400% 100%;animation:sc-shine 1.4s ease infinite} html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before, html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none; background:color-mix(in srgb,currentColor 8%,transparent)} .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace; color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word} .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden; vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5); border-radius:2px;box-sizing:border-box;color:transparent; user-select:none} .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em; color:color-mix(in srgb,currentColor 50%,transparent); background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px; padding:0 3px} .sc-host.sc-has-error{position:relative} .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch; padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace; border-radius:4px;white-space:pre-wrap;pointer-events:none} /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts \u2014 keep both in sync until dc-runtime regains a build step. */ @media print { @page { margin: 0.5cm; } figure, table { break-inside: avoid; } #dc-root, #dc-root > .sc-host { height: auto; } *, *::before, *::after { print-color-adjust: exact; -webkit-print-color-adjust: exact; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; animation-delay: -99s !important; animation-duration: .001s !important; animation-iteration-count: 1 !important; animation-fill-mode: both !important; animation-play-state: running !important; transition-duration: 0s !important; } } `; var FULL_PAGE_CSS = "html,body{height:100%;margin:0}#dc-root,#dc-root>.sc-host{height:100%}"; function rootNameForDocument(doc, loc) { let bootPath = loc.pathname || ""; if (!/\.dc\.html?$/i.test(safeDecode(bootPath))) { try { bootPath = new URL(doc.baseURI || "/").pathname; } catch { } } return dcNameFromPath(bootPath); } function safeDecode(s) { try { return decodeURIComponent(s); } catch { return s; } } function boot(runtime, doc = document) { const parsed = parseDcDocument(doc); if (!parsed) return null; const React = getReact(); const rootName = rootNameForDocument(doc, location); runtime.markFetched(rootName); runtime.setRootName(rootName); runtime.adoptParsed(rootName, parsed); if (!window.__resources) { fetch(location.href).then((res) => res.ok ? res.text() : "").then((t) => { const raw = t ? parseDcText(t) : null; if (raw?.template) runtime.updateHtml(rootName, raw.template); }).catch(() => { }); } const dc = doc.querySelector("x-dc"); const hostEl = doc.createElement("div"); hostEl.id = "dc-root"; dc.replaceWith(hostEl); if (!parsed.preview) { const s = doc.createElement("style"); s.textContent = FULL_PAGE_CSS; doc.head.appendChild(s); } const Root = runtime.getDC(rootName); const entry = runtime.registry.get(rootName); function StandaloneRoot() { const [, setTick] = React.useState(0); React.useEffect(() => { const sub = () => setTick((n) => n + 1); entry.subs.add(sub); return () => { entry.subs.delete(sub); }; }, []); const defaults = React.useMemo(() => { const d = {}; for (const k in entry.propsMeta || {}) { const v = entry.propsMeta?.[k]?.default; if (v !== void 0) d[k] = v; } return d; }, [entry.propsMeta]); return h(Root, { ...defaults, ...entry.propOverrides || {} }); } const ReactDOM = getReactDOM(); if (ReactDOM.createRoot) ReactDOM.createRoot(hostEl).render(h(StandaloneRoot)); else ReactDOM.render(h(StandaloneRoot), hostEl); return rootName; } // src/expr.ts var IDENT_RE = /^[A-Za-z_$][A-Za-z0-9_$]*/; var NUMBER_RE = /^-?\d+(\.\d+)?$/; function resolve(vals, src) { const expr = String(src).trim(); if (!expr) return void 0; if (expr[0] === "(" && expr[expr.length - 1] === ")" && parensWrapWhole(expr)) { return resolve(vals, expr.slice(1, -1)); } const eq = findTopLevelEquality(expr); if (eq) { const lv = resolve(vals, expr.slice(0, eq.index)); const rv = resolve(vals, expr.slice(eq.index + eq.op.length)); switch (eq.op) { case "===": return lv === rv; case "!==": return lv !== rv; case "==": return lv == rv; default: return lv != rv; } } if (expr[0] === "!") return !resolve(vals, expr.slice(1)); if (expr === "true") return true; if (expr === "false") return false; if (expr === "null") return null; if (expr === "undefined") return void 0; if (NUMBER_RE.test(expr)) return Number(expr); if (expr.length >= 2 && (expr[0] === '"' || expr[0] === "'") && expr[expr.length - 1] === expr[0]) { return expr.slice(1, -1); } return resolvePath(vals, expr); } function parensWrapWhole(expr) { let depth = 0; for (let i = 0; i < expr.length - 1; i++) { if (expr[i] === "(") depth++; else if (expr[i] === ")") { depth--; if (depth === 0) return false; } } return true; } function findTopLevelEquality(expr) { let depth = 0; for (let i = 0; i < expr.length; i++) { const c = expr[i]; if (c === "[" || c === "(") depth++; else if (c === "]" || c === ")") depth--; else if (depth === 0 && (c === "=" || c === "!") && expr[i + 1] === "=") { if (i > 0 && (expr[i - 1] === "=" || expr[i - 1] === "!")) continue; if (!expr.slice(0, i).trim()) continue; const op = expr[i + 2] === "=" ? c + "==" : c + "="; return { index: i, op }; } } return null; } function resolvePath(vals, expr) { const head = expr.match(IDENT_RE); if (!head) return void 0; let cur = vals == null ? void 0 : vals[head[0]]; let i = head[0].length; while (i < expr.length) { if (expr[i] === ".") { const m = expr.slice(i + 1).match(IDENT_RE) || expr.slice(i + 1).match(/^\d+/); if (!m) return void 0; cur = cur == null ? void 0 : cur[m[0]]; i += 1 + m[0].length; } else if (expr[i] === "[") { let depth = 1; let j = i + 1; while (j < expr.length && depth > 0) { if (expr[j] === "[") depth++; else if (expr[j] === "]") { depth--; if (depth === 0) break; } j++; } if (depth !== 0) return void 0; const key = resolve(vals, expr.slice(i + 1, j)); cur = cur == null ? void 0 : cur[key]; i = j + 1; } else { return void 0; } } return cur; } // src/encode.ts var CAMEL_ATTR = "sc-camel-"; var INLINE_TEXT_TAGS = new Set( "a abbr b bdi bdo br cite code del dfn em i ins kbd mark q s samp small span strike strong sub sup u var wbr".split( " " ) ); var RAW_WRAP = { select: "sc-raw-select", table: "sc-raw-table", tbody: "sc-raw-tbody", thead: "sc-raw-thead", tfoot: "sc-raw-tfoot", tr: "sc-raw-tr", td: "sc-raw-td", th: "sc-raw-th", caption: "sc-raw-caption" }; var RAW_UNWRAP = Object.fromEntries( Object.entries(RAW_WRAP).map(([k, v]) => [v, k]) ); var EVENT_MAP = { onclick: "onClick", onchange: "onChange", oninput: "onInput", onsubmit: "onSubmit", onkeydown: "onKeyDown", onkeyup: "onKeyUp", onkeypress: "onKeyPress", onmousedown: "onMouseDown", onmouseup: "onMouseUp", onmouseenter: "onMouseEnter", onmouseleave: "onMouseLeave", onfocus: "onFocus", onblur: "onBlur", ondoubleclick: "onDoubleClick", oncontextmenu: "onContextMenu", onmousemove: "onMouseMove", onmouseover: "onMouseOver", onmouseout: "onMouseOut", onpointerdown: "onPointerDown", onpointerup: "onPointerUp", onpointermove: "onPointerMove", onpointerenter: "onPointerEnter", onpointerleave: "onPointerLeave", onpointercancel: "onPointerCancel", onpointerover: "onPointerOver", onpointerout: "onPointerOut", ongotpointercapture: "onGotPointerCapture", onlostpointercapture: "onLostPointerCapture", ontouchstart: "onTouchStart", ontouchend: "onTouchEnd", ontouchmove: "onTouchMove", ontouchcancel: "onTouchCancel", ondragstart: "onDragStart", ondragend: "onDragEnd", ondragenter: "onDragEnter", ondragleave: "onDragLeave", ondragover: "onDragOver", onanimationstart: "onAnimationStart", onanimationend: "onAnimationEnd", onanimationiteration: "onAnimationIteration", ontransitionend: "onTransitionEnd" }; var ATTRS = `(?:[^>"']|"[^"]*"|'[^']*')*`; var IMPORT_SELF_CLOSE_RE = new RegExp( "<(x-import|dc-import)(" + ATTRS + ")/>", "gi" ); var CAMEL_ATTR_RE = /(\s)([a-z]+[A-Z][A-Za-z0-9]*)(\s*=)/g; function encodeCamelAttrs(html) { return html.replace( CAMEL_ATTR_RE, (_, sp, name, eq) => sp + CAMEL_ATTR + name.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + eq ); } function encodeCase(html) { html = html.replace( IMPORT_SELF_CLOSE_RE, (_, t, a) => "<" + t + a + ">" ); html = html.replace(/)/gi, "/gi, ""); html = encodeCamelAttrs(html); for (const [real, alias] of Object.entries(RAW_WRAP)) { html = html.replace( new RegExp("(])", "gi"), "$1" + alias ); } return html; } function kebabToCamel(s) { return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase()); } function cssToObj(css) { const o = {}; for (const decl of css.split(";")) { const i = decl.indexOf(":"); if (i < 0) continue; const prop = decl.slice(0, i).trim(); o[prop.startsWith("--") ? prop : kebabToCamel(prop)] = decl.slice(i + 1).trim(); } return o; } function compileAttr(raw) { const whole = raw.match(/^\s*\{\{([\s\S]+?)\}\}\s*$/); if (whole) { const path = whole[1]; return (vals) => resolve(vals, path); } if (raw.includes("{{")) { const parts = raw.split(/\{\{([\s\S]+?)\}\}/g); return (vals) => parts.map((s, i) => i & 1 ? resolve(vals, s) ?? "" : s).join(""); } return () => raw; } // src/compile.ts function collectProps(node, kind, host) { const propGetters = []; const pseudoClasses = []; let hintSize = null; for (const { name, value } of [...node.attributes]) { if (name === "sc-name" || name === "data-dc-tpl") continue; let key = name; if (key.startsWith(CAMEL_ATTR)) key = kebabToCamel(key.slice(CAMEL_ATTR.length)); if (key === "hint-size") { hintSize = value; continue; } if (key.startsWith("style-")) { pseudoClasses.push(host.pseudoClass(key.slice(6), value)); continue; } if (kind !== "dom") { if (key.includes("-") && !(kind === "x-import" && (key.startsWith("aria-") || key.startsWith("data-")))) key = kebabToCamel(key); } else { if (key === "class") key = "className"; else if (key === "for") key = "htmlFor"; else if (key.startsWith("on")) key = EVENT_MAP[key] || "on" + key[2].toUpperCase() + key.slice(3); } propGetters.push([key, compileAttr(value)]); } return { propGetters, pseudoClasses, hintSize }; } var HOST_STYLE_PROPS = /* @__PURE__ */ new Set([ "position", "left", "right", "top", "bottom", "inset", "width", "height", "z-index", "transform" ]); function hostPositionStyle(style) { const all = typeof style === "string" ? cssToObj(style) : style != null && typeof style === "object" ? style : null; if (!all) return void 0; const out = {}; for (const [k, v] of Object.entries(all)) { const kebab = k.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()); if (HOST_STYLE_PROPS.has(kebab)) out[k] = v; } return Object.keys(out).length ? out : void 0; } function compileTemplate(html, host) { const tpl = document.createElement("template"); //! nosemgrep: direct-inner-html-assignment tpl.innerHTML = encodeCase(html); let tplN = 0; (function stamp(node) { if (node.nodeType === Node.ELEMENT_NODE) { node.setAttribute("data-dc-tpl", String(tplN++)); } for (const c of node.childNodes) stamp(c); })(tpl.content); const builders = walkChildren(tpl.content, host); const render = ((vals, ctx) => builders.map((b, i) => b(vals || {}, ctx, i))); render.__annotated = tpl.innerHTML; return render; } function walkChildren(node, host) { return [...node.childNodes].map((c) => walk(c, host)).filter((b) => b != null); } var SLIDE_ID_VALUE_RE = /^[0-9a-f]{8}$/; var DECK_CONTROL_FLOW_RE = /^(sc-if|sc-for|sc-else|dc-import|x-import)$/; var DECK_AUX_RE = /^(template|script|style|sc-helmet|helmet)$/; function isDeckMountTag(el) { if (el.localName === "deck-stage") return true; return el.localName === "x-import" && (el.getAttribute("component-from-global-scope") || "") === "deck-stage"; } function walkDeckChildren(el, host) { const pairs = [...el.childNodes].map((c) => ({ c, b: walk(c, host) })).filter((p) => p.b !== null); const kids = pairs.map((p) => p.b); const seen = /* @__PURE__ */ new Set(); const wsSeen = /* @__PURE__ */ new Map(); const keys = []; const nextSlideId = new Array(pairs.length); { let upcoming = null; for (let j = pairs.length - 1; j >= 0; j--) { const n = pairs[j].c; if (n.nodeType === Node.ELEMENT_NODE) { const t = n.localName; upcoming = !DECK_AUX_RE.test(t) && !DECK_CONTROL_FLOW_RE.test(t) ? n.getAttribute("data-om-slide-id") : null; } nextSlideId[j] = upcoming; } } for (let j = 0; j < pairs.length; j++) { const { c } = pairs[j]; if (c.nodeType === Node.TEXT_NODE) { if ((c.nodeValue ?? "").trim() === "") { const base = nextSlideId[j] ? "omid-ws:" + nextSlideId[j] : "omid-ws:aux"; const n = wsSeen.get(base) ?? 0; wsSeen.set(base, n + 1); keys.push(n === 0 ? base : base + ":" + n); continue; } return { kids, keys: null }; } if (c.nodeType !== Node.ELEMENT_NODE) { keys.push(j); continue; } const child = c; const tag = child.localName; if (DECK_AUX_RE.test(tag)) { keys.push(j); continue; } if (DECK_CONTROL_FLOW_RE.test(tag)) return { kids, keys: null }; const v = child.getAttribute("data-om-slide-id"); if (!v || !SLIDE_ID_VALUE_RE.test(v) || seen.has(v)) { return { kids, keys: null }; } seen.add(v); keys.push("omid:" + v); } return { kids, keys }; } function renderDeckKids(kids, kidKeys, vals, ctx) { return kids.map((b, j) => { const k = kidKeys ? kidKeys[j] : j; const out = b(vals, ctx, k); return kidKeys != null && typeof out === "string" ? h(getReact().Fragment, { key: k }, out) : out; }); } function walk(node, host) { if (node.nodeType === Node.TEXT_NODE) return walkText(node); if (node.nodeType !== Node.ELEMENT_NODE) return null; const el = node; const tag = el.tagName.toLowerCase(); if (tag === "sc-for") return walkFor(el, host); if (tag === "sc-if") return walkIf(el, host); if (tag === "x-import") return walkXImport(el, host); if (tag === "sc-helmet") return host.helmet(el); if (tag === "dc-import") return walkComponent(el, host); return walkElement(el, host); } var warnedHoles = /* @__PURE__ */ new Set(); function warnUnresolved(ctx, what) { const key = (ctx?.__name || "?") + "\0" + what; if (warnedHoles.has(key)) return; warnedHoles.add(key); console.warn("[dc-runtime] " + (ctx?.__name || "template") + ": " + what); } function walkText(node) { const txt = node.nodeValue ?? ""; if (!txt.includes("{{")) { if (!txt.trim() && !txt.includes(" ")) return null; return () => txt; } const parts = txt.split(/\{\{([\s\S]+?)\}\}/g); return (vals, ctx, key) => h( getReact().Fragment, { key }, ...parts.map((p, i) => { if (!(i & 1)) return p; const v = resolve(vals, p); if (v === void 0) { if (!ctx?.__streamingNow) { if (document.body?.hasAttribute("data-dc-editor-on")) { return h( "span", { key: i, className: "sc-interp sc-unresolved" }, "{{ " + p.trim() + " }}" ); } warnUnresolved( ctx, "{{ " + p.trim() + " }} never resolved \u2014 rendered as empty" ); return null; } return h( "span", { key: i, className: "sc-interp sc-missing" }, p.trim() ); } if (getReact().isValidElement(v) || Array.isArray(v)) { return h(getReact().Fragment, { key: i }, v); } if (v === null || typeof v === "boolean") return null; return h("span", { key: i, className: "sc-interp" }, String(v)); }) ); } function walkFor(el, host) { const listGet = compileAttr(el.getAttribute("list") || ""); const asName = el.getAttribute("as") || "item"; const hintN = parseInt(el.getAttribute("hint-placeholder-count") || "0", 10); const kids = walkChildren(el, host); const listSrc = el.getAttribute("list") || ""; return (vals, ctx, key) => { let list = listGet(vals); if (!Array.isArray(list)) { if (!ctx?.__streamingNow) { if (list !== void 0 && list !== null) { warnUnresolved( ctx, 'sc-for list="' + listSrc + '" is not an array (' + typeof list + ")" ); } list = []; } else { list = hintN > 0 ? Array(hintN).fill(void 0) : []; } } return h( getReact().Fragment, { key }, list.map((item, i) => { const sub = { ...vals, [asName]: item, $index: i }; return h( getReact().Fragment, { key: i }, kids.map((b, j) => b(sub, ctx, j)) ); }) ); }; } function walkIf(el, host) { const valGet = compileAttr(el.getAttribute("value") || ""); const hintRaw = el.getAttribute("hint-placeholder-val"); const hintGet = hintRaw != null ? compileAttr(hintRaw) : null; const kids = walkChildren(el, host); return (vals, ctx, key) => { let v = valGet(vals); if (v === void 0 && hintGet && ctx?.__streamingNow) v = hintGet(vals); return v ? h( getReact().Fragment, { key }, kids.map((b, j) => b(vals, ctx, j)) ) : null; }; } function walkComponent(el, host) { const name = el.getAttribute("name") || el.getAttribute("component") || ""; el.removeAttribute("name"); el.removeAttribute("component"); const tplId = el.getAttribute("data-dc-tpl"); const styleRaw = el.getAttribute("style"); el.removeAttribute("style"); const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; const { propGetters, hintSize } = collectProps(el, "dc-import", host); const kids = walkChildren(el, host); return (vals, ctx, key) => { const props = { key, __hintSize: hintSize, __tplId: tplId, __hostStyle: styleGet ? hostPositionStyle(styleGet(vals)) : void 0 }; for (const [k, g] of propGetters) { const v = g(vals); if (k === "dcProps") { if (v && typeof v === "object") Object.assign(props, v); continue; } props[k] = v; } if (kids.length) props.children = kids.map((b, j) => b(vals, ctx, j)); return h(host.component(name), props); }; } function walkXImport(el, host) { const globalNameGet = compileAttr( el.getAttribute("component-from-global-scope") || "" ); const exportNameGet = compileAttr( el.getAttribute("component") || el.getAttribute("name") || "" ); const fromRaw = el.getAttribute("from") || (el.getAttribute("component-from-global-scope") ? "" : el.getAttribute("src") || el.getAttribute("import") || ""); const urls = fromRaw.trim() ? fromRaw.trim().split(/\s+/) : []; const url = urls.length ? urls[urls.length - 1] : ""; const kindOf = (u) => /\.(jsx|tsx)(\?|#|$)/i.test(u) ? "jsx" : "js"; const tplId = el.getAttribute("data-dc-tpl"); const styleRaw = el.getAttribute("style"); el.removeAttribute("style"); const styleGet = styleRaw != null ? compileAttr(styleRaw) : null; const wrap = tplId != null || styleGet != null; const { propGetters, hintSize } = collectProps(el, "x-import", host); const hasContent = el.children.length > 0 || !!(el.textContent || "").trim(); const deckKeyed = hasContent && isDeckMountTag(el) ? walkDeckChildren(el, host) : null; const kids = deckKeyed ? deckKeyed.kids : hasContent ? walkChildren(el, host) : []; const kidKeys = deckKeyed?.keys ?? null; const urlBindable = fromRaw.includes("{{"); if (urls.length && !urlBindable) { let prev; for (const u of urls) prev = host.loadExternal(kindOf(u), u, prev); } const evalName = (g, vals) => { const v = g(vals); const s = v == null ? "" : String(v); return s.includes("{{") ? "" : s; }; return (vals, ctx, key) => { const globalName = evalName(globalNameGet, vals); const name = globalName || evalName(exportNameGet, vals); const C = !name || urlBindable ? null : globalName ? host.resolveExternalGlobal(url, globalName) : host.resolveExternal(url, name); const hostStyle = styleGet ? hostPositionStyle(styleGet(vals)) : void 0; const wrapper = wrap ? { key, className: "sc-host-x", "data-dc-tpl": tplId, style: hostStyle || { display: "contents" } } : null; if (!C) { const error = urlBindable ? "x-import `from` cannot contain {{ \u2026 }} \u2014 module URLs are resolved at parse time; use a literal URL" : host.resolveExternalError(url, name); const ph = host.placeholder({ key: wrapper ? void 0 : key, name, hintSize, error }); return wrapper ? h("div", wrapper, ph) : ph; } const props = wrapper ? {} : { key }; let unresolvedHole = false; for (const [k, g] of propGetters) { if (k === "component" || k === "componentFromGlobalScope" || k === "from") { continue; } const v = g(vals); if (v === void 0) unresolvedHole = true; if (k === "dcProps") { if (v && typeof v === "object") Object.assign(props, v); continue; } props[k] = v; } if (unresolvedHole && ctx?.__htmlStreamingNow) { const ph = host.placeholder({ key: wrapper ? void 0 : key, name, hintSize, error: null }); return wrapper ? h("div", wrapper, ph) : ph; } if (kids.length) { props.children = renderDeckKids(kids, kidKeys, vals, ctx); } return wrapper ? h("div", wrapper, h(C, props)) : h(C, props); }; } function contentKey(el) { const clone = el.cloneNode(true); for (const d of clone.querySelectorAll("*")) { while (d.attributes.length) d.removeAttribute(d.attributes[0].name); } const s = clone.innerHTML; let h2 = 5381; for (let i = 0; i < s.length; i++) h2 = (h2 << 5) + h2 + s.charCodeAt(i) | 0; return s.length + "." + (h2 >>> 0).toString(36); } var NEVER_CONTENT_KEYED = new Set( "script style textarea option title select canvas iframe video audio".split( " " ) ); var NOT_INLINE_SELECTOR = ":not(" + [...INLINE_TEXT_TAGS].join(",") + ")"; function walkElement(el, host) { const realTag = RAW_UNWRAP[el.localName] || el.localName; const tplId = el.getAttribute("data-dc-tpl"); const inlineOnly = el.childNodes.length > 0 && !NEVER_CONTENT_KEYED.has(realTag) && el.querySelector(NOT_INLINE_SELECTOR) === null; const keySuffix = inlineOnly ? "|" + contentKey(el) : ""; const { propGetters, pseudoClasses } = collectProps(el, "dom", host); const deckKeyed = isDeckMountTag(el) ? walkDeckChildren(el, host) : null; const kids = deckKeyed ? deckKeyed.kids : walkChildren(el, host); const kidKeys = deckKeyed?.keys ?? null; return (vals, ctx, key) => { const props = { key: key + keySuffix, "data-dc-tpl": tplId }; for (const [k, g] of propGetters) { let v = g(vals); if (k === "style" && typeof v === "string") v = cssToObj(v); if ((k === "value" || k === "checked") && v === void 0) { v = k === "checked" ? false : ""; } props[k] = v; } if (pseudoClasses.length) { props.className = [props.className, ...pseudoClasses].filter(Boolean).join(" "); } return h(realTag, props, ...renderDeckKids(kids, kidKeys, vals, ctx)); }; } // src/logic.ts var StreamableLogic = class { constructor(props) { __publicField(this, "props"); __publicField(this, "state", {}); /** Back-pointer to the wrapper component, installed after construction. */ __publicField(this, "__host"); this.props = props || {}; } setState(update, cb) { this.__host && this.__host.__setLogicState(update, cb); } forceUpdate() { this.__host && this.__host.forceUpdate(); } componentDidMount() { } componentDidUpdate(_prevProps) { } componentWillUnmount() { } /** The flat object the template renders against (merged over props). */ renderVals() { return {}; } }; function evalDcLogic(src) { //! nosemgrep: eval-and-function-constructor const fn = new Function( "DCLogic", "StreamableLogic", "React", src + '\n;return (typeof Component!=="undefined"&&Component)||undefined;' ); return fn(StreamableLogic, StreamableLogic, getReact()); } // src/component.ts function shallowEqual(a, b) { if (!b) return false; const ak = Object.keys(a).filter((k) => k !== "children"); const bk = Object.keys(b).filter((k) => k !== "children"); if (ak.length !== bk.length) return false; for (const k of ak) if (a[k] !== b[k]) return false; return true; } function Placeholder({ name, hintSize, streaming, error }) { const [w, hgt] = (hintSize || "100%,60px").split(","); return h( "div", { className: "sc-placeholder" + (streaming ? " sc-streaming" : ""), style: { width: w.trim(), height: hgt && hgt.trim() }, title: name }, error ? h( "div", { className: "sc-placeholder-error" }, (name ? name + ": " : "") + error ) : null ); } function hintToMin(hint) { if (!hint) return void 0; const [w, hgt] = hint.split(","); return { minWidth: w.trim(), minHeight: hgt && hgt.trim() }; } function createComponentFactory(registry, ensureFetched) { const React = getReact(); const AncestorContext = React.createContext([]); class StreamableComponent extends React.Component { constructor(props) { super(props); __publicField(this, "__name"); __publicField(this, "__sub"); __publicField(this, "__needsDidMount", false); /** Snapshot of the registry's streaming flags taken at render time — * builders read it off the RenderCtx (this) to pick placeholder vs * render-nothing for unresolved values. */ __publicField(this, "__streamingNow", false); __publicField(this, "__htmlStreamingNow", false); /** When a construct throws, remember the (class, registry.ver, props) * triple so render-time reconcile doesn't re-attempt it on every parent * re-render. A registry bump (new class, template, external module * resolving via bumpAll) changes `ver` and breaks the memo so an * env-dependent constructor can self-heal. */ __publicField(this, "__failedLogic", null); __publicField(this, "__failedUserProps", null); __publicField(this, "__failedVer", -1); /** Per-instance constructor error — kept here (not on the registry entry) * so one instance's successful construct can't hide a sibling's failure, * and a construct can never wipe an eval error `updateJs` recorded on * `r.logicError`. */ __publicField(this, "__ctorError", null); __publicField(this, "logic"); this.__name = props.__name; this.state = { __v: 0, __err: null }; this.__sub = () => { if (this.state.__err) this.setState({ __err: null }); this.forceUpdate(); }; this.__makeLogic(registry.get(this.__name).Logic, null); ensureFetched(this.__name); } /** Error-boundary hook: a render crash anywhere in this DC's subtree * (its own template, an x-import'd component, a child DC without its * own deeper boundary) lands here instead of unmounting the page. */ static getDerivedStateFromError(e) { return { __err: e instanceof Error && e.message ? e.message : String(e) }; } componentDidCatch(e, info) { console.error( "[dc-runtime] render error in <" + this.__name + ">:", e, info?.componentStack || "" ); } /** Instantiate the logic class (or the no-op base) and adopt `prevState` * over its initial state — used both at mount and on hot-swap. */ __makeLogic(Logic, prevState) { const L = Logic || StreamableLogic; try { this.logic = new L(this.__userProps()); this.__failedLogic = null; this.__failedUserProps = null; this.__ctorError = null; } catch (e) { console.error(e); this.__failedLogic = Logic; this.__failedUserProps = this.__userProps(); this.__failedVer = registry.get(this.__name).ver; this.__ctorError = this.__name + ": " + (e instanceof Error && e.message ? e.message : String(e)); this.logic = new StreamableLogic( this.__userProps() ); } this.logic.__host = this; if (prevState) this.logic.state = { ...this.logic.state || {}, ...prevState }; } /** The props the author's logic + template see — internal __-prefixed * wiring stripped. */ __userProps() { const { __name, __hintSize, __tplId, __hostStyle, ...rest } = this.props; return rest; } __setLogicState(update, cb) { const prev = this.logic.state; const patch = typeof update === "function" ? update(prev) : update; this.logic.state = { ...prev, ...patch }; this.setState((s) => ({ __v: s.__v + 1 }), cb); } /** Swap the logic instance when the registry's Logic class changed * (streaming completion, hot reload). State carries over; didMount * re-fires after the swap commits so refs exist. */ __reconcileLogic() { const r = registry.get(this.__name); const Next = r.Logic; const Cur = this.logic.constructor; if (Next === Cur || !Next && Cur === StreamableLogic || Next === this.__failedLogic && r.ver === this.__failedVer && shallowEqual(this.__userProps(), this.__failedUserProps)) { return; } if (!this.__needsDidMount) { try { this.logic.componentWillUnmount(); } catch (e) { console.error(e); } } this.__makeLogic(Next, this.logic.state); this.__needsDidMount = true; } componentDidMount() { registry.get(this.__name).subs.add(this.__sub); try { this.logic.componentDidMount(); } catch (e) { console.error(e); } } componentDidUpdate(prevProps) { this.logic.props = this.__userProps(); if (this.__needsDidMount) { if (this.state.__err || !registry.get(this.__name).tpl) return; this.__needsDidMount = false; try { this.logic.componentDidMount(); } catch (e) { console.error(e); } } else { try { this.logic.componentDidUpdate(prevProps); } catch (e) { console.error(e); } } } componentWillUnmount() { registry.get(this.__name).subs.delete(this.__sub); if (!this.__needsDidMount) { try { this.logic.componentWillUnmount(); } catch (e) { console.error(e); } } } render() { const r = registry.get(this.__name); const cls = "sc-host" + (r.htmlStreaming ? " sc-streaming-html" : "") + (r.jsStreaming ? " sc-streaming-js" : ""); const hintStyle = r.htmlStreaming ? hintToMin(this.props.__hintSize) : void 0; const hostStyle = this.props.__hostStyle || hintStyle ? { ...hintStyle || {}, ...this.props.__hostStyle || {} } : void 0; const hostBase = { className: cls, style: hostStyle, "data-sc-name": this.__name, "data-dc-tpl": this.props.__tplId }; const chain = Array.isArray(this.context) ? this.context : []; if (chain.includes(this.__name)) { const cycle = [ ...chain.slice(chain.indexOf(this.__name)), this.__name ].join(" \u2192 "); return h( "div", { ...hostBase, className: cls + " sc-has-error" }, h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize, error: "circular import: " + cycle }) ); } if (this.state.__err) { return h( "div", { ...hostBase, className: cls + " sc-has-error" }, h( "div", { className: "sc-logic-error", "data-omelette-chrome": "" }, this.__name + ": " + this.state.__err ), h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize, error: this.state.__err }) ); } this.__reconcileLogic(); if (!r.tpl) { return h( "div", hostBase, h(Placeholder, { name: this.__name, hintSize: this.props.__hintSize }) ); } const userProps = this.__userProps(); this.logic.props = userProps; let vals = userProps; let renderErr = r.logicError || this.__ctorError; try { vals = { ...userProps, ...this.logic.renderVals() || {} }; } catch (e) { console.error(e); renderErr = this.__name + ".renderVals(): " + (e instanceof Error && e.message ? e.message : String(e)); } this.__streamingNow = !!(r.htmlStreaming || r.jsStreaming); this.__htmlStreamingNow = !!r.htmlStreaming; return h( "div", { ...hostBase, className: cls + (renderErr ? " sc-has-error" : "") }, renderErr && h( "div", { className: "sc-logic-error", "data-omelette-chrome": "" }, renderErr ), h( AncestorContext.Provider, { value: [...chain, this.__name] }, r.tpl(vals, this) ) ); } } __publicField(StreamableComponent, "contextType", AncestorContext); const named = /* @__PURE__ */ new Map(); function getDC(name) { const hit = named.get(name); if (hit) return hit; function Dispatcher(p) { const [, setTick] = React.useState(0); React.useEffect(() => { const sub = () => setTick((n) => n + 1); registry.get(name).subs.add(sub); return () => { registry.get(name).subs.delete(sub); }; }, []); ensureFetched(name); return h(StreamableComponent, { ...p, __name: name }); } Dispatcher.displayName = name; named.set(name, Dispatcher); return Dispatcher; } return { getDC, StreamableComponent }; } // src/bundled.ts function bundledBlob(url) { const blobs = window.__resourceBlobs; const b = blobs ? blobs[url.split("#")[0]] : void 0; return b instanceof Blob ? b : null; } // src/cdn.ts var REACT_URL = "https://unpkg.com/react@18.3.1/umd/react.production.min.js"; var REACT_SRI = "sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z"; var REACT_DOM_URL = "https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"; var REACT_DOM_SRI = "sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1"; var BABEL_URL = "https://unpkg.com/@babel/standalone@7.29.0/babel.min.js"; var BABEL_SRI = "sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y"; function cdnScriptFor(url, sri) { const res = window.__resources; const v = res ? res[url] : void 0; return typeof v === "string" && v ? { src: v } : { src: url, integrity: sri }; } // src/external.ts var isCustomElementName = (n) => !n.includes(".") && n.includes("-"); function isRenderableType(g) { if (typeof g === "function") return !isElementClass(g); return typeof g === "object" && g !== null && typeof g.$$typeof === "symbol"; } function resolveDottedPath(root, name) { let cur = root; for (const seg of name.split(".")) { if (cur == null) return void 0; cur = cur[seg]; } return cur; } var GLOBAL_POLL_INTERVAL_MS = 50; var GLOBAL_POLL_TIMEOUT_MS = 3e4; function createExternalModules(onResolved) { const cache = /* @__PURE__ */ new Map(); let babelLoading = null; const reportedMissing = /* @__PURE__ */ new Map(); const polling = /* @__PURE__ */ new Set(); function ensureBabel() { if (window.Babel) return Promise.resolve(); if (babelLoading) return babelLoading; const babel = cdnScriptFor(BABEL_URL, BABEL_SRI); babelLoading = new Promise((res, rej) => { const s = document.createElement("script"); s.src = babel.src; if (babel.integrity) { s.integrity = babel.integrity; s.crossOrigin = "anonymous"; } s.onload = () => res(); s.onerror = rej; document.head.appendChild(s); }); return babelLoading; } const pending = /* @__PURE__ */ new Map(); function load(kind, url, after) { const existing = pending.get(url); if (existing) return existing; cache.set(url, null); console.info("[dc-runtime] x-import: loading", url, "(" + kind + ")"); const ready = Promise.all([ kind === "jsx" ? ensureBabel() : Promise.resolve(), after ?? Promise.resolve() ]); const p = ready.then(() => { const pre = bundledBlob(url); if (pre) return pre.text(); return fetch(url).then((r) => { if (!r.ok) throw new Error("HTTP " + r.status); return r.text(); }); }).then((src) => { const code = kind === "jsx" ? window.Babel.transform(src, { filename: url, presets: ["react", "typescript"] }).code : src; const module = { exports: {} }; const before = new Set(Object.keys(window)); //! nosemgrep: eval-and-function-constructor new Function("React", "module", "exports", "require", code)( getReact(), module, module.exports, () => ({}) ); const globals = {}; for (const k of Object.keys(window)) { if (!before.has(k) && typeof window[k] === "function") { globals[k] = window[k]; } } cache.set(url, { mod: module.exports, globals }); console.info( "[dc-runtime] x-import: loaded", url, "\u2014 exports:", Object.keys(module.exports), "window globals:", Object.keys(globals) ); onResolved(); }).catch((e) => { cache.set(url, { mod: {}, globals: {}, error: "failed to load: " + (e instanceof Error && e.message ? e.message : String(e)) }); console.error( "[dc-runtime] x-import: FAILED to load", url, "(" + kind + ")", e ); onResolved(); }); pending.set(url, p); return p; } function resolve2(url, name) { const entry = cache.get(url); if (!entry) return null; const { mod, globals } = entry; const C = mod && mod[name] || globals && globals[name] || typeof window !== "undefined" && window[name] || mod && mod.default; if (typeof C === "function") return C; const key = url + "\0" + name; if (!reportedMissing.has(key)) { reportedMissing.set( key, entry.error || 'no export named "' + name + '" (has: ' + Object.keys(mod).join(", ") + ")" ); console.error( "[dc-runtime] x-import: module", url, "loaded but has no component named", JSON.stringify(name), "\u2014 available exports:", Object.keys(mod), "window globals:", Object.keys(globals), ". The module must `module.exports = {" + name + "}` or set `window." + name + "`." ); } return null; } function waitForGlobal(name) { if (polling.has(name)) return; polling.add(name); const started = Date.now(); const isCE = isCustomElementName(name); const tick = () => { const found = isCE ? customElements.get(name) : isRenderableType(resolveDottedPath(window, name)); if (found) { polling.delete(name); onResolved(); return; } if (Date.now() - started >= GLOBAL_POLL_TIMEOUT_MS) { console.warn( "[dc-runtime] x-import: global", JSON.stringify(name), "never appeared on window after " + GLOBAL_POLL_TIMEOUT_MS + "ms" ); return; } setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); }; setTimeout(tick, GLOBAL_POLL_INTERVAL_MS); } function resolveGlobal(url, name) { const isCE = isCustomElementName(name); if (!url) { if (isCE) { if (customElements.get(name)) return name; waitForGlobal(name); return null; } const g2 = resolveDottedPath(window, name); if (isRenderableType(g2)) return g2; waitForGlobal(name); return null; } const entry = cache.get(url); if (!entry) return null; if (isCE && customElements.get(name)) return name; const g = entry.globals[name] ?? resolveDottedPath(window, name); if (isRenderableType(g)) return g; if (name.includes(".")) return null; const key = url + "\0global\0" + name; if (!reportedMissing.has(key)) { reportedMissing.set(key, null); if (isCE && !customElements.get(name)) { console.warn( "[dc-runtime] x-import:", url, "loaded but no custom element", JSON.stringify(name), "is registered and window." + name + " is not a function \u2014 rendering <" + name + "> as an unknown element." ); } } return name; } function getError(url, name) { const entry = cache.get(url); if (entry?.error) return entry.error; return reportedMissing.get(url + "\0" + name) || null; } return { load, resolve: resolve2, resolveGlobal, getError }; } function isElementClass(g) { try { return typeof g === "function" && typeof HTMLElement !== "undefined" && g.prototype instanceof HTMLElement; } catch { return false; } } // src/atomics.ts var ATOMIC_CSS = ( // layout ".fx{display:flex}.col{display:flex;flex-direction:column}.grid{display:grid}.ac{align-items:center}.jc{justify-content:center}.jb{justify-content:space-between}.f1{flex:1}.noshrink{flex-shrink:0}.wrap{flex-wrap:wrap}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fs11{font-size:11px}.fs12{font-size:12px}.fs13{font-size:13px}.fs14{font-size:14px}.fs15{font-size:15px}.fs16{font-size:16px}.fs20{font-size:20px}.fs22{font-size:22px}.upper{text-transform:uppercase}.tc{text-align:center}.nowrap{white-space:nowrap}.gap8{gap:8px}.gap10{gap:10px}.gap12{gap:12px}.gap16{gap:16px}.gap24{gap:24px}.m0{margin:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.posrel{position:relative}.posabs{position:absolute}.round{border-radius:50%}.ohide{overflow:hidden}.bbox{box-sizing:border-box}.pointer{cursor:pointer}.w100{width:100%}.b0{border:none}" ); // src/helmet.ts var DESIGN_DOC_MODE_RE = /]*\bname\s*=\s*["']design_doc_mode["'][^>]*\b(?:content|value)\s*=\s*["'](\w+)["']/i; var CANVAS_BG_LIGHT = "#f0eee6"; var CANVAS_BG_DARK = "#2e2c26"; function createHelmetManager(doc, isStreaming) { const mounted = /* @__PURE__ */ new Set(); const live = /* @__PURE__ */ new Map(); let designDocMode = null; let canvasStyleEl = null; let appTheme = "light"; try { const ds = doc.documentElement.dataset.theme; appTheme = ds === "dark" || ds === "light" ? ds : new URLSearchParams(doc.defaultView?.location.search ?? "").get( "theme" ) === "dark" ? "dark" : "light"; } catch { } function applyCanvasBg() { if (!canvasStyleEl) return; const bg = appTheme === "dark" ? CANVAS_BG_DARK : CANVAS_BG_LIGHT; canvasStyleEl.textContent = `html,body{background:${bg}}#dc-root>.sc-host{position:relative}`; } function postDesignMode(mode) { if (window.parent === window) return; try { window.parent.postMessage({ type: "__dc_design_mode", mode }, "*"); } catch { } } function setDesignDocMode(mode) { if (mode === designDocMode) return; designDocMode = mode; postDesignMode(mode); if (mode === "canvas") { doc.documentElement.setAttribute("data-dc-canvas", ""); canvasStyleEl = doc.createElement("style"); canvasStyleEl.setAttribute("data-dc-canvas", ""); applyCanvasBg(); doc.head.appendChild(canvasStyleEl); } else { doc.documentElement.removeAttribute("data-dc-canvas"); canvasStyleEl?.remove(); canvasStyleEl = null; } } window.addEventListener("message", (e) => { const type = e.data && e.data.type; if (type === "__dc_theme") { const t = e.data.theme; if (t === "light" || t === "dark") { appTheme = t; applyCanvasBg(); } return; } if (!designDocMode || type !== "__dc_probe") return; postDesignMode(designDocMode); }); function compile(node) { const raw = [...node.children]; const helmetClosed = node.nextSibling != null || node.parentNode?.nextSibling != null; if (node.hasAttribute("data-dc-atomics") && !mounted.has("__dc-atomics")) { mounted.add("__dc-atomics"); const el = doc.createElement("style"); el.id = "__dc-atomics"; el.textContent = ATOMIC_CSS; doc.head.appendChild(el); } return (_vals, ctx) => { const name = ctx && ctx.__name || ""; const streaming = !!(name && isStreaming(name)); for (let i = 0; i < raw.length; i++) { const child = raw[i]; const tag = child.tagName; const mayBePartial = streaming && !helmetClosed && i === raw.length - 1; if (tag === "SCRIPT") { if (mayBePartial) continue; const key = "SCRIPT|" + (child.getAttribute("src") || child.textContent || ""); if (mounted.has(key)) continue; mounted.add(key); const el = doc.createElement("script"); for (const { name: an, value } of [...child.attributes]) el.setAttribute(an, value); if (child.textContent) el.textContent = child.textContent; doc.head.appendChild(el); } else if (tag === "LINK" || tag === "META") { if (mayBePartial) continue; const key = tag + "|" + (child.getAttribute("href") || child.getAttribute("src") || child.outerHTML); if (mounted.has(key)) continue; mounted.add(key); if (tag === "LINK") { const rel = (child.getAttribute("rel") || "").toLowerCase().split(/\s+/); const href = (child.getAttribute("href") || "").trim(); const res = window.__resources; const pre = res && rel.includes("stylesheet") && !rel.includes("alternate") ? res[href] : void 0; const blob = typeof pre === "string" && pre ? bundledBlob(pre) : null; if (blob) { const el = doc.createElement("style"); if (child.hasAttribute("disabled")) { el.setAttribute("media", "not all"); } else if (child.getAttribute("media")) { el.setAttribute("media", child.getAttribute("media")); } if (child.getAttribute("title")) el.setAttribute("title", child.getAttribute("title")); void blob.text().then((css) => { el.textContent = css; }); doc.head.appendChild(el); continue; } } doc.head.appendChild(child.cloneNode(true)); } else { const key = name + "|" + i; let el = live.get(key); if (!el || el.tagName !== tag) { if (el) el.remove(); el = doc.createElement(tag.toLowerCase()); live.set(key, el); doc.head.appendChild(el); } for (const { name: an, value } of [...child.attributes]) { if (el.getAttribute(an) !== value) el.setAttribute(an, value); } if (el.textContent !== child.textContent) el.textContent = child.textContent; } } return null; }; } return { compile, setDesignDocMode }; } // src/pseudo.ts function scanUnquotedUrl(css, i) { if (css[i] !== "u" && css[i] !== "U" || css.slice(i, i + 4).toLowerCase() !== "url(" || /[a-z0-9_-]/i.test(css[i - 1] ?? "")) { return -1; } let j = i + 4; while (j < css.length && /\s/.test(css[j])) j++; if (css[j] === '"' || css[j] === "'") return -1; while (j < css.length && css[j] !== ")") { if (css[j] === "\\") j++; j++; } return j < css.length ? j + 1 : css.length; } function stripComments(css) { let out = ""; let quote = ""; for (let i = 0; i < css.length; i++) { const c = css[i]; if (quote) { if (c === "\\") { out += c + (css[i + 1] ?? ""); i++; continue; } if (c === quote) quote = ""; out += c; } else if (c === "'" || c === '"') { quote = c; out += c; } else if (c === "/" && css[i + 1] === "*") { const end = css.indexOf("*/", i + 2); i = end === -1 ? css.length : end + 1; out += " "; } else { const end = scanUnquotedUrl(css, i); if (end === -1) out += c; else { out += css.slice(i, end); i = end - 1; } } } return out; } function importantify(css) { css = stripComments(css); const decls = []; let start = 0; let depth = 0; let quote = ""; for (let i = 0; i < css.length; i++) { const c = css[i]; if (quote) { if (c === "\\") i++; else if (c === quote) quote = ""; } else if (c === "'" || c === '"') quote = c; else if (c === "(") depth++; else if (c === ")") depth = Math.max(0, depth - 1); else if (c === ";" && depth === 0) { decls.push(css.slice(start, i)); start = i + 1; } else { const end = scanUnquotedUrl(css, i); if (end !== -1) i = end - 1; } } decls.push(css.slice(start)); return decls.map((d) => d.trim()).filter(Boolean).map((d) => /!\s*important$/i.test(d) ? d : d + " !important").join(";"); } function createPseudoSheet(doc) { let el = null; const cache = /* @__PURE__ */ new Map(); let n = 0; return (pseudo, css) => { const k = pseudo + "|" + css; const hit = cache.get(k); if (hit) return hit; if (!el) { el = doc.createElement("style"); doc.head.appendChild(el); } const cls = "scp" + (n++).toString(36); const isPseudoElement = pseudo === "before" || pseudo === "after"; const sel = isPseudoElement ? "." + cls + "::" + pseudo : "." + cls + ":" + pseudo; el.sheet.insertRule( sel + "{" + (isPseudoElement ? css : importantify(css)) + "}", el.sheet.cssRules.length ); cache.set(k, cls); return cls; }; } // src/registry.ts function createRegistry() { const entries = /* @__PURE__ */ Object.create(null); function get(name) { return entries[name] || (entries[name] = { html: "", tpl: null, Logic: null, jsStreaming: false, htmlStreaming: false, ver: 0, subs: /* @__PURE__ */ new Set(), fetched: false }); } function bump(name) { const r = get(name); r.ver++; for (const fn of r.subs) fn(); } return { entries, get, bump, bumpAll() { for (const n in entries) bump(n); } }; } // src/runtime.ts var COMPONENT_DIR = "."; function createRuntime(doc = document) { const registry = createRegistry(); const pseudoClass = createPseudoSheet(doc); const helmet = createHelmetManager( doc, (name) => registry.get(name).htmlStreaming ); const external = createExternalModules(() => registry.bumpAll()); const factory = createComponentFactory(registry, ensureFetched); const host = { component: (name) => factory.getDC(name), placeholder: (props) => h(Placeholder, props), helmet: (node) => helmet.compile(node), loadExternal: (kind, url, after) => external.load(kind, url, after), resolveExternal: (url, name) => external.resolve(url, name), resolveExternalGlobal: (url, name) => external.resolveGlobal(url, name), resolveExternalError: (url, name) => external.getError(url, name), pseudoClass }; function ensureFetched(name) { const r = registry.get(name); if (r.fetched) return; r.fetched = true; const url = COMPONENT_DIR + "/" + encodeURIComponent(name) + ".dc.html"; const res = window.__resources; const pre = res ? res[url] : void 0; const target = typeof pre === "string" && pre ? pre : url; const blob = bundledBlob(target); (blob ? blob.text() : fetch(target).then((res2) => { if (!res2.ok) { console.error( '[dc-runtime] sibling fetch for "' + name + '" failed:', url, "returned", res2.status, "\u2014 the reference renders as an empty placeholder." ); return ""; } return res2.text(); })).then((t) => { if (!t) return; const parsed = parseDcText(t); if (!parsed) { console.error( '[dc-runtime] sibling fetch for "' + name + '":', url, "has no block \u2014 not a Design Component." ); return; } if (parsed.props) r.propsMeta = parsed.props; if (parsed.preview) r.preview = parsed.preview; if (parsed.template && !r.html) updateHtml(name, parsed.template); if (parsed.js && !r.Logic) updateJs(name, parsed.js); }).catch( (e) => console.error( '[dc-runtime] sibling fetch for "' + name + '" threw:', url, e ) ); } let rootName = null; function updateHtml(name, html) { const r = registry.get(name); r.html = html; if (name === rootName) { const mode = DESIGN_DOC_MODE_RE.exec(html)?.[1] ?? null; if (mode || !r.htmlStreaming) helmet.setDesignDocMode(mode); } try { r.tpl = compileTemplate(html, host); } catch (e) { console.error("[dc-runtime] template compile FAILED for", name, e); } registry.bump(name); } function updateJs(name, src) { const r = registry.get(name); const seq = r.jsSeq = (r.jsSeq || 0) + 1; try { const Cls = evalDcLogic(src); if (r.jsSeq !== seq) return; if (typeof Cls !== "function") { r.logicError = name + ".dc.html: