Introduce ShowFileConfig and other related changes

.changeset/big-ghosts-trade.md

@@ -0,0 +1,11 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Expand user-actions module with more utilities
+
+- `ActionResponse` type, designed to allow for more rich error messages from
+  e.g. server actions
+- `mapUserActionState` (basic functional map function over `UserActionState`)
+- `useUserAction` - a react hook for managing state relating to user actions
+  and promise-based calls

.changeset/early-bees-take.md

@@ -0,0 +1,5 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Add sigil-grid tailwind utility classes

.changeset/every-pans-cry.md

@@ -0,0 +1,5 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Add vAligh attribute to ControlLabel

.changeset/fine-roses-show.md

@@ -0,0 +1,10 @@
+---
+'@arcanewizards/sigil': minor
+---
+
+Introduce a new `ShowFileConfig` component
+
+Introduce a new component for the UI / frontend for consistently managing show
+files across sigil-based apps. The first usage of this component will be in
+Arcane Desktop, but additional usages (e.g. timecode-toolbox) are expected
+later on.

.changeset/silent-bags-make.md

@@ -0,0 +1,8 @@
+---
+'@arcanewizards/sigil': patch
+---
+
+Introduce ControlFileButton component
+
+This is a special-case of a ControlButton,
+designed to load files from the users' system.

packages/sigil/package.json

@@ -65,6 +65,12 @@
       "import": "./dist/frontend/preferences.js",
       "require": "./dist/frontend/preferences.cjs"
     },
+    "./frontend/showfiles": {
+      "@arcanewizards/source": "./src/frontend/showfiles.tsx",
+      "types": "./dist/frontend/showfiles.d.ts",
+      "import": "./dist/frontend/showfiles.js",
+      "require": "./dist/frontend/showfiles.cjs"
+    },
     "./frontend/spinner": {
       "@arcanewizards/source": "./src/frontend/spinner.tsx",
       "types": "./dist/frontend/spinner.d.ts",

packages/sigil/src/frontend/controls/buttons.tsx

@@ -2,6 +2,8 @@ import {
   ComponentPropsWithoutRef,
   CSSProperties,
   forwardRef,
+  useCallback,
+  useRef,
   type ReactNode,
 } from 'react';
 import { cn } from '@arcanejs/toolkit-frontend/util';
@@ -217,6 +219,56 @@ export const CheckboxControlButton = forwardRef<
 
 CheckboxControlButton.displayName = 'CheckboxControlButton';
 
+export type ControlFileButtonProps = Omit<ControlButtonProps, 'onClick'> &
+  Pick<ComponentPropsWithoutRef<'input'>, 'accept' | 'multiple'> & {
+    onFilesSelected: (files: FileList) => Promise<void>;
+  };
+
+export const ControlFileButton = forwardRef<
+  HTMLButtonElement,
+  ControlFileButtonProps
+>(({ onFilesSelected, accept, multiple, children, ...props }, ref) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      if (event.target.files) {
+        onFilesSelected(event.target.files).finally(() => {
+          // Reset the input value to allow re-selecting the same file
+          // But only after promise has resolded, and so files have been read
+          event.target.value = '';
+        });
+      }
+    },
+    [onFilesSelected],
+  );
+
+  return (
+    <>
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        style={{ display: 'none' }}
+        onChange={handleChange}
+      />
+      <ControlButton
+        title="Import spell"
+        onClick={handleClick}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </ControlButton>
+    </>
+  );
+});
+
 export type LongPressableControlButtonProps = Omit<
   ControlButtonFrameProps,
   'icon' | 'onClick' | 'touching'

packages/sigil/src/frontend/controls/content.tsx

@@ -58,19 +58,31 @@ export type ControlLabelProps = ComponentPropsWithoutRef<'label'> & {
   position?: ControlPosition;
   disabled?: boolean;
   nonMicro?: boolean;
+  vAlign?: 'start' | 'center' | 'end';
 };
 
 export const ControlLabel = forwardRef<HTMLLabelElement, ControlLabelProps>(
   (
-    { className, disabled, nonMicro, position = 'label', subgrid, ...props },
+    {
+      className,
+      disabled,
+      nonMicro,
+      position = 'label',
+      subgrid,
+      vAlign = 'center',
+      ...props
+    },
     ref,
   ) => {
     return (
       <label
         {...props}
         ref={ref}
         className={cn(
-          'flex items-center justify-end gap-0.6 p-0.6',
+          'flex justify-end gap-0.6 p-0.6',
+          cnd(vAlign === 'start', 'items-start'),
+          cnd(vAlign === 'center', 'items-center'),
+          cnd(vAlign === 'end', 'items-end'),
           clsControlPosition(position),
           cnd(nonMicro, 'max-[550px]:hidden'),
           cnd(disabled, 'opacity-50'),
@@ -95,7 +107,7 @@ export const ControlDetails = forwardRef<HTMLDivElement, ControlDetailsProps>(
       {...props}
       ref={ref}
       className={cn(
-        'flex items-center px-0.3 text-sigil-foreground-muted',
+        'flex items-center px-0.3 py-0.6 text-sigil-foreground-muted',
         clsControlPosition(position),
         cnd(align === 'start', 'justify-start'),
         cnd(align === 'center', 'justify-center'),