@raster-app/react 0.0.0-stage → 0.1.0-canary-2e1834e

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Monogram
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,137 @@
-# Temporary Holding Version
+# @raster-app/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React bindings for [`@raster-app/sdk`](https://www.npmjs.com/package/@raster-app/sdk): a drop-in
+Raster asset picker, and the provider and hooks it is built on (session, organizations,
+libraries, assets, search, uploads and the navigation model every Raster plugin shares). They
+cache in TanStack Query.
+
+```sh
+npm install @raster-app/react
+```
+
+It takes the host's React, 18 or 19, as a peer dependency. It re-exports all of
+`@raster-app/sdk`, so the client, `toUserMessage` and types such as `Asset` and `Library` come
+from `@raster-app/react` too.
+
+## The picker
+
+`RasterPicker` is Raster's asset picker, drawn in Raster's own design: sign-in with the device
+grant or an API key, Raster's organization switcher, the organization's libraries, search, and
+infinite scroll. A tile opens its asset large, with Pick asset and Open in Raster, which goes
+through the host's `openExternal`, over the asset's versions, where a variant is uploaded or set as
+the default. It uploads into a library from its menu or a drop. An organization or a library is
+read as the pointer reaches it, so it opens at once. It fills its container.
+
+```tsx
+import {
+	RasterPicker,
+	RasterProvider,
+	getFullSizeUrl,
+	localStorageCredentialStore,
+} from '@raster-app/react'
+import '@raster-app/react/styles.css'
+
+function Picker({ onImage }: { onImage: (url: string) => void }) {
+	return (
+		<RasterProvider
+			config={{
+				host: { name: 'Sanity', openExternal: (url) => window.open(url, '_blank') },
+				credentials: localStorageCredentialStore(),
+			}}
+		>
+			<RasterPicker onPick={(asset) => onImage(getFullSizeUrl(asset) ?? '')} />
+		</RasterProvider>
+	)
+}
+```
+
+| Prop             | What it does                                                                                                    |
+| ---------------- | --------------------------------------------------------------------------------------------------------------- |
+| `onPick`         | Called with the picked `Asset`, from any view, and its organization's id. `getFullSizeUrl(asset)` is the image. |
+| `organizationId` | Binds the device sign-in to one organization: any other grant fails with `ORGANIZATION_MISMATCH`.               |
+| `scope`          | The consent the device sign-in asks for: `'org'` when `organizationId` is set, `'user'` otherwise.              |
+| `onError`        | Called once with each `RasterApiError` the picker shows, for the host to log.                                   |
+| `theme`          | `'light'` or `'dark'`. The system's color scheme when unset.                                                    |
+
+The styles are scoped under `.rs`, so they leave the host's own untouched.
+
+## Your own UI
+
+A host that draws its own UI uses the hooks under the same provider.
+
+```tsx
+import {
+	RasterProvider,
+	createRasterClient,
+	localStorageCredentialStore,
+	useAssets,
+	useLibraries,
+	useSession,
+} from '@raster-app/react'
+
+// Build the client once, outside render — a second one means a second session store.
+const client = createRasterClient({
+	host: { name: 'Sanity', openExternal: (url) => window.open(url, '_blank') },
+	credentials: localStorageCredentialStore(),
+})
+
+function App() {
+	return (
+		<RasterProvider client={client}>
+			<Browser />
+		</RasterProvider>
+	)
+}
+
+function Browser() {
+	const { isConfigured } = useSession()
+	const libraries = useLibraries({ organizationId: 'acme' })
+	const assets = useAssets({ organizationId: 'acme', libraryId: 'lib-1' })
+
+	if (!isConfigured) return <SignIn />
+	return <Grid assets={assets.assets ?? []} onLoadMore={assets.loadMore} />
+}
+```
+
+## Provider
+
+| Prop                 | What it does                                                                                                                                                                        |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `client` or `config` | An existing `RasterClient`, or the config for one the provider creates.                                                                                                             |
+| `queryClient`        | The host's own TanStack `QueryClient`, from the same TanStack Query major as this package. Without one the provider creates its own, which shadows the host's for everything below. |
+| `state`              | The `StateStore` where `useRasterNavigation` remembers the last organization and library: `memoryStateStore()` (the default), `localStorageStateStore()`, or the host's own.        |
+
+## Hooks
+
+| Hook                                       | What it gives you                                                                                                    |
+| ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| `useSession()`                             | The credential, `isConfigured` / `isSignedIn`, `userName`, `signOut`.                                                |
+| `useSignIn()`                              | Device grant or API key. One state machine for both. Takes `scope` and `organizationId` for the device grant.        |
+| `useOrganizations()`                       | Everything the credential reaches, from `/me`, as a TanStack query result.                                           |
+| `useLibraries({ organizationId })`         | The libraries in one organization, as a query result. Each carries `access`: `'write'`, `'read'` or `null` for none. |
+| `useAssets({ organizationId, libraryId })` | A library's assets, paged.                                                                                           |
+| `useAssetSearch(scope, query)`             | Debounced, paged search that keeps the last results up while the next query runs.                                    |
+| `useAssetUpload()`                         | Upload, then poll until Raster has finished processing.                                                              |
+| `usePromoteVariant()`                      | Promote a variant to its asset's default, then poll until Raster has swapped the files. Takes an optimistic update.  |
+| `useRasterNavigation({ organizations })`   | `organization → library → asset`, persisted; `refresh()` refetches every Raster query.                               |
+
+## Things worth knowing
+
+- **The provider fixes its client on mount.** An inline `config` builds one client for the
+  provider's life, and a later `client` prop is ignored: remount with a new `key` to switch.
+  Two clients for one credential would each refresh it, spending each other's refresh token.
+- **`credentials` is `undefined` while the store is read.** Gate the sign-in screen on
+  `isConfigured` once it has settled, or it flashes on every launch.
+- **Every fetch aborts when superseded**, which frees its connection for the requests that
+  follow.
+- **The cache belongs to a sign-in.** Query keys carry the session's `credentialIdentity()`,
+  and a sign-out or a different account drops the previous one's queries. For an API key that
+  identity is a digest of the key, so the key itself stays out of the cache.
+- **Errors are `RasterApiError`s.** Branch on `code`, and show `toUserMessage(error)`.
+- **Raster finishes uploads and promotes after answering.** Both hooks poll until the work
+  lands, and settle as `timed-out` when it outlasts the wait: the work is still running, and a
+  later refetch shows it.
+
+## Preact
+
+To use the hooks with Preact, alias `react` and `react-dom` to `preact/compat` in the bundler.

package/dist/context.d.ts

@@ -0,0 +1,30 @@
+import { QueryClient } from '@tanstack/react-query';
+import { type ReactNode } from 'react';
+import { type RasterClient, type RasterClientConfig } from '@raster-app/sdk';
+import { type StateStore } from './state-store.js';
+export type RasterProviderProps = {
+    children: ReactNode;
+    /** Where `useRasterNavigation` remembers the last organization and library. Defaults to memory. */
+    state?: StateStore;
+    /**
+     * The host's own `QueryClient`, if it has one, from the same TanStack Query major as this
+     * package. Without it the provider creates one, which shadows the host's for everything below.
+     */
+    queryClient?: QueryClient;
+} & ({
+    /** An existing client. Use this when the host builds one itself. */
+    client: RasterClient;
+    config?: never;
+} | {
+    /** Config for a client the provider creates and owns. */
+    config: RasterClientConfig;
+    client?: never;
+});
+/**
+ * Provides one `RasterClient` to the tree, and the `QueryClient` its hooks cache in. Both are
+ * fixed on mount: a second client means a second session store, and two stores refreshing one
+ * credential spend each other's refresh token. Remount with a new `key` to switch.
+ */
+export declare function RasterProvider({ children, client, config, state, queryClient, }: RasterProviderProps): import("react").JSX.Element;
+export declare function useRasterClient(): RasterClient;
+export declare function useStateStore(): StateStore;

package/dist/context.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { createContext, useContext, useEffect, useState } from 'react';
+import { createRasterClient } from '@raster-app/sdk';
+import { rasterKeys } from './query-keys.js';
+import { memoryStateStore } from './state-store.js';
+const RasterContext = createContext(null);
+/**
+ * Provides one `RasterClient` to the tree, and the `QueryClient` its hooks cache in. Both are
+ * fixed on mount: a second client means a second session store, and two stores refreshing one
+ * credential spend each other's refresh token. Remount with a new `key` to switch.
+ */
+export function RasterProvider({ children, client, config, state, queryClient, }) {
+    const [value] = useState(() => ({
+        client: client ?? createRasterClient(config),
+        state: state ?? memoryStateStore(),
+        queryClient: queryClient ??
+            // The Raster app's own defaults. Focus returns to a plugin frame on every click into it,
+            // and a refetch each time would replay every page of a long grid.
+            new QueryClient({
+                defaultOptions: { queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false } },
+            }),
+    }));
+    // A sign-in's cache goes when it ends: a sign-out, or somebody else signing in.
+    useEffect(() => {
+        let identity = value.client.session.credentialIdentity();
+        return value.client.session.subscribe(() => {
+            const next = value.client.session.credentialIdentity();
+            if (identity !== null && next !== identity) {
+                value.queryClient.removeQueries({ queryKey: rasterKeys.signIn(identity) });
+            }
+            identity = next;
+        });
+    }, [value]);
+    return (_jsx(QueryClientProvider, { client: value.queryClient, children: _jsx(RasterContext.Provider, { value: value, children: children }) }));
+}
+function useRaster() {
+    const value = useContext(RasterContext);
+    if (value === null) {
+        throw new Error('Raster hooks must be used inside a <RasterProvider>.');
+    }
+    return value;
+}
+export function useRasterClient() {
+    return useRaster().client;
+}
+export function useStateStore() {
+    return useRaster().state;
+}
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AACxE,OAAO,EAAkB,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEtF,OAAO,EAA8C,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAEhG,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAC5C,OAAO,EAAmB,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAEpE,MAAM,aAAa,GAAG,aAAa,CAAqD,IAAI,CAAC,CAAA;AAwB7F;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAC9B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,EACL,WAAW,GACU;IACrB,MAAM,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/B,MAAM,EAAE,MAAM,IAAI,kBAAkB,CAAC,MAAM,CAAC;QAC5C,KAAK,EAAE,KAAK,IAAI,gBAAgB,EAAE;QAClC,WAAW,EACV,WAAW;YACX,yFAAyF;YACzF,kEAAkE;YAClE,IAAI,WAAW,CAAC;gBACf,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,EAAE,GAAG,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,EAAE;aAClF,CAAC;KACH,CAAC,CAAC,CAAA;IAEH,gFAAgF;IAChF,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAA;QACxD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,EAAE;YAC1C,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAA;YACtD,IAAI,QAAQ,KAAK,IAAI,IAAI,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC5C,KAAK,CAAC,WAAW,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,UAAU,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;YAC3E,CAAC;YACD,QAAQ,GAAG,IAAI,CAAA;QAChB,CAAC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACN,KAAC,mBAAmB,IAAC,MAAM,EAAE,KAAK,CAAC,WAAW,YAC7C,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA0B,GACpD,CACtB,CAAA;AACF,CAAC;AAED,SAAS,SAAS;IACjB,MAAM,KAAK,GAAG,UAAU,CAAC,aAAa,CAAC,CAAA;IACvC,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;QACpB,MAAM,IAAI,KAAK,CAAC,sDAAsD,CAAC,CAAA;IACxE,CAAC;IACD,OAAO,KAAK,CAAA;AACb,CAAC;AAED,MAAM,UAAU,eAAe;IAC9B,OAAO,SAAS,EAAE,CAAC,MAAM,CAAA;AAC1B,CAAC;AAED,MAAM,UAAU,aAAa;IAC5B,OAAO,SAAS,EAAE,CAAC,KAAK,CAAA;AACzB,CAAC","sourcesContent":["import { QueryClient, QueryClientProvider } from '@tanstack/react-query'\nimport { type ReactNode, createContext, useContext, useEffect, useState } from 'react'\n\nimport { type RasterClient, type RasterClientConfig, createRasterClient } from '@raster-app/sdk'\n\nimport { rasterKeys } from './query-keys.js'\nimport { type StateStore, memoryStateStore } from './state-store.js'\n\nconst RasterContext = createContext<{ client: RasterClient; state: StateStore } | null>(null)\n\nexport type RasterProviderProps = {\n\tchildren: ReactNode\n\t/** Where `useRasterNavigation` remembers the last organization and library. Defaults to memory. */\n\tstate?: StateStore\n\t/**\n\t * The host's own `QueryClient`, if it has one, from the same TanStack Query major as this\n\t * package. Without it the provider creates one, which shadows the host's for everything below.\n\t */\n\tqueryClient?: QueryClient\n} & (\n\t| {\n\t\t\t/** An existing client. Use this when the host builds one itself. */\n\t\t\tclient: RasterClient\n\t\t\tconfig?: never\n\t  }\n\t| {\n\t\t\t/** Config for a client the provider creates and owns. */\n\t\t\tconfig: RasterClientConfig\n\t\t\tclient?: never\n\t  }\n)\n\n/**\n * Provides one `RasterClient` to the tree, and the `QueryClient` its hooks cache in. Both are\n * fixed on mount: a second client means a second session store, and two stores refreshing one\n * credential spend each other's refresh token. Remount with a new `key` to switch.\n */\nexport function RasterProvider({\n\tchildren,\n\tclient,\n\tconfig,\n\tstate,\n\tqueryClient,\n}: RasterProviderProps) {\n\tconst [value] = useState(() => ({\n\t\tclient: client ?? createRasterClient(config),\n\t\tstate: state ?? memoryStateStore(),\n\t\tqueryClient:\n\t\t\tqueryClient ??\n\t\t\t// The Raster app's own defaults. Focus returns to a plugin frame on every click into it,\n\t\t\t// and a refetch each time would replay every page of a long grid.\n\t\t\tnew QueryClient({\n\t\t\t\tdefaultOptions: { queries: { staleTime: 60 * 1000, refetchOnWindowFocus: false } },\n\t\t\t}),\n\t}))\n\n\t// A sign-in's cache goes when it ends: a sign-out, or somebody else signing in.\n\tuseEffect(() => {\n\t\tlet identity = value.client.session.credentialIdentity()\n\t\treturn value.client.session.subscribe(() => {\n\t\t\tconst next = value.client.session.credentialIdentity()\n\t\t\tif (identity !== null && next !== identity) {\n\t\t\t\tvalue.queryClient.removeQueries({ queryKey: rasterKeys.signIn(identity) })\n\t\t\t}\n\t\t\tidentity = next\n\t\t})\n\t}, [value])\n\n\treturn (\n\t\t<QueryClientProvider client={value.queryClient}>\n\t\t\t<RasterContext.Provider value={value}>{children}</RasterContext.Provider>\n\t\t</QueryClientProvider>\n\t)\n}\n\nfunction useRaster() {\n\tconst value = useContext(RasterContext)\n\tif (value === null) {\n\t\tthrow new Error('Raster hooks must be used inside a <RasterProvider>.')\n\t}\n\treturn value\n}\n\nexport function useRasterClient(): RasterClient {\n\treturn useRaster().client\n}\n\nexport function useStateStore(): StateStore {\n\treturn useRaster().state\n}\n"]}

package/dist/icons.d.ts

@@ -0,0 +1,22 @@
+/** Raster's glyphs, path for path from raster/apps/web: 24-unit viewBox, 1.5 stroke, round caps. */
+declare const SHAPES: {
+    search: import("react").JSX.Element;
+    grid: import("react").JSX.Element;
+    check: import("react").JSX.Element;
+    circle: import("react").JSX.Element;
+    layers: import("react").JSX.Element;
+    star: import("react").JSX.Element;
+    upload: import("react").JSX.Element;
+    'chevron-up-down': import("react").JSX.Element;
+    link: import("react").JSX.Element;
+    x: import("react").JSX.Element;
+    'arrow-right': import("react").JSX.Element;
+    'info-circle': import("react").JSX.Element;
+    raster: import("react").JSX.Element;
+};
+export declare function Icon({ shape, solid, width, }: {
+    shape: keyof typeof SHAPES;
+    solid?: boolean;
+    width?: number;
+}): import("react").JSX.Element;
+export {};

package/dist/icons.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Raster's glyphs, path for path from raster/apps/web: 24-unit viewBox, 1.5 stroke, round caps. */
+const SHAPES = {
+    search: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z" }), _jsx("path", { d: "M16 16l4.5 4.5" })] })),
+    grid: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M3 3h7v7H3z" }), _jsx("path", { d: "M14 3h7v7h-7z" }), _jsx("path", { d: "M14 14h7v7h-7z" }), _jsx("path", { d: "M3 14h7v7H3z" })] })),
+    check: _jsx("path", { d: "M20 6L9 17l-5-5" }),
+    circle: _jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    layers: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }), _jsx("path", { d: "M2 17l10 5 10-5" }), _jsx("path", { d: "M2 12l10 5 10-5" })] })),
+    star: (_jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })),
+    upload: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4" }), _jsx("path", { d: "M17 8l-5-5-5 5" }), _jsx("path", { d: "M12 3v12" })] })),
+    'chevron-up-down': _jsx("path", { d: "M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517" }),
+    link: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71" }), _jsx("path", { d: "M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71" })] })),
+    x: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M18 6L6 18" }), _jsx("path", { d: "M6 6l12 12" })] })),
+    'arrow-right': (_jsxs(_Fragment, { children: [_jsx("path", { d: "M5 12h14" }), _jsx("path", { d: "M12 5l7 7-7 7" })] })),
+    'info-circle': (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "10" }), _jsx("path", { d: "M12 16v-4" }), _jsx("circle", { cx: "12", cy: "8", r: ".5" })] })),
+    raster: (_jsxs(_Fragment, { children: [_jsx("path", { d: "M0 3C0 1.34315 1.34315 0 3 0H11V11H0V3Z" }), _jsx("path", { d: "M13 0H18.5C21.5376 0 24 2.46243 24 5.5V5.5C24 8.53757 21.5376 11 18.5 11H13V0Z" }), _jsx("path", { d: "M0 13H11V24H3C1.34315 24 0 22.6569 0 21V13Z" }), _jsx("path", { d: "M13 13H18C21.3137 13 24 15.6863 24 19V24H13V13Z" })] })),
+};
+export function Icon({ shape, solid = false, width = 14, }) {
+    return (_jsx("svg", { style: { width, flexShrink: 0 }, fill: solid ? 'currentColor' : 'none', stroke: solid ? undefined : 'currentColor', strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: solid ? undefined : 1.5, viewBox: "0 0 24 24", "aria-hidden": "true", children: SHAPES[shape] }));
+}
+//# sourceMappingURL=icons.js.map

package/dist/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","sourceRoot":"","sources":["../src/icons.tsx"],"names":[],"mappings":";AAEA,oGAAoG;AACpG,MAAM,MAAM,GAAG;IACd,MAAM,EAAE,CACP,8BACC,eAAM,CAAC,EAAC,sDAAsD,GAAG,EACjE,eAAM,CAAC,EAAC,gBAAgB,GAAG,IACzB,CACH;IACD,IAAI,EAAE,CACL,8BACC,eAAM,CAAC,EAAC,aAAa,GAAG,EACxB,eAAM,CAAC,EAAC,eAAe,GAAG,EAC1B,eAAM,CAAC,EAAC,gBAAgB,GAAG,EAC3B,eAAM,CAAC,EAAC,cAAc,GAAG,IACvB,CACH;IACD,KAAK,EAAE,eAAM,CAAC,EAAC,iBAAiB,GAAG;IACnC,MAAM,EAAE,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG;IACzC,MAAM,EAAE,CACP,8BACC,eAAM,CAAC,EAAC,2BAA2B,GAAG,EACtC,eAAM,CAAC,EAAC,iBAAiB,GAAG,EAC5B,eAAM,CAAC,EAAC,iBAAiB,GAAG,IAC1B,CACH;IACD,IAAI,EAAE,CACL,eAAM,CAAC,EAAC,8FAA8F,GAAG,CACzG;IACD,MAAM,EAAE,CACP,8BACC,eAAM,CAAC,EAAC,yCAAyC,GAAG,EACpD,eAAM,CAAC,EAAC,gBAAgB,GAAG,EAC3B,eAAM,CAAC,EAAC,UAAU,GAAG,IACnB,CACH;IACD,iBAAiB,EAAE,eAAM,CAAC,EAAC,gDAAgD,GAAG;IAC9E,IAAI,EAAE,CACL,8BACC,eAAM,CAAC,EAAC,0DAA0D,GAAG,EACrE,eAAM,CAAC,EAAC,2DAA2D,GAAG,IACpE,CACH;IACD,CAAC,EAAE,CACF,8BACC,eAAM,CAAC,EAAC,YAAY,GAAG,EACvB,eAAM,CAAC,EAAC,YAAY,GAAG,IACrB,CACH;IACD,aAAa,EAAE,CACd,8BACC,eAAM,CAAC,EAAC,UAAU,GAAG,EACrB,eAAM,CAAC,EAAC,eAAe,GAAG,IACxB,CACH;IACD,aAAa,EAAE,CACd,8BACC,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EACjC,eAAM,CAAC,EAAC,WAAW,GAAG,EACtB,iBAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,IAAI,GAAG,IAC9B,CACH;IACD,MAAM,EAAE,CACP,8BACC,eAAM,CAAC,EAAC,yCAAyC,GAAG,EACpD,eAAM,CAAC,EAAC,gFAAgF,GAAG,EAC3F,eAAM,CAAC,EAAC,6CAA6C,GAAG,EACxD,eAAM,CAAC,EAAC,iDAAiD,GAAG,IAC1D,CACH;CACmC,CAAA;AAErC,MAAM,UAAU,IAAI,CAAC,EACpB,KAAK,EACL,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,EAAE,GAKV;IACA,OAAO,CACN,cACC,KAAK,EAAE,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC,EAAE,EAC/B,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,EACrC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,cAAc,EAC1C,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EACpC,OAAO,EAAC,WAAW,iBACP,MAAM,YAEjB,MAAM,CAAC,KAAK,CAAC,GACT,CACN,CAAA;AACF,CAAC","sourcesContent":["import type { ReactNode } from 'react'\n\n/** Raster's glyphs, path for path from raster/apps/web: 24-unit viewBox, 1.5 stroke, round caps. */\nconst SHAPES = {\n\tsearch: (\n\t\t<>\n\t\t\t<path d=\"M11 17.25a6.25 6.25 0 110-12.5 6.25 6.25 0 010 12.5z\" />\n\t\t\t<path d=\"M16 16l4.5 4.5\" />\n\t\t</>\n\t),\n\tgrid: (\n\t\t<>\n\t\t\t<path d=\"M3 3h7v7H3z\" />\n\t\t\t<path d=\"M14 3h7v7h-7z\" />\n\t\t\t<path d=\"M14 14h7v7h-7z\" />\n\t\t\t<path d=\"M3 14h7v7H3z\" />\n\t\t</>\n\t),\n\tcheck: <path d=\"M20 6L9 17l-5-5\" />,\n\tcircle: <circle cx=\"12\" cy=\"12\" r=\"10\" />,\n\tlayers: (\n\t\t<>\n\t\t\t<path d=\"M12 2L2 7l10 5 10-5-10-5z\" />\n\t\t\t<path d=\"M2 17l10 5 10-5\" />\n\t\t\t<path d=\"M2 12l10 5 10-5\" />\n\t\t</>\n\t),\n\tstar: (\n\t\t<path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\" />\n\t),\n\tupload: (\n\t\t<>\n\t\t\t<path d=\"M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4\" />\n\t\t\t<path d=\"M17 8l-5-5-5 5\" />\n\t\t\t<path d=\"M12 3v12\" />\n\t\t</>\n\t),\n\t'chevron-up-down': <path d=\"M17 8.517L12 3 7 8.517M7 15.48l5 5.517 5-5.517\" />,\n\tlink: (\n\t\t<>\n\t\t\t<path d=\"M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71\" />\n\t\t\t<path d=\"M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71\" />\n\t\t</>\n\t),\n\tx: (\n\t\t<>\n\t\t\t<path d=\"M18 6L6 18\" />\n\t\t\t<path d=\"M6 6l12 12\" />\n\t\t</>\n\t),\n\t'arrow-right': (\n\t\t<>\n\t\t\t<path d=\"M5 12h14\" />\n\t\t\t<path d=\"M12 5l7 7-7 7\" />\n\t\t</>\n\t),\n\t'info-circle': (\n\t\t<>\n\t\t\t<circle cx=\"12\" cy=\"12\" r=\"10\" />\n\t\t\t<path d=\"M12 16v-4\" />\n\t\t\t<circle cx=\"12\" cy=\"8\" r=\".5\" />\n\t\t</>\n\t),\n\traster: (\n\t\t<>\n\t\t\t<path d=\"M0 3C0 1.34315 1.34315 0 3 0H11V11H0V3Z\" />\n\t\t\t<path d=\"M13 0H18.5C21.5376 0 24 2.46243 24 5.5V5.5C24 8.53757 21.5376 11 18.5 11H13V0Z\" />\n\t\t\t<path d=\"M0 13H11V24H3C1.34315 24 0 22.6569 0 21V13Z\" />\n\t\t\t<path d=\"M13 13H18C21.3137 13 24 15.6863 24 19V24H13V13Z\" />\n\t\t</>\n\t),\n} satisfies Record<string, ReactNode>\n\nexport function Icon({\n\tshape,\n\tsolid = false,\n\twidth = 14,\n}: {\n\tshape: keyof typeof SHAPES\n\tsolid?: boolean\n\twidth?: number\n}) {\n\treturn (\n\t\t<svg\n\t\t\tstyle={{ width, flexShrink: 0 }}\n\t\t\tfill={solid ? 'currentColor' : 'none'}\n\t\t\tstroke={solid ? undefined : 'currentColor'}\n\t\t\tstrokeLinecap=\"round\"\n\t\t\tstrokeLinejoin=\"round\"\n\t\t\tstrokeWidth={solid ? undefined : 1.5}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\taria-hidden=\"true\"\n\t\t>\n\t\t\t{SHAPES[shape]}\n\t\t</svg>\n\t)\n}\n"]}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from '@raster-app/sdk';
+export { RasterProvider, type RasterProviderProps, useRasterClient } from './context.js';
+export { type StateStore, localStorageStateStore, memoryStateStore } from './state-store.js';
+export { type RasterSession, useSession } from './use-session.js';
+export { type SignIn, type SignInState, useSignIn } from './use-sign-in.js';
+export { useOrganizations } from './use-organizations.js';
+export { type LibraryWithAccess, useLibraries } from './use-libraries.js';
+export { type AssetsResource, useAssets } from './use-assets.js';
+export { type AssetSearch, type SearchScope, useAssetSearch } from './use-asset-search.js';
+export { type AssetUpload, type UploadState, useAssetUpload } from './use-asset-upload.js';
+export { type PromoteState, type VariantPromote, usePromoteVariant } from './use-promote-variant.js';
+export { type RasterNavigation, useRasterNavigation } from './use-navigation.js';
+export { type RasterPickerProps, RasterPicker } from './raster-picker.js';

package/dist/index.js

@@ -0,0 +1,15 @@
+// A React host installs this package alone, so it carries the core's whole API.
+export * from '@raster-app/sdk';
+export { RasterProvider, useRasterClient } from './context.js';
+export { localStorageStateStore, memoryStateStore } from './state-store.js';
+export { useSession } from './use-session.js';
+export { useSignIn } from './use-sign-in.js';
+export { useOrganizations } from './use-organizations.js';
+export { useLibraries } from './use-libraries.js';
+export { useAssets } from './use-assets.js';
+export { useAssetSearch } from './use-asset-search.js';
+export { useAssetUpload } from './use-asset-upload.js';
+export { usePromoteVariant } from './use-promote-variant.js';
+export { useRasterNavigation } from './use-navigation.js';
+export { RasterPicker } from './raster-picker.js';
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,cAAc,iBAAiB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAA4B,eAAe,EAAE,MAAM,cAAc,CAAA;AACxF,OAAO,EAAmB,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAA;AAC5F,OAAO,EAAsB,UAAU,EAAE,MAAM,kBAAkB,CAAA;AACjE,OAAO,EAAiC,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAA0B,YAAY,EAAE,MAAM,oBAAoB,CAAA;AACzE,OAAO,EAAuB,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAChE,OAAO,EAAsC,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAAsC,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAC1F,OAAO,EAA0C,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AACpG,OAAO,EAAyB,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAChF,OAAO,EAA0B,YAAY,EAAE,MAAM,oBAAoB,CAAA","sourcesContent":["// A React host installs this package alone, so it carries the core's whole API.\nexport * from '@raster-app/sdk'\n\nexport { RasterProvider, type RasterProviderProps, useRasterClient } from './context.js'\nexport { type StateStore, localStorageStateStore, memoryStateStore } from './state-store.js'\nexport { type RasterSession, useSession } from './use-session.js'\nexport { type SignIn, type SignInState, useSignIn } from './use-sign-in.js'\nexport { useOrganizations } from './use-organizations.js'\nexport { type LibraryWithAccess, useLibraries } from './use-libraries.js'\nexport { type AssetsResource, useAssets } from './use-assets.js'\nexport { type AssetSearch, type SearchScope, useAssetSearch } from './use-asset-search.js'\nexport { type AssetUpload, type UploadState, useAssetUpload } from './use-asset-upload.js'\nexport { type PromoteState, type VariantPromote, usePromoteVariant } from './use-promote-variant.js'\nexport { type RasterNavigation, useRasterNavigation } from './use-navigation.js'\nexport { type RasterPickerProps, RasterPicker } from './raster-picker.js'\n"]}

package/dist/picker-parts.d.ts

@@ -0,0 +1,71 @@
+import { type ReactNode } from 'react';
+import { type Asset, type AssetVariant, type Organization, type RasterApiError, type SearchHit } from '@raster-app/sdk';
+import type { PromoteState } from './use-promote-variant.js';
+import type { UploadState } from './use-asset-upload.js';
+export type ReportError = ((error: RasterApiError) => void) | undefined;
+export declare function Brand(): import("react").JSX.Element;
+export declare function ErrorCard({ error, onError }: {
+    error: RasterApiError;
+    onError: ReportError;
+}): import("react").JSX.Element;
+export declare function Empty({ glyph, title, text, children, }: {
+    glyph: 'grid' | '∅';
+    title: string;
+    text: string;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * Raster's grid tile: the picture over its blurred fill, or a checkerboard where it has alpha,
+ * with a pill for a badge on the left and one for an action on the right.
+ */
+export declare function Tile({ asset, onOpen, selected, badge, action, }: {
+    asset: Asset | SearchHit | AssetVariant;
+    onOpen: () => void;
+    /** Whether this is the version shown large, among an asset's versions. */
+    selected?: boolean;
+    badge?: ReactNode;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * An opened asset or variant: the image large, its facts, and what the host can do with it.
+ * Raster opens through the host, which reaches the browser from a Figma plugin too.
+ */
+export declare function Detail({ item, busy, onPick, }: {
+    item: Asset | SearchHit | AssetVariant;
+    /** While the asset is read in full for the host. */
+    busy: boolean;
+    onPick: () => void;
+}): import("react").JSX.Element;
+/** A file on its way into Raster, as the grid shows it until Raster has processed it. */
+export declare function PendingTile({ name, preview, status, }: {
+    name: string;
+    preview: string;
+    status: string;
+}): import("react").JSX.Element;
+/** A control that opens the file chooser, drawn as whatever `className` makes it. */
+export declare function FilePicker({ className, disabled, focusable, onFile, children, }: {
+    className: string;
+    disabled: boolean;
+    focusable?: boolean;
+    onFile: (file: File) => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Where an upload and a promote stand, beside the header; each failure shows as an error. */
+export declare function Progress({ upload, promote }: {
+    upload: UploadState;
+    promote: PromoteState;
+}): import("react").JSX.Element;
+/** Raster's organization switcher: the current organization, over a menu of every one. */
+export declare function OrganizationSwitcher({ organizations, current, onIntent, onSelect, }: {
+    organizations: Array<Organization>;
+    current: Organization | undefined;
+    onIntent: (organization: Organization) => void;
+    onSelect: (organizationId: string) => void;
+}): import("react").JSX.Element;
+/**
+ * The spinner at the end of the grid, which asks for the next page once it is within two rows
+ * of view. Keyed by the item count, so it looks again after each page lands.
+ */
+export declare function Sentinel({ onVisible }: {
+    onVisible: () => void;
+}): import("react").JSX.Element;

package/dist/picker-parts.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { formatDateLong, formatFileSize, formatRelativeTime, getBlurhashPlaceholder, getPreviewUrl, getThumbUrl, isReady, toUserMessage, } from '@raster-app/sdk';
+import { useRasterClient } from './context.js';
+import { Icon } from './icons.js';
+export function Brand() {
+    return (_jsxs("div", { className: "rs-brand", children: [_jsx(Icon, { shape: "raster", solid: true, width: 18 }), "Raster"] }));
+}
+// Strict Mode runs an effect twice in development; the host hears of each error once.
+const reported = new WeakSet();
+export function ErrorCard({ error, onError }) {
+    useEffect(() => {
+        if (reported.has(error))
+            return;
+        reported.add(error);
+        onError?.(error);
+    }, [error, onError]);
+    return (_jsx("p", { role: "alert", className: "rs-card", children: toUserMessage(error) }));
+}
+export function Empty({ glyph, title, text, children, }) {
+    return (_jsxs("div", { className: "rs-empty", children: [_jsx("div", { className: "rs-empty-glyph", children: glyph === 'grid' ? _jsx(Icon, { shape: "grid" }) : glyph }), _jsx("h2", { className: "rs-heading", children: title }), _jsx("p", { className: "rs-muted rs-small", children: text }), children] }));
+}
+/**
+ * Raster's grid tile: the picture over its blurred fill, or a checkerboard where it has alpha,
+ * with a pill for a badge on the left and one for an action on the right.
+ */
+export function Tile({ asset, onOpen, selected, badge, action, }) {
+    const [loaded, setLoaded] = useState(false);
+    const ready = isReady(asset);
+    const thumb = getThumbUrl(asset);
+    const fill = ('blurhash' in asset ? getBlurhashPlaceholder(asset) : null) ?? thumb;
+    const transparent = 'contentType' in asset && /png|svg|webp|gif/.test(asset.contentType ?? '');
+    const size = 'size' in asset ? formatFileSize(asset.size) : '';
+    const updated = 'updated' in asset ? formatRelativeTime(asset.updated) : '';
+    return (_jsxs("div", { className: "rs-tile", children: [_jsxs("button", { type: "button", className: "rs-asset-thumb", "data-loaded": loaded || undefined, disabled: !ready, "aria-pressed": selected, title: 'created' in asset && asset.created
+                    ? `Created ${formatDateLong(asset.created)}`
+                    : undefined, onClick: onOpen, children: [transparent ? (_jsx("div", { className: "rs-transparent" })) : (fill && _jsx("img", { className: "rs-thumb-blur", src: fill, alt: "" })), _jsx("div", { className: "rs-thumb-preview", children: thumb && (_jsx("img", { src: thumb, alt: "", loading: "lazy", decoding: "async", onLoad: () => setLoaded(true), onError: () => setLoaded(true) }, thumb)) }), _jsxs("div", { className: "rs-thumb-meta", children: [_jsx("span", { className: "rs-thumb-title", children: asset.name }), _jsxs("span", { className: "rs-thumb-subtitle", children: [!ready && _jsx("span", { children: "Not ready" }), ready && size && _jsx("span", { children: size }), ready && updated && _jsx("span", { children: updated }), ready && !size && !updated && asset.width && asset.height && (_jsxs("span", { children: [asset.width, " \u00D7 ", asset.height] }))] })] })] }), badge, action] }));
+}
+/**
+ * An opened asset or variant: the image large, its facts, and what the host can do with it.
+ * Raster opens through the host, which reaches the browser from a Figma plugin too.
+ */
+export function Detail({ item, busy, onPick, }) {
+    const { host } = useRasterClient();
+    const image = getPreviewUrl(item);
+    const appUrl = item.appUrl;
+    const facts = [
+        item.width && item.height ? `${item.width} × ${item.height}` : '',
+        'size' in item ? formatFileSize(item.size) : '',
+        'created' in item && item.created ? `Created ${formatDateLong(item.created)}` : '',
+    ].filter((fact) => fact !== '');
+    return (_jsxs("div", { className: "rs-detail", children: [_jsx("div", { className: "rs-detail-image", children: image && _jsx("img", { src: image, alt: "" }, image) }), _jsxs("div", { className: "rs-detail-info", children: [_jsx("h2", { className: "rs-heading", children: item.name }), facts.length > 0 && _jsx("p", { className: "rs-muted rs-small", children: facts.join(' · ') }), _jsx("button", { type: "button", className: "rs-button rs-button-primary", disabled: !isReady(item) || busy, onClick: onPick, children: "Pick asset" }), appUrl && (_jsxs("a", { className: "rs-button rs-button-secondary", href: appUrl, target: "_blank", rel: "noreferrer", onClick: (event) => {
+                            event.preventDefault();
+                            host.openExternal(appUrl);
+                        }, children: [_jsx(Icon, { shape: "link", width: 12.25 }), "Open in Raster"] }))] })] }));
+}
+/** A file on its way into Raster, as the grid shows it until Raster has processed it. */
+export function PendingTile({ name, preview, status, }) {
+    return (_jsx("div", { className: "rs-tile", children: _jsxs("div", { className: "rs-asset-thumb", "data-loaded": true, "aria-busy": "true", children: [_jsx("img", { className: "rs-thumb-blur", src: preview, alt: "" }), _jsx("div", { className: "rs-thumb-preview", children: _jsx("img", { src: preview, alt: "" }) }), _jsxs("div", { className: "rs-thumb-meta", children: [_jsx("span", { className: "rs-thumb-title", children: name }), _jsxs("span", { className: "rs-thumb-subtitle", children: [_jsx("span", { className: "rs-spinner" }), status] })] })] }) }));
+}
+/** A control that opens the file chooser, drawn as whatever `className` makes it. */
+export function FilePicker({ className, disabled, focusable = true, onFile, children, }) {
+    return (_jsxs("label", { className: className, children: [children, _jsx("input", { className: "rs-visually-hidden", type: "file", disabled: disabled, tabIndex: focusable ? 0 : -1, onChange: (event) => {
+                    const file = event.target.files?.[0];
+                    // Cleared, so picking the same file again uploads it again.
+                    event.target.value = '';
+                    if (file)
+                        onFile(file);
+                } })] }));
+}
+const UPLOADS = {
+    uploading: 'Uploading',
+    processing: 'Processing',
+    done: 'Uploaded',
+    'timed-out': 'Still processing',
+};
+const PROMOTES = {
+    promoting: 'Setting as default',
+    done: 'Default set',
+    'timed-out': 'Still setting as default',
+};
+/** Where an upload and a promote stand, beside the header; each failure shows as an error. */
+export function Progress({ upload, promote }) {
+    return (_jsxs(_Fragment, { children: [upload.status !== 'idle' && upload.status !== 'error' && (_jsx(Status, { status: upload.status, text: UPLOADS[upload.status] })), promote.status !== 'idle' && promote.status !== 'error' && (_jsx(Status, { status: promote.status, text: PROMOTES[promote.status] }))] }));
+}
+function Status({ status, text }) {
+    let glyph = _jsx("span", { className: "rs-spinner" });
+    if (status === 'done')
+        glyph = _jsx(Icon, { shape: "check" });
+    if (status === 'timed-out')
+        glyph = _jsx(Icon, { shape: "info-circle" });
+    return (_jsxs("span", { className: "rs-status", "data-status": status, children: [glyph, text] }));
+}
+/** Raster's organization switcher: the current organization, over a menu of every one. */
+export function OrganizationSwitcher({ organizations, current, onIntent, onSelect, }) {
+    const [open, setOpen] = useState(false);
+    const root = useRef(null);
+    useEffect(() => {
+        if (!open)
+            return;
+        const close = (event) => {
+            const outside = event.target instanceof Node && !root.current?.contains(event.target);
+            if (event instanceof KeyboardEvent ? event.key === 'Escape' : outside)
+                setOpen(false);
+        };
+        document.addEventListener('mousedown', close);
+        document.addEventListener('keydown', close);
+        return () => {
+            document.removeEventListener('mousedown', close);
+            document.removeEventListener('keydown', close);
+        };
+    }, [open]);
+    return (_jsxs("div", { className: "rs-org", ref: root, children: [_jsxs("button", { type: "button", className: "rs-sidebar-item rs-org-trigger", "aria-expanded": open, onClick: () => setOpen(!open), children: [_jsx(Avatar, { name: current?.name ?? current?.id ?? '' }), _jsx("span", { className: "rs-library-name", children: current?.name ?? current?.id }), _jsx(Icon, { shape: "chevron-up-down" })] }), open && (_jsxs("div", { className: "rs-menu", children: [_jsx("div", { className: "rs-menu-heading", children: "Organizations" }), organizations.map((organization) => (_jsxs("button", { type: "button", className: organization.id === current?.id ? 'rs-sidebar-item is-active' : 'rs-sidebar-item', onMouseEnter: () => onIntent(organization), onFocus: () => onIntent(organization), onClick: () => {
+                            setOpen(false);
+                            onSelect(organization.id);
+                        }, children: [_jsx(Avatar, { name: organization.name ?? organization.id }), _jsx("span", { className: "rs-library-name", children: organization.name ?? organization.id })] }, organization.id)))] }))] }));
+}
+/** Raster's letter avatar, on a gradient hued from the name as the app hues it. */
+function Avatar({ name }) {
+    if (name === '')
+        return null;
+    let hex = '';
+    for (let index = 0; index < Math.min(name.length, 10); index++) {
+        hex += `000${name.charCodeAt(index).toString(16)}`.slice(-4);
+    }
+    const hue = Number.parseInt(hex, 16) % 360;
+    return (_jsx("span", { className: "rs-avatar", style: {
+            backgroundImage: `linear-gradient(45deg, hsl(${hue}, 70%, 50%), hsl(${(hue + 60) % 360}, 70%, 50%))`,
+        }, children: name.charAt(0).toUpperCase() }));
+}
+/**
+ * The spinner at the end of the grid, which asks for the next page once it is within two rows
+ * of view. Keyed by the item count, so it looks again after each page lands.
+ */
+export function Sentinel({ onVisible }) {
+    const spinner = useRef(null);
+    useEffect(() => {
+        const node = spinner.current;
+        if (node === null || typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            if (entries.some((entry) => entry.isIntersecting))
+                onVisible();
+        }, { root: node.closest('.rs-content'), rootMargin: '0px 0px 360px 0px' });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [onVisible]);
+    return _jsx("span", { ref: spinner, className: "rs-spinner" });
+}
+//# sourceMappingURL=picker-parts.js.map