@kahitsan/ksui 0.26.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.26.0",
+  "version": "0.28.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,23 @@
-// 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 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";
 
 export interface ExistingAttachment {
   id: number;
@@ -23,10 +31,26 @@ 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 FallbackIcon = () => {
     const Icon = props.fallbackIcon ?? Paperclip;
     return <Icon size={20} />;
@@ -35,15 +59,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>
         }
       >

package/src/index.ts

@@ -194,6 +194,9 @@ export { buildLogoSrc } from "./utils/account-logo-url";
 
 export { attachmentUrl, isResolvableAttachment } from "./utils/attachments";
 
+export { createObjectUrlResource } from "./utils/object-url-resource";
+export type { ObjectUrlOptions } from "./utils/object-url-resource";
+
 export { useAccountsIndex, resolveAccount, resolveAccountName } from "./utils/accounts-index";
 
 export { INPUT_CLASS } from "./utils/INPUT_CLASS";

package/src/utils/object-url-resource.ts

@@ -0,0 +1,53 @@
+import { createResource, createEffect, onCleanup, type Resource } from "solid-js";
+
+export interface ObjectUrlOptions {
+  /** Extra fetch init, merged after `credentials: "include"` (e.g. tenant headers). */
+  init?: RequestInit;
+}
+
+/**
+ * Fetch a (typically authed, same-origin) resource and expose it as an object
+ * URL (`blob:`) for an `<img src>` / `<a href>`. This is the proxy/blob pattern
+ * for a privately-stored asset: the bytes come back through an app route that
+ * enforces auth/ownership, never a public or signed third-party URL — so the
+ * rendered src is a clean same-origin `blob:`, the storage origin is never
+ * exposed, and there is no leakable bearer link.
+ *
+ * The href accessor is the resource source: when it changes, the new blob is
+ * fetched and the previous object URL is revoked; the final one is revoked on
+ * cleanup (a created object URL leaks until revoked). `url()` is null while
+ * loading or on any failure — the consumer gates its own render — and
+ * `url.loading` distinguishes the two.
+ *
+ * Domain-free: the consumer supplies the href and any init (headers/credentials);
+ * this primitive assumes nothing about auth, tenancy, or endpoints.
+ */
+export function createObjectUrlResource(
+  href: () => string | null | undefined,
+  options: ObjectUrlOptions = {},
+): Resource<string | null> {
+  const [url] = createResource(
+    () => href() || null,
+    async (src) => {
+      const res = await fetch(src, { credentials: "include", ...options.init });
+      if (!res.ok) return null;
+      const blob = await res.blob();
+      return URL.createObjectURL(blob);
+    },
+  );
+
+  // Revoke the previous object URL when the resolved value changes, and the
+  // final one on unmount. During a refetch the resource holds its prior value
+  // (cur === prev), so an in-flight reload doesn't revoke a URL still on screen.
+  let prev: string | null = null;
+  createEffect(() => {
+    const cur = url() ?? null;
+    if (prev && prev !== cur) URL.revokeObjectURL(prev);
+    prev = cur;
+  });
+  onCleanup(() => {
+    if (prev) URL.revokeObjectURL(prev);
+  });
+
+  return url;
+}