New table component (design guide)

packages/core/plugins.ts

@@ -2,7 +2,7 @@ import plugin from 'tailwindcss/plugin';
 import type { OptionalConfig } from 'tailwindcss/types/config';
 
 export const plugins = [
-  plugin(({ addUtilities, matchUtilities, theme }) => {
+  plugin(({ addUtilities, matchUtilities, theme, addComponents }) => {
     addUtilities({
       '.scrollbar-thin': {
         'scrollbar-width': 'thin',
@@ -317,5 +317,29 @@ export const plugins = [
       },
       { values: theme('cursor') }
     );
+
+    /* Table style guide with custom classes */
+    addComponents({
+      '.grid-container': {
+        '@apply w-full border border-b-0 border-light text-sm': {},
+      },
+      '.table-header': {
+        '@apply h-8 bg-light text-xs': {},
+      },
+      '.table-header-cell': {
+        '@apply h-8 min-h-0 content-center items-center truncate border-b border-light p-2 text-subtle-1':
+          {},
+      },
+      '.table-cell': {
+        '@apply min-h-12 content-center items-center truncate border-b border-light p-2':
+          {},
+      },
+      '.table-cell-link': {
+        '@apply flex h-full w-full items-center hover:underline': {},
+      },
+      '.table-cell-flex': {
+        '@apply flex items-center gap-2': {},
+      },
+    });
   }),
 ] satisfies OptionalConfig['plugins'];

packages/core/src/lib/index.ts

@@ -81,3 +81,6 @@ export { useTimeout } from './use-timeout';
 export { uniqueId } from './unique-id';
 export { default as VectorInput } from './vector-input.svelte';
 export { highlightCode } from './highlight-code';
+
+export { default as ListTable } from './new_table/list-table.svelte';
+export { default as ListTableCell } from './new_table/list-table-cell.svelte';

packages/core/src/lib/new_table/list-table-cell.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+import cx from 'classnames';
+
+/** Additional CSS classes */
+let extraClasses: cx.Argument = '';
+export { extraClasses as cx };
+
+/** Whether this is a header cell */
+export let header = false;
+</script>
+
+<li
+  role={header ? 'columnheader' : 'cell'}
+  class={cx(
+    'flex items-center gap-2 border-b p-2',
+    header ? 'bg-light text-subtle-1' : '',
+    extraClasses
+  )}
+  {...$$restProps}
+>
+  <slot />
+</li>

packages/core/src/lib/new_table/list-table.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+import cx from 'classnames';
+
+/**
+ * Variant:
+ * - 'auto': no predefined widths; rows are flex.
+ * - 'fixed': user provides column widths via cols prop; rows are grid.
+ */
+export let variant: 'auto' | 'fixed' = 'auto';
+
+/**
+ * Array of valid CSS values for columns if variant='fixed', e.g.
+ * ['1fr','2fr','auto','10%','100px']
+ * <ListTable cols={["10%", "30%", "60%"]}>
+ * ```
+ */
+export let cols: string[] = [];
+
+/** Additional CSS classes to pass to the <ul> container. */
+let extraClasses: cx.Argument = '';
+export { extraClasses as cx };
+</script>
+
+<!-- The parent <ul> is a single grid container.
+     Rows themselves will decide if they are `display: grid;` or `flex;`. -->
+<ul
+  role="table"
+  class={cx(
+    'w-full border border-light',
+    {
+      'list-table-fixed': variant === 'fixed',
+      'list-table-auto': variant === 'auto',
+    },
+    extraClasses
+  )}
+  style={variant === 'fixed' && cols.length > 0
+    ? `grid-template-columns: ${cols.join(' ')}; display: grid;`
+    : 'display: grid; grid-template-columns: auto auto auto;'}
+>
+  <!-- Rows (li.list-table-row) come in via the <slot> -->
+  <slot />
+</ul>
+
+<style lang="postcss">
+/* Make each row simply “transparent” so that its child cells 
+   line up in the parent’s single grid. */
+:global(.list-table-row) {
+  display: contents;
+  background-color: transparent;
+}
+</style>

packages/core/src/lib/new_table/table.css

@@ -0,0 +1,25 @@
+.grid-container {
+  @apply w-full border border-b-0 border-light text-sm;
+}
+
+.table-header {
+  @apply h-8 bg-light text-xs;
+}
+
+.table-header-cell {
+  @apply h-8 min-h-0 content-center items-center truncate border-b border-light p-2 text-subtle-1;
+}
+
+.table-cell {
+  @apply min-h-12 content-center items-center truncate border-b border-light p-2;
+}
+
+/* Cell with link */
+.table-cell-link {
+  @apply flex h-full w-full items-center hover:underline;
+}
+
+/* Cell with flexbox */
+.table-cell-flex {
+  @apply flex items-center gap-2;
+}