@pstdio/ui 0.0.1

package/src/components/rich-text/theme/rich-text-theme.tsx

@@ -0,0 +1,81 @@
+import type { EditorThemeClasses } from "lexical";
+
+import "./rich-text-theme.css";
+
+const theme: EditorThemeClasses = {
+  code: "rich-text__code",
+  codeHighlight: {
+    atrule: "rich-text__tokenAttr",
+    attr: "rich-text__tokenAttr",
+    boolean: "rich-text__tokenProperty",
+    builtin: "rich-text__tokenSelector",
+    cdata: "rich-text__tokenComment",
+    char: "rich-text__tokenSelector",
+    class: "rich-text__tokenFunction",
+    "class-name": "rich-text__tokenFunction",
+    comment: "rich-text__tokenComment",
+    constant: "rich-text__tokenProperty",
+    deleted: "rich-text__tokenProperty",
+    doctype: "rich-text__tokenComment",
+    entity: "rich-text__tokenOperator",
+    function: "rich-text__tokenFunction",
+    important: "rich-text__tokenVariable",
+    inserted: "rich-text__tokenSelector",
+    keyword: "rich-text__tokenAttr",
+    namespace: "rich-text__tokenVariable",
+    number: "rich-text__tokenProperty",
+    operator: "rich-text__tokenOperator",
+    prolog: "rich-text__tokenComment",
+    property: "rich-text__tokenProperty",
+    punctuation: "rich-text__tokenPunctuation",
+    regex: "rich-text__tokenVariable",
+    selector: "rich-text__tokenSelector",
+    string: "rich-text__tokenSelector",
+    symbol: "rich-text__tokenProperty",
+    tag: "rich-text__tokenProperty",
+    url: "rich-text__tokenOperator",
+    variable: "rich-text__tokenVariable",
+  },
+  embedBlock: {
+    base: "rich-text__embedBlock",
+    focus: "rich-text__embedBlockFocus",
+  },
+  list: {
+    checklist: "rich-text__checklist",
+    listitem: "rich-text__listItem",
+    listitemChecked: "rich-text__listItemChecked",
+    listitemUnchecked: "rich-text__listItemUnchecked",
+    nested: {
+      listitem: "rich-text__nestedListItem",
+    },
+    olDepth: ["rich-text__ol1", "rich-text__ol2", "rich-text__ol3", "rich-text__ol4", "rich-text__ol5"],
+    ol: "rich-text__ol",
+    ul: "rich-text__ul",
+  },
+  heading: {
+    h1: "rich-text__h1",
+    h2: "rich-text__h2",
+    h3: "rich-text__h3",
+  },
+  paragraph: "rich-text__p",
+  text: {
+    underline: "rich-text__textUnderline",
+    italic: "rich-text__textItalic",
+    code: "rich-text__textCode",
+  },
+  link: "rich-text__link",
+  quote: "rich-text__quote",
+  reference: "rich-text__reference",
+  table: "rich-text__table",
+  tableCell: "rich-text__tableCell",
+  tableRow: "rich-text__tableRow",
+  tableCellHeader: "rich-text__tableCellHeader",
+  layoutContainer: "rich-text__layoutContainer",
+  layoutItem: "rich-text__layoutItem",
+  draggableBlockDemo: {
+    row: "rich-text__row",
+    content: "rich-text__content",
+  },
+};
+
+export default theme;

package/src/components/rich-text/types.ts

@@ -0,0 +1,9 @@
+export type ResourceType = "table" | "connector" | "text" | "image" | "pdf" | "markdown" | "csv" | "json" | "code";
+
+export interface Resource {
+  resourceId: string;
+  resourceType: ResourceType;
+  name: string;
+  description?: string;
+  mediaType?: string;
+}

package/src/components/rich-text/utils/inferResourceType.ts

@@ -0,0 +1,17 @@
+import type { ResourceType } from "../types";
+
+export function inferResourceTypeFromMediaType(mediaType: string) {
+  const normalized = mediaType.toLowerCase().trim();
+  if (!normalized) return "text";
+
+  if (normalized.startsWith("image/")) return "image";
+  if (normalized === "application/pdf") return "pdf";
+  if (normalized === "text/markdown") return "markdown";
+  if (normalized === "text/csv" || normalized === "text/tab-separated-values") return "table";
+  if (normalized === "application/json") return "json";
+  if (normalized.startsWith("text/")) return "text";
+  if (normalized.startsWith("application/")) return "text";
+
+  const fallback: ResourceType = "text";
+  return fallback;
+}

package/src/components/rich-text/utils/markdown.ts

@@ -0,0 +1,12 @@
+const FRONTMATTER_PATTERN = /^---\s*\n([\s\S]*?)\n---\s*(?:\n|$)/;
+
+export function splitFrontmatter(content: string) {
+  const match = content.match(FRONTMATTER_PATTERN);
+  if (!match) {
+    return { frontmatter: "", body: content };
+  }
+  return {
+    frontmatter: match[0],
+    body: content.slice(match[0].length),
+  };
+}

package/src/components/rich-text/utils/mediaType.ts

@@ -0,0 +1,31 @@
+const extensionToMediaType: Record<string, string> = {
+  csv: "text/csv",
+  tsv: "text/tab-separated-values",
+  json: "application/json",
+  md: "text/markdown",
+  markdown: "text/markdown",
+  txt: "text/plain",
+  pdf: "application/pdf",
+  png: "image/png",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg",
+  gif: "image/gif",
+  svg: "image/svg+xml",
+  webp: "image/webp",
+  mp4: "video/mp4",
+  mov: "video/quicktime",
+  ts: "text/typescript",
+  tsx: "text/typescript",
+  js: "text/javascript",
+  jsx: "text/javascript",
+  sql: "text/x-sql",
+  yml: "text/yaml",
+  yaml: "text/yaml",
+};
+
+export function mediaTypeFromPath(path: string) {
+  const cleaned = path.split("?")[0]?.split("#")[0] ?? "";
+  const ext = cleaned.split(".").pop()?.toLowerCase();
+  if (!ext) return null;
+  return extensionToMediaType[ext] ?? null;
+}

package/src/components/session-indicator.stories.tsx

@@ -0,0 +1,46 @@
+import { HStack, Text } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { SessionIndicator } from "./session-indicator";
+
+const meta: Meta<typeof SessionIndicator> = {
+  title: "Components/SessionIndicator",
+  component: SessionIndicator,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SessionIndicator>;
+
+export const InProgress: Story = {
+  args: { status: "in_progress" },
+};
+
+export const AwaitingInput: Story = {
+  args: { status: "awaiting_input" },
+};
+
+export const Completed: Story = {
+  args: { status: "completed" },
+};
+
+export const Failed: Story = {
+  args: { status: "failed" },
+};
+
+export const Undefined: Story = {
+  args: {},
+};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <HStack gap="md">
+      {(["in_progress", "awaiting_input", "completed", "failed", undefined] as const).map((status) => (
+        <HStack key={status ?? "undefined"} gap="xs">
+          <SessionIndicator status={status} />
+          <Text textStyle="label/S/regular">{status ?? "undefined"}</Text>
+        </HStack>
+      ))}
+    </HStack>
+  ),
+};

package/src/components/session-indicator.tsx

@@ -0,0 +1,40 @@
+import { Icon } from "@chakra-ui/react";
+import { CircleAlert, CircleCheck, CircleDashed } from "lucide-react";
+import type { ComponentProps } from "react";
+
+export type SessionCompletionStatus = "in_progress" | "awaiting_input" | "completed" | "failed";
+
+export const resolveSessionIndicatorIcon = (status: SessionCompletionStatus | undefined) => {
+  if (status === "completed") return CircleCheck;
+  if (status === "failed") return CircleAlert;
+  return CircleDashed;
+};
+
+export const resolveSessionIndicatorColor = (status: SessionCompletionStatus | undefined) => {
+  if (status === "completed") return "foreground.feedback.success";
+  if (status === "failed") return "foreground.feedback.alert";
+  return "foreground.secondary";
+};
+
+interface SessionIndicatorProps {
+  status?: SessionCompletionStatus;
+  boxSize?: ComponentProps<typeof Icon>["boxSize"];
+  ariaLabel?: string;
+  cursor?: ComponentProps<typeof Icon>["cursor"];
+  onClick?: ComponentProps<typeof Icon>["onClick"];
+}
+
+export const SessionIndicator = (props: SessionIndicatorProps) => {
+  const { status, boxSize = "14px", ariaLabel = "Session status", cursor, onClick } = props;
+
+  return (
+    <Icon
+      as={resolveSessionIndicatorIcon(status)}
+      boxSize={boxSize}
+      color={resolveSessionIndicatorColor(status)}
+      aria-label={ariaLabel}
+      cursor={cursor}
+      onClick={onClick}
+    />
+  );
+};

package/src/components/slider.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { expect } from "storybook/test";
+
+import { Slider } from "./slider";
+
+const meta = {
+  title: "Components/Slider",
+  component: Slider,
+  args: {
+    min: 0,
+    max: 100,
+    defaultValue: [40],
+  },
+  decorators: [
+    (Story: () => ReactNode) => (
+      <div style={{ padding: "24px", width: "320px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SquareTrack: Story = {
+  play: async ({ canvasElement }) => {
+    const track = canvasElement.querySelector('[data-scope="slider"][data-part="track"]');
+
+    await expect(track).not.toBeNull();
+    if (!track) return;
+
+    const borderRadius = getComputedStyle(track).borderRadius;
+    await expect(borderRadius).toBe("0px");
+  },
+};

package/src/components/slider.tsx

@@ -0,0 +1,20 @@
+import { Slider as ChakraSlider } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface SliderProps extends ChakraSlider.RootProps {}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(function Slider(props, ref) {
+  const { children, ...rest } = props;
+
+  return (
+    <ChakraSlider.Root ref={ref} variant="solid" {...rest}>
+      <ChakraSlider.Control>
+        <ChakraSlider.Track borderRadius="0">
+          <ChakraSlider.Range />
+        </ChakraSlider.Track>
+        <ChakraSlider.Thumbs />
+      </ChakraSlider.Control>
+      {children}
+    </ChakraSlider.Root>
+  );
+});

package/src/components/style-guide-data.ts

@@ -0,0 +1,374 @@
+import { spacing } from "../theme/primitives/sizes";
+
+export interface TypographySample {
+  label: string;
+  textStyle: string;
+  description: string;
+  sample: string;
+}
+
+export interface FontSample {
+  label: string;
+  role: string;
+  fontFamily: string;
+  sample: string;
+}
+
+export interface ColorSwatch {
+  label: string;
+  token: string;
+  description: string;
+  textToken?: string;
+  variant?: "fill" | "stroke";
+}
+
+export interface ColorGroup {
+  title: string;
+  description: string;
+  swatches: ColorSwatch[];
+}
+
+export interface SpacingSample {
+  label: string;
+  token: string;
+  value: string;
+  helper: string;
+}
+
+export interface RadiusSample {
+  label: string;
+  token: string;
+  helper: string;
+}
+
+export interface ShadowSample {
+  label: string;
+  token: string;
+  helper: string;
+}
+
+export const fontSamples: FontSample[] = [
+  {
+    label: "Display",
+    role: "Editorial headlines and hero statements.",
+    fontFamily: "display",
+    sample: "Playfair Display 012345",
+  },
+  {
+    label: "Heading + Labels",
+    role: "UI titles, navigation, and controls.",
+    fontFamily: "heading",
+    sample: "Onest 012345",
+  },
+  {
+    label: "Body",
+    role: "Paragraphs and long-form reading.",
+    fontFamily: "body",
+    sample: "Inter 012345",
+  },
+];
+
+export const typographySamples: TypographySample[] = [
+  {
+    label: "Display L",
+    textStyle: "heading/display/L",
+    description: "Hero statements and landing headlines.",
+    sample: "Automation you can trust",
+  },
+  {
+    label: "Display M",
+    textStyle: "heading/display/M",
+    description: "Campaign headers and marketing sections.",
+    sample: "Mission control for document AI",
+  },
+  {
+    label: "Display S",
+    textStyle: "heading/display/S",
+    description: "Editorial callouts and sub-hero messaging.",
+    sample: "Confidence for every doc",
+  },
+
+  {
+    label: "Heading XL",
+    textStyle: "heading/XL",
+    description: "Top-level page titles.",
+    sample: "Operations center",
+  },
+  {
+    label: "Heading L",
+    textStyle: "heading/L",
+    description: "Primary dashboard sections.",
+    sample: "Operational overview",
+  },
+  {
+    label: "Heading M",
+    textStyle: "heading/M",
+    description: "Card titles and panels.",
+    sample: "Pipeline performance",
+  },
+  {
+    label: "Heading S",
+    textStyle: "heading/S",
+    description: "Secondary sections and panels.",
+    sample: "Queue insights",
+  },
+
+  {
+    label: "Brand",
+    textStyle: "brand",
+    description: "Wordmark accents and brand moments.",
+    sample: "Schub",
+  },
+
+  {
+    label: "Label XL Regular",
+    textStyle: "label/XL/regular",
+    description: "Oversized labels and hero UI.",
+    sample: "Portfolio summary",
+  },
+
+  {
+    label: "Label L Regular",
+    textStyle: "label/L/regular",
+    description: "Supporting labels and helper headers.",
+    sample: "Source files",
+  },
+  {
+    label: "Label L Medium",
+    textStyle: "label/L/medium",
+    description: "Buttons, tabs, and key labels.",
+    sample: "Workflow status",
+  },
+  {
+    label: "Label L Medium Underline",
+    textStyle: "label/L/medium/underline",
+    description: "Linked actions and emphasized controls.",
+    sample: "View details",
+  },
+  {
+    label: "Label L Medium Uppercase",
+    textStyle: "label/L/medium/uppercase",
+    description: "Overlines and category markers.",
+    sample: "System status",
+  },
+
+  {
+    label: "Label M Regular",
+    textStyle: "label/M/regular",
+    description: "Form labels and metadata.",
+    sample: "Owner",
+  },
+  {
+    label: "Label M Regular Underline",
+    textStyle: "label/M/regular/underline",
+    description: "Inline links and actions.",
+    sample: "Open report",
+  },
+  {
+    label: "Label M Medium",
+    textStyle: "label/M/medium",
+    description: "Compact UI labels.",
+    sample: "Assigned",
+  },
+
+  {
+    label: "Label S Regular",
+    textStyle: "label/S/regular",
+    description: "Secondary metadata and timestamps.",
+    sample: "Last updated",
+  },
+  {
+    label: "Label S Medium",
+    textStyle: "label/S/medium",
+    description: "Tag labels and small controls.",
+    sample: "In review",
+  },
+  {
+    label: "Label S Italic",
+    textStyle: "label/S/italic",
+    description: "Emphasis in microcopy.",
+    sample: "Optional",
+  },
+  {
+    label: "Label XS",
+    textStyle: "label/XS",
+    description: "Captions and helper text.",
+    sample: "Updated 2 min ago",
+  },
+
+  {
+    label: "Paragraph XL Regular",
+    textStyle: "paragraph/XL/regular",
+    description: "Intro copy and highlights.",
+    sample: "Ship compliant automation without slowing teams down.",
+  },
+  {
+    label: "Paragraph XL Medium",
+    textStyle: "paragraph/XL/medium",
+    description: "Emphasized intro copy.",
+    sample: "Trusted automation for teams that cannot wait.",
+  },
+
+  {
+    label: "Paragraph L Regular",
+    textStyle: "paragraph/L/regular",
+    description: "Long-form reading and descriptions.",
+    sample: "Write clear guidance for reviewers and operators.",
+  },
+  {
+    label: "Paragraph L Medium",
+    textStyle: "paragraph/L/medium",
+    description: "Highlighted body copy.",
+    sample: "Highlight the insight that matters most.",
+  },
+
+  {
+    label: "Paragraph M Regular",
+    textStyle: "paragraph/M/regular",
+    description: "Default body copy.",
+    sample: "Use clear, concise language across dense data surfaces.",
+  },
+  {
+    label: "Paragraph M Medium",
+    textStyle: "paragraph/M/medium",
+    description: "Emphasized body text.",
+    sample: "Keep status messages short and confident.",
+  },
+];
+
+export const colorGroups: ColorGroup[] = [
+  {
+    title: "Surface layers",
+    description: "Foundational canvases for pages, cards, and panels.",
+    swatches: [
+      {
+        label: "Background primary",
+        token: "bg",
+        description: "Default app canvas.",
+      },
+      {
+        label: "Background secondary",
+        token: "bg.muted",
+        description: "Secondary panels and cards.",
+      },
+      {
+        label: "Background subtle",
+        token: "bg.subtle",
+        description: "Muted surfaces and quiet states.",
+      },
+      {
+        label: "Background active",
+        token: "bg.emphasized",
+        description: "Selected states and active rows.",
+      },
+      {
+        label: "Background hover",
+        token: "bg.muted",
+        description: "Hover state for cards and rows.",
+      },
+      {
+        label: "Background inverse",
+        token: "bg.inverted",
+        description: "Dark surfaces and overlays.",
+        textToken: "fg.inverted",
+      },
+    ],
+  },
+  {
+    title: "Accent surfaces",
+    description: "Accent backgrounds for emphasis and status.",
+    swatches: [
+      {
+        label: "Accent primary light",
+        token: "bg.accent-primary.light",
+        description: "Primary highlight backgrounds.",
+      },
+      {
+        label: "Accent primary medium",
+        token: "bg.accent-primary.medium",
+        description: "Hover highlights and banners.",
+      },
+      {
+        label: "Accent primary dark",
+        token: "bg.accent-primary.dark",
+        description: "Pressed highlights and stronger accent surfaces.",
+      },
+      {
+        label: "Accent blue light",
+        token: "bg.accent-secondary.blue-light",
+        description: "Informational messaging.",
+      },
+      {
+        label: "Accent red light",
+        token: "bg.accent-secondary.red-light",
+        description: "Error feedback surfaces.",
+      },
+      {
+        label: "Accent green light",
+        token: "bg.accent-secondary.green-light",
+        description: "Success feedback surfaces.",
+      },
+      {
+        label: "Accent yellow medium",
+        token: "bg.accent-secondary.yellow-medium",
+        description: "Warning and pending emphasis surfaces.",
+      },
+    ],
+  },
+  {
+    title: "Borders",
+    description: "Stroke colors for dividers, cards, and focus rings.",
+    swatches: [
+      {
+        label: "Border primary",
+        token: "border",
+        description: "High contrast borders.",
+        variant: "stroke",
+      },
+      {
+        label: "Border secondary",
+        token: "border.muted",
+        description: "Default card outlines.",
+        variant: "stroke",
+      },
+      {
+        label: "Border accent",
+        token: "blue.border",
+        description: "Brand focus state.",
+        variant: "stroke",
+      },
+      {
+        label: "Border accent light",
+        token: "border.accent-light",
+        description: "Subtle accent strokes.",
+        variant: "stroke",
+      },
+    ],
+  },
+];
+
+export const spacingSamples: SpacingSample[] = [
+  { label: "2xs", token: "2xs", value: spacing["2xs"].value, helper: "Hairline gaps and tight stacks." },
+  { label: "xs", token: "xs", value: spacing.xs.value, helper: "Compact UI padding." },
+  { label: "sm", token: "sm", value: spacing.sm.value, helper: "Controls and list spacing." },
+  { label: "md", token: "md", value: spacing.md.value, helper: "Default section padding." },
+  { label: "lg", token: "lg", value: spacing.lg.value, helper: "Roomy card gutters." },
+  { label: "xl", token: "xl", value: spacing.xl.value, helper: "Hero sections and modals." },
+  { label: "2xl", token: "2xl", value: spacing["2xl"].value, helper: "Page-level layout gaps." },
+];
+
+export const radiusSamples: RadiusSample[] = [
+  { label: "2xs", token: "2xs", helper: "Hairline controls." },
+  { label: "xs", token: "xs", helper: "Inputs and chips." },
+  { label: "sm", token: "sm", helper: "Buttons and cards." },
+  { label: "md", token: "md", helper: "Panels and modals." },
+  { label: "lg", token: "lg", helper: "Hero cards." },
+  { label: "xl", token: "xl", helper: "Display surfaces." },
+  { label: "full", token: "full", helper: "Pills and badges." },
+];
+
+export const shadowSamples: ShadowSample[] = [
+  { label: "Low", token: "low", helper: "Inputs and inline UI." },
+  { label: "Mid", token: "mid", helper: "Cards and drawers." },
+  { label: "High", token: "high", helper: "Floating dialogs." },
+];