handzon-core 0.6.1 → 0.6.2

package/styles/components/dropdown.css

@@ -0,0 +1,144 @@
+/* Shared dropdown component (handzon-core/src/components/ui/Dropdown.tsx).
+ *
+ * Wraps Radix Select so we never ship the browser-native dropdown UI.
+ * Every dropdown in handzon-core inherits these styles — keep the look
+ * mono/brutalist (hard edges, uppercase mono label chip, accent border
+ * on focus / open) so dropdowns sit alongside the search input, pills,
+ * and pagination buttons without visual drift.
+ */
+
+.hz-dd {
+  display: inline-flex;
+  align-items: stretch;
+  font-family: var(--font-mono);
+  font-size: 0.78em;
+}
+
+/* Uppercase mono label chip glued to the trigger. */
+.hz-dd-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 0.6rem;
+  border: 1px solid var(--color-border);
+  border-right: 0;
+  color: var(--color-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  user-select: none;
+}
+
+.hz-dd-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.6rem;
+  /* Match the search input's natural height so the whole toolbar row
+   * shares a single baseline. Without this, the Sort dropdown reads
+   * ~6px shorter than the multi-select triggers which stretch via
+   * the toolbar's align-items: stretch. */
+  min-height: 2.5rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  font: inherit;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.hz-dd-trigger:hover {
+  border-color: var(--color-accent);
+}
+.hz-dd-trigger:focus-visible,
+.hz-dd-trigger[data-state="open"] {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.hz-dd-trigger[data-placeholder] {
+  color: var(--color-muted);
+}
+
+.hz-dd-tricon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-muted);
+}
+
+.hz-dd-caret {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.15rem;
+  color: var(--color-muted);
+  transition: transform 0.15s ease;
+}
+.hz-dd-trigger[data-state="open"] .hz-dd-caret {
+  transform: rotate(180deg);
+  color: var(--color-accent);
+}
+
+/* ---------- Popover ---------- */
+
+.hz-dd-content {
+  /* Radix Portal renders this outside the normal flow — float it above
+   * the page chrome, including the sticky sidebar (z=10) and the fixed
+   * topbar (z=50). */
+  z-index: 100;
+  min-width: var(--radix-select-trigger-width);
+  max-height: var(--radix-select-content-available-height);
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+.hz-dd-viewport {
+  padding: 0.25rem 0;
+}
+
+.hz-dd-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.75rem;
+  color: var(--color-fg);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+.hz-dd-item[data-highlighted] {
+  background: var(--color-surface);
+  color: var(--color-accent);
+}
+.hz-dd-item[data-state="checked"] {
+  color: var(--color-accent);
+}
+.hz-dd-item[data-disabled] {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.hz-dd-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-muted);
+}
+.hz-dd-item[data-highlighted] .hz-dd-icon,
+.hz-dd-item[data-state="checked"] .hz-dd-icon {
+  color: var(--color-accent);
+}
+
+.hz-dd-check {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-accent);
+}
+
+.hz-dd-scroll {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 1.5rem;
+  color: var(--color-muted);
+  background: var(--color-bg);
+  cursor: default;
+}

package/styles/components/filterbar.css

@@ -0,0 +1,128 @@
+/* Home-page filter bar.
+ *
+ * One toolbar row with search + Level dropdown + Topics dropdown + a
+ * vertical divider + Sort dropdown. Beneath it: optional "popular
+ * topics" pill row (top tags by count) and an "active filters" chip
+ * row that only appears when at least one filter is set.
+ *
+ * The dropdowns themselves (their trigger chrome and popover content)
+ * are styled in dropdown.css and multiselect.css respectively — this
+ * file only handles the toolbar layout + the inline pill + chip rows.
+ */
+
+.filterbar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+/* ---------- Toolbar (search + facets + sort) ---------- */
+
+.fb-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  gap: 0.75rem;
+}
+
+.fb-toolbar .search {
+  flex: 1 1 16rem;
+  min-width: 12rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.45rem 0.7rem;
+  border: 1px solid var(--color-border);
+  color: var(--color-muted);
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.fb-toolbar .search:focus-within {
+  border-color: var(--color-accent);
+  color: var(--color-fg);
+}
+.fb-toolbar .search input {
+  background: transparent;
+  border: 0;
+  color: var(--color-fg);
+  font: inherit;
+  outline: none;
+  width: 100%;
+}
+
+/* Visual separator marking "sort isn't a filter". The sort cluster
+ * pushes itself to the right edge so the divider falls in a natural
+ * spot. */
+.fb-divider {
+  width: 0;
+  border-left: 1px solid var(--color-border);
+  align-self: stretch;
+  margin: 0 0.25rem;
+}
+.fb-sort-slot {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* On narrow viewports the toolbar wraps; sort drops to its own line.
+ * Keep the divider visible only when the row hasn't wrapped — when it
+ * has, the layout already reads as distinct rows. Cheap heuristic:
+ * hide the divider below ~640px viewport. */
+@media (max-width: 640px) {
+  .fb-divider { display: none; }
+}
+
+/* ---------- Active filter chips ---------- */
+
+.active-filters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--color-border);
+}
+
+.active-filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.55rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  cursor: pointer;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+.active-filter-chip:hover,
+.active-filter-chip:focus-visible {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  outline: none;
+}
+.active-filter-chip .afc-label { text-transform: lowercase; }
+
+.active-filter-clear {
+  margin-left: 0.25rem;
+  padding: 0.25rem 0.55rem;
+  background: transparent;
+  border: 0;
+  color: var(--color-muted);
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: transparent;
+  text-underline-offset: 3px;
+  transition: color 0.12s ease, text-decoration-color 0.12s ease;
+}
+.active-filter-clear:hover,
+.active-filter-clear:focus-visible {
+  color: var(--color-fg);
+  text-decoration-color: currentColor;
+  outline: none;
+}

package/styles/components/multiselect.css

@@ -0,0 +1,206 @@
+/* Multi-select dropdown (handzon-core/src/components/ui/MultiSelect.tsx).
+ *
+ * Wraps Radix Popover. Visual parity with the single-select Dropdown:
+ * trigger reuses .hz-dd-label + .hz-dd-trigger + .hz-dd-caret. The
+ * popover content (option list, in-popover search, count badges,
+ * footer Clear) is what's specific to multi-select.
+ */
+
+/* The MultiSelect trigger is a single <button> wrapping the label
+ * chip + the inner trigger body. Radix Popover.Trigger asChild needs
+ * a *single* focusable element, so we collapse the structure into one
+ * button and let CSS draw the chip + body as siblings. */
+.hz-ms-trigger {
+  background: transparent;
+  border: 0;
+  padding: 0;
+  /* The button is also a `.hz-dd` element. That sibling class sets
+   * font-size: 0.78em + the mono family. Don't redeclare font-size /
+   * font-weight / line-height / letter-spacing here — at equal
+   * specificity, this stylesheet loads after dropdown.css and would
+   * win, resolving `inherit` to the body's 16px and making the
+   * trigger taller than the single-select Sort dropdown. We only
+   * need to undo the UA button defaults that .hz-dd doesn't already
+   * cover (font-family + color). */
+  font-family: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: stretch;
+  cursor: pointer;
+}
+.hz-ms-trigger-body {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.4rem 0.6rem;
+  min-height: 2.5rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-fg);
+  transition: border-color 0.12s ease, color 0.12s ease;
+}
+.hz-ms-trigger:hover .hz-ms-trigger-body,
+.hz-ms-trigger:focus-visible .hz-ms-trigger-body,
+.hz-ms-trigger[data-state="open"] .hz-ms-trigger-body {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+.hz-ms-trigger:focus-visible { outline: none; }
+.hz-ms-trigger[data-active] .hz-ms-trigger-body {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+/* Icon sits inside the label chip on the LEFT segment, not inside
+ * the trigger body, so the chip reads "[icon] LEVEL" and the body
+ * carries only the current value. */
+.hz-ms-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  /* Re-assert uppercase here because the inline-flex layout on the
+   * chip creates a nested span structure that loses the inheritance
+   * from .hz-dd-label in some rendering contexts. */
+  text-transform: uppercase;
+}
+.hz-ms-label-icon {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-muted);
+}
+
+/* Inherit the trigger's font (already mono + 0.78em via .hz-dd).
+ * No font-size override here — it would compound with the parent
+ * (0.78em × 0.78em ≈ 0.6em) and render as tiny ~10px text, out of
+ * step with the single-select Dropdown's value chrome.
+ *
+ * No muted color for the empty "Any" state either — the value text
+ * should read the same as the Sort dropdown's "Default" so the
+ * three trigger bodies share one visual rhythm. */
+.hz-ms-value {
+  font-family: inherit;
+}
+
+/* ---------- Popover content ---------- */
+
+.hz-ms-content {
+  z-index: 100;
+  min-width: 16rem;
+  max-width: 22rem;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg);
+  border: 1px solid var(--color-border);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  font-family: var(--font-mono);
+  font-size: 0.78em;
+}
+
+.hz-ms-search {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.55rem 0.7rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-muted);
+}
+.hz-ms-search input {
+  background: transparent;
+  border: 0;
+  color: var(--color-fg);
+  font: inherit;
+  outline: none;
+  width: 100%;
+}
+.hz-ms-search input::-webkit-search-cancel-button { display: none; }
+
+.hz-ms-viewport {
+  max-height: 16rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.hz-ms-empty {
+  padding: 0.75rem 0.85rem;
+  color: var(--color-muted);
+  text-align: center;
+  font-style: italic;
+}
+
+.hz-ms-option {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+  padding: 0.45rem 0.7rem;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  color: var(--color-fg);
+}
+.hz-ms-option:hover,
+.hz-ms-option:focus-visible,
+.hz-ms-option[tabindex="0"]:focus {
+  background: var(--color-surface);
+}
+.hz-ms-option[data-checked] {
+  color: var(--color-accent);
+}
+
+.hz-ms-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  border: 1px solid var(--color-border);
+  flex-shrink: 0;
+  color: var(--color-accent);
+}
+.hz-ms-option[data-checked] .hz-ms-check {
+  border-color: var(--color-accent);
+  background: color-mix(in oklab, var(--color-accent) 10%, transparent);
+}
+
+.hz-ms-option-label {
+  flex: 1;
+  text-transform: lowercase;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.hz-ms-count {
+  color: var(--color-muted);
+  font-size: 0.9em;
+  flex-shrink: 0;
+}
+.hz-ms-option[data-checked] .hz-ms-count { color: var(--color-accent); }
+
+.hz-ms-footer {
+  padding: 0.45rem 0.55rem;
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hz-ms-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.25rem 0.55rem;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-muted);
+  font: inherit;
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 0.88em;
+  transition: color 0.12s ease, border-color 0.12s ease;
+}
+.hz-ms-clear:hover,
+.hz-ms-clear:focus-visible {
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  outline: none;
+}

package/styles/components.css

@@ -9,6 +9,9 @@
 @import "./components/expressive-code.css";
 @import "./components/a11y.css";
 @import "./components/modal.css";
+@import "./components/dropdown.css";
+@import "./components/multiselect.css";
+@import "./components/filterbar.css";
 
 /* Site chrome */
 @import "./components/progress.css";