@kahitsan/ksui 0.27.0 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.27.0",
+  "version": "0.29.0",
   "description": "ksui is a standalone set of SolidJS UI components for KahitSan/Hilinga and any SolidJS app. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with only solid-js externalized; it depends on nothing but solid-js + lucide-solid and injects its own CSS.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/base/ExistingAttachmentTile.tsx

@@ -1,15 +1,24 @@
-// Renders one already-uploaded attachment as a 24×24 tile: an image preview or
-// a paperclip/file fallback linking to the s3_link public URL, an "Unavailable"
-// placeholder when the link can't be resolved (see lib/attachments.ts), and an
-// optional remove button. confirm is ksui's own self-contained dialog. The third
-// of the attachment widget set alongside AddAttachmentTile + CameraCapture.
+// Renders one already-uploaded attachment as a 24×24 tile: an image preview or a
+// paperclip/file fallback, an "Unavailable" placeholder when the source can't be
+// resolved, and an optional remove button. confirm is ksui's own self-contained
+// dialog. The third of the attachment widget set alongside AddAttachmentTile +
+// CameraCapture.
+//
+// Two source modes:
+//  • default — resolve the PUBLIC s3_link via attachmentUrl() (legacy public bucket).
+//  • `rawHref` set — stream the PRIVATE object's bytes from that authed same-origin
+//    route and render the resulting blob: (the proxy/blob pattern). s3_link is then
+//    ignored for rendering; a spinner shows while the bytes stream.
 
-import { Show, type Component } from "solid-js";
+import { Show, createSignal, type Component } from "solid-js";
 import Paperclip from "lucide-solid/icons/paperclip";
 import X from "lucide-solid/icons/x";
 import TriangleAlert from "lucide-solid/icons/triangle-alert";
+import Loader2 from "lucide-solid/icons/loader-2";
 import { confirm } from "../../utils/confirm";
 import { attachmentUrl, isResolvableAttachment } from "../../utils/attachments";
+import { createObjectUrlResource } from "../../utils/object-url-resource";
+import ImageViewer from "./ImageViewer";
 
 export interface ExistingAttachment {
   id: number;
@@ -23,10 +32,27 @@ interface Props {
   testId: string;
   onDelete?: (attachmentId: number) => Promise<void> | void;
   fallbackIcon?: Component<{ size?: number }>;
+  // When set, stream the private object's bytes from this authed same-origin route
+  // and render a blob: — the proxy/blob mode. When absent, fall back to the public
+  // s3_link. The fetch carries credentials; pass extra headers via `rawInit`.
+  rawHref?: string;
+  rawInit?: RequestInit;
 }
 
 export default function ExistingAttachmentTile(props: Props) {
-  const url = () => attachmentUrl(props.attachment.s3_link);
+  // Always call the hook (Solid rule); a null href no-ops when not in blob mode.
+  const blob = createObjectUrlResource(
+    () => props.rawHref ?? null,
+    { init: props.rawInit },
+  );
+  const isBlobMode = () => props.rawHref != null;
+  const url = (): string | undefined =>
+    isBlobMode() ? (blob() ?? undefined) : attachmentUrl(props.attachment.s3_link);
+  const resolvable = () =>
+    isBlobMode() ? blob() != null : isResolvableAttachment(props.attachment.s3_link);
+  const loading = () => (isBlobMode() ? blob.loading : false);
+  const [viewerOpen, setViewerOpen] = createSignal(false);
+
   const FallbackIcon = () => {
     const Icon = props.fallbackIcon ?? Paperclip;
     return <Icon size={20} />;
@@ -35,15 +61,26 @@ export default function ExistingAttachmentTile(props: Props) {
   return (
     <div class="relative group shrink-0" data-testid={props.testId}>
       <Show
-        when={isResolvableAttachment(props.attachment.s3_link)}
+        when={resolvable()}
         fallback={
           <div
             class="flex w-24 h-24 flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-zinc-700 bg-zinc-900/40 px-2 text-center text-zinc-500"
-            title={`${props.attachment.file_name} (file is no longer available)`}
+            title={
+              loading()
+                ? `${props.attachment.file_name} (loading)`
+                : `${props.attachment.file_name} (file is no longer available)`
+            }
           >
-            <TriangleAlert size={18} class="text-amber-500/70" />
+            <Show
+              when={loading()}
+              fallback={<TriangleAlert size={18} class="text-amber-500/70" />}
+            >
+              <Loader2 size={18} class="animate-spin text-zinc-500" />
+            </Show>
             <span class="truncate max-w-full text-[10px]">{props.attachment.file_name}</span>
-            <span class="text-[9px] uppercase tracking-wider">Unavailable</span>
+            <span class="text-[9px] uppercase tracking-wider">
+              {loading() ? "Loading" : "Unavailable"}
+            </span>
           </div>
         }
       >
@@ -52,8 +89,7 @@ export default function ExistingAttachmentTile(props: Props) {
           fallback={
             <a
               href={url()}
-              target="_blank"
-              rel="noopener"
+              download={props.attachment.file_name}
               class="flex w-24 h-24 flex-col items-center justify-center gap-1 rounded-lg border border-zinc-700 bg-zinc-800/50 px-2 text-xs text-zinc-300 hover:border-amber-500/30"
             >
               <FallbackIcon />
@@ -61,14 +97,13 @@ export default function ExistingAttachmentTile(props: Props) {
             </a>
           }
         >
-          <a
-            href={url()}
-            target="_blank"
-            rel="noopener"
-            class="block rounded-lg border border-zinc-700 overflow-hidden hover:border-amber-500/30"
+          <button
+            type="button"
+            onClick={() => setViewerOpen(true)}
+            class="block rounded-lg border border-zinc-700 overflow-hidden hover:border-amber-500/30 cursor-pointer"
           >
             <img src={url()} alt={props.attachment.file_name} class="w-24 h-24 object-cover" />
-          </a>
+          </button>
         </Show>
       </Show>
       <Show when={props.onDelete}>
@@ -89,6 +124,13 @@ export default function ExistingAttachmentTile(props: Props) {
           <X size={12} />
         </button>
       </Show>
+      <Show when={viewerOpen() && url()}>
+        <ImageViewer
+          src={url()!}
+          alt={props.attachment.file_name}
+          onClose={() => setViewerOpen(false)}
+        />
+      </Show>
     </div>
   );
 }

package/src/components/base/ImageViewer.tsx

@@ -0,0 +1,99 @@
+// Fullscreen image lightbox (Facebook-style): the image centered on a near-opaque
+// backdrop, dismissed by the X button, a backdrop click, or Escape. Built on the
+// native <dialog> (showModal) for top-layer rendering + native Escape + focus
+// containment — the same approach as Modal — but full-bleed with no card chrome,
+// so the image fills the viewport.
+//
+// Why this exists: assets are now served as same-origin object URLs (blob:), which
+// are revoked when their owning component unmounts — so opening one in a new tab
+// (target="_blank") breaks the moment the source view closes. An in-page viewer
+// renders the blob while it's still alive.
+//
+// Like the rest of ksui, no sidecar CSS: styles inject once via a runtime <style>
+// with unscoped `ksui-imgviewer-*` class names. Mount === open, unmount === closed
+// (wrap in `<Show when={…}>`).
+
+import { onCleanup, onMount } from "solid-js";
+import X from "lucide-solid/icons/x";
+import { lockPullToRefresh, unlockPullToRefresh } from "../../utils/dom";
+
+const STYLE_ID = "ksui-image-viewer-style";
+
+function ensureStyle(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.ksui-imgviewer{position:fixed;inset:0;z-index:60;background:transparent;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;border:0;}
+.ksui-imgviewer[open]{display:flex;align-items:center;justify-content:center;}
+.ksui-imgviewer::backdrop{background:rgba(0,0,0,0.92);backdrop-filter:blur(2px);}
+.ksui-imgviewer-img{max-width:96vw;max-height:96vh;object-fit:contain;border-radius:0.25rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.8);}
+.ksui-imgviewer-close{position:absolute;top:1rem;right:1rem;display:flex;width:2.5rem;height:2.5rem;align-items:center;justify-content:center;border-radius:9999px;background:rgba(255,255,255,0.12);color:#fff;border:0;cursor:pointer;}
+.ksui-imgviewer-close:hover{background:rgba(255,255,255,0.22);}
+`;
+  document.head.appendChild(style);
+}
+
+interface Props {
+  /** Image URL to display (typically a blob: object URL or a public link). */
+  src: string;
+  /** Accessible name + img alt. */
+  alt?: string;
+  /** Fired on the X button, a backdrop click, or Escape. */
+  onClose: () => void;
+}
+
+export default function ImageViewer(props: Props) {
+  ensureStyle();
+  let dialogEl: HTMLDialogElement | undefined;
+
+  lockPullToRefresh();
+  onCleanup(unlockPullToRefresh);
+
+  onMount(() => {
+    if (dialogEl && !dialogEl.open) {
+      try {
+        dialogEl.showModal();
+      } catch {
+        // showModal throws if already open or detached; harmless to ignore.
+      }
+    }
+  });
+  onCleanup(() => {
+    if (dialogEl?.open) dialogEl.close();
+  });
+
+  // Escape fires the dialog's native `cancel`; intercept it to route through onClose.
+  const handleCancel = (e: Event) => {
+    e.preventDefault();
+    props.onClose();
+  };
+  // A click whose target IS the dialog landed on the backdrop (the image + button
+  // are inner elements and stop here), so close.
+  const handleClick = (e: MouseEvent) => {
+    if (e.target === dialogEl) props.onClose();
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    <dialog
+      ref={dialogEl}
+      aria-modal="true"
+      aria-label={props.alt || "Image viewer"}
+      onCancel={handleCancel}
+      onClick={handleClick}
+      class="ksui-imgviewer"
+    >
+      <button
+        type="button"
+        aria-label="Close"
+        onClick={props.onClose}
+        class="ksui-imgviewer-close"
+      >
+        <X size={22} />
+      </button>
+      <img src={props.src} alt={props.alt || ""} class="ksui-imgviewer-img" />
+    </dialog>
+  );
+}

package/src/index.ts

@@ -52,6 +52,7 @@ export { default as FormField } from "./components/base/FormField";
 export { default as DetailRow } from "./components/base/DetailRow";
 export { default as Tooltip } from "./components/base/Tooltip";
 export { default as ImageCropper } from "./components/base/ImageCropper";
+export { default as ImageViewer } from "./components/base/ImageViewer";
 export { default as ProgressBar, type ProgressBarProps } from "./components/base/ProgressBar";
 export { default as ChartLegend } from "./components/base/ChartLegend";