@kahitsan/ksui 0.28.0 → 0.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.28.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

@@ -10,7 +10,7 @@
 //    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";
@@ -18,6 +18,7 @@ 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;
@@ -50,6 +51,7 @@ export default function ExistingAttachmentTile(props: Props) {
   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;
@@ -87,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 />
@@ -96,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}>
@@ -124,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";