@byline/cli 1.7.2 → 1.7.4

package/dist/templates/byline-examples/collections/media/components/media-list-view.module.css

@@ -0,0 +1,273 @@
+/**
+ * MediaListView — card-grid list view for the Media collection.
+ */
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
+
+.heading {
+  margin: 0 !important;
+  padding-bottom: 0.125rem;
+}
+
+.create-link {
+  margin-left: auto;
+}
+
+.stats {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.75rem;
+  min-width: 1.75rem;
+  padding: 0.3125rem 0.375rem;
+  margin-bottom: -0.25rem;
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+  line-height: 0;
+  background-color: var(--gray-25);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-sm);
+}
+
+:is([data-theme="dark"], :global(.dark)) .stats {
+  background-color: var(--canvas-700);
+}
+
+.toolbar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+  margin-top: 0.75rem;
+  margin-bottom: 1rem;
+}
+
+@media (min-width: 40rem) {
+  .toolbar {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+}
+
+.search {
+  width: 100%;
+  max-width: 21.875rem;
+}
+
+.order-group {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+@media (min-width: 40rem) {
+  .order-group {
+    margin-left: auto;
+  }
+}
+
+.order-label {
+  font-size: var(--font-size-sm);
+  white-space: nowrap;
+  color: var(--gray-500);
+}
+
+:is([data-theme="dark"], :global(.dark)) .order-label {
+  color: var(--gray-400);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  color: var(--gray-500);
+}
+
+:is([data-theme="dark"], :global(.dark)) .empty-state {
+  color: var(--gray-400);
+}
+
+.empty-loader {
+  margin-bottom: 1rem;
+  opacity: 0;
+}
+
+.empty-text {
+  font-size: var(--font-size-sm);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 40rem) {
+  .grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 48rem) {
+  .grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 77rem) {
+  .grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-sm);
+  background-color: white;
+  text-decoration: none;
+  transition: border-color 0.15s ease;
+}
+
+.card:hover {
+  border-color: var(--color-indigo-400);
+}
+
+:is([data-theme="dark"], :global(.dark)) .card {
+  border-color: var(--gray-700);
+  background-color: var(--canvas-800);
+}
+
+:is([data-theme="dark"], :global(.dark)) .card:hover {
+  border-color: var(--color-indigo-500);
+}
+
+.thumb-wrap {
+  position: relative;
+  aspect-ratio: 5 / 4;
+  overflow: hidden;
+  background-color: var(--gray-100);
+}
+
+:is([data-theme="dark"], :global(.dark)) .thumb-wrap {
+  background-color: var(--canvas-700);
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.2s ease;
+}
+
+.card:hover .thumb-img {
+  transform: scale(1.05);
+}
+
+.thumb-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  font-size: var(--font-size-xs);
+  color: var(--gray-400);
+}
+
+:is([data-theme="dark"], :global(.dark)) .thumb-placeholder {
+  color: var(--gray-600);
+}
+
+.card-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding: 0.5rem;
+  min-width: 0;
+  background-color: white;
+}
+
+:is([data-theme="dark"], :global(.dark)) .card-meta {
+  background-color: var(--canvas-800);
+}
+
+.card-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.375;
+}
+
+.card-meta-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.25rem;
+}
+
+.badges {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.updated-at {
+  margin-left: auto;
+  font-size: var(--font-size-xs);
+  color: var(--gray-500);
+}
+
+:is([data-theme="dark"], :global(.dark)) .updated-at {
+  color: var(--gray-400);
+}
+
+.status-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--border-radius-full);
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+}
+
+.status-published {
+  color: var(--color-emerald-400);
+  background-color: color-mix(in oklab, var(--color-emerald-500) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+}
+
+.status-archived {
+  color: var(--color-gray-400);
+  background-color: color-mix(in oklab, var(--color-gray-500) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-gray-500) 30%, transparent);
+}
+
+.status-default {
+  color: var(--color-amber-400);
+  background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-amber-500) 30%, transparent);
+}
+
+.bottom-pager {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 1.25rem;
+}

package/dist/templates/byline-examples/collections/media/components/media-list-view.tsx

@@ -35,18 +35,10 @@ import {
   Select,
 } from '@byline/ui/react'
 
+import { formatNumber } from '@/utils/utils.general'
+import styles from './media-list-view.module.css'
 import { FormatBadge } from './media-thumbnail'
 
-function formatNumber(n: number, decimalPlaces: number): string {
-  if (typeof n !== 'number' || Number.isNaN(n)) {
-    throw new TypeError('Input must be a valid number')
-  }
-  return n.toLocaleString('en-US', {
-    minimumFractionDigits: decimalPlaces,
-    maximumFractionDigits: decimalPlaces,
-  })
-}
-
 // ---------------------------------------------------------------------------
 // Order-by config
 // ---------------------------------------------------------------------------
@@ -82,11 +74,13 @@ function splitOrderValue(value: OrderValue): { order: string; desc: boolean } {
 // ---------------------------------------------------------------------------
 
 function Stats({ total }: { total: number }) {
-  return (
-    <span className="flex items-center justify-center h-7 min-w-7 px-1.5 py-1.25 -mb-1 whitespace-nowrap text-sm leading-0 bg-gray-25 dark:bg-canvas-700 border rounded-md">
-      {formatNumber(total, 0)}
-    </span>
-  )
+  return <span className={styles.stats}>{formatNumber(total, 0)}</span>
+}
+
+function statusClassName(status: string): string {
+  if (status === 'published') return styles['status-published']
+  if (status === 'archived') return styles['status-archived']
+  return styles['status-default']
 }
 
 function StatusBadge({
@@ -97,26 +91,14 @@ function StatusBadge({
   workflowStatuses: WorkflowStatus[]
 }) {
   const label = workflowStatuses.find((s) => s.name === status)?.label ?? status
-  const colour =
-    status === 'published'
-      ? 'bg-emerald-500/15 text-emerald-400 ring-emerald-500/30'
-      : status === 'archived'
-        ? 'bg-gray-500/15 text-gray-400 ring-gray-500/30'
-        : 'bg-amber-500/15 text-amber-400 ring-amber-500/30'
-  return (
-    <span
-      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${colour}`}
-    >
-      {label}
-    </span>
-  )
+  return <span className={`${styles['status-badge']} ${statusClassName(status)}`}>{label}</span>
 }
 
 function EmptyState() {
   return (
-    <div className="flex flex-col items-center justify-center py-20 text-gray-500 dark:text-gray-400">
-      <LoaderRing className="mb-4 opacity-0" size={1} color="transparent" />
-      <p className="text-sm">No media items found.</p>
+    <div className={styles['empty-state']}>
+      <LoaderRing className={styles['empty-loader']} size={1} color="transparent" />
+      <p className={styles['empty-text']}>No media items found.</p>
     </div>
   )
 }
@@ -184,14 +166,14 @@ export function MediaListView({
     <Section>
       <Container>
         {/* ---- Header ---- */}
-        <div className="flex items-center gap-3 py-0.5">
-          <h1 className="m-0! pb-0.5">{data.included.collection.labels.plural as string}</h1>
+        <div className={styles.header}>
+          <h1 className={styles.heading}>{data.included.collection.labels.plural as string}</h1>
           <Stats total={data.meta.total} />
           <IconButton
             aria-label="Upload New Media"
             render={
               <Link
-                className="ml-auto"
+                className={styles['create-link']}
                 to="/admin/collections/$collection/create"
                 params={{ collection: collectionPath }}
               />
@@ -202,21 +184,18 @@ export function MediaListView({
         </div>
 
         {/* ---- Toolbar ---- */}
-        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap items-start sm:items-center mt-3 mb-4">
+        <div className={styles.toolbar}>
           <Search
             onSearch={handleOnSearch}
             onClear={handleOnClear}
             inputSize="sm"
             placeholder="Search media…"
-            className="w-full max-w-87.5"
+            className={styles.search}
           />
 
           {/* Order-by */}
-          <div className="flex items-center gap-2 sm:ml-auto">
-            <label
-              htmlFor="media_order"
-              className="text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap"
-            >
+          <div className={styles['order-group']}>
+            <label htmlFor="media_order" className={styles['order-label']}>
               Order by
             </label>
             <Select
@@ -244,7 +223,7 @@ export function MediaListView({
         {data.docs.length === 0 ? (
           <EmptyState />
         ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-6 mt-4">
+          <div className={styles.grid}>
             {(data.docs as any[]).map((doc) => {
               const fields = doc.fields ?? {}
               const img = fields.image as StoredFileValue | null | undefined
@@ -258,41 +237,36 @@ export function MediaListView({
                   key={doc.id}
                   to="/admin/collections/$collection/$id"
                   params={{ collection: collectionPath, id: doc.id }}
-                  className="group flex flex-col overflow-hidden rounded border border-gray-200 dark:border-gray-700 bg-white dark:bg-canvas-800 hover:border-indigo-400 dark:hover:border-indigo-500 transition-colors no-underline"
+                  className={styles.card}
                 >
                   {/* Thumbnail */}
-                  <div className="relative aspect-5/4 overflow-hidden bg-gray-100 dark:bg-canvas-700">
+                  <div className={styles['thumb-wrap']}>
                     {thumbUrl ? (
                       <img
                         src={thumbUrl}
                         alt={fields.altText ?? img?.originalFilename ?? ''}
-                        className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                        className={styles['thumb-img']}
                         loading="lazy"
                       />
                     ) : (
-                      <span className="flex h-full w-full items-center justify-center text-xs text-gray-400 dark:text-gray-600">
-                        No image
-                      </span>
+                      <span className={styles['thumb-placeholder']}>No image</span>
                     )}
                   </div>
 
                   {/* Card meta */}
-                  <div className="flex flex-col gap-1.5 p-2 min-w-0">
-                    <span
-                      className="truncate text-sm font-medium leading-snug"
-                      title={fields.title ?? ''}
-                    >
+                  <div className={styles['card-meta']}>
+                    <span className={styles['card-title']} title={fields.title ?? ''}>
                       {fields.title ?? '—'}
                     </span>
-                    <div className="flex flex-wrap items-center justify-between gap-1">
-                      <div className="flex flex-wrap items-center gap-1">
+                    <div className={styles['card-meta-row']}>
+                      <div className={styles.badges}>
                         {doc.status && (
                           <StatusBadge status={doc.status} workflowStatuses={workflowStatuses} />
                         )}
                         {img?.imageFormat && <FormatBadge format={img.imageFormat} />}
                       </div>
                       {updatedAt && (
-                        <span className="ml-auto text-xs text-gray-500 dark:text-gray-400">
+                        <span className={styles['updated-at']}>
                           <LocalDateTime value={updatedAt} mode="date" />
                         </span>
                       )}
@@ -305,7 +279,7 @@ export function MediaListView({
         )}
 
         {/* ---- Bottom pagination ---- */}
-        <div className="flex justify-end mb-5">
+        <div className={styles['bottom-pager']}>
           <RouterPager
             smoothScrollToTop={true}
             page={data.meta.page}

package/dist/templates/byline-examples/collections/media/components/media-thumbnail.module.css

@@ -0,0 +1,35 @@
+/**
+ * MediaThumbnail / FormatBadge — list-view thumbnail and image-format pill.
+ */
+
+.format-badge {
+  display: inline-flex;
+  align-items: center;
+  border-radius: var(--border-radius-full);
+  padding: 0.125rem 0.5rem;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-gray-400);
+  background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
+  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-gray-500) 20%, transparent);
+}
+
+.placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 4.5rem;
+  height: 4.5rem;
+  border-radius: var(--border-radius-sm);
+  background-color: var(--gray-800);
+  color: var(--gray-600);
+  font-size: 0.6rem;
+}
+
+.thumbnail {
+  width: 4.5rem;
+  height: 4.5rem;
+  object-fit: cover;
+  border-radius: var(--border-radius-sm);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-700);
+}

package/dist/templates/byline-examples/collections/media/components/media-thumbnail.tsx

@@ -8,16 +8,14 @@
 
 import type { FormatterProps, StoredFileValue } from '@byline/core'
 
+import styles from './media-thumbnail.module.css'
+
 /**
  * FormatBadge renders a muted pill showing the image format (e.g. JPEG, PNG, SVG).
  * Intended for use alongside the status badge in list-view card meta.
  */
 export function FormatBadge({ format }: { format: string }) {
-  return (
-    <span className="inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset bg-gray-500/10 text-gray-400 ring-gray-500/20">
-      {format.toUpperCase()}
-    </span>
-  )
+  return <span className={styles['format-badge']}>{format.toUpperCase()}</span>
 }
 
 /**
@@ -31,11 +29,7 @@ export function MediaThumbnail({ record }: FormatterProps) {
   const img = fields.image as StoredFileValue | null | undefined
 
   if (!img?.storageUrl) {
-    return (
-      <span className="inline-flex items-center justify-center w-18 h-18 bg-gray-800 rounded text-gray-600 text-[0.6rem]">
-        —
-      </span>
-    )
+    return <span className={styles.placeholder}>—</span>
   }
 
   const thumbVariant = img.variants?.find((v) => v.name === 'thumbnail')
@@ -45,7 +39,7 @@ export function MediaThumbnail({ record }: FormatterProps) {
     <img
       src={thumbUrl}
       alt={img.originalFilename ?? img.filename}
-      className="w-18 h-18 object-cover rounded border border-gray-700"
+      className={styles.thumbnail}
       loading="lazy"
     />
   )

package/dist/templates/byline-examples/components/summary-length.module.css

@@ -0,0 +1,21 @@
+/**
+ * SummaryLength — HelpText slot wrapping LengthIndicator + helpText description.
+ */
+
+.wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+}
+
+.help-text {
+  margin-bottom: 0.25rem;
+  font-size: var(--font-size-sm);
+  line-height: 1.25;
+  color: var(--gray-500);
+}
+
+:is([data-theme="dark"], :global(.dark)) .help-text {
+  color: var(--gray-400);
+}

package/dist/templates/byline-examples/components/summary-length.tsx

@@ -10,6 +10,7 @@ import type { FieldHelpTextSlotProps, SlotComponent } from '@byline/core'
 import { useFieldValue } from '@byline/ui/react'
 
 import { LengthIndicator } from './length-indicator'
+import styles from './summary-length.module.css'
 
 /**
  * Custom HelpText slot component for summary-style textArea fields.
@@ -29,11 +30,9 @@ export const SummaryLength: SlotComponent<FieldHelpTextSlotProps> = ({ path, hel
   const value = useFieldValue<string>(path)
 
   return (
-    <div className="mt-2 flex flex-col gap-1">
+    <div className={styles.wrap}>
       <LengthIndicator minLength={100} maxLength={300} text={value} />
-      {helpText && (
-        <p className="text-sm text-gray-500 dark:text-gray-400 leading-tight mb-1">{helpText}</p>
-      )}
+      {helpText && <p className={styles['help-text']}>{helpText}</p>}
     </div>
   )
 }

package/dist/templates/routes/_byline/route.tsx

@@ -38,11 +38,13 @@ export const Route = createFileRoute('/_byline')({
 
 function BylineLayout() {
   return (
+  <div className="byline-ui flex flex-col flex-1 w-full max-w-full h-full">
     <ToastProvider timeout={5000}>
       <BreadcrumbsProvider>
         <Outlet />
       </BreadcrumbsProvider>
       <ToastViewport position="bottom-right" />
-    </ToastProvider>
+      </ToastProvider>
+  </div>
   )
 }

package/dist/templates/ui-byline/render-blocks.tsx

@@ -6,21 +6,38 @@ import { RichTextBlock as RichTextBlockDef } from '~/blocks/richtext-block'
 
 import { PhotoBlock } from '@/ui/byline/blocks/photo-block'
 import { RichTextBlock } from '@/ui/byline/blocks/richtext-block'
-import { toKebabCase } from '@/ui/byline/utils/to-kebab-case'
-import type { Locale } from '@/ui/byline/types/i18n'
+import { toKebabCase } from '@/ui/utils/to-kebab-case'
+import type { Locale } from '@/i18n/i18n-config'
 
-/**
- * Registered block schemas. Add a new block here (and a matching `case`
- * in the switch below) to wire it into the front-end renderer.
- */
 const Blocks = [PhotoBlockDef, RichTextBlockDef] as const
 
-/**
- * Discriminated union of every registered block's instance shape. Use
- * this as the `blocks` prop type when calling `RenderBlocks`.
- */
 export type AnyBlock = BlocksUnion<typeof Blocks>
 
+// Mapped type ensures every AnyBlock['_type'] has a registered component.
+// TypeScript errors here if Blocks gains a new type without a matching entry.
+type BlockRegistry = {
+  [K in AnyBlock['_type']]: React.ComponentType<{
+    id: string
+    block: Extract<AnyBlock, { _type: K }>
+    lng: Locale
+    constrainedLayout?: boolean
+  }>
+}
+
+const blockComponents: BlockRegistry = {
+  photoBlock: PhotoBlock,
+  richTextBlock: RichTextBlock,
+}
+
+// Loose alias for the call site — BlockRegistry enforces correctness at
+// definition time; TypeScript can't infer the correlation during the map loop.
+type AnyBlockComponent = React.ComponentType<{
+  id: string
+  block: AnyBlock
+  lng: Locale
+  constrainedLayout?: boolean
+}>
+
 interface Props {
   blocks: AnyBlock[] | undefined | null
   lng: Locale
@@ -37,34 +54,12 @@ export function RenderBlocks({
   return (
     <>
       {blocks.map((block) => {
-        switch (block._type) {
-          case 'photoBlock':
-            return (
-              <Section className={toKebabCase(block._type)} key={block._id}>
-                <PhotoBlock
-                  id={block._id}
-                  block={block}
-                  lng={lng}
-                  constrainedLayout={constrainedLayout}
-                />
-              </Section>
-            )
-          case 'richTextBlock':
-            return (
-              <Section className={toKebabCase(block._type)} key={block._id}>
-                <RichTextBlock
-                  id={block._id}
-                  block={block}
-                  lng={lng}
-                  constrainedLayout={constrainedLayout}
-                />
-              </Section>
-            )
-          default: {
-            const _exhaustive: never = block
-            return null
-          }
-        }
+        const Block = blockComponents[block._type] as AnyBlockComponent
+        return (
+          <Section className={toKebabCase(block._type)} key={block._id}>
+            <Block id={block._id} block={block} lng={lng} constrainedLayout={constrainedLayout} />
+          </Section>
+        )
       })}
     </>
   )

package/package.json

@@ -2,7 +2,7 @@
   "name": "@byline/cli",
   "private": false,
   "license": "MPL-2.0",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "engines": {
     "node": ">=20.9.0"
   },