@byline/ui 2.2.9 → 2.3.0

package/src/fields/file/file-upload-field.module.css

@@ -0,0 +1,101 @@
+/**
+ * FileUploadField — drag-and-drop file picker that registers a deferred
+ * upload in form context.
+ *
+ * Override handles:
+ *   .byline-field-file-upload                — root wrapper
+ *   .byline-field-file-upload-input          — visually-hidden file input
+ *   .byline-field-file-upload-zone           — clickable / drop target
+ *   .byline-field-file-upload-zone-active    — drag-hovered state
+ *   .byline-field-file-upload-zone-busy      — processing state
+ *   .byline-field-file-upload-icon           — upload icon svg
+ *   .byline-field-file-upload-label          — primary text inside the zone
+ *   .byline-field-file-upload-action         — "browse" link inside the label
+ *   .byline-field-file-upload-error          — error message paragraph
+ */
+
+.root,
+:global(.byline-field-file-upload) {
+  margin-top: 0.25rem;
+}
+
+.input,
+:global(.byline-field-file-upload-input) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.zone,
+:global(.byline-field-file-upload-zone) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-8);
+  padding: 1.5rem 1rem;
+  border: 2px dashed var(--gray-600);
+  border-radius: var(--border-radius-lg);
+  color: var(--gray-400);
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    color 150ms ease,
+    background-color 150ms ease,
+    border-color 150ms ease;
+}
+
+.zone:hover,
+:global(.byline-field-file-upload-zone):hover {
+  border-color: var(--primary-500);
+  background-color: oklch(from var(--primary-900) l c h / 0.1);
+}
+
+.zone-active,
+:global(.byline-field-file-upload-zone-active) {
+  border-color: var(--primary-400);
+  background-color: oklch(from var(--primary-900) l c h / 0.2);
+  color: var(--primary-300);
+}
+
+.zone-busy,
+:global(.byline-field-file-upload-zone-busy) {
+  border-color: var(--gray-700);
+  background-color: oklch(from var(--canvas-800) l c h / 0.5);
+  color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+.icon,
+:global(.byline-field-file-upload-icon) {
+  width: 1.75rem;
+  height: 1.75rem;
+  opacity: 0.6;
+}
+
+.label,
+:global(.byline-field-file-upload-label) {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.action,
+:global(.byline-field-file-upload-action) {
+  color: var(--primary-400);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.error,
+:global(.byline-field-file-upload-error) {
+  margin-top: 0.375rem;
+  color: var(--red-400);
+  font-size: var(--font-size-xs);
+}

package/src/fields/file/file-upload-field.tsx

@@ -0,0 +1,183 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+
+/**
+ * FileUploadField
+ *
+ * Generic drag-and-drop / click-to-browse file picker that prepares a file for
+ * upload. Mirrors `ImageUploadField` but without image-specific validation or
+ * dimension extraction. The actual upload is deferred until form submission —
+ * this component stores the file in the form context's pending uploads and
+ * emits a placeholder StoredFileValue with a blob URL (used by the form
+ * orchestrator for cleanup; not shown to the user).
+ */
+
+import type { ChangeEvent, DragEvent } from 'react'
+import { useCallback, useRef, useState } from 'react'
+
+import {
+  createPendingStoredFileValue,
+  type FileField as FieldType,
+  type PendingStoredFileValue,
+  type StoredFileValue,
+} from '@byline/core'
+import cx from 'classnames'
+
+import { useFormContext } from '../../forms/form-context'
+import styles from './file-upload-field.module.css'
+
+interface FileUploadFieldProps {
+  field: FieldType
+  /** Collection path used to build the upload URL (e.g. `'media'`). */
+  collectionPath: string
+  /** Field path in the form (e.g. `'attachment'` or `'content.0.attachment'`). */
+  fieldPath: string
+  /** Called with the PendingStoredFileValue for immediate UI update. */
+  onUploaded: (value: StoredFileValue | PendingStoredFileValue) => void
+  /** Optional `accept` MIME-type / extension string for the native file input. */
+  accept?: string
+}
+
+type SelectionStatus = 'idle' | 'processing' | 'error'
+
+export const FileUploadField = ({
+  field: _field,
+  collectionPath,
+  fieldPath,
+  onUploaded,
+  accept,
+}: FileUploadFieldProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [status, setStatus] = useState<SelectionStatus>('idle')
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [isDragOver, setIsDragOver] = useState(false)
+  const { addPendingUpload } = useFormContext()
+
+  const handleFileSelected = useCallback(
+    (file: File) => {
+      setStatus('processing')
+      setErrorMessage(null)
+
+      // Blob URL is created so the form orchestrator can revoke it on cleanup
+      // alongside image-field uploads; it isn't surfaced in the UI here.
+      const previewUrl = URL.createObjectURL(file)
+
+      const pendingValue = createPendingStoredFileValue(file, previewUrl)
+
+      addPendingUpload(fieldPath, {
+        file,
+        previewUrl,
+        collectionPath,
+      })
+
+      setStatus('idle')
+      onUploaded(pendingValue)
+    },
+    [collectionPath, fieldPath, addPendingUpload, onUploaded]
+  )
+
+  const handleFileChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0]
+      if (file) handleFileSelected(file)
+      // Reset so re-selecting the same file fires the event again.
+      e.target.value = ''
+    },
+    [handleFileSelected]
+  )
+
+  const handleBrowseClick = useCallback(() => {
+    inputRef.current?.click()
+  }, [])
+
+  const handleDragOver = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragOver(true)
+  }, [])
+
+  const handleDragLeave = useCallback((e: DragEvent<HTMLDivElement>) => {
+    e.preventDefault()
+    setIsDragOver(false)
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: DragEvent<HTMLDivElement>) => {
+      e.preventDefault()
+      setIsDragOver(false)
+      const file = e.dataTransfer.files?.[0]
+      if (file) handleFileSelected(file)
+    },
+    [handleFileSelected]
+  )
+
+  const isProcessing = status === 'processing'
+
+  return (
+    <div className={cx('byline-field-file-upload', styles.root)}>
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        className={cx('byline-field-file-upload-input', styles.input)}
+        onChange={handleFileChange}
+        disabled={isProcessing}
+        aria-hidden="true"
+        tabIndex={-1}
+      />
+
+      <div
+        role="button"
+        tabIndex={0}
+        aria-label="Upload file — drag and drop or click to browse"
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+        onClick={handleBrowseClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            handleBrowseClick()
+          }
+        }}
+        className={cx(
+          'byline-field-file-upload-zone',
+          styles.zone,
+          isDragOver &&
+            !isProcessing && ['byline-field-file-upload-zone-active', styles['zone-active']],
+          isProcessing && ['byline-field-file-upload-zone-busy', styles['zone-busy']]
+        )}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className={cx('byline-field-file-upload-icon', styles.icon)}
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          strokeWidth={1.5}
+          aria-hidden="true"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5"
+          />
+        </svg>
+        <span className={cx('byline-field-file-upload-label', styles.label)}>
+          Drop file here or{' '}
+          <span className={cx('byline-field-file-upload-action', styles.action)}>browse</span>
+        </span>
+      </div>
+
+      {status === 'error' && errorMessage && (
+        <p className={cx('byline-field-file-upload-error', styles.error)} role="alert">
+          {errorMessage}
+        </p>
+      )}
+    </div>
+  )
+}

package/src/fields/image/image-field.module.css

@@ -3,8 +3,8 @@
  *
  * Override handles:
  *   .byline-field-image                — wrapper div
- *   .byline-field-image-header         — label + remove button row
- *   .byline-field-image-remove         — remove-button text-link
+ *   .byline-field-image-header         — label row
+ *   .byline-field-image-remove         — remove-button (icon, top-right of tile)
  *   .byline-field-image-empty          — empty-state hint text
  *   .byline-field-image-tile           — bordered preview/metadata tile
  *   .byline-field-image-preview-wrap   — preview-image positioned wrapper
@@ -26,19 +26,19 @@
 
 .remove,
 :global(.byline-field-image-remove) {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--red-500);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
+  position: absolute;
+  top: var(--spacing-6);
+  right: var(--spacing-6);
+  z-index: 1;
 }
 
-.remove:hover,
-:global(.byline-field-image-remove):hover {
-  color: var(--red-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
+:global(.byline-field-image-remove .byline-button) {
+  color: var(--gray-900);
+}
+
+:global(.dark .byline-field-image-remove .byline-button),
+:global([data-theme="dark"] .byline-field-image-remove .byline-button) {
+  color: var(--gray-200);
 }
 
 .empty,
@@ -50,6 +50,7 @@
 
 .tile,
 :global(.byline-field-image-tile) {
+  position: relative;
   display: flex;
   gap: var(--spacing-16);
   margin-top: 0.25rem;
@@ -121,11 +122,24 @@
   border-radius: var(--border-radius-sm);
 }
 
+.uploading,
+:global(.byline-field-image-uploading) {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: oklch(from var(--gray-950) l c h / 0.5);
+  border-radius: var(--border-radius-md);
+}
+
 .meta,
 :global(.byline-field-image-meta) {
   display: flex;
   flex-direction: column;
   gap: 0.125rem;
+  padding-right: var(--spacing-32);
   color: var(--gray-200);
   font-size: var(--font-size-xs);
 }

package/src/fields/image/image-field.tsx

@@ -15,8 +15,16 @@ import {
 } from '@byline/core'
 import cx from 'classnames'
 
-import { useFieldError, useFieldValue, useFormContext, useIsDirty } from '../../forms/form-context'
-import { ErrorText, HelpText, Label } from '../../uikit.js'
+import { IconButton } from '../../components/button/icon-button.js'
+import {
+  useFieldError,
+  useFieldValue,
+  useFormContext,
+  useIsDirty,
+  useIsFieldUploading,
+} from '../../forms/form-context'
+import { CloseIcon } from '../../icons/close-icon.js'
+import { ErrorText, HelpText, Label, LoaderRing } from '../../uikit.js'
 import { ImageLightbox } from '../../widgets/image-lightbox/image-lightbox.js'
 import { useFieldChangeHandler } from '../use-field-change-handler'
 import styles from './image-field.module.css'
@@ -46,6 +54,7 @@ export const ImageField = ({
   const fieldError = useFieldError(fieldPath)
   const isDirty = useIsDirty(fieldPath)
   const fieldValue = useFieldValue<StoredFileValue | null | undefined>(fieldPath)
+  const isUploading = useIsFieldUploading(fieldPath)
   const { removePendingUpload } = useFormContext()
 
   // Re-use the standard field change handler so patches are emitted correctly.
@@ -103,16 +112,6 @@ export const ImageField = ({
           label={field.label ?? field.name}
           required={!field.optional}
         />
-        {/* Remove button — shown when an image is set (including pending) */}
-        {!showUploadWidget && collectionPath && (
-          <button
-            type="button"
-            className={cx('byline-field-image-remove', styles.remove)}
-            onClick={handleRemove}
-          >
-            Remove
-          </button>
-        )}
       </div>
 
       {showUploadWidget ? (
@@ -130,6 +129,30 @@ export const ImageField = ({
         )
       ) : (
         <div className={cx('byline-field-image-tile', styles.tile)}>
+          {isUploading && (
+            <div
+              className={cx('byline-field-image-uploading', styles.uploading)}
+              aria-live="polite"
+              aria-busy="true"
+            >
+              <LoaderRing />
+            </div>
+          )}
+          {/* Remove button — shown when an image is set (including pending) */}
+          {collectionPath && (
+            <div className={cx('byline-field-image-remove', styles.remove)}>
+              <IconButton
+                type="button"
+                intent="noeffect"
+                onClick={handleRemove}
+                size="xs"
+                disabled={isUploading}
+                aria-label="Remove image"
+              >
+                <CloseIcon width="15px" height="15px" />
+              </IconButton>
+            </div>
+          )}
           {/* Preview */}
           {previewUrl && (
             <div className={cx('byline-field-image-preview-wrap', styles['preview-wrap'])}>

package/src/fields/relation/relation-field.module.css

@@ -3,12 +3,12 @@
  *
  * Override handles:
  *   .byline-field-relation               — outer wrapper
- *   .byline-field-relation-header        — label + remove-button row
- *   .byline-field-relation-remove        — text-link remove button
+ *   .byline-field-relation-header        — label row
  *   .byline-field-relation-help          — help text below the label
  *   .byline-field-relation-error-tile    — wrapper shown when target collection is unknown
  *   .byline-field-relation-error-text    — secondary error message below the title
- *   .byline-field-relation-tile          — bordered selected-value + change-button container
+ *   .byline-field-relation-tile          — bordered selected-value + actions container
+ *   .byline-field-relation-actions       — top-right icon-button group (edit + remove)
  *   .byline-field-relation-mono          — monospace `<code>` for field/collection names
  */
 
@@ -20,23 +20,6 @@
   margin-bottom: 0.25rem;
 }
 
-.remove,
-:global(.byline-field-relation-remove) {
-  background: none;
-  border: none;
-  padding: 0;
-  color: var(--red-500);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-}
-
-.remove:hover,
-:global(.byline-field-relation-remove):hover {
-  color: var(--red-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-
 .help,
 :global(.byline-field-relation-help) {
   margin-bottom: 0.25rem;
@@ -66,7 +49,7 @@
 .tile,
 :global(.byline-field-relation-tile) {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-8);
   margin-top: 0.25rem;
@@ -77,6 +60,23 @@
   font-size: var(--font-size-xs);
 }
 
+.actions,
+:global(.byline-field-relation-actions) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+
+:global(.byline-field-relation-actions .byline-button) {
+  color: var(--gray-900);
+}
+
+:global(.dark .byline-field-relation-actions .byline-button),
+:global([data-theme="dark"] .byline-field-relation-actions .byline-button) {
+  color: var(--gray-200);
+}
+
 .mono,
 :global(.byline-field-relation-mono) {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

package/src/fields/relation/relation-field.tsx

@@ -18,7 +18,9 @@ import { getCollectionAdminConfig, getCollectionDefinition } from '@byline/core'
 import cx from 'classnames'
 
 import { useFieldError, useFieldValue } from '../../forms/form-context'
-import { Button, ErrorText, Label } from '../../uikit.js'
+import { CloseIcon } from '../../icons/close-icon.js'
+import { EditIcon } from '../../icons/edit-icon.js'
+import { Button, ErrorText, IconButton, Label } from '../../uikit.js'
 import styles from './relation-field.module.css'
 import { RelationPicker } from './relation-picker'
 import { RelationSummary } from './relation-summary'
@@ -128,15 +130,6 @@ export const RelationField = ({
           label={field.label ?? field.name}
           required={!field.optional}
         />
-        {incomingValue && !isUnknown && (
-          <button
-            type="button"
-            className={cx('byline-field-relation-remove', styles.remove)}
-            onClick={handleRemove}
-          >
-            Remove
-          </button>
-        )}
       </div>
       {field.helpText && (
         <div className={cx('byline-field-relation-help', styles.help)}>{field.helpText}</div>
@@ -161,16 +154,27 @@ export const RelationField = ({
             value={incomingValue}
             cachedRecord={cachedRecord}
           />
-          <Button
-            id={htmlId}
-            size="xs"
-            variant="outlined"
-            intent="noeffect"
-            type="button"
-            onClick={() => setPickerOpen(true)}
-          >
-            Change
-          </Button>
+          <div className={cx('byline-field-relation-actions', styles.actions)}>
+            <IconButton
+              id={htmlId}
+              type="button"
+              intent="noeffect"
+              size="xs"
+              aria-label={`Change ${targetDef.labels.singular}`}
+              onClick={() => setPickerOpen(true)}
+            >
+              <EditIcon width="15px" height="15px" />
+            </IconButton>
+            <IconButton
+              type="button"
+              intent="noeffect"
+              size="xs"
+              aria-label={`Remove ${targetDef.labels.singular}`}
+              onClick={handleRemove}
+            >
+              <CloseIcon width="15px" height="15px" />
+            </IconButton>
+          </div>
         </div>
       ) : (
         <Button

package/src/forms/form-context.tsx

@@ -38,6 +38,7 @@ type FieldListener = (value: any) => void
 type ErrorsListener = (errors: FormError[]) => void
 type MetaListener = () => void
 type SystemPathListener = (value: string | null) => void
+type FieldUploadingListener = (uploading: boolean) => void
 
 interface FormContextType {
   setFieldValue: (name: string, value: any) => void
@@ -66,6 +67,12 @@ interface FormContextType {
   getPendingUploads: () => Map<string, PendingUpload>
   hasPendingUploads: () => boolean
   clearPendingUploads: () => void
+  // Per-field upload-in-flight tracking. Mirrors the pending-uploads map but
+  // for the window during which the upload-executor is actively transporting
+  // a given fieldPath, so widgets can render a localised spinner/overlay.
+  setFieldUploading: (fieldPath: string, uploading: boolean) => void
+  getIsFieldUploading: (fieldPath: string) => boolean
+  subscribeFieldUploading: (fieldPath: string, listener: FieldUploadingListener) => () => void
   // System-managed `path` slot (persisted in `byline_document_paths`),
   // edited by the path widget. `null` means the widget will fall back
   // to live-derived preview / the server-side default; a non-null value
@@ -100,6 +107,8 @@ export const FormProvider = ({
   const dirtyFields = useRef<Set<string>>(new Set())
   const patchesRef = useRef<DocumentPatch[]>([])
   const pendingUploadsRef = useRef<Map<string, PendingUpload>>(new Map())
+  const uploadingFieldsRef = useRef<Set<string>>(new Set())
+  const uploadingListenersRef = useRef<Map<string, Set<FieldUploadingListener>>>(new Map())
 
   const fieldListeners = useRef<Map<string, Set<FieldListener>>>(new Map())
   const errorListeners = useRef<Set<ErrorsListener>>(new Set())
@@ -340,6 +349,48 @@ export const FormProvider = ({
     pendingUploadsRef.current.clear()
   }, [])
 
+  // ---------------------------------------------------------------------------
+  // Per-field upload-in-flight tracking
+  // ---------------------------------------------------------------------------
+
+  const setFieldUploading = useCallback((fieldPath: string, uploading: boolean) => {
+    if (uploading) {
+      if (uploadingFieldsRef.current.has(fieldPath)) return
+      uploadingFieldsRef.current.add(fieldPath)
+    } else {
+      if (!uploadingFieldsRef.current.has(fieldPath)) return
+      uploadingFieldsRef.current.delete(fieldPath)
+    }
+    uploadingListenersRef.current.get(fieldPath)?.forEach((listener) => {
+      listener(uploading)
+    })
+  }, [])
+
+  const getIsFieldUploading = useCallback((fieldPath: string) => {
+    return uploadingFieldsRef.current.has(fieldPath)
+  }, [])
+
+  const subscribeFieldUploading = useCallback(
+    (fieldPath: string, listener: FieldUploadingListener) => {
+      let listeners = uploadingListenersRef.current.get(fieldPath)
+      if (!listeners) {
+        listeners = new Set()
+        uploadingListenersRef.current.set(fieldPath, listeners)
+      }
+      listeners.add(listener)
+      return () => {
+        const set = uploadingListenersRef.current.get(fieldPath)
+        if (set) {
+          set.delete(listener)
+          if (set.size === 0) {
+            uploadingListenersRef.current.delete(fieldPath)
+          }
+        }
+      }
+    },
+    []
+  )
+
   // Cleanup blob URLs on unmount
   useEffect(() => {
     return () => {
@@ -534,6 +585,9 @@ export const FormProvider = ({
         getPendingUploads,
         hasPendingUploads,
         clearPendingUploads,
+        setFieldUploading,
+        getIsFieldUploading,
+        subscribeFieldUploading,
         getSystemPath,
         setSystemPath,
         subscribeSystemPath,
@@ -629,3 +683,22 @@ export const useFieldValue = <T = any>(name: string): T | undefined => {
 
   return value
 }
+
+/**
+ * Subscribe to a single field's upload-in-flight state. Returns `true` while
+ * the form orchestrator is actively transporting this field's pending upload
+ * (between the `setFieldUploading(path, true)` and the matching `false`
+ * emitted by the upload executor's progress callback).
+ */
+export const useIsFieldUploading = (fieldPath: string): boolean => {
+  const { getIsFieldUploading, subscribeFieldUploading } = useFormContext()
+  const [uploading, setUploading] = useState<boolean>(() => getIsFieldUploading(fieldPath))
+
+  useEffect(() => {
+    return subscribeFieldUploading(fieldPath, (next) => {
+      setUploading(next)
+    })
+  }, [subscribeFieldUploading, fieldPath])
+
+  return uploading
+}

package/src/forms/form-renderer.module.css

@@ -261,8 +261,7 @@
     padding-right: 12px;
     padding-top: 0.25rem;
     padding-left: var(--spacing-16);
-    border-left: var(--border-width-thin) var(--border-style-solid)
-      var(--gray-100);
+    border-left: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
     position: sticky;
     top: 95px;
   }