Add Document Annotation Title listing

AnnotationCard/35572061-1354-450a-8dd7-2a7ef3e2342d.json

@@ -0,0 +1,28 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "documentUrl": null,
+      "documentTitle": null,
+      "annotations": [],
+      "pageNumber": null,
+      "position": null,
+      "annotationType": null,
+      "color": null,
+      "createdAt": null,
+      "annotationData": null,
+      "cardInfo": {
+        "name": null,
+        "summary": null,
+        "cardThumbnailURL": null,
+        "notes": null
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../annotation-2f9c8aa5-a258-4390-839d-fc965f5e915e/annotation/annotation",
+        "name": "AnnotationCard"
+      }
+    }
+  }
+}

CardListing/1a427887-81aa-45ff-9296-a3671cacaef2.json

@@ -0,0 +1,74 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "CardListing",
+        "module": "https://realms-staging.stack.cards/catalog/catalog-app/listing/listing"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "name": "Document Annotation Title",
+      "images": [],
+      "summary": "A comprehensive annotation card definition for PDFs, enabling users to view, create, and manage annotations such as highlights, notes, drawings, and comments on individual document pages. The primary purpose is to facilitate rich, interactive PDF annotation within a card-based interface, supporting functionalities like page navigation, zooming, drawing with variable colors and thickness, and annotation data export. It integrates with PDF.js for rendering pages and text layers, allowing precise text highlighting and annotation overlay. The component provides tools for drawing annotations directly on PDFs, managing annotation states, and displaying associated notes. It is designed for both embedded and isolated (standalone) contexts, with styles optimized for a professional, modern UI, including toolbar controls, annotation overlays, and notes panel, thus enabling dynamic, user-friendly PDF annotation workflows.",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      }
+    },
+    "relationships": {
+      "tags": {
+        "links": {
+          "self": null
+        }
+      },
+      "specs.0": {
+        "links": {
+          "self": "../Spec/1a32aa1a-433a-4cdc-8f9f-404b1965136e"
+        }
+      },
+      "skills": {
+        "links": {
+          "self": null
+        }
+      },
+      "license": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/License/4c5a023b-a72c-4f90-930b-da60a1de5b2d"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": null
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../AnnotationCard/35572061-1354-450a-8dd7-2a7ef3e2342d"
+        }
+      },
+      "examples.1": {
+        "links": {
+          "self": "../annotation-2f9c8aa5-a258-4390-839d-fc965f5e915e/annotation/AnnotationCard/dsa-textbook-annotations"
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "https://realms-staging.stack.cards/catalog/Category/content-creation"
+        }
+      },
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "cardInfo.cardThumbnail": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}

Spec/1a32aa1a-433a-4cdc-8f9f-404b1965136e.json

@@ -0,0 +1,45 @@
+{
+  "data": {
+    "meta": {
+      "adoptsFrom": {
+        "name": "Spec",
+        "module": "https://cardstack.com/base/spec"
+      }
+    },
+    "type": "card",
+    "attributes": {
+      "ref": {
+        "name": "AnnotationCard",
+        "module": "../annotation-2f9c8aa5-a258-4390-839d-fc965f5e915e/annotation/annotation"
+      },
+      "readMe": "Sure, here's the usage documentation for the AnnotationCard spec:\n\n## Summary\nThe AnnotationCard spec is a card component that allows users to annotate PDF documents with various types of annotations such as highlights, notes, drawings, and comments. It provides a rich set of features for interacting with the PDF, managing annotations, and customizing the appearance of the card.\n\n## Import\n```javascript\nimport { AnnotationCard } from 'https://realms-staging.stack.cards/chuan16/catalog-listing-test-11/annotation-2f9c8aa5-a258-4390-839d-fc965f5e915e/annotation/annotation';\n```\n\n## Usage as a Field\nTo use the AnnotationCard as a field within a consuming card or field, you can define it as follows:\n\n```javascript\n@field annotationCard = contains(AnnotationCard);\n```\n\nThis will add an AnnotationCard field to your card or field definition, which can be used to display and interact with the PDF annotation features.\n\n## Template Usage\nWithin your consuming card or field template, you can use the AnnotationCard like this:\n\n```handlebars\n<AnnotationCard @model={{this.annotationCard}} />\n```\n\nThe `@model` argument should be bound to the `annotationCard` field defined in your card or field.\n\nThe AnnotationCard spec provides a rich set of features and customization options, including:\n\n- Annotation types (highlights, notes, drawings, comments)\n- Annotation management (create, update, delete)\n- PDF viewer with zoom, pan, and page navigation\n- Toolbar for selecting annotation tools and settings\n- Sidebar for viewing and managing annotations\n- Exporting and clearing annotations\n- Error handling and retry functionality\n\nRefer to the Boxel Development Guide for more information on how to use and configure the AnnotationCard spec.",
+      "cardInfo": {
+        "name": null,
+        "notes": null,
+        "summary": null,
+        "cardThumbnailURL": null
+      },
+      "specType": "card",
+      "cardTitle": "Document Annotation",
+      "cardDescription": null,
+      "containedExamples": []
+    },
+    "relationships": {
+      "cardInfo.theme": {
+        "links": {
+          "self": null
+        }
+      },
+      "linkedExamples": {
+        "links": {
+          "self": null
+        }
+      },
+      "cardInfo.cardThumbnail": {
+        "links": {
+          "self": null
+        }
+      }
+    }
+  }
+}