@fibery/ui-kit 4.2.0 → 5.0.0

package/src/fibermoji-placeholder.tsx

@@ -4,51 +4,20 @@ import type {FC} from "react";
 import {useEffect, useRef} from "react";
 
 import {abbreviateName} from "./abbreviate-name";
-import {textClasses} from "./design-system";
+import {cyrb53, getAvatarColors, getAvatarNeutralColors} from "./avatar-colors";
+import {opacity, textClasses} from "./design-system";
 import {useFeatures} from "./features";
-import Lock from "./icons/react/lock";
+import LockFilled from "./icons/react/lock-filled";
 import {useTheme} from "./theme-provider";
 
-const cyrb53 = (str: string, seed = 0) => {
-  let h1 = 0xdeadbeef ^ seed;
-  let h2 = 0x41c6ce57 ^ seed;
-  for (let i = 0, ch; i < str.length; i++) {
-    ch = str.charCodeAt(i);
-    h1 = Math.imul(h1 ^ ch, 2654435761);
-    h2 = Math.imul(h2 ^ ch, 1597334677);
-  }
-  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
-  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
-  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
-  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
-  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
-};
-
-// [fg, bg]
-const colors = [
-  ["#8B0000", "linear-gradient(180deg, #FEC8CD 0%, #FD9EA6 100%)"],
-  ["#922D00", "linear-gradient(180deg, #FFDBC3 0%, #FFBF94 100%)"],
-  ["#6D4702", "linear-gradient(180deg, #FFEEB8 0%, #FFE180 100%)"],
-  ["#195C08", "linear-gradient(180deg, #BDF2BD 0%, #89E789 100%)"],
-  ["#025849", "linear-gradient(180deg, #BFF3E9 0%, #7FE8D4 100%)"],
-  ["#003A99", "linear-gradient(180deg, #B8DDFF 0%, #A0D0FF 100%)"],
-  ["#3B158C", "linear-gradient(180deg, #D9CBFF 0%, #CCB9FF 100%)"],
-  ["#8A1245", "linear-gradient(180deg, #FFD1E5 0%, #FFAED0 100%)"],
-];
-
 const mouths = [
   `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 16" fill="none"><path d="M28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572C30.9368 9.59547 29.584 11.1761 27.7682 12.4853C24.6471 14.7357 20.4139 16 16 16C11.5861 16 7.3529 14.7357 4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L28.4821 4Z" fill="currentColor"/></svg>`,
   `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><ellipse cx="16" cy="10" rx="8" ry="6" fill="currentColor"/></svg>`,
   `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" viewBox="0 0 32 16" fill="none"><g clip-path="url(#clip0_31_1134)"><path d="M4.23177 12.4853C2.41601 11.1761 1.06315 9.59547 0.249133 7.87572C-0.702621 5.86498 1.22002 4 3.51791 4L7 4C7.55229 4 8 4.44772 8 5V13.0522C8 13.7579 7.28869 14.2398 6.6548 13.9296C5.79179 13.5074 4.97984 13.0247 4.23177 12.4853Z" fill="currentColor"/><path d="M31.7509 7.87572C30.9369 9.59547 29.584 11.1761 27.7682 12.4853C27.0202 13.0247 26.2082 13.5074 25.3452 13.9296C24.7113 14.2398 24 13.7579 24 13.0522L24 5C24 4.44772 24.4477 4 25 4L28.4821 4C30.78 4 32.7026 5.86498 31.7509 7.87572Z" fill="currentColor"/><path d="M16 16C14.564 16 13.1472 15.8662 11.7816 15.6082C11.3227 15.5215 11 15.1143 11 14.6473V5C11 4.44772 11.4477 4 12 4L20 4C20.5523 4 21 4.44772 21 5V14.6473C21 15.1143 20.6773 15.5215 20.2184 15.6082C18.8528 15.8662 17.436 16 16 16Z" fill="currentColor"/></g><defs><clipPath id="clip0_31_1134"><rect width="32" height="16" fill="white"/></clipPath></defs></svg>`,
 ];
 
-export const getColors = memoize((v: string) => {
-  const idx = Math.floor((cyrb53(v) / Math.pow(2, 53)) * colors.length);
-  return colors[idx];
-});
-
 const getMouth = memoize((v: string) => {
-  const salted = v + "::mouth"; // made mouths independent of colors
+  const salted = v + "::mouth";
   const idx = Math.floor((cyrb53(salted) / Math.pow(2, 53)) * mouths.length);
   return mouths[idx];
 });
@@ -59,7 +28,6 @@ interface FibermojiPlaceholderProps {
   title?: string;
   radius?: number;
   hasAccess?: boolean;
-  backgroundColor?: string;
 }
 
 export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
@@ -71,26 +39,25 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
 }) => {
   const eyes = useRef<HTMLDivElement>(null);
   const theme = useTheme();
-  const dn = theme.fns.deneutralize;
-  const [rawFg, rawBg] = getColors(seed);
-  const fg = dn(rawFg);
-  const bg = rawBg.replace(/#[0-9A-Fa-f]{6}/g, (hex) => dn(hex));
+  const {fg, bg} = hasAccess ? getAvatarColors(seed, theme) : getAvatarNeutralColors(theme);
   const mouth = getMouth(seed);
   const letters = abbreviateName(title).split("");
 
   const features = useFeatures<{enableAnimatedAvatarPlaceholders: boolean}>();
 
   useEffect(() => {
+    if (!features.enableAnimatedAvatarPlaceholders) {
+      return;
+    }
+    if (window.matchMedia(`(prefers-reduced-motion: reduce)`).matches) {
+      return;
+    }
+
     const listener = (event: MouseEvent) => {
       if (!eyes.current) {
         return;
       }
 
-      const reduceMotion = window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
-      if (reduceMotion || !features.enableAnimatedAvatarPlaceholders) {
-        return;
-      }
-
       const rect = eyes.current.getBoundingClientRect();
       const ourX = rect.left + rect.width / 2;
       const ourY = rect.top + rect.height / 2;
@@ -130,10 +97,10 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
             position: absolute;
             line-height: 0;
             inset: 0;
-            opacity: 0.6;
+            opacity: ${opacity.opacity60};
           `}
         >
-          <Lock iconSize={size * 0.6} containerSize={size} color={null} />
+          <LockFilled iconSize={Math.round(size * 0.6)} containerSize={size} color={null} />
         </div>
       </div>
     );
@@ -158,16 +125,16 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
           textClasses.regular,
           css`
             text-transform: uppercase;
-            font-weight: 500;
+            font-weight: 400;
             display: flex;
             align-items: center;
             justify-content: center;
           `
         )}
         style={{
-          gap: size * 0.1,
-          lineHeight: `${size * 0.9}px`,
-          fontSize: size * 0.5,
+          gap: Math.round(size * 0.08),
+          lineHeight: `${Math.round(size * 0.9)}px`,
+          fontSize: Math.round(size * 0.5),
           color: fg,
         }}
       >
@@ -179,7 +146,7 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
         className={css`
           position: absolute;
           line-height: 0;
-          opacity: 0.3;
+          opacity: ${opacity.opacity45};
           & > svg {
             display: block;
             width: 100%;
@@ -187,10 +154,10 @@ export const FibermojiPlaceholder: FC<FibermojiPlaceholderProps> = ({
           }
         `}
         style={{
-          width: size * 0.4,
-          height: size * 0.2,
-          left: size * 0.3,
-          bottom: size * 0.1,
+          width: Math.round(size * 0.4),
+          height: Math.round(size * 0.2),
+          left: Math.round(size * 0.3),
+          bottom: Math.round(size * 0.1),
         }}
         dangerouslySetInnerHTML={{__html: mouth}}
       />

package/src/fibery-brand-logo.tsx

@@ -0,0 +1,82 @@
+import {themeVars} from "./design-system";
+
+/**
+ * The current Fibery brand logo: full-color cube + wordmark. Unlike {@link FullFiberyLogo} (a flat,
+ * single-color mark), this matches the modern brand lockup used in shared/embedded surfaces such as
+ * the form footer. The cube keeps its brand colors; the wordmark adapts to the theme text color.
+ */
+export function FiberyBrandLogo({
+  height = 24,
+  wordmarkColor = themeVars.textColor,
+}: {
+  height?: number;
+  wordmarkColor?: string;
+}) {
+  return (
+    <svg height={height} viewBox="0 0 86 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#fibery-brand-logo-cube)">
+        <path
+          d="M13.5444 18.5842L14.5347 22.9114C14.9544 22.4694 15.2624 21.9191 15.4043 21.2936L15.7786 19.6577L13.5414 18.5842H13.5444Z"
+          fill="black"
+        />
+        <path
+          d="M18.819 6.41424L19.1934 4.78136C19.3353 4.15588 19.299 3.52738 19.1149 2.95001L16.3203 6.41725H18.819V6.41424Z"
+          fill="#2C4B52"
+        />
+        <path
+          d="M4.8851 2.94397C4.70093 3.51833 4.66168 4.14382 4.80358 4.7663L5.18099 6.4112H7.66662L4.8851 2.94397Z"
+          fill="#010101"
+        />
+        <path
+          d="M13.5444 18.5841L11.9955 17.8414L10.4466 18.5841L8.20935 19.6577L8.58374 21.2936C8.72564 21.9191 9.03662 22.4694 9.4563 22.9114C10.0994 23.588 11.0052 24.003 11.9955 24.003C12.9828 24.003 13.8916 23.588 14.5347 22.9114L13.5444 18.5841Z"
+          fill="#2B4A51"
+        />
+        <path
+          d="M18.2634 14.8372L22.276 16.7618C22.1914 16.1604 21.9499 15.577 21.5483 15.0748L20.4976 13.7637L18.2604 14.8372H18.2634Z"
+          fill="#2C4B52"
+        />
+        <path
+          d="M11.9985 3.14248L10.9478 1.82836C10.5462 1.32918 10.0299 0.965314 9.45929 0.7488C8.58371 0.415007 7.58736 0.436057 6.69668 0.863071C5.806 1.29009 5.16894 2.05691 4.88513 2.94401L7.66284 6.41125H9.38079L12.0015 3.14248H11.9985Z"
+          fill="#2C4B52"
+        />
+        <path
+          d="M5.04214 11.8301L0.585938 11.8125C0.924093 12.3177 1.40093 12.7563 1.98063 13.036L3.49629 13.7637L5.04516 11.8331L5.04214 11.8301Z"
+          fill="#2F6E7D"
+        />
+        <path
+          d="M22.2791 16.7618L18.2665 14.8372L11.9985 17.8414L15.7817 19.6577L17.3003 20.3854C17.88 20.6651 18.505 20.7673 19.1119 20.7162C20.0448 20.638 20.9355 20.1899 21.5514 19.4201C22.1674 18.6503 22.4089 17.685 22.2791 16.7618Z"
+          fill="#2F6E7D"
+        />
+        <path
+          d="M20.5038 6.41425H18.819H16.3178L11.9985 11.8301L22.2791 6.9014C21.7537 6.59167 21.1469 6.41425 20.5007 6.41425H20.5038Z"
+          fill="#3F8998"
+        />
+        <path
+          d="M5.18101 6.41125H3.49929C2.85619 6.41125 2.2463 6.58868 1.72397 6.8954C0.91783 7.37053 0.310962 8.1584 0.0905564 9.11768C-0.129849 10.077 0.0754602 11.0513 0.594771 11.8271H5.04514L9.3838 6.41125H5.18403H5.18101Z"
+          fill="#3F8998"
+        />
+        <path
+          d="M23.9124 9.12364C23.692 8.16437 23.0851 7.37349 22.279 6.90137L11.9984 11.8301L4.88208 20.7132C5.48895 20.7643 6.11393 20.662 6.69363 20.3824L20.5007 13.7607L22.0193 13.0329C22.599 12.7563 23.07 12.3323 23.4082 11.8271C23.9275 11.0512 24.1298 10.0799 23.9124 9.12064V9.12364Z"
+          fill="#309FB6"
+        />
+        <path
+          d="M17.3003 0.866065C16.4096 0.43905 15.4133 0.421007 14.5377 0.751793C13.967 0.968307 13.4508 1.33217 13.0492 1.83136L11.9985 3.14247L2.44257 15.0748C2.04101 15.577 1.80249 16.1604 1.71493 16.7618C1.58511 17.685 1.82363 18.6503 2.43955 19.4201C3.05548 20.19 3.94616 20.638 4.87911 20.7162L19.1118 2.94701C18.828 2.05689 18.191 1.29308 17.2973 0.866065H17.3003Z"
+          fill="#27AFCA"
+        />
+      </g>
+      <g fill={wordmarkColor}>
+        <path d="M76.4915 22.15V20.008H77.0855C78.3275 20.008 78.5615 19.936 78.8495 19.198L78.9395 18.946L75.3215 9.31598H78.5795L80.4155 15.382L82.2695 9.31598H85.4555L81.6575 19C80.6855 21.466 79.9655 22.15 77.4455 22.15H76.4915Z" />
+        <path d="M68.9304 19V9.31602H71.7924V11.152C72.2424 10.018 73.0524 9.29802 74.4384 9.24402C74.5824 9.24402 74.7444 9.24402 74.8884 9.26202V12.16C74.5644 12.124 74.3484 12.106 74.0784 12.106C72.6564 12.106 71.9004 12.628 71.9004 14.14V19H68.9304Z" />
+        <path d="M62.2537 11.296C61.3537 11.296 60.3457 11.692 60.0397 13.114H64.3057C64.2157 11.962 63.4777 11.296 62.2537 11.296ZM64.4677 15.958H67.2037C66.3397 18.244 64.3237 19.234 62.3797 19.234C59.2297 19.234 57.0697 17.308 57.0697 14.104C57.0697 11.008 59.4277 9.02802 62.2537 9.02802C65.3137 9.02802 67.2577 11.26 67.2577 14.464C67.2577 14.572 67.2577 14.698 67.2397 14.914H60.0217C60.2737 16.408 61.2457 16.93 62.2897 16.93C63.4057 16.93 64.1257 16.534 64.4677 15.958Z" />
+        <path d="M45.7097 19V5.95001H48.6797V10.63C49.3097 9.56801 50.5877 9.10001 51.6497 9.10001C54.1337 9.10001 55.9157 10.99 55.9157 14.158C55.9157 17.326 54.1337 19.234 51.6497 19.234C50.5877 19.234 49.3097 18.766 48.6797 17.704V19H45.7097ZM50.6777 16.93C51.8657 16.93 52.8377 15.958 52.8377 14.158C52.8377 12.358 51.8657 11.404 50.6777 11.404C49.5077 11.404 48.5357 12.16 48.5357 14.158C48.5357 16.156 49.5077 16.93 50.6777 16.93Z" />
+        <path d="M40.5066 19V9.31601H43.4766V19H40.5066ZM40.5066 8.32601V5.95001H43.4766V8.32601H40.5066Z" />
+        <path d="M29.26 19V5.95001H38.872V8.66801H32.338V10.936H38.476V13.654H32.338V19H29.26Z" />
+      </g>
+      <defs>
+        <clipPath id="fibery-brand-logo-cube">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/field-container.tsx

@@ -18,7 +18,7 @@ const labelStyle = css`
 `;
 
 type Props = {
-  label?: string;
+  label?: string | JSX.Element;
   collapsible?: boolean;
   collapsed?: boolean;
   collapsedDefault?: boolean;
@@ -84,7 +84,7 @@ const fullscreenWithOptionsButton = css`
 
 export const FieldFullscreenSupportContainer: FC<
   PropsWithChildren<{
-    label?: string;
+    label?: string | JSX.Element;
     description?: ReactNode;
     withOptions?: boolean;
     disabled?: boolean;

package/src/field-type-icon.tsx

@@ -1,12 +1,13 @@
 import AppIcon from "./icons/react/app";
-import DatabaseStroke from "./icons/react/database-stroke";
+import Avatar from "./icons/react/avatar";
+import Comments from "./icons/react/comments";
+import DatabaseOutline from "./icons/react/database-outline";
 import Delete from "./icons/react/delete";
-import ExtensionAssignments from "./icons/react/extension-assignments";
-import ExtensionAvatar from "./icons/react/extension-avatar";
-import ExtensionComments from "./icons/react/extension-comments";
-import ExtensionFiles from "./icons/react/extension-files";
-import ExtensionReferences from "./icons/react/extension-references";
-import ExtensionWorkflow from "./icons/react/extension-workflow";
+import Files from "./icons/react/files";
+import Link from "./icons/react/link";
+import People from "./icons/react/people";
+import PeopleRole from "./icons/react/people-role";
+import References from "./icons/react/references";
 import TypeButton from "./icons/react/type-button";
 import TypeCheckbox from "./icons/react/type-checkbox";
 import TypeDate from "./icons/react/type-date";
@@ -24,14 +25,13 @@ import TypeRelation from "./icons/react/type-relation";
 import TypeRichText from "./icons/react/type-rich-text";
 import TypeSingleSelect from "./icons/react/type-single-select";
 import TypeText from "./icons/react/type-text";
-import TypeUrl from "./icons/react/type-url";
-import UserRole from "./icons/react/user-role";
 import ViewCanvas from "./icons/react/view-canvas";
 import ViewDocument from "./icons/react/view-document";
+import Workflow from "./icons/react/workflow";
 import type {IconBaseProps} from "./icons/types";
 
 const iconNameToComponent: Record<string, React.FC<IconBaseProps>> = {
-  ":icon/type/database": DatabaseStroke,
+  ":icon/type/database": DatabaseOutline,
   ":icon/type/text": TypeText,
   ":icon/type/button": TypeButton,
   ":icon/type/rich-text": TypeRichText,
@@ -40,7 +40,7 @@ const iconNameToComponent: Record<string, React.FC<IconBaseProps>> = {
   ":icon/type/multi-select": TypeMultiSelect,
   ":icon/type/date": TypeDate,
   ":icon/type/checkbox": TypeCheckbox,
-  ":icon/type/url": TypeUrl,
+  ":icon/type/url": Link,
   ":icon/type/email": TypeEmail,
   ":icon/type/phone": TypePhone,
   ":icon/type/emoji": TypeEmoji,
@@ -48,19 +48,19 @@ const iconNameToComponent: Record<string, React.FC<IconBaseProps>> = {
   ":icon/type/relation": TypeRelation,
   ":icon/type/lookup": TypeLookup,
   ":icon/type/formula": TypeFormula,
-  ":icon/extension/references": ExtensionReferences,
-  ":icon/extension/assignments": ExtensionAssignments,
-  ":icon/extension/avatar": ExtensionAvatar,
+  ":icon/extension/references": References,
+  ":icon/extension/assignments": People,
+  ":icon/extension/avatar": Avatar,
   ":icon/extension/icon": TypeEmoji,
-  ":icon/extension/comments": ExtensionComments,
+  ":icon/extension/comments": Comments,
   ":icon/view-document": ViewDocument,
-  ":icon/extension/files": ExtensionFiles,
+  ":icon/extension/files": Files,
   ":icon/view-canvas": ViewCanvas,
-  ":icon/extension/workflow": ExtensionWorkflow,
+  ":icon/extension/workflow": Workflow,
   ":icon/type/money": TypeMoney,
   ":icon/type/percent": TypePercent,
   ":icon/type/deleted-field": Delete,
-  ":icon/type/user-role": UserRole,
+  ":icon/type/user-role": PeopleRole,
 };
 
 function getFieldIconComponent(iconName?: string) {

package/src/file-item/file-menu-items.tsx

@@ -5,8 +5,8 @@ import {copyUrlToClipboard} from "../copy-to-clipboard";
 import Delete from "../icons/react/delete";
 import FileDownload from "../icons/react/file-download";
 import Link from "../icons/react/link";
+import RicheditorOpenLink from "../icons/react/open-link";
 import Pencil from "../icons/react/pencil";
-import RicheditorOpenLink from "../icons/react/richeditor-open-link";
 import Share from "../icons/react/share";
 import {useToast} from "../toast/toast-provider";
 import {isPhoneApp} from "../use-is-phone";

package/src/file-item/file-preview-actions.tsx

@@ -5,7 +5,7 @@ import {downloadFile} from "../download-file";
 import {asError} from "../errors";
 import Delete from "../icons/react/delete";
 import FileDownload from "../icons/react/file-download";
-import RicheditorOpenLink from "../icons/react/richeditor-open-link";
+import RicheditorOpenLink from "../icons/react/open-link";
 import Share from "../icons/react/share";
 import {useToast} from "../toast/toast-provider";
 import {isPhoneApp} from "../use-is-phone";

package/src/format-date-from-now.ts

@@ -7,17 +7,17 @@ moment.locale("en-for-comments", {
     future: "in %s",
     past: "%s ago",
     s: "seconds",
-    ss: "%ss",
+    ss: "%s seconds",
     m: "a minute",
     mm: "%d min",
     h: "an hour",
-    hh: "%dh",
+    hh: "%d hours",
     d: "a day",
-    dd: "%dd",
+    dd: "%d days",
     M: "a month",
-    MM: "%dM",
+    MM: "%d months",
     y: "a year",
-    yy: "%dY",
+    yy: "%d years",
   },
 });
 // so revert back to the original one
@@ -31,3 +31,8 @@ export function formatDateFromNow(date?: string, options: {format?: string} = {}
     relative: momentDate.fromNow(),
   };
 }
+export function formatDate(date?: string, format?: string) {
+  const momentDate = moment(date);
+  momentDate.locale("en-for-comments");
+  return momentDate.format(format ?? "MMMM Do YYYY, h:mm:ss a");
+}

package/src/header-layout.tsx

@@ -10,11 +10,16 @@ const containerStyle = css`
   align-items: center;
   border-bottom: ${themeVars.borderSolidSeparator};
   ${mobileRootSelector} & {
-    padding: ${space.s12}px;
     min-height: ${space.s60}px;
   }
 `;
 
+const containerWithDescriptionStyle = css`
+  flex-direction: column;
+  align-items: stretch;
+  gap: ${space.s6}px;
+`;
+
 const topGridCompactStyle = css`
   width: 100%;
   display: flex;
@@ -22,32 +27,44 @@ const topGridCompactStyle = css`
   justify-content: space-between;
 `;
 
-export function HeaderLayout({actions, children}: {actions?: ReactNode; children: ReactNode}) {
+const titleStyle = css`
+  min-width: 200px;
+  position: relative;
+  ${mobileRootSelector} & {
+    ${textStyles.heading3}
+  }
+`;
+
+const actionsStyle = css`
+  flex-shrink: 0;
+`;
+
+const descriptionStyle = css`
+  padding-left: ${space.s4}px;
+  ${textStyles.small}
+  color: ${themeVars.colorTextSecondary};
+  ${mobileRootSelector} & {
+    ${textStyles.regular}
+    color: ${themeVars.colorTextSecondary};
+  }
+`;
+
+export function HeaderLayout({
+  actions,
+  description,
+  children,
+}: {
+  actions?: ReactNode;
+  description?: ReactNode;
+  children: ReactNode;
+}) {
   return (
-    <div className={containerStyle}>
+    <div className={cx(containerStyle, description && containerWithDescriptionStyle)}>
       <div className={cx(textClasses.regular, topGridCompactStyle)}>
-        <div
-          className={cx(
-            textClasses.heading4,
-            css`
-              min-width: 200px;
-              position: relative;
-              ${mobileRootSelector} & {
-                ${textStyles.heading3}
-              }
-            `
-          )}
-        >
-          {children}
-        </div>
-        <div
-          className={css`
-            flex-shrink: 0;
-          `}
-        >
-          {actions}
-        </div>
+        <div className={cx(textClasses.heading4, titleStyle)}>{children}</div>
+        <div className={actionsStyle}>{actions}</div>
       </div>
+      {description && <div className={descriptionStyle}>{description}</div>}
     </div>
   );
 }

package/src/highlight-colors.test.ts

@@ -31,7 +31,7 @@ const highlightWithBgLc = (Lc: number) => ({
 // Tolerance composes two Newton residuals (bg-against-surface and
 // fgOnBg-against-bg via `colorFromLcCompensated`); 1.5 Lc holds for every
 // hue in both modes. Tightening it requires stacking another Newton step in
-// `solveNearIdentity`, which costs an apcach eval per call.
+// `solveNearIdentity`, which costs an colorFromLc eval per call.
 describe.each([
   [false, 1.5, 1.5],
   [true, 1.5, 1.5],

package/src/highlight-colors.ts

@@ -1,4 +1,5 @@
 import {colorFromLcCompensated} from "./apca";
+import {colorFromUnsafe, oklchFrom} from "./color-utils";
 import {extendDef, mapDef} from "./design-system/def";
 import type {Def, HighlightDefs, HighlightHueName, HighlightHueNameCap, ModeDef} from "./design-system/types";
 
@@ -35,6 +36,32 @@ export const highlightHueNames: HighlightHueName[] = [
   "grey",
 ];
 
+type HighlightSide = 0 | 1;
+
+export function highlightColorsFromColor(
+  {bg, fg}: Pick<HighlightDefs, "bg" | "fg">,
+  color: string,
+  surface: string,
+  deneutralize: (_: string) => string,
+  side: HighlightSide,
+  channels?: Partial<{c: number; h: number}>
+) {
+  const parsed = oklchFrom(colorFromUnsafe(color));
+  const c = channels?.c ?? parsed.c;
+  const h = channels?.h ?? parsed.h ?? 0;
+  const bgDef = bg[side];
+  const fgDef = fg[side];
+  const bgColor = colorFromLcCompensated(surface, bgDef.Lc, c, h, deneutralize, bgDef.c);
+  const fgColor = colorFromLcCompensated(surface, fgDef.Lc, c, h, deneutralize);
+  const fgOnBgColor = colorFromLcCompensated(bgColor, fgDef.Lc, c, h, deneutralize);
+
+  return {
+    bg: bgColor,
+    fg: fgColor,
+    fgOnBg: fgOnBgColor,
+  };
+}
+
 export function highlightColors(
   {bg, fg, hues, overrides}: HighlightDefs,
   surface: Def,

package/src/icons/ast/appearance-auto.ts

@@ -7,6 +7,6 @@
 
 import type {IconDefinition} from "../types";
 
-const AppearanceAuto: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.66 2.66a.66.66 0 1 0-1.32 0v1.468a.66.66 0 0 0 1.32 0V2.661ZM5.278 4.344a.66.66 0 0 0-.934.934l1.038 1.038a.66.66 0 0 0 .934-.934L5.277 4.343Zm10.38.934a.66.66 0 0 0-.934-.934l-1.038 1.038a.66.66 0 0 0 .934.934l1.038-1.038Zm-4.26 1.358A3.597 3.597 0 0 0 6.495 9.34H2.661a.66.66 0 1 0 0 1.322h14.467a.66.66 0 0 0 0-1.322h-3.55a3.593 3.593 0 0 0-2.18-2.704Zm.827 2.704a2.26 2.26 0 0 0-.58-.984 2.276 2.276 0 0 0-3.796.984h4.376ZM4 13a.66.66 0 0 1 .66-.66h10.468a.66.66 0 1 1 0 1.32H4.661A.66.66 0 0 1 4 13Zm2 3a.66.66 0 0 1 .66-.66h6.468a.66.66 0 1 1 0 1.32H6.661A.66.66 0 0 1 6 16Z"},"children":[]}],"metadata":""}]},"name":"appearance-auto"};
+const AppearanceAuto: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M15.75 2A2.25 2.25 0 0 1 18 4.25v8.25a2.25 2.25 0 0 1-2.25 2.25h-5v1.75h2.75a.75.75 0 0 1 0 1.5h-7a.75.75 0 0 1 0-1.5h2.75v-1.75h-5A2.25 2.25 0 0 1 2 12.5V4.25A2.25 2.25 0 0 1 4.25 2h11.5ZM4.25 3.5a.75.75 0 0 0-.75.75v8.25c0 .414.336.75.75.75h11.5a.75.75 0 0 0 .75-.75V4.25a.75.75 0 0 0-.75-.75H4.25ZM14.5 5c.282 0 .5 0 .494.236.005.264-.076.32-.212.412l-9.027 6.177c-.166.114-.381.2-.545.082A.5.5 0 0 1 5 11.5v-6a.5.5 0 0 1 .5-.5h9Z"},"children":[]}],"metadata":""}]},"name":"appearance-auto"};
 
 export default AppearanceAuto;

package/src/icons/ast/architect.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/architect.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const Architect: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20},"children":[{"type":"element","tagName":"path","properties":{"d":"M5 16.027 5.221 18l1.435-1.369L9.11 9.876a3.465 3.465 0 0 1-1.568-.872L5 16.027Zm7.45-7.023a3.51 3.51 0 0 1-1.569.872l2.454 6.755L14.77 18l.23-1.973-2.55-7.023Zm.15-2.026a2.665 2.665 0 0 0-1.719-3.04v-1.05A.89.89 0 0 0 9.996 2a.89.89 0 0 0-.886.889v1.049a2.675 2.675 0 0 0-1.772 2.506 2.661 2.661 0 0 0 3.154 2.623 2.674 2.674 0 0 0 2.108-2.09Zm-2.604.355a.89.89 0 0 1 0-1.777.89.89 0 0 1 0 1.777Z"},"children":[]}],"metadata":""}]},"name":"architect"};
+
+export default Architect;

package/src/icons/ast/arrow-back.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/arrow-back.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const ArrowBack: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M7.47 5.22a.75.75 0 0 1 1.06 1.06L5.56 9.25h10.69a.75.75 0 0 1 0 1.5H5.56l2.97 2.97a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.748.748 0 0 1 0-1.06l4.25-4.25Z"},"children":[]}],"metadata":""}]},"name":"arrow-back"};
+
+export default ArrowBack;

package/src/icons/ast/arrow-down.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/arrow-down.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const ArrowDown: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5.434 7.834a.8.8 0 0 1 1.132 0L10 11.27l3.434-3.435a.8.8 0 0 1 1.132 1.132l-4 4a.8.8 0 0 1-1.132 0l-4-4a.8.8 0 0 1 0-1.132Z"},"children":[]}],"metadata":""}]},"name":"arrow-down"};
+
+export default ArrowDown;

package/src/icons/ast/{send-arrow.ts → arrow-send.ts}

@@ -1,12 +1,12 @@
 /**
  * This file was automatically generated. Do not edit manually.
  * 
- * @see import("../svg/send-arrow.svg")
+ * @see import("../svg/arrow-send.svg")
  * @see import("../../../scripts/generate-icons.mjs")
  */
 
 import type {IconDefinition} from "../types";
 
-const SendArrow: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.707 3.293a1 1 0 0 0-1.415 0L4.57 8.015A1 1 0 1 0 5.984 9.43l3.014-3.013V16a1 1 0 1 0 2 0V6.413l3.017 3.016a1 1 0 1 0 1.414-1.414l-4.722-4.722Z"},"children":[]}],"metadata":""}]},"name":"send-arrow"};
+const ArrowSend: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M10.707 3.293a1 1 0 0 0-1.415 0L4.57 8.015A1 1 0 1 0 5.984 9.43l3.014-3.013V16a1 1 0 1 0 2 0V6.413l3.017 3.016a1 1 0 1 0 1.414-1.414l-4.722-4.722Z"},"children":[]}],"metadata":""}]},"name":"arrow-send"};
 
-export default SendArrow;
+export default ArrowSend;

package/src/icons/ast/arrow-up.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/arrow-up.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const ArrowUp: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14.566 12.166a.8.8 0 0 1-1.132 0L10 8.73l-3.434 3.435a.8.8 0 1 1-1.132-1.132l4-4a.8.8 0 0 1 1.132 0l4 4a.8.8 0 0 1 0 1.132Z"},"children":[]}],"metadata":""}]},"name":"arrow-up"};
+
+export default ArrowUp;

package/src/icons/ast/avatar.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/avatar.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const Avatar: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"g","properties":{"fillRule":"evenodd","clipRule":"evenodd"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.904 8.585a3.071 3.071 0 1 1 6.143 0 3.071 3.071 0 0 1-6.143 0Zm3.072-1.57a1.571 1.571 0 1 0 0 3.141 1.571 1.571 0 0 0 0-3.142Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M5.555 3.348a8 8 0 1 1 8.89 13.304 8 8 0 0 1-8.89-13.304Zm.89 11.973a6.4 6.4 0 0 0 7.338-.159 1.571 1.571 0 0 0-1.486-1.06H7.654a1.571 1.571 0 0 0-1.475 1.032c.086.064.175.127.265.187Zm-1.4-1.27A6.402 6.402 0 0 1 8.752 3.724a6.4 6.4 0 0 1 6.175 10.363 3.07 3.07 0 0 0-2.63-1.484H7.655a3.07 3.07 0 0 0-2.608 1.45Z"},"children":[]}]}],"metadata":""}]},"name":"avatar"};
+
+export default Avatar;

package/src/icons/ast/backlog.ts

@@ -0,0 +1,12 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/backlog.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import type {IconDefinition} from "../types";
+
+const Backlog: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M4.84 5.162c.353-.427.53-.64.746-.794a2 2 0 0 1 .634-.299C6.476 4 6.753 4 7.307 4h5.386c.554 0 .83 0 1.087.07a2 2 0 0 1 .634.298c.217.153.393.367.746.794l1.924 2.329c.34.41.509.616.63.846a2.5 2.5 0 0 1 .233.648c.053.254.053.52.053 1.054V12.8c0 1.12 0 1.68-.218 2.108a2 2 0 0 1-.874.874C16.48 16 15.92 16 14.8 16H5.2c-1.12 0-1.68 0-2.108-.218a2 2 0 0 1-.874-.874C2 14.48 2 13.92 2 12.8V9.75c0-.425 0-.639.043-.842a2 2 0 0 1 .186-.518c.097-.184.232-.349.504-.677L4.84 5.162Zm1.228.671c.159-.196.238-.294.336-.364a.9.9 0 0 1 .288-.137c.116-.032.242-.032.494-.032h5.628c.252 0 .378 0 .494.032a.9.9 0 0 1 .288.137c.098.07.178.168.336.364l2.282 2.815.043.052h-4.162c-.423 0-.75.32-.799.706-.02.153-.087.504-.285.8-.172.257-.45.494-1.011.494-.56 0-.839-.237-1.011-.495a1.96 1.96 0 0 1-.285-.799.806.806 0 0 0-.799-.706H3.743l.043-.052 2.282-2.815ZM3.5 10.1v3.12c0 .448 0 .672.087.843a.8.8 0 0 0 .35.35c.17.087.395.087.843.087h10.44c.448 0 .672 0 .843-.087a.8.8 0 0 0 .35-.35c.087-.17.087-.395.087-.843V10.1h-3.922c-.076.264-.2.58-.403.884-.4.597-1.092 1.116-2.175 1.116-1.083 0-1.775-.519-2.175-1.116a3.162 3.162 0 0 1-.403-.884H3.5Z"},"children":[]}],"metadata":""}]},"name":"backlog"};
+
+export default Backlog;