@malloy-publisher/app 0.9.14 → 0.9.15

package/dist/index.html

@@ -16,7 +16,7 @@ SPDX-License-Identifier: MIT
          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
       />
       <title>Malloy Publisher</title>
-     <script type="module" crossorigin src="/assets/index-B_gOHtqJ.js"></script>
+     <script type="module" crossorigin src="/assets/index-JQs0UPrG.js"></script>
      <link rel="stylesheet" crossorigin href="/assets/index-DUqldpo0.css">
    </head>
    <body>

package/package.json

@@ -1,7 +1,7 @@
 {
    "name": "@malloy-publisher/app",
    "description": "Malloy Publisher Console (the built-in web UI)",
-   "version": "0.9.14",
+   "version": "0.9.15",
    "type": "module",
    "main": "dist/index.cjs.js",
    "module": "dist/index.es.js",
@@ -42,7 +42,7 @@
       "test:playwright:headed": "bunx playwright test --config=playwright.config.ts --headed"
    },
    "dependencies": {
-      "@malloy-publisher/sdk": "^0.9.14",
+      "@malloy-publisher/sdk": "^0.9.15",
       "@mui/icons-material": "^7.0.2",
       "@mui/material": "^7.0.2",
       "@tanstack/react-query": "^5.59.16",

package/dist/assets/PackagePage-BBvnnh9f.js

@@ -1 +0,0 @@
-import{D as m,c as g,r as u,a9 as l,j as n,ab as p,ax as x}from"./index-B_gOHtqJ.js";import{d}from"./documentRoutes-e6eAjpuN.js";function j(){const{environmentName:e,packageName:a}=m(),s=g(),r=u.useMemo(()=>l({environmentName:e??"",packageName:a??""}),[e,a]);if(e)if(a){const t=p({environmentName:e,packageName:a});return n.jsx(x,{onClickPackageFile:s,onOpenDocument:({path:o,mode:i},c)=>s(d(e,a,o,i),c),resourceUri:t,onEvent:r})}else return n.jsx("div",{children:n.jsx("h2",{children:"Missing package name"})});else return n.jsx("div",{children:n.jsx("h2",{children:"Missing environment name"})})}export{j as default};

package/dist/assets/RenderedResult-DnBtf-cI.es-Bs8KIO86.js

@@ -1,153 +0,0 @@
-import{ae as ce,j as $,I as ae,r as p,aU as he,V as ue,aV as me,aH as be,aW as W,aX as ye,aY as pe,aZ as fe,a_ as ge,a$ as ve,b0 as we,b1 as oe}from"./index-B_gOHtqJ.js";const v=ce.drillCell;function ke(e,t){const r=new Set;let l;try{l=e.getMetadata()?.getAllFields()??[]}catch{return r}const o=new Set;for(const a of l)!a||t(a)||a.tag?.tag("hidden")===void 0&&o.add(a.tag?.text("label")??a.name);for(const a of l){if(!a||!t(a))continue;const n=a.tag?.text("label")??a.name;o.has(n)||r.add(n)}return r}function D(e){const t=/^\s*(\d+)/.exec(e.style?.gridColumn??"");return t?t[1]:void 0}function xe(e,t){if(t.size!==0)for(const r of e.querySelectorAll(".malloy-table")){const l=n=>n.closest(".malloy-table")===r,o=new Set;for(const n of r.querySelectorAll(".column-cell.th")){if(!l(n))continue;const i=(n.textContent??"").replace(/\u200b/g,"").trim(),b=D(n);b&&t.has(i)&&o.add(b)}if(o.size===0)continue;const a=new Set;for(const n of r.querySelectorAll(`.${v}[tabindex="0"]`)){if(!l(n))continue;const i=D(n);i&&(a.has(i)?n.tabIndex=-1:a.add(i))}for(const n of r.querySelectorAll(".column-cell.td")){if(!l(n))continue;const i=D(n),b=!n.querySelector(".value-null")&&(n.textContent??"").trim()!=="";if(i&&b&&o.has(i)&&!n.querySelector(".malloy-table")){if(n.classList.add(v),n.tabIndex===0)a.add(i);else{const f=a.has(i);f||a.add(i),n.tabIndex=f?-1:0}n.setAttribute("role","button")}}}}function Ce(e){const t=e.closest(".malloy-table"),r=D(e);return!t||!r?[]:Array.from(t.querySelectorAll(`.${v}`)).filter(l=>l.closest(".malloy-table")===t&&D(l)===r)}function ne(e,t){const r=Ce(e),l=r.indexOf(e);if(l===-1)return;const o=t==="first"?r[0]:t==="last"?r[r.length-1]:r[Math.min(Math.max(l+t,0),r.length-1)];if(o){for(const a of r)a.tabIndex=a===o?0:-1;return o}}function Ae(e){return{background:e.dashboardRoot,tableBackground:e.tableBackground,tableHeaderColor:e.tableHeader,tableBodyColor:e.tableBody,tableBorder:e.border,tablePinnedBackground:e.tableHeaderBackground,tablePinnedBorder:e.pinnedBorder,tableFontSize:`${e.font.size}px`,fontFamily:e.font.family,mapColor:e.mapColor}}function Se(e){const{foreground:t,axisFaint:r,gridline:l,font:o}=e,a={background:e.background,font:o.family,title:{color:t,font:o.family},axis:{labelColor:t,titleColor:t,domainColor:r,tickColor:r,gridColor:l,labelFont:o.family,titleFont:o.family},legend:{labelColor:t,titleColor:t,labelFont:o.family,titleFont:o.family},header:{labelColor:t,titleColor:t},range:{category:e.series}},n={...a,legend:{...a.legend,orient:"bottom"}};return i=>i==="shape_map"?n:a}function Ee(e){if(!e)return;const t=e.tag("theme");if(!t)return;const r={},l=t.tag("palette");if(l){const a={},n=l.textArray("series");n&&n.length>0&&(a.series=n);for(const i of he){const b=l.tag(i);if(!b)continue;const f={},x=b.text("light"),w=b.text("dark");x&&(f.light=x),w&&(f.dark=w),Object.keys(f).length>0&&(a[i]=f)}Object.keys(a).length>0&&(r.palette=a)}const o=t.tag("font");if(o){const a={},n=o.text("family");n&&(a.family=n);const i=o.numeric("size");typeof i=="number"&&Number.isFinite(i)&&(a.size=i),Object.keys(a).length>0&&(r.font=a)}return Object.keys(r).length>0?r:void 0}const B="data-publisher-fill",ze=async(e,t)=>{if(typeof window>"u")throw new Error("MalloyRenderer can only be used in browser environment");const{MalloyRenderer:r}=await pe();return new r({onClick:t,vegaConfigOverride:Se(e),theme:Ae(e),onError:l=>{console.error("Error rendering visualization:",typeof l,l)}}).createViz()};async function Me(e){if(!e||typeof e!="object")return;const t=e,r=[...Array.isArray(t.model_annotations)?t.model_annotations:[],...Array.isArray(t.source_annotations)?t.source_annotations:[],...Array.isArray(t.annotations)?t.annotations:[]].map(o=>typeof o?.value=="string"?o.value:void 0).filter(o=>!!o);if(r.length===0)return;let l;try{({parseAnnotation:l}=await ye())}catch{return}try{const{tag:o}=l(r);return Ee(o)}catch(o){console.warn("Failed to parse # theme.* annotations; chart will render with the shell theme.",{error:o,lines:r});return}}function Re(e,t,r){const l=fe(t,r);for(const[o,a]of Object.entries(l))e.style.setProperty(o,a)}const Te=`
-/* Card geometry, through the renderer's OWN theme vars rather than over the top
-   of them. It declares --malloy-theme--dashboard-* on .malloy-render itself and
-   passes each through to the --malloy-render--* the card CSS reads, so a value
-   inherited from our wrapper loses to that declaration however early it is set:
-   this has to be a rule on the same element, at higher specificity. Doubling the
-   class does that, and then no !important is needed — which matters, because
-   !important here also lands on .dashboard-item-borderless and repaints a card
-   the author asked to have no card. */
-.malloy-render.malloy-render {
-   --malloy-theme--dashboard-card-radius: var(--publisher-dashboard-card-radius);
-   --malloy-theme--dashboard-card-padding: var(--publisher-dashboard-card-padding);
-}
-/* dashboard.css hardcodes background: #f7f9fc on .malloy-dashboard
-   and .dashboard-row-header, which would paint light grey in dark
-   mode and also bleed an operator-picked palette.background across
-   the panel chrome in light. Both surfaces use
-   --malloy-render--background here, which buildMalloyExplicitTheme
-   wires to dashboardRoot: a mode-keyed neutral that stays decoupled
-   from palette.background (the chart canvas) on purpose. Selectors
-   are duplicated at higher specificity to beat the renderer s own
-   scoped rules. */
-.malloy-render .malloy-dashboard,
-.malloy-render.malloy-render .malloy-dashboard,
-div.malloy-render .malloy-dashboard {
-   /* --publisher-dashboard-root is set on the outer Publisher wrapper
-      (see buildTableCssVars) and stays decoupled from
-      --malloy-render--background, which gets shadowed inside the
-      renderer when a theme.background annotation is present. The
-      dedicated var means the panel between tiles always paints the
-      operator neutral dashboardRoot regardless of annotations. */
-   background: var(--publisher-dashboard-root) !important;
-   background-color: var(--publisher-dashboard-root) !important;
-   color: var(--malloy-render--table-body-color) !important;
-}
-.malloy-render .malloy-dashboard .dashboard-row,
-.malloy-render .malloy-dashboard .dashboard-row-body,
-.malloy-render .malloy-dashboard .dashboard-row-header,
-.malloy-render.malloy-render .malloy-dashboard .dashboard-row-header,
-div.malloy-render .malloy-dashboard .dashboard-row-header {
-   /* Belt + suspenders: dashboard.css hardcodes .dashboard-row-header
-      to #f7f9fc, and row / row-body have no explicit background but
-      get caught in any annotation-driven inline writes. Force all of
-      them to the neutral panel colour. */
-   background: var(--publisher-dashboard-root) !important;
-   background-color: var(--publisher-dashboard-root) !important;
-}
-.malloy-render .malloy-dashboard .dashboard-item:not(.dashboard-item-borderless) {
-   /* Tile padding around each chart / table. Uses our custom
-      --malloy-render--tile-background so the operator can theme the
-      tile separately from the table header row (which paints from
-      --malloy-render--table-pinned-background below).
-
-      A flat bordered card rather than the renderer's shadow ring, which is what
-      makes it match the composite tile's Paper. :not(borderless) because
-      # borderless asks for no card at all, and an !important background and
-      border drew one anyway. */
-   background: var(--malloy-render--tile-background) !important;
-   color: var(--malloy-render--table-body-color) !important;
-   box-shadow: none !important;
-   /* The card edge, not the table gridline: --publisher-dashboard-card-border,
-      the same value TileCard paints, so the renderer's card and the composite
-      one are outlined identically. */
-   border: var(--publisher-dashboard-card-border) !important;
-}
-/* The renderer's big-value card — the small card a "# big_value" measure sits
-   in, several to a row inside one tile. (No backticks in here: this is inside
-   a template literal.) Its own CSS gives it a 0.55px edge in
-   #e5e7eb: a sub-pixel width, and a grey off the slate ramp everything else on
-   the page is on. It is a dashboard card like any other, so it takes the card
-   edge and stops being the one card outlined in a hairline nobody can see. */
-.malloy-render .malloy-big-value-card {
-   border: var(--publisher-dashboard-card-border) !important;
-   /* Its shadow is a four-layer Tailwind stack, and only two of those layers
-      are a shadow: the other is "0 0 0 1px #e5e7eb", a spread ring drawn as a
-      second border OVER the real one. So the border above was landing
-      underneath a ring in the renderer's own grey, and the card kept both a
-      lifted look the flat cards around it do not have and an edge we did not
-      pick. Dropped whole rather than rebuilt layer by layer: the ring's job is
-      the border's job, and the border is already doing it. */
-   box-shadow: none !important;
-}
-/* The strip of big-value cards as a grid, so cards share a width and the last one does not wrap
-   alone. The renderer's wrapping flex row sizes each card to its own text. The 250px floor is the
-   widest realistic value: it is nowrap at 32px in an overflow:visible card, so a narrower track
-   would spill it onto its neighbour. Embedded (a nested big_value) is left as the renderer draws it. */
-.malloy-render .malloy-big-value:not(.malloy-big-value--embedded) {
-   display: grid;
-   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-.malloy-render .malloy-big-value-card:not(.malloy-big-value-card--embedded) {
-   width: auto;
-   max-width: none;
-}
-.malloy-render .malloy-dashboard .dashboard-row-header-separator {
-   background: var(--malloy-render--table-border) !important;
-}
-/* !important because the malloy-explorer stylesheet pins these same properties with it. */
-[${B}] .malloy-table.root {
-   height: 100% !important;
-   align-content: start !important;
-   grid-template-columns: repeat(var(--total-header-size), minmax(max-content, 1fr)) !important;
-}
-.malloy-render .malloy-table .th.column-cell {
-   /* Non-pinned tables have no header background in the renderer's
-      own CSS (only pinned scrolled tables paint the pinned-header
-      with this var). Force the same value here so every table has a
-      visible header band reflecting the operator's choice. */
-   background: var(--malloy-render--table-pinned-background) !important;
-}
-.malloy-render .dashboard-item-title,
-.malloy-render .dashboard-dimension-name {
-   color: var(--malloy-render--label-color) !important;
-}
-.malloy-render .dashboard-item-value,
-.malloy-render .dashboard-item-value-measure,
-.malloy-render .dashboard-dimension-value {
-   color: var(--malloy-render--value-color) !important;
-}
-.malloy-render .malloy-table,
-.malloy-render .malloy-list {
-   color: var(--malloy-render--table-body-color) !important;
-}
-.malloy-render .column-cell.th,
-.malloy-render .cell-content.header {
-   color: var(--malloy-render--table-header-color) !important;
-}
-/* A cell whose column declares a "# drill" this surface can honor, marked
-   by markDrillableCells. Ordinary text with a pointer cursor until hovered,
-   then it reads as a link: the same affordance Malloyyo gives the same tag,
-   and the only thing that tells a reader a cell navigates. Kept off the
-   resting state deliberately: a column painted blue competes with the data.
-   (No backticks in here: this is inside a template literal.) */
-.malloy-render .${v} {
-   cursor: pointer;
-}
-.malloy-render .${v}:hover > .cell-content {
-   color: var(--publisher-drill-link) !important;
-   text-decoration: underline;
-}
-/* Keyboard focus reads the same as hover, plus a ring: a hover colour is not
-   something a keyboard user can produce, and a focus ring is not something a
-   mouse user sees. focus-visible rather than focus, so a click does not leave a
-   ring behind it. (No backticks in here: this is inside a template literal.) */
-.malloy-render .${v}:focus-visible {
-   outline: 2px solid var(--publisher-drill-link);
-   outline-offset: -2px;
-}
-.malloy-render .${v}:focus-visible > .cell-content {
-   color: var(--publisher-drill-link) !important;
-   text-decoration: underline;
-}
-`,le="publisher-malloy-renderer-overrides";function je(){if(typeof document>"u"||document.getElementById(le))return;const e=document.createElement("style");e.id=le,e.textContent=Te,document.head.appendChild(e)}function Fe({result:e,height:t,drill:r,onSizeChange:l,onSizing:o,fill:a}){const n=p.useRef(null),i=p.useRef(r);i.current=r;const b=p.useCallback(c=>{i.current?.onClick(c)},[]),f=r!==void 0,x=p.useRef(!1),w=p.useRef(null),P=p.useRef(0),{theme:I,layers:Y,mode:J}=ue(),X=p.useMemo(()=>({radius:I.ui.radius.tile,padding:`${me}px`}),[I.ui.radius.tile]);return p.useEffect(()=>()=>{P.current+=1;const c=w.current;c?.viz.remove(),c?.node.remove(),w.current=null},[]),p.useLayoutEffect(()=>{if(!n.current||!e)return;je();const c=n.current,se=P.current+=1;let H=!1;const V=()=>!H&&se===P.current;let d,m,_=null,K=0,L=null,N=null,q=null,R=null,T=null,j=null,Z=null,G=0,A=null;x.current=!1;let g,S;const U=k=>{if(H||!k.firstElementChild||W(g,S)==="container")return;const F=ge(g,S);if(x.current&&!F)return;const O=c.hasAttribute(B);O&&c.removeAttribute(B);const E=ve(k,oe(g));O&&c.setAttribute(B,""),E>0&&(x.current=!0,l&&E!==G&&(G=E,l(E)));const h=we(k,oe(g));F&&h&&Z!==h&&(Z=h,j?.disconnect(),j=new ResizeObserver(()=>U(k)),j.observe(h))};return(async()=>{let k;try{k=JSON.parse(e)}catch(y){console.error("Error parsing visualization result:",y);return}const F=await Me(k),O=F?be([...Y,F],J):I;if(!V())return;try{m=await ze(O,b)}catch(y){console.error("Failed to create renderer:",y);return}if(!V()){m.remove(),m=void 0;return}const E=w.current;d=document.createElement("div"),d.style.width="100%",d.style.height="100%",Re(d,O,X),c.childElementCount>0&&(c.style.position="relative",d.style.position="absolute",d.style.inset="0",d.style.visibility="hidden"),c.appendChild(d);const h=d;R=new MutationObserver(()=>{T&&clearTimeout(T),T=setTimeout(()=>{U(h),x.current&&R?.disconnect()},100)}),R.observe(d,{childList:!0,subtree:!0,attributes:!0});const ie=m;let Q=!1;const ee=()=>{if(!(Q||!V())){Q=!0,A&&(clearTimeout(A),A=null),E?.viz.remove();for(const y of Array.from(c.children))y!==h&&c.removeChild(y);h.style.position="",h.style.inset="",h.style.visibility="",c.style.position="",w.current={viz:ie,node:h},U(h)}};try{m.setResult(k);try{const C=m.getMetadata(),z=C?.getRootField();g=z?.renderAs(),S=z?C?.getPluginsForField(z.key)?.[0]?.sizingStrategy:void 0}catch{g=void 0,S=void 0}o?.(W(g,S)),d.dataset.malloyRenderAs=g??"unknown",d.dataset.malloySizing=W(g,S),m.render(d);const y=i.current;try{if(y){const C=ke(m,y.canDrill),z=()=>{try{xe(h,C)}catch(s){console.warn("Drill affordance skipped:",s)}};z();const te=s=>{const u=s.querySelector(".cell-content")??s,M=u.getBoundingClientRect();u.dispatchEvent(new MouseEvent("click",{bubbles:!0,cancelable:!0,view:u.ownerDocument.defaultView,clientX:Math.round(M.left+M.width/2),clientY:Math.round(M.bottom)}))},re=s=>s.target?.closest?.(`.${v}`)??null,de=(s,u)=>{ne(s,u)?.focus()};L=s=>{const u=re(s);if(!u)return;const M=s.key==="ArrowDown"?1:s.key==="ArrowUp"?-1:s.key==="Home"?"first":s.key==="End"?"last":void 0;if(M!==void 0){s.preventDefault(),de(u,M);return}s.key==="Enter"?(s.preventDefault(),te(u)):s.key===" "&&s.preventDefault()},N=s=>{if(s.key!==" ")return;const u=re(s);u&&(s.preventDefault(),te(u))},q=s=>{const u=s.target?.closest?.(`.${v}`);u&&ne(u,0)},h.addEventListener("keydown",L),h.addEventListener("keyup",N),h.addEventListener("focusin",q),C.size>0&&typeof MutationObserver<"u"&&(_=new MutationObserver(()=>{cancelAnimationFrame(K),K=requestAnimationFrame(z)}),_.observe(h,{childList:!0,subtree:!0}))}}catch(C){console.warn("Drill affordance skipped:",C)}m.onReady(ee),A=setTimeout(ee,1e4)}catch(y){console.error("Error rendering visualization:",y),R?.disconnect(),j?.disconnect(),_?.disconnect(),m.remove(),m=void 0,h.parentNode===c&&c.removeChild(h)}})(),()=>{H=!0,R?.disconnect(),j?.disconnect(),T&&clearTimeout(T),A&&clearTimeout(A),d&&w.current?.node!==d&&(L&&d.removeEventListener("keydown",L),N&&d.removeEventListener("keyup",N),q&&d.removeEventListener("focusin",q),_?.disconnect(),cancelAnimationFrame(K),m?.remove(),d.parentNode===c&&c.removeChild(d),c.style.position="")}},[e,b,f,l,o,I,Y,J,X]),$.jsx("div",{ref:n,...a?{[B]:""}:{},style:{width:"100%",height:t?`${t}px`:"400px"}})}function Oe(e){return typeof window>"u"?$.jsx(ae,{sx:{width:"100%",height:e.height?`${e.height}px`:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:"text.secondary"},children:"Loading..."}):$.jsx(p.Suspense,{fallback:$.jsx(ae,{sx:{width:"100%",height:e.height?`${e.height}px`:"100%",display:"flex",alignItems:"center",justifyContent:"center",color:"text.secondary"},children:"Loading visualization..."}),children:$.jsx(Fe,{...e})})}const Be=Object.freeze(Object.defineProperty({__proto__:null,default:Oe},Symbol.toStringTag,{value:"Module"}));export{v as D,Oe as R,Se as a,Ae as b,Be as c,ke as d,xe as m,Ee as r};