create-table-app 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-table-app",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Create a new Table.js Smart TV app in one command",
   "bin": {
     "create-table-app": "./dist/index.mjs"
@@ -36,8 +36,8 @@
     "@types/prompts": "^2.4.9",
     "tsup": "^8.5.1",
     "typescript": "^6.0.2",
-    "@table-js/platform": "0.0.3",
-    "@table-js/tsconfig": "0.0.3"
+    "@table-js/platform": "0.0.4",
+    "@table-js/tsconfig": "0.0.4"
   },
   "scripts": {
     "build": "tsup",

package/templates/default/src/app/movie/[id]/page.tsx

@@ -1,4 +1,5 @@
-import { Focusable, useParams, useRouter } from '@table-js/core'
+import { useParams, useRouter } from '@table-js/core'
+import { Button } from '@table-js/ui'
 
 interface MovieParams {
   id: string
@@ -10,19 +11,9 @@ export default function MoviePage() {
 
   return (
     <div className="min-h-screen bg-(--color-background) text-(--color-text-primary) p-16">
-      <Focusable onSelect={back} autoFocus>
-        {(focused) => (
-          <button
-            className={`
-              px-6 py-3 rounded-(--radius-button) bg-(--color-surface) mb-8
-              transition-colors duration-150
-              ${focused ? 'bg-(--color-surface-hover) outline-3 outline-(--color-accent)' : ''}
-            `}
-          >
-            ← Back
-          </button>
-        )}
-      </Focusable>
+      <Button className="mb-8" variant="secondary" onSelect={back} autoFocus>
+        ← Back
+      </Button>
       <h1 className="text-5xl font-bold">Movie #{id}</h1>
     </div>
   )

package/templates/default/src/app/page.tsx

@@ -1,37 +1,70 @@
-import { Focusable, FocusGroup, useRouter } from '@table-js/core'
+import { useRouter } from '@table-js/core'
+import { Card, Shelf } from '@table-js/ui'
 
-const movies = [
-  { id: '1', title: 'Inception' },
-  { id: '2', title: 'Interstellar' },
-  { id: '3', title: 'The Dark Knight' },
+const rows = [
+  {
+    title: 'Trending',
+    items: [
+      { id: '1', title: 'Inception' },
+      { id: '2', title: 'Interstellar' },
+      { id: '3', title: 'The Dark Knight' },
+      { id: '4', title: 'Tenet' },
+      { id: '5', title: 'Dune' },
+      { id: '6', title: 'Arrival' },
+    ],
+  },
+  {
+    title: 'Continue Watching',
+    items: [
+      { id: '7', title: 'Severance' },
+      { id: '8', title: 'Silo' },
+      { id: '9', title: 'Foundation' },
+      { id: '10', title: 'Dark' },
+      { id: '11', title: 'Andor' },
+      { id: '12', title: 'Shogun' },
+    ],
+  },
+  {
+    title: 'Recommended',
+    items: [
+      { id: '13', title: 'The Matrix' },
+      { id: '14', title: 'Blade Runner 2049' },
+      { id: '15', title: 'The Creator' },
+      { id: '16', title: 'Mad Max: Fury Road' },
+      { id: '17', title: 'Edge of Tomorrow' },
+      { id: '18', title: 'Ex Machina' },
+    ],
+  },
 ]
 
 export default function HomePage() {
   const { navigate } = useRouter()
 
   return (
-    <div className="min-h-screen bg-(--color-background) text-(--color-text-primary) p-16">
-      <h1 className="text-4xl font-bold mb-12">My TV App</h1>
-      <FocusGroup orientation="horizontal" loop>
-        {movies.map((movie) => (
-          <Focusable
-            key={movie.id}
-            onSelect={() => navigate(`/movie/${movie.id}`)}
-          >
-            {(focused) => (
-              <div
-                className={`
-                  w-48 h-72 rounded-(--radius-card) bg-(--color-surface)
-                  flex items-end p-4 mr-6 transition-transform duration-150
-                  ${focused ? 'scale-105 outline-3 outline-(--color-accent)' : ''}
-                `}
-              >
-                <span className="font-semibold">{movie.title}</span>
-              </div>
-            )}
-          </Focusable>
+    <div className="min-h-screen bg-(--color-background) py-16 text-(--color-text-primary)">
+      <header className="mb-12 px-16">
+        <h1 className="mb-3 text-4xl font-bold">My TV App</h1>
+        <p className="max-w-3xl text-lg text-(--color-text-secondary)">
+          Auto-routed pages, TV focus navigation, and shelves that follow the active item.
+        </p>
+      </header>
+
+      <div className="space-y-10 pb-16">
+        {rows.map((row, rowIndex) => (
+          <Shelf key={row.title} title={row.title}>
+            {row.items.map((item, itemIndex) => (
+              <Card
+                key={item.id}
+                title={item.title}
+                subtitle="Open details"
+                className="h-72 w-48 shrink-0"
+                autoFocus={rowIndex === 0 && itemIndex === 0}
+                onSelect={() => navigate(`/movie/${item.id}`)}
+              />
+            ))}
+          </Shelf>
         ))}
-      </FocusGroup>
+      </div>
     </div>
   )
 }

package/templates/default/src/styles/globals.css

@@ -26,10 +26,6 @@ body {
   background-color: var(--color-background);
   color: var(--color-text-primary);
   font-family: var(--font-sans);
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
-
-[data-focused="true"] {
-  outline: 3px solid var(--color-accent);
-  outline-offset: 3px;
-}