fixes

Author: ctate

examples/ink-chat/src/app.tsx

@@ -107,7 +107,7 @@ DESIGN PRINCIPLES:
 - TABLES: Always set explicit column widths so columns don't collapse. Use headerColor:"cyan". Keep column headers short (abbreviate if needed). Right-align numeric columns.
 - CHARTS: Use distinct colors per bar in BarChart. Good palette: cyan, green, yellow, magenta, blue, red. Use Sparkline for compact inline trends alongside other content.
 - COLOR STRATEGY: Use color with intention, not decoration. cyan for labels and headers. green for positive values, growth, success. red for negative values, decline, errors. yellow for warnings or neutral highlights. dimColor:true for secondary/supporting text. Avoid coloring everything — contrast comes from restraint.
-- BORDERS: Use borderStyle:"single" on Tables. Avoid unnecessary borders elsewhere — let the content breathe.
+- TABLES WITH SHADING: When using borderStyle on a Table, always set backgroundColor too (e.g. backgroundColor:"#1a1a1a") so the border characters share the same shading. This avoids visual gaps.
 - SPACING: Use gap:1 between sections. Don't over-pad. Keep the UI compact and scannable. NEVER add padding to the root element — the app already provides outer padding.
 - WIDTH: Target 80 columns. Set explicit widths on Tables (total columns should sum to ~70-75). Use wrap:"truncate-end" on Text in tight spaces.
 - CALLOUTS: Use Callout for key takeaways, important notes, tips, and warnings. Set type (info/tip/warning/important) for a colored left border accent. Keep content concise — one key point per Callout.

packages/ink/src/catalog.ts

@@ -259,11 +259,12 @@ export const standardComponentDefinitions = {
       borderStyle: z
         .enum(["single", "double", "round", "bold", "classic"])
         .nullable(),
+      backgroundColor: z.string().nullable(),
       headerColor: z.string().nullable(),
     }),
     slots: [],
     description:
-      "Tabular data display with headers and rows. Each row is a record mapping column keys to string values.",
+      "Tabular data display with headers and rows. Each row is a record mapping column keys to string values. Set both borderStyle and backgroundColor together so borders share the same shading.",
     example: {
       columns: [
         { header: "Name", key: "name", width: 20 },

packages/ink/src/components/standard.tsx

@@ -325,6 +325,7 @@ function TableComponent({ element }: ComponentRenderProps) {
     }>;
     rows?: Array<Record<string, string>>;
     borderStyle?: string;
+    backgroundColor?: string;
     headerColor?: string;
   };
 
@@ -363,7 +364,11 @@ function TableComponent({ element }: ComponentRenderProps) {
     | undefined;
 
   return (
-    <Box flexDirection="column" borderStyle={borderStyleProp}>
+    <Box
+      flexDirection="column"
+      borderStyle={borderStyleProp}
+      backgroundColor={p.backgroundColor}
+    >
       {/* Header */}
       <Box>
         {columns.map((col, i) => (