@pstdio/ui 0.0.1

package/src/components/menu-item.stories.tsx

@@ -0,0 +1,162 @@
+import { Box, Button, Menu, Stack } from "@chakra-ui/react";
+import { ChevronDown, ChevronRight, FileText, Folder, Settings, Star } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+
+import { MenuItem } from "./menu-item";
+
+type StoryFn = () => ReactNode;
+type MenuItemStoryArgs = ComponentProps<typeof MenuItem>;
+
+const meta = {
+  title: "Components/MenuItem",
+  component: MenuItem,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    id: "reports",
+    primaryLabel: "Reports",
+    secondaryLabel: "Financial and tax summaries",
+    tooltipLabel: "Open reports",
+    leftIcon: FileText,
+    rightIcon: ChevronRight,
+  },
+};
+
+export default meta;
+
+const renderMenuList = (children: ReactNode) => (
+  <Menu.Root>
+    <Stack
+      width="20rem"
+      gap="2px"
+      padding="sm"
+      borderRadius="md"
+      borderWidth="1px"
+      borderColor="border.muted"
+      background="bg"
+    >
+      {children}
+    </Stack>
+  </Menu.Root>
+);
+
+const renderMenuItem = (args: MenuItemStoryArgs) => renderMenuList(<MenuItem {...args} />);
+
+export const Default = {
+  render: renderMenuItem,
+};
+
+export const WithTag = {
+  args: {
+    tagLabel: "WIP",
+    tagColorPalette: "yellow",
+  },
+  render: renderMenuItem,
+};
+
+export const Selected = {
+  args: {
+    isSelected: true,
+    rightIcon: Star,
+  },
+  render: renderMenuItem,
+};
+
+export const NoIcon = {
+  args: {
+    primaryLabel: "Activity log",
+    secondaryLabel: "Latest updates",
+    leftIcon: null,
+    rightIcon: null,
+  },
+  render: renderMenuItem,
+};
+
+export const NoDescription = {
+  args: {
+    primaryLabel: "Invoices",
+    secondaryLabel: undefined,
+    tooltipLabel: undefined,
+  },
+  render: renderMenuItem,
+};
+
+export const Compact = {
+  args: {
+    variant: "compact",
+    secondaryLabel: "Financial and tax summaries",
+  },
+  render: renderMenuItem,
+};
+
+export const Disabled = {
+  args: {
+    isDisabled: true,
+    secondaryLabel: "Requires admin access",
+  },
+  render: renderMenuItem,
+};
+
+export const MenuList = {
+  render: () =>
+    renderMenuList(
+      <>
+        <MenuItem id="files" primaryLabel="Files" secondaryLabel="Recent uploads" leftIcon={Folder} />
+        <MenuItem
+          id="reports"
+          primaryLabel="Reports"
+          secondaryLabel="Financial and tax summaries"
+          leftIcon={FileText}
+          rightIcon={ChevronRight}
+        />
+        <MenuItem
+          id="activity"
+          primaryLabel="Activity log"
+          secondaryLabel="Latest updates"
+          leftIcon={null}
+          rightIcon={null}
+        />
+        <MenuItem id="settings" primaryLabel="Settings" secondaryLabel="Workspace preferences" isSelected />
+        <MenuItem id="locked" primaryLabel="Billing" secondaryLabel="Requires admin access" isDisabled />
+      </>,
+    ),
+};
+
+export const DropdownMenu = {
+  render: () => (
+    <Menu.Root defaultOpen>
+      <Menu.Trigger asChild>
+        <Button size="sm" variant="outline">
+          Actions
+        </Button>
+      </Menu.Trigger>
+      <Menu.Positioner>
+        <Menu.Content minW="240px" bg="bg">
+          <MenuItem
+            id="sort"
+            primaryLabel="Sort by"
+            secondaryLabel="Newest first"
+            tooltipLabel="Change sort order"
+            leftIcon={ChevronDown}
+          />
+          <MenuItem id="duplicate" primaryLabel="Duplicate" secondaryLabel="Create a copy" leftIcon={FileText} />
+          <MenuItem
+            id="move"
+            primaryLabel="Move to folder"
+            secondaryLabel="Organize this item"
+            leftIcon={Folder}
+            rightIcon={ChevronRight}
+          />
+          <Menu.Separator />
+          <MenuItem id="settings" primaryLabel="Settings" secondaryLabel={undefined} leftIcon={Settings} />
+          <MenuItem id="archive" primaryLabel="Archive" secondaryLabel="Requires admin access" isDisabled />
+        </Menu.Content>
+      </Menu.Positioner>
+    </Menu.Root>
+  ),
+};

package/src/components/menu-item.tsx

@@ -0,0 +1,207 @@
+import type { IconProps } from "@chakra-ui/react";
+import { Badge, MenuItem as ChakraMenuItem, Flex, Icon, Stack, Text } from "@chakra-ui/react";
+import type { ComponentProps, MouseEvent as ReactMouseEvent, ReactNode } from "react";
+import { Tooltip } from "./tooltip";
+
+type ChakraMenuItemProps = ComponentProps<typeof ChakraMenuItem>;
+type MenuItemIcon = ComponentProps<typeof Icon>["as"];
+type MenuItemIconColor = IconProps["color"];
+type MenuItemTagColor = ComponentProps<typeof Badge>["colorPalette"];
+type MenuItemTagVariant = ComponentProps<typeof Badge>["variant"];
+type MenuItemVariant = "default" | "compact";
+
+const menuItemVariantStyles = {
+  default: {
+    paddingX: "sm",
+    paddingY: "xs",
+    minHeight: "2rem",
+    iconSize: "19px",
+    primaryTextStyle: "label/M/regular",
+    secondaryMarginLeft: "2px",
+    secondaryTextStyle: "label/XS/regular",
+  },
+  compact: {
+    paddingX: "xs",
+    paddingY: "2xs",
+    minHeight: "1.75rem",
+    iconSize: "16px",
+    primaryTextStyle: "label/S/regular",
+    secondaryMarginLeft: "0",
+    secondaryTextStyle: "label/XS/regular",
+  },
+} as const;
+
+interface MenuItemProps {
+  id?: string;
+  children?: ReactNode;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  primaryLabel: string;
+  secondaryLabel?: string;
+  tooltipLabel?: ReactNode;
+  leftIcon?: MenuItemIcon | null;
+  leftSlot?: ReactNode;
+  rightIcon?: MenuItemIcon | null;
+  leftIconColor?: MenuItemIconColor;
+  rightIconColor?: MenuItemIconColor;
+  leftIconSize?: string;
+  rightIconSize?: string;
+  rightIconAriaLabel?: string;
+  rightTooltipLabel?: ReactNode;
+  onRightIconClick?: () => void;
+  tagLabel?: ReactNode;
+  tagColorPalette?: MenuItemTagColor;
+  tagVariant?: MenuItemTagVariant;
+  variant?: MenuItemVariant;
+  tabIndex?: number;
+  width?: ChakraMenuItemProps["width"];
+  maxWidth?: ChakraMenuItemProps["maxWidth"];
+  setRefElement?: ChakraMenuItemProps["ref"];
+  onClick?: ChakraMenuItemProps["onClick"];
+  onMouseDown?: ChakraMenuItemProps["onMouseDown"];
+  onMouseEnter?: ChakraMenuItemProps["onMouseEnter"];
+}
+
+export const MenuItem = (props: MenuItemProps) => {
+  const {
+    id,
+    primaryLabel,
+    tooltipLabel,
+    secondaryLabel,
+    leftIcon = null,
+    leftSlot,
+    rightIcon,
+    leftIconColor = "fg",
+    rightIconColor = "fg",
+    leftIconSize,
+    rightIconSize,
+    rightIconAriaLabel,
+    rightTooltipLabel,
+    onRightIconClick,
+    isDisabled,
+    isSelected,
+    tagLabel,
+    tagColorPalette = "yellow",
+    tagVariant = "subtle",
+    variant = "default",
+    tabIndex,
+    width,
+    maxWidth,
+    setRefElement,
+  } = props;
+  const { onClick, onMouseDown, onMouseEnter } = props;
+  const variantStyles = menuItemVariantStyles[variant];
+  const backgroundColor = isSelected ? "bg.emphasized" : undefined;
+  const resolvedLeftIconSize = leftIconSize ?? variantStyles.iconSize;
+  const resolvedRightIconSize = rightIconSize ?? variantStyles.iconSize;
+  const isRightIconInteractive = Boolean(onRightIconClick && rightIcon);
+
+  const handleRightIconMouseDown = (event: ReactMouseEvent<HTMLElement>) => {
+    if (!isRightIconInteractive) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleRightIconClick = (event: ReactMouseEvent<HTMLElement>) => {
+    if (!isRightIconInteractive || !onRightIconClick) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    onRightIconClick();
+  };
+
+  return (
+    <ChakraMenuItem
+      id={id}
+      ref={setRefElement}
+      tabIndex={tabIndex}
+      disabled={isDisabled}
+      aria-selected={isSelected}
+      paddingX={variantStyles.paddingX}
+      paddingY={variantStyles.paddingY}
+      onClick={onClick}
+      onMouseDown={onMouseDown}
+      onMouseEnter={onMouseEnter}
+      height="auto"
+      minHeight={variantStyles.minHeight}
+      role="option"
+      width={width}
+      maxWidth={maxWidth ?? "20rem"}
+      overflow={"hidden"}
+      position="relative"
+      cursor={isDisabled ? "default" : "pointer"}
+      value={id ?? primaryLabel}
+      bg={backgroundColor}
+      _hover={{ bg: "bg.muted" }}
+      _focus={{ bg: "bg.muted" }}
+    >
+      <Flex justifyContent="space-between" alignItems="center" gap="xs" flex="1">
+        <Tooltip positioning={{ placement: "right" }} content={tooltipLabel} disabled={!tooltipLabel}>
+          <Stack gap="2xs">
+            <Flex alignItems="flex-start" gap="xs" flex="1">
+              {leftSlot ? (
+                leftSlot
+              ) : leftIcon ? (
+                <Icon as={leftIcon} boxSize={resolvedLeftIconSize} color={leftIconColor} />
+              ) : null}
+              <Text lineClamp={1} textOverflow="ellipsis" textStyle={variantStyles.primaryTextStyle}>
+                {primaryLabel}
+              </Text>
+            </Flex>
+            {secondaryLabel && (
+              <Text
+                ml={variantStyles.secondaryMarginLeft}
+                lineClamp={1}
+                textOverflow="ellipsis"
+                textStyle={variantStyles.secondaryTextStyle}
+                color="fg.muted"
+              >
+                {secondaryLabel}
+              </Text>
+            )}
+          </Stack>
+        </Tooltip>
+        <Flex justifyContent="flex-end" color="fg">
+          {rightIcon ? (
+            <Tooltip positioning={{ placement: "right" }} content={rightTooltipLabel} disabled={!rightTooltipLabel}>
+              <Flex
+                as={isRightIconInteractive ? "button" : "div"}
+                alignItems="center"
+                aria-label={rightIconAriaLabel}
+                cursor={isRightIconInteractive ? "pointer" : "default"}
+                bg="transparent"
+                borderWidth="0"
+                padding="0"
+                onMouseDown={handleRightIconMouseDown}
+                onClick={handleRightIconClick}
+              >
+                <Icon as={rightIcon} boxSize={resolvedRightIconSize} color={rightIconColor} />
+              </Flex>
+            </Tooltip>
+          ) : null}
+        </Flex>
+      </Flex>
+      {tagLabel ? (
+        <Badge
+          position="absolute"
+          top="xs"
+          right="sm"
+          textStyle="label/XS/medium"
+          px="xs"
+          py="2px"
+          borderRadius="md"
+          colorPalette={tagColorPalette}
+          variant={tagVariant}
+          pointerEvents="none"
+        >
+          {tagLabel}
+        </Badge>
+      ) : null}
+    </ChakraMenuItem>
+  );
+};

package/src/components/number-input.tsx

@@ -0,0 +1,21 @@
+import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
+import * as React from "react";
+
+export interface NumberInputProps extends ChakraNumberInput.RootProps {}
+
+export const NumberInputRoot = React.forwardRef<HTMLDivElement, NumberInputProps>(function NumberInput(props, ref) {
+  const { children, ...rest } = props;
+  return (
+    <ChakraNumberInput.Root ref={ref} variant="outline" {...rest}>
+      {children}
+      <ChakraNumberInput.Control>
+        <ChakraNumberInput.IncrementTrigger />
+        <ChakraNumberInput.DecrementTrigger />
+      </ChakraNumberInput.Control>
+    </ChakraNumberInput.Root>
+  );
+});
+
+export const NumberInputField = ChakraNumberInput.Input;
+export const NumberInputScrubber = ChakraNumberInput.Scrubber;
+export const NumberInputLabel = ChakraNumberInput.Label;

package/src/components/open-source-notices-screen.stories.tsx

@@ -0,0 +1,69 @@
+import { Box } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { OpenSourceNoticesScreen } from "./open-source-notices-screen";
+
+const meta = {
+  title: "Components/OpenSourceNoticesScreen",
+  component: OpenSourceNoticesScreen,
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<typeof OpenSourceNoticesScreen>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const notices = [
+  {
+    name: "react",
+    version: "19.0.0",
+    license: "MIT",
+    copyright: "Copyright (c) Meta Platforms, Inc.",
+    homepageUrl: "https://react.dev",
+    sourceUrl: "https://github.com/facebook/react",
+  },
+  {
+    name: "chakra-ui",
+    version: "3.28.0",
+    license: "MIT",
+    copyright: "Copyright (c) Chakra UI Team",
+    homepageUrl: "https://chakra-ui.com",
+    sourceUrl: "https://github.com/chakra-ui/chakra-ui",
+    attribution:
+      "Portions of this software include work distributed under the MIT License. See project repository for full text.",
+  },
+  {
+    name: "lucide-react",
+    version: "0.469.0",
+    license: "ISC",
+    sourceUrl: "https://github.com/lucide-icons/lucide",
+  },
+];
+
+export const Populated: Story = {
+  render: (props) => (
+    <Box minHeight="100vh" bg="bg">
+      <OpenSourceNoticesScreen {...props} />
+    </Box>
+  ),
+  args: {
+    notices,
+    productName: "Prompt Studio Desktop",
+    productVersion: "1.8.3",
+    generatedAt: "2026-02-27",
+  },
+};
+
+export const Empty: Story = {
+  render: (props) => (
+    <Box minHeight="100vh" bg="bg">
+      <OpenSourceNoticesScreen {...props} />
+    </Box>
+  ),
+  args: {
+    notices: [],
+    productName: "Prompt Studio Desktop",
+    productVersion: "1.8.3",
+    generatedAt: "2026-02-27",
+  },
+};

package/src/components/open-source-notices-screen.tsx

@@ -0,0 +1,154 @@
+import { Box, HStack, Link, Separator, Stack, Text } from "@chakra-ui/react";
+
+export interface OpenSourceNotice {
+  name: string;
+  version?: string;
+  license?: string;
+  copyright?: string;
+  homepageUrl?: string;
+  sourceUrl?: string;
+  attribution?: string;
+}
+
+export interface OpenSourceNoticesScreenProps {
+  notices: OpenSourceNotice[];
+  title?: string;
+  description?: string;
+  productName?: string;
+  productVersion?: string;
+  generatedAt?: string;
+  emptyTitle?: string;
+  emptyDescription?: string;
+}
+
+const getNoticeKey = (notice: OpenSourceNotice, index: number) => {
+  return `${notice.name}-${notice.version ?? "unknown"}-${index}`;
+};
+
+const getNoticeTitle = (notice: OpenSourceNotice) => {
+  if (!notice.version) return notice.name;
+
+  return `${notice.name} v${notice.version}`;
+};
+
+export const OpenSourceNoticesScreen = (props: OpenSourceNoticesScreenProps) => {
+  const {
+    notices,
+    title = "Open Source and Third-Party Notices",
+    description = "This product includes software developed by the open source community.",
+    productName,
+    productVersion,
+    generatedAt,
+    emptyTitle = "No third-party notices available",
+    emptyDescription = "No third-party packages were included in this build.",
+  } = props;
+
+  return (
+    <Stack width="full" minHeight="100%" background="bg" color="fg" padding={{ base: "md", md: "xl" }} gap="lg">
+      <Stack gap="xs">
+        <Text textStyle="heading/L">{title}</Text>
+        <Text textStyle="paragraph/S/regular" color="fg.muted">
+          {description}
+        </Text>
+
+        <HStack gap="md" flexWrap="wrap">
+          {productName ? (
+            <Text textStyle="label/XS" color="fg.muted">
+              Product: {productName}
+            </Text>
+          ) : null}
+
+          {productVersion ? (
+            <Text textStyle="label/XS" color="fg.muted">
+              Version: {productVersion}
+            </Text>
+          ) : null}
+
+          <Text textStyle="label/XS" color="fg.muted">
+            Packages: {notices.length}
+          </Text>
+
+          {generatedAt ? (
+            <Text textStyle="label/XS" color="fg.muted">
+              Generated: {generatedAt}
+            </Text>
+          ) : null}
+        </HStack>
+      </Stack>
+
+      <Separator borderColor="border.secondary" />
+
+      {notices.length === 0 ? (
+        <Stack borderWidth="1px" borderColor="border.muted" borderRadius="md" padding="lg" gap="xs">
+          <Text textStyle="label/L/medium">{emptyTitle}</Text>
+          <Text textStyle="paragraph/S/regular" color="fg.muted">
+            {emptyDescription}
+          </Text>
+        </Stack>
+      ) : (
+        <Stack gap="md">
+          {notices.map((notice, index) => (
+            <Box
+              key={getNoticeKey(notice, index)}
+              borderWidth="1px"
+              borderColor="border.muted"
+              borderRadius="md"
+              padding="md"
+            >
+              <Stack gap="sm">
+                <Stack gap="2xs">
+                  <Text textStyle="label/L/medium">{getNoticeTitle(notice)}</Text>
+                  <Text textStyle="label/S/regular" color="fg.muted">
+                    License: {notice.license ?? "Unknown"}
+                  </Text>
+                </Stack>
+
+                {notice.copyright ? (
+                  <Text textStyle="label/S/regular" color="fg.muted">
+                    {notice.copyright}
+                  </Text>
+                ) : null}
+
+                {(notice.homepageUrl || notice.sourceUrl) && (
+                  <Stack gap="2xs">
+                    {notice.homepageUrl ? (
+                      <Link
+                        href={notice.homepageUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        textStyle="label/S/medium"
+                        width="fit-content"
+                      >
+                        Homepage
+                      </Link>
+                    ) : null}
+
+                    {notice.sourceUrl ? (
+                      <Link
+                        href={notice.sourceUrl}
+                        target="_blank"
+                        rel="noreferrer"
+                        textStyle="label/S/medium"
+                        width="fit-content"
+                      >
+                        Source code
+                      </Link>
+                    ) : null}
+                  </Stack>
+                )}
+
+                {notice.attribution ? (
+                  <Box background="bg.muted" borderRadius="sm" padding="sm">
+                    <Text textStyle="label/S/regular" whiteSpace="pre-wrap">
+                      {notice.attribution}
+                    </Text>
+                  </Box>
+                ) : null}
+              </Stack>
+            </Box>
+          ))}
+        </Stack>
+      )}
+    </Stack>
+  );
+};

package/src/components/panel-menu.stories.tsx

@@ -0,0 +1,44 @@
+import { Box, Stack } from "@chakra-ui/react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileText, Folder, Settings } from "lucide-react";
+import { ItemSection } from "./item-section";
+import { MenuItem } from "./menu-item";
+import { PanelMenu } from "./panel-menu";
+
+const meta: Meta<typeof PanelMenu> = {
+  title: "Components/PanelMenu",
+  component: PanelMenu,
+  decorators: [
+    (Story) => (
+      <Box height="560px" bg="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+  args: {
+    title: "Project",
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PanelMenu>;
+
+export const Default: Story = {};
+
+export const WithSections: Story = {
+  args: {
+    title: "Resources",
+    children: (
+      <Stack gap="sm">
+        <ItemSection title="Workspace">
+          <MenuItem primaryLabel="Overview" leftIcon={FileText} />
+          <MenuItem primaryLabel="Files" leftIcon={Folder} />
+        </ItemSection>
+        <ItemSection title="Settings">
+          <MenuItem primaryLabel="Preferences" leftIcon={Settings} />
+        </ItemSection>
+      </Stack>
+    ),
+  },
+};

package/src/components/panel-menu.tsx

@@ -0,0 +1,27 @@
+import { Flex, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+
+interface PanelMenuProps {
+  title: string;
+  children?: ReactNode;
+}
+
+export function PanelMenu(props: PanelMenuProps) {
+  const { title, children } = props;
+
+  return (
+    <Stack borderRightWidth="1px" width="64" gap="0" minH="0">
+      <Flex height="49px" p="xs" borderBottomWidth="1px" alignItems="center">
+        <Text pb="0" textStyle="label/L/medium" color="fg.muted">
+          {title}
+        </Text>
+      </Flex>
+
+      {children && (
+        <Stack p="xs" gap="xs" flex="1" minH="0" overflowY="auto">
+          {children}
+        </Stack>
+      )}
+    </Stack>
+  );
+}