castle-web-cli 0.4.3 → 0.4.4

package/kits/rpg-2d/engine/ui.tsx

@@ -1,483 +0,0 @@
-import React, { useRef, useState } from 'react';
-import type { ButtonHTMLAttributes, PointerEvent, ReactNode } from 'react';
-import {
-  faBars,
-  faChevronDown,
-  faChevronRight,
-  faChevronUp,
-  faClone,
-  faObjectGroup,
-  faPalette,
-  faPlay,
-  faPlus,
-  faRedo,
-  faStop,
-  faTimes,
-  faTrash,
-  faUndo,
-  faVideo,
-} from '@fortawesome/free-solid-svg-icons';
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
-import styles from './ui.module.css';
-
-export { styles };
-
-export const theme = {
-  transparentChecker:
-    'repeating-linear-gradient(45deg, #050505, #050505 4px, #252525 4px, #252525 8px)',
-};
-
-export function cx(...parts: Array<string | false | null | undefined>): string {
-  return parts.filter(Boolean).join(' ');
-}
-
-export function AppShell({ children }: { children: ReactNode }) {
-  return <div className={styles.appShell}>{children}</div>;
-}
-
-export function MainEditor({ children }: { children: ReactNode }) {
-  return <main className={styles.mainEditor}>{children}</main>;
-}
-
-export function EditorHeader({
-  title,
-  subtitle,
-  right,
-  onToggleFiles,
-  filesOpen,
-}: {
-  title: ReactNode;
-  subtitle?: ReactNode;
-  right?: ReactNode;
-  onToggleFiles?: () => void;
-  filesOpen?: boolean;
-}) {
-  const hasRight = !!right || !!onToggleFiles;
-  return (
-    <header className={styles.editorHeader}>
-      <div className={styles.editorHeaderLeft}>
-        <div>
-          <div className={styles.editorTitle}>{title}</div>
-          {subtitle ? <div className={styles.muted}>{subtitle}</div> : null}
-        </div>
-      </div>
-      {hasRight ? (
-        <div className={styles.editorHeaderRight}>
-          {right}
-          {onToggleFiles ? (
-            <button
-              type="button"
-              className={cx(styles.headerFilesButton, styles.mobileOnly)}
-              onClick={onToggleFiles}
-              aria-label="Files"
-              aria-pressed={filesOpen ? 'true' : 'false'}>
-              <Icon name="bars" />
-            </button>
-          ) : null}
-        </div>
-      ) : null}
-    </header>
-  );
-}
-
-export function EditorBody({ children }: { children: ReactNode }) {
-  return <div className={styles.editorBody}>{children}</div>;
-}
-
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  active?: boolean;
-  variant?: '' | 'primary' | 'danger';
-}
-
-export function Button({
-  children,
-  active = false,
-  variant = '',
-  className = '',
-  ...props
-}: ButtonProps) {
-  return (
-    <button
-      className={cx(
-        styles.button,
-        active && styles.buttonActive,
-        variant === 'primary' && styles.buttonPrimary,
-        variant === 'danger' && styles.buttonDanger,
-        className
-      )}
-      {...props}>
-      {children}
-    </button>
-  );
-}
-
-export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
-  icon: string;
-  label: string;
-}
-
-export function IconButton({
-  icon,
-  label,
-  active = false,
-  variant = '',
-  ...props
-}: IconButtonProps) {
-  return (
-    <Button
-      active={active}
-      variant={variant}
-      className={styles.iconButton}
-      aria-label={label}
-      title={label}
-      {...props}>
-      <Icon name={icon} />
-    </Button>
-  );
-}
-
-const icons: Record<string, IconDefinition> = {
-  bars: faBars,
-  camera: faVideo,
-  'chevron-down': faChevronDown,
-  'chevron-right': faChevronRight,
-  'chevron-up': faChevronUp,
-  clone: faClone,
-  'object-group': faObjectGroup,
-  palette: faPalette,
-  play: faPlay,
-  plus: faPlus,
-  redo: faRedo,
-  stop: faStop,
-  times: faTimes,
-  trash: faTrash,
-  undo: faUndo,
-};
-
-export function Icon({ name }: { name: string }) {
-  const def = icons[name];
-  if (!def) return null;
-  const [width, height, , , path] = def.icon;
-  const d = Array.isArray(path) ? path.join(' ') : path;
-  return (
-    <svg
-      viewBox={`0 0 ${width} ${height}`}
-      aria-hidden="true"
-      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
-      <path d={d} />
-    </svg>
-  );
-}
-
-export function Panel({ title, children }: { title?: ReactNode; children: ReactNode }) {
-  return (
-    <section className={styles.panel}>
-      {title ? <div className={styles.panelHeader}>{title}</div> : null}
-      <div className={styles.panelBody}>{children}</div>
-    </section>
-  );
-}
-
-export function FieldRow({ label, children }: { label: ReactNode; children: ReactNode }) {
-  return (
-    <label className={styles.fieldRow}>
-      <span className={styles.fieldLabel}>{label}</span>
-      {children}
-    </label>
-  );
-}
-
-export function TextField({
-  label,
-  value,
-  onChange,
-}: {
-  label: ReactNode;
-  value: string | null | undefined;
-  onChange: (value: string) => void;
-}) {
-  return (
-    <FieldRow label={label}>
-      <input
-        className={styles.input}
-        value={value ?? ''}
-        onChange={(event) => onChange(event.target.value)}
-      />
-    </FieldRow>
-  );
-}
-
-export function NumberField({
-  label,
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-}: {
-  label: ReactNode;
-  value: number | null | undefined;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-}) {
-  const current = Number.isFinite(value) ? (value ?? 0) : 0;
-  const [draft, setDraft] = useState(String(current));
-  const editingRef = useRef(false);
-  const cancelRef = useRef(false);
-
-  // keep the draft in sync with the committed value while not editing
-  if (!editingRef.current && draft !== String(current)) {
-    setDraft(String(current));
-  }
-
-  function commit(raw: string): void {
-    let next = Number(raw);
-    if (!Number.isFinite(next)) next = current;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
-  }
-
-  function stepBy(delta: number): void {
-    let next = current + delta;
-    if (min != null && next < min) next = min;
-    if (max != null && next > max) next = max;
-    setDraft(String(next));
-    onChange(next);
-  }
-
-  return (
-    <FieldRow label={label}>
-      <div className={styles.numberField}>
-        <input
-          className={cx(styles.input, styles.numberInput)}
-          type="number"
-          min={min}
-          max={max}
-          step={step}
-          value={draft}
-          onFocus={() => {
-            editingRef.current = true;
-          }}
-          onChange={(event) => setDraft(event.target.value)}
-          onBlur={(event) => {
-            editingRef.current = false;
-            if (cancelRef.current) {
-              cancelRef.current = false;
-              setDraft(String(current));
-              return;
-            }
-            commit(event.target.value);
-          }}
-          onKeyDown={(event) => {
-            if (event.key === 'Enter') {
-              event.preventDefault();
-              commit(event.currentTarget.value);
-              event.currentTarget.blur();
-            } else if (event.key === 'Escape') {
-              event.preventDefault();
-              cancelRef.current = true;
-              setDraft(String(current));
-              event.currentTarget.blur();
-            }
-          }}
-        />
-        <div className={styles.numberSteppers}>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Increment"
-            disabled={max != null && current >= max}
-            onClick={() => stepBy(step)}>
-            <Icon name="chevron-up" />
-          </button>
-          <button
-            type="button"
-            className={styles.numberStepper}
-            tabIndex={-1}
-            aria-label="Decrement"
-            disabled={min != null && current <= min}
-            onClick={() => stepBy(-step)}>
-            <Icon name="chevron-down" />
-          </button>
-        </div>
-      </div>
-    </FieldRow>
-  );
-}
-
-export function CheckboxField({
-  label,
-  checked,
-  onChange,
-}: {
-  label: ReactNode;
-  checked: boolean | null | undefined;
-  onChange: (checked: boolean) => void;
-}) {
-  return (
-    <FieldRow label={label}>
-      <button
-        type="button"
-        className={cx(styles.toggle, checked && styles.toggleOn)}
-        role="switch"
-        aria-checked={!!checked}
-        onClick={() => onChange(!checked)}>
-        <span className={styles.toggleKnob} />
-      </button>
-    </FieldRow>
-  );
-}
-
-export function ColorField({
-  label,
-  value,
-  onChange,
-}: {
-  label: ReactNode;
-  value: string | null | undefined;
-  onChange: (value: string) => void;
-}) {
-  const hex = normalizeHex(value);
-  const alpha = hex.length === 9 ? hex.slice(7) : '';
-  const rgb = hex.slice(0, 7);
-  return (
-    <FieldRow label={label}>
-      <input
-        className={styles.colorInput}
-        type="color"
-        value={rgb}
-        onChange={(event) => onChange(event.target.value + alpha)}
-      />
-    </FieldRow>
-  );
-}
-
-function normalizeHex(value: string | null | undefined): string {
-  const raw = (value ?? '').trim();
-  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
-    return '#' + raw.slice(1).replace(/./g, (c) => c + c);
-  }
-  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
-  return '#000000';
-}
-
-export function isHexColor(value: unknown): value is string {
-  return (
-    typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
-  );
-}
-
-export type SheetSnap = 'high' | 'low' | 'hidden';
-
-export type SheetTransition = 'up' | 'down' | 'tap';
-
-export interface MobileSheetController {
-  rootProps: { className: string; 'data-sheet-snap': SheetSnap };
-  grabProps: {
-    className: string;
-    onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
-    onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
-    onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
-    onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
-  };
-}
-
-export function useMobileSheet({
-  snap,
-  baseClassName,
-  onTransition,
-}: {
-  snap: SheetSnap;
-  baseClassName: string;
-  onTransition: (direction: SheetTransition) => void;
-}): MobileSheetController {
-  const startY = useRef(0);
-  const lastDy = useRef(0);
-  const dragging = useRef(false);
-
-  function onPointerDown(event: PointerEvent<HTMLDivElement>): void {
-    startY.current = event.clientY;
-    lastDy.current = 0;
-    dragging.current = true;
-    event.currentTarget.setPointerCapture(event.pointerId);
-  }
-
-  function onPointerMove(event: PointerEvent<HTMLDivElement>): void {
-    if (!dragging.current) return;
-    lastDy.current = event.clientY - startY.current;
-  }
-
-  function endDrag(): void {
-    if (!dragging.current) return;
-    dragging.current = false;
-    const dy = lastDy.current;
-    lastDy.current = 0;
-    if (Math.abs(dy) < 6) onTransition('tap');
-    else if (dy > 30) onTransition('down');
-    else if (dy < -30) onTransition('up');
-  }
-
-  return {
-    rootProps: {
-      className: baseClassName,
-      'data-sheet-snap': snap,
-    },
-    grabProps: {
-      className: cx(styles.sheetGrab, styles.mobileOnly),
-      onPointerDown,
-      onPointerMove,
-      onPointerUp: endDrag,
-      onPointerCancel: endDrag,
-    },
-  };
-}
-
-export function SheetGrabHandle({ label, hint }: { label: ReactNode; hint?: ReactNode }) {
-  return (
-    <>
-      <div className={styles.sheetGrabBar} />
-      <div className={styles.sheetGrabLabelRow}>
-        <span className={styles.sheetGrabLabel}>{label}</span>
-        {hint ? <span className={styles.sheetGrabHint}>{hint}</span> : null}
-      </div>
-    </>
-  );
-}
-
-type SelectOption = string | { value: string; label: string };
-
-export function SelectField({
-  label,
-  value,
-  onChange,
-  options,
-}: {
-  label: ReactNode;
-  value: string | null | undefined;
-  onChange: (value: string) => void;
-  options: SelectOption[];
-}) {
-  return (
-    <FieldRow label={label}>
-      <select
-        className={styles.select}
-        value={value ?? ''}
-        onChange={(event) => onChange(event.target.value)}>
-        {options.map((option) => {
-          const value = typeof option === 'string' ? option : option.value;
-          const label = typeof option === 'string' ? option : option.label;
-          return (
-            <option key={value} value={value}>
-              {label}
-            </option>
-          );
-        })}
-      </select>
-    </FieldRow>
-  );
-}

package/kits/rpg-2d/eslint.config.js

@@ -1,46 +0,0 @@
-import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-export default tseslint.config(
-  {
-    ignores: ['node_modules/**', 'dist/**', '.castle/**', '*.config.js'],
-  },
-  js.configs.recommended,
-  ...tseslint.configs.recommendedTypeChecked,
-  {
-    files: ['engine/**/*.{ts,tsx}', 'editors/**/*.{ts,tsx}', 'behaviors/**/*.{ts,tsx}', '*.ts', '*.tsx'],
-    languageOptions: {
-      parserOptions: {
-        project: './tsconfig.json',
-        tsconfigRootDir: import.meta.dirname,
-        ecmaFeatures: { jsx: true },
-      },
-    },
-    plugins: {
-      'react-hooks': reactHooks,
-    },
-    rules: {
-      // disable noisy rules per spec
-      '@typescript-eslint/no-unsafe-assignment': 'off',
-      '@typescript-eslint/no-unsafe-member-access': 'off',
-      '@typescript-eslint/no-unsafe-call': 'off',
-      '@typescript-eslint/no-unsafe-return': 'off',
-      '@typescript-eslint/no-unsafe-argument': 'off',
-      '@typescript-eslint/explicit-function-return-type': 'off',
-      '@typescript-eslint/explicit-module-boundary-types': 'off',
-
-      // enabled rules per spec
-      complexity: ['error', 70],
-      'max-lines-per-function': ['error', 200],
-      '@typescript-eslint/no-explicit-any': 'error',
-      '@typescript-eslint/no-unused-vars': 'error',
-      '@typescript-eslint/no-floating-promises': 'error',
-      'prefer-const': 'error',
-      'no-var': 'error',
-      eqeqeq: 'warn',
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'warn',
-    },
-  },
-);

package/kits/rpg-2d/index.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
-    <title>Castle Basic 2D Kit</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/main.tsx"></script>
-  </body>
-</html>

package/kits/rpg-2d/main.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { isEdit, setup } from 'castle-web-sdk';
-import { App } from './editors/App';
-import { PlayOnly } from './editors/PlayOnly';
-
-document.body.dataset.castleScreenshotTarget = 'viewport';
-
-setup();
-
-const root = document.getElementById('root');
-if (!root) throw new Error('Missing root element');
-
-createRoot(root).render(isEdit() ? <App /> : <PlayOnly />);