{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "region",
  "type": "registry:ui",
  "title": "Region",
  "description": "A drawn rectangle with a name that carries a rule: Well(region) with a head (Label name, Label rule, Label count) that lights as a drop target, dims, hides in the past and renames in place; a pinned lens is Surface(lens) with Row(list) rows.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/blocks/region/region.tsx",
      "type": "registry:ui",
      "target": "components/metalui/blocks/region/region.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Well } from '../../components/well/well';\nimport { Surface } from '../../components/surface/surface';\nimport { Label } from '../../components/label/label';\nimport { Row } from '../../components/row/row';\n\n/* ─────────────────────────────────────────────────────────\n * REGION (the reference design's .region): a composition\n *   Well(region) or Surface(lens) › Region.Header › Region.Name (Label title) + Region.Rule (Label engraved)\n *   + Region.Count (Label count); a pinned lens adds Region.Body › Region.Row (Row list) × n\n *\n * rest    a sunk well; the head names it, says the rule it carries, counts what is inside\n * over    a block is dragged above it: the well lights (green fill, 1 pt ring) and the rule turns\n *         accent to say \"drop to mark tasks done\", on settle; the host lands the block on the object spring\n * dim     an in-place lens has no match inside: .35\n * past    it did not exist at the scrubbed time: 0, and it takes no pointer\n * lens    a pinned lens: a frosted plate listing its matches as rows\n * rename  the name becomes a field; Enter commits, Escape restores\n * ───────────────────────────────────────────────────────── */\n\n/* Layout from the region group. The whole fades on settle: .35 when dim, gone (and no pointer) in the\n * past; its transition replaces the well's, adding opacity. */\nconst ROOT = 'mu-region !region-motion data-dim:opacity-region-dim data-past:opacity-0 data-past:pointer-events-none';\nconst HEAD = 'mu-region-head absolute inset-x-0 top-0 bottom-auto box-border h-region-head-height pt-region-head-pad-top px-region-head-pad-x pb-0 flex items-baseline gap-region-head-gap cursor-grab';\nconst NAME = 'mu-region-name min-w-region-name-min';\nconst RULE = 'mu-region-rule flex-1 min-w-0 overflow-hidden text-ellipsis';\nconst BODY = 'mu-region-body absolute left-region-body-inset right-region-body-inset top-region-body-top bottom-region-body-inset overflow-hidden';\nconst ROW_META = 'mu-region-row-meta ml-auto pt-region-row-meta-top';\n\nexport interface RegionRootProps extends React.HTMLAttributes<HTMLDivElement> {\n  over?: boolean;\n  dim?: boolean;\n  past?: boolean;\n  /** A pinned lens: a frosted plate whose body lists rows. */\n  lens?: boolean;\n  width?: number;\n  height?: number;\n}\n\nconst Root = React.forwardRef<HTMLDivElement, RegionRootProps>(function RegionRoot({ over, dim, past, lens, width, height, className, style, ...props }, ref) {\n  const shared = {\n    ref: ref as React.Ref<HTMLElement>,\n    role: 'group',\n    radius: 'region' as const,\n    'data-over': over ? '' : undefined,\n    'data-dim': dim ? '' : undefined,\n    'data-past': past ? '' : undefined,\n    'data-lens': lens ? '' : undefined,\n    className: className ? `${ROOT} ${className}` : ROOT,\n    style: width === undefined ? style : { width, height, ...style },\n    ...props,\n  };\n  return lens ? <Surface material=\"lens\" {...shared} /> : <Well variant=\"region\" over={over} {...shared} />;\n});\n\nfunction Header({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={className ? `${HEAD} ${className}` : HEAD} {...props} />;\n}\n\nexport interface RegionNameProps {\n  name: string;\n  renaming?: boolean;\n  onRename?: (name: string) => void;\n  onRenameCancel?: () => void;\n}\n\n/** The name, in the title role; a field while renaming. Empty: \"name this region\" in ink3. */\nfunction Name({ name, renaming, onRename, onRenameCancel }: RegionNameProps) {\n  const [draft, setDraft] = React.useState(name);\n  React.useEffect(() => { if (renaming) setDraft(name); }, [renaming, name]);\n  if (!renaming) return <Label variant=\"title\" className={NAME} placeholder=\"name this region\">{name}</Label>;\n  return (\n    <Label\n      as=\"input\"\n      variant=\"title\"\n      className={NAME}\n      placeholder=\"name this region\"\n      aria-label=\"Region name\"\n      autoFocus\n      value={draft}\n      onChange={(e) => setDraft(e.target.value)}\n      onBlur={() => onRename?.(draft.trim())}\n      onKeyDown={(e: React.KeyboardEvent<HTMLElement>) => {\n        if (e.key === 'Enter') { e.preventDefault(); onRename?.(draft.trim()); }\n        if (e.key === 'Escape') { e.preventDefault(); onRenameCancel?.(); }\n      }}\n    />\n  );\n}\n\n/** The rule in words; accent while a block is over the region. */\nfunction Rule({ accent, className, ...props }: React.HTMLAttributes<HTMLElement> & { accent?: boolean }) {\n  return <Label variant=\"engraved\" tone={accent ? 'accent' : undefined} className={className ? `${RULE} ${className}` : RULE} {...props} />;\n}\n\nfunction Count({ className, ...props }: React.HTMLAttributes<HTMLElement>) {\n  return <Label variant=\"count\" className={className ? `mu-region-count ${className}` : 'mu-region-count'} {...props} />;\n}\n\nfunction Body({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={className ? `${BODY} ${className}` : BODY} {...props} />;\n}\n\nexport interface RegionRowProps extends React.HTMLAttributes<HTMLElement> {\n  checked?: boolean;\n  /** A leading checkbox (Checkbox size=\"row\") for task rows. */\n  lead?: React.ReactNode;\n  /** A trailing engraving: the day, a count. */\n  meta?: React.ReactNode;\n}\n\n/** A row in a pinned lens region: Row(list). Ticking its checkbox ticks the real block. */\nfunction RegionRow({ checked, lead, meta, className, children, ...props }: RegionRowProps) {\n  return (\n    <Row.Root variant=\"list\" tabIndex={0} checked={checked} className={className ? `mu-region-row ${className}` : 'mu-region-row'} {...props}>\n      {lead}\n      <Row.Text>{children}</Row.Text>\n      {meta && <Label variant=\"engraved\" className={ROW_META}>{meta}</Label>}\n    </Row.Root>\n  );\n}\n\nexport interface RegionProps extends Omit<RegionRootProps, 'children'>, RegionNameProps {\n  /** What the rule does, as the head says it: \"marks tasks done\", \"tags them #poster\". */\n  rule?: string;\n  /** What the rule does to a block dropped now: \"drop to mark tasks done\". Shown while over. */\n  dropRule?: string;\n  /** Blocks inside. */\n  count?: number;\n  width: number;\n  height: number;\n  /** A pinned lens region's rows. */\n  children?: React.ReactNode;\n}\n\n/** A drawn rectangle with a name that carries a rule. Placement is meaning, and reversible. */\nconst RegionBlock = React.forwardRef<HTMLDivElement, RegionProps>(function Region(\n  { name, rule, dropRule, count, over, lens, renaming, onRename, onRenameCancel, children, ...props },\n  ref,\n) {\n  return (\n    <Root ref={ref} over={over} lens={lens} aria-label={name ? `Region ${name}${rule ? `, ${rule}` : ''}` : 'Unnamed region'} {...props}>\n      <Header>\n        <Name name={name} renaming={renaming} onRename={onRename} onRenameCancel={onRenameCancel} />\n        <Rule accent={over && !!dropRule}>{over && dropRule ? dropRule : rule}</Rule>\n        {count ? <Count>{count}</Count> : null}\n      </Header>\n      {lens && <Body>{children}</Body>}\n    </Root>\n  );\n});\n\nexport const Region = Object.assign(RegionBlock, { Root, Header, Name, Rule, Count, Body, Row: RegionRow });\nexport { RegionRow };\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/region.md. SwiftUI: MetalRegion, MetalRegionRow in the MetalUI Swift package."
}