@protobase/ui 0.14.4 → 0.14.6

package/dist/shell/assets/{records-map-dch_o1ug.js → records-map-BdPiGjmg.js}

@@ -1 +1 @@
-import{r as e}from"./rolldown-runtime-hePW80VL.js";import{t}from"./react-Cvdyeg_0.js";import{K as n,g as r}from"./app-CyW0VzOi.js";import{t as i}from"./jsx-runtime-NZYk81nU.js";import{Ft as a,it as o,n as s,r as c,t as l}from"./record-map-CzJ60-ux.js";var u=e(t(),1),d=e(i(),1),f=28,p={padding:48,maxZoom:15,duration:0},m={padding:48,maxZoom:16,duration:300},h=32,g=new Intl.NumberFormat(`en-IE`,{notation:`compact`,maximumFractionDigits:1}),_=e=>[[e.west,e.south],[e.east,e.north]],v=({style:e,initial:t,points:i,buckets:v,fit:y,onFitted:b,onMove:x,selected:S,covered:C,onSelect:w,onClear:T,markerLabel:E,bucketLabel:D})=>{let O=(0,u.useRef)(null),[k,A]=(0,u.useState)([]),j=new globalThis.Map(i.map(e=>[e.key,e])),M=i.map(e=>e.key).join(`,`),N=y&&JSON.stringify(y),P=()=>{let e=O.current?.getMap();e&&A(r(i.map(t=>({key:t.key,...e.project([t.longitude,t.latitude])})),f))},F=()=>{let e=O.current?.getMap();if(!e)return;let t=e.getBounds(),n=e.getCenter();x({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()})},I=()=>{let e=O.current?.getMap();e&&y&&(e.fitBounds(_(y),p),b(),F())};(0,u.useEffect)(P,[M]),(0,u.useEffect)(I,[N]);let L=k.find(e=>S!==void 0&&e.keys.some(e=>S.includes(e)))?.at;return(0,u.useEffect)(()=>{let e=O.current?.getMap(),t=L===void 0?void 0:j.get(L);if(!e||!t||C===0)return;let{y:n}=e.project([t.longitude,t.latitude]),r=e.getContainer().clientHeight-C;n>h&&n<r||e.easeTo({center:[t.longitude,t.latitude],offset:[0,(h-C)/2],duration:300})},[L,C]),(0,d.jsxs)(c,{ref:O,mapLib:o,mapStyle:e,initialViewState:t??{latitude:0,longitude:0,zoom:1},style:{width:`100%`,height:`100%`},onLoad:()=>{P(),y?I():F()},onZoomEnd:P,onMoveEnd:F,onClick:T,children:[(0,d.jsx)(l,{showCompass:!1}),v.map(e=>(0,d.jsx)(s,{latitude:e.latitude,longitude:e.longitude,anchor:`center`,children:(0,d.jsx)(`button`,{type:`button`,"aria-label":D(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(),O.current?.getMap().fitBounds(_(e.bounds),m)},children:g.format(e.count)})},`${e.latitude},${e.longitude}`)),k.map(e=>{let t=j.get(e.at);if(!t)return null;let r=S!==void 0&&e.keys.some(e=>S.includes(e));return(0,d.jsx)(s,{latitude:t.latitude,longitude:t.longitude,anchor:`bottom`,style:{zIndex:+!!r},children:(0,d.jsxs)(`button`,{type:`button`,"aria-label":E(e.keys),"aria-pressed":r,className:`relative block cursor-pointer`,onClick:t=>{t.stopPropagation(),w(e.keys)},children:[(0,d.jsx)(a,{"aria-hidden":!0,className:n(`size-8 drop-shadow`,r?`fill-foreground text-background`:`fill-primary text-primary-foreground`),strokeWidth:1.5}),e.keys.length>1&&(0,d.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{v as RecordsMap};
+import{r as e}from"./rolldown-runtime-hePW80VL.js";import{t}from"./react-Cvdyeg_0.js";import{K as n,g as r}from"./app-CYs0l-vz.js";import{t as i}from"./jsx-runtime-NZYk81nU.js";import{Ft as a,it as o,n as s,r as c,t as l}from"./record-map-Mn5aTqIF.js";var u=e(t(),1),d=e(i(),1),f=28,p={padding:48,maxZoom:15,duration:0},m={padding:48,maxZoom:16,duration:300},h=32,g=new Intl.NumberFormat(`en-IE`,{notation:`compact`,maximumFractionDigits:1}),_=e=>[[e.west,e.south],[e.east,e.north]],v=({style:e,initial:t,points:i,buckets:v,fit:y,onFitted:b,onMove:x,selected:S,covered:C,onSelect:w,onClear:T,markerLabel:E,bucketLabel:D})=>{let O=(0,u.useRef)(null),[k,A]=(0,u.useState)([]),j=new globalThis.Map(i.map(e=>[e.key,e])),M=i.map(e=>e.key).join(`,`),N=y&&JSON.stringify(y),P=()=>{let e=O.current?.getMap();e&&A(r(i.map(t=>({key:t.key,...e.project([t.longitude,t.latitude])})),f))},F=()=>{let e=O.current?.getMap();if(!e)return;let t=e.getBounds(),n=e.getCenter();x({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()})},I=()=>{let e=O.current?.getMap();e&&y&&(e.fitBounds(_(y),p),b(),F())};(0,u.useEffect)(P,[M]),(0,u.useEffect)(I,[N]);let L=k.find(e=>S!==void 0&&e.keys.some(e=>S.includes(e)))?.at;return(0,u.useEffect)(()=>{let e=O.current?.getMap(),t=L===void 0?void 0:j.get(L);if(!e||!t||C===0)return;let{y:n}=e.project([t.longitude,t.latitude]),r=e.getContainer().clientHeight-C;n>h&&n<r||e.easeTo({center:[t.longitude,t.latitude],offset:[0,(h-C)/2],duration:300})},[L,C]),(0,d.jsxs)(c,{ref:O,mapLib:o,mapStyle:e,initialViewState:t??{latitude:0,longitude:0,zoom:1},style:{width:`100%`,height:`100%`},onLoad:()=>{P(),y?I():F()},onZoomEnd:P,onMoveEnd:F,onClick:T,children:[(0,d.jsx)(l,{showCompass:!1}),v.map(e=>(0,d.jsx)(s,{latitude:e.latitude,longitude:e.longitude,anchor:`center`,children:(0,d.jsx)(`button`,{type:`button`,"aria-label":D(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(),O.current?.getMap().fitBounds(_(e.bounds),m)},children:g.format(e.count)})},`${e.latitude},${e.longitude}`)),k.map(e=>{let t=j.get(e.at);if(!t)return null;let r=S!==void 0&&e.keys.some(e=>S.includes(e));return(0,d.jsx)(s,{latitude:t.latitude,longitude:t.longitude,anchor:`bottom`,style:{zIndex:+!!r},children:(0,d.jsxs)(`button`,{type:`button`,"aria-label":E(e.keys),"aria-pressed":r,className:`relative block cursor-pointer`,onClick:t=>{t.stopPropagation(),w(e.keys)},children:[(0,d.jsx)(a,{"aria-hidden":!0,className:n(`size-8 drop-shadow`,r?`fill-foreground text-background`:`fill-primary text-primary-foreground`),strokeWidth:1.5}),e.keys.length>1&&(0,d.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{v as RecordsMap};

package/dist/shell/assets/{shared-protobase-ui-C-qDEeIK.js → shared-protobase-ui-CRhV6ipQ.js}

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

package/dist/shell/index.html

@@ -6,15 +6,25 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <title>Protobase</title>
-    <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-C-qDEeIK.js"}}</script>
-    <script type="module" crossorigin src="/assets/index-DhgTXlZ3.js"></script>
+    <!-- The theme before the first paint, so a dark page never flashes light: as theme/theme-preference.ts resolves it, the choice stored in this browser, else the system's. -->
+    <script>
+      var stored = null
+      try {
+        stored = localStorage.getItem('protobase:theme')
+      } catch (error) {
+        if (!(error instanceof DOMException)) throw error
+      }
+      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-CRhV6ipQ.js"}}</script>
+    <script type="module" crossorigin src="/assets/index-BCqsBT_o.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-CyW0VzOi.js">
+    <link rel="modulepreload" crossorigin href="/assets/app-CYs0l-vz.js">
     <link rel="stylesheet" crossorigin href="/assets/app-GUjJKojE.css">
-    <link rel="stylesheet" crossorigin href="/assets/index-DthLyPYI.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-ibaHR5wQ.css">
     <link rel="stylesheet" href="/protobase.theme.css">
   </head>
   <body>

package/dist/shell/protobase.shell.json

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

package/dist/styles.css

@@ -3,11 +3,14 @@
 @import "./tokens.css";
 @source "./";
 
-@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
-
 @layer base {
   html {
     font-size: 16px;
+    color-scheme: light;
+  }
+  /* Native parts, such as scrollbars, date pickers and autofill, follow the theme too. */
+  html[data-theme="dark"] {
+    color-scheme: dark;
   }
   body {
     background: var(--background);

package/dist/theme/theme-preference.js

@@ -0,0 +1,23 @@
+import { guarded } from "../lib/guarded.js";
+//#region src/theme/theme-preference.ts
+const themePreferences = [
+	"light",
+	"dark",
+	"system"
+];
+/** Where the choice is kept in this browser; index.html reads the same key before the first paint. */
+const themeStorageKey = "protobase:theme";
+/** Matches while the system asks for dark. */
+const systemDarkQuery = "(prefers-color-scheme: dark)";
+const isPreference = (value) => themePreferences.includes(value);
+/** The choice made in this browser; the system's until someone picks a theme, or when storage is unavailable. */
+const readThemePreference = (storage) => guarded(() => {
+	const stored = storage.getItem(themeStorageKey);
+	return isPreference(stored) ? stored : "system";
+}, "system");
+/** Remembers a picked theme; following the system again is the default, so it costs no storage. */
+const writeThemePreference = (storage, preference) => guarded(() => preference === "system" ? storage.removeItem(themeStorageKey) : storage.setItem(themeStorageKey, preference), void 0);
+/** The theme to draw in, for a choice and whether the system asks for dark. */
+const resolveTheme = (preference, systemDark) => preference === "system" ? systemDark ? "dark" : "light" : preference;
+//#endregion
+export { readThemePreference, resolveTheme, systemDarkQuery, themePreferences, themeStorageKey, writeThemePreference };

package/dist/theme/theme-provider.js

@@ -0,0 +1,43 @@
+import { useMediaQuery } from "../lib/use-media-query.js";
+import { readThemePreference, resolveTheme, systemDarkQuery, writeThemePreference } from "./theme-preference.js";
+import { createContext, useContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/theme/theme-provider.tsx
+const ThemeContext = createContext(void 0);
+/**
+* Draws the page in the theme this browser chose, or the system's, by setting `data-theme` on the root element, and
+* follows the system and other tabs as they change. index.html sets the same before the first paint.
+*/
+const ThemeProvider = ({ children }) => {
+	const [preference, setPreference] = useState(() => readThemePreference(localStorage));
+	const theme = resolveTheme(preference, useMediaQuery(systemDarkQuery));
+	useEffect(() => {
+		document.documentElement.dataset.theme = theme;
+	}, [theme]);
+	useEffect(() => {
+		const follow = (event) => {
+			if (event.key === "protobase:theme" || event.key === null) setPreference(readThemePreference(localStorage));
+		};
+		window.addEventListener("storage", follow);
+		return () => window.removeEventListener("storage", follow);
+	}, []);
+	const choose = (next) => {
+		writeThemePreference(localStorage, next);
+		setPreference(next);
+	};
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: {
+			preference,
+			theme,
+			choose
+		},
+		children
+	});
+};
+const useTheme = () => {
+	const state = useContext(ThemeContext);
+	if (!state) throw new Error("useTheme needs a ThemeProvider above it");
+	return state;
+};
+//#endregion
+export { ThemeProvider, useTheme };

package/dist/theme.css

@@ -4,6 +4,9 @@
  * imports it, and a plugin's stylesheet references it, so a plugin's utilities draw with the app's theme whatever
  * version of the app loads them, and with these defaults where the app sets none.
  */
+
+/* `dark:` follows the theme the user picked in the app, not only the system's, for the app and plugins alike. */
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
 @theme inline {
   --color-background: var(--background);
   --color-surface: var(--surface);
@@ -33,6 +36,7 @@
   --color-violet-text: var(--violet-text);
   --color-sidebar: var(--sidebar);
   --shadow-pop: var(--shadow-pop);
+  --color-backdrop: var(--backdrop);
   --font-sans: var(--font, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
   --font-mono: var(--font-code, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
   --radius-sm: max(0px, calc(var(--radius, 6px) - 2px));

package/dist/tokens.css

@@ -33,6 +33,7 @@
     --violet-text: #6d28d9;
     --sidebar: #f8f8f9;
     --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.06);
+    --backdrop: #18181b;
     --radius: 6px;
     --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     --font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
@@ -67,5 +68,6 @@
     --violet-text: #c4b5fd;
     --sidebar: #121215;
     --shadow-pop: 0 8px 24px -4px rgb(0 0 0 / 0.6), 0 2px 6px rgb(0 0 0 / 0.4);
+    --backdrop: #000000;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/ui",
-  "version": "0.14.4",
+  "version": "0.14.6",
   "description": "The Protobase admin app and the React hooks and components for custom UI.",
   "license": "Apache-2.0",
   "repository": {
@@ -36,12 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@base-ui/react": "^1.9.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
-    "@protobase/client": "0.14.4",
-    "@protobase/layout": "0.14.4",
-    "@protobase/schema": "0.14.4",
+    "@protobase/client": "0.14.6",
+    "@protobase/layout": "0.14.6",
+    "@protobase/schema": "0.14.6",
     "@sentry/browser": "^11.7.0",
     "@tanstack/react-query": "^5.104.1",
     "@tanstack/react-table": "^9.2.6",