@varialkit/breadcrumb 0.1.1

package/docs.md

@@ -0,0 +1,78 @@
+# Breadcrumbs
+
+The Breadcrumbs component displays the user's location within a hierarchy and provides quick navigation to parent pages.
+It supports custom link rendering for routing frameworks and an optional loading skeleton.
+
+## How to Use
+
+```tsx
+import { Breadcrumbs } from "@solara/breadcrumb";
+
+const items = [
+  { label: "Home", href: "/" },
+  { label: "Projects", href: "/projects" },
+  {
+    label: "Solara",
+    isCurrent: true,
+    menuItems: [
+      { label: "Copy link", onClick: () => navigator.clipboard.writeText("/projects/solara") },
+      { label: "Open settings", onClick: () => console.log("settings clicked") },
+    ],
+  },
+];
+
+export function Example() {
+  return <Breadcrumbs items={items} fontSize="15px" />;
+}
+```
+
+## Best Practices
+
+- **Keep labels short**: Breadcrumbs are scanned quickly; trim long titles.
+- **Use Tooltips for long labels**: If a label is too long, it will be truncated. Use a tooltip to show the full label on hover.
+- **Link parents**: Only the current page should be non-interactive.
+- **Match the hierarchy**: Do not include unrelated pages in the trail.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `BreadcrumbItem[]` | _Required_ | Ordered list of breadcrumb items. See `BreadcrumbItem` below. |
+| `separator` | `ReactNode` | `"/"` | Separator content between items. |
+| `isLoading` | `boolean` | `false` | Shows a loading skeleton. |
+| `renderLink` | `({ item, index, className, children }) => ReactElement` | | Custom link renderer (e.g. Next.js Link). |
+| `onItemClick` | `(item, index, event) => void` | | Callback when a breadcrumb link is clicked. |
+| `className` | `string` | | Custom class name for the root element. |
+| `listClassName` | `string` | | Custom class name for the list. |
+| `itemClassName` | `string` | | Custom class name for each list item. |
+| `linkClassName` | `string` | | Custom class name for breadcrumb links. |
+| `currentClassName` | `string` | | Custom class name for the current breadcrumb. |
+| `limit` | `number` | | Maximum number of breadcrumbs to display. When the number of items exceeds the limit, an ellipsis is shown with a dropdown menu containing the hidden items. |
+| `fontSize` | `string \| number` | | Font size for the breadcrumb items. Accepts any CSS font-size value and applies to the entire trail (including menu triggers). |
+| `style` | `CSSProperties` | | Inline styles for the root element. |
+
+### BreadcrumbItem
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `ReactNode` | Visible label for the breadcrumb. |
+| `href` | `string` | Optional href for navigable breadcrumbs. |
+| `isCurrent` | `boolean` | Marks the item as the current page. |
+| `disabled` | `boolean` | Disables interaction for this item. |
+| `icon` | `ReactNode` | Optional icon to display with the breadcrumb item. |
+| `iconPosition` | `"left" \| "right"` | Position of the icon relative to the label. |
+| `menuItems` | `BreadcrumbMenuItem[]` | Optional menu actions exposed via a chevron trigger next to the label. |
+| `menuAriaLabel` | `string` | Accessible label for the item's menu trigger. |
+
+### BreadcrumbMenuItem
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `label` | `ReactNode` | Visible label within the item's contextual menu. |
+| `onClick` | `(item, itemIndex, actionIndex, event) => void` | Called when the menu row is clicked. Useful for cell-specific actions like copy or share. |
+
+## Accessibility
+
+- Uses `<nav>` and `<ol>` for semantic navigation.
+- Marks the current page with `aria-current="page"`.
+- Links support keyboard focus styling out of the box.

package/examples.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { Breadcrumbs } from "./src/Breadcrumbs";
+import type { BreadcrumbsProps } from "./src/Breadcrumbs.types";
+
+const baseItems = [
+  { label: "Home", href: "/" },
+  { label: "Projects", href: "/projects" },
+  { label: "Solara", isCurrent: true },
+];
+
+const longLabelItems = [
+  { label: "Home", href: "/" },
+  { label: "Design System", href: "/design-system" },
+  {
+    label: "Breadcrumb migration planning with a very long name",
+    isCurrent: true,
+  },
+];
+
+const iconItems = [
+  { label: "Home", href: "/", icon: "🏠" },
+  { label: "Projects", href: "/projects", icon: "📁" },
+  { label: "Solara", isCurrent: true, icon: "☀️" },
+];
+
+const menuItems = [
+  { label: "Home", href: "/" },
+  {
+    label: "Projects",
+    href: "/projects",
+    menuItems: [
+      { label: "Copy link", onClick: () => navigator.clipboard.writeText("/projects") },
+      { label: "Open in new tab", onClick: () => window.open("/projects", "_blank") },
+    ],
+  },
+  {
+    label: "Solara",
+    isCurrent: true,
+    menuItems: [
+      { label: "Rename", onClick: () => console.log("rename clicked") },
+      { label: "Duplicate", onClick: () => console.log("duplicate clicked") },
+    ],
+  },
+];
+
+const longTrailItems = [
+  { label: "Home", href: "/" },
+  { label: "Products", href: "/products" },
+  { label: "Electronics", href: "/products/electronics" },
+  { label: "Laptops", href: "/products/electronics/laptops" },
+  { label: "Gaming Laptops", isCurrent: true },
+];
+
+export const stories = {
+  playground: {
+    title: "Playground",
+    description: "A basic breadcrumb trail with a current page label.",
+    render: (props: BreadcrumbsProps) => (
+      <Breadcrumbs {...props} items={baseItems} />
+    ),
+    controls: [
+      { name: "separator", type: "text" },
+      { name: "isLoading", type: "boolean" },
+      { name: "fontSize", type: "text" },
+    ],
+    initialProps: {
+      separator: "/",
+      isLoading: false,
+      fontSize: "16px",
+    },
+  },
+  withIcons: {
+    title: "With Icons",
+    description: "Breadcrumbs with icons next to the labels.",
+    showProps: false,
+    render: () => <Breadcrumbs items={iconItems} />,
+    code: `import { Breadcrumbs } from "@solara/breadcrumb";
+
+const iconItems = [
+  { label: "Home", href: "/", icon: "🏠" },
+  { label: "Projects", href: "/projects", icon: "📁" },
+  { label: "Solara", isCurrent: true, icon: "☀️" },
+];
+
+export function Example() {
+  return <Breadcrumbs items={iconItems} />;
+}
+`,
+  },
+  limitedItems: {
+    title: "Limited Items",
+    description: "Limit the number of breadcrumbs shown, with overflow in a menu.",
+    showProps: false,
+    render: () => <Breadcrumbs items={longTrailItems} limit={4} />,
+    code: `import { Breadcrumbs } from "@solara/breadcrumb";
+
+const longTrailItems = [
+  { label: "Home", href: "/" },
+  { label: "Products", href: "/products" },
+  { label: "Electronics", href: "/products/electronics" },
+  { label: "Laptops", href: "/products/electronics/laptops" },
+  { label: "Gaming Laptops", isCurrent: true },
+];
+
+export function Example() {
+  return <Breadcrumbs items={longTrailItems} limit={4} />;
+}
+`,
+  },
+  longLabels: {
+    title: "Long Labels",
+    description: "Long labels truncate to keep the row compact. Hover to see the full label.",
+    showProps: false,
+    render: () => <Breadcrumbs items={longLabelItems} />,
+    code: `import { Breadcrumbs } from "@solara/breadcrumb";
+
+const longLabelItems = [
+  { label: "Home", href: "/" },
+  { label: "Design System", href: "/design-system" },
+  {
+    label: "Breadcrumb migration planning with a very long name",
+    isCurrent: true,
+  },
+];
+
+export function Example() {
+  return <Breadcrumbs items={longLabelItems} />;
+}
+`,
+  },
+  loading: {
+    title: "Loading",
+    description: "Use the loading skeleton while the trail is being resolved.",
+    showProps: false,
+    render: () => <Breadcrumbs items={baseItems} isLoading />,
+    code: `import { Breadcrumbs } from "@solara/breadcrumb";
+
+const baseItems = [
+  { label: "Home", href: "/" },
+  { label: "Projects", href: "/projects" },
+  { label: "Solara", isCurrent: true },
+];
+
+export function Example() {
+  return <Breadcrumbs items={baseItems} isLoading />;
+}
+`,
+  },
+  withItemMenus: {
+    title: "Item Menus",
+    description:
+      "Expose cell-level actions from a chevron that sits inline with each breadcrumb label. Font size is inherited by the trigger as well.",
+    showProps: false,
+    render: () => <Breadcrumbs items={menuItems} fontSize="15px" />,
+    code: `import { Breadcrumbs } from "@solara/breadcrumb";
+
+const items = [
+  { label: "Home", href: "/" },
+  {
+    label: "Projects",
+    href: "/projects",
+    menuItems: [
+      { label: "Copy link", onClick: () => navigator.clipboard.writeText("/projects") },
+      { label: "Open in new tab", onClick: () => window.open("/projects", "_blank") },
+    ],
+  },
+  {
+    label: "Solara",
+    isCurrent: true,
+    menuItems: [
+      { label: "Rename", onClick: () => console.log("rename clicked") },
+      { label: "Duplicate", onClick: () => console.log("duplicate clicked") },
+    ],
+  },
+];
+
+export function Example() {
+  return <Breadcrumbs items={items} fontSize="15px" />;
+}
+`,
+  },
+};

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@varialkit/breadcrumb",
+  "version": "0.1.1",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./examples": "./examples.tsx"
+  },
+  "files": [
+    "src",
+    "docs.md",
+    "examples.tsx"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "@varialkit/tooltip": "0.1.1",
+    "@varialkit/menu": "0.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "19.0.10",
+    "react": "19.0.0"
+  }
+}

package/src/Breadcrumbs.scss

@@ -0,0 +1,174 @@
+.solara-breadcrumbs {
+  display: flex;
+  align-items: center;
+  font-family: var(--font-body);
+  font-size: var(--font-size-body-scaled);
+  line-height: var(--line-height-body-scaled);
+  color: var(--color-on-surface);
+}
+
+.solara-breadcrumbs__list {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--space-1) * var(--spacing-multiplier));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.solara-breadcrumbs__item {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.solara-breadcrumbs__item-content {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--space-1) * var(--spacing-multiplier));
+  min-width: 0;
+}
+
+.solara-breadcrumbs__separator {
+  color: var(--color-text-secondary);
+  margin: 0 calc(var(--space-1) * var(--spacing-multiplier));
+  user-select: none;
+}
+
+.solara-breadcrumbs__link,
+.solara-breadcrumbs__current {
+  max-width: 16rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.solara-breadcrumbs__link {
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+
+  &:hover {
+    color: var(--color-on-surface);
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-focus-halo);
+    border-radius: var(--radius-1);
+  }
+}
+
+.solara-breadcrumbs__link--disabled {
+  color: var(--color-on-surface-disabled);
+  pointer-events: none;
+}
+
+.solara-breadcrumbs__current {
+  color: var(--color-on-surface);
+  font-weight: 600;
+}
+
+.solara-breadcrumbs--loading {
+  color: var(--color-text-secondary);
+}
+
+.solara-breadcrumbs__skeleton {
+  display: flex;
+  align-items: center;
+}
+
+.solara-breadcrumbs__skeleton-block {
+  display: inline-block;
+  height: 0.9em;
+  border-radius: 999px;
+  background: var(--color-surface-300);
+  animation: solara-breadcrumbs-pulse 1.4s ease-in-out infinite;
+}
+
+.solara-breadcrumbs__skeleton-block--short {
+  width: 4.5rem;
+}
+
+.solara-breadcrumbs__skeleton-block--long {
+  width: 7.5rem;
+}
+
+@keyframes solara-breadcrumbs-pulse {
+  0% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.6;
+  }
+}
+
+.solara-breadcrumbs__icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 0.25em;
+}
+
+.solara-breadcrumbs__label-wrapper {
+  display: inline-block;
+  max-width: 100%;
+  vertical-align: middle; // Aligns the tooltip wrapper correctly
+}
+
+.solara-breadcrumbs__label {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.solara-breadcrumbs__label + .solara-breadcrumbs__icon {
+  margin-right: 0;
+  margin-left: 0.25em;
+}
+
+.solara-breadcrumbs__ellipsis {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+
+  &:hover {
+    color: var(--color-on-surface);
+  }
+}
+
+.solara-breadcrumbs__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: 0;
+  font-size: inherit;
+  line-height: 1;
+  margin-left: calc(var(--space-1) * var(--spacing-multiplier));
+
+  &:hover {
+    color: var(--color-on-surface);
+  }
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--color-focus-halo);
+    border-radius: var(--radius-1);
+  }
+}
+
+.solara-breadcrumbs__menu-icon {
+  display: inline-block;
+  transform: translateY(1px);
+}

package/src/Breadcrumbs.tsx

@@ -0,0 +1,254 @@
+import React from "react";
+import { Menu, MenuDropdown, MenuRow } from "@solara/menu";
+import { Tooltip } from "@solara/tooltip";
+import type {
+  BreadcrumbItem,
+  BreadcrumbMenuItem,
+  BreadcrumbsProps,
+} from "./Breadcrumbs.types";
+import "./Breadcrumbs.scss";
+
+const DEFAULT_SEPARATOR = "/";
+
+function renderLabel(item: BreadcrumbItem) {
+  const icon = item.icon ? (
+    <span className="solara-breadcrumbs__icon">{item.icon}</span>
+  ) : null;
+
+  const label = (
+    <Tooltip
+      content={item.label as string}
+      containerClassName="solara-breadcrumbs__label-wrapper"
+    >
+      <span className="solara-breadcrumbs__label">{item.label}</span>
+    </Tooltip>
+  );
+
+  if (item.iconPosition === "right") {
+    return (
+      <>
+        {label}
+        {icon}
+      </>
+    );
+  }
+
+  return (
+    <>
+      {icon}
+      {label}
+    </>
+  );
+}
+
+function renderMenu(
+  item: BreadcrumbItem,
+  itemIndex: number,
+  menuItems: BreadcrumbMenuItem[]
+) {
+  if (!menuItems.length) return null;
+
+  const ariaLabelFallback =
+    item.menuAriaLabel ??
+    (typeof item.label === "string"
+      ? `Open menu for ${item.label}`
+      : "Open breadcrumb menu");
+
+  return (
+    <MenuDropdown
+      trigger={
+        <button
+          type="button"
+          aria-label={ariaLabelFallback}
+          className="solara-breadcrumbs__menu-trigger"
+        >
+          <span aria-hidden="true" className="solara-breadcrumbs__menu-icon">
+            ▾
+          </span>
+        </button>
+      }
+    >
+      <Menu>
+        {menuItems.map((menuItem: BreadcrumbMenuItem, actionIndex) => (
+          <MenuRow
+            key={actionIndex}
+            onClick={(event: React.MouseEvent<HTMLButtonElement>) =>
+              menuItem.onClick?.(item, itemIndex, actionIndex, event)
+            }
+          >
+            {menuItem.label}
+          </MenuRow>
+        ))}
+      </Menu>
+    </MenuDropdown>
+  );
+}
+
+export function Breadcrumbs({
+  items,
+  separator = DEFAULT_SEPARATOR,
+  isLoading = false,
+  renderLink,
+  onItemClick,
+  className,
+  listClassName,
+  itemClassName,
+  linkClassName,
+  currentClassName,
+  limit,
+  fontSize,
+  style,
+  ...props
+}: BreadcrumbsProps) {
+  if (isLoading) {
+    return (
+      <nav
+        className={["solara-breadcrumbs", "solara-breadcrumbs--loading", className]
+          .filter(Boolean)
+          .join(" ")}
+        aria-label="Breadcrumb"
+        aria-busy="true"
+        style={{ fontSize, ...style }}
+        {...props}
+      >
+        <div className="solara-breadcrumbs__skeleton" aria-hidden="true">
+          <span className="solara-breadcrumbs__skeleton-block solara-breadcrumbs__skeleton-block--short" />
+          <span className="solara-breadcrumbs__separator" aria-hidden="true">
+            {separator}
+          </span>
+          <span className="solara-breadcrumbs__skeleton-block solara-breadcrumbs__skeleton-block--long" />
+        </div>
+      </nav>
+    );
+  }
+
+  if (!items || items.length === 0) {
+    return null;
+  }
+
+  let displayItems = items;
+  let overflowItems: BreadcrumbItem[] = [];
+
+  if (limit && items.length > limit) {
+    const start = items.slice(0, 1);
+    const end = items.slice(items.length - (limit - 2));
+    overflowItems = items.slice(1, items.length - (limit - 2));
+    const ellipsisItem: BreadcrumbItem = {
+      label: "...",
+      disabled: true,
+    };
+    displayItems = [...start, ellipsisItem, ...end];
+  }
+
+  const listClasses = ["solara-breadcrumbs__list", listClassName]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <nav
+      className={["solara-breadcrumbs", className].filter(Boolean).join(" ")}
+      aria-label="Breadcrumb"
+      style={{ fontSize, ...style }}
+      {...props}
+    >
+      <ol className={listClasses}>
+        {displayItems.map((item, index) => {
+          if (item.label === "...") {
+            return (
+              <li key="ellipsis" className="solara-breadcrumbs__item">
+                <span className="solara-breadcrumbs__separator" aria-hidden="true">
+                  {separator}
+                </span>
+                <MenuDropdown
+                  trigger={<button className="solara-breadcrumbs__ellipsis">...</button>}
+                >
+                  <Menu>
+                    {overflowItems.map((overflowItem, overflowIndex) => (
+                      <MenuRow
+                        key={overflowIndex}
+                        onClick={(e: React.MouseEvent<HTMLButtonElement>) =>
+                          onItemClick?.(overflowItem, 1 + overflowIndex, e)
+                        }
+                      >
+                        {overflowItem.label}
+                      </MenuRow>
+                    ))}
+                  </Menu>
+                </MenuDropdown>
+              </li>
+            );
+          }
+
+          const isCurrent = Boolean(item.isCurrent) || index === displayItems.length - 1;
+          const isDisabled = Boolean(item.disabled);
+          const itemClasses = ["solara-breadcrumbs__item", itemClassName]
+            .filter(Boolean)
+            .join(" ");
+
+          const linkClasses = [
+            "solara-breadcrumbs__link",
+            isDisabled ? "solara-breadcrumbs__link--disabled" : null,
+            linkClassName,
+          ]
+            .filter(Boolean)
+            .join(" ");
+
+          const currentClasses = [
+            "solara-breadcrumbs__current",
+            currentClassName,
+          ]
+            .filter(Boolean)
+            .join(" ");
+
+          const label = renderLabel(item);
+          const menu = item.menuItems
+            ? renderMenu(item, index, item.menuItems)
+            : null;
+
+          const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+            if (isDisabled) {
+              event.preventDefault();
+              return;
+            }
+            if (onItemClick) onItemClick(item, index, event);
+          };
+
+          const content = isCurrent || !item.href || isDisabled ? (
+            <span className={currentClasses} aria-current={isCurrent ? "page" : undefined}>
+              {label}
+            </span>
+          ) : renderLink ? (
+            renderLink({
+              item,
+              index,
+              className: linkClasses,
+              children: label,
+            })
+          ) : (
+            <a
+              href={item.href}
+              className={linkClasses}
+              onClick={handleClick}
+            >
+              {label}
+            </a>
+          );
+
+          return (
+            <li key={`breadcrumb-${index}`} className={itemClasses}>
+              {index > 0 ? (
+                <span className="solara-breadcrumbs__separator" aria-hidden="true">
+                  {separator}
+                </span>
+              ) : null}
+              <div className="solara-breadcrumbs__item-content">
+                {content}
+                {menu}
+              </div>
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}

package/src/Breadcrumbs.types.ts

@@ -0,0 +1,70 @@
+import type React from "react";
+
+export type BreadcrumbMenuItem = {
+  /** Visible label within the item's contextual menu. */
+  label: React.ReactNode;
+  /** Called when the menu row is clicked. */
+  onClick?: (
+    item: BreadcrumbItem,
+    itemIndex: number,
+    actionIndex: number,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => void;
+};
+
+export type BreadcrumbItem = {
+  /** Visible label for the breadcrumb. */
+  label: React.ReactNode;
+  /** Optional href for navigable breadcrumbs. */
+  href?: string;
+  /** Marks the item as the current page. */
+  isCurrent?: boolean;
+  /** Disables interaction for this item. */
+  disabled?: boolean;
+  /** Optional icon to display with the breadcrumb item. */
+  icon?: React.ReactNode;
+  /** Position of the icon relative to the label. */
+  iconPosition?: "left" | "right";
+  /** Optional menu items exposed via a chevron trigger next to the label. */
+  menuItems?: BreadcrumbMenuItem[];
+  /** Accessible label for the per-item menu trigger. */
+  menuAriaLabel?: string;
+};
+
+export type BreadcrumbLinkRenderer = (options: {
+  item: BreadcrumbItem;
+  index: number;
+  className: string;
+  children: React.ReactNode;
+}) => React.ReactElement;
+
+export type BreadcrumbsProps = React.HTMLAttributes<HTMLElement> & {
+  /** Ordered list of breadcrumb items. */
+  items: BreadcrumbItem[];
+  /** Separator content between items. */
+  separator?: React.ReactNode;
+  /** Displays a loading skeleton instead of items. */
+  isLoading?: boolean;
+  /** Optional renderer for links (e.g. Next.js Link). */
+  renderLink?: BreadcrumbLinkRenderer;
+  /** Callback when a breadcrumb link is clicked. */
+  onItemClick?: (
+    item: BreadcrumbItem,
+    index: number,
+    event: React.MouseEvent<HTMLElement>
+  ) => void;
+  /** Custom class name for the list element. */
+  listClassName?: string;
+  /** Custom class name applied to each list item. */
+  itemClassName?: string;
+  /** Custom class name for breadcrumb links. */
+  linkClassName?: string;
+  /** Custom class name for the current breadcrumb label. */
+  currentClassName?: string;
+  /** Maximum number of breadcrumbs to display. */
+  limit?: number;
+  /** Font size for the breadcrumb items. Accepts any CSS font-size value. */
+  fontSize?: string | number;
+  /** Inline styles for the root element. */
+  style?: React.CSSProperties;
+};

package/src/index.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from "./Breadcrumbs";
+export type { BreadcrumbItem, BreadcrumbLinkRenderer, BreadcrumbsProps } from "./Breadcrumbs.types";