@arcanewizards/timecode-toolbox 0.0.3 → 0.1.1

package/src/components/frontend/frontend.css

@@ -1,108 +0,0 @@
-@import '@arcanejs/toolkit-frontend/styles/core.css';
-@import '@arcanejs/toolkit-frontend/styles/theme.css';
-@import '@arcanejs/toolkit-frontend/styles/base.css';
-
-@import '@arcanewizards/sigil/frontend/styles/sigil.css';
-@import '@arcanewizards/sigil/frontend/styles/theme.css';
-@import '@arcanewizards/sigil/frontend/styles/base.css';
-
-@source './**/*.{ts,tsx}';
-
-@theme inline {
-  /**
-    * Any (non-theme) tailwind variables that need to be used by component
-    * classes should be defined here,
-    * other than those that already exist in `@arcanewizards/sigil`
-    */
-  --spacing-timecode-min-height: var(--timecode-min-height);
-  --text-timecode-adaptive: max(
-    var(--timecode-min-height),
-    min(
-      calc(var(--size-aware-div-height) * 0.7),
-      calc(var(--size-aware-div-width) * 0.13)
-    )
-  );
-  --text-block-icon: max(
-    2rem,
-    min(calc(var(--size-aware-div-width) * 0.05), 5rem)
-  );
-
-  --color-timecode-backdrop: oklch(
-    from var(--timecode-usage-foreground) l c h / calc(alpha * 0.25)
-  );
-  --color-timecode-backdrop-hover: oklch(
-    from var(--timecode-usage-foreground) l c h / calc(alpha * 0.5)
-  );
-
-  --color-timecode-usage-text: var(--timecode-usage-text);
-  --color-timecode-usage-foreground: var(--timecode-usage-foreground);
-  --color-timecode-usage-background: var(--timecode-usage-background);
-  --color-timecode-usage-border: var(--timecode-usage-border);
-  --color-timecode-usage-drag-border: var(--timecode-usage-drag-border);
-  --color-timecode-usage-selected-background: var(
-    --timecode-usage-selected-background
-  );
-  --color-timecode-usage-selected-border: var(--timecode-usage-selected-border);
-  --color-timecode-usage-selected-text: var(--timecode-usage-selected-text);
-  --color-timecode-usage-dimmed-background: var(
-    --timecode-usage-dimmed-background
-  );
-  --color-timecode-usage-dimmed-border: var(--timecode-usage-dimmed-border);
-
-  --font-mono: var(--font-mono);
-}
-
-:root {
-  --timecode-min-height: 2rem;
-
-  --font-mono:
-    'SF Mono', SF Mono, SF Mono Regular, Consolas, 'Liberation Mono', Menlo,
-    Courier, monospace;
-}
-
-body {
-  /* prevent window scrollbars from appearing */
-  overflow: hidden;
-}
-
-.arcane-theme-root {
-  /* TODO: move this into @arcanejs */
-  background: var(--arcane-page-bg);
-
-  --timecode-usage-text: var(--sigil-usage-hint-text);
-  --timecode-usage-foreground: var(--sigil-usage-hint-foreground);
-  --timecode-usage-background: var(--sigil-usage-hint-background);
-  --timecode-usage-border: var(--sigil-usage-hint-border);
-  --timecode-usage-drag-border: var(--sigil-usage-hint-drag-border);
-  --timecode-usage-selected-background: var(
-    --sigil-usage-hint-selected-background
-  );
-  --timecode-usage-selected-border: var(--sigil-usage-hint-selected-border);
-  --timecode-usage-selected-text: var(--sigil-usage-hint-selected-text);
-  --timecode-usage-dimmed-background: var(--sigil-usage-hint-dimmed-background);
-  --timecode-usage-dimmed-border: var(--sigil-usage-hint-dimmed-border);
-}
-
-body {
-  user-select: none;
-  /* TODO: fix arcane bg variable in @arcanejs */
-  --arcane-page-bg: #1f1f1f;
-}
-
-@utility writing-mode-vertical-rl {
-  writing-mode: vertical-rl;
-}
-
-@utility app-title-bar {
-  app-region: drag;
-}
-
-@utility text-hint-gradient {
-  background: linear-gradient(
-    to bottom right,
-    var(--sigil-usage-hint-gradient-light),
-    var(--sigil-usage-hint-gradient-dark)
-  );
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}

package/src/components/frontend/index.tsx

@@ -1,46 +0,0 @@
-import { FrontendComponentRenderer } from '@arcanejs/toolkit-frontend/types';
-import {
-  BaseBrowserContext,
-  startSigilFrontend,
-} from '@arcanewizards/sigil/frontend';
-import { isTimecodeToolboxComponent, NAMESPACE } from '../proto';
-import { ToolboxRoot } from './toolbox/root';
-
-export type TimecodeToolboxBrowserContext = BaseBrowserContext;
-
-export const timecodeToolboxFrontendComponents =
-  (): FrontendComponentRenderer => ({
-    namespace: NAMESPACE,
-    render: (info) => {
-      if (!isTimecodeToolboxComponent(info)) {
-        throw new Error(`Cannot render component ${info.namespace}`);
-      }
-
-      switch (info.component) {
-        case 'toolbox-root':
-          return <ToolboxRoot info={info} />;
-      }
-    },
-  });
-
-export const startTimecodeToolboxServerFrontend = (
-  browser?: TimecodeToolboxBrowserContext | null,
-) => {
-  startSigilFrontend<TimecodeToolboxBrowserContext>({
-    browser,
-    appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => (
-      <div style={{ width: '100%', textAlign: 'center', padding: '2rem' }}>
-        Loading Toolbox...
-      </div>
-    ),
-  });
-};
-
-declare global {
-  interface Window {
-    startTimecodeToolboxServerFrontend?: typeof startTimecodeToolboxServerFrontend;
-  }
-}
-
-window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;

package/src/components/frontend/toolbox/content.tsx

@@ -1,45 +0,0 @@
-import { useBrowserContext } from '@arcanewizards/sigil/frontend';
-import { FC } from 'react';
-import { SizeAwareDiv } from './core/size-aware-div';
-import { Icon } from '@arcanejs/toolkit-frontend/components/core';
-
-export const ExternalLink = ({
-  href,
-  children,
-}: {
-  href: string;
-  children: React.ReactNode;
-}) => {
-  const { openExternalLink } = useBrowserContext();
-  return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      onClick={(e) => {
-        e.preventDefault();
-        openExternalLink(href);
-      }}
-      className="
-        text-sigil-usage-hint-foreground no-underline
-        hover:underline
-      "
-    >
-      {children}
-    </a>
-  );
-};
-
-export const NoToolboxChildren: FC<{ text: string }> = ({ text }) => {
-  return (
-    <SizeAwareDiv
-      className="
-        flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light
-        p-1 text-sigil-foreground-muted
-      "
-    >
-      <Icon icon="handyman" className="text-block-icon" />
-      <div className="text-center">{text}</div>
-    </SizeAwareDiv>
-  );
-};

package/src/components/frontend/toolbox/context.tsx

@@ -1,63 +0,0 @@
-import { createContext, useContext } from 'react';
-import {
-  ApplicationState,
-  AvailableHandlers,
-  ToolboxConfig,
-  ToolboxRootCallHandler,
-  ToolboxRootGetNetworkInterfacesReturn,
-} from '../../proto';
-import { Tree } from '../../../tree';
-
-export type ConfigContextData = {
-  config: ToolboxConfig;
-  updateConfig: (change: (current: ToolboxConfig) => ToolboxConfig) => void;
-};
-
-export const ConfigContext = createContext<ConfigContextData>(
-  new Proxy({} as ConfigContextData, {
-    get() {
-      throw new Error('ConfigContext not initialized');
-    },
-  }),
-);
-
-export const ApplicationStateContext = createContext<ApplicationState>(
-  new Proxy({} as ApplicationState, {
-    get() {
-      throw new Error('ApplicationStateContext not initialized');
-    },
-  }),
-);
-
-export const useApplicationState = () => useContext(ApplicationStateContext);
-
-export type ApplicationHandlersContextData = {
-  handlers: Tree<AvailableHandlers>;
-  callHandler<H extends keyof AvailableHandlers>(
-    args: Pick<ToolboxRootCallHandler<H>, 'path' | 'handler' | 'args'>,
-  ): Promise<void>;
-};
-
-export const ApplicationHandlersContext =
-  createContext<ApplicationHandlersContextData>(
-    new Proxy({} as ApplicationHandlersContextData, {
-      get() {
-        throw new Error('ApplicationHandlersContext not initialized');
-      },
-    }),
-  );
-
-export const useApplicationHandlers = () =>
-  useContext(ApplicationHandlersContext);
-
-type NetworkContextData = {
-  getNetworkInterfaces: () => Promise<ToolboxRootGetNetworkInterfacesReturn>;
-};
-
-export const NetworkContext = createContext<NetworkContextData>(
-  new Proxy({} as NetworkContextData, {
-    get() {
-      throw new Error('NetworkContext not initialized');
-    },
-  }),
-);

package/src/components/frontend/toolbox/core/size-aware-div.tsx

@@ -1,51 +0,0 @@
-import { cssVariables } from '@arcanewizards/sigil/frontend/styling';
-import React, { useEffect, useState } from 'react';
-
-type SizeAwareDivProps = React.HTMLAttributes<HTMLDivElement>;
-
-/**
- * A div component that sets CSS variables of it's current size,
- * allowing children to use those variables to adapt to the size of the div.
- * The variables set are --size-aware-div-width and --size-aware-div-height.
- */
-export const SizeAwareDiv: React.FC<SizeAwareDivProps> = ({
-  children,
-  style,
-  ...rest
-}) => {
-  const [div, setDiv] = useState<HTMLDivElement | null>(null);
-  const [rect, setRect] = useState<DOMRectReadOnly | null>(null);
-
-  useEffect(() => {
-    // Detect changes in div size
-    if (!div) {
-      return;
-    }
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setRect(entry.contentRect);
-      }
-    });
-    resizeObserver.observe(div);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [div]);
-
-  return (
-    <div
-      ref={setDiv}
-      {...rest}
-      style={{
-        ...style,
-        ...(rect &&
-          cssVariables({
-            '--size-aware-div-width': rect.width + 'px',
-            '--size-aware-div-height': rect.height + 'px',
-          })),
-      }}
-    >
-      {children}
-    </div>
-  );
-};