willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-layout/src/components/AppShell/index.css

@@ -0,0 +1,100 @@
+.willa-app-shell {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 100%;
+  color: var(--willa-text);
+  font-family: var(--willa-body-font);
+}
+
+.willa-app-shell-header {
+  z-index: 1;
+  min-width: 0;
+  padding: 0.9rem 1rem;
+  border-bottom: 1px solid var(--willa-app-shell-border);
+  background: var(--willa-app-shell-header-bg);
+}
+
+.willa-app-shell--sticky-header .willa-app-shell-header {
+  position: sticky;
+  top: 0;
+}
+
+.willa-app-shell-layout {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: minmax(var(--willa-app-shell-min-content-width), 1fr);
+}
+
+.willa-app-shell--with-sidebar .willa-app-shell-layout {
+  grid-template-columns:
+    var(--willa-app-shell-sidebar-width)
+    minmax(var(--willa-app-shell-min-content-width), 1fr);
+}
+
+.willa-app-shell--with-aside .willa-app-shell-layout {
+  grid-template-columns:
+    minmax(var(--willa-app-shell-min-content-width), 1fr)
+    var(--willa-app-shell-aside-width);
+}
+
+.willa-app-shell--with-sidebar.willa-app-shell--with-aside
+  .willa-app-shell-layout {
+  grid-template-columns:
+    var(--willa-app-shell-sidebar-width)
+    minmax(var(--willa-app-shell-min-content-width), 1fr)
+    var(--willa-app-shell-aside-width);
+}
+
+.willa-app-shell-sidebar,
+.willa-app-shell-aside {
+  min-width: 0;
+  padding: 1rem;
+  border-color: var(--willa-app-shell-border);
+  background: var(--willa-app-shell-rail-bg);
+}
+
+.willa-app-shell-sidebar {
+  border-right: 1px solid var(--willa-app-shell-border);
+}
+
+.willa-app-shell-aside {
+  border-left: 1px solid var(--willa-app-shell-border);
+}
+
+.willa-app-shell-main {
+  min-width: 0;
+  padding: 1rem;
+  background: var(--willa-app-shell-main-bg);
+}
+
+.willa-app-shell-footer {
+  min-width: 0;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--willa-app-shell-border);
+  background: var(--willa-app-shell-header-bg);
+}
+
+@media (max-width: 900px) {
+  .willa-app-shell--with-sidebar .willa-app-shell-layout,
+  .willa-app-shell--with-aside .willa-app-shell-layout,
+  .willa-app-shell--with-sidebar.willa-app-shell--with-aside
+    .willa-app-shell-layout {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .willa-app-shell-sidebar,
+  .willa-app-shell-aside {
+    border-right: 0;
+    border-left: 0;
+  }
+
+  .willa-app-shell-sidebar {
+    border-bottom: 1px solid var(--willa-app-shell-border);
+  }
+
+  .willa-app-shell-aside {
+    border-top: 1px solid var(--willa-app-shell-border);
+  }
+}

package/packages/willa-layout/src/components/AppShell/index.tsx

@@ -0,0 +1,70 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import classNames from "classnames";
+
+export type AppShellProps = {
+  header?: ReactNode;
+  sidebar?: ReactNode;
+  aside?: ReactNode;
+  footer?: ReactNode;
+  sidebarWidth?: string;
+  asideWidth?: string;
+  minContentWidth?: string;
+  stickyHeader?: boolean;
+  className?: string;
+  children?: ReactNode;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">;
+
+export function AppShell(props: AppShellProps) {
+  const {
+    header,
+    sidebar,
+    aside,
+    footer,
+    sidebarWidth = "16rem",
+    asideWidth = "18rem",
+    minContentWidth = "0",
+    stickyHeader = false,
+    className,
+    children,
+    style,
+    ...shellProps
+  } = props;
+  const shellStyle = {
+    "--willa-app-shell-sidebar-width": sidebarWidth,
+    "--willa-app-shell-aside-width": asideWidth,
+    "--willa-app-shell-min-content-width": minContentWidth,
+    ...style,
+  } as CSSProperties;
+
+  return (
+    <div
+      {...shellProps}
+      style={shellStyle}
+      className={classNames(
+        "willa-app-shell",
+        Boolean(sidebar) && "willa-app-shell--with-sidebar",
+        Boolean(aside) && "willa-app-shell--with-aside",
+        stickyHeader && "willa-app-shell--sticky-header",
+        className,
+      )}
+    >
+      {header ? (
+        <header className="willa-app-shell-header">{header}</header>
+      ) : null}
+      <div className="willa-app-shell-layout">
+        {sidebar ? (
+          <aside className="willa-app-shell-sidebar">{sidebar}</aside>
+        ) : null}
+        <main className="willa-app-shell-main">{children}</main>
+        {aside ? (
+          <aside className="willa-app-shell-aside">{aside}</aside>
+        ) : null}
+      </div>
+      {footer ? (
+        <footer className="willa-app-shell-footer">{footer}</footer>
+      ) : null}
+    </div>
+  );
+}
+
+AppShell.displayName = "AppShell";

package/packages/willa-layout/src/components/BorderBeam/index.css

@@ -0,0 +1,86 @@
+.willa-border-beam {
+  --willa-border-beam-width: 1px;
+  --willa-border-beam-outset: 0px;
+  --willa-border-beam-radius: 8px;
+  --willa-border-beam-duration: 5s;
+  --willa-border-beam-delay: 0s;
+
+  position: relative;
+  display: block;
+  min-width: 0;
+  border-radius: var(--willa-border-beam-radius);
+  isolation: isolate;
+}
+
+.willa-border-beam__effect {
+  position: absolute;
+  z-index: 1;
+  inset: calc(var(--willa-border-beam-outset) * -1);
+  display: none;
+  overflow: hidden;
+  padding: var(--willa-border-beam-width);
+  border-radius: calc(
+    var(--willa-border-beam-radius) + var(--willa-border-beam-outset)
+  );
+  pointer-events: none;
+}
+
+.willa-border-beam > :not(.willa-border-beam__effect) {
+  position: relative;
+  z-index: 0;
+}
+
+@keyframes willa-border-beam-travel {
+  from {
+    offset-distance: 0%;
+  }
+
+  to {
+    offset-distance: 100%;
+  }
+}
+
+@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
+  @supports (offset-path: rect(0 auto auto 0 round 1px)) {
+    .willa-border-beam__effect {
+      display: block;
+      -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      -webkit-mask-composite: xor;
+      mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+      mask-composite: exclude;
+    }
+
+    .willa-border-beam__effect::before {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100px;
+      aspect-ratio: 1 / 1;
+      animation: willa-border-beam-travel var(--willa-border-beam-duration)
+        linear infinite;
+      animation-delay: var(--willa-border-beam-delay);
+      background-image: var(--willa-border-beam-gradient);
+      content: "";
+      offset-anchor: 90% 50%;
+      offset-distance: 0%;
+      offset-path: rect(0 auto auto 0 round 200px);
+      offset-rotate: auto;
+      opacity: 0.95;
+      will-change: offset-distance;
+    }
+  }
+}
+
+.willa-border-beam--disabled .willa-border-beam__effect {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .willa-border-beam__effect::before {
+    display: none;
+  }
+}

package/packages/willa-layout/src/components/BorderBeam/index.tsx

@@ -0,0 +1,161 @@
+import type {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  ElementType,
+  ReactNode,
+} from "react";
+import classNames from "classnames";
+
+export type BorderBeamColorStop = {
+  color: string;
+  percent: number;
+};
+
+export type BorderBeamColor = string | Array<BorderBeamColorStop>;
+
+export type BorderBeamProps = {
+  as?: ElementType;
+  children?: ReactNode;
+  color?: BorderBeamColor;
+  width?: number | string;
+  outset?: number | string;
+  radius?: number | string;
+  duration?: number | string;
+  delay?: number | string;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+} & Omit<ComponentPropsWithoutRef<"div">, "children" | "color">;
+
+type BorderBeamStyle = CSSProperties & {
+  "--willa-border-beam-width"?: string;
+  "--willa-border-beam-outset"?: string;
+  "--willa-border-beam-radius"?: string;
+  "--willa-border-beam-duration"?: string;
+  "--willa-border-beam-delay"?: string;
+  "--willa-border-beam-gradient"?: string;
+};
+
+const MAX_BEAM_COLOR_STOP_PERCENT = 70;
+
+export function BorderBeam(props: BorderBeamProps) {
+  const {
+    as: Component = "div",
+    children,
+    color,
+    width,
+    outset,
+    radius,
+    duration,
+    delay,
+    disabled = false,
+    className,
+    style,
+    ...borderBeamProps
+  } = props;
+  const borderBeamStyle = createBorderBeamStyle({
+    color,
+    delay,
+    duration,
+    outset,
+    radius,
+    style,
+    width,
+  });
+
+  return (
+    <Component
+      {...borderBeamProps}
+      className={classNames(
+        "willa-border-beam",
+        disabled && "willa-border-beam--disabled",
+        className,
+      )}
+      style={borderBeamStyle}
+    >
+      <span className="willa-border-beam__effect" aria-hidden="true" />
+      {children}
+    </Component>
+  );
+}
+
+const createBorderBeamStyle = (options: {
+  color?: BorderBeamColor;
+  width?: number | string;
+  outset?: number | string;
+  radius?: number | string;
+  duration?: number | string;
+  delay?: number | string;
+  style?: CSSProperties;
+}) => {
+  const nextStyle: BorderBeamStyle = {
+    ...options.style,
+  };
+  const gradient = createBorderBeamGradient(options.color);
+
+  if (options.width !== undefined) {
+    nextStyle["--willa-border-beam-width"] = toCssLength(options.width);
+  }
+  if (options.outset !== undefined) {
+    nextStyle["--willa-border-beam-outset"] = toCssLength(options.outset);
+  }
+  if (options.radius !== undefined) {
+    nextStyle["--willa-border-beam-radius"] = toCssLength(options.radius);
+  }
+  if (options.duration !== undefined) {
+    nextStyle["--willa-border-beam-duration"] = toCssDuration(options.duration);
+  }
+  if (options.delay !== undefined) {
+    nextStyle["--willa-border-beam-delay"] = toCssDuration(options.delay);
+  }
+  if (gradient) {
+    nextStyle["--willa-border-beam-gradient"] = gradient;
+  }
+  return nextStyle;
+};
+
+const createBorderBeamGradient = (color?: BorderBeamColor) => {
+  if (!color) return null;
+
+  const stops =
+    typeof color === "string" ? [{ color, percent: 0 }] : color.slice();
+  const gradientStops = fillGradientEnd(stops);
+
+  if (gradientStops.length === 0) return null;
+
+  const normalizedStops = gradientStops
+    .sort((current, next) => current.percent - next.percent)
+    .map((item) => {
+      const percent =
+        (clampPercent(item.percent) / 100) * MAX_BEAM_COLOR_STOP_PERCENT;
+      return `${item.color} ${formatPercent(percent)}`;
+    });
+
+  if (normalizedStops.length === 0) return null;
+  return `linear-gradient(to left, ${normalizedStops.join(", ")}, transparent)`;
+};
+
+const fillGradientEnd = (stops: Array<BorderBeamColorStop>) => {
+  if (stops.length === 0) return stops;
+  const lastStop = stops[stops.length - 1];
+  if (lastStop.percent === 100) return stops;
+  return [...stops, { ...lastStop, percent: 100 }];
+};
+
+const clampPercent = (value: number) => {
+  return Math.min(Math.max(value, 0), 100);
+};
+
+const toCssLength = (value: number | string) => {
+  return typeof value === "number" ? `${value}px` : value;
+};
+
+const toCssDuration = (value: number | string) => {
+  return typeof value === "number" ? `${value}s` : value;
+};
+
+const formatPercent = (value: number) => {
+  return `${Number(value.toFixed(2))}%`;
+};
+
+BorderBeam.displayName = "BorderBeam";

package/packages/willa-layout/src/components/Card/index.css

@@ -0,0 +1,179 @@
+.willa-card {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  color: var(--willa-text);
+  font-family: var(--willa-body-font);
+  text-decoration: none;
+  text-shadow: none;
+  transition:
+    border-color 180ms ease,
+    background-color 180ms ease,
+    box-shadow 180ms ease,
+    transform 180ms ease;
+}
+
+.willa-card--surface {
+  border-color: var(--willa-card-border);
+  background: var(--willa-card-bg);
+  box-shadow: var(--willa-card-shadow);
+}
+
+.willa-card--soft {
+  border-color: transparent;
+  background: var(--willa-card-soft-bg);
+  box-shadow: none;
+}
+
+.willa-card--outline {
+  border-color: var(--willa-card-border);
+  background: transparent;
+  box-shadow: none;
+}
+
+.willa-card--interactive {
+  cursor: pointer;
+}
+
+.willa-card--interactive:hover {
+  border-color: var(--willa-card-border-hover);
+  background: var(--willa-card-bg-hover);
+  box-shadow: var(--willa-card-shadow-hover);
+  color: var(--willa-text);
+  transform: translateY(-1px);
+}
+
+.willa-card:focus-visible {
+  outline: 2px solid var(--willa-focus-ring);
+  outline-offset: 2px;
+}
+
+.willa-card--sm {
+  gap: 0.76rem;
+  padding: 0.86rem;
+}
+
+.willa-card--md {
+  gap: 0.92rem;
+  padding: 1rem;
+}
+
+.willa-card--lg {
+  gap: 1.08rem;
+  padding: 1.16rem;
+}
+
+.willa-card-media {
+  overflow: hidden;
+  border-radius: 6px;
+  background: var(--willa-card-media-bg);
+}
+
+.willa-card-media > * {
+  display: block;
+  width: 100%;
+}
+
+.willa-card-content {
+  display: grid;
+  min-width: 0;
+  gap: 0.48rem;
+}
+
+.willa-card-eyebrow {
+  color: var(--willa-card-eyebrow);
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1.3;
+}
+
+.willa-card-title {
+  margin: 0;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1rem;
+  font-weight: 650;
+  line-height: 1.42;
+}
+
+.willa-card-description {
+  margin: 0;
+  color: var(--willa-text-soft);
+  font-size: 0.92rem;
+  line-height: 1.68;
+}
+
+.willa-card-body {
+  color: var(--willa-text-soft);
+  font-size: 0.92rem;
+  line-height: 1.72;
+}
+
+.willa-card-body > :first-child {
+  margin-top: 0;
+}
+
+.willa-card-body > :last-child {
+  margin-bottom: 0;
+}
+
+.willa-card-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  min-width: 0;
+  padding-top: 0.82rem;
+  border-top: 1px solid var(--willa-card-divider);
+  color: var(--willa-text-faint);
+  font-size: 0.84rem;
+  line-height: 1.45;
+}
+
+.willa-card-footer-content {
+  min-width: 0;
+}
+
+.willa-card-actions {
+  display: inline-flex;
+  flex: none;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+@media (hover: none) {
+  .willa-card--interactive:hover {
+    transform: none;
+  }
+}
+
+@media (max-width: 767px) {
+  .willa-card--sm {
+    padding: 0.78rem;
+  }
+
+  .willa-card--md {
+    padding: 0.9rem;
+  }
+
+  .willa-card--lg {
+    gap: 0.96rem;
+    padding: 1rem;
+  }
+
+  .willa-card-footer {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .willa-card-actions {
+    justify-content: flex-start;
+  }
+}