@mindlogic-ai/logician-ui 3.1.0 → 3.2.0-alpha.0

package/src/components/Workflow/canvas/FieldWrapper/FieldWrapper.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import { ReactNode, useMemo, useRef } from 'react';
+import { HStack, Stack } from '@chakra-ui/react';
+
+import { AlertTriangle, TbAlertCircle } from '@/components/Icon';
+import { Subtext } from '@/components/Typography';
+
+import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
+import { useWorkflow } from '../../WorkflowContext';
+import { pickPrimaryIssue, severityColorToken } from '../issueSeverity';
+import { useFieldFocusRequest } from '../useFieldFocusRequest';
+
+export type FieldTone = 'default' | 'danger' | 'warning';
+
+export type FieldToneState = {
+  tone: FieldTone;
+  /**
+   * Resolved Chakra color token for the current tone, or undefined when
+   * tone is 'default'. Pass directly to a child input's `borderColor` —
+   * Chakra leaves the input's default border in place when undefined.
+   */
+  borderColor: string | undefined;
+  /**
+   * True when the field is in an error state — pass to logician-ui controls
+   * (e.g. `SelectField`, `ComboboxField`) whose API exposes `invalid`
+   * instead of accepting a raw `borderColor`. Warning state does not flip
+   * this — the helper text below already conveys it.
+   */
+  invalid: boolean;
+};
+
+export type FieldWrapperProps = {
+  /** Owning node — used to look up field-level issues. */
+  nodeId: string;
+  /** Stable key — must match the `fieldKey` emitted by `def.validate()`. */
+  fieldKey: string;
+  label: ReactNode;
+  /**
+   * Render-prop. Receives the resolved tone for the field so the input
+   * can apply its own `borderColor` directly — avoids drawing a wrapping
+   * ring on top of the input's own border (which double-borders).
+   */
+  children: (state: FieldToneState) => ReactNode;
+  /** Optional helper text shown beneath the input when no issue is present. */
+  helperText?: ReactNode;
+  /** Optional trailing slot in the label row — e.g. an info popover trigger. */
+  labelAction?: ReactNode;
+};
+
+/**
+ * Layout wrapper for a single inspector field. Reads the field's validation
+ * state from WorkflowContext (`issuesByField[`${nodeId}.${fieldKey}`]`) and
+ * passes a resolved tone to the render-prop child so the input applies its
+ * own `borderColor` — no wrapping ring, no double border.
+ *
+ * Deliberately not a Chakra `FormControl`: the editor's child controls
+ * (SelectField, Switch) bring their own `Field.Root`, and double-wrapping
+ * triggers zag's duplicate-id collision (see the schema-fields block in
+ * `agentNodeType` for the prior fix). Children own their own label/id
+ * association; this wrapper just decorates the layout.
+ *
+ * Also wires the `fieldFocusRequest` channel: when the canvas validation
+ * banner asks to jump to `(nodeId, fieldKey)`, the matching wrapper scrolls
+ * into view and focuses its input, then clears the request so a re-render
+ * doesn't refocus repeatedly.
+ */
+export function FieldWrapper({
+  nodeId,
+  fieldKey,
+  label,
+  children,
+  helperText,
+  labelAction,
+}: FieldWrapperProps) {
+  const { issuesByField } = useWorkflow();
+  const resolveIssueMessage = useWorkflowIssueMessage();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const issues = issuesByField[`${nodeId}.${fieldKey}`] ?? [];
+  const issue = useMemo(() => pickPrimaryIssue(issues), [issues]);
+
+  const tone: FieldTone =
+    issue?.severity === 'error'
+      ? 'danger'
+      : issue?.severity === 'warning'
+        ? 'warning'
+        : 'default';
+  const toneColor =
+    tone === 'default' ? undefined : severityColorToken(issue!.severity);
+
+  useFieldFocusRequest(nodeId, fieldKey, containerRef);
+
+  return (
+    <Stack ref={containerRef} gap={1.5}>
+      <HStack justify="space-between" align="center" gap={2}>
+        <Subtext fontWeight="semibold" color="slate.1300">
+          {label}
+        </Subtext>
+        {labelAction ?? null}
+      </HStack>
+      {children({ tone, borderColor: toneColor, invalid: tone === 'danger' })}
+      {issue ? (
+        <HStack gap={1} align="center">
+          <Subtext color={toneColor} display="flex" alignItems="center">
+            {tone === 'danger' ? (
+              <TbAlertCircle boxSize="xs" />
+            ) : (
+              <AlertTriangle boxSize="xs" />
+            )}
+          </Subtext>
+          <Subtext color={toneColor}>{resolveIssueMessage(issue)}</Subtext>
+        </HStack>
+      ) : helperText ? (
+        <Subtext color="slate.900">{helperText}</Subtext>
+      ) : null}
+    </Stack>
+  );
+}

package/src/components/Workflow/canvas/FieldWrapper/index.ts

@@ -0,0 +1,6 @@
+export type {
+  FieldTone,
+  FieldToneState,
+  FieldWrapperProps,
+} from './FieldWrapper';
+export { FieldWrapper } from './FieldWrapper';

package/src/components/Workflow/canvas/FloatingCard/FloatingCard.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import type { PropsWithChildren } from 'react';
+
+import { Card, type CardProps } from '@/components/Card';
+
+/**
+ * Shared width token (Chakra sizes scale) for the cards that float over the
+ * workflow canvas. Kept in one place so the inspector drawer and any host
+ * surface that takes the same slot (e.g. the studio test-chat card) can't drift.
+ */
+export const FLOATING_CARD_WIDTH = '96';
+
+/**
+ * Shared chrome for a card floating over the workflow canvas: fixed width,
+ * rounded corners, drop shadow, clipped overflow. Positioning is left to the
+ * caller (the inspector docks it in its own column; a host may absolutely
+ * position it) — pass any `CardProps` through to place and size it.
+ */
+export function FloatingCard({
+  children,
+  ...rest
+}: PropsWithChildren<CardProps>) {
+  return (
+    <Card
+      width={FLOATING_CARD_WIDTH}
+      p={0}
+      borderRadius="lg"
+      boxShadow="md"
+      minHeight={0}
+      overflow="hidden"
+      {...rest}
+    >
+      {children}
+    </Card>
+  );
+}

package/src/components/Workflow/canvas/FloatingCard/index.ts

@@ -0,0 +1 @@
+export { FLOATING_CARD_WIDTH, FloatingCard } from './FloatingCard';

package/src/components/Workflow/canvas/GenericNode/GenericNode.tsx

@@ -0,0 +1,114 @@
+'use client';
+
+import { memo, useMemo } from 'react';
+import type { NodeProps } from '@xyflow/react';
+
+import { AlertOctagon } from '@/components/Icon';
+
+import type { GraphNode } from '../../Workflow.types';
+import { useWorkflow } from '../../WorkflowContext';
+import { NodeShell } from '../NodeShell';
+import type { WorkflowReactFlowNode } from './GenericNode.types';
+
+/**
+ * Single React Flow node renderer used for every node kind. Looks up the
+ * registered NodeTypeDef and pulls declarative content from
+ * `getInstanceTitle` + `getMetaChips`. Nodes whose body doesn't fit that
+ * shape (e.g. Note) provide a `renderNode` escape hatch.
+ *
+ * Data passed via React Flow is just the node id — we resolve everything
+ * else from context. This keeps the React Flow node payload small and
+ * ensures every component reads the same source of truth.
+ */
+
+export const GenericNode = memo(function GenericNode(
+  props: NodeProps<WorkflowReactFlowNode>
+) {
+  const { data, selected } = props;
+  const { graph, getNodeType, issuesByNode, editor, categoryTokens } =
+    useWorkflow();
+
+  const node = graph.nodes.find((n) => n.id === data.nodeId) as
+    | GraphNode
+    | undefined;
+  const def = node ? getNodeType(node.kind) : undefined;
+
+  // Exits that already have an edge: their name shows on the edge's label badge,
+  // so NodeShell suppresses the duplicate handle label for them. Memoized so the
+  // Set identity is stable across renders — a fresh Set every render would defeat
+  // NodeShell's own `memo`. Computed before the early return to keep the hook
+  // call unconditional; an unmatched `node?.id` just yields an empty set.
+  const connectedOutputIds = useMemo(
+    () =>
+      new Set(
+        graph.edges
+          .filter((e) => e.source === node?.id && e.sourceHandle)
+          .map((e) => e.sourceHandle as string)
+      ),
+    [graph.edges, node?.id]
+  );
+
+  if (!node || !def) {
+    return (
+      <NodeShell
+        label={node?.kind ?? 'unknown'}
+        instanceTitle="unregistered kind"
+        // safety category surfaces the broken-ness in the icon tile, not
+        // only in the error ring chrome.
+        category="safety"
+        icon={AlertOctagon}
+        selected={!!selected}
+        runState="error"
+        issues={[
+          {
+            severity: 'error',
+            code: 'node.unknown_kind',
+            message: `Unknown node kind: ${node?.kind ?? ''}`,
+          },
+        ]}
+        inputs={[]}
+        outputs={[]}
+        categoryTokens={categoryTokens}
+      />
+    );
+  }
+
+  const { inputs, outputs } = def.handles(node.config);
+  const backendIssues = issuesByNode[node.id] ?? [];
+  // FE-computed, graph-aware advisories (e.g. an unconnected Guardrail exit)
+  // surface in the same warning/error chrome as backend issues.
+  const graphIssues = def.getGraphIssues?.({ node, graph }) ?? [];
+  const issues = graphIssues.length
+    ? [...backendIssues, ...graphIssues]
+    : backendIssues;
+  const runState = editor.runStates[node.id] ?? 'idle';
+
+  const CustomRender = def.renderNode;
+  const customBody = CustomRender ? (
+    <CustomRender
+      id={node.id}
+      config={node.config}
+      selected={!!selected}
+      runState={runState}
+      issues={issues}
+    />
+  ) : undefined;
+
+  return (
+    <NodeShell
+      label={def.label}
+      instanceTitle={def.getInstanceTitle?.(node.config) ?? node.id}
+      metaChips={def.getMetaChips?.(node.config)}
+      category={def.category}
+      icon={def.icon}
+      selected={!!selected}
+      runState={runState}
+      issues={issues}
+      inputs={inputs}
+      outputs={outputs}
+      connectedOutputIds={connectedOutputIds}
+      categoryTokens={categoryTokens}
+      customBody={customBody}
+    />
+  );
+});

package/src/components/Workflow/canvas/GenericNode/GenericNode.types.ts

@@ -0,0 +1,10 @@
+import type { Node } from '@xyflow/react';
+
+/**
+ * The payload React Flow passes to our custom node renderer. We only ship
+ * the node id; everything else is resolved from `useWorkflow()` so React
+ * Flow's internal state stays small.
+ */
+export type WorkflowNodeData = { nodeId: string };
+
+export type WorkflowReactFlowNode = Node<WorkflowNodeData, 'workflow'>;

package/src/components/Workflow/canvas/GenericNode/index.ts

@@ -0,0 +1,5 @@
+export { GenericNode } from './GenericNode';
+export type {
+  WorkflowNodeData,
+  WorkflowReactFlowNode,
+} from './GenericNode.types';

package/src/components/Workflow/canvas/GraphErrorBanner/GraphErrorBanner.tsx

@@ -0,0 +1,284 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { Box, Flex, VStack } from '@chakra-ui/react';
+import { useReactFlow } from '@xyflow/react';
+
+import { TbChevronDown } from '@/components/Icon';
+import { Spinner } from '@/components/Spinner';
+import { Subtext, Text } from '@/components/Typography';
+
+import { useWorkflowIssueMessage } from '../../useWorkflowIssueMessage';
+import type { GraphNode, Issue, NodeTypeDef } from '../../Workflow.types';
+import { useWorkflow, useWorkflowTranslate } from '../../WorkflowContext';
+import { endpointTitle } from '../EdgeInspector';
+import { IssueList } from '../IssueList';
+
+const NODELESS_GROUP = '__graph__';
+
+type NodeIssueBucket = {
+  /** Stable key — node id, or NODELESS_GROUP for graph-wide issues. */
+  key: string;
+  /** Resolved node + label when the group is tied to a specific node. */
+  node: GraphNode | null;
+  def: NodeTypeDef | null;
+  errors: Issue[];
+  warnings: Issue[];
+};
+
+// Same fallback chain as everywhere else (instance title → kind label → id),
+// so an unnamed node groups under "End", not its raw `end_1` id.
+const getNodeTitle = (node: GraphNode, def: NodeTypeDef | null): string =>
+  endpointTitle(node, def ?? undefined, node.id);
+
+/**
+ * Floating banner listing the current graph's validation issues — both the
+ * live validator output and backend `INVALID_GRAPH` errors fed in via
+ * `externalIssues`. Issues group by node (then severity); clicking an issue
+ * selects and pans to its node. Hidden in read-only mode (the Behavior-tab
+ * preview).
+ *
+ * `paletteToggleVisible` shifts the banner clear of the floating `+` palette
+ * toggle, which docks in the same top-left corner once the palette is
+ * collapsed — otherwise the two overlays would overlap.
+ */
+export function GraphErrorBanner({
+  paletteToggleVisible = false,
+}: {
+  paletteToggleVisible?: boolean;
+}) {
+  const {
+    issues,
+    graph,
+    readOnly,
+    validating,
+    getNodeType,
+    setSelectedNodeId,
+    revealInspector,
+    requestFieldFocus,
+  } = useWorkflow();
+  const { fitView } = useReactFlow();
+  const translate = useWorkflowTranslate();
+  const resolveIssueMessage = useWorkflowIssueMessage();
+  const [open, setOpen] = useState(false);
+
+  // Stringify counts before interpolation — see `useWorkflowIssueMessage`
+  // for the underlying `useTranslate` quirk this guards against.
+  const summarize = (errorCount: number, warningCount: number): string => {
+    const parts: string[] = [];
+    if (errorCount > 0) {
+      parts.push(
+        translate('workflow_issues_summary_errors', {
+          count: String(errorCount),
+        }) as string
+      );
+    }
+    if (warningCount > 0) {
+      parts.push(
+        translate('workflow_issues_summary_warnings', {
+          count: String(warningCount),
+        }) as string
+      );
+    }
+    return parts.join(', ');
+  };
+
+  const { errorCount, warningCount, groups } = useMemo(() => {
+    let errors = 0;
+    let warnings = 0;
+    // Preserve insertion order from `graph.nodes` so the dropdown matches
+    // canvas left-to-right reading order; graph-wide issues are appended last.
+    const byKey = new Map<string, NodeIssueBucket>();
+    const nodeById = new Map(graph.nodes.map((n) => [n.id, n] as const));
+
+    const getOrCreate = (key: string): NodeIssueBucket => {
+      let g = byKey.get(key);
+      if (!g) {
+        const node = nodeById.get(key) ?? null;
+        g = {
+          key,
+          node,
+          def: node ? (getNodeType(node.kind) ?? null) : null,
+          errors: [],
+          warnings: [],
+        };
+        byKey.set(key, g);
+      }
+      return g;
+    };
+
+    for (const issue of issues) {
+      if (issue.severity === 'error') errors += 1;
+      else warnings += 1;
+      const key = issue.nodeId ?? NODELESS_GROUP;
+      const g = getOrCreate(key);
+      if (issue.severity === 'error') g.errors.push(issue);
+      else g.warnings.push(issue);
+    }
+
+    // Order: graph-wide bucket first (cycle / unreachable / etc. block the
+    // whole canvas and deserve top billing), then per-node buckets in
+    // canvas order.
+    const ordered: NodeIssueBucket[] = [];
+    const graphWide = byKey.get(NODELESS_GROUP);
+    if (graphWide) ordered.push(graphWide);
+    for (const node of graph.nodes) {
+      const g = byKey.get(node.id);
+      if (g) ordered.push(g);
+    }
+
+    return { errorCount: errors, warningCount: warnings, groups: ordered };
+  }, [issues, graph.nodes, getNodeType]);
+
+  // Noise guard: only surface the "validating" affordance when we're
+  // re-checking a graph that ALREADY shows issues (the retained `displayIssues`
+  // the host passes in during a save). A clean graph (no issues) stays hidden
+  // mid-save — the header save-status spinner already covers that case — so
+  // editing a valid graph never flashes a banner on every keystroke.
+  if (readOnly || issues.length === 0) return null;
+
+  const showValidating = validating;
+
+  const jumpToNode = (nodeId?: string) => {
+    if (!nodeId || !graph.nodes.some((n) => n.id === nodeId)) return;
+    setSelectedNodeId(nodeId);
+    // revealInspector so jumping to a node from the banner also restores the
+    // inspector when it's parked (test mode), not just sets the drawer target.
+    revealInspector({ type: 'node', id: nodeId });
+    void fitView({ nodes: [{ id: nodeId }], duration: 400, maxZoom: 1.2 });
+  };
+
+  const jumpToIssue = (issue: Issue) => {
+    if (!issue.nodeId) return;
+    jumpToNode(issue.nodeId);
+    if (issue.fieldKey) {
+      requestFieldFocus(issue.nodeId, issue.fieldKey);
+    }
+  };
+
+  return (
+    <Box
+      position="absolute"
+      top={3}
+      // Clear the floating `+` palette toggle (md IconButton at left={4}) when
+      // it's showing, so the banner sits beside it rather than under it.
+      left={paletteToggleVisible ? 16 : 3}
+      zIndex={5}
+      maxW="md"
+      bg="bg.surface"
+      borderWidth="1px"
+      borderColor={errorCount > 0 ? 'danger.main' : 'warning.main'}
+      borderRadius="md"
+      boxShadow="sm"
+      overflow="hidden"
+    >
+      {showValidating ? (
+        <Flex
+          align="center"
+          gap={2}
+          px={3}
+          py={2}
+          bg="slate.50"
+          borderBottomWidth="1px"
+          borderColor="slate.200"
+        >
+          <Spinner size="xs" />
+          <Subtext fontWeight="semibold" color="slate.1100">
+            {translate('workflow_issues_validating') as string}
+          </Subtext>
+        </Flex>
+      ) : null}
+      <Box
+        as="button"
+        w="100%"
+        display="flex"
+        alignItems="center"
+        justifyContent="space-between"
+        gap={3}
+        px={3}
+        py={2}
+        bg="transparent"
+        border="none"
+        cursor="pointer"
+        opacity={showValidating ? 0.6 : 1}
+        transition="opacity 0.15s"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Text fontSize="sm" fontWeight="semibold" color="slate.1300">
+          {summarize(errorCount, warningCount)}
+        </Text>
+        <TbChevronDown
+          boxSize="xs"
+          color="slate.900"
+          transform={open ? 'rotate(180deg)' : 'none'}
+          transition="transform 0.15s"
+        />
+      </Box>
+      {open ? (
+        <VStack
+          align="stretch"
+          gap={0}
+          maxH="80"
+          overflowY="auto"
+          opacity={showValidating ? 0.6 : 1}
+          transition="opacity 0.15s"
+          borderTopWidth="1px"
+          borderColor="slate.200"
+        >
+          {groups.map((group, gi) => (
+            <Box
+              key={group.key}
+              borderTopWidth={gi === 0 ? 0 : '1px'}
+              borderColor="slate.200"
+            >
+              <Flex
+                align="center"
+                gap={2}
+                px={3}
+                py={1.5}
+                bg="slate.50"
+                cursor={group.node ? 'pointer' : 'default'}
+                _hover={group.node ? { bg: 'slate.100' } : undefined}
+                onClick={group.node ? () => jumpToNode(group.key) : undefined}
+              >
+                {group.def?.icon ? (
+                  <Box
+                    color="slate.1100"
+                    display="flex"
+                    alignItems="center"
+                    flexShrink={0}
+                  >
+                    <group.def.icon boxSize="xs" />
+                  </Box>
+                ) : null}
+                <Subtext fontWeight="semibold" color="slate.1300" truncate>
+                  {group.node
+                    ? getNodeTitle(group.node, group.def)
+                    : translate('workflow_drawer_graph_group_title')}
+                </Subtext>
+              </Flex>
+              {group.errors.length > 0 ? (
+                <IssueList
+                  label={translate('workflow_issues_errors_label') as string}
+                  tone="error"
+                  issues={group.errors}
+                  onIssueClick={group.node ? jumpToIssue : undefined}
+                  resolveMessage={resolveIssueMessage}
+                />
+              ) : null}
+              {group.warnings.length > 0 ? (
+                <IssueList
+                  label={translate('workflow_issues_warnings_label') as string}
+                  tone="warning"
+                  issues={group.warnings}
+                  onIssueClick={group.node ? jumpToIssue : undefined}
+                  resolveMessage={resolveIssueMessage}
+                />
+              ) : null}
+            </Box>
+          ))}
+        </VStack>
+      ) : null}
+    </Box>
+  );
+}

package/src/components/Workflow/canvas/GraphErrorBanner/index.ts

@@ -0,0 +1 @@
+export { GraphErrorBanner } from './GraphErrorBanner';

package/src/components/Workflow/canvas/IconTile/IconTile.styles.ts

@@ -0,0 +1,40 @@
+import type { NodeCategory } from '../../Workflow.types';
+import type { CategoryTokenMap, CategoryTokens } from './IconTile.types';
+
+/**
+ * Default mapping from the six categories to logician-ui semantic color
+ * tokens. "fg" tints the icon, "bg" fills the tile background. Output and
+ * Note don't map cleanly to a `colorPalette` so they're spelled out with
+ * raw token pairs.
+ *
+ * Host apps that want to retheme can override the map via the
+ * `categoryTokens` prop on `<Workflow>` — see WorkflowContext.
+ */
+export const DEFAULT_CATEGORY_TOKENS: CategoryTokenMap = {
+  trigger: {
+    bg: 'success.lightest',
+    fg: 'success.main',
+    border: 'slate.300',
+  },
+  ai: { bg: 'primary.lightest', fg: 'primary.main', border: 'slate.300' },
+  logic: {
+    bg: 'secondary.lightest',
+    fg: 'secondary.main',
+    border: 'slate.300',
+  },
+  safety: { bg: 'danger.lightest', fg: 'danger.main', border: 'slate.300' },
+  output: { bg: 'slate.50', fg: 'slate.1200', border: 'slate.300' },
+  // Note's `border` doubles as the body border so it reads as warm, not gray.
+  note: { bg: 'warning.lightest', fg: 'warning.dark', border: 'warning.light' },
+};
+
+/**
+ * Returns tokens for a category, falling back to `output` if a host passes
+ * an unknown category (e.g. from a JSON graph payload).
+ */
+export function getCategoryTokens(
+  category: NodeCategory,
+  map: CategoryTokenMap = DEFAULT_CATEGORY_TOKENS
+): CategoryTokens {
+  return map[category] ?? DEFAULT_CATEGORY_TOKENS.output;
+}

package/src/components/Workflow/canvas/IconTile/IconTile.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { Box } from '@chakra-ui/react';
+
+import { getCategoryTokens } from './IconTile.styles';
+import type { IconTileProps } from './IconTile.types';
+
+/**
+ * The 24×24 tile that carries the only category-derived color in a node.
+ * Background uses the category's `bg` token; icon uses the `fg` token.
+ *
+ * `size` is the tile's outer side in px; the icon renders at the `xs`
+ * t-shirt token (16px) to match logician-ui's Icon sizing scale.
+ */
+export function IconTile({
+  category,
+  icon: Icon,
+  size = 24,
+  tokens,
+}: IconTileProps) {
+  const c = getCategoryTokens(category, tokens);
+  return (
+    <Box
+      width={`${size}px`}
+      height={`${size}px`}
+      borderRadius="sm"
+      bg={c.bg}
+      color={c.fg}
+      display="grid"
+      placeItems="center"
+      flexShrink={0}
+    >
+      <Icon boxSize="xs" />
+    </Box>
+  );
+}

package/src/components/Workflow/canvas/IconTile/IconTile.types.ts

@@ -0,0 +1,13 @@
+import { type CreatedIcon } from '@/components/Icon';
+
+import type { NodeCategory } from '../../Workflow.types';
+
+export type CategoryTokens = { bg: string; fg: string; border: string };
+export type CategoryTokenMap = Record<NodeCategory, CategoryTokens>;
+
+export type IconTileProps = {
+  category: NodeCategory;
+  icon: CreatedIcon;
+  size?: number;
+  tokens?: CategoryTokenMap;
+};

package/src/components/Workflow/canvas/IconTile/index.ts

@@ -0,0 +1,7 @@
+export { IconTile } from './IconTile';
+export { DEFAULT_CATEGORY_TOKENS, getCategoryTokens } from './IconTile.styles';
+export type {
+  CategoryTokenMap,
+  CategoryTokens,
+  IconTileProps,
+} from './IconTile.types';