@maestro-js/agent-skills 1.0.0-alpha.2 → 1.0.0-alpha.21

package/skills/maestro-examples/references/setlist/setlist-web/app/app.css

@@ -0,0 +1,158 @@
+@import 'tailwindcss';
+
+@theme {
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  --color-positive-50: var(--color-emerald-50);
+  --color-positive-100: var(--color-emerald-100);
+  --color-positive-200: var(--color-emerald-200);
+  --color-positive-300: var(--color-emerald-300);
+  --color-positive-400: var(--color-emerald-400);
+  --color-positive-500: var(--color-emerald-500);
+  --color-positive-600: var(--color-emerald-600);
+  --color-positive-700: var(--color-emerald-700);
+  --color-positive-800: var(--color-emerald-800);
+  --color-positive-900: var(--color-emerald-900);
+  --color-positive-950: var(--color-emerald-950);
+
+  --color-negative-50: var(--color-red-50);
+  --color-negative-100: var(--color-red-100);
+  --color-negative-200: var(--color-red-200);
+  --color-negative-300: var(--color-red-300);
+  --color-negative-400: var(--color-red-400);
+  --color-negative-500: var(--color-red-500);
+  --color-negative-600: var(--color-red-600);
+  --color-negative-700: var(--color-red-700);
+  --color-negative-800: var(--color-red-800);
+  --color-negative-900: var(--color-red-900);
+  --color-negative-950: var(--color-red-950);
+
+  --color-neutral-50: var(--color-gray-50);
+  --color-neutral-100: var(--color-gray-100);
+  --color-neutral-200: var(--color-gray-200);
+  --color-neutral-300: var(--color-gray-300);
+  --color-neutral-400: var(--color-gray-400);
+  --color-neutral-500: var(--color-gray-500);
+  --color-neutral-600: var(--color-gray-600);
+  --color-neutral-700: var(--color-gray-700);
+  --color-neutral-800: var(--color-gray-800);
+  --color-neutral-900: var(--color-gray-900);
+  --color-neutral-950: var(--color-gray-950);
+
+  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+}
+
+/* Base styles */
+html {
+  @apply h-full antialiased;
+}
+
+body {
+  @apply h-full bg-white text-neutral-900 font-sans text-sm leading-relaxed;
+}
+
+/* Interactive element base states */
+button,
+[role='button'] {
+  @apply cursor-pointer;
+}
+
+a,
+button,
+[role='button'],
+input,
+select,
+textarea {
+  @apply outline-none focus-visible:ring-2 focus-visible:ring-primary-500/40 focus-visible:ring-offset-1 rounded-sm;
+}
+
+/* Sidebar item styles */
+.sidebar-item {
+  @apply flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-neutral-700 transition-colors duration-100;
+}
+
+.sidebar-item:hover {
+  @apply bg-neutral-200/60 text-neutral-900;
+}
+
+.sidebar-item.active {
+  @apply bg-primary-100 text-primary-800 font-medium;
+}
+
+/* Plain checkbox: position the native input over the visual indicator so it is clickable */
+.checkbox-plain {
+  position: relative;
+}
+
+.checkbox-plain > span:first-child {
+  clip: auto !important;
+  clip-path: none !important;
+  width: 100% !important;
+  height: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  inset: 0 !important;
+  overflow: hidden !important;
+}
+
+.checkbox-plain > span:first-child input[type='checkbox'] {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  opacity: 0 !important;
+  cursor: pointer;
+  margin: 0;
+  z-index: 10;
+}
+
+/* Task checkbox transition */
+.task-checkbox {
+  @apply h-[18px] w-[18px] shrink-0 rounded-full border-2 border-neutral-300 transition-all duration-200
+    cursor-pointer hover:border-primary-400;
+}
+
+.task-checkbox.completed {
+  @apply border-positive-500 bg-positive-500;
+}
+
+/* Context menu & floating elements */
+.floating-panel {
+  @apply rounded-lg border border-neutral-200 bg-white shadow-lg shadow-neutral-900/8;
+}
+
+/* Smooth transitions for drag and state changes */
+.transition-smooth {
+  @apply transition-all duration-150 ease-in-out;
+}
+
+/* Typography utilities */
+.typography-h1 {
+  @apply text-2xl font-semibold tracking-tight text-balance text-neutral-900;
+}
+
+.typography-h2 {
+  @apply text-base font-semibold text-neutral-900;
+}
+
+.typography-h3 {
+  @apply text-sm font-semibold text-neutral-900;
+}
+
+.typography-link {
+  @apply text-sm font-medium text-blue-600 hover:text-blue-500;
+}
+
+.typography-button {
+  @apply text-sm font-medium;
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/alert-dialog.tsx

@@ -0,0 +1,153 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add alert-dialog --directory app
+
+import * as React from 'react'
+import { Dialog, Modal, ModalOverlay, Heading } from 'react-aria-components'
+import { tw } from '../utils/tw'
+import { Icon } from './icon'
+import { Button } from './button'
+import { ButtonGroupContext } from './button-group'
+import { ButtonContext } from './helpers/button-context'
+
+export type AlertDialogProps = {
+  title: string
+  description?: string
+  variant?: 'info' | 'positive' | 'neutral' | 'negative' | 'notice'
+  icon?: React.ReactNode
+  children?: React.ReactNode | ((props: { close(): void }) => React.ReactNode)
+  isOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  isDismissable?: boolean
+  className?: string
+}
+
+const variantStyles = {
+  info: {
+    container: 'border-info-500/20',
+    icon: 'text-info-500',
+    iconBg: 'bg-info-500/10',
+    header: 'text-info-500'
+  },
+  positive: {
+    container: 'border-positive-200',
+    icon: 'text-positive-600',
+    iconBg: 'bg-positive-100',
+    header: 'text-positive-800'
+  },
+  notice: {
+    container: 'border-notice-200',
+    icon: 'text-notice-600',
+    iconBg: 'bg-notice-100',
+    header: 'text-notice-800'
+  },
+  negative: {
+    container: 'border-negative-200',
+    icon: 'text-negative-600',
+    iconBg: 'bg-negative-100',
+    header: 'text-negative-800'
+  },
+  neutral: {
+    container: 'border-neutral-200',
+    icon: 'text-neutral-600',
+    iconBg: 'bg-neutral-100',
+    header: 'text-neutral-700'
+  }
+}
+
+const defaultIconNames = {
+  info: 'information-circle',
+  positive: 'check',
+  neutral: 'information-circle',
+  negative: 'x-mark',
+  notice: 'exclamation-triangle'
+} as const
+
+interface AlertDialogContextValue {
+  close(): void
+}
+
+const AlertDialogContext = React.createContext<AlertDialogContextValue>({ close: () => undefined })
+
+function AlertDialog_({
+  description,
+  title,
+  variant = 'info',
+  icon,
+  isOpen,
+  onOpenChange,
+  isDismissable = true,
+  className,
+  children
+}: AlertDialogProps) {
+  const displayIcon = icon !== undefined ? icon : <Icon name={defaultIconNames[variant]} className="h-8 w-8" />
+  const styles = variantStyles[variant]
+
+  return (
+    <ModalOverlay
+      isOpen={isOpen}
+      onOpenChange={onOpenChange}
+      isDismissable={isDismissable}
+      isKeyboardDismissDisabled={!isDismissable}
+      className={tw(
+        'fixed inset-0 z-[4000] flex items-center justify-center bg-black/25 backdrop-blur-sm',
+        'transition-opacity duration-200 ease-out',
+        'data-[entering]:opacity-0',
+        'data-[exiting]:opacity-0'
+      )}
+    >
+      <Modal
+        className={tw(
+          'w-[calc(100%-2rem)] max-w-sm',
+          'transition-all duration-200 ease-out',
+          'data-[entering]:scale-95 data-[entering]:opacity-0 data-[entering]:translate-y-2',
+          'data-[exiting]:scale-95 data-[exiting]:opacity-0 data-[exiting]:translate-y-2'
+        )}
+      >
+        <Dialog className={tw('outline-none bg-white rounded-xl shadow-xl ring-1 ring-black/5 w-full', className)} role="alertdialog">
+          {({ close }) => (
+            <AlertDialogContext.Provider value={{ close }}>
+              <ButtonGroupContext.Provider
+                value={{ orientation: 'horizontal', alignment: 'center', fullWidth: true, className: 'flex-nowrap' }}
+              >
+                <ButtonContext.Provider value={{ shape: 'rectangle', variant: 'soft', fullWidth: true }}>
+                  <div className={tw('border rounded-xl p-6', styles.container)}>
+                    <div className="flex flex-col items-center text-center">
+                      {displayIcon && (
+                        <div className={tw('w-12 h-12 rounded-xl flex items-center justify-center mb-4', styles.iconBg)}>
+                          <div className={tw(styles.icon)}>{displayIcon}</div>
+                        </div>
+                      )}
+                      <Heading
+                        slot="title"
+                        className={tw('text-xl font-semibold', description ? 'mb-2' : 'mb-5', styles.header)}
+                      >
+                        {title}
+                      </Heading>
+                      {description && <div className="text-sm text-neutral-600 mb-5">{description}</div>}
+                      {typeof children === 'function' ? children({ close }) : children}
+                    </div>
+                  </div>
+                </ButtonContext.Provider>
+              </ButtonGroupContext.Provider>
+            </AlertDialogContext.Provider>
+          )}
+        </Dialog>
+      </Modal>
+    </ModalOverlay>
+  )
+}
+
+AlertDialog_.displayName = 'AlertDialog'
+
+function CancelButton({ children = 'Cancel' }: { children?: React.ReactNode }) {
+  const context = React.useContext(AlertDialogContext)
+  return (
+    <Button color="neutral" onClick={context.close} variant="soft" shape="rectangle">
+      {children}
+    </Button>
+  )
+}
+
+export const AlertDialog = Object.assign(AlertDialog_, {
+  CancelButton
+})

package/skills/maestro-examples/references/setlist/setlist-web/app/components/app-dnd-provider.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react'
+import {
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  KeyboardSensor,
+  useSensor,
+  useSensors,
+  type DragStartEvent,
+  type DragOverEvent,
+  type DragEndEvent,
+  type UniqueIdentifier
+} from '@dnd-kit/core'
+import { isSidebarId, isSidebarDropTarget } from './dnd-utils'
+import { createCollisionDetection } from './dnd-collision-detection'
+import { DragGhost } from './drag-ghost'
+import { useMoveTask } from '~/hooks/use-task-actions'
+import { useFetcherComplete } from '~/utils/use-fetcher-complete'
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+type DragType = 'task' | 'sidebar'
+
+interface ActiveDrag {
+  type: DragType
+  subType?: 'area' | 'project'
+  id: UniqueIdentifier
+  title: string
+}
+
+interface AppDndContextValue {
+  activeDrag: ActiveDrag | null
+  overDroppableId: UniqueIdentifier | null
+  pendingMoveTaskId: number | null
+  registerDragEndHandler: (key: string, handler: (event: DragEndEvent) => void) => () => void
+}
+
+// ── Context ──────────────────────────────────────────────────────────────────
+
+const AppDndReactContext = React.createContext<AppDndContextValue>({
+  activeDrag: null,
+  overDroppableId: null,
+  pendingMoveTaskId: null,
+  registerDragEndHandler: () => () => {}
+})
+
+export function useAppDnd() {
+  return React.useContext(AppDndReactContext)
+}
+
+export function useRegisterDragEndHandler(key: string, handler: ((event: DragEndEvent) => void) | null) {
+  const { registerDragEndHandler } = useAppDnd()
+
+  // Keep handler in a ref so re-renders don't cause unregister/register cycles.
+  // This avoids a gap where the handler is undefined between effect cleanup and setup.
+  const handlerRef = React.useRef(handler)
+  handlerRef.current = handler
+
+  React.useEffect(() => {
+    // Register a stable wrapper that delegates to the latest handler via ref
+    const stableHandler = (event: DragEndEvent) => {
+      handlerRef.current?.(event)
+    }
+    return registerDragEndHandler(key, stableHandler)
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: key and registerDragEndHandler don't change
+  }, [key, registerDragEndHandler])
+}
+
+// ── Provider ─────────────────────────────────────────────────────────────────
+
+export function AppDndProvider({ children }: { children: React.ReactNode }) {
+  const [activeDrag, setActiveDrag] = React.useState<ActiveDrag | null>(null)
+  const [overDroppableId, setOverDroppableId] = React.useState<UniqueIdentifier | null>(null)
+  const [pendingMoveTaskId, setPendingMoveTaskId] = React.useState<number | null>(null)
+
+  const moveTask = useMoveTask()
+  const handlersRef = React.useRef(new Map<string, (event: DragEndEvent) => void>())
+  const activeDragRef = React.useRef<ActiveDrag | null>(null)
+
+  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }), useSensor(KeyboardSensor))
+
+  useFetcherComplete(moveTask, () => setPendingMoveTaskId(null))
+
+  const registerDragEndHandler = React.useCallback((key: string, handler: (event: DragEndEvent) => void) => {
+    handlersRef.current.set(key, handler)
+    return () => {
+      handlersRef.current.delete(key)
+    }
+  }, [])
+
+  const collisionDetection = React.useMemo(() => createCollisionDetection(() => activeDragRef.current?.type ?? null), [])
+
+  const handleDragStart = React.useCallback((event: DragStartEvent) => {
+    const id = event.active.id
+    const data = event.active.data.current
+    const title = String(data?.title ?? '')
+    const str = String(id)
+
+    let drag: ActiveDrag
+    if (str.startsWith('area-')) {
+      drag = { type: 'sidebar', subType: 'area', id, title }
+    } else if (str.startsWith('project-')) {
+      drag = { type: 'sidebar', subType: 'project', id, title }
+    } else {
+      drag = { type: 'task', id, title }
+    }
+
+    activeDragRef.current = drag
+    setActiveDrag(drag)
+  }, [])
+
+  const handleDragOver = React.useCallback((event: DragOverEvent) => {
+    setOverDroppableId(event.over?.id ?? null)
+  }, [])
+
+  const handleDragEnd = React.useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event
+      const dragType = activeDragRef.current?.type ?? (isSidebarId(active.id) ? 'sidebar' : 'task')
+
+      activeDragRef.current = null
+      setActiveDrag(null)
+      setOverDroppableId(null)
+
+      if (!over || active.id === over.id) return
+
+      // Cross-container: task dropped on sidebar item
+      if (dragType === 'task' && isSidebarDropTarget(over.id)) {
+        const taskId = Number(active.id)
+        const target = String(over.id)
+
+        let projectId = ''
+        let areaId = ''
+
+        if (target.startsWith('project-')) {
+          projectId = target.slice('project-'.length)
+        } else if (target.startsWith('area-')) {
+          areaId = target.slice('area-'.length)
+        }
+        // droppable-inbox: both empty → clears project/area
+
+        setPendingMoveTaskId(taskId)
+        moveTask.submit(taskId, { projectId, areaId })
+        return
+      }
+
+      // Delegate to registered handler
+      const handler = handlersRef.current.get(dragType)
+      handler?.(event)
+    },
+    [moveTask]
+  )
+
+  const handleDragCancel = React.useCallback(() => {
+    activeDragRef.current = null
+    setActiveDrag(null)
+    setOverDroppableId(null)
+  }, [])
+
+  const contextValue = React.useMemo<AppDndContextValue>(
+    () => ({ activeDrag, overDroppableId, pendingMoveTaskId, registerDragEndHandler }),
+    [activeDrag, overDroppableId, pendingMoveTaskId, registerDragEndHandler]
+  )
+
+  return (
+    <AppDndReactContext.Provider value={contextValue}>
+      <DndContext
+        sensors={sensors}
+        collisionDetection={collisionDetection}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onDragCancel={handleDragCancel}
+      >
+        {children}
+        <DragOverlay>{activeDrag && <DragGhost activeDrag={activeDrag} />}</DragOverlay>
+      </DndContext>
+    </AppDndReactContext.Provider>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/area-form.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react'
+import { useFetcher, useNavigation } from 'react-router'
+import { HeadlessForm } from '@maestro-js/form'
+import { Form } from '~/components/form'
+import { TextField } from './text-field'
+import { Button } from './button'
+import { useFetcherComplete } from '~/utils/use-fetcher-complete'
+
+export type AreaFormProps = {
+  mode: 'inline' | 'full'
+  action: string
+  actionName?: string
+  defaultValues?: { title: string }
+  inputClassName?: string
+  onCancel?: () => void
+  onSuccess?: () => void
+}
+
+export function AreaForm({ mode, action, actionName, defaultValues, inputClassName, onCancel, onSuccess }: AreaFormProps) {
+  const fetcher = useFetcher()
+  const navigation = useNavigation()
+
+  const [title, setTitle] = React.useState(defaultValues?.title ?? '')
+
+  const isSubmitting = mode === 'inline' ? fetcher.state !== 'idle' : navigation.state !== 'idle'
+
+  useFetcherComplete(fetcher, () => onSuccess?.())
+
+  if (mode === 'inline') {
+    return (
+      <HeadlessForm
+        as={fetcher.Form}
+        method="post"
+        action={action}
+        className="min-w-0 flex-1"
+        onSubmit={(e) => {
+          if (!title.trim()) {
+            e.preventDefault()
+            onCancel?.()
+          }
+        }}
+      >
+        {actionName && <input type="hidden" name="_action" value={actionName} />}
+        <input
+          type="text"
+          name="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="Area title..."
+          className={inputClassName ?? 'w-full bg-transparent text-sm text-neutral-900 placeholder-neutral-400 outline-none'}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              e.preventDefault()
+              onCancel?.()
+            }
+          }}
+          onBlur={(e) => {
+            if (title.trim() && title.trim() !== (defaultValues?.title ?? '')) {
+              e.currentTarget.form?.requestSubmit()
+            } else {
+              onCancel?.()
+            }
+          }}
+          disabled={isSubmitting}
+          autoComplete="off"
+          maxLength={255}
+          autoFocus
+        />
+      </HeadlessForm>
+    )
+  }
+
+  const serverError =
+    fetcher.data && typeof fetcher.data === 'object' && 'formSubmissionError' in fetcher.data
+      ? (fetcher.data as { formSubmissionError: { issues: { path: string; message: string }[] } }).formSubmissionError
+      : null
+
+  const titleServerError = serverError?.issues.find((i) => i.path === 'title')?.message
+
+  return (
+    <Form method="post" action={action} className="space-y-4">
+      {actionName && <Form.HiddenInput name="_action" value={actionName} form={undefined} />}
+
+      <TextField
+        name="title"
+        label="Title"
+        value={title}
+        onChange={setTitle}
+        isRequired
+        maxLength={255}
+        placeholder="Area title"
+        autoFocus
+        validate={(value) => {
+          if (!value || value.trim().length === 0) return 'Title is required'
+          if (value.length > 255) return 'Title must be 255 characters or less'
+          return undefined
+        }}
+        warningMessage={titleServerError}
+      />
+
+      <div className="flex items-center gap-3">
+        <Button type="submit" variant="contained" color="primary" size="sm" isPending={isSubmitting}>
+          Save
+        </Button>
+        {onCancel && (
+          <Button type="button" variant="soft" color="neutral" size="sm" onClick={onCancel}>
+            Cancel
+          </Button>
+        )}
+      </div>
+    </Form>
+  )
+}

package/skills/maestro-examples/references/setlist/setlist-web/app/components/button-group.tsx

@@ -0,0 +1,78 @@
+// From @maestro-js/components
+// Install with: pnpm maestro components:add button-group --directory app
+
+import * as React from 'react'
+import { mergeProps } from '@react-aria/utils'
+import { tw } from '../utils/tw'
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical'
+export type ButtonGroupAlignment = 'start' | 'center' | 'end'
+export type ButtonGroupSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+export type ButtonGroupProps = {
+  orientation?: ButtonGroupOrientation
+  alignment?: ButtonGroupAlignment
+  size?: ButtonGroupSize
+  className?: string
+  children?: React.ReactNode
+  'aria-label'?: string
+  'aria-labelledby'?: string
+  'aria-describedby'?: string
+  fullWidth?: boolean
+}
+
+export const ButtonGroupContext = React.createContext<{
+  orientation?: ButtonGroupOrientation
+  alignment?: ButtonGroupAlignment
+  size?: ButtonGroupSize
+  fullWidth?: boolean
+  className?: string
+}>({})
+
+const sizeGapClasses: Record<ButtonGroupSize, string> = {
+  xl: 'gap-4',
+  lg: 'gap-3',
+  md: 'gap-2',
+  sm: 'gap-1',
+  xs: 'gap-0.5'
+}
+
+const alignmentClasses: Record<ButtonGroupAlignment, string> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end'
+}
+
+export function ButtonGroup(inputProps: ButtonGroupProps) {
+  const context = React.useContext(ButtonGroupContext)
+  const {
+    orientation = 'horizontal',
+    alignment = 'end',
+    size = 'md',
+    className,
+    children,
+    fullWidth,
+    ...ariaProps
+  } = mergeProps(React.useContext(ButtonGroupContext), inputProps)
+
+  return (
+    <div
+      role="group"
+      aria-label={ariaProps['aria-label']}
+      aria-labelledby={ariaProps['aria-labelledby']}
+      aria-describedby={ariaProps['aria-describedby']}
+      className={tw(
+        'inline-flex w-fit',
+        sizeGapClasses[size],
+        orientation === 'horizontal' ? 'flex-row items-center flex-wrap' : 'flex-col',
+        alignmentClasses[alignment],
+        fullWidth && 'w-full',
+        className
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+ButtonGroup.displayName = 'ButtonGroup'