nexus-shared 1.1.5 → 1.1.6

package/src/styles/nexus.utility.css

@@ -0,0 +1,347 @@
+/* scrollbar */
+.sb,
+.sbh,
+textarea {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--B30) var(--B2);
+}
+.sbh {
+  scrollbar-width: none;
+}
+
+.sb::-webkit-scrollbar {
+  width: var(--SLBW);
+  height: var(--SLBW);
+}
+
+/* Thinner scrollbar: textareas + .sb.sm (Firefox: thin is the minimum) */
+.sb.sm,
+textarea {
+  scrollbar-width: thin;
+}
+
+.sb.sm::-webkit-scrollbar-thumb,
+textarea::-webkit-scrollbar-thumb {
+  border-width: 0.08rem;
+}
+
+.sb::-webkit-scrollbar-track,
+textarea::-webkit-scrollbar-track {
+  background: var(--B3);
+}
+
+.sb::-webkit-scrollbar-thumb,
+textarea::-webkit-scrollbar-thumb {
+  background-color: var(--B30);
+  border-radius: var(--BR2);
+  border: 0.12rem solid var(--B3);
+}
+
+.sb::-webkit-scrollbar-thumb:hover,
+textarea::-webkit-scrollbar-thumb:hover {
+  background-color: var(--B40);
+}
+
+.sb::-webkit-scrollbar-button,
+textarea::-webkit-scrollbar-button {
+  background-color: var(--B3);
+}
+
+.sb::-webkit-scrollbar-button:hover,
+textarea::-webkit-scrollbar-button:hover {
+  background-color: var(--B3);
+}
+
+.sb::-webkit-scrollbar-corner,
+textarea::-webkit-scrollbar-corner {
+  background: var(--B3);
+}
+
+.sbh::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.usn,
+body {
+  user-select: none !important;
+}
+
+.usa {
+  user-select: all !important;
+}
+
+.en {
+  pointer-events: none;
+}
+
+.no-drag {
+  user-select: none;
+  /* Prevent text selection */
+  -webkit-user-drag: none;
+  /* Prevent dragging in WebKit browsers */
+  pointer-events: auto;
+  /* Still clickable */
+}
+
+/* Pointer events all */
+.ea {
+  pointer-events: all;
+}
+
+/* Disabled */
+.d {
+  pointer-events: none;
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.db {
+  display: block;
+}
+
+.dn {
+  display: none !important;
+}
+
+.vv {
+  visibility: visible;
+}
+
+.vh {
+  visibility: hidden;
+}
+
+.dif {
+  display: inline-flex;
+}
+
+.df {
+  display: flex;
+}
+
+.ddc {
+  flex-direction: column;
+}
+
+.fg {
+  flex-grow: 1;
+}
+
+.fw {
+  flex-wrap: wrap;
+}
+
+.ac {
+  align-items: center;
+}
+
+.acc {
+  align-content: center;
+}
+
+.jc {
+  justify-content: center;
+}
+
+.ae {
+  align-items: flex-end;
+}
+
+.jr {
+  justify-content: right;
+}
+
+.jl {
+  justify-content: left;
+}
+
+.sn {
+  outline: none;
+  border: none;
+  background-color: unset;
+}
+
+.o0 {
+  opacity: 0;
+}
+
+.o1 {
+  opacity: 1;
+}
+
+.oh {
+  overflow: hidden;
+}
+
+.bb {
+  box-sizing: border-box;
+}
+
+.w100 {
+  width: 100%;
+}
+
+.h100 {
+  height: 100%;
+}
+
+.ps {
+  position: sticky;
+}
+
+.pa {
+  position: absolute;
+}
+
+.pf {
+  position: fixed;
+}
+
+.pr {
+  position: relative;
+}
+
+.ty50 {
+  transform: translateY(-50%);
+}
+
+.tx50 {
+  transform: translateX(-50%);
+}
+
+.txy50 {
+  transform: translate(-50%, -50%);
+}
+
+.t50 {
+  top: 50%;
+}
+
+.l50 {
+  left: 50%;
+}
+
+.left {
+  left: 0;
+}
+
+.right {
+  right: 0;
+}
+
+.top {
+  top: 0;
+}
+
+.bottom {
+  bottom: 0;
+}
+
+.r {
+  border-radius: var(--BR1);
+}
+
+.r2 {
+  border-radius: var(--BR2);
+}
+
+.rr {
+  border-radius: 50%;
+}
+
+.anim,
+.h {
+  transition: var(--ANIM);
+}
+
+.no-anim {
+  transition: none !important;
+}
+
+.h,
+.hc {
+  cursor: pointer;
+}
+
+.rs {
+  resize: both !important;
+  position: relative;
+}
+
+.cur-move {
+  cursor: move !important;
+}
+
+.nw {
+  white-space: nowrap;
+}
+
+.toh {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+.tl {
+  text-align: left !important;
+}
+
+.tr {
+  text-align: right !important;
+}
+
+.tj {
+  text-align: justify !important;
+}
+
+.tc {
+  text-align: center !important;
+}
+
+del {
+  position: relative;
+}
+
+.l-bb {
+  text-decoration: underline;
+}
+
+del:after {
+  content: "";
+  width: 100%;
+  top: 50%;
+  left: 0;
+  border-bottom: 0.15rem solid red;
+  position: absolute;
+}
+
+.u {
+  text-decoration: underline;
+}
+
+.ma {
+  margin: auto;
+}
+
+.mw {
+  width: var(--MW);
+  max-width: var(--MW);
+}
+
+@media (max-width: 1150px) {
+  :root {
+    --MW: 95vw;
+  }
+}
+
+@media (max-width: 950px) {
+  :root {
+    --MW: 98vw;
+  }
+
+  .client-menu .utilities {
+    width: 100% !important;
+  }
+}

package/src/client/index.ts

@@ -1 +0,0 @@
-export { NexusSelectableList } from "./nexus-selectable-list";

package/src/client/nexus-selectable-list.css

@@ -1,131 +0,0 @@
-.nexus-selectable-list {
-  --nexus-select-bg: #12101a;
-  --nexus-select-surface: #1e1b28;
-  --nexus-select-border: #3d3654;
-  --nexus-select-accent: #a855f7;
-  --nexus-select-accent-dim: rgba(168, 85, 247, 0.15);
-  --nexus-select-text: #f4f0fa;
-  --nexus-select-muted: #9d94b0;
-
-  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
-  background: var(--nexus-select-bg);
-  border: 1px solid var(--nexus-select-border);
-  border-radius: 12px;
-  padding: 1.25rem 1.5rem;
-  color: var(--nexus-select-text);
-  max-width: 32rem;
-}
-
-.nexus-selectable-list__header {
-  margin-bottom: 1rem;
-}
-
-.nexus-selectable-list__title {
-  margin: 0 0 0.75rem;
-  font-size: 1.125rem;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-.nexus-selectable-list__search {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0.625rem 0.875rem;
-  font-size: 0.875rem;
-  color: var(--nexus-select-text);
-  background: var(--nexus-select-surface);
-  border: 1px solid var(--nexus-select-border);
-  border-radius: 8px;
-  outline: none;
-  transition: border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.nexus-selectable-list__search::placeholder {
-  color: var(--nexus-select-muted);
-}
-
-.nexus-selectable-list__search:focus {
-  border-color: var(--nexus-select-accent);
-  box-shadow: 0 0 0 3px var(--nexus-select-accent-dim);
-}
-
-.nexus-selectable-list__meta {
-  margin: 0.5rem 0 0;
-  font-size: 0.75rem;
-  color: var(--nexus-select-muted);
-}
-
-.nexus-selectable-list__list {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  max-height: 16rem;
-  overflow-y: auto;
-}
-
-.nexus-selectable-list__item {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: 0.75rem 1rem;
-  font: inherit;
-  color: inherit;
-  background: var(--nexus-select-surface);
-  border: 1px solid transparent;
-  border-radius: 8px;
-  cursor: pointer;
-  transition:
-    background 0.15s ease,
-    border-color 0.15s ease;
-}
-
-.nexus-selectable-list__item:hover {
-  border-color: var(--nexus-select-border);
-}
-
-.nexus-selectable-list__item--selected {
-  background: var(--nexus-select-accent-dim);
-  border-color: var(--nexus-select-accent);
-}
-
-.nexus-selectable-list__label {
-  display: block;
-  font-size: 0.9375rem;
-  font-weight: 500;
-}
-
-.nexus-selectable-list__description {
-  display: block;
-  margin-top: 0.2rem;
-  font-size: 0.8125rem;
-  color: var(--nexus-select-muted);
-  line-height: 1.35;
-}
-
-.nexus-selectable-list__empty {
-  margin: 0;
-  padding: 1.25rem;
-  text-align: center;
-  font-size: 0.875rem;
-  color: var(--nexus-select-muted);
-  background: var(--nexus-select-surface);
-  border-radius: 8px;
-}
-
-.nexus-selectable-list__detail {
-  margin-top: 1rem;
-  padding: 0.875rem 1rem;
-  background: var(--nexus-select-surface);
-  border-left: 3px solid var(--nexus-select-accent);
-  border-radius: 0 8px 8px 0;
-  font-size: 0.8125rem;
-  line-height: 1.5;
-}
-
-.nexus-selectable-list__detail strong {
-  color: var(--nexus-select-accent);
-  font-weight: 600;
-}

package/src/client/nexus-selectable-list.tsx

@@ -1,111 +0,0 @@
-"use client";
-
-import { useMemo, useState } from "react";
-import type { NexusSelectableListProps } from "../interfaces/nexus-list";
-import "./nexus-selectable-list.css";
-
-/**
- * Client component — filterable list with selection and detail preview.
- */
-export function NexusSelectableList({
-  title,
-  items,
-  placeholder = "Filter items…",
-  emptyMessage = "No matching items.",
-  className,
-}: NexusSelectableListProps) {
-  const [query, setQuery] = useState("");
-  const [selectedId, setSelectedId] = useState<string | null>(
-    items[0]?.id ?? null,
-  );
-
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    if (!q) return items;
-    return items.filter(
-      (item) =>
-        item.label.toLowerCase().includes(q) ||
-        item.description?.toLowerCase().includes(q),
-    );
-  }, [items, query]);
-
-  const selected = items.find((item) => item.id === selectedId) ?? null;
-  const rootClass = className
-    ? `nexus-selectable-list ${className}`
-    : "nexus-selectable-list";
-
-  return (
-    <section
-      className={rootClass}
-      aria-labelledby="nexus-selectable-list-title"
-    >
-      <div className="nexus-selectable-list__header">
-        <h2 id="nexus-selectable-list-title" className="nexus-selectable-list__title">
-          {title}
-        </h2>
-        <input
-          type="search"
-          className="nexus-selectable-list__search"
-          placeholder={placeholder}
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          aria-label={`Filter ${title}`}
-        />
-        <p className="nexus-selectable-list__meta">
-          Showing {filtered.length} of {items.length}
-        </p>
-      </div>
-
-      {filtered.length === 0 ? (
-        <p className="nexus-selectable-list__empty">{emptyMessage}</p>
-      ) : (
-        <ul
-          className="nexus-selectable-list__list"
-          role="listbox"
-          aria-label={title}
-        >
-          {filtered.map((item) => {
-            const isSelected = item.id === selectedId;
-            const itemClass = isSelected
-              ? "nexus-selectable-list__item nexus-selectable-list__item--selected"
-              : "nexus-selectable-list__item";
-
-            return (
-              <li key={item.id} role="presentation">
-                <button
-                  type="button"
-                  role="option"
-                  aria-selected={isSelected}
-                  className={itemClass}
-                  onClick={() => setSelectedId(item.id)}
-                >
-                  <span className="nexus-selectable-list__label">
-                    {item.label}
-                  </span>
-                  {item.description ? (
-                    <span className="nexus-selectable-list__description">
-                      {item.description}
-                    </span>
-                  ) : null}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      )}
-
-      {selected ? (
-        <div className="nexus-selectable-list__detail">
-          <strong>{selected.label}</strong>
-          {selected.description ? <> — {selected.description}</> : null}
-          {selected.value !== undefined && selected.value !== null ? (
-            <>
-              <br />
-              Value: <strong>{selected.value}</strong>
-            </>
-          ) : null}
-        </div>
-      ) : null}
-    </section>
-  );
-}

package/src/client.ts

@@ -1,7 +0,0 @@
-import "./client/nexus-selectable-list.css";
-
-/**
- * Barrel entry for client components ('use client').
- * Add exports here as you create modules under ./client/
- */
-export * from "./client/index";

package/src/interface.ts

@@ -1,5 +0,0 @@
-/**
- * Barrel entry for all shared interfaces/types.
- * Add exports here as you create modules under ./interfaces/
- */
-export * from "./interfaces";

package/src/interfaces/index.ts

@@ -1,6 +0,0 @@
-export type { NexusBaseProps } from "./nexus-base.ts";
-export type {
-  NexusListItem,
-  NexusStatListProps,
-  NexusSelectableListProps,
-} from "./nexus-list";

package/src/interfaces/nexus-base.ts

@@ -1,5 +0,0 @@
-/** Base props shared across Nexus packages */
-export interface NexusBaseProps {
-  id?: string;
-  className?: string;
-}

package/src/interfaces/nexus-list.ts

@@ -1,24 +0,0 @@
-/** Single row/item used by Nexus list components */
-export interface NexusListItem {
-  id: string;
-  label: string;
-  description?: string;
-  value?: string | number;
-}
-
-/** Props for the server-rendered stat list */
-export interface NexusStatListProps {
-  title: string;
-  items: NexusListItem[];
-  emptyMessage?: string;
-  className?: string;
-}
-
-/** Props for the client-side selectable & filterable list */
-export interface NexusSelectableListProps {
-  title: string;
-  items: NexusListItem[];
-  placeholder?: string;
-  emptyMessage?: string;
-  className?: string;
-}

package/src/server/index.ts

@@ -1 +0,0 @@
-export { NexusStatList } from "./nexus-stat-list";