@arcote.tech/platform 0.4.1

package/src/layout/overflow-nav.tsx

@@ -0,0 +1,164 @@
+import {
+  Button,
+  cn,
+  DisplayModeProvider,
+  DragHandle,
+  ExpandablePanel,
+  arcTransitions,
+  useArcRoute,
+  useExpandable,
+  useOverlay,
+} from "@arcote.tech/arc-ds";
+import { motion } from "framer-motion";
+import { LayoutGrid } from "lucide-react";
+import {
+  Children,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+
+interface OverflowNavProps {
+  children: ReactNode;
+  className?: string;
+  overlayId?: string;
+}
+
+export function OverflowNav({
+  children,
+  className,
+  overlayId = "overflow-nav",
+}: OverflowNavProps) {
+  const measureRef = useRef<HTMLDivElement>(null);
+  const [visibleCount, setVisibleCount] = useState<number | null>(null);
+  const exp = useExpandable();
+  const overlay = useOverlay();
+  const path = useArcRoute();
+
+  // Close on route change
+  useEffect(() => {
+    if (exp.isExpanded) {
+      exp.close();
+      overlay.releaseOverlay(overlayId);
+    }
+  }, [path]);
+
+  const handleOpen = useCallback(() => {
+    exp.open();
+    overlay.requestOverlay(overlayId, () => exp.close());
+  }, [exp, overlay, overlayId]);
+
+  const handleDragRelease = useCallback(
+    (shouldClose: boolean) => {
+      exp.onDragRelease(shouldClose);
+      if (shouldClose) overlay.releaseOverlay(overlayId);
+    },
+    [exp, overlay, overlayId],
+  );
+
+  const childArray = Children.toArray(children);
+  const totalCount = childArray.length;
+
+  useEffect(() => {
+    const container = measureRef.current;
+    if (!container) return;
+
+    const measure = () => {
+      const containerWidth = container.offsetWidth;
+      const items = Array.from(container.children) as HTMLElement[];
+      if (items.length === 0) {
+        setVisibleCount(totalCount);
+        return;
+      }
+
+      const moreButton = items[items.length - 1];
+      const moreWidth = moreButton.offsetWidth;
+
+      let usedWidth = 0;
+      let fitCount = 0;
+
+      for (let i = 0; i < items.length - 1; i++) {
+        const itemWidth = items[i].offsetWidth;
+        const gap = i > 0 ? 4 : 0;
+
+        if (usedWidth + gap + itemWidth + 4 + moreWidth <= containerWidth) {
+          usedWidth += gap + itemWidth;
+          fitCount++;
+        } else {
+          break;
+        }
+      }
+
+      const allFitWidth = items
+        .slice(0, -1)
+        .reduce((sum, el, i) => sum + el.offsetWidth + (i > 0 ? 4 : 0), 0);
+
+      setVisibleCount(allFitWidth <= containerWidth ? totalCount : fitCount);
+    };
+
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [children, totalCount]);
+
+  const isOverflowing = visibleCount !== null && visibleCount < totalCount;
+  const ready = visibleCount !== null;
+
+  return (
+    <div className={cn("relative", className)}>
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none flex h-0 w-full items-center gap-1 overflow-hidden opacity-0 [&>*]:shrink-0"
+      >
+        {childArray}
+        <div className="shrink-0">
+          <Button icon={LayoutGrid} />
+        </div>
+      </div>
+
+      <motion.div
+        animate={
+          exp.isExpanded
+            ? { height: 0, opacity: 0 }
+            : { height: "auto", opacity: ready ? 1 : 0 }
+        }
+        initial={false}
+        transition={arcTransitions.snappy}
+        style={{ overflow: "hidden" }}
+      >
+        <div className="flex items-center justify-around gap-1 [&>*]:shrink-0">
+          {ready &&
+            childArray.slice(0, isOverflowing ? visibleCount : totalCount)}
+          {isOverflowing && (
+            <Button
+              icon={LayoutGrid}
+              label="Menu"
+              tooltip="Pokaż wszystkie"
+              onClick={handleOpen}
+            />
+          )}
+        </div>
+      </motion.div>
+
+      <ExpandablePanel
+        open={exp.isExpanded}
+        height={exp.expandedHeight}
+        dragHeight={exp.dragHeight}
+      >
+        <div ref={exp.expandedRef} className="flex flex-col gap-0.5">
+          <DragHandle
+            contentHeight={exp.expandedHeight}
+            onHeightChange={exp.onDragHeight}
+            onRelease={handleDragRelease}
+            closeDirection="down"
+          />
+          <DisplayModeProvider mode="expanded">{children}</DisplayModeProvider>
+        </div>
+      </ExpandablePanel>
+    </div>
+  );
+}

package/src/layout/page-router.tsx

@@ -0,0 +1,130 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Suspense, useEffect } from "react";
+import { getDefaultLayout, getPageFragments } from "../registry";
+import { useArcNavigate, useArcRoute, matchRoutePath, hasRouteParams } from "../router";
+import { useArcRouter } from "@arcote.tech/arc-ds";
+import type { PageFragment } from "../types";
+
+type MatchResult = {
+  page: PageFragment;
+  child?: PageFragment;
+  params: Record<string, string>;
+};
+
+function matchPage(path: string): MatchResult | undefined {
+  const pages = getPageFragments();
+
+  // 1. Exact match (non-parent pages only)
+  const exact = pages.find((p) => p.path === path && !p.children?.length);
+  if (exact) return { page: exact, params: {} };
+
+  // 2. Check children of parent pages
+  for (const p of pages) {
+    if (p.children?.length) {
+      if (path === p.path) return { page: p, params: {} };
+
+      // Try exact child match first
+      const exactChild = p.children.find((c) => c.path === path);
+      if (exactChild) return { page: p, child: exactChild, params: {} };
+
+      // Try parameterized child match
+      for (const c of p.children) {
+        if (hasRouteParams(c.path)) {
+          const params = matchRoutePath(c.path, path);
+          if (params) return { page: p, child: c, params };
+        }
+      }
+
+      // Prefix child match (existing behavior)
+      const prefixChild = p.children.find((c) => path.startsWith(c.path));
+      if (prefixChild) return { page: p, child: prefixChild, params: {} };
+    }
+  }
+
+  // 3. Parameterized page match
+  for (const p of pages) {
+    if (hasRouteParams(p.path) && !p.children?.length) {
+      const params = matchRoutePath(p.path, path);
+      if (params) return { page: p, params };
+    }
+  }
+
+  // 4. Prefix match fallback
+  const prefix = pages.find((p) => path.startsWith(p.path));
+  if (prefix) return { page: prefix, params: {} };
+
+  return undefined;
+}
+
+/**
+ * Renders the current page fragment inside its layout.
+ * Supports parent pages with children — renders shell with tabs prop.
+ */
+export function PageRouter() {
+  const route = useArcRoute();
+  const navigate = useArcNavigate();
+  const router = useArcRouter();
+  const match = matchPage(route);
+  const DefaultLayout = getDefaultLayout();
+
+  // Sync matched params to router context
+  useEffect(() => {
+    const newParams = match?.params ?? {};
+    const currentKeys = Object.keys(router.params);
+    const newKeys = Object.keys(newParams);
+    const changed =
+      currentKeys.length !== newKeys.length ||
+      newKeys.some((k) => router.params[k] !== newParams[k]);
+    if (changed) {
+      router.setParams(newParams);
+    }
+  }, [route, match?.params]);
+
+  if (!match) {
+    if (DefaultLayout) return <DefaultLayout>{null}</DefaultLayout>;
+    return null;
+  }
+
+  const { page, child } = match;
+  const Layout = page.layout ?? DefaultLayout;
+
+  // Parent with children — redirect to first child if at parent path
+  if (page.children?.length && !child) {
+    navigate(page.children[0].path);
+    return null;
+  }
+
+  // Parent with active child — render shell with tabs
+  if (page.children?.length && child) {
+    const Shell = page.component;
+    const ChildComponent = child.component;
+    const content = (
+      <Shell tabs={page.children}>
+        <Suspense fallback={null}>
+          <ChildComponent />
+        </Suspense>
+      </Shell>
+    );
+    return Layout ? <Layout>{content}</Layout> : content;
+  }
+
+  // Regular page (no children)
+  const PageComponent = page.component;
+  const pageContent = (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={page.path}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.15 }}
+      >
+        <Suspense fallback={null}>
+          <PageComponent />
+        </Suspense>
+      </motion.div>
+    </AnimatePresence>
+  );
+
+  return Layout ? <Layout>{pageContent}</Layout> : pageContent;
+}

package/src/layout/page-sub-nav-shell.tsx

@@ -0,0 +1,23 @@
+import type { ReactNode } from "react";
+import type { PageFragment } from "../types";
+import { useArcNavigate, useArcRoute } from "../router";
+import { SubNavShell } from "@arcote.tech/arc-ds";
+
+export function PageSubNavShell({ children, tabs }: { children: ReactNode; tabs: readonly PageFragment[] }) {
+  const navigate = useArcNavigate();
+  const route = useArcRoute();
+
+  const subNavTabs = tabs.map((t) => ({
+    path: t.path,
+    icon: t.icon,
+    label: t.label,
+    tooltip: t.tooltip,
+    isActive: route.startsWith(t.path),
+  }));
+
+  return (
+    <SubNavShell tabs={subNavTabs} onNavigate={navigate}>
+      {children}
+    </SubNavShell>
+  );
+}

package/src/layout/slot-renderer.tsx

@@ -0,0 +1,70 @@
+import type { DisplayMode } from "@arcote.tech/arc-ds";
+import { DisplayModeProvider, useDynamicSlotContent } from "@arcote.tech/arc-ds";
+import { Suspense } from "react";
+import type { SlotId } from "../types";
+import { useSlotFragments } from "./use-slot-fragments";
+
+export interface SlotRendererProps {
+  slotId: SlotId | string;
+  className?: string;
+  dividerClassName?: string;
+  suspenseFallback?: React.ReactNode;
+  displayMode?: DisplayMode;
+}
+
+const slotDisplayModes: Record<string, DisplayMode> = {
+  "toolbar-left": "default",
+  "toolbar-center": "default",
+  "toolbar-right": "default",
+  "main-content": "default",
+  "sidebar-left": "default",
+  "sidebar-right": "default",
+};
+
+export function SlotRenderer({
+  slotId,
+  className,
+  dividerClassName,
+  suspenseFallback,
+  displayMode,
+}: SlotRendererProps) {
+  const fragments = useSlotFragments(slotId);
+  const dynamicContent = useDynamicSlotContent(slotId);
+
+  const hasFragments = fragments.length > 0;
+  const hasDynamic = dynamicContent.length > 0;
+
+  if (!hasFragments && !hasDynamic) return null;
+
+  const mode = displayMode ?? slotDisplayModes[slotId] ?? "default";
+
+  return (
+    <DisplayModeProvider mode={mode}>
+      <div className={className}>
+        {fragments.map((fragment, index) => {
+          const Component = fragment.component;
+          return (
+            <div key={fragment.id} className="contents">
+              {index > 0 && (
+                <div
+                  className={
+                    dividerClassName ?? "mx-1 h-6 w-px self-center bg-border"
+                  }
+                  role="separator"
+                />
+              )}
+              <Suspense fallback={suspenseFallback ?? null}>
+                <Component />
+              </Suspense>
+            </div>
+          );
+        })}
+        {dynamicContent.map((content, index) => (
+          <div key={`dynamic-${index}`} className="contents">
+            {content}
+          </div>
+        ))}
+      </div>
+    </DisplayModeProvider>
+  );
+}

package/src/layout/use-slot-fragments.ts

@@ -0,0 +1,20 @@
+import { useRef, useSyncExternalStore } from "react";
+import { getSlotFragments, subscribe } from "../registry";
+import type { SlotFragment, SlotId } from "../types";
+
+export function useSlotFragments(slotId: SlotId | string): SlotFragment[] {
+  const cacheRef = useRef<SlotFragment[]>([]);
+
+  const getSnapshot = () => {
+    const next = getSlotFragments(slotId);
+    const prev = cacheRef.current;
+
+    const changed =
+      next.length !== prev.length || next.some((f, i) => f.id !== prev[i]?.id);
+
+    if (changed) cacheRef.current = next;
+    return cacheRef.current;
+  };
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}

package/src/locale.tsx

@@ -0,0 +1,64 @@
+import type { I18n } from "@lingui/core";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useState,
+  type ReactNode,
+} from "react";
+
+interface LocaleState<TLocale extends string = string> {
+  locale: TLocale;
+  setLocale: (locale: TLocale) => void;
+  locales: Record<TLocale, string>;
+}
+
+const LocaleContext = createContext<LocaleState | null>(null);
+
+export interface LocaleProviderProps<TLocale extends string = string> {
+  children: ReactNode;
+  /** Lingui i18n instance. */
+  i18n: I18n;
+  /** Mapa locale → label, np. { pl: "Polski", en: "English" }. */
+  locales: Record<TLocale, string>;
+  /** Domyślny locale. */
+  defaultLocale: TLocale;
+  /** Loader tłumaczeń — wywoływany przy zmianie locale. */
+  loadMessages: (locale: TLocale) => Promise<Record<string, string>>;
+}
+
+export function LocaleProvider<TLocale extends string = string>({
+  children,
+  i18n,
+  locales,
+  defaultLocale,
+  loadMessages,
+}: LocaleProviderProps<TLocale>) {
+  const [locale, setLocaleRaw] = useState<TLocale>(defaultLocale);
+
+  const setLocale = useCallback(
+    async (newLocale: TLocale) => {
+      const messages = await loadMessages(newLocale);
+      i18n.load(newLocale, messages);
+      i18n.activate(newLocale);
+      setLocaleRaw(newLocale);
+    },
+    [i18n, loadMessages],
+  );
+
+  return (
+    <LocaleContext.Provider
+      value={{ locale, setLocale, locales } as unknown as LocaleState}
+    >
+      {children}
+    </LocaleContext.Provider>
+  );
+}
+
+export function useLocale<
+  TLocale extends string = string,
+>(): LocaleState<TLocale> {
+  const ctx = useContext(LocaleContext);
+  if (!ctx) throw new Error("useLocale must be used within LocaleProvider");
+  return ctx as unknown as LocaleState<TLocale>;
+}

package/src/module-loader.ts

@@ -0,0 +1,102 @@
+import { clearModules, getContext } from "./registry";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface ModuleManifest {
+  modules: string[];
+  buildTime: string;
+}
+
+export type ModuleLoaderState = "loading" | "ready" | "error";
+
+/**
+ * Load all modules from manifest. Each module auto-registers via arc().
+ */
+export async function loadModules(baseUrl: string): Promise<ModuleManifest> {
+  const res = await fetch(`${baseUrl}/api/modules`);
+  if (!res.ok)
+    throw new Error(`Failed to fetch module manifest: ${res.status}`);
+
+  const manifest: ModuleManifest = await res.json();
+
+  // Import all modules — each calls arc() which auto-registers
+  await Promise.all(
+    manifest.modules.map(
+      (mod) => import(/* @vite-ignore */ `${baseUrl}/modules/${mod}`),
+    ),
+  );
+
+  return manifest;
+}
+
+/**
+ * Reload modules — clear registry, re-import with cache bust.
+ */
+export async function reloadModules(baseUrl: string): Promise<ModuleManifest> {
+  clearModules();
+
+  const res = await fetch(`${baseUrl}/api/modules`);
+  if (!res.ok)
+    throw new Error(`Failed to fetch module manifest: ${res.status}`);
+
+  const manifest: ModuleManifest = await res.json();
+  const bust = `?t=${Date.now()}`;
+
+  await Promise.all(
+    manifest.modules.map(
+      (mod) => import(/* @vite-ignore */ `${baseUrl}/modules/${mod}${bust}`),
+    ),
+  );
+
+  return manifest;
+}
+
+/**
+ * Hook: loads modules on mount, provides state + context.
+ */
+export function useModuleLoader(
+  baseUrl: string,
+  options: { skip?: boolean } = {},
+) {
+  const [state, setState] = useState<ModuleLoaderState>(
+    options.skip ? "ready" : "loading",
+  );
+  const [error, setError] = useState<Error | null>(null);
+  const loaded = useRef(false);
+
+  const reload = useCallback(async () => {
+    try {
+      await reloadModules(baseUrl);
+      setState("ready");
+    } catch (e) {
+      setError(e instanceof Error ? e : new Error(String(e)));
+      setState("error");
+    }
+  }, [baseUrl]);
+
+  useEffect(() => {
+    if (options.skip || loaded.current) return;
+    loaded.current = true;
+
+    loadModules(baseUrl)
+      .then(() => setState("ready"))
+      .catch((e) => {
+        setError(e instanceof Error ? e : new Error(String(e)));
+        setState("error");
+      });
+
+    // Listen for SSE reload events from CLI
+    const evtSource = new EventSource(`${baseUrl}/api/reload-stream`);
+    evtSource.onmessage = (event) => {
+      if (event.data === "connected") return;
+      console.log("[arc] Modules changed, reloading...");
+      reload();
+    };
+    evtSource.onerror = () => {
+      // SSE disconnected — will auto-reconnect
+    };
+
+    return () => evtSource.close();
+  }, [baseUrl, reload, options.skip]);
+
+  return { state, error, context: getContext(), reload };
+}