Skeleton catalog app

packages/base/command.gts

@@ -28,7 +28,7 @@ export class SaveCardInput extends CardDef {
 
 export class CopyCardInput extends CardDef {
   @field sourceCard = linksTo(CardDef);
-  @field targetRealmUrl = contains(StringField);
+  @field targetUrl = contains(StringField);
   @field targetStackIndex = contains(NumberField);
 }
 

packages/base/spec.gts

@@ -43,7 +43,7 @@ import Brain from '@cardstack/boxel-icons/brain';
 import { use, resource } from 'ember-resources';
 import { TrackedObject } from 'tracked-built-ins';
 
-export type SpecType = 'card' | 'field' | 'app' | 'skill';
+export type SpecType = 'card' | 'field' | 'component' | 'app' | 'skill';
 
 class SpecTypeField extends StringField {
   static displayName = 'Spec Type';
@@ -54,6 +54,9 @@ const PRIMITIVE_INCOMPATIBILITY_MESSAGE =
 
 class Isolated extends Component<typeof Spec> {
   get defaultIcon() {
+    if (!this.args.model) {
+      return;
+    }
     return this.args.model.constructor?.icon;
   }
 
@@ -111,7 +114,7 @@ class Isolated extends Component<typeof Spec> {
         <div class='box header-icon-container'>
           {{#if this.icon}}
             <this.icon width='35' height='35' role='presentation' />
-          {{else}}
+          {{else if this.defaultIcon}}
             <this.defaultIcon width='35' height='35' role='presentation' />
           {{/if}}
         </div>
@@ -304,6 +307,9 @@ class Isolated extends Component<typeof Spec> {
 
 class Fitted extends Component<typeof Spec> {
   get defaultIcon() {
+    if (!this.args.model) {
+      return;
+    }
     return this.args.model.constructor?.icon;
   }
 
@@ -336,7 +342,7 @@ class Fitted extends Component<typeof Spec> {
       <div class='thumbnail-section'>
         {{#if this.icon}}
           <this.icon width='35' height='35' role='presentation' />
-        {{else}}
+        {{else if this.defaultIcon}}
           <this.defaultIcon width='35' height='35' role='presentation' />
         {{/if}}
       </div>
@@ -563,6 +569,9 @@ class Fitted extends Component<typeof Spec> {
 
 class Edit extends Component<typeof Spec> {
   get defaultIcon() {
+    if (!this.args.model) {
+      return;
+    }
     return this.args.model.constructor?.icon;
   }
 
@@ -622,7 +631,7 @@ class Edit extends Component<typeof Spec> {
         <div class='box header-icon-container'>
           {{#if this.icon}}
             <this.icon width='35' height='35' role='presentation' />
-          {{else}}
+          {{else if this.defaultIcon}}
             <this.defaultIcon width='35' height='35' role='presentation' />
           {{/if}}
         </div>
@@ -903,6 +912,13 @@ export class Spec extends CardDef {
       );
     },
   });
+
+  @field isComponent = contains(BooleanField, {
+    computeVia: function (this: Spec) {
+      return this.specType === 'component';
+    },
+  });
+
   @field moduleHref = contains(StringField, {
     computeVia: function (this: Spec) {
       if (!this.ref || !this.ref.module) {
@@ -1021,6 +1037,8 @@ function getIcon(specType: string) {
       return LayoutList;
     case 'skill':
       return Brain;
+    case 'component':
+      return LayoutList;
     default:
       return;
   }

packages/boxel-ui/addon/src/components.ts

@@ -58,7 +58,9 @@ import SkeletonPlaceholder from './components/skeleton-placeholder/index.gts';
 import Switch from './components/switch/index.gts';
 import TabbedHeader from './components/tabbed-header/index.gts';
 import Tooltip from './components/tooltip/index.gts';
-import ViewSelector from './components/view-selector/index.gts';
+import ViewSelector, {
+  type ViewItem,
+} from './components/view-selector/index.gts';
 
 export {
   Accordion,
@@ -117,5 +119,6 @@ export {
   Switch,
   TabbedHeader,
   Tooltip,
+  ViewItem,
   ViewSelector,
 };

packages/boxel-ui/addon/src/components/view-selector/index.gts

@@ -11,7 +11,7 @@ import {
 } from '../../icons.gts';
 import RadioInput from '../radio-input/index.gts';
 
-interface ViewItem {
+export interface ViewItem {
   icon: ComponentLike;
   id: string;
 }

packages/catalog-realm-dev/CardListing/10ff8743-4b8c-403e-95a6-90c36cbb98ca.json

@@ -0,0 +1,57 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Blackjack Game",
+      "summary": "Classic casino Blackjack with authentic rules - hit, stand, or double down as you play against the dealer's AI. Features dynamic card scoring, 3:2 blackjack payouts, flexible betting options, and persistent statistics tracking.",
+      "images": [
+        "https://boxel-images.boxel.ai/app-assets/catalog/blackjack-listing/screenshot_02.png"
+      ],
+      "description": null,
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/catalog/blackjack-listing/thumbnail.png"
+    },
+    "relationships": {
+      "specs.0": {
+        "links": {
+          "self": "../Spec/5cef210f-cb2d-43d5-83ee-d5144deb3671"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": "../Publisher/ae15f401-5340-4098-ba7f-ab23a3058dff"
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "../Category/f6a67357-ba77-4e38-a5de-03e20fa46193"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/631d1b5d-fcd0-465c-964e-e535fc6bb893"
+        }
+      },
+      "tags.1": {
+        "links": {
+          "self": "../Tag/4d0f9ae2-048e-4ce0-b263-7006602ce6a4"
+        }
+      },
+      "license": {
+        "links": {
+          "self": null
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../blackjack/BlackjackGame/7afce4bc-c331-48ca-bc53-3b9cc2e81333"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../catalog-app/listing/listing",
+        "name": "CardListing"
+      }
+    }
+  }
+}

packages/catalog-realm-dev/CardListing/4aca5509-09d5-4aec-aeba-1cd26628cca9.json

@@ -0,0 +1,52 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Mortgage Calculator",
+      "summary": "🏠 Mortgage Calculator\n\nEasily estimate your monthly mortgage payments and understand where your money goes — all in one simple, visual tool.\n\n💡 What It Does\n\nThis calculator helps you break down the full cost of homeownership. Just enter a few details about your potential home and loan, and you'll get:\n\nYour estimated monthly mortgage payment\n\nA clear view of how much goes to:\n- Principal & Interest\n- Property Taxes\n- Home Insurance\n- HOA Fees\n- Total lifetime costs over the life of the loan\n\n📋 What You Can Input\n- Home Price\n- Down Payment (%)\n- Loan Term (Years)\n- Interest Rate (%)\n- Monthly Property Tax\n- Monthly Insurance\n- Monthly HOA Fees\n\n📊 Visual Breakdown\n\nYou'll also see a colorful donut chart that shows exactly what portion of your monthly payment goes where — no guessing.\n\n🎯 Perfect For\n- First-time home buyers\n- Real estate agents helping clients compare options\n- Anyone planning for a big purchase\n\n⚙️ How It Helps\nKnow what to expect before you buy:\n- Set realistic budgets\n- Compare different scenarios\n- Understand the true cost of a mortgage",
+      "images": [
+        "https://boxel-images.boxel.ai/app-assets/catalog/mortgage-calculator-listing/screenshot_01.png"
+      ],
+      "description": null,
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/catalog/mortgage-calculator-listing/thumbnail.png"
+    },
+    "relationships": {
+      "specs.0": {
+        "links": {
+          "self": "../Spec/mortgage-calculator"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": "../Publisher/acbb43d6-69c8-4833-8f2b-5539fb997d9c"
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "../Category/67777a04-bec0-4f71-a1be-26a26bcdc314"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/c1fe433a-b3df-41f4-bdcf-d98686ee42d7"
+        }
+      },
+      "license": {
+        "links": {
+          "self": null
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../mortgage-calculator/MortgageCalculator/example"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../catalog-app/listing/listing",
+        "name": "CardListing"
+      }
+    }
+  }
+}

packages/catalog-realm-dev/CardListing/552da558-5642-4541-89b0-28622db3bc84.json

@@ -0,0 +1,64 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Leaflet Map",
+      "summary": "The Leaflet Map card is an interactive mapping component built using the Leaflet.js library. It accepts three key parameters: latitude and longitude coordinates for map positioning, and an optional custom tile server URL (defaulting to OpenStreetMap). The map is rendered in a full-width and full-height container, automatically loading the necessary Leaflet.js library and CSS from CDN.\n\nThe component centers the map on the specified coordinates with a default zoom level of 13, providing users with an interactive experience that includes panning and zooming capabilities. It supports both isolated and embedded views, though the embedded view functionality is currently not implemented. This makes it a versatile tool for displaying geographical data in various contexts.",
+      "images": [
+        "https://boxel-images.boxel.ai/app-assets/catalog/leaflet-listing/screenshot_02.png",
+        "https://boxel-images.boxel.ai/app-assets/catalog/leaflet-listing/screenshot_03.png",
+        "https://boxel-images.boxel.ai/app-assets/catalog/leaflet-listing/screenshot_01.png"
+      ],
+      "description": null,
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/catalog/leaflet-listing/thumbnail.png "
+    },
+    "relationships": {
+      "specs.0": {
+        "links": {
+          "self": "../Spec/leaflet-map"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": "../Publisher/3e7ef86b-79d8-4814-beda-d24b176029b7"
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "../Category/38b5d1dc-00d3-4a19-8998-29f0c19081de"
+        }
+      },
+      "tags": {
+        "links": {
+          "self": null
+        }
+      },
+      "license": {
+        "links": {
+          "self": null
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../leaflet-map/LeafletMap/new-york-city-leaflet-map"
+        }
+      },
+      "examples.1": {
+        "links": {
+          "self": "../leaflet-map/LeafletMap/singapore-leaflet-map"
+        }
+      },
+      "examples.2": {
+        "links": {
+          "self": "../leaflet-map/LeafletMap/winnipeg"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../catalog-app/listing/listing",
+        "name": "CardListing"
+      }
+    }
+  }
+}

packages/catalog-realm-dev/CardListing/9ffcb030-9c5a-4d17-ace6-2ea83c6ae2d4.json

@@ -0,0 +1,68 @@
+{
+  "data": {
+    "type": "card",
+    "attributes": {
+      "name": "Cycling Mileage Log",
+      "summary": "Track your cycling progress with this elegant, feature-rich mileage logger. Set targets, log your rides with origin and destination details, and visualize your progress with beautiful charts. Perfect for casual cyclists and serious riders looking to achieve their distance goals.",
+      "images": [
+        "https://boxel-images.boxel.ai/app-assets/catalog/cycling-mileage-listing/screenshot_01.png ",
+        "https://boxel-images.boxel.ai/app-assets/catalog/cycling-mileage-listing/screenshot_02.png "
+      ],
+      "description": null,
+      "thumbnailURL": "https://boxel-images.boxel.ai/app-assets/catalog/cycling-mileage-listing/thumbnail.png "
+    },
+    "relationships": {
+      "specs.0": {
+        "links": {
+          "self": "../Spec/74f2e937-553d-408f-b8fc-aba2fa844f98"
+        }
+      },
+      "publisher": {
+        "links": {
+          "self": "../Publisher/187c0111-8e4b-4af4-88d0-e6ea77abe0c1"
+        }
+      },
+      "categories.0": {
+        "links": {
+          "self": "../Category/f79a73f8-07f9-4944-83b3-54814b33d5b2"
+        }
+      },
+      "categories.1": {
+        "links": {
+          "self": "../Category/38b5d1dc-00d3-4a19-8998-29f0c19081de"
+        }
+      },
+      "tags.0": {
+        "links": {
+          "self": "../Tag/4d0f9ae2-048e-4ce0-b263-7006602ce6a4"
+        }
+      },
+      "license": {
+        "links": {
+          "self": null
+        }
+      },
+      "examples.0": {
+        "links": {
+          "self": "../cycling-mileage/CyclingMileageLog/9fc98a27-ad5c-450d-843f-9c55730f0122"
+        }
+      },
+      "examples.1": {
+        "links": {
+          "self": "../cycling-mileage/CyclingMileageLog/866ddaf1-ea85-4a11-b012-7b2e9758a248"
+        }
+      },
+      "examples.2": {
+        "links": {
+          "self": "../cycling-mileage/CyclingMileageLog/e4f0c385-5558-4c68-acc9-3476baa61333"
+        }
+      }
+    },
+    "meta": {
+      "adoptsFrom": {
+        "module": "../catalog-app/listing/listing",
+        "name": "CardListing"
+      }
+    }
+  }
+}