@inkindcards/semantic-layer 0.1.0

package/dist/components.cjs

@@ -0,0 +1,198 @@
+'use strict';
+
+var chunkY3A3T45C_cjs = require('./chunk-Y3A3T45C.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var containerStyle = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  border: "1px solid #e5e7eb",
+  borderRadius: "8px",
+  overflow: "hidden",
+  maxHeight: "400px",
+  display: "flex",
+  flexDirection: "column"
+};
+var searchStyle = {
+  padding: "8px 12px",
+  border: "none",
+  borderBottom: "1px solid #e5e7eb",
+  fontSize: "14px",
+  outline: "none",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var listStyle = {
+  overflowY: "auto",
+  flex: 1
+};
+var categoryHeaderStyle = {
+  padding: "8px 12px",
+  fontSize: "11px",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "#6b7280",
+  backgroundColor: "#f9fafb",
+  position: "sticky",
+  top: 0
+};
+var itemStyle = {
+  padding: "8px 12px",
+  cursor: "pointer",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+  borderBottom: "1px solid #f3f4f6"
+};
+var selectedItemStyle = {
+  ...itemStyle,
+  backgroundColor: "#eff6ff"
+};
+function MetricPicker({
+  onSelect,
+  fieldTypes,
+  selectedIds = [],
+  searchPlaceholder = "Search metrics and dimensions...",
+  className
+}) {
+  const { fields, categories, isLoading, error } = chunkY3A3T45C_cjs.useMetrics();
+  const [search, setSearch] = react.useState("");
+  const filtered = react.useMemo(() => {
+    let result = fields;
+    if (fieldTypes) {
+      result = result.filter((f) => fieldTypes.includes(f.type));
+    }
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(
+        (f) => f.displayName.toLowerCase().includes(q) || f.description.toLowerCase().includes(q) || f.name.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [fields, fieldTypes, search]);
+  const grouped = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const field of filtered) {
+      const list = map.get(field.category) || [];
+      list.push(field);
+      map.set(field.category, list);
+    }
+    return map;
+  }, [filtered]);
+  const selectedSet = react.useMemo(() => new Set(selectedIds), [selectedIds]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px", color: "#6b7280" }, children: "Loading catalog..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px", color: "#ef4444" }, children: error });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: searchPlaceholder,
+        style: searchStyle
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: listStyle, children: [
+      Array.from(grouped.entries()).map(([category, categoryFields]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: categoryHeaderStyle, children: category }),
+        categoryFields.map((field) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: selectedSet.has(field.id) ? selectedItemStyle : itemStyle,
+            onClick: () => onSelect(field),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#111827" }, children: field.displayName }),
+              field.description && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: field.description })
+            ]
+          },
+          field.id
+        ))
+      ] }, category)),
+      grouped.size === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px", color: "#6b7280", textAlign: "center" }, children: "No fields found" })
+    ] })
+  ] });
+}
+var tableContainerStyle = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  border: "1px solid #e5e7eb",
+  borderRadius: "8px",
+  overflow: "auto",
+  maxHeight: "500px"
+};
+var tableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: "14px"
+};
+var thStyle = {
+  padding: "10px 12px",
+  textAlign: "left",
+  fontWeight: 600,
+  fontSize: "12px",
+  color: "#6b7280",
+  backgroundColor: "#f9fafb",
+  borderBottom: "1px solid #e5e7eb",
+  position: "sticky",
+  top: 0,
+  whiteSpace: "nowrap"
+};
+var tdStyle = {
+  padding: "8px 12px",
+  borderBottom: "1px solid #f3f4f6",
+  color: "#111827",
+  whiteSpace: "nowrap"
+};
+var numberTdStyle = {
+  ...tdStyle,
+  textAlign: "right",
+  fontVariantNumeric: "tabular-nums"
+};
+function formatValue(value, dataType, formatNumbers) {
+  if (value === null || value === void 0) return "\u2014";
+  if (dataType === "number" && typeof value === "number" && formatNumbers) {
+    return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+  }
+  return String(value);
+}
+function ResultsTable({
+  data,
+  className,
+  maxRows = 100,
+  formatNumbers = true
+}) {
+  if (!data || data.columns.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "12px", color: "#6b7280", textAlign: "center" }, children: "No data to display" });
+  }
+  const displayRows = data.rows.slice(0, maxRows);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: tableContainerStyle, className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: tableStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: data.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: displayRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: data.columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
+        "td",
+        {
+          style: col.dataType === "number" ? numberTdStyle : tdStyle,
+          children: formatValue(row[col.key], col.dataType, formatNumbers)
+        },
+        col.key
+      )) }, i)) })
+    ] }),
+    data.totalRows > maxRows && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "8px 12px", fontSize: "12px", color: "#6b7280", textAlign: "center" }, children: [
+      "Showing ",
+      maxRows,
+      " of ",
+      data.totalRows,
+      " rows"
+    ] })
+  ] });
+}
+
+exports.MetricPicker = MetricPicker;
+exports.ResultsTable = ResultsTable;
+//# sourceMappingURL=components.cjs.map
+//# sourceMappingURL=components.cjs.map

package/dist/components.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/metric-picker.tsx","../src/components/results-table.tsx"],"names":["useMetrics","useState","useMemo","jsx","jsxs"],"mappings":"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","file":"components.cjs","sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport type { SemanticField, FieldType } from \"../types\";\nimport { useMetrics } from \"../react/hooks\";\n\nexport interface MetricPickerProps {\n  onSelect: (field: SemanticField) => void;\n  /** Filter to only show certain field types. Default: all. */\n  fieldTypes?: FieldType[];\n  /** Currently selected field IDs (for visual highlighting). */\n  selectedIds?: string[];\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Custom class name for the root container. */\n  className?: string;\n}\n\nconst containerStyle: React.CSSProperties = {\n  fontFamily: \"system-ui, -apple-system, sans-serif\",\n  border: \"1px solid #e5e7eb\",\n  borderRadius: \"8px\",\n  overflow: \"hidden\",\n  maxHeight: \"400px\",\n  display: \"flex\",\n  flexDirection: \"column\",\n};\n\nconst searchStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  border: \"none\",\n  borderBottom: \"1px solid #e5e7eb\",\n  fontSize: \"14px\",\n  outline: \"none\",\n  width: \"100%\",\n  boxSizing: \"border-box\",\n};\n\nconst listStyle: React.CSSProperties = {\n  overflowY: \"auto\",\n  flex: 1,\n};\n\nconst categoryHeaderStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  fontSize: \"11px\",\n  fontWeight: 600,\n  textTransform: \"uppercase\",\n  letterSpacing: \"0.05em\",\n  color: \"#6b7280\",\n  backgroundColor: \"#f9fafb\",\n  position: \"sticky\",\n  top: 0,\n};\n\nconst itemStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  cursor: \"pointer\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"2px\",\n  borderBottom: \"1px solid #f3f4f6\",\n};\n\nconst selectedItemStyle: React.CSSProperties = {\n  ...itemStyle,\n  backgroundColor: \"#eff6ff\",\n};\n\n/**\n * A searchable, categorized picker for metrics and dimensions.\n * Fetches the catalog from the gateway automatically.\n */\nexport function MetricPicker({\n  onSelect,\n  fieldTypes,\n  selectedIds = [],\n  searchPlaceholder = \"Search metrics and dimensions...\",\n  className,\n}: MetricPickerProps) {\n  const { fields, categories, isLoading, error } = useMetrics();\n  const [search, setSearch] = useState(\"\");\n\n  const filtered = useMemo(() => {\n    let result = fields;\n    if (fieldTypes) {\n      result = result.filter((f) => fieldTypes.includes(f.type));\n    }\n    if (search) {\n      const q = search.toLowerCase();\n      result = result.filter(\n        (f) =>\n          f.displayName.toLowerCase().includes(q) ||\n          f.description.toLowerCase().includes(q) ||\n          f.name.toLowerCase().includes(q),\n      );\n    }\n    return result;\n  }, [fields, fieldTypes, search]);\n\n  const grouped = useMemo(() => {\n    const map = new Map<string, SemanticField[]>();\n    for (const field of filtered) {\n      const list = map.get(field.category) || [];\n      list.push(field);\n      map.set(field.category, list);\n    }\n    return map;\n  }, [filtered]);\n\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);\n\n  if (isLoading) {\n    return <div style={{ padding: \"12px\", color: \"#6b7280\" }}>Loading catalog...</div>;\n  }\n\n  if (error) {\n    return <div style={{ padding: \"12px\", color: \"#ef4444\" }}>{error}</div>;\n  }\n\n  return (\n    <div style={containerStyle} className={className}>\n      <input\n        type=\"text\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder={searchPlaceholder}\n        style={searchStyle}\n      />\n      <div style={listStyle}>\n        {Array.from(grouped.entries()).map(([category, categoryFields]) => (\n          <div key={category}>\n            <div style={categoryHeaderStyle}>{category}</div>\n            {categoryFields.map((field) => (\n              <div\n                key={field.id}\n                style={selectedSet.has(field.id) ? selectedItemStyle : itemStyle}\n                onClick={() => onSelect(field)}\n              >\n                <span style={{ fontSize: \"14px\", fontWeight: 500, color: \"#111827\" }}>\n                  {field.displayName}\n                </span>\n                {field.description && (\n                  <span style={{ fontSize: \"12px\", color: \"#6b7280\" }}>\n                    {field.description}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        ))}\n        {grouped.size === 0 && (\n          <div style={{ padding: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n            No fields found\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport type { QueryResult } from \"../types\";\n\nexport interface ResultsTableProps {\n  data: QueryResult | null;\n  /** Custom class name for the root container. */\n  className?: string;\n  /** Max rows to display. Default: 100. */\n  maxRows?: number;\n  /** Format numbers with locale string. Default: true. */\n  formatNumbers?: boolean;\n}\n\nconst tableContainerStyle: React.CSSProperties = {\n  fontFamily: \"system-ui, -apple-system, sans-serif\",\n  border: \"1px solid #e5e7eb\",\n  borderRadius: \"8px\",\n  overflow: \"auto\",\n  maxHeight: \"500px\",\n};\n\nconst tableStyle: React.CSSProperties = {\n  width: \"100%\",\n  borderCollapse: \"collapse\",\n  fontSize: \"14px\",\n};\n\nconst thStyle: React.CSSProperties = {\n  padding: \"10px 12px\",\n  textAlign: \"left\",\n  fontWeight: 600,\n  fontSize: \"12px\",\n  color: \"#6b7280\",\n  backgroundColor: \"#f9fafb\",\n  borderBottom: \"1px solid #e5e7eb\",\n  position: \"sticky\",\n  top: 0,\n  whiteSpace: \"nowrap\",\n};\n\nconst tdStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  borderBottom: \"1px solid #f3f4f6\",\n  color: \"#111827\",\n  whiteSpace: \"nowrap\",\n};\n\nconst numberTdStyle: React.CSSProperties = {\n  ...tdStyle,\n  textAlign: \"right\",\n  fontVariantNumeric: \"tabular-nums\",\n};\n\nfunction formatValue(value: unknown, dataType: string, formatNumbers: boolean): string {\n  if (value === null || value === undefined) return \"—\";\n  if (dataType === \"number\" && typeof value === \"number\" && formatNumbers) {\n    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });\n  }\n  return String(value);\n}\n\n/**\n * A simple data table that renders a QueryResult.\n * Handles formatting numbers, truncating rows, and sticky headers.\n */\nexport function ResultsTable({\n  data,\n  className,\n  maxRows = 100,\n  formatNumbers = true,\n}: ResultsTableProps) {\n  if (!data || data.columns.length === 0) {\n    return (\n      <div style={{ padding: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n        No data to display\n      </div>\n    );\n  }\n\n  const displayRows = data.rows.slice(0, maxRows);\n\n  return (\n    <div style={tableContainerStyle} className={className}>\n      <table style={tableStyle}>\n        <thead>\n          <tr>\n            {data.columns.map((col) => (\n              <th key={col.key} style={thStyle}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {displayRows.map((row, i) => (\n            <tr key={i}>\n              {data.columns.map((col) => (\n                <td\n                  key={col.key}\n                  style={col.dataType === \"number\" ? numberTdStyle : tdStyle}\n                >\n                  {formatValue(row[col.key], col.dataType, formatNumbers)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {data.totalRows > maxRows && (\n        <div style={{ padding: \"8px 12px\", fontSize: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n          Showing {maxRows} of {data.totalRows} rows\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/components.d.cts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as SemanticField, F as FieldType, Q as QueryResult } from './types-Ds_6aDEw.cjs';
+
+interface MetricPickerProps {
+    onSelect: (field: SemanticField) => void;
+    /** Filter to only show certain field types. Default: all. */
+    fieldTypes?: FieldType[];
+    /** Currently selected field IDs (for visual highlighting). */
+    selectedIds?: string[];
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Custom class name for the root container. */
+    className?: string;
+}
+/**
+ * A searchable, categorized picker for metrics and dimensions.
+ * Fetches the catalog from the gateway automatically.
+ */
+declare function MetricPicker({ onSelect, fieldTypes, selectedIds, searchPlaceholder, className, }: MetricPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ResultsTableProps {
+    data: QueryResult | null;
+    /** Custom class name for the root container. */
+    className?: string;
+    /** Max rows to display. Default: 100. */
+    maxRows?: number;
+    /** Format numbers with locale string. Default: true. */
+    formatNumbers?: boolean;
+}
+/**
+ * A simple data table that renders a QueryResult.
+ * Handles formatting numbers, truncating rows, and sticky headers.
+ */
+declare function ResultsTable({ data, className, maxRows, formatNumbers, }: ResultsTableProps): react_jsx_runtime.JSX.Element;
+
+export { MetricPicker, type MetricPickerProps, ResultsTable, type ResultsTableProps };

package/dist/components.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { S as SemanticField, F as FieldType, Q as QueryResult } from './types-Ds_6aDEw.js';
+
+interface MetricPickerProps {
+    onSelect: (field: SemanticField) => void;
+    /** Filter to only show certain field types. Default: all. */
+    fieldTypes?: FieldType[];
+    /** Currently selected field IDs (for visual highlighting). */
+    selectedIds?: string[];
+    /** Placeholder text for the search input. */
+    searchPlaceholder?: string;
+    /** Custom class name for the root container. */
+    className?: string;
+}
+/**
+ * A searchable, categorized picker for metrics and dimensions.
+ * Fetches the catalog from the gateway automatically.
+ */
+declare function MetricPicker({ onSelect, fieldTypes, selectedIds, searchPlaceholder, className, }: MetricPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ResultsTableProps {
+    data: QueryResult | null;
+    /** Custom class name for the root container. */
+    className?: string;
+    /** Max rows to display. Default: 100. */
+    maxRows?: number;
+    /** Format numbers with locale string. Default: true. */
+    formatNumbers?: boolean;
+}
+/**
+ * A simple data table that renders a QueryResult.
+ * Handles formatting numbers, truncating rows, and sticky headers.
+ */
+declare function ResultsTable({ data, className, maxRows, formatNumbers, }: ResultsTableProps): react_jsx_runtime.JSX.Element;
+
+export { MetricPicker, type MetricPickerProps, ResultsTable, type ResultsTableProps };

package/dist/components.js

@@ -0,0 +1,195 @@
+import { useMetrics } from './chunk-NJ4IJBV3.js';
+import { useState, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var containerStyle = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  border: "1px solid #e5e7eb",
+  borderRadius: "8px",
+  overflow: "hidden",
+  maxHeight: "400px",
+  display: "flex",
+  flexDirection: "column"
+};
+var searchStyle = {
+  padding: "8px 12px",
+  border: "none",
+  borderBottom: "1px solid #e5e7eb",
+  fontSize: "14px",
+  outline: "none",
+  width: "100%",
+  boxSizing: "border-box"
+};
+var listStyle = {
+  overflowY: "auto",
+  flex: 1
+};
+var categoryHeaderStyle = {
+  padding: "8px 12px",
+  fontSize: "11px",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "#6b7280",
+  backgroundColor: "#f9fafb",
+  position: "sticky",
+  top: 0
+};
+var itemStyle = {
+  padding: "8px 12px",
+  cursor: "pointer",
+  display: "flex",
+  flexDirection: "column",
+  gap: "2px",
+  borderBottom: "1px solid #f3f4f6"
+};
+var selectedItemStyle = {
+  ...itemStyle,
+  backgroundColor: "#eff6ff"
+};
+function MetricPicker({
+  onSelect,
+  fieldTypes,
+  selectedIds = [],
+  searchPlaceholder = "Search metrics and dimensions...",
+  className
+}) {
+  const { fields, categories, isLoading, error } = useMetrics();
+  const [search, setSearch] = useState("");
+  const filtered = useMemo(() => {
+    let result = fields;
+    if (fieldTypes) {
+      result = result.filter((f) => fieldTypes.includes(f.type));
+    }
+    if (search) {
+      const q = search.toLowerCase();
+      result = result.filter(
+        (f) => f.displayName.toLowerCase().includes(q) || f.description.toLowerCase().includes(q) || f.name.toLowerCase().includes(q)
+      );
+    }
+    return result;
+  }, [fields, fieldTypes, search]);
+  const grouped = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const field of filtered) {
+      const list = map.get(field.category) || [];
+      list.push(field);
+      map.set(field.category, list);
+    }
+    return map;
+  }, [filtered]);
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "12px", color: "#6b7280" }, children: "Loading catalog..." });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "12px", color: "#ef4444" }, children: error });
+  }
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle, className, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        value: search,
+        onChange: (e) => setSearch(e.target.value),
+        placeholder: searchPlaceholder,
+        style: searchStyle
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: listStyle, children: [
+      Array.from(grouped.entries()).map(([category, categoryFields]) => /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { style: categoryHeaderStyle, children: category }),
+        categoryFields.map((field) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: selectedSet.has(field.id) ? selectedItemStyle : itemStyle,
+            onClick: () => onSelect(field),
+            children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: "14px", fontWeight: 500, color: "#111827" }, children: field.displayName }),
+              field.description && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: field.description })
+            ]
+          },
+          field.id
+        ))
+      ] }, category)),
+      grouped.size === 0 && /* @__PURE__ */ jsx("div", { style: { padding: "12px", color: "#6b7280", textAlign: "center" }, children: "No fields found" })
+    ] })
+  ] });
+}
+var tableContainerStyle = {
+  fontFamily: "system-ui, -apple-system, sans-serif",
+  border: "1px solid #e5e7eb",
+  borderRadius: "8px",
+  overflow: "auto",
+  maxHeight: "500px"
+};
+var tableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: "14px"
+};
+var thStyle = {
+  padding: "10px 12px",
+  textAlign: "left",
+  fontWeight: 600,
+  fontSize: "12px",
+  color: "#6b7280",
+  backgroundColor: "#f9fafb",
+  borderBottom: "1px solid #e5e7eb",
+  position: "sticky",
+  top: 0,
+  whiteSpace: "nowrap"
+};
+var tdStyle = {
+  padding: "8px 12px",
+  borderBottom: "1px solid #f3f4f6",
+  color: "#111827",
+  whiteSpace: "nowrap"
+};
+var numberTdStyle = {
+  ...tdStyle,
+  textAlign: "right",
+  fontVariantNumeric: "tabular-nums"
+};
+function formatValue(value, dataType, formatNumbers) {
+  if (value === null || value === void 0) return "\u2014";
+  if (dataType === "number" && typeof value === "number" && formatNumbers) {
+    return value.toLocaleString(void 0, { maximumFractionDigits: 2 });
+  }
+  return String(value);
+}
+function ResultsTable({
+  data,
+  className,
+  maxRows = 100,
+  formatNumbers = true
+}) {
+  if (!data || data.columns.length === 0) {
+    return /* @__PURE__ */ jsx("div", { style: { padding: "12px", color: "#6b7280", textAlign: "center" }, children: "No data to display" });
+  }
+  const displayRows = data.rows.slice(0, maxRows);
+  return /* @__PURE__ */ jsxs("div", { style: tableContainerStyle, className, children: [
+    /* @__PURE__ */ jsxs("table", { style: tableStyle, children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: data.columns.map((col) => /* @__PURE__ */ jsx("th", { style: thStyle, children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: displayRows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: data.columns.map((col) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          style: col.dataType === "number" ? numberTdStyle : tdStyle,
+          children: formatValue(row[col.key], col.dataType, formatNumbers)
+        },
+        col.key
+      )) }, i)) })
+    ] }),
+    data.totalRows > maxRows && /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", fontSize: "12px", color: "#6b7280", textAlign: "center" }, children: [
+      "Showing ",
+      maxRows,
+      " of ",
+      data.totalRows,
+      " rows"
+    ] })
+  ] });
+}
+
+export { MetricPicker, ResultsTable };
+//# sourceMappingURL=components.js.map
+//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/metric-picker.tsx","../src/components/results-table.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"components.js","sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport type { SemanticField, FieldType } from \"../types\";\nimport { useMetrics } from \"../react/hooks\";\n\nexport interface MetricPickerProps {\n  onSelect: (field: SemanticField) => void;\n  /** Filter to only show certain field types. Default: all. */\n  fieldTypes?: FieldType[];\n  /** Currently selected field IDs (for visual highlighting). */\n  selectedIds?: string[];\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /** Custom class name for the root container. */\n  className?: string;\n}\n\nconst containerStyle: React.CSSProperties = {\n  fontFamily: \"system-ui, -apple-system, sans-serif\",\n  border: \"1px solid #e5e7eb\",\n  borderRadius: \"8px\",\n  overflow: \"hidden\",\n  maxHeight: \"400px\",\n  display: \"flex\",\n  flexDirection: \"column\",\n};\n\nconst searchStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  border: \"none\",\n  borderBottom: \"1px solid #e5e7eb\",\n  fontSize: \"14px\",\n  outline: \"none\",\n  width: \"100%\",\n  boxSizing: \"border-box\",\n};\n\nconst listStyle: React.CSSProperties = {\n  overflowY: \"auto\",\n  flex: 1,\n};\n\nconst categoryHeaderStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  fontSize: \"11px\",\n  fontWeight: 600,\n  textTransform: \"uppercase\",\n  letterSpacing: \"0.05em\",\n  color: \"#6b7280\",\n  backgroundColor: \"#f9fafb\",\n  position: \"sticky\",\n  top: 0,\n};\n\nconst itemStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  cursor: \"pointer\",\n  display: \"flex\",\n  flexDirection: \"column\",\n  gap: \"2px\",\n  borderBottom: \"1px solid #f3f4f6\",\n};\n\nconst selectedItemStyle: React.CSSProperties = {\n  ...itemStyle,\n  backgroundColor: \"#eff6ff\",\n};\n\n/**\n * A searchable, categorized picker for metrics and dimensions.\n * Fetches the catalog from the gateway automatically.\n */\nexport function MetricPicker({\n  onSelect,\n  fieldTypes,\n  selectedIds = [],\n  searchPlaceholder = \"Search metrics and dimensions...\",\n  className,\n}: MetricPickerProps) {\n  const { fields, categories, isLoading, error } = useMetrics();\n  const [search, setSearch] = useState(\"\");\n\n  const filtered = useMemo(() => {\n    let result = fields;\n    if (fieldTypes) {\n      result = result.filter((f) => fieldTypes.includes(f.type));\n    }\n    if (search) {\n      const q = search.toLowerCase();\n      result = result.filter(\n        (f) =>\n          f.displayName.toLowerCase().includes(q) ||\n          f.description.toLowerCase().includes(q) ||\n          f.name.toLowerCase().includes(q),\n      );\n    }\n    return result;\n  }, [fields, fieldTypes, search]);\n\n  const grouped = useMemo(() => {\n    const map = new Map<string, SemanticField[]>();\n    for (const field of filtered) {\n      const list = map.get(field.category) || [];\n      list.push(field);\n      map.set(field.category, list);\n    }\n    return map;\n  }, [filtered]);\n\n  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);\n\n  if (isLoading) {\n    return <div style={{ padding: \"12px\", color: \"#6b7280\" }}>Loading catalog...</div>;\n  }\n\n  if (error) {\n    return <div style={{ padding: \"12px\", color: \"#ef4444\" }}>{error}</div>;\n  }\n\n  return (\n    <div style={containerStyle} className={className}>\n      <input\n        type=\"text\"\n        value={search}\n        onChange={(e) => setSearch(e.target.value)}\n        placeholder={searchPlaceholder}\n        style={searchStyle}\n      />\n      <div style={listStyle}>\n        {Array.from(grouped.entries()).map(([category, categoryFields]) => (\n          <div key={category}>\n            <div style={categoryHeaderStyle}>{category}</div>\n            {categoryFields.map((field) => (\n              <div\n                key={field.id}\n                style={selectedSet.has(field.id) ? selectedItemStyle : itemStyle}\n                onClick={() => onSelect(field)}\n              >\n                <span style={{ fontSize: \"14px\", fontWeight: 500, color: \"#111827\" }}>\n                  {field.displayName}\n                </span>\n                {field.description && (\n                  <span style={{ fontSize: \"12px\", color: \"#6b7280\" }}>\n                    {field.description}\n                  </span>\n                )}\n              </div>\n            ))}\n          </div>\n        ))}\n        {grouped.size === 0 && (\n          <div style={{ padding: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n            No fields found\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","import React from \"react\";\nimport type { QueryResult } from \"../types\";\n\nexport interface ResultsTableProps {\n  data: QueryResult | null;\n  /** Custom class name for the root container. */\n  className?: string;\n  /** Max rows to display. Default: 100. */\n  maxRows?: number;\n  /** Format numbers with locale string. Default: true. */\n  formatNumbers?: boolean;\n}\n\nconst tableContainerStyle: React.CSSProperties = {\n  fontFamily: \"system-ui, -apple-system, sans-serif\",\n  border: \"1px solid #e5e7eb\",\n  borderRadius: \"8px\",\n  overflow: \"auto\",\n  maxHeight: \"500px\",\n};\n\nconst tableStyle: React.CSSProperties = {\n  width: \"100%\",\n  borderCollapse: \"collapse\",\n  fontSize: \"14px\",\n};\n\nconst thStyle: React.CSSProperties = {\n  padding: \"10px 12px\",\n  textAlign: \"left\",\n  fontWeight: 600,\n  fontSize: \"12px\",\n  color: \"#6b7280\",\n  backgroundColor: \"#f9fafb\",\n  borderBottom: \"1px solid #e5e7eb\",\n  position: \"sticky\",\n  top: 0,\n  whiteSpace: \"nowrap\",\n};\n\nconst tdStyle: React.CSSProperties = {\n  padding: \"8px 12px\",\n  borderBottom: \"1px solid #f3f4f6\",\n  color: \"#111827\",\n  whiteSpace: \"nowrap\",\n};\n\nconst numberTdStyle: React.CSSProperties = {\n  ...tdStyle,\n  textAlign: \"right\",\n  fontVariantNumeric: \"tabular-nums\",\n};\n\nfunction formatValue(value: unknown, dataType: string, formatNumbers: boolean): string {\n  if (value === null || value === undefined) return \"—\";\n  if (dataType === \"number\" && typeof value === \"number\" && formatNumbers) {\n    return value.toLocaleString(undefined, { maximumFractionDigits: 2 });\n  }\n  return String(value);\n}\n\n/**\n * A simple data table that renders a QueryResult.\n * Handles formatting numbers, truncating rows, and sticky headers.\n */\nexport function ResultsTable({\n  data,\n  className,\n  maxRows = 100,\n  formatNumbers = true,\n}: ResultsTableProps) {\n  if (!data || data.columns.length === 0) {\n    return (\n      <div style={{ padding: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n        No data to display\n      </div>\n    );\n  }\n\n  const displayRows = data.rows.slice(0, maxRows);\n\n  return (\n    <div style={tableContainerStyle} className={className}>\n      <table style={tableStyle}>\n        <thead>\n          <tr>\n            {data.columns.map((col) => (\n              <th key={col.key} style={thStyle}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {displayRows.map((row, i) => (\n            <tr key={i}>\n              {data.columns.map((col) => (\n                <td\n                  key={col.key}\n                  style={col.dataType === \"number\" ? numberTdStyle : tdStyle}\n                >\n                  {formatValue(row[col.key], col.dataType, formatNumbers)}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n      {data.totalRows > maxRows && (\n        <div style={{ padding: \"8px 12px\", fontSize: \"12px\", color: \"#6b7280\", textAlign: \"center\" }}>\n          Showing {maxRows} of {data.totalRows} rows\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var chunk4RECQ22F_cjs = require('./chunk-4RECQ22F.cjs');
+
+
+
+Object.defineProperty(exports, "SemanticLayerClient", {
+  enumerable: true,
+  get: function () { return chunk4RECQ22F_cjs.SemanticLayerClient; }
+});
+Object.defineProperty(exports, "SemanticLayerError", {
+  enumerable: true,
+  get: function () { return chunk4RECQ22F_cjs.SemanticLayerError; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/index.d.cts

@@ -0,0 +1,48 @@
+import * as _supabase_auth_js from '@supabase/auth-js';
+import { SupabaseClient, Session } from '@supabase/supabase-js';
+import { c as SemanticLayerConfig, M as MetadataResponse, S as SemanticField, P as PivotConfig, Q as QueryResult, b as SimpleQueryInput } from './types-Ds_6aDEw.cjs';
+export { d as AggregationType, A as AuthState, D as DataType, a as FieldCategory, F as FieldType, e as PivotField, f as QueryColumn, T as TimeGrain } from './types-Ds_6aDEw.cjs';
+
+declare class SemanticLayerClient {
+    private supabase;
+    private metadataCache;
+    private metadataCacheTime;
+    private readonly CACHE_TTL_MS;
+    constructor(config: SemanticLayerConfig);
+    /** Access the underlying Supabase client (for auth operations). */
+    getSupabaseClient(): SupabaseClient;
+    signInWithGoogle(redirectTo?: string): Promise<_supabase_auth_js.OAuthResponse>;
+    signOut(): Promise<{
+        error: _supabase_auth_js.AuthError | null;
+    }>;
+    getSession(): Promise<Session | null>;
+    onAuthStateChange(callback: (event: string, session: Session | null) => void): {
+        data: {
+            subscription: _supabase_auth_js.Subscription;
+        };
+    };
+    /**
+     * Fetch the curated catalog of metrics and dimensions from the gateway.
+     * Results are cached for 5 minutes.
+     */
+    getMetadata(forceRefresh?: boolean): Promise<MetadataResponse>;
+    /** Get only metrics from the catalog. */
+    getMetrics(): Promise<SemanticField[]>;
+    /** Get only dimensions (including time dimensions) from the catalog. */
+    getDimensions(): Promise<SemanticField[]>;
+    /** Find a field by name or id. */
+    getField(nameOrId: string): Promise<SemanticField | undefined>;
+    /** Execute a query using the full PivotConfig format. */
+    query(config: PivotConfig): Promise<QueryResult>;
+    /**
+     * Execute a query using the simplified input format.
+     * Automatically resolves metric/dimension names to full field objects.
+     */
+    simpleQuery(input: SimpleQueryInput): Promise<QueryResult>;
+}
+declare class SemanticLayerError extends Error {
+    code: string;
+    constructor(message: string, code: string);
+}
+
+export { MetadataResponse, PivotConfig, QueryResult, SemanticField, SemanticLayerClient, SemanticLayerConfig, SemanticLayerError, SimpleQueryInput };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import * as _supabase_auth_js from '@supabase/auth-js';
+import { SupabaseClient, Session } from '@supabase/supabase-js';
+import { c as SemanticLayerConfig, M as MetadataResponse, S as SemanticField, P as PivotConfig, Q as QueryResult, b as SimpleQueryInput } from './types-Ds_6aDEw.js';
+export { d as AggregationType, A as AuthState, D as DataType, a as FieldCategory, F as FieldType, e as PivotField, f as QueryColumn, T as TimeGrain } from './types-Ds_6aDEw.js';
+
+declare class SemanticLayerClient {
+    private supabase;
+    private metadataCache;
+    private metadataCacheTime;
+    private readonly CACHE_TTL_MS;
+    constructor(config: SemanticLayerConfig);
+    /** Access the underlying Supabase client (for auth operations). */
+    getSupabaseClient(): SupabaseClient;
+    signInWithGoogle(redirectTo?: string): Promise<_supabase_auth_js.OAuthResponse>;
+    signOut(): Promise<{
+        error: _supabase_auth_js.AuthError | null;
+    }>;
+    getSession(): Promise<Session | null>;
+    onAuthStateChange(callback: (event: string, session: Session | null) => void): {
+        data: {
+            subscription: _supabase_auth_js.Subscription;
+        };
+    };
+    /**
+     * Fetch the curated catalog of metrics and dimensions from the gateway.
+     * Results are cached for 5 minutes.
+     */
+    getMetadata(forceRefresh?: boolean): Promise<MetadataResponse>;
+    /** Get only metrics from the catalog. */
+    getMetrics(): Promise<SemanticField[]>;
+    /** Get only dimensions (including time dimensions) from the catalog. */
+    getDimensions(): Promise<SemanticField[]>;
+    /** Find a field by name or id. */
+    getField(nameOrId: string): Promise<SemanticField | undefined>;
+    /** Execute a query using the full PivotConfig format. */
+    query(config: PivotConfig): Promise<QueryResult>;
+    /**
+     * Execute a query using the simplified input format.
+     * Automatically resolves metric/dimension names to full field objects.
+     */
+    simpleQuery(input: SimpleQueryInput): Promise<QueryResult>;
+}
+declare class SemanticLayerError extends Error {
+    code: string;
+    constructor(message: string, code: string);
+}
+
+export { MetadataResponse, PivotConfig, QueryResult, SemanticField, SemanticLayerClient, SemanticLayerConfig, SemanticLayerError, SimpleQueryInput };

package/dist/index.js

@@ -0,0 +1,3 @@
+export { SemanticLayerClient, SemanticLayerError } from './chunk-IQARBGJP.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}