Block

🔍

Detect

Draft 1

blackbox modelling

dataflow

import {
  Block,
  BlockChip,
  BlockDescription,
  BlockGlyph,
  BlockHeader,
  BlockTitle,
  BlockType,
} from "@bbox-ui/core";

export function BlockDemo() {
  return (
    <div className="flex justify-center py-10">
      <Block>
        <BlockHeader>
          <BlockGlyph>🔍</BlockGlyph>
          <BlockTitle>Detect</BlockTitle>
          <BlockChip>Draft 1</BlockChip>
        </BlockHeader>
        <BlockDescription>blackbox modelling</BlockDescription>
        <BlockType>dataflow</BlockType>
      </Block>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add zacharyyamaoka/bbox-ui/block

Features

The anatomy is the API vocabulary: Block, BlockHeader, BlockGlyph, BlockTitle, BlockChip, BlockDescription, BlockType.
The glyph always sits beside the title and resizes with the title rung at 0.9× — 44→40, 36→32, 24→22.
The chip reserves its region rather than merely right-aligning, so a long title truncates with a visible ellipsis instead of being painted over.
A truncated title keeps its complete string on the element's title attribute. Presentation shortens; the stored data never does.

Usage

import {
  Block,
  BlockHeader,
  BlockGlyph,
  BlockTitle,
  BlockChip,
  BlockDescription,
  BlockType,
} from "@/components/bbox/block";

<Block>
  <BlockHeader>
    <BlockGlyph>🔍</BlockGlyph>
    <BlockTitle>Detect</BlockTitle>
    <BlockChip>Draft 1</BlockChip>
  </BlockHeader>
  <BlockDescription>blackbox modelling</BlockDescription>
  <BlockType>dataflow</BlockType>
</Block>

Examples

With ports on the boundary

Port and Block know nothing about each other. A host adapter places the dots; the core only supplies the geometry through portAnchor().

image

threshold

🔍

Detect

dataflow

boxes

import {
  Block,
  BlockGlyph,
  BlockHeader,
  BlockTitle,
  BlockType,
  Port,
} from "@bbox-ui/core";

export function BlockWithPorts() {
  return (
    <div className="flex items-center justify-center gap-8 py-10">
      <div className="flex flex-col gap-6">
        <Port state="wired" size="md" textLayout="left">image</Port>
        <Port state="default" size="md" textLayout="left">threshold</Port>
      </div>
      <Block>
        <BlockHeader>
          <BlockGlyph>🔍</BlockGlyph>
          <BlockTitle>Detect</BlockTitle>
        </BlockHeader>
        <BlockType>dataflow</BlockType>
      </Block>
      <Port state="wired" size="md" textLayout="right">boxes</Port>
    </div>
  );
}

Reference

Anatomy

Prop	Type	Default
Block	`Container`	`384 × 258`
BlockHeader	`Header band`	`—`
BlockGlyph	`Glyph, 0.9× the title rung`	`—`
BlockTitle	`Text slot, truncates under the chip`	`—`
BlockChip	`Chip, reserves its region`	`—`
BlockDescription	`Text slot`	`—`
BlockType	`Text slot`	`—`