4d:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T1833,'use client'; import { Eye, EyeOff, FileText, Lock, StickyNote, Trash2 } from 'lucide-react'; import { cn } from '@/registry/localmode/lib/utils'; /** The kind of encrypted item a card represents. */ export type VaultItemKind = 'note' | 'document'; /** Props for {@link VaultItemCard}. */ export interface VaultItemCardProps { /** Item title (a non-sensitive envelope field — safe to render while locked). */ title: string; /** Creation timestamp (preformatted display string, e.g. "2 days ago"). */ createdAt?: string; /** * Whether the vault is locked. When `true`, the body is masked, no content * is rendered, and the reveal/delete actions are disabled. */ locked: boolean; /** * Whether the decrypted content is currently revealed. Only meaningful while * unlocked. The consuming app toggles this via `onReveal`/`onHide`. * @default false */ revealed?: boolean; /** * The decrypted plaintext content — supplied by the caller ONLY when revealed. * The card never receives ciphertext or key material; the app decrypts and * passes plaintext in when the user reveals. */ content?: string; /** Item kind — drives the icon and the masked-body wording. @default 'note' */ kind?: VaultItemKind; /** Fired when the user requests to reveal (decrypt-on-view) the content. */ onReveal?: () => void; /** Fired when the user hides the revealed content. */ onHide?: () => void; /** Fired when the user deletes the item. */ onDelete?: () => void; /** Additional class names merged onto the root element. */ className?: string; } /** * A lock-state-aware card for a single encrypted vault item (a note or a text * document). When `locked`, the card renders a masked placeholder body with the * reveal/delete actions disabled — no decrypted content is present in the DOM. * When unlocked, it shows the title/timestamp with a reveal/hide toggle over the * caller-supplied decrypted `content` and a delete action, all via callbacks. * * The card never receives or renders ciphertext or key material: the consuming * app decrypts and passes plaintext in `content` only when `revealed` is true. * Works with any backend; recommended source: `useEncryptedVault` from * `@localmode/react` (`items`, `readItem`, `deleteItem`). * * Styled with shadcn/ui CSS variables so it inherits the consumer's theme. * * @example * ```tsx * reveal(item.id)} * onHide={() => setOpenId(null)} * onDelete={() => deleteItem(item.id)} * /> * ``` */ export function VaultItemCard({ title, createdAt, locked, revealed = false, content, kind = 'note', onReveal, onHide, onDelete, className, }: VaultItemCardProps) { const KindIcon = kind === 'document' ? FileText : StickyNote; // Locked ⇒ never render content; unlocked+revealed ⇒ render caller plaintext. const showContent = !locked && revealed; return (

{locked ? ( ) : ( )}

{/* Body: masked while locked or hidden, plaintext only when revealed. */} {showContent ? (

          {content}

) : ( )}

); } export default VaultItemCard; 4c:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4d",null,{"namespace":"@localmode","registryDependencies":["https://localmode.ai/r/ui/lib/utils.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"registry/localmode/security-privacy/vault-item-card/vault-item-card.tsx","content":"$4f","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]