A React component library for rendering common AT Protocol records for applications such as Bluesky and Leaflet.
1/**
2 * Type definitions for grain.social records
3 * Uses standard atcute blob types for compatibility
4 */
5import type { Blob } from "@atcute/lexicons/interfaces";
6import type { BlobWithCdn } from "../hooks/useBlueskyAppview";
7
8/**
9 * grain.social gallery record
10 * A container for a collection of photos
11 */
12export interface GrainGalleryRecord {
13 /**
14 * Record type identifier
15 */
16 $type: "social.grain.gallery";
17 /**
18 * Gallery title
19 */
20 title: string;
21 /**
22 * Gallery description
23 */
24 description?: string;
25 /**
26 * Self-label values (content warnings)
27 */
28 labels?: {
29 $type: "com.atproto.label.defs#selfLabels";
30 values: Array<{ val: string }>;
31 };
32 /**
33 * Timestamp when the gallery was created
34 */
35 createdAt: string;
36}
37
38/**
39 * grain.social gallery item record
40 * Links a photo to a gallery
41 */
42export interface GrainGalleryItemRecord {
43 /**
44 * Record type identifier
45 */
46 $type: "social.grain.gallery.item";
47 /**
48 * AT URI of the photo (social.grain.photo)
49 */
50 item: string;
51 /**
52 * AT URI of the gallery this item belongs to
53 */
54 gallery: string;
55 /**
56 * Position/order within the gallery
57 */
58 position?: number;
59 /**
60 * Timestamp when the item was added to the gallery
61 */
62 createdAt: string;
63}
64
65/**
66 * grain.social photo record
67 * Compatible with records from @atcute clients
68 */
69export interface GrainPhotoRecord {
70 /**
71 * Record type identifier
72 */
73 $type: "social.grain.photo";
74 /**
75 * Alt text description of the image (required for accessibility)
76 */
77 alt: string;
78 /**
79 * Photo blob reference - uses standard AT Proto blob format
80 * Supports any image/* mime type
81 * May include cdnUrl when fetched from appview
82 */
83 photo: Blob<`image/${string}`> | BlobWithCdn;
84 /**
85 * Timestamp when the photo was created
86 */
87 createdAt?: string;
88 /**
89 * Aspect ratio of the photo
90 */
91 aspectRatio?: {
92 width: number;
93 height: number;
94 };
95}