@arcanewizards/sigil 0.1.0

package/dist/frontend.d.ts

@@ -0,0 +1,90 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as SigilAppRootComponent } from './proto-kGDF-yWB.js';
+export { A as AppRootGetLogs, a as AppRootGetLogsArgs, b as AppRootGetLogsReturn, c as SIGIL_NAMESPACE, d as SigilComponent, e as SigilComponentCalls, i as isSigilComponent, f as isSigilComponentCall } from './proto-kGDF-yWB.js';
+import * as react from 'react';
+import { PropsWithChildren, FC, ReactNode } from 'react';
+import { FrontendComponentRenderer } from '@arcanejs/toolkit-frontend/types';
+export { DebuggerContext, SystemInformationContext, useDebuggerContext, useSystemInformation } from './frontend/context.js';
+export { A as AppRootLogEntry, a as AppRootLogEntryStackFrame, S as SystemInformation } from './types-X8O95zmC.js';
+import '@arcanejs/protocol';
+import '@arcanejs/diff';
+
+type MediaSessionAction = {
+    action: 'play' | 'pause' | 'playpause';
+} | {
+    action: 'seekto';
+    seekTimeMillis: number;
+} | {
+    action: 'seekbackward' | 'seekforward';
+    seekOffsetMillis?: number;
+};
+type MediaSessionHandler = (action: MediaSessionAction) => void;
+type MediaPlayState = {
+    state: 'playing';
+    effectiveStartTime: number;
+    speed: number;
+} | {
+    state: 'stopped';
+    speed: number;
+    currentTimeMillis: number;
+};
+type MediaMetadata = {
+    title?: string;
+    artist?: string;
+    durationMillis: number;
+    state: MediaPlayState;
+};
+type MediaSessionControl = {
+    setMetaData: (metadata: MediaMetadata | null) => void;
+    setHandler: (handler: MediaSessionHandler | null) => void;
+};
+type NewWindowOptions = {
+    /**
+     * If true, try and find an existing window with the same URL,
+     * and just bring it into focus instead of opening a new one.
+     */
+    canUseExisting?: boolean;
+    /**
+     * If supported by the the electron environment,
+     * specify a string mode identifier to configure the window behavior.
+     */
+    mode?: string;
+};
+type BaseBrowserContext = {
+    openExternalLink: (url: string) => void;
+    openNewWidow: (url: string, options?: NewWindowOptions) => void;
+    selectDirectory: (() => Promise<string | null>) | null;
+    openDevTools: (() => Promise<null>) | null;
+    confirmClose: (message: string) => void;
+    mediaSession: MediaSessionControl;
+};
+declare const createDefaultBrowserContext: <TBrowserContext extends BaseBrowserContext = BaseBrowserContext>(browser?: Partial<TBrowserContext> | null) => TBrowserContext;
+declare const BrowserContext: react.Context<BaseBrowserContext>;
+declare const BrowserContextProvider: <TBrowserContext extends BaseBrowserContext>({ browser, children, }: PropsWithChildren<{
+    browser: TBrowserContext;
+}>) => react_jsx_runtime.JSX.Element;
+declare const useBrowserContext: <TBrowserContext extends BaseBrowserContext = BaseBrowserContext>() => TBrowserContext;
+
+type Props<TBrowserContext extends BaseBrowserContext> = {
+    info: SigilAppRootComponent;
+    browser: TBrowserContext;
+};
+declare const AppRoot: <TBrowserContext extends BaseBrowserContext>({ info, browser, }: Props<TBrowserContext>) => react_jsx_runtime.JSX.Element;
+
+type DebuggerProps = {
+    title: ReactNode;
+    className?: string;
+};
+declare const Debugger: FC<DebuggerProps>;
+
+declare const createSigilFrontendRenderer: <TBrowserContext extends BaseBrowserContext>(browser: TBrowserContext) => FrontendComponentRenderer;
+type StartSigilFrontendOptions<TBrowserContext extends BaseBrowserContext> = {
+    browser?: Partial<TBrowserContext> | null;
+    appRenderers: FrontendComponentRenderer[];
+    loadingState?: () => ReactNode;
+};
+declare const startSigilFrontend: <TBrowserContext extends BaseBrowserContext>({ browser, appRenderers, loadingState, }: StartSigilFrontendOptions<TBrowserContext>) => TBrowserContext;
+
+declare const createBrowserMediaSession: () => MediaSessionControl;
+
+export { type BaseBrowserContext, BrowserContext, BrowserContextProvider, Debugger, type MediaMetadata, type MediaPlayState, type MediaSessionAction, type MediaSessionControl, type MediaSessionHandler, type NewWindowOptions, AppRoot as SigilAppRoot, SigilAppRootComponent, type StartSigilFrontendOptions, createBrowserMediaSession, createDefaultBrowserContext, createSigilFrontendRenderer, startSigilFrontend, useBrowserContext };

package/dist/frontend.js

@@ -0,0 +1,359 @@
+import {
+  ToolbarDivider,
+  ToolbarRow,
+  ToolbarWrapper
+} from "./chunk-FHXT3DAL.js";
+import {
+  SIGIL_NAMESPACE,
+  isSigilComponent,
+  isSigilComponentCall
+} from "./chunk-LSHKAVON.js";
+import {
+  DebuggerContext,
+  SystemInformationContext,
+  useDebuggerContext,
+  useSystemInformation
+} from "./chunk-EJNNLQ2S.js";
+import {
+  ControlButton
+} from "./chunk-XAK7WC3D.js";
+import "./chunk-BIY5HAXP.js";
+import "./chunk-4PMRDURG.js";
+import {
+  cnd
+} from "./chunk-H4U4Z4GM.js";
+
+// src/frontend/app-root.tsx
+import { StageContext } from "@arcanejs/toolkit-frontend";
+import { Tooltip } from "radix-ui";
+import { useContext as useContext2, useEffect, useMemo, useState } from "react";
+
+// src/frontend/browser-context.tsx
+import { createContext, useContext } from "react";
+
+// src/frontend/media-session.ts
+var NOOP_MEDIA_SESSION = {
+  setMetaData: () => {
+  },
+  setHandler: () => {
+  }
+};
+var createBrowserMediaSession = () => {
+  if (typeof navigator === "undefined" || !("mediaSession" in navigator) || !navigator.mediaSession) {
+    return NOOP_MEDIA_SESSION;
+  }
+  let handler = null;
+  const setMetaData = (data) => {
+    if (!data) {
+      navigator.mediaSession.metadata = null;
+      navigator.mediaSession.playbackState = "none";
+      return;
+    }
+    const { title, artist, durationMillis, state } = data;
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title,
+      artist
+    });
+    if (state.state === "playing") {
+      navigator.mediaSession.playbackState = "playing";
+      navigator.mediaSession.setPositionState({
+        duration: durationMillis / 1e3,
+        position: Math.max(0, (Date.now() - state.effectiveStartTime) * state.speed) / 1e3,
+        playbackRate: state.speed
+      });
+      return;
+    }
+    navigator.mediaSession.playbackState = "paused";
+    navigator.mediaSession.setPositionState({
+      duration: durationMillis / 1e3,
+      position: state.currentTimeMillis / 1e3
+    });
+  };
+  const setHandler = (value) => {
+    handler = value;
+  };
+  navigator.mediaSession.setActionHandler("play", () => {
+    handler?.({ action: "play" });
+  });
+  navigator.mediaSession.setActionHandler("pause", () => {
+    handler?.({ action: "pause" });
+  });
+  const handleSeekAction = (action) => {
+    if (action.action === "seekto") {
+      handler?.({
+        action: "seekto",
+        seekTimeMillis: (action.seekTime ?? 0) * 1e3
+      });
+      return;
+    }
+    if (action.action === "seekbackward" || action.action === "seekforward") {
+      handler?.({
+        action: action.action,
+        seekOffsetMillis: (action.seekOffset ?? 0) * 1e3
+      });
+    }
+  };
+  navigator.mediaSession.setActionHandler("seekto", handleSeekAction);
+  navigator.mediaSession.setActionHandler("seekbackward", handleSeekAction);
+  navigator.mediaSession.setActionHandler("seekforward", handleSeekAction);
+  return {
+    setMetaData,
+    setHandler
+  };
+};
+
+// src/frontend/browser-context.tsx
+import { jsx } from "react/jsx-runtime";
+var createDefaultBrowserContext = (browser) => {
+  const defaults = {
+    openExternalLink: (url) => {
+      window.open(url, "_blank", "noopener,noreferrer");
+    },
+    openNewWidow: (url) => {
+      window.open(url, "_blank", "noopener,noreferrer");
+    },
+    selectDirectory: null,
+    openDevTools: null,
+    confirmClose: () => {
+    },
+    mediaSession: createBrowserMediaSession()
+  };
+  return {
+    ...defaults,
+    ...browser
+  };
+};
+var BrowserContext = createContext(
+  new Proxy({}, {
+    get: () => {
+      throw new Error("BrowserContext not provided.");
+    }
+  })
+);
+var BrowserContextProvider = ({
+  browser,
+  children
+}) => {
+  return /* @__PURE__ */ jsx(BrowserContext.Provider, { value: browser, children });
+};
+var useBrowserContext = () => useContext(BrowserContext);
+
+// src/frontend/app-root.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AppRoot = ({
+  info,
+  browser
+}) => {
+  const { child, lastLog } = info;
+  const { renderComponent, call } = useContext2(StageContext);
+  const [logs, setLogs] = useState({ lastLog: -1, logs: [] });
+  const [debugMode, setDebugMode] = useState(false);
+  useEffect(() => {
+    if (!debugMode || !call) return;
+    const lastLogId = logs.logs[logs.logs.length - 1]?.index ?? -1;
+    call({
+      namespace: "sigil",
+      type: "component-call",
+      componentKey: info.key,
+      action: "app-root-get-logs",
+      after: lastLogId
+    }).then(({ logs: newLogs }) => {
+      if (newLogs.length === 0) return;
+      setLogs({
+        lastLog,
+        logs: [...logs.logs, ...newLogs]
+      });
+    });
+  }, [call, debugMode, info.key, lastLog, logs]);
+  const debuggerContext = useMemo(
+    () => ({
+      logs: logs.logs,
+      setDebugMode
+    }),
+    [logs.logs]
+  );
+  return /* @__PURE__ */ jsx2(SystemInformationContext.Provider, { value: info.system, children: /* @__PURE__ */ jsx2(BrowserContextProvider, { browser, children: /* @__PURE__ */ jsx2(DebuggerContext.Provider, { value: debuggerContext, children: /* @__PURE__ */ jsx2(Tooltip.Provider, { children: child && renderComponent(child) }) }) }) });
+};
+
+// src/frontend/debugger.tsx
+import { useCallback, useEffect as useEffect2, useRef } from "react";
+import { cn } from "@arcanejs/toolkit-frontend/util";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var TIME_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+  fractionalSecondDigits: 3
+});
+var unwrapErrorStack = (error) => {
+  let stack = `${error.message}
+${error.stack ?? ""}`;
+  if (error.cause) {
+    stack += `
+Caused by: ${unwrapErrorStack(error.cause)}`;
+  }
+  return stack;
+};
+var Debugger = ({ title, className }) => {
+  const scrollRef = useRef(null);
+  const shouldScrollToBottom = useRef(true);
+  const { openDevTools } = useBrowserContext();
+  const { setDebugMode, logs } = useDebuggerContext();
+  const system = useSystemInformation();
+  useEffect2(() => {
+    setDebugMode(true);
+    return () => {
+      setDebugMode(false);
+    };
+  }, [setDebugMode]);
+  const handleScroll = () => {
+    if (!scrollRef.current) return;
+    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
+    shouldScrollToBottom.current = scrollTop + clientHeight >= scrollHeight - 10;
+  };
+  const scrollToBottomIfRequired = useCallback(() => {
+    if (shouldScrollToBottom.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, []);
+  useEffect2(scrollToBottomIfRequired, [logs, scrollToBottomIfRequired]);
+  useEffect2(() => {
+    window.addEventListener("resize", scrollToBottomIfRequired);
+    return () => {
+      window.removeEventListener("resize", scrollToBottomIfRequired);
+    };
+  }, [scrollToBottomIfRequired]);
+  const exportLogs = useCallback(() => {
+    const logText = JSON.stringify({ system, logs }, null, 2);
+    const blob = new Blob([logText], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `sigil-logs-${(/* @__PURE__ */ new Date()).toISOString()}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+  }, [system, logs]);
+  const handleRequestScrollToBottom = useCallback(() => {
+    shouldScrollToBottom.current = true;
+    scrollToBottomIfRequired();
+  }, [scrollToBottomIfRequired]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
+    /* @__PURE__ */ jsx3(ToolbarWrapper, { children: /* @__PURE__ */ jsxs(ToolbarRow, { children: [
+      /* @__PURE__ */ jsx3("span", { className: "grow px-1", children: title }),
+      /* @__PURE__ */ jsx3(ToolbarDivider, {}),
+      openDevTools && /* @__PURE__ */ jsx3(
+        ControlButton,
+        {
+          onClick: openDevTools,
+          variant: "toolbar",
+          icon: "build",
+          children: "Open Dev Tools"
+        }
+      ),
+      /* @__PURE__ */ jsx3(
+        ControlButton,
+        {
+          onClick: handleRequestScrollToBottom,
+          variant: "toolbar",
+          icon: "south",
+          children: "Scroll to Bottom"
+        }
+      ),
+      /* @__PURE__ */ jsx3(ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
+    ] }) }),
+    /* @__PURE__ */ jsx3(
+      "pre",
+      {
+        className: "\n          m-0 overflow-x-auto border-b border-sigil-border bg-sigil-bg-dark p-2\n          scrollbar-sigil\n        ",
+        children: `OS: ${system.os}
+Version: ${system.version}
+App Path: ${system.appPath}
+CWD: ${system.cwd}
+Data Directory: ${system.dataDirectory}`
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref: scrollRef,
+        onScroll: handleScroll,
+        className: "flex-1 overflow-auto scrollbar-sigil",
+        children: logs.map((log) => /* @__PURE__ */ jsxs("div", { className: "px-arcane whitespace-pre-wrap", children: [
+          /* @__PURE__ */ jsxs("p", { children: [
+            TIME_FORMATTER.format(log.timestamp),
+            " - ",
+            /* @__PURE__ */ jsx3(
+              "span",
+              {
+                className: cn(
+                  cnd(log.level === "error", "text-sigil-usage-red-foreground"),
+                  cnd(
+                    log.level === "warn",
+                    "text-sigil-usage-yellow-foreground"
+                  ),
+                  cnd(log.level === "info", "text-sigil-usage-blue-foreground")
+                ),
+                children: log.level
+              }
+            ),
+            " - ",
+            log.message
+          ] }),
+          log.stack && /* @__PURE__ */ jsx3("pre", { className: "m-0 ml-2", children: unwrapErrorStack(log.stack) })
+        ] }, log.index))
+      }
+    )
+  ] });
+};
+
+// src/frontend/index.tsx
+import { startArcaneFrontend } from "@arcanejs/toolkit/frontend";
+import { CORE_FRONTEND_COMPONENT_RENDERER } from "@arcanejs/toolkit-frontend";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var createSigilFrontendRenderer = (browser) => ({
+  namespace: SIGIL_NAMESPACE,
+  render: (info) => {
+    if (!isSigilComponent(info)) {
+      throw new Error(`Cannot render component ${info.namespace}`);
+    }
+    switch (info.component) {
+      case "app-root":
+        return /* @__PURE__ */ jsx4(AppRoot, { browser, info });
+    }
+  }
+});
+var defaultLoadingState = () => /* @__PURE__ */ jsx4("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading..." });
+var startSigilFrontend = ({
+  browser,
+  appRenderers,
+  loadingState = defaultLoadingState
+}) => {
+  const resolvedBrowser = createDefaultBrowserContext(browser);
+  startArcaneFrontend({
+    renderers: [
+      CORE_FRONTEND_COMPONENT_RENDERER,
+      createSigilFrontendRenderer(resolvedBrowser),
+      ...appRenderers
+    ],
+    loadingState
+  });
+  return resolvedBrowser;
+};
+export {
+  BrowserContext,
+  BrowserContextProvider,
+  Debugger,
+  DebuggerContext,
+  SIGIL_NAMESPACE,
+  AppRoot as SigilAppRoot,
+  SystemInformationContext,
+  createBrowserMediaSession,
+  createDefaultBrowserContext,
+  createSigilFrontendRenderer,
+  isSigilComponent,
+  isSigilComponentCall,
+  startSigilFrontend,
+  useBrowserContext,
+  useDebuggerContext,
+  useSystemInformation
+};