@pixel-point/toolcraft 0.0.2

package/templates/runtime/react/settings-transfer.ts

@@ -0,0 +1,279 @@
+import type { ResolvedToolcraftAppSchema } from "../schema/types";
+import type {
+  ToolcraftCommand,
+  ToolcraftState,
+  ToolcraftTimelineState,
+} from "../state/types";
+
+const settingsTransferPayloadSource = "toolcraft-settings";
+const settingsTransferPayloadVersion = 1;
+const settingsTransferImportHistoryGroup = "settings.import";
+
+type ToolcraftDispatch = (command: ToolcraftCommand) => void;
+
+export type ToolcraftSettingsTransferPayload = {
+  appId: string;
+  canvas: {
+    size: ToolcraftState["canvas"]["size"];
+  };
+  exportedAt: string;
+  source: typeof settingsTransferPayloadSource;
+  timeline: Pick<
+    ToolcraftTimelineState,
+    "currentTimeSeconds" | "durationSeconds" | "expanded" | "isLooping"
+  > & {
+    isPlaying: false;
+  };
+  values: Record<string, unknown>;
+  version: typeof settingsTransferPayloadVersion;
+};
+
+type ImportContext = {
+  dispatch: ToolcraftDispatch;
+  state: ToolcraftState;
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function isFinitePositiveNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value) && value > 0;
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function getKnownValueTargets(schema: ResolvedToolcraftAppSchema): Set<string> {
+  const targets = new Set<string>();
+
+  for (const section of schema.panels.controls?.sections ?? []) {
+    for (const control of Object.values(section.controls)) {
+      if (control.type !== "panelActions" && control.type !== "settingsTransfer") {
+        targets.add(control.target);
+      }
+    }
+  }
+
+  return targets;
+}
+
+function pickTransferValues(state: ToolcraftState): Record<string, unknown> {
+  const values: Record<string, unknown> = {};
+
+  for (const target of getKnownValueTargets(state.schema)) {
+    if (Object.hasOwn(state.values, target)) {
+      values[target] = state.values[target];
+    }
+  }
+
+  return values;
+}
+
+export function createToolcraftSettingsPayload(
+  state: ToolcraftState,
+): ToolcraftSettingsTransferPayload {
+  return {
+    appId: state.schema.settingsTransfer.appId,
+    canvas: {
+      size: state.canvas.size,
+    },
+    exportedAt: new Date().toISOString(),
+    source: settingsTransferPayloadSource,
+    timeline: {
+      currentTimeSeconds: state.timeline.currentTimeSeconds,
+      durationSeconds: state.timeline.durationSeconds,
+      expanded: state.timeline.expanded,
+      isLooping: state.timeline.isLooping,
+      isPlaying: false,
+    },
+    values: pickTransferValues(state),
+    version: settingsTransferPayloadVersion,
+  };
+}
+
+export function parseToolcraftSettingsPayload(
+  schema: ResolvedToolcraftAppSchema,
+  value: unknown,
+): ToolcraftSettingsTransferPayload | null {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  if (
+    value.source !== settingsTransferPayloadSource ||
+    value.version !== settingsTransferPayloadVersion ||
+    value.appId !== schema.settingsTransfer.appId
+  ) {
+    return null;
+  }
+
+  if (!isRecord(value.values) || !isRecord(value.canvas) || !isRecord(value.timeline)) {
+    return null;
+  }
+
+  const canvasSize = value.canvas.size;
+
+  if (!isRecord(canvasSize)) {
+    return null;
+  }
+
+  return value as ToolcraftSettingsTransferPayload;
+}
+
+function applyCanvasSize(
+  dispatch: ToolcraftDispatch,
+  size: ToolcraftSettingsTransferPayload["canvas"]["size"],
+): void {
+  if (isFinitePositiveNumber(size.width)) {
+    dispatch({
+      history: "merge",
+      historyGroup: settingsTransferImportHistoryGroup,
+      label: "Import settings",
+      target: "canvas.size.width",
+      type: "controls.setValue",
+      value: size.width,
+    });
+  }
+
+  if (isFinitePositiveNumber(size.height)) {
+    dispatch({
+      history: "merge",
+      historyGroup: settingsTransferImportHistoryGroup,
+      label: "Import settings",
+      target: "canvas.size.height",
+      type: "controls.setValue",
+      value: size.height,
+    });
+  }
+}
+
+function applyTimeline(
+  { dispatch, state }: ImportContext,
+  timeline: ToolcraftSettingsTransferPayload["timeline"],
+): void {
+  if (state.schema.panels.timeline?.enabled && isFinitePositiveNumber(timeline.durationSeconds)) {
+    dispatch({
+      durationSeconds: timeline.durationSeconds,
+      type: "timeline.setDuration",
+    });
+  }
+
+  if (state.schema.panels.timeline?.enabled && isFiniteNumber(timeline.currentTimeSeconds)) {
+    dispatch({
+      currentTimeSeconds: timeline.currentTimeSeconds,
+      type: "timeline.setCurrentTime",
+    });
+  }
+
+  if (state.schema.panels.timeline?.enabled && typeof timeline.expanded === "boolean") {
+    dispatch({
+      expanded: timeline.expanded,
+      type: "timeline.setExpanded",
+    });
+  }
+
+  if (
+    state.schema.panels.timeline?.enabled &&
+    typeof timeline.isLooping === "boolean" &&
+    timeline.isLooping !== state.timeline.isLooping
+  ) {
+    dispatch({ type: "timeline.toggleLoop" });
+  }
+
+  if (state.schema.panels.timeline?.enabled) {
+    dispatch({
+      isPlaying: false,
+      type: "timeline.setPlaying",
+    });
+  }
+}
+
+export function applyToolcraftSettingsPayload(
+  context: ImportContext,
+  payload: ToolcraftSettingsTransferPayload,
+): void {
+  const importableTargets = getKnownValueTargets(context.state.schema);
+
+  for (const [target, value] of Object.entries(payload.values)) {
+    if (!importableTargets.has(target)) {
+      continue;
+    }
+
+    context.dispatch({
+      history: "merge",
+      historyGroup: settingsTransferImportHistoryGroup,
+      label: "Import settings",
+      target,
+      type: "controls.setValue",
+      value,
+    });
+  }
+
+  applyCanvasSize(context.dispatch, payload.canvas.size);
+  applyTimeline(context, payload.timeline);
+}
+
+export function downloadToolcraftSettings(state: ToolcraftState): void {
+  const payload = createToolcraftSettingsPayload(state);
+  const blob = new Blob([JSON.stringify(payload, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement("a");
+
+  link.href = url;
+  link.download = state.schema.settingsTransfer.fileName;
+  link.click();
+
+  window.setTimeout(() => {
+    URL.revokeObjectURL(url);
+  }, 0);
+}
+
+function reportImportError(error: unknown): void {
+  console.error("Could not import Toolcraft settings.", error);
+  window.alert("Could not import settings JSON.");
+}
+
+export async function importToolcraftSettings(context: ImportContext): Promise<void> {
+  const input = document.createElement("input");
+  input.accept = "application/json,.json";
+  input.style.display = "none";
+  input.type = "file";
+  document.body.append(input);
+
+  await new Promise<void>((resolve) => {
+    input.addEventListener(
+      "change",
+      () => {
+        resolve();
+      },
+      { once: true },
+    );
+    input.click();
+  });
+
+  const file = input.files?.item(0);
+  input.remove();
+
+  if (!file) {
+    return;
+  }
+
+  try {
+    const payload = parseToolcraftSettingsPayload(
+      context.state.schema,
+      JSON.parse(await file.text()),
+    );
+
+    if (!payload) {
+      throw new Error("Invalid Toolcraft settings payload.");
+    }
+
+    applyToolcraftSettingsPayload(context, payload);
+  } catch (error) {
+    reportImportError(error);
+  }
+}

package/templates/runtime/react/storage-key-migration.ts

@@ -0,0 +1,48 @@
+const previousToolcraftNamespace = ["creative", "apps", "kit"].join("-");
+
+export function getPreviousToolcraftStorageKey(storageKey: string): string | null {
+  if (!storageKey.startsWith("toolcraft:")) {
+    return null;
+  }
+
+  return `${previousToolcraftNamespace}${storageKey.slice("toolcraft".length)}`;
+}
+
+export function readToolcraftLocalStorageValue(storageKey: string): string | null {
+  const currentValue = window.localStorage.getItem(storageKey);
+
+  if (currentValue !== null) {
+    return currentValue;
+  }
+
+  const previousStorageKey = getPreviousToolcraftStorageKey(storageKey);
+
+  if (!previousStorageKey) {
+    return null;
+  }
+
+  const previousValue = window.localStorage.getItem(previousStorageKey);
+
+  if (previousValue === null) {
+    return null;
+  }
+
+  try {
+    window.localStorage.setItem(storageKey, previousValue);
+    window.localStorage.removeItem(previousStorageKey);
+  } catch {
+    // Migration is best-effort; the caller can still use the previous value.
+  }
+
+  return previousValue;
+}
+
+export function removeToolcraftLocalStorageValue(storageKey: string): void {
+  window.localStorage.removeItem(storageKey);
+
+  const previousStorageKey = getPreviousToolcraftStorageKey(storageKey);
+
+  if (previousStorageKey) {
+    window.localStorage.removeItem(previousStorageKey);
+  }
+}

package/templates/runtime/react/theme-runtime.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import {
+  PortalLayerContainerProvider,
+  TooltipProvider,
+} from "@repo/ui/primitives";
+
+export const TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY = "appearance.theme.v1" as const;
+export const TOOLCRAFT_DEFAULT_THEME_PREFERENCE = "dark" as const;
+
+export type ToolcraftThemePreference = "dark" | "light" | "system";
+export type ToolcraftResolvedTheme = "dark" | "light";
+
+export type ToolcraftThemeContextValue = {
+  initialized: boolean;
+  resolvedTheme: ToolcraftResolvedTheme;
+  setThemePreference: (themePreference: ToolcraftThemePreference) => void;
+  themePreference: ToolcraftThemePreference;
+  toggleResolvedTheme: () => void;
+};
+
+const colorSchemeMediaQuery = "(prefers-color-scheme: dark)";
+
+const ToolcraftThemeContext = React.createContext<ToolcraftThemeContextValue | null>(null);
+
+function isToolcraftThemePreference(
+  value: unknown,
+): value is ToolcraftThemePreference {
+  return value === "dark" || value === "light" || value === "system";
+}
+
+function getSystemResolvedTheme(): ToolcraftResolvedTheme {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return TOOLCRAFT_DEFAULT_THEME_PREFERENCE;
+  }
+
+  return window.matchMedia(colorSchemeMediaQuery).matches ? "dark" : "light";
+}
+
+function resolveThemePreference(
+  themePreference: ToolcraftThemePreference,
+): ToolcraftResolvedTheme {
+  return themePreference === "system" ? getSystemResolvedTheme() : themePreference;
+}
+
+function readStoredThemePreference(): ToolcraftThemePreference | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const rawValue = window.localStorage.getItem(TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY);
+
+    return isToolcraftThemePreference(rawValue) ? rawValue : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredThemePreference(themePreference: ToolcraftThemePreference): void {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(TOOLCRAFT_THEME_PREFERENCE_STORAGE_KEY, themePreference);
+  } catch {
+    // Keep the active theme in memory if storage is unavailable.
+  }
+}
+
+function getInitialThemePreference(): ToolcraftThemePreference {
+  return readStoredThemePreference() ?? TOOLCRAFT_DEFAULT_THEME_PREFERENCE;
+}
+
+export function ToolcraftThemeProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.JSX.Element {
+  const [initialized, setInitialized] = React.useState(false);
+  const [themePreference, setThemePreferenceState] =
+    React.useState<ToolcraftThemePreference>(getInitialThemePreference);
+  const [resolvedTheme, setResolvedTheme] = React.useState<ToolcraftResolvedTheme>(() =>
+    resolveThemePreference(getInitialThemePreference()),
+  );
+
+  const setThemePreference = React.useCallback(
+    (nextThemePreference: ToolcraftThemePreference): void => {
+      const nextResolvedTheme = resolveThemePreference(nextThemePreference);
+
+      writeStoredThemePreference(nextThemePreference);
+      setThemePreferenceState(nextThemePreference);
+      setResolvedTheme(nextResolvedTheme);
+      setInitialized(true);
+    },
+    [],
+  );
+
+  const toggleResolvedTheme = React.useCallback((): void => {
+    setThemePreference(resolvedTheme === "dark" ? "light" : "dark");
+  }, [resolvedTheme, setThemePreference]);
+
+  React.useEffect(() => {
+    setThemePreference(themePreference);
+  }, [setThemePreference, themePreference]);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return undefined;
+    }
+
+    const mediaQueryList = window.matchMedia(colorSchemeMediaQuery);
+    const handleChange = (): void => {
+      if (themePreference !== "system") {
+        return;
+      }
+
+      const nextResolvedTheme = getSystemResolvedTheme();
+
+      setResolvedTheme(nextResolvedTheme);
+    };
+
+    mediaQueryList.addEventListener("change", handleChange);
+
+    return () => {
+      mediaQueryList.removeEventListener("change", handleChange);
+    };
+  }, [themePreference]);
+
+  const value = React.useMemo(
+    () => ({
+      initialized,
+      resolvedTheme,
+      setThemePreference,
+      themePreference,
+      toggleResolvedTheme,
+    }),
+    [initialized, resolvedTheme, setThemePreference, themePreference, toggleResolvedTheme],
+  );
+
+  const portalRootRef = React.useRef<HTMLDivElement | null>(null);
+
+  return (
+    <ToolcraftThemeContext.Provider value={value}>
+      <div
+        data-toolcraft-theme={resolvedTheme}
+        data-toolcraft-theme-scope=""
+        style={{
+          colorScheme: resolvedTheme,
+          display: "contents",
+        }}
+      >
+        <PortalLayerContainerProvider container={portalRootRef}>
+          <TooltipProvider>{children}</TooltipProvider>
+        </PortalLayerContainerProvider>
+        <div
+          aria-hidden="true"
+          data-toolcraft-portal-root=""
+          ref={portalRootRef}
+          style={{ display: "contents" }}
+        />
+      </div>
+    </ToolcraftThemeContext.Provider>
+  );
+}
+
+export function useToolcraftTheme(): ToolcraftThemeContextValue {
+  const context = React.useContext(ToolcraftThemeContext);
+
+  if (!context) {
+    throw new Error("useToolcraftTheme must be used within ToolcraftThemeProvider");
+  }
+
+  return context;
+}