@protobase/ui 0.15.4 → 0.16.0

package/dist/shell/assets/record-map-BiWSbqqT.js

@@ -0,0 +1 @@
+import{r as e}from"./rolldown-runtime-hePW80VL.js";import{i as t,n,r,s as i,t as a}from"./maplibre-Dy0ZTnFZ.js";import{t as o}from"./jsx-runtime-NZYk81nU.js";var s=e(o(),1),c=({style:e,position:o,zoom:c})=>(0,s.jsxs)(t,{mapLib:a,mapStyle:e,initialViewState:{...o,zoom:c},cooperativeGestures:!0,style:{width:`100%`,height:`100%`},children:[(0,s.jsx)(n,{showCompass:!1}),(0,s.jsx)(r,{latitude:o.latitude,longitude:o.longitude,anchor:`bottom`,children:(0,s.jsx)(i,{"aria-hidden":!0,className:`size-8 fill-primary text-primary-foreground drop-shadow`,strokeWidth:1.5})})]});export{c as RecordMap};

package/dist/shell/assets/records-map-DabYc3ad.js

@@ -0,0 +1 @@
+import{r as e}from"./rolldown-runtime-hePW80VL.js";import{t}from"./react-Cvdyeg_0.js";import{g as n,q as r}from"./app-DJAZP1yB.js";import{a as i,i as a,n as o,o as s,r as c,s as l,t as u}from"./maplibre-Dy0ZTnFZ.js";import{t as d}from"./jsx-runtime-NZYk81nU.js";function f(e,t){if(!e)throw Error(t)}var p=e(t(),1),m=0;function h(e,t,n){if(e.style&&e.style._loaded){let r={...n};return delete r.id,delete r.children,e.addSource(t,r),e.getSource(t)}return null}function g(e,t,n){f(t.id===n.id,`source id changed`),f(t.type===n.type,`source type changed`);let r=``,i=0;for(let e in t)e!==`children`&&e!==`id`&&!s(n[e],t[e])&&(r=e,i++);if(!i)return;let a=t.type;if(a===`geojson`)e.setData(t.data);else if(a===`image`)e.updateImage({url:t.url,coordinates:t.coordinates});else switch(r){case`coordinates`:e.setCoordinates?.(t.coordinates);break;case`url`:e.setUrl?.(t.url);break;case`tiles`:e.setTiles?.(t.tiles);break;default:console.warn(`Unable to update <Source> prop: ${r}`)}}function _(e){let t=(0,p.useContext)(i).map.getMap(),n=(0,p.useRef)(e),[,r]=(0,p.useState)(0),a=(0,p.useMemo)(()=>e.id||`jsx-source-${m++}`,[]);(0,p.useEffect)(()=>{if(t){let e=()=>setTimeout(()=>r(e=>e+1),0);return t.on(`styledata`,e),e(),()=>{if(t.off(`styledata`,e),t.style&&t.style._loaded&&t.getSource(a)){let e=t.getStyle()?.layers;if(e)for(let n of e)n.source===a&&t.removeLayer(n.id);t.removeSource(a)}}}},[t]);let o=t&&t.style&&t.getSource(a);return o?g(o,e,n.current):o=h(t,a,e),n.current=e,o&&p.Children.map(e.children,e=>e&&(0,p.cloneElement)(e,{source:a}))||null}function v(e,t,n,r){if(f(n.id===r.id,`layer id changed`),f(n.type===r.type,`layer type changed`),n.type===`custom`||r.type===`custom`)return;let{layout:i={},paint:a={},filter:o,minzoom:c,maxzoom:l,beforeId:u}=n;if(u!==r.beforeId&&e.moveLayer(t,u),i!==r.layout){let n=r.layout||{};for(let r in i)s(i[r],n[r])||e.setLayoutProperty(t,r,i[r]);for(let r in n)i.hasOwnProperty(r)||e.setLayoutProperty(t,r,void 0)}if(a!==r.paint){let n=r.paint||{};for(let r in a)s(a[r],n[r])||e.setPaintProperty(t,r,a[r]);for(let r in n)a.hasOwnProperty(r)||e.setPaintProperty(t,r,void 0)}s(o,r.filter)||e.setFilter(t,o),(c!==r.minzoom||l!==r.maxzoom)&&e.setLayerZoomRange(t,c,l)}function y(e,t,n){if(e.style&&e.style._loaded&&(!(`source`in n)||e.getSource(n.source))){let r={...n,id:t};delete r.beforeId,e.addLayer(r,n.beforeId)}}var b=0;function x(e){let t=(0,p.useContext)(i).map.getMap(),n=(0,p.useRef)(e),[,r]=(0,p.useState)(0),a=(0,p.useMemo)(()=>e.id||`jsx-layer-${b++}`,[]);if((0,p.useEffect)(()=>{if(t){let e=()=>r(e=>e+1);return t.on(`styledata`,e),e(),()=>{t.off(`styledata`,e),t.style&&t.style._loaded&&t.getLayer(a)&&t.removeLayer(a)}}},[t]),t&&t.style&&t.getLayer(a))try{v(t,a,e,n.current)}catch(e){console.warn(e)}else y(t,a,e);return n.current=e,null}var S=512,C=85.051129,w=16,T=Array.from({length:23},(e,t)=>t),E=e=>e.type===`LineString`?e.coordinates:e.type===`MultiPolygon`?e.coordinates.flat(2):e.coordinates.flat(),D=e=>{let t=Math.max(-85.051129,Math.min(C,e))*Math.PI/180;return .5-Math.log(Math.tan(Math.PI/4+t/2))/(2*Math.PI)},O=e=>{let t=E(e),n=t.map(([e])=>e),r=t.map(([,e])=>D(e)),i=(Math.max(...n)-Math.min(...n))/360*S,a=(Math.max(...r)-Math.min(...r))*S;return Math.max(i,a)},k=(e,t)=>{let n=e.flatMap(e=>{if(!e.area)return[];let n=e.area.type===`LineString`||e.area.type===`MultiLineString`?`line`:`polygon`;return[{type:`Feature`,geometry:e.area,properties:{key:e.key,kind:n,span:O(e.area),chosen:t?.includes(e.key)??!1}}]});return{type:`FeatureCollection`,features:[...n.filter(e=>!e.properties.chosen),...n.filter(e=>e.properties.chosen)]}},A=e=>[`interpolate`,[`linear`],[`zoom`],...T.flatMap(t=>[t,[`*`,e,[`min`,1,[`max`,0,[`/`,[`-`,[`*`,[`get`,`span`],2**t],w],32]]]]])],j=e(d(),1),M=[`==`,[`get`,`kind`],`polygon`],N=[`==`,[`get`,`kind`],`line`],P=(e,t)=>[`case`,[`get`,`chosen`],e,t],F=({points:e,selected:t,colors:n})=>{let r=k(e,t);if(r.features.length===0)return null;let i=[`case`,[`get`,`chosen`],n.chosen,n.area];return(0,j.jsxs)(_,{id:`position-areas`,type:`geojson`,data:r,children:[(0,j.jsx)(x,{id:`position-area-fills`,type:`fill`,filter:M,paint:{"fill-color":i,"fill-opacity":A(P(.15,.1))}}),(0,j.jsx)(x,{id:`position-area-outlines`,type:`line`,filter:M,paint:{"line-color":i,"line-width":1.5,"line-dasharray":[3,2],"line-opacity":A(.8)}}),(0,j.jsx)(x,{id:`position-area-lines`,type:`line`,filter:N,layout:{"line-cap":`round`,"line-join":`round`},paint:{"line-color":i,"line-width":6,"line-opacity":A(P(.6,.35))}})]})},I=(e,t)=>{let n=document.createElement(`span`);n.style.color=`var(${t})`,e.append(n);let r=getComputedStyle(n).color;n.remove();let i=document.createElement(`canvas`);i.width=1,i.height=1;let a=i.getContext(`2d`,{willReadFrequently:!0});if(!a)return r;a.fillStyle=r,a.fillRect(0,0,1,1);let[o,s,c,l]=a.getImageData(0,0,1,1).data;return`rgba(${o}, ${s}, ${c}, ${l/255})`},L=28,R={padding:48,maxZoom:15,duration:0},z={padding:48,maxZoom:16,duration:300},B=32,V=new Intl.NumberFormat(`en-IE`,{notation:`compact`,maximumFractionDigits:1}),H=e=>[[e.west,e.south],[e.east,e.north]],U=({style:e,initial:t,points:i,buckets:s,fit:d,onFitted:f,onMove:m,selected:h,covered:g,onSelect:_,onClear:v,markerLabel:y,bucketLabel:b})=>{let x=(0,p.useRef)(null),[S,C]=(0,p.useState)([]),[w,T]=(0,p.useState)(),E=new globalThis.Map(i.map(e=>[e.key,e])),D=i.map(e=>e.key).join(`,`),O=d&&JSON.stringify(d),k=()=>{let e=x.current?.getMap();e&&C(n(i.map(t=>({key:t.key,...e.project([t.longitude,t.latitude])})),L))},A=()=>{let e=x.current?.getMap();if(!e)return;let t=e.getBounds(),n=e.getCenter();m({bounds:{south:t.getSouth(),west:t.getWest(),north:t.getNorth(),east:t.getEast()},zoom:e.getZoom()},{latitude:n.lat,longitude:n.lng,zoom:e.getZoom()})},M=()=>{let e=x.current?.getMap();e&&d&&(e.fitBounds(H(d),R),f(),A())};(0,p.useEffect)(k,[D]),(0,p.useEffect)(M,[O]);let N=S.find(e=>h!==void 0&&e.keys.some(e=>h.includes(e)))?.at;return(0,p.useEffect)(()=>{let e=x.current?.getMap(),t=N===void 0?void 0:E.get(N);if(!e||!t||g===0)return;let{y:n}=e.project([t.longitude,t.latitude]),r=e.getContainer().clientHeight-g;n>B&&n<r||e.easeTo({center:[t.longitude,t.latitude],offset:[0,(B-g)/2],duration:300})},[N,g]),(0,j.jsxs)(a,{ref:x,mapLib:u,mapStyle:e,initialViewState:t??{latitude:0,longitude:0,zoom:1},style:{width:`100%`,height:`100%`},onLoad:()=>{let e=x.current.getMap().getContainer();T({area:I(e,`--primary`),chosen:I(e,`--foreground`)}),k(),d?M():A()},onZoomEnd:k,onMoveEnd:A,onClick:v,children:[(0,j.jsx)(o,{showCompass:!1}),w&&(0,j.jsx)(F,{points:i,selected:h,colors:w}),s.map(e=>(0,j.jsx)(c,{latitude:e.latitude,longitude:e.longitude,anchor:`center`,children:(0,j.jsx)(`button`,{type:`button`,"aria-label":b(e.count),className:`flex size-10 cursor-pointer items-center justify-center rounded-full border-2 border-background bg-primary text-xs font-semibold text-primary-foreground tabular-nums shadow`,onClick:t=>{t.stopPropagation(),x.current?.getMap().fitBounds(H(e.bounds),z)},children:V.format(e.count)})},`${e.latitude},${e.longitude}`)),S.map(e=>{let t=E.get(e.at);if(!t)return null;let n=h!==void 0&&e.keys.some(e=>h.includes(e)),i=e.keys.every(e=>E.get(e)?.approximate);return(0,j.jsx)(c,{latitude:t.latitude,longitude:t.longitude,anchor:`bottom`,style:{zIndex:+!!n},children:(0,j.jsxs)(`button`,{type:`button`,"aria-label":y(e.keys),"aria-pressed":n,className:`relative block cursor-pointer`,onClick:t=>{t.stopPropagation(),_(e.keys)},children:[(0,j.jsx)(l,{"aria-hidden":!0,"data-approximate":i||void 0,className:r(`size-8 drop-shadow`,i?n?`fill-background text-foreground`:`fill-background text-primary`:n?`fill-foreground text-background`:`fill-primary text-primary-foreground`),strokeWidth:i?2:1.5,strokeDasharray:i?`3 2`:void 0}),e.keys.length>1&&(0,j.jsx)(`span`,{className:`absolute -right-2 -top-1 min-w-5 rounded-full border border-background bg-foreground px-1 text-center text-[11px] font-medium leading-4 text-background tabular-nums`,children:e.keys.length})]})},e.at)})]})};export{U as RecordsMap};

package/dist/shell/assets/shared-protobase-ui-BURelnPG.js

@@ -0,0 +1 @@
+import{r as e}from"./rolldown-runtime-hePW80VL.js";import{A as t,B as n,C as r,D as i,E as a,F as o,G as s,H as c,I as l,K as u,L as d,M as f,N as p,O as m,P as h,R as g,S as _,T as v,U as y,V as b,W as x,_ as S,a as C,b as w,c as T,d as E,f as D,h as O,i as k,j as A,l as j,m as M,n as N,o as P,p as F,r as I,s as L,t as R,u as z,v as B,w as V,x as H,y as U,z as W}from"./app-DJAZP1yB.js";import{t as G}from"./jsx-runtime-NZYk81nU.js";var K=e(G(),1),q=({row:e,resource:t,recordKey:n,...r})=>{let i=O(),a=z(),o=t??i?.resource??a?.model.name;if(o===void 0)throw Error(`RecordLink needs a resource outside a list display or a record`);return(0,K.jsx)(U,{to:{kind:`record`,resource:o,key:e?e.key:n},...r})};export{l as ActionCard,y as ApiProvider,R as App,U as AppLink,V as AssistantDock,n as ChatMessage,W as ChatThread,h as CompactTable,g as Composer,A as DiffView,o as FieldList,u as OtpInput,a as PartView,q as RecordLink,B as ResponsiveDialog,d as SidePanel,S as SignInPrompt,t as StepList,i as definePlugin,m as defineUi,f as diffStats,N as isConflict,T as mergeUi,p as parseDiff,C as pluginApi,P as protobaseVersion,j as uiFromModule,c as useApiToken,w as useAppAddress,r as useAssistant,_ as useAssistantClient,v as useBackendData,x as useClient,E as useFacets,D as useHistogram,z as useLayoutRecord,k as useList,M as useListDisplay,H as useMeta,L as usePlugin,b as useRecord,s as useResourceClient,F as useSeries,I as useUpdateRecord};

package/dist/shell/index.html

@@ -16,19 +16,19 @@
       }
       document.documentElement.dataset.theme = stored === 'light' || stored === 'dark' ? stored : matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     </script>
-    <script type="importmap">{"imports":{"react":"/assets/shared-react-DhkZ2M4l.js","react/jsx-runtime":"/assets/shared-react-jsx-runtime-xPQrWk0g.js","react-dom":"/assets/shared-react-dom-D508a1cq.js","@protobase/ui":"/assets/shared-protobase-ui-D942ARkw.js"}}</script>
-    <script type="module" crossorigin src="/assets/index-CrtAqGCx.js"></script>
+    <script type="importmap">{"imports":{"react":"/assets/shared-react-DhkZ2M4l.js","react/jsx-runtime":"/assets/shared-react-jsx-runtime-xPQrWk0g.js","react-dom":"/assets/shared-react-dom-D508a1cq.js","@protobase/ui":"/assets/shared-protobase-ui-BURelnPG.js"}}</script>
+    <script type="module" crossorigin src="/assets/index-LBhMBiK4.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-hePW80VL.js">
     <link rel="modulepreload" crossorigin href="/assets/react-Cvdyeg_0.js">
     <link rel="modulepreload" crossorigin href="/assets/react-dom-B-VxWsjA.js">
     <link rel="modulepreload" crossorigin href="/assets/jsx-runtime-NZYk81nU.js">
-    <link rel="modulepreload" crossorigin href="/assets/app-CpFoFNtG.js">
+    <link rel="modulepreload" crossorigin href="/assets/app-DJAZP1yB.js">
     <link rel="stylesheet" crossorigin href="/assets/app-GUjJKojE.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-ibaHR5wQ.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C5pYkUfv.css">
     <link rel="stylesheet" href="/protobase.theme.css">
   </head>
   <body>
-    <!-- The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
-    <div id="root" class="h-screen" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
+    <!-- As tall as the screen shows, browser toolbars aside, so a page that fills it, such as a map, keeps the bottom bar in view. The page reaches under the iPhone home indicator, which the bottom bar keeps clear of; the sides keep clear of the notch. -->
+    <div id="root" class="h-dvh" style="padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right)"></div>
   </body>
 </html>

package/dist/shell/protobase.shell.json

@@ -1,5 +1,5 @@
 {
-  "protobase": "0.15.4",
+  "protobase": "0.16.0",
   "pluginApi": 1,
   "paths": [
     "/index.html",

package/dist/styles.css

@@ -12,6 +12,10 @@
   html[data-theme="dark"] {
     color-scheme: dark;
   }
+  /* A modal's scroll lock hides the page's scrollbar; its room stays, so the page behind keeps its width. */
+  html[data-pb-scroll-locked] {
+    scrollbar-gutter: stable;
+  }
   body {
     background: var(--background);
     color: var(--foreground);
@@ -23,6 +27,17 @@
   button {
     cursor: pointer;
   }
+  /* Asked for less motion, nothing animates or fades: it changes at once, and nothing that pulses keeps on. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    ::before,
+    ::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
   * {
     border-color: var(--border);
   }

package/dist/toasts/toast.js

@@ -1,8 +1,29 @@
 import { cn } from "../lib/cn.js";
+import { inApp } from "../app-shell/breadcrumb.js";
 import { Spinner } from "../primitives/spinner.js";
 import { CheckCircle2, X, XCircle } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/toasts/toast.tsx
+const actionClass = "-my-0.5 rounded px-1.5 py-0.5 text-[13px] font-medium text-primary-text hover:bg-primary-soft";
+const Action = ({ action }) => {
+	if ("onClick" in action) return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		onClick: action.onClick,
+		className: actionClass,
+		children: action.label
+	});
+	const { href, onNavigate } = action;
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick: (event) => {
+			if (!onNavigate || !inApp(event)) return;
+			event.preventDefault();
+			onNavigate(href);
+		},
+		className: actionClass,
+		children: action.label
+	});
+};
 const icons = {
 	loading: /* @__PURE__ */ jsx(Spinner, { className: "text-primary" }),
 	success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success" }),
@@ -26,12 +47,7 @@ const Toast = ({ state, title, description, action, onDismiss }) => /* @__PURE__
 				children: description
 			})]
 		}),
-		action && /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: action.onClick,
-			className: "rounded px-1.5 py-0.5 text-[13px] font-medium text-primary-text hover:bg-primary-soft",
-			children: action.label
-		}),
+		action && /* @__PURE__ */ jsx(Action, { action }),
 		onDismiss && /* @__PURE__ */ jsx("button", {
 			type: "button",
 			"aria-label": "Dismiss",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -38,9 +38,9 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.15.4",
-    "@protobase/layout": "0.15.4",
-    "@protobase/schema": "0.15.4",
+    "@protobase/client": "0.16.0",
+    "@protobase/layout": "0.16.0",
+    "@protobase/schema": "0.16.0",
     "@sentry/browser": "^11.7.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",

package/dist/auth/code-input.js

@@ -1,17 +0,0 @@
-import { cn } from "../lib/cn.js";
-import { Input } from "../primitives/input.js";
-import { jsx } from "react/jsx-runtime";
-//#region src/auth/code-input.tsx
-/** A 6-digit one-time code field: digits on phone keyboards, filled from the mail app where the system offers it. */
-const CodeInput = ({ className, ...rest }) => /* @__PURE__ */ jsx(Input, {
-	type: "text",
-	inputMode: "numeric",
-	autoComplete: "one-time-code",
-	pattern: "[0-9]{6}",
-	maxLength: 6,
-	spellCheck: false,
-	className: cn("min-h-6 font-mono tracking-[0.3em]", className),
-	...rest
-});
-//#endregion
-export { CodeInput };

package/dist/auth/sign-in-address.js

@@ -1,47 +0,0 @@
-//#region src/auth/sign-in-address.ts
-/** The path of the sign-in route, below the app's base path. Its steps and the page to come back to are in its query. */
-const signInRoute = "/-/sign-in";
-/** The names of the sign-in route's query parameters: the step it shows, and the page to come back to after it. */
-const signInParams = {
-	step: "step",
-	next: "next"
-};
-/**
-* A step of signing in or making an account, each with an address of its own: Back from a step returns to the one
-* before. `email-code` and `sign-up-code` enter the code emailed to an address the step before asked for.
-*/
-const signInSteps = [
-	"sign-in",
-	"forgot-password",
-	"email-code",
-	"sign-up",
-	"sign-up-code"
-];
-const isStep = (value) => signInSteps.includes(value);
-const localPage = (next) => {
-	if (!next?.startsWith("/")) return void 0;
-	const url = new URL(next, "http://local");
-	if (url.origin !== "http://local" || url.pathname === "/-/sign-in") return void 0;
-	return `${url.pathname}${url.search}`;
-};
-/** The path below the base path of a step of the sign-in route, coming back to `next` after it, the start by default. */
-const signInPath = ({ step = "sign-in", next } = {}) => {
-	const params = new URLSearchParams();
-	if (step !== "sign-in") params.set(signInParams.step, step);
-	const page = localPage(next);
-	if (page && page !== "/") params.set(signInParams.next, page);
-	const query = params.toString();
-	return query ? `${signInRoute}?${query}` : signInRoute;
-};
-/** The sign-in route's step and the page to come back to, for the path below the base path; `undefined` elsewhere. */
-const readSignInAddress = (path, params) => {
-	if (path !== "/-/sign-in") return void 0;
-	const step = params.get(signInParams.step);
-	const next = localPage(params.get(signInParams.next));
-	return {
-		step: isStep(step) ? step : "sign-in",
-		...next && { next }
-	};
-};
-//#endregion
-export { readSignInAddress, signInParams, signInPath, signInRoute, signInSteps };