@sanity/workbench 0.1.0-alpha.13 → 0.1.0-alpha.15

package/src/system/root.machine.ts

@@ -3,15 +3,23 @@ import { raise, sendTo, setup, type ActorOptions } from "xstate";
 
 import { authLogic } from "./auth.machine";
 import { inspect } from "./inspect";
+import {
+  type SystemPreferencesAdapter,
+  systemPreferencesLogic,
+} from "./system-preferences.machine";
 import {
   telemetryLogic,
   type WorkbenchUserProperties,
 } from "./telemetry.machine";
 
-type OSInput = WorkbenchUserProperties;
+type OSInput = WorkbenchUserProperties & {
+  systemPreferencesAdapter?: SystemPreferencesAdapter;
+};
+
 type OSContext = {
   instance: SanityInstance;
   userProperties: WorkbenchUserProperties;
+  systemPreferencesAdapter: SystemPreferencesAdapter | undefined;
 };
 
 /**
@@ -28,7 +36,12 @@ export interface OSBaseInput extends Pick<OSContext, "instance"> {}
  * import { os, createOSOptions } from "@sanity/workbench/system";
  * import { useActor } from "@xstate/react";
  *
- * const [state, send] = useActor(os, createOSOptions());
+ * const [state, send] = useActor(os, createOSOptions({
+ *   version: "1.0.0",
+ *   organizationId: "...",
+ *   environment: "production",
+ *   userAgent: navigator.userAgent,
+ * }));
  * ```
  */
 export const os = setup({
@@ -43,11 +56,13 @@ export const os = setup({
     children: {} as {
       auth: "auth";
       telemetry: "telemetry";
+      "system-preferences": "systemPreferences";
     },
   },
   actors: {
     auth: authLogic,
     telemetry: telemetryLogic,
+    systemPreferences: systemPreferencesLogic,
   },
   guards: {
     hasTag: (_, params: { hasTag: boolean }) => params.hasTag,
@@ -72,6 +87,7 @@ export const os = setup({
       environment: input.environment,
       userAgent: input.userAgent,
     },
+    systemPreferencesAdapter: input.systemPreferencesAdapter,
   }),
   initial: "booting",
   invoke: [
@@ -121,6 +137,12 @@ export const os = setup({
         },
       ],
     },
+    {
+      id: "system-preferences",
+      systemId: "system-preferences",
+      src: "systemPreferences",
+      input: ({ context }) => ({ adapter: context.systemPreferencesAdapter }),
+    },
   ],
   states: {
     booting: {
@@ -152,8 +174,11 @@ export const os = setup({
 });
 
 /**
- * Creates a set of default options for the OS machine, including passing
- * the sanity configuration for the internal instance.
+ * Creates a set of default options for the OS machine. Forwards the workbench
+ * user properties to the machine's input and wires the structured-logging
+ * `inspect` callback. Browser-specific concerns (color-scheme seeding,
+ * persistence) live in the {@link SystemPreferencesAdapter} the host passes
+ * via `systemPreferencesAdapter`.
  * @public
  */
 export function createOSOptions(input: OSInput) {

package/src/system/system-preferences.machine.ts

@@ -0,0 +1,215 @@
+import { assign, fromCallback, sendTo, setup } from "xstate";
+
+type ColorScheme = "light" | "dark";
+
+type ColorSchemePreference = "system" | ColorScheme;
+
+/**
+ * The system-preferences machine's context. Consumers read fields directly
+ * (e.g. via `useSelector`) rather than going through a resolver utility —
+ * the action handlers keep `colorScheme` in sync with `preferredColorScheme`
+ * and `osColorScheme`.
+ *
+ * Note: `colorScheme` is intentionally stored as derived state in context so
+ * consumers can read the resolved value directly without a utility. The
+ * action handlers below are the single source of truth for the resolution.
+ * @public
+ */
+export type SystemPreferencesContext = {
+  /** User's color scheme choice; `system` defers to the OS preference. */
+  preferredColorScheme: ColorSchemePreference;
+  /** Last reported OS color scheme. Used to resolve `colorScheme` when the
+   * preference is `system`. */
+  osColorScheme: ColorScheme;
+  /** Resolved color scheme — what the UI should render. Recomputed by the
+   * action handlers whenever an input changes. */
+  colorScheme: ColorScheme;
+};
+
+const DEFAULT_PREFERRED_COLOR_SCHEME: ColorSchemePreference = "system";
+const DEFAULT_OS_COLOR_SCHEME: ColorScheme = "light";
+
+/**
+ * Events the system-preferences machine accepts. Both originate from the
+ * host's adapter — `preferredColorScheme.set` is also forwarded back to it
+ * so it can persist the user's choice.
+ * @public
+ */
+export type SystemPreferencesEvent =
+  | {
+      type: "preferredColorScheme.set";
+      preferredColorScheme: ColorSchemePreference;
+    }
+  | {
+      type: "osColorScheme.set";
+      osColorScheme: ColorScheme;
+    };
+
+/**
+ * Adapter interface the host implements to give the system-preferences
+ * machine access to the user's environment (OS color scheme, persistent
+ * storage, cross-context change notifications).
+ *
+ * The package owns all orchestration — synchronous seeding, idempotent
+ * persistence, mapping cleared storage to `"system"`. The host's
+ * implementation is pure DOM/storage glue: read, write, subscribe.
+ * @public
+ */
+export type SystemPreferencesAdapter = {
+  /** Read the user's stored preference. `null` means "no preference set"
+   * (the machine treats this as `"system"`). */
+  getPreferredColorScheme: () => ColorSchemePreference | null;
+  /** Write the user's preference to persistent storage. */
+  persistPreferredColorScheme: (value: ColorSchemePreference) => void;
+  /** Subscribe to cross-context preference changes (e.g. another tab
+   * writing to the shared storage). The callback receives the new stored
+   * value (or `null` if it was cleared). Returns an unsubscribe function. */
+  subscribePreferredColorScheme: (
+    callback: (next: ColorSchemePreference | null) => void,
+  ) => () => void;
+  /** Read the current OS-detected color scheme. */
+  getOsColorScheme: () => ColorScheme;
+  /** Subscribe to OS color-scheme changes (e.g. user flipping dark mode).
+   * Returns an unsubscribe function. */
+  subscribeOsColorScheme: (callback: (next: ColorScheme) => void) => () => void;
+};
+
+const resolveColorScheme = (
+  preferred: ColorSchemePreference,
+  osColorScheme: ColorScheme,
+): ColorScheme => (preferred === "system" ? osColorScheme : preferred);
+
+// Internal bridge actor — subscribes to the host's adapter for runtime
+// changes and persists user-driven preference changes when the parent
+// forwards them. No-op if the host didn't pass an adapter (SSR, tests).
+type AdapterBridgeReceiveEvent = Extract<
+  SystemPreferencesEvent,
+  { type: "preferredColorScheme.set" }
+>;
+
+const adapterBridgeLogic = fromCallback<
+  AdapterBridgeReceiveEvent,
+  SystemPreferencesAdapter | undefined,
+  SystemPreferencesEvent
+>(({ input: adapter, sendBack, receive }) => {
+  if (!adapter) return;
+
+  const unsubscribePreferredColorScheme = adapter.subscribePreferredColorScheme(
+    (next) => {
+      // Falls back to `"system"` so an external clear (another tab deleting
+      // the key) resets the preference rather than silently keeping the
+      // previous value.
+      sendBack({
+        type: "preferredColorScheme.set",
+        preferredColorScheme: next ?? "system",
+      });
+    },
+  );
+
+  const unsubscribeOs = adapter.subscribeOsColorScheme((next) => {
+    sendBack({ type: "osColorScheme.set", osColorScheme: next });
+  });
+
+  receive((event) => {
+    // Idempotent: skip writes that match the current stored value so a
+    // `preferredColorScheme.set` originating from cross-context change
+    // doesn't loop back into another write.
+    if (adapter.getPreferredColorScheme() === event.preferredColorScheme)
+      return;
+
+    adapter.persistPreferredColorScheme(event.preferredColorScheme);
+  });
+
+  return () => {
+    unsubscribePreferredColorScheme();
+    unsubscribeOs();
+  };
+});
+
+/**
+ * @internal
+ */
+export const systemPreferencesLogic = setup({
+  types: {
+    input: {} as { adapter?: SystemPreferencesAdapter },
+    context: {} as SystemPreferencesContext & {
+      adapter: SystemPreferencesAdapter | undefined;
+    },
+    events: {} as SystemPreferencesEvent,
+  },
+  actors: {
+    adapterBridge: adapterBridgeLogic,
+  },
+  actions: {
+    setPreferredColorScheme: assign({
+      preferredColorScheme: (
+        _,
+        params: { preferredColorScheme: ColorSchemePreference },
+      ) => params.preferredColorScheme,
+      colorScheme: (
+        { context },
+        params: { preferredColorScheme: ColorSchemePreference },
+      ) =>
+        resolveColorScheme(params.preferredColorScheme, context.osColorScheme),
+    }),
+    setOsColorScheme: assign({
+      osColorScheme: (_, params: { osColorScheme: ColorScheme }) =>
+        params.osColorScheme,
+      colorScheme: ({ context }, params: { osColorScheme: ColorScheme }) =>
+        resolveColorScheme(context.preferredColorScheme, params.osColorScheme),
+    }),
+  },
+}).createMachine({
+  id: "system-preferences",
+  initial: "ready",
+  context: ({ input }) => {
+    const adapter = input.adapter;
+    const preferredColorScheme =
+      adapter?.getPreferredColorScheme() ?? DEFAULT_PREFERRED_COLOR_SCHEME;
+    const osColorScheme =
+      adapter?.getOsColorScheme() ?? DEFAULT_OS_COLOR_SCHEME;
+
+    return {
+      adapter,
+      preferredColorScheme,
+      osColorScheme,
+      colorScheme: resolveColorScheme(preferredColorScheme, osColorScheme),
+    };
+  },
+  invoke: {
+    id: "adapter",
+    src: "adapterBridge",
+    input: ({ context }) => context.adapter,
+  },
+  states: {
+    ready: {
+      on: {
+        "preferredColorScheme.set": {
+          actions: [
+            {
+              type: "setPreferredColorScheme",
+              params: ({ event }) => ({
+                preferredColorScheme: event.preferredColorScheme,
+              }),
+            },
+            // Forward to the adapter bridge so it can persist the user's
+            // choice. The bridge guards against redundant writes, so
+            // round-tripping a `preferredColorScheme.set` it sourced itself
+            // (e.g. from a `storage` event in another tab) is a no-op.
+            sendTo("adapter", ({ event }) => event),
+          ],
+        },
+        "osColorScheme.set": {
+          actions: [
+            {
+              type: "setOsColorScheme",
+              params: ({ event }) => ({
+                osColorScheme: event.osColorScheme,
+              }),
+            },
+          ],
+        },
+      },
+    },
+  },
+});