@arcote.tech/platform 0.4.1

package/src/platform-app.tsx

@@ -0,0 +1,208 @@
+import type { ArcContextAny } from "@arcote.tech/arc";
+import type { DSVariantOverrides } from "@arcote.tech/arc-ds";
+import { DesignSystemProvider } from "@arcote.tech/arc-ds";
+import { reactModel } from "@arcote.tech/arc-react";
+import { Layout } from "@arcote.tech/arc-ds";
+import { ArcLayoutProvider } from "./layout/layout-provider";
+import { PageRouter } from "./layout/page-router";
+import { I18nProvider } from "./i18n";
+import {
+  getContext,
+  getVariantOverrides,
+  getWrapperFragments,
+  setDefaultLayout,
+} from "./registry";
+import { ThemeProvider } from "./theme";
+import { Tooltip as RadixTooltip } from "radix-ui";
+import { useEffect, useMemo, useState } from "react";
+import { useModuleLoader } from "./module-loader";
+import { PlatformModelProvider } from "./platform-context";
+
+const TooltipProvider = RadixTooltip.Provider;
+
+export interface PlatformAppProps {
+  apiUrl?: string;
+  wsUrl?: string;
+  variants?: DSVariantOverrides;
+  /** Pre-loaded context — skip module loading if provided. */
+  context?: ArcContextAny;
+}
+
+function LoadingScreen() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        fontFamily: "system-ui, sans-serif",
+        color: "#888",
+      }}
+    >
+      Loading...
+    </div>
+  );
+}
+
+function ErrorScreen({ error }: { error: Error }) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        fontFamily: "system-ui, sans-serif",
+        color: "#c00",
+        gap: "1rem",
+      }}
+    >
+      <div>Failed to load application</div>
+      <pre style={{ fontSize: "0.85rem", opacity: 0.7 }}>{error.message}</pre>
+    </div>
+  );
+}
+
+interface I18nConfig {
+  locales: Record<string, string>;
+  sourceLocale: string;
+}
+
+function useI18nConfig(apiUrl: string): I18nConfig | null {
+  const [config, setConfig] = useState<I18nConfig | null>(null);
+
+  useEffect(() => {
+    fetch(`${apiUrl}/api/translations`)
+      .then((r) => r.json())
+      .then((data) => {
+        if (data?.locales && Array.isArray(data.locales) && data.locales.length > 0) {
+          // Convert ["pl-PL", "en-US"] → { "pl-PL": "pl-PL", "en-US": "en-US" }
+          const localesMap: Record<string, string> = {};
+          for (const l of data.locales) localesMap[l] = l;
+          setConfig({ locales: localesMap, sourceLocale: data.sourceLocale });
+        }
+      })
+      .catch(() => {});
+  }, [apiUrl]);
+
+  return config;
+}
+
+function PlatformAppInner({
+  context,
+  wsUrl,
+  apiUrl,
+  variants,
+}: {
+  context: ArcContextAny;
+  wsUrl: string;
+  apiUrl: string;
+  variants?: DSVariantOverrides;
+}) {
+  useEffect(() => {
+    setDefaultLayout(Layout);
+  }, []);
+
+  const i18nConfig = useI18nConfig(apiUrl);
+
+  const model = useMemo(
+    () => reactModel(context, { remoteUrl: wsUrl }),
+    [context, wsUrl],
+  );
+
+  const {
+    ModelProvider,
+    useModel,
+    createScope,
+    resetModel,
+  } = model;
+
+  const wrappers = getWrapperFragments();
+  let content = <PageRouter />;
+  for (let i = wrappers.length - 1; i >= 0; i--) {
+    const Wrapper = wrappers[i].component;
+    content = <Wrapper>{content}</Wrapper>;
+  }
+
+  const loadMessages = useMemo(
+    () => async (locale: string) => {
+      const res = await fetch(`${apiUrl}/locales/${locale}.json`);
+      return res.ok ? res.json() : {};
+    },
+    [apiUrl],
+  );
+
+  let inner = (
+    <ThemeProvider>
+      <DesignSystemProvider
+        variants={{ ...getVariantOverrides(), ...variants }}
+      >
+        <TooltipProvider>
+          <ArcLayoutProvider>{content}</ArcLayoutProvider>
+        </TooltipProvider>
+      </DesignSystemProvider>
+    </ThemeProvider>
+  );
+
+  // Wrap with I18nProvider if translations are configured
+  if (i18nConfig) {
+    inner = (
+      <I18nProvider
+        defaultLocale={i18nConfig.sourceLocale}
+        locales={i18nConfig.locales}
+        loadMessages={loadMessages}
+      >
+        {inner}
+      </I18nProvider>
+    );
+  }
+
+  return (
+    <ModelProvider>
+      <PlatformModelProvider
+        hooks={{ useModel, createScope, resetModel }}
+      >
+        {inner}
+      </PlatformModelProvider>
+    </ModelProvider>
+  );
+}
+
+export function PlatformApp({
+  apiUrl = "",
+  wsUrl,
+  variants,
+  context: preloadedContext,
+}: PlatformAppProps) {
+  // If context is pre-loaded (modules imported statically in main.tsx),
+  // skip dynamic module loading entirely.
+  const loader = useModuleLoader(apiUrl, { skip: !!preloadedContext });
+  const context = preloadedContext ?? loader.context ?? getContext();
+
+  const resolvedWsUrl = wsUrl ?? `${location.protocol}//${location.host}`;
+
+  if (!preloadedContext && loader.state === "loading") return <LoadingScreen />;
+  if (!preloadedContext && loader.state === "error")
+    return <ErrorScreen error={loader.error!} />;
+  if (!context)
+    return (
+      <ErrorScreen
+        error={
+          new Error(
+            "No context registered. Make sure your context package calls module() to register.",
+          )
+        }
+      />
+    );
+
+  return (
+    <PlatformAppInner
+      context={context}
+      wsUrl={resolvedWsUrl}
+      apiUrl={apiUrl}
+      variants={variants}
+    />
+  );
+}

package/src/platform-context.tsx

@@ -0,0 +1,45 @@
+import type { ArcContextAny } from "@arcote.tech/arc";
+import type { ScopeAPI } from "@arcote.tech/arc-react";
+import { createContext, useContext, type ReactNode } from "react";
+
+interface PlatformModelHooks {
+  useModel: any;
+  createScope: (name: string) => ScopeAPI;
+  resetModel: () => void;
+}
+
+const PlatformModelContext = createContext<PlatformModelHooks | null>(null);
+
+export function PlatformModelProvider({
+  hooks,
+  children,
+}: {
+  hooks: PlatformModelHooks;
+  children: ReactNode;
+}) {
+  return (
+    <PlatformModelContext.Provider value={hooks}>
+      {children}
+    </PlatformModelContext.Provider>
+  );
+}
+
+function usePlatformModel(): PlatformModelHooks {
+  const ctx = useContext(PlatformModelContext);
+  if (!ctx)
+    throw new Error(
+      "usePlatformModel must be used within PlatformModelProvider",
+    );
+  return ctx;
+}
+
+export function usePlatformScope<C extends ArcContextAny>(
+  _ctx: C,
+  name: string,
+): ScopeAPI<C> {
+  return usePlatformModel().createScope(name) as unknown as ScopeAPI<C>;
+}
+
+export function usePlatformResetModel() {
+  return usePlatformModel().resetModel;
+}

package/src/registry.ts

@@ -0,0 +1,238 @@
+import type {
+  ArcFragment,
+  ArcLayoutComponent,
+  ArcModule,
+  ContextElementFragment,
+  PageFragment,
+  SlotFragment,
+  SlotId,
+  WrapperFragment,
+} from "./types";
+
+// ---------------------------------------------------------------------------
+// Registry — globalny rejestr modułów i ich fragmentów
+// ---------------------------------------------------------------------------
+
+const modules: Map<string, ArcModule> = new Map();
+const listeners: Set<() => void> = new Set();
+
+function notify(): void {
+  for (const listener of listeners) listener();
+}
+
+export function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
+
+/** Register module. Overwrites if already registered (needed for reload). */
+export function registerModule(mod: ArcModule): void {
+  modules.set(mod.id, mod);
+  notify();
+}
+
+export function unregisterModule(moduleId: string): void {
+  modules.delete(moduleId);
+  notify();
+}
+
+export function getModule(moduleId: string): ArcModule | undefined {
+  return modules.get(moduleId);
+}
+
+export function getAllModules(): ArcModule[] {
+  return [...modules.values()];
+}
+
+// ---------------------------------------------------------------------------
+// Context store — dynamiczny context rejestrowany przez pakiety
+// ---------------------------------------------------------------------------
+
+let currentContext: any = null;
+const contextListeners: Set<() => void> = new Set();
+
+function notifyContext(): void {
+  for (const listener of contextListeners) listener();
+}
+
+/** Set the active Arc context (called by arc() or module().build()).
+ *  If a context is already set, merges new elements into it
+ *  while preserving the ArcContext instance (with .get() method). */
+export function setContext(ctx: any): void {
+  if (currentContext && ctx && currentContext !== ctx) {
+    // Merge: append new elements that aren't already present
+    const existingNames = new Set(
+      currentContext.elements.map((e: any) => e.name ?? e.id ?? e),
+    );
+    const newElements = ctx.elements.filter(
+      (e: any) => !existingNames.has(e.name ?? e.id ?? e),
+    );
+    if (newElements.length > 0) {
+      // Rebuild using the context constructor to preserve .get() and other methods
+      const allElements = [...currentContext.elements, ...newElements];
+      const Ctor = currentContext.constructor;
+      if (typeof Ctor === "function" && Ctor !== Object) {
+        currentContext = new Ctor(allElements);
+      } else {
+        // Fallback: create context-like object with get() method
+        const elementMap = new Map(
+          allElements.map((e: any) => [e.name, e]),
+        );
+        currentContext = {
+          elements: allElements,
+          elementMap,
+          get(name: string) {
+            return elementMap.get(name);
+          },
+        };
+      }
+    }
+  } else {
+    currentContext = ctx;
+  }
+  notifyContext();
+}
+
+/** Get the active Arc context. */
+export function getContext<T = any>(): T {
+  return currentContext as T;
+}
+
+/** Subscribe to context changes. */
+export function subscribeContext(listener: () => void): () => void {
+  contextListeners.add(listener);
+  return () => contextListeners.delete(listener);
+}
+
+// ---------------------------------------------------------------------------
+// Default layout — ustawiany przez shell, nadpisywalny per-page
+// ---------------------------------------------------------------------------
+
+let defaultLayout: ArcLayoutComponent | null = null;
+
+/** Set the default layout component (used when page doesn't specify its own). */
+export function setDefaultLayout(layout: ArcLayoutComponent): void {
+  defaultLayout = layout;
+}
+
+/** Get the default layout component. */
+export function getDefaultLayout(): ArcLayoutComponent | null {
+  return defaultLayout;
+}
+
+// ---------------------------------------------------------------------------
+// Variant overrides — moduły rejestrują nadpisania wariantów DS
+// ---------------------------------------------------------------------------
+
+let variantOverrides: Record<
+  string,
+  Record<string, Record<string, string>>
+> = {};
+
+/** Register variant overrides (merges with existing). */
+export function setVariantOverrides(
+  overrides: Record<string, Record<string, Record<string, string>>>,
+): void {
+  for (const [component, variants] of Object.entries(overrides)) {
+    variantOverrides[component] = {
+      ...variantOverrides[component],
+      ...variants,
+    };
+  }
+  notify();
+}
+
+/** Get all registered variant overrides. */
+export function getVariantOverrides(): Record<
+  string,
+  Record<string, Record<string, string>>
+> {
+  return variantOverrides;
+}
+
+// ---------------------------------------------------------------------------
+// Queries
+// ---------------------------------------------------------------------------
+
+export function getAllFragments(): ArcFragment[] {
+  return getAllModules().flatMap((m) => m.fragments);
+}
+
+export function getSlotFragments(slotId: SlotId | string): SlotFragment[] {
+  const fragments = getAllFragments().filter(
+    (f): f is SlotFragment => f.is("slot") && (f as SlotFragment).slotId === slotId,
+  );
+  return sortByOrdering(fragments);
+}
+
+export function getPageFragments(): PageFragment[] {
+  return getAllFragments().filter((f): f is PageFragment => f.is("page"));
+}
+
+export function getContextElementFragments(): ContextElementFragment[] {
+  return getAllFragments().filter(
+    (f): f is ContextElementFragment => f.is("context-element"),
+  );
+}
+
+export function getPageByPath(path: string): PageFragment | undefined {
+  return getPageFragments().find((p) => p.path === path);
+}
+
+export function getWrapperFragments(): WrapperFragment[] {
+  const fragments = getAllFragments().filter(
+    (f): f is WrapperFragment => f.is("wrapper"),
+  );
+  return sortByOrdering(fragments);
+}
+
+/** Clear all modules (but keep context). Used for reload. */
+export function clearModules(): void {
+  modules.clear();
+  notify();
+}
+
+/** Clear everything — modules + context + layout. */
+export function clearRegistry(): void {
+  modules.clear();
+  currentContext = null;
+  defaultLayout = null;
+  variantOverrides = {};
+  notify();
+  notifyContext();
+}
+
+// ---------------------------------------------------------------------------
+// Ordering sort
+// ---------------------------------------------------------------------------
+
+interface HasOrdering {
+  id: string;
+  ordering: { order?: number; after?: string; before?: string };
+}
+
+function sortByOrdering<T extends HasOrdering>(fragments: T[]): T[] {
+  const byId = new Map(fragments.map((f) => [f.id, f]));
+
+  return [...fragments].sort((a, b) => {
+    const orderA = a.ordering.order ?? 0;
+    const orderB = b.ordering.order ?? 0;
+
+    if (orderA !== orderB) return orderA - orderB;
+
+    if (a.ordering.after && byId.has(a.ordering.after)) {
+      if (a.ordering.after === b.id) return 1;
+    }
+    if (a.ordering.before && byId.has(a.ordering.before)) {
+      if (a.ordering.before === b.id) return -1;
+    }
+    if (b.ordering.after && byId.has(b.ordering.after)) {
+      if (b.ordering.after === a.id) return -1;
+    }
+    if (b.ordering.before && byId.has(b.ordering.before)) {
+      if (b.ordering.before === a.id) return 1;
+    }
+
+    return 0;
+  });
+}

package/src/router.tsx

@@ -0,0 +1,23 @@
+/**
+ * Router — re-exports core router from design-system.
+ * Platform adds useModuleNavigate (typed per-module navigation).
+ */
+
+export {
+  ArcRouterProvider,
+  useArcNavigate,
+  useArcRoute,
+  useArcParams,
+  matchRoutePath,
+  hasRouteParams,
+} from "@arcote.tech/arc-ds";
+
+import { useArcNavigate } from "@arcote.tech/arc-ds";
+import type { ArcModule, PublicPaths } from "./types";
+
+export function useModuleNavigate<T extends ArcModule>(
+  _module: T,
+): (path: PublicPaths<T>) => void {
+  const navigate = useArcNavigate();
+  return navigate as (path: PublicPaths<T>) => void;
+}

package/src/theme.tsx

@@ -0,0 +1,72 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeState {
+  theme: Theme;
+  resolved: "light" | "dark";
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeState | null>(null);
+
+function getSystemTheme(): "light" | "dark" {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function resolve(theme: Theme): "light" | "dark" {
+  return theme === "system" ? getSystemTheme() : theme;
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeRaw] = useState<Theme>(() => {
+    return (localStorage.getItem("arc-theme") as Theme) ?? "system";
+  });
+  const [resolved, setResolved] = useState<"light" | "dark">(() =>
+    resolve(theme),
+  );
+
+  const setTheme = useCallback((t: Theme) => {
+    localStorage.setItem("arc-theme", t);
+    setThemeRaw(t);
+  }, []);
+
+  useEffect(() => {
+    const r = resolve(theme);
+    setResolved(r);
+    document.documentElement.classList.toggle("dark", r === "dark");
+  }, [theme]);
+
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const r = getSystemTheme();
+      setResolved(r);
+      document.documentElement.classList.toggle("dark", r === "dark");
+    };
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+
+  return (
+    <ThemeContext.Provider value={{ theme, resolved, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme(): ThemeState {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within ThemeProvider");
+  return ctx;
+}