@pstdio/ui 0.0.3 → 0.0.4

package/src/components/param-editor.tsx

@@ -1,142 +0,0 @@
-import { Separator, Stack } from "@chakra-ui/react";
-import { Fragment } from "react";
-import type { InputGroup, Param, ParamValue, ParamValueMap } from "./param-editor.types";
-import { ColorInput } from "./param-editor-color-input";
-import { DateInput } from "./param-editor-date-input";
-import { InputGroupComponent } from "./param-editor-input-group";
-import { NumberInput } from "./param-editor-number-input";
-import { SelectionInput } from "./param-editor-selection-input";
-import { TextInput } from "./param-editor-text-input";
-
-export interface ParamEditorProps {
-  params?: Param[];
-  groups?: InputGroup[];
-  defaultValues: ParamValueMap;
-  onChange: (id: string, value: ParamValue) => void;
-  readOnly?: boolean;
-  fullWidth?: boolean;
-}
-
-const resolveDefaultValue = <T,>(defaultValues: ParamValueMap, paramId: string, fallback: T) => {
-  return defaultValues[paramId] === undefined ? fallback : (defaultValues[paramId] as T);
-};
-
-export const ParamEditor = (props: ParamEditorProps) => {
-  const { params = [], groups = [], defaultValues, onChange, readOnly, fullWidth = false } = props;
-
-  const renderNumberParam = (param: Extract<Param, { type: "number" }>) => (
-    <NumberInput
-      readOnly={readOnly}
-      id={param.id}
-      key={param.id}
-      name={param.name}
-      description={param.description || ""}
-      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue ?? param.min)}
-      min={param.min}
-      max={param.max}
-      step={param.step}
-      onChange={onChange}
-      fullWidth={fullWidth}
-    />
-  );
-
-  const renderTextParam = (param: Extract<Param, { type: "text" }>) => (
-    <TextInput
-      readOnly={readOnly}
-      id={param.id}
-      key={param.id}
-      name={param.name}
-      description={param.description || ""}
-      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
-      singleLine={param.singleLine}
-      onChange={onChange}
-      fullWidth={fullWidth}
-    />
-  );
-
-  const renderSelectionParam = (param: Extract<Param, { type: "selection" }>) => (
-    <SelectionInput
-      readOnly={readOnly}
-      id={param.id}
-      key={param.id}
-      name={param.name}
-      description={param.description || ""}
-      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
-      options={param.options}
-      onChange={onChange}
-      multiSelect={param.multiSelect}
-      placeholder={param.placeholder}
-      fullWidth={fullWidth}
-    />
-  );
-
-  const renderDateParam = (param: Extract<Param, { type: "date" }>) => (
-    <DateInput
-      readOnly={readOnly}
-      id={param.id}
-      key={param.id}
-      name={param.name}
-      description={param.description || ""}
-      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue ?? param.min)}
-      min={param.min}
-      max={param.max}
-      onChange={onChange}
-      fullWidth={fullWidth}
-    />
-  );
-
-  const renderColorParam = (param: Extract<Param, { type: "color" }>) => (
-    <ColorInput
-      readOnly={readOnly}
-      id={param.id}
-      key={param.id}
-      name={param.name}
-      description={param.description || ""}
-      defaultValue={resolveDefaultValue(defaultValues, param.id, param.defaultValue)}
-      onChange={onChange}
-      fullWidth={fullWidth}
-    />
-  );
-
-  const renderParam = (param: Param) => {
-    switch (param.type) {
-      case "number":
-        return renderNumberParam(param);
-      case "text":
-        return renderTextParam(param);
-      case "selection":
-        return renderSelectionParam(param);
-      case "date":
-        return renderDateParam(param);
-      case "color":
-        return renderColorParam(param);
-      default:
-        return null;
-    }
-  };
-
-  return (
-    <Stack flex="1" maxW="full" gap="md">
-      {/* Render standalone params */}
-      {params.map(renderParam)}
-
-      {/* Add separator between standalone params and groups if both exist */}
-      {params.length > 0 && groups.length > 0 && <Separator borderColor="border.secondary" />}
-
-      {/* Render groups with separators */}
-      {groups.map((group, index) => (
-        <Fragment key={group.id}>
-          <InputGroupComponent
-            group={group}
-            defaultValues={defaultValues}
-            onChange={onChange}
-            readOnly={readOnly}
-            fullWidth={fullWidth}
-          />
-          {/* Add divider after each group except the last one */}
-          {index < groups.length - 1 && <Separator borderColor="border.secondary" />}
-        </Fragment>
-      ))}
-    </Stack>
-  );
-};

package/src/components/param-editor.types.ts

@@ -1,95 +0,0 @@
-export interface BaseParam {
-  id: string;
-  name: string;
-  description?: string;
-}
-
-export interface NumberParam extends BaseParam {
-  type: "number";
-  defaultValue: number;
-  min?: number;
-  max?: number;
-  step?: number;
-}
-
-export interface TextParam extends BaseParam {
-  type: "text";
-  defaultValue: string;
-  singleLine?: boolean;
-}
-
-export interface SelectionParam extends BaseParam {
-  type: "selection";
-  defaultValue: string | string[];
-  options: { id: string; name: string; icon?: string }[];
-  multiSelect?: boolean;
-  placeholder?: string;
-}
-
-export interface DateParam extends BaseParam {
-  type: "date";
-  defaultValue: string;
-  min?: string;
-  max?: string;
-}
-
-export interface ColorParam extends BaseParam {
-  type: "color";
-  defaultValue: string;
-}
-
-export type ObjectDefinition = (NumberParam | TextParam)[];
-
-export interface ObjectParam extends BaseParam {
-  type: "object";
-  defaultValue: ObjectDefinition;
-  editableSchema?: boolean;
-}
-
-export interface ListParam extends BaseParam {
-  type: "list";
-  files?: boolean;
-  defaultValue: string[];
-}
-
-export interface VectorParam extends BaseParam {
-  type: "vector";
-  defaultValue: [];
-}
-
-export interface InputGroup {
-  id: string;
-  title: string;
-  description?: string;
-  params: Param[];
-  collapsible?: boolean;
-  defaultCollapsed?: boolean;
-}
-
-export type ParamValue = number | string | null | ObjectDefinition | Array<number> | Array<string>;
-
-export type Param =
-  | NumberParam
-  | TextParam
-  | SelectionParam
-  | DateParam
-  | ColorParam
-  | ObjectParam
-  | ListParam
-  | VectorParam;
-
-export type ParamValueMap = Record<string, ParamValue>;
-
-type WithOptionalDefault<T extends { defaultValue: unknown }> = Omit<T, "defaultValue"> & {
-  defaultValue?: T["defaultValue"];
-};
-
-export type ParamConfig =
-  | WithOptionalDefault<NumberParam>
-  | WithOptionalDefault<TextParam>
-  | WithOptionalDefault<SelectionParam>
-  | WithOptionalDefault<DateParam>
-  | WithOptionalDefault<ColorParam>
-  | WithOptionalDefault<ObjectParam>
-  | WithOptionalDefault<ListParam>
-  | WithOptionalDefault<VectorParam>;

package/src/components/properties.stories.tsx

@@ -1,108 +0,0 @@
-import { Box, Button, HStack, Separator, Stack, Text } from "@chakra-ui/react";
-import { Info } from "lucide-react";
-import type { ReactNode } from "react";
-import { Properties } from "./properties";
-
-type StoryFn = () => ReactNode;
-
-const meta = {
-  title: "Components/Properties",
-  component: Properties,
-  decorators: [
-    (Story: StoryFn) => (
-      <Box padding="lg" background="bg" minWidth="600px">
-        <Story />
-      </Box>
-    ),
-  ],
-};
-
-export default meta;
-
-export const Default = {
-  render: () => (
-    <Properties
-      title="Project Settings"
-      items={[
-        {
-          label: "Project Name",
-          description: "The unique identifier for this project",
-          value: (
-            <Button size="sm" variant="ghost">
-              <Info />
-              My Cool Project
-            </Button>
-          ),
-        },
-        {
-          label: "Visibility",
-          description: "Who can see this project",
-          value: (
-            <HStack gap="sm">
-              <Button size="sm" variant="outline">
-                Public
-              </Button>
-              <Button size="sm" variant="ghost">
-                Change
-              </Button>
-            </HStack>
-          ),
-        },
-        {
-          label: "Version",
-          value: <Text>1.0.0</Text>,
-        },
-        {
-          label: "Actions",
-          description: "Dangerous operations",
-          value: (
-            <Button size="sm" variant="outline" colorPalette="red">
-              Delete Project
-            </Button>
-          ),
-        },
-      ]}
-    />
-  ),
-};
-
-export const Collapsed = {
-  render: () => (
-    <Properties
-      title="Advanced Configuration"
-      defaultOpen={false}
-      items={[
-        {
-          label: "API Endpoint",
-          value: <Text>https://api.example.com/v1</Text>,
-        },
-        {
-          label: "Timeout",
-          value: <Text>30000ms</Text>,
-        },
-      ]}
-    />
-  ),
-};
-
-export const MultipleInStack = {
-  render: () => (
-    <Stack gap="md">
-      <Properties
-        title="General Information"
-        items={[
-          { label: "Author", value: <Text>John Doe</Text> },
-          { label: "License", value: <Text>MIT</Text> },
-        ]}
-      />
-      <Separator />
-      <Properties
-        title="Repository Details"
-        items={[
-          { label: "Git URL", value: <Text>git@github.com:user/repo.git</Text> },
-          { label: "Branch", value: <Text>main</Text> },
-        ]}
-      />
-    </Stack>
-  ),
-};

package/src/components/properties.tsx

@@ -1,73 +0,0 @@
-import { Box, Collapsible, HStack, Icon, Stack, Text } from "@chakra-ui/react";
-import { ChevronRight, Info } from "lucide-react";
-import type { ReactNode } from "react";
-import { Tooltip } from "./tooltip";
-
-export interface PropertyItem {
-  label: string;
-  description?: string;
-  value: ReactNode;
-}
-
-export interface PropertiesProps {
-  items: PropertyItem[];
-  title?: string;
-  defaultOpen?: boolean;
-}
-
-/**
- * A collapsible component that displays a list of properties.
- *
- * Each property has a label, an optional description (shown as a tooltip), and a value (ReactNode).
- * All labels have the same fixed width for alignment.
- */
-export const Properties = (props: PropertiesProps) => {
-  const { items, title, defaultOpen = true } = props;
-
-  return (
-    <Collapsible.Root defaultOpen={defaultOpen} width="full">
-      <Collapsible.Trigger
-        _hover={{
-          background: "bg.muted",
-        }}
-        borderRadius={"xs"}
-        padding="sm"
-        height="2rem"
-        display="flex"
-        gap="2"
-        alignItems="center"
-        cursor="pointer"
-      >
-        {title && (
-          <Text fontWeight="600" textStyle="label/S/medium">
-            {title}
-          </Text>
-        )}
-        <Collapsible.Indicator transition="transform 0.2s" _open={{ transform: "rotate(90deg)" }}>
-          <ChevronRight size={16} />
-        </Collapsible.Indicator>
-      </Collapsible.Trigger>
-      <Collapsible.Content>
-        <Stack gap="sm" paddingLeft="sm" paddingY="xs">
-          {items.map((item, index) => (
-            <HStack key={`${item.label}-${index}`} gap="md" alignItems="center">
-              <Box width="140px" flexShrink={0}>
-                <HStack gap="1" alignItems="center">
-                  <Text textStyle="label/S/medium" color="fg.muted">
-                    {item.label}
-                  </Text>
-                  {item.description && (
-                    <Tooltip content={item.description} showArrow>
-                      <Icon as={Info} boxSize="12px" color="fg.muted" opacity={0.6} cursor="help" />
-                    </Tooltip>
-                  )}
-                </HStack>
-              </Box>
-              <Box flex="1">{item.value}</Box>
-            </HStack>
-          ))}
-        </Stack>
-      </Collapsible.Content>
-    </Collapsible.Root>
-  );
-};

package/src/components/pstdio-logo.tsx

@@ -1,26 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-
-const DEFAULT_SIZE = 26;
-
-export const Logo = (props: ComponentPropsWithoutRef<"svg">) => {
-  const { width = DEFAULT_SIZE, height = DEFAULT_SIZE, ...rest } = props;
-
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 26 26"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      {...rest}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8 0C3.58172 0 0 3.58172 0 8V18C0 22.4183 3.58172 26 8 26H18C22.4183 26 26 22.4183 26 18V8C26 3.58172 22.4183 0 18 0H8ZM13 11C13 12.6569 11.6569 14 10 14C8.34315 14 7 12.6569 7 11C7 9.34315 8.34315 8 10 8C11.6569 8 13 9.34315 13 11ZM15 11C15 13.7614 12.7614 16 10 16C7.23858 16 5 13.7614 5 11C5 8.23858 7.23858 6 10 6C12.7614 6 15 8.23858 15 11Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-};

package/src/components/resource-badge.stories.tsx

@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { MissingResourceBadge, ResourceBadge } from "./resource-badge";
-
-const meta: Meta<typeof ResourceBadge> = {
-  title: "Components/ResourceBadge",
-  component: ResourceBadge,
-  parameters: {
-    layout: "padded",
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof ResourceBadge>;
-
-export const Default: Story = {
-  args: {
-    fileName: "workspace/analysis/report.md",
-    tone: "neutral",
-    size: "md",
-  },
-};
-
-export const Missing: Story = {
-  render: () => <MissingResourceBadge referenceId="missing/resource.md" />,
-};

package/src/components/resource-badge.tsx

@@ -1,173 +0,0 @@
-import type { HTMLChakraProps } from "@chakra-ui/react";
-import { chakra, IconButton, Spacer, Text } from "@chakra-ui/react";
-import type { LucideIcon } from "lucide-react";
-import { AlertTriangle, X } from "lucide-react";
-import type { ReactNode } from "react";
-import { getFileTypeIcon } from "../utils/get-file-type-icon";
-import { Tooltip } from "./tooltip";
-
-const SIZE_STYLES = {
-  sm: {
-    container: {
-      height: "20px",
-      lineHeight: { base: "20px" },
-      px: "2xs",
-    },
-    iconSize: 12,
-    textStyle: "xs",
-  },
-  md: {
-    container: {
-      height: "24px",
-      lineHeight: { base: "24px" },
-      px: "xs",
-    },
-    iconSize: 14,
-    textStyle: "sm",
-  },
-} as const;
-
-const TONE_STYLES = {
-  neutral: {
-    color: "color.primary",
-    bg: "bg.muted",
-    _hover: {
-      bg: "bg.emphasized",
-    },
-  },
-  accent: {
-    color: "var(--schub-foreground-accent)",
-    bg: "var(--schub-accent-subtle)",
-    _hover: {
-      bg: "var(--schub-accent-subtle)",
-    },
-  },
-} as const;
-
-export interface MissingResourceBadgeProps {
-  referenceId: string;
-  onRemove?: (referenceId: string) => void;
-}
-
-/**
- * Shown when a reference points to a resource that no longer exists
- */
-export const MissingResourceBadge = (props: MissingResourceBadgeProps) => {
-  const { referenceId, onRemove } = props;
-  return (
-    <chakra.span
-      height="24px"
-      lineHeight={{ base: "24px" }}
-      gap="2xs"
-      display="flex"
-      flexDirection="row"
-      alignItems="center"
-      paddingX="xs"
-      borderRadius="xs"
-      color={`fg.error`}
-      bg={`bg.accent-secondary.red-light`}
-      _hover={{
-        bg: `bg.accent-secondary.red-light`,
-      }}
-    >
-      <chakra.span mr="xs" display="inline-flex">
-        <AlertTriangle size={14} />
-      </chakra.span>
-      <Text maxW={{ base: "17.5rem" }} textOverflow="ellipsis" whiteSpace="nowrap" overflow="hidden">
-        Missing Reference
-      </Text>
-      <Spacer />
-      {onRemove && (
-        <IconButton
-          color="fg.error"
-          aria-label="Remove reference"
-          size="2xs"
-          ml="sm"
-          variant="ghost"
-          _hover={{
-            bg: "transparent",
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove?.(referenceId);
-          }}
-        >
-          <X size={12} />
-        </IconButton>
-      )}
-    </chakra.span>
-  );
-};
-
-export type ResourceBadgeSize = keyof typeof SIZE_STYLES;
-export type ResourceBadgeTone = keyof typeof TONE_STYLES;
-
-export interface ResourceBadgeProps extends Omit<HTMLChakraProps<"span">, "onSelect"> {
-  fileName: string;
-  onRemove?: (fileName: string) => void;
-  onSelect?: (fileName: string) => void;
-  size?: ResourceBadgeSize;
-  tone?: ResourceBadgeTone;
-  icon?: ReactNode;
-}
-
-const DEFAULT_SIZE: ResourceBadgeSize = "md";
-const DEFAULT_TONE: ResourceBadgeTone = "neutral";
-
-export const ResourceBadge = (props: ResourceBadgeProps) => {
-  const { fileName, onSelect, onRemove, size = DEFAULT_SIZE, tone = DEFAULT_TONE, icon, ...rest } = props;
-  const IconComp: LucideIcon = getFileTypeIcon(fileName);
-  const sizeStyles = SIZE_STYLES[size];
-  const toneStyles = TONE_STYLES[tone];
-
-  return (
-    <chakra.span
-      display="flex"
-      flexDirection="row"
-      alignItems="center"
-      borderRadius="xs"
-      gap="2xs"
-      cursor={onSelect ? "pointer" : "default"}
-      {...toneStyles}
-      {...sizeStyles.container}
-      onClick={(e) => {
-        e.stopPropagation();
-        onSelect?.(fileName);
-      }}
-      {...rest}
-    >
-      <chakra.span mr="xs" display="inline-flex">
-        {icon ?? <IconComp size={sizeStyles.iconSize} />}
-      </chakra.span>
-      <Tooltip content={fileName}>
-        <Text
-          maxW={{ base: "14rem" }}
-          textOverflow="ellipsis"
-          whiteSpace="nowrap"
-          overflow="hidden"
-          textStyle={sizeStyles.textStyle}
-        >
-          {fileName}
-        </Text>
-      </Tooltip>
-      <Spacer />
-      {onRemove && (
-        <IconButton
-          aria-label="Remove reference"
-          size="2xs"
-          ml="xs"
-          variant="ghost"
-          _hover={{
-            bg: "transparent",
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove?.(fileName);
-          }}
-        >
-          <X size={12} />
-        </IconButton>
-      )}
-    </chakra.span>
-  );
-};

package/src/components/rich-text/collaborative-markdown-editor/awareness-cursors.tsx

@@ -1,45 +0,0 @@
-/**
- * Injects CSS for Yjs awareness cursor rendering in the collaborative editor.
- * @lexical/yjs injects cursor elements with data-* attributes; this styles them.
- */
-export function AwarenessCursorsCSS() {
-  return (
-    <style>
-      {`
-        .collaboration-cursor-container {
-          position: relative;
-          display: inline;
-        }
-
-        .collaboration-cursor-caret {
-          position: absolute;
-          top: 0;
-          bottom: 0;
-          width: 2px;
-          pointer-events: none;
-        }
-
-        .collaboration-cursor-label {
-          position: absolute;
-          top: -18px;
-          left: -2px;
-          padding: 1px 6px;
-          font-size: 11px;
-          font-weight: 600;
-          line-height: 16px;
-          white-space: nowrap;
-          border-radius: 4px 4px 4px 0;
-          color: #fff;
-          pointer-events: none;
-          user-select: none;
-        }
-
-        .collaboration-cursor-selection {
-          position: absolute;
-          pointer-events: none;
-          opacity: 0.25;
-        }
-      `}
-    </style>
-  );
-}