{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "bookmark-manager-grid", "title": "Bookmark Manager Grid", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/bookmark-manager-grid/bookmark-manager-grid.component.ts", "content": "// Raindrop style visual web bookmarks and engineering resources manager with collection\n// folders, tag cloud filtering, real-time search, favorite toggles, copy link, and an add\n// bookmark modal. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n BookOpen,\n Bookmark,\n Bot,\n Check,\n CheckCircle2,\n Copy,\n ExternalLink,\n Globe,\n Layers,\n LucideAngularModule,\n Palette,\n Plus,\n Search,\n ShieldCheck,\n Star,\n Tag,\n Type,\n X,\n Zap,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type BookmarkCollection = 'design-systems' | 'web-perf' | 'typography' | 'ai-tools' | 'security'\n\nexport interface BookmarkItem {\n id: string\n title: string\n url: string\n domain: string\n faviconUrl: string\n previewImage: string\n excerpt: string\n collection: BookmarkCollection\n tags: string[]\n isFavorite: boolean\n savedAt: string\n}\n\nexport interface CollectionMeta {\n id: string\n name: string\n count: number\n iconName: 'bookmark' | 'palette' | 'zap' | 'type' | 'bot' | 'shield' | 'star'\n}\n\nconst INITIAL_BOOKMARKS: BookmarkItem[] = [\n {\n id: 'bm-01',\n title: 'OKLCH Color Picker & Converter',\n url: 'https://oklch.com',\n domain: 'oklch.com',\n faviconUrl: 'https://images.unsplash.com/photo-1550684848-fac1c5b4e853?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Interactive color space playground with gamut-mapping, APCA contrast ratios, and direct CSS/Tailwind OKLCH code generation.',\n collection: 'design-systems',\n tags: ['#oklch', '#tailwind', '#design-systems'],\n isFavorite: true,\n savedAt: 'Aug 18, 2026',\n },\n {\n id: 'bm-02',\n title: 'Reka UI Headless Vue Primitives',\n url: 'https://reka-ui.com',\n domain: 'reka-ui.com',\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Accessible, completely unstyled UI component primitives for Vue 3 with WAI-ARIA compliant keyboard focus and composite slots.',\n collection: 'design-systems',\n tags: ['#reka-ui', '#vue', '#design-systems'],\n isFavorite: true,\n savedAt: 'Aug 15, 2026',\n },\n {\n id: 'bm-03',\n title: 'Web Vitals Performance Playbook',\n url: 'https://web.dev/vitals',\n domain: 'web.dev',\n faviconUrl: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Diagnostic field guides for optimizing Interaction to Next Paint (INP), Largest Contentful Paint (LCP), and layout stability.',\n collection: 'web-perf',\n tags: ['#web-vitals', '#web-perf', '#astro'],\n isFavorite: false,\n savedAt: 'Aug 12, 2026',\n },\n {\n id: 'bm-04',\n title: 'Typewolf Font Trends & Pairings',\n url: 'https://typewolf.com',\n domain: 'typewolf.com',\n faviconUrl: 'https://images.unsplash.com/photo-1455390582262-044cdead277a?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1516962215378-7fa2e137ae93?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'The definitive guide to web typography, font pairings, lookbooks, variable font loading strategies, and typographic hierarchy.',\n collection: 'typography',\n tags: ['#typography', '#design-systems', '#react'],\n isFavorite: true,\n savedAt: 'Aug 09, 2026',\n },\n {\n id: 'bm-05',\n title: 'Vercel AI SDK 3.0 Documentation',\n url: 'https://sdk.vercel.ai/docs',\n domain: 'sdk.vercel.ai',\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Universal TypeScript library for streaming chat completions, structured JSON generation, tool calling, and multi-model routing.',\n collection: 'ai-tools',\n tags: ['#ai-prompt', '#react', '#astro'],\n isFavorite: false,\n savedAt: 'Aug 06, 2026',\n },\n {\n id: 'bm-06',\n title: 'OWASP API Security Top 10 Guide',\n url: 'https://owasp.org/API-Security',\n domain: 'owasp.org',\n faviconUrl: 'https://images.unsplash.com/photo-1563986768609-322da13575f3?w=64&auto=format&fit=crop&q=80',\n previewImage: 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80',\n excerpt:\n 'Crucial security vectors for modern APIs including broken object authorization, rate limiting flaws, and JWT key hygiene.',\n collection: 'security',\n tags: ['#security', '#web-perf'],\n isFavorite: false,\n savedAt: 'Aug 03, 2026',\n },\n]\n\nconst COLLECTIONS: CollectionMeta[] = [\n { id: 'all', name: 'All Bookmarks', count: 142, iconName: 'bookmark' },\n { id: 'design-systems', name: 'Design Systems', count: 28, iconName: 'palette' },\n { id: 'web-perf', name: 'Web Performance', count: 19, iconName: 'zap' },\n { id: 'typography', name: 'Typography & Fonts', count: 14, iconName: 'type' },\n { id: 'ai-tools', name: 'AI & LLM Tools', count: 35, iconName: 'bot' },\n { id: 'security', name: 'Security & Auth', count: 22, iconName: 'shield' },\n { id: 'favorites', name: 'Favorites ★', count: 18, iconName: 'star' },\n]\n\nconst TAG_CLOUD = [\n '#reka-ui',\n '#tailwind',\n '#oklch',\n '#astro',\n '#react',\n '#vue',\n '#typography',\n '#web-vitals',\n '#security',\n '#ai-prompt',\n]\n\nconst COLLECTION_IDS: BookmarkCollection[] = ['design-systems', 'web-perf', 'typography', 'ai-tools', 'security']\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-bookmark-manager-grid, [ui-bookmark-manager-grid]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n @if (notificationToast()) {\n \n \n {{ notificationToast() }}\n
\n }\n\n \n \n
\n
\n
\n \n
\n

Bookmarks & Engineering Resources

\n v2.1\n
\n

\n \n 142 bookmarks · 8 collections\n \n \n \n

\n
\n\n
\n \n
\n \n \n @if (searchQuery()) {\n \n \n \n }\n
\n\n \n \n \n Add Bookmark\n \n
\n
\n\n \n \n @for (col of collections; track col.id) {\n \n }\n \n\n \n
\n \n \n\n \n
\n \n \n
\n Collection:\n \n {{ activeCollectionMeta().name }}\n \n\n @if (selectedTag(); as tag) {\n Tag:\n \n {{ tag }}\n \n \n \n \n }\n\n @if (searchQuery()) {\n Query:\n “{{ searchQuery() }}”\n }\n\n @if (selectedCollection() !== 'all' || selectedTag() || searchQuery()) {\n \n Clear filters\n \n }\n
\n\n
\n Showing {{ filteredBookmarks().length }} of\n {{ bookmarks().length }} items\n
\n
\n\n \n @if (filteredBookmarks().length > 0) {\n
\n @for (item of filteredBookmarks(); track item.id) {\n \n \n
\n \n\n \n
\n\n \n
\n \n \n {{ item.domain }}\n
\n
\n\n \n \n \n \n \n\n \n
\n
\n
\n \n {{ item.title }}\n \n
\n\n

{{ item.excerpt }}

\n
\n\n \n
\n @for (t of item.tags; track t) {\n \n }\n
\n\n \n
\n {{ item.savedAt }}\n\n
\n \n @if (copiedId() === item.id) {\n \n } @else {\n \n }\n \n\n \n Open\n \n \n
\n
\n
\n \n }\n \n } @else {\n \n \n
\n \n
\n

No bookmarks found

\n

\n No engineering resources match your active collection, tag filter, or search query. Try clearing filters\n or add a new bookmark.\n

\n
\n \n \n
\n \n }\n \n \n\n \n \n \n
\n
\n
\n \n
\n

Add New Bookmark

\n
\n

\n Save a web resource or engineering tool with automated metadata fetching.\n

\n
\n\n
\n \n
\n \n
\n \n \n \n Fetch\n \n
\n
\n\n \n
\n Try sample:\n \n Astro SSG\n \n \n Linear Method\n \n \n GitHub Guides\n \n
\n\n \n\n \n
\n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n \n \n \n Design Systems\n Web Performance\n Typography & Fonts\n AI & LLM Tools\n Security & Auth\n \n \n
\n\n \n
\n \n \n
\n\n \n
\n \n Cancel\n \n \n
\n \n
\n \n \n `,\n})\nexport class UiBookmarkManagerGridComponent {\n protected readonly BookOpen = BookOpen\n protected readonly Bookmark = Bookmark\n protected readonly Bot = Bot\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Copy = Copy\n protected readonly ExternalLink = ExternalLink\n protected readonly Globe = Globe\n protected readonly Layers = Layers\n protected readonly Palette = Palette\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Star = Star\n protected readonly Tag = Tag\n protected readonly Type = Type\n protected readonly X = X\n protected readonly Zap = Zap\n\n protected readonly collections = COLLECTIONS\n protected readonly tagCloud = TAG_CLOUD\n\n @Input() set initialBookmarks(v: BookmarkItem[] | undefined) {\n if (v !== undefined) this.bookmarks.set(v.map((item) => ({ ...item, tags: [...item.tags] })))\n }\n @Input('class') className?: string\n\n readonly bookmarks = signal(INITIAL_BOOKMARKS.map((b) => ({ ...b, tags: [...b.tags] })))\n readonly searchQuery = signal('')\n readonly selectedCollection = signal('all')\n readonly selectedTag = signal(null)\n\n // Add Bookmark Modal state\n readonly isAddModalOpen = signal(false)\n readonly formUrl = signal('')\n readonly formTitle = signal('')\n readonly formDomain = signal('')\n readonly formExcerpt = signal('')\n readonly formCollection = signal('design-systems')\n readonly formTags = signal('')\n readonly formPreview = signal('')\n\n // Toast Notification\n readonly notificationToast = signal(null)\n private toastTimer: ReturnType | undefined\n\n // Copy URL feedback\n readonly copiedId = signal(null)\n private copyTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.toastTimer)\n clearTimeout(this.copyTimer)\n })\n }\n\n readonly filteredBookmarks = computed(() => {\n const collection = this.selectedCollection()\n const tag = this.selectedTag()\n const q = this.searchQuery().trim().toLowerCase()\n return this.bookmarks().filter((item) => {\n if (collection === 'favorites') {\n if (!item.isFavorite) return false\n } else if (collection !== 'all') {\n if (item.collection !== collection) return false\n }\n if (tag && !item.tags.includes(tag)) return false\n if (q) {\n const titleMatch = item.title.toLowerCase().includes(q)\n const domainMatch = item.domain.toLowerCase().includes(q)\n const excerptMatch = item.excerpt.toLowerCase().includes(q)\n const urlMatch = item.url.toLowerCase().includes(q)\n const tagMatch = item.tags.some((t) => t.toLowerCase().includes(q))\n if (!titleMatch && !domainMatch && !excerptMatch && !urlMatch && !tagMatch) return false\n }\n return true\n })\n })\n\n readonly activeCollectionMeta = computed(\n () => COLLECTIONS.find((c) => c.id === this.selectedCollection()) ?? COLLECTIONS[0]!,\n )\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n mobileCollectionClass(id: string): string {\n return cn(\n 'focus-visible:ring-ring flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.selectedCollection() === id\n ? 'bg-primary text-primary-foreground shadow-xs'\n : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n mobileCollectionCountClass(id: string): string {\n return cn(\n 'py-0.2 rounded-full px-1.5 font-mono text-xs tabular-nums',\n this.selectedCollection() === id\n ? 'bg-primary-foreground/20 text-primary-foreground'\n : 'bg-background/80 text-muted-foreground',\n )\n }\n\n sidebarCollectionClass(id: string): string {\n return cn(\n 'focus-visible:ring-ring flex w-full items-center justify-between rounded-lg px-3 py-2 text-xs font-medium transition-[color,background-color,box-shadow,transform] duration-150 focus-visible:ring-2 focus-visible:outline-none active:scale-[0.98]',\n this.selectedCollection() === id\n ? 'bg-primary/10 text-primary border-primary/20 border font-semibold shadow-xs'\n : 'text-muted-foreground hover:bg-muted/70 hover:text-foreground border border-transparent',\n )\n }\n\n sidebarCollectionCountClass(id: string): string {\n return cn(\n 'rounded-md px-1.5 py-0.5 font-mono text-xs tabular-nums',\n this.selectedCollection() === id ? 'bg-primary/20 text-primary font-bold' : 'bg-muted/60 text-muted-foreground',\n )\n }\n\n tagCloudClass(tag: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded-md border px-2 py-0.5 text-xs font-medium transition-[colors,transform] duration-150 focus-visible:ring-2 focus-visible:outline-none active:scale-95',\n this.selectedTag() === tag\n ? 'border-primary bg-primary/10 text-primary font-semibold shadow-xs'\n : 'border-border bg-background text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n )\n }\n\n tagPillClass(tag: string): string {\n return cn(\n 'min-h-6 rounded-md px-2 py-0.5 text-xs font-medium transition-[colors,transform] duration-150 active:scale-95',\n this.selectedTag() === tag\n ? 'bg-primary text-primary-foreground font-semibold'\n : 'bg-muted/70 text-muted-foreground hover:bg-muted hover:text-foreground',\n )\n }\n\n favoriteButtonClass(isFavorite: boolean): string {\n return cn(\n 'bg-background border-border/80 focus-visible:ring-ring absolute top-2.5 right-2.5 grid size-7 place-items-center rounded-full border shadow-xs transition-transform duration-150 hover:scale-105 focus-visible:ring-2 focus-visible:outline-none active:scale-90',\n isFavorite ? 'text-warning' : 'text-muted-foreground hover:text-warning',\n )\n }\n\n favoriteIconClass(isFavorite: boolean): string {\n return cn('size-4', isFavorite ? 'fill-warning text-warning' : '')\n }\n\n showNotification(msg: string): void {\n this.notificationToast.set(msg)\n clearTimeout(this.toastTimer)\n this.toastTimer = setTimeout(() => this.notificationToast.set(null), 2800)\n }\n\n async copyUrl(item: BookmarkItem, event?: MouseEvent): Promise {\n event?.stopPropagation()\n try {\n await navigator.clipboard?.writeText(item.url)\n } catch {\n // Clipboard fallback\n }\n this.copiedId.set(item.id)\n this.showNotification(`Copied link to clipboard: ${item.domain}`)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedId.set(null), 2000)\n }\n\n toggleFavorite(item: BookmarkItem, event?: MouseEvent): void {\n event?.stopPropagation()\n this.bookmarks.update((prev) =>\n prev.map((bm) => {\n if (bm.id !== item.id) return bm\n const nextFav = !bm.isFavorite\n this.showNotification(nextFav ? `Starred \"${bm.title}\"` : `Removed \"${bm.title}\" from favorites`)\n return { ...bm, isFavorite: nextFav }\n }),\n )\n }\n\n toggleTag(tag: string): void {\n this.selectedTag.update((prev) => (prev === tag ? null : tag))\n }\n\n resetFilters(): void {\n this.searchQuery.set('')\n this.selectedCollection.set('all')\n this.selectedTag.set(null)\n }\n\n setFormCollection(value: string): void {\n if ((COLLECTION_IDS as string[]).includes(value)) this.formCollection.set(value as BookmarkCollection)\n }\n\n setPresetUrl(url: string): void {\n this.formUrl.set(url)\n this.autoFetchMetadata()\n }\n\n autoFetchMetadata(): void {\n const url = this.formUrl().trim()\n if (!url) {\n this.showNotification('Please enter a URL first')\n return\n }\n\n let extractedDomain = ''\n try {\n const parsed = new URL(url.startsWith('http') ? url : `https://${url}`)\n extractedDomain = parsed.hostname.replace(/^www\\./, '')\n } catch {\n extractedDomain = 'developer.mozilla.org'\n }\n\n this.formDomain.set(extractedDomain)\n\n if (url.includes('github') || extractedDomain.includes('github')) {\n this.formTitle.set('GitHub Engineering Architecture Guides')\n this.formExcerpt.set(\n 'In-depth architectural post-mortems, system scaling principles, and resilient CI/CD pipelines.',\n )\n this.formCollection.set('web-perf')\n this.formTags.set('#web-perf, #security')\n this.formPreview.set(\n 'https://images.unsplash.com/photo-1618401471353-b98afee0b2eb?w=800&auto=format&fit=crop&q=80',\n )\n } else if (url.includes('astro') || extractedDomain.includes('astro')) {\n this.formTitle.set('Astro 4.0 Server Islands & SSG Docs')\n this.formExcerpt.set(\n 'Zero-JS by default frontend framework combining island architecture with fast static HTML builds.',\n )\n this.formCollection.set('design-systems')\n this.formTags.set('#astro, #react, #vue')\n this.formPreview.set('https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=800&auto=format&fit=crop&q=80')\n } else if (url.includes('linear') || extractedDomain.includes('linear')) {\n this.formTitle.set('Linear Method — Principles for Modern Software')\n this.formExcerpt.set(\n 'Practices and philosophies for high-craft product execution, issue triage, and keyboard-first UI.',\n )\n this.formCollection.set('design-systems')\n this.formTags.set('#design-systems, #tailwind')\n this.formPreview.set('https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&auto=format&fit=crop&q=80')\n } else {\n if (!this.formTitle()) this.formTitle.set(`${extractedDomain.toUpperCase()} — Resource Guide`)\n if (!this.formExcerpt())\n this.formExcerpt.set('Curated documentation and developer tooling reference for modern engineering workflows.')\n if (!this.formTags()) this.formTags.set('#oklch, #tailwind')\n if (!this.formPreview())\n this.formPreview.set(\n 'https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?w=800&auto=format&fit=crop&q=80',\n )\n }\n\n this.showNotification(`Fetched metadata from ${extractedDomain}`)\n }\n\n handleSaveBookmark(event?: Event): void {\n event?.preventDefault()\n if (!this.formUrl().trim()) {\n this.showNotification('Please enter a valid URL')\n return\n }\n\n const finalTitle = this.formTitle().trim() || this.formDomain().trim() || 'Untitled Bookmark'\n let cleanDomain = this.formDomain().trim()\n if (!cleanDomain) {\n try {\n const raw = this.formUrl()\n const parsed = new URL(raw.startsWith('http') ? raw : `https://${raw}`)\n cleanDomain = parsed.hostname.replace(/^www\\./, '')\n } catch {\n cleanDomain = 'web.dev'\n }\n }\n\n const rawTags = this.formTags()\n const tagList = rawTags\n ? rawTags\n .split(',')\n .map((t) => t.trim())\n .filter(Boolean)\n .map((t) => (t.startsWith('#') ? t : `#${t}`))\n : ['#design-systems']\n\n const rawUrl = this.formUrl()\n const newBookmark: BookmarkItem = {\n id: `bm-${Date.now()}`,\n title: finalTitle,\n url: rawUrl.startsWith('http') ? rawUrl : `https://${rawUrl}`,\n domain: cleanDomain,\n faviconUrl: 'https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=64&auto=format&fit=crop&q=80',\n previewImage:\n this.formPreview() ||\n 'https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=800&auto=format&fit=crop&q=80',\n excerpt: this.formExcerpt().trim() || 'Developer documentation, components, and reference guides.',\n collection: this.formCollection(),\n tags: tagList,\n isFavorite: false,\n savedAt: 'Just now',\n }\n\n this.bookmarks.update((prev) => [newBookmark, ...prev])\n this.isAddModalOpen.set(false)\n\n this.formUrl.set('')\n this.formTitle.set('')\n this.formDomain.set('')\n this.formExcerpt.set('')\n this.formTags.set('')\n this.formPreview.set('')\n\n this.showNotification(`Saved \"${finalTitle}\" to bookmarks!`)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/bookmark-manager-grid/bookmark-manager-grid.component.ts" }, { "path": "packages/registry-angular/blocks/bookmark-manager-grid/index.ts", "content": "export {\n UiBookmarkManagerGridComponent,\n type BookmarkCollection,\n type BookmarkItem,\n type CollectionMeta,\n} from './bookmark-manager-grid.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/bookmark-manager-grid/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Raindrop style visual web bookmarks and engineering resources manager with collection folders, tag cloud filtering, real-time search, favorite toggles, copy link, and add bookmark modal.", "categories": [ "productivity", "app", "dashboard", "collaboration" ] }