b44ui 0.0.3 → 0.0.4

package/{comps.tsx → index.tsx}

@@ -1,21 +1,22 @@
-import { type ReactNode, Children, useState } from "react"
-import CN from "./cn"
-import { Md } from "./Markdown"
-
-const tints = {
-  blue: 'bg-blue-500/20 border-blue-500',
-  orange: 'bg-orange-500/20 border-orange-500',
-  red: 'bg-red-500/20 border-red-500',
-  purple: 'bg-purple-500/20 border-purple-500',
-} as const
-
-const btnColors = {
-  blue: 'bg-blue-600 hover:bg-blue-500',
-  red: 'bg-red-600 hover:bg-red-500',
-  green: 'bg-green-600 hover:bg-green-500',
-} as const
-
-export type Color = keyof typeof btnColors
+import { type ReactNode, Children, useMemo, useState } from "react"
+import { Marked } from "marked"
+import { markedHighlight } from "marked-highlight"
+import hljs from "highlight.js"
+import { ClassValue } from "clsx"
+import clsx from "clsx"
+import { twMerge } from "tailwind-merge"
+
+// const tints = {
+//   blue: 'bg-blue-500/20 border-blue-500', orange: 'bg-orange-500/20 border-orange-500',
+//   red: 'bg-red-500/20 border-red-500', purple: 'bg-purple-500/20 border-purple-500',
+// } as const
+// const btnColors = { blue: 'bg-blue-600 hover:bg-blue-500', red: 'bg-red-600 hover:bg-red-500', green: 'bg-green-600 hover:bg-green-500' } as const
+
+export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow'
+const tintCn = (c: Color) => `bg-${c}-500/20 border-${c}-500`
+const colorCn = (c: Color) => `bg-${c}-600 hover:bg-${c}-500`
+
+export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
 
 export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties, grow?: boolean }
 export const D = ({ children, cn, style, grow }: DProps) =>
@@ -51,10 +52,10 @@ export const Card = ({ children, cn, grow }: DProps) =>
 export const Col = ({ children, cn, grow }: DProps) =>
   <D cn={["flex flex-col gap-3", cn]} grow={grow}>{children}</D>
 
-export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: keyof typeof tints }) => {
+export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: Color }) => {
   const [open, setOpen] = useState(false)
   return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
-    <span className={CN("cursor-pointer", color && tints[color], color && "border-b-2", cn)}>{children}</span>
+    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", cn)}>{children}</span>
     {open && <div className="absolute left-0 top-full z-10 mt-1">
       <Card cn="w-64 p-3 shadow-lg text-sm">{text}</Card>
     </div>}
@@ -66,11 +67,11 @@ export const Muted = ({ children, cn, grow }: DProps) =>
 
 export const Btn = ({ children, cn, grow, click, color, ghost, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
   <button className={CN("rounded px-4 py-2 text-sm cursor-pointer",
-    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? btnColors[color] : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
+    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
     onClick={click} {...rest}>{children}</button>
 
-export const Tint = ({ children, color, cn, grow }: DProps & { color: keyof typeof tints }) =>
-  <D cn={["p-3 rounded text-sm", tints[color], cn]} grow={grow}>{children}</D>
+export const Tint = ({ children, color, cn, grow }: DProps & { color: Color }) =>
+  <D cn={["p-3 rounded text-sm", tintCn(color), cn]} grow={grow}>{children}</D>
 
 export const Row = ({ children, ratio, align, cn, grow }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
   <div className={CN("flex gap-2 items-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
@@ -92,3 +93,9 @@ export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & Rea
 
 export const Grid = ({ children, cols, cn, grow }: DProps & { cols?: number }) =>
   <D cn={["grid gap-4", cn]} grow={grow} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
+
+const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
+export const Md = ({ children, className }: { children: string, className?: string }) => {
+  const html = useMemo(() => marked.parse(children) as string, [children])
+  return <div className={CN("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "b44ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
-  "scripts": { "dev": "npm run dev --prefix example" },
-  "exports": { ".": "./index.ts", "./styles.css": "./styles.css" },
+  "scripts": {
+    "dev": "npm run dev --prefix example"
+  },
+  "exports": {
+    ".": "./index.tsx",
+    "./styles.css": "./styles.css"
+  },
   "dependencies": {
     "clsx": "^2.1.1",
     "highlight.js": "^11.11.0",
@@ -11,6 +16,10 @@
     "marked-highlight": "^2.2.0",
     "tailwind-merge": "^3.0.0"
   },
-  "peerDependencies": { "react": "^19.0.0" },
-  "devDependencies": { "@types/react": "^19.2.14" }
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14"
+  }
 }

package/prompt.md

@@ -0,0 +1,257 @@
+**write a style guide for agents using the `b44ui` component library**
+
+# b44ui/index.tsx
+```tsx
+import { type ReactNode, Children, useMemo, useState } from "react"
+import { Marked } from "marked"
+import { markedHighlight } from "marked-highlight"
+import hljs from "highlight.js"
+import { ClassValue } from "clsx"
+import clsx from "clsx"
+import { twMerge } from "tailwind-merge"
+
+// const tints = {
+//   blue: 'bg-blue-500/20 border-blue-500', orange: 'bg-orange-500/20 border-orange-500',
+//   red: 'bg-red-500/20 border-red-500', purple: 'bg-purple-500/20 border-purple-500',
+// } as const
+// const btnColors = { blue: 'bg-blue-600 hover:bg-blue-500', red: 'bg-red-600 hover:bg-red-500', green: 'bg-green-600 hover:bg-green-500' } as const
+
+export type Color = 'red' | 'blue' | 'orange' | 'purple' | 'yellow'
+const tintCn = (c: Color) => `bg-${c}-500/20 border-${c}-500`
+const colorCn = (c: Color) => `bg-${c}-600 hover:bg-${c}-500`
+
+export const CN = (...inputs: ClassValue[]) => twMerge(clsx(inputs))
+
+export type DProps = { children?: ReactNode, cn?: any, style?: React.CSSProperties, grow?: boolean }
+export const D = ({ children, cn, style, grow }: DProps) =>
+  <div className={CN(cn, grow && "flex-1")} style={style}>{children}</div>
+
+export const App = ({ children, center = true, width, cn }: DProps & { center?: boolean, width?: number }) => {
+  const inner = Children.map(children, c => typeof c == 'string' ? <Md>{c.trim()}</Md> : c)
+
+  return <D cn={["min-h-screen w-full bg-[#111] text-[#eee] font-[Inter]", center && "flex justify-center items-center", cn]}>
+    {center ? <div className="max-w-full px-5 py-10 space-y-5 *:mx-auto" style={{ width }}>{inner}</div> : inner}
+  </D>
+}
+
+export const Centered = ({ children, cn, grow, width = 700 }: DProps & { width?: number }) =>
+  <D cn={["mx-auto max-w-full px-6", cn]} grow={grow} style={{ width }}>{children}</D>
+
+export const Block = ({ label, children, row, dashed, cn, grow }: DProps & { label?: ReactNode, row?: boolean, dashed?: boolean }) =>
+  <D cn={["rounded p-4 flex flex-col items-center gap-2", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>
+    {label && <span className="opacity-75">{label}</span>}
+    <div className={CN(row ? "flex-row" : "flex-col", "flex items-center gap-2")}>{children}</div>
+  </D>
+
+export const BlockSm = ({ children, dashed, cn, grow }: DProps & { dashed?: boolean }) =>
+  <D cn={["rounded px-3 py-2 text-sm", dashed && "border border-dashed border-zinc-700", cn]} grow={grow}>{children}</D>
+
+export const Chip = ({ children, cn, click }: DProps & { click?: () => void }) =>
+  <span className={CN("bg-zinc-800 rounded px-2 py-0.5 text-xs", click && "cursor-pointer hover:bg-zinc-700", cn)}
+    onClick={click}>{children}</span>
+
+export const Card = ({ children, cn, grow }: DProps) =>
+  <D cn={["rounded border border-zinc-700 bg-zinc-900 p-4 space-y-3", cn]} grow={grow}>{children}</D>
+
+export const Col = ({ children, cn, grow }: DProps) =>
+  <D cn={["flex flex-col gap-3", cn]} grow={grow}>{children}</D>
+
+export const Popover = ({ children, text, color, cn }: DProps & { text: ReactNode, color?: Color }) => {
+  const [open, setOpen] = useState(false)
+  return <span className="relative inline-block" onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}>
+    <span className={CN("cursor-pointer", color && tintCn(color), color && "border-b-2", cn)}>{children}</span>
+    {open && <div className="absolute left-0 top-full z-10 mt-1">
+      <Card cn="w-64 p-3 shadow-lg text-sm">{text}</Card>
+    </div>}
+  </span>
+}
+
+export const Muted = ({ children, cn, grow }: DProps) =>
+  <span className={CN("text-sm text-zinc-400", grow && "flex-1", cn)}>{children}</span>
+
+export const Btn = ({ children, cn, grow, click, color, ghost, ...rest }: DProps & { click?: () => void, color?: Color, ghost?: boolean } & React.ButtonHTMLAttributes<HTMLButtonElement>) =>
+  <button className={CN("rounded px-4 py-2 text-sm cursor-pointer",
+    ghost ? "bg-transparent text-zinc-400 hover:bg-zinc-800" : color ? colorCn(color) : "bg-zinc-800 hover:bg-zinc-700", grow && "flex-1", cn)}
+    onClick={click} {...rest}>{children}</button>
+
+export const Tint = ({ children, color, cn, grow }: DProps & { color: Color }) =>
+  <D cn={["p-3 rounded text-sm", tintCn(color), cn]} grow={grow}>{children}</D>
+
+export const Row = ({ children, ratio, align, cn, grow }: DProps & { ratio?: number, align?: 'mid' | 'start' | 'end' }) =>
+  <div className={CN("flex gap-2 items-center", align === 'mid' && "justify-between", align == 'end' && "justify-end", align == 'start' && "justify-start", grow && "flex-1", cn)}
+    style={ratio ? { width: `${ratio * 100}%` } : undefined}>{children}</div>
+
+export const Modal = ({ children, open, cn }: DProps & { open: boolean }) =>
+  open ? <div className="fixed inset-0 flex items-center justify-center bg-black/50 z-50">
+    <Card cn={["max-h-[80vh] overflow-y-auto w-lg", cn]}>{children}</Card>
+  </div> : null
+
+export const Input = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.InputHTMLAttributes<HTMLInputElement>) =>
+  <input className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none", grow && "flex-1", cn)} {...rest} />
+
+export const Textarea = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.TextareaHTMLAttributes<HTMLTextAreaElement>) =>
+  <textarea className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none w-full", grow && "flex-1", cn)} {...rest} />
+
+export const Select = ({ cn, grow, ...rest }: { cn?: any, grow?: boolean } & React.SelectHTMLAttributes<HTMLSelectElement>) =>
+  <select className={CN("rounded bg-zinc-800 border border-zinc-700 px-3 py-2 text-sm outline-none cursor-pointer", grow && "flex-1", cn)} {...rest} />
+
+export const Grid = ({ children, cols, cn, grow }: DProps & { cols?: number }) =>
+  <D cn={["grid gap-4", cn]} grow={grow} style={{ gridTemplateColumns: `repeat(${cols ?? Children.count(children)}, 1fr)` }}>{children}</D>
+
+const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
+export const Md = ({ children, className }: { children: string, className?: string }) => {
+  const html = useMemo(() => marked.parse(children) as string, [children])
+  return <div className={CN("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
+}
+```
+
+# b44ui/example/app.tsx
+```tsx
+import { useState } from 'react'
+import { App, Btn, Card, Chip, Col, D, Muted, Input, Row, Select, Grid } from 'ui'
+
+type Meeting = { day: string, start: number, end: number }
+type Section = { id: string, type: 'LEC' | 'TUT' | 'PRA', meetings: Meeting[] }
+type Course = { code: string, name: string, sections: Section[] }
+
+const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
+const hours = Array.from({ length: 13 }, (_, i) => i + 9) // 9am-9pm
+
+const catalog: Course[] = [
+  { code: 'CSC108', name: 'Intro to Computer Programming', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 600, end: 660 }, { day: 'Wed', start: 600, end: 660 }] },
+    { id: 'LEC0201', type: 'LEC', meetings: [{ day: 'Tue', start: 660, end: 720 }, { day: 'Thu', start: 660, end: 720 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Fri', start: 600, end: 660 }] },
+    { id: 'TUT0201', type: 'TUT', meetings: [{ day: 'Fri', start: 660, end: 720 }] },
+  ]},
+  { code: 'MAT137', name: 'Calculus with Proofs', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 540, end: 600 }, { day: 'Wed', start: 540, end: 600 }, { day: 'Fri', start: 540, end: 600 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Thu', start: 540, end: 600 }] },
+    { id: 'TUT0201', type: 'TUT', meetings: [{ day: 'Thu', start: 600, end: 660 }] },
+  ]},
+  { code: 'CSC148', name: 'Intro to Computer Science', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Tue', start: 540, end: 600 }, { day: 'Thu', start: 540, end: 600 }] },
+    { id: 'PRA0101', type: 'PRA', meetings: [{ day: 'Wed', start: 720, end: 780 }] },
+  ]},
+  { code: 'PHY151', name: 'Foundations of Physics I', sections: [
+    { id: 'LEC0101', type: 'LEC', meetings: [{ day: 'Mon', start: 720, end: 780 }, { day: 'Wed', start: 720, end: 780 }] },
+    { id: 'TUT0101', type: 'TUT', meetings: [{ day: 'Fri', start: 720, end: 780 }] },
+    { id: 'PRA0101', type: 'PRA', meetings: [{ day: 'Tue', start: 780, end: 840 }] },
+  ]},
+]
+
+const colors = ['bg-blue-500', 'bg-emerald-500', 'bg-amber-500', 'bg-purple-500', 'bg-rose-500']
+
+export default function YACS() {
+  const [query, setQuery] = useState('')
+  const [added, setAdded] = useState<Record<string, Course>>({})
+  const [picks, setPicks] = useState<Record<string, Record<string, number>>>({}) // code -> type -> section idx
+
+  const results = query.length ?
+    catalog.filter(c => !added[c.code] && (c.code.toLowerCase().includes(query.toLowerCase()) || c.name.toLowerCase().includes(query.toLowerCase())))
+    : []
+
+  const addCourse = (c: Course) => {
+    setAdded({ ...added, [c.code]: c })
+    const types = [...new Set(c.sections.map(s => s.type))]
+    setPicks({ ...picks, [c.code]: Object.fromEntries(types.map(t => [t, 0])) })
+  }
+
+  const removeCourse = (code: string) => {
+    const { [code]: _, ...rest } = added
+    setPicks(({ [code]: __, ...r }) => r)
+    setAdded(rest)
+  }
+
+  const cyclePick = (code: string, type: string) => {
+    const secs = added[code].sections.filter(s => s.type === type)
+    setPicks({ ...picks, [code]: { ...picks[code], [type]: (picks[code][type] + 1) % secs.length } })
+  }
+
+  // gather all visible meetings for calendar
+  const events: { code: string, meeting: Meeting, colorIdx: number }[] = []
+  const codes = Object.keys(added)
+  for (const [i, code] of codes.entries()) {
+    const c = added[code]
+    const p = picks[code] || {}
+    for (const type of Object.keys(p)) {
+      const secs = c.sections.filter(s => s.type === type)
+      const sec = secs[p[type]]
+      if (sec) for (const m of sec.meetings) events.push({ code, meeting: m, colorIdx: i })
+    }
+  }
+
+  return <App center={false} cn="p-4 h-screen">
+    <Grid cols={3} cn="h-full">
+
+      {/* calendar */}
+      <Card cn="col-span-2 row-span-1 p-4 overflow-hidden flex flex-col">
+        <D cn="grid flex-1" style={{ gridTemplateColumns: `60px repeat(5, 1fr)` }}>
+          {/* hour labels */}
+          <D cn="flex flex-col justify-between text-sm text-zinc-500 pr-2">
+            {hours.map(h => <span key={h}>{h > 12 ? h - 12 : h}{h >= 12 ? 'pm' : 'am'}</span>)}
+          </D>
+          {/* day columns */}
+          {days.map(day => <D key={day} cn="relative border-l border-zinc-800">
+            <Muted cn="text-center block text-sm mb-1">{day}</Muted>
+            {/* hour gridlines */}
+            {hours.map(h => <D key={h} cn="border-t border-zinc-800/50 left-0 right-0 absolute" style={{ top: `${h*8}%` }} />)}
+            {/* events */}
+            {events.filter(e => e.meeting.day === day).map((e, i) => {
+              const top = ((e.meeting.start - 540) / (13 * 60)) * 100
+              const height = ((e.meeting.end - e.meeting.start) / (13 * 60)) * 100
+              return <D key={i} cn={`absolute left-0.5 right-0.5 rounded text-sm px-1 text-white ${colors[e.colorIdx % colors.length]}`}
+                style={{ top: `${top}%`, height: `${height}%` }}>
+                {e.code}
+              </D>
+            })}
+          </D>)}
+        </D>
+      </Card>
+
+      {/* right panel */}
+      <D cn="flex flex-col gap-3">
+        {/* search */}
+        <Card cn="p-4">
+          <Row>
+            <Input grow placeholder="search..." value={query} onChange={e => setQuery(e.target.value)} />
+            <Select><option>2026W</option><option>2026S</option></Select>
+          </Row>
+          <D cn="space-y-3 max-h-48 overflow-y-auto flex-row">
+            {results.map(c => <Btn key={c.code} click={() => addCourse(c)} grow>
+              {c.code} — {c.name}
+            </Btn>)}
+            {query.length >= 2 && !results.length && <Muted>no results</Muted>}
+          </D>
+        </Card>
+
+        {/* added */}
+        <Card cn="p-4 space-y-3 flex-1">
+          {codes.map((code, i) => {
+            const c = added[code]
+            const types = [...new Set(c.sections.map(s => s.type))]
+            return <D key={code} cn="space-y-1">
+              <Row align='mid'>
+                <span className={`w-2 h-2 rounded-full ${colors[i % colors.length]}`} />
+                <Muted cn="flex-1">{code}</Muted>
+                <Chip click={() => removeCourse(code)}>×</Chip>
+              </Row>
+              <Row>
+                {types.map(t => {
+                  const secs = c.sections.filter(s => s.type === t)
+                  const idx = picks[code]?.[t] ?? 0
+                  return <Chip key={t} click={() => cyclePick(code, t)}>
+                    {t} {secs[idx]?.id}
+                  </Chip>
+                })}
+              </Row>
+            </D>
+          })}
+          {!codes.length && <Muted>no courses added</Muted>}
+        </Card>
+      </D>
+
+    </Grid>
+  </App>
+}
+```

package/Markdown.tsx

@@ -1,12 +0,0 @@
-import { useMemo } from "react"
-import { Marked } from "marked"
-import { markedHighlight } from "marked-highlight"
-import hljs from "highlight.js"
-import cn from "./cn"
-
-const marked = new Marked(markedHighlight({ langPrefix: "hljs language-", highlight: c => hljs.highlightAuto(c).value }))
-
-export const Md = ({ children, className }: { children: string, className?: string }) => {
-  const html = useMemo(() => marked.parse(children) as string, [children])
-  return <div className={cn("ui-markdown", className)} dangerouslySetInnerHTML={{ __html: html }} />
-}

package/cn.ts

@@ -1,4 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export default (...inputs: ClassValue[]) => twMerge(clsx(inputs))

package/index.ts

@@ -1,3 +0,0 @@
-export * from "./cn"
-export * from "./comps"
-export * as Md from "./Markdown"