Load video trim node (Design Prototype)

.gitignore

@@ -96,4 +96,7 @@ vitest.config.*.timestamp*
 # Weekly docs check output
 /output.txt
 
-.amp
+.amp
+.vercel
+.env*
+!.env_example

packages/design-system/src/css/style.css

@@ -266,6 +266,9 @@
   --component-node-widget-promoted: var(--color-purple-700);
   --component-node-widget-advanced: var(--color-azure-400);
 
+  --video-trim-selection-background: var(--color-datatype-CLIP, #ffd500);
+  --video-trim-playhead-background: #f0513b;
+
   /* Default UI element color palette variables */
   --palette-contrast-mix-color: #fff;
   --palette-interface-panel-surface: var(--comfy-menu-bg);
@@ -549,6 +552,10 @@
   );
   --color-component-node-widget-promoted: var(--component-node-widget-promoted);
   --color-component-node-widget-advanced: var(--component-node-widget-advanced);
+  --color-video-trim-selection-background: var(
+    --video-trim-selection-background
+  );
+  --color-video-trim-playhead-background: var(--video-trim-playhead-background);
 
   /* Semantic tokens */
   --color-base-foreground: var(--base-foreground);

src/components/ui/tooltip/Tooltip.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+// eslint-disable-next-line vue/no-unused-properties -- forwarded to Reka via useForwardPropsEmits
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>

src/components/ui/tooltip/TooltipContent.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import {
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  useForwardPropsEmits
+} from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { computed } from 'vue'
+
+import { cn } from '@comfyorg/tailwind-utils'
+
+defineOptions({
+  inheritAttrs: false
+})
+
+const {
+  sideOffset = 4,
+  class: className,
+  arrowClass,
+  ...restProps
+} = defineProps<
+  TooltipContentProps & {
+    class?: HTMLAttributes['class']
+    arrowClass?: HTMLAttributes['class']
+  }
+>()
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => ({
+  sideOffset,
+  ...restProps
+}))
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-fit rounded-md border bg-base-background px-3 py-1.5 text-sm text-base-foreground shadow-md',
+          'animate-in fade-in-0 zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          className
+        )
+      "
+    >
+      <slot />
+      <TooltipArrow
+        :class="cn('fill-base-background', arrowClass)"
+        :width="10"
+        :height="5"
+      />
+    </TooltipContent>
+  </TooltipPortal>
+</template>

src/components/ui/tooltip/TooltipHint.stories.ts

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import TooltipHint from './TooltipHint.vue'
+import Button from '@/components/ui/button/Button.vue'
+
+const meta: Meta<typeof TooltipHint> = {
+  title: 'Components/Tooltip/TooltipHint',
+  component: TooltipHint,
+  tags: ['autodocs'],
+  args: {
+    content: 'Tooltip hint',
+    side: 'top',
+    delayDuration: 300,
+    disabled: false
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { TooltipHint, Button },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex items-center justify-center p-16">
+        <TooltipHint v-bind="args">
+          <Button variant="secondary">Hover me</Button>
+        </TooltipHint>
+      </div>
+    `
+  })
+}
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    content: 'Hidden tooltip'
+  },
+  render: Default.render
+}
+
+export const IconButton: Story = {
+  args: {
+    content: 'Set start frame'
+  },
+  render: (args) => ({
+    components: { TooltipHint },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex items-center justify-center p-16">
+        <TooltipHint v-bind="args">
+          <button
+            type="button"
+            class="flex size-8 cursor-pointer items-center justify-center rounded-lg bg-component-node-widget-background text-component-node-foreground"
+            aria-label="Set start frame"
+          >
+            <i class="icon-[lucide--skip-back] size-4" />
+          </button>
+        </TooltipHint>
+      </div>
+    `
+  })
+}

src/components/ui/tooltip/TooltipHint.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { TooltipContentProps } from 'reka-ui'
+
+import Tooltip from '@/components/ui/tooltip/Tooltip.vue'
+import TooltipContent from '@/components/ui/tooltip/TooltipContent.vue'
+import TooltipProvider from '@/components/ui/tooltip/TooltipProvider.vue'
+import TooltipTrigger from '@/components/ui/tooltip/TooltipTrigger.vue'
+import { cn } from '@comfyorg/tailwind-utils'
+
+const {
+  content,
+  side = 'top',
+  sideOffset = 4,
+  delayDuration = 300,
+  disabled = false
+} = defineProps<{
+  content: string
+  side?: TooltipContentProps['side']
+  sideOffset?: number
+  delayDuration?: number
+  disabled?: boolean
+}>()
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="delayDuration">
+    <Tooltip :disabled="disabled">
+      <TooltipTrigger as-child>
+        <slot />
+      </TooltipTrigger>
+      <TooltipContent
+        :side
+        :side-offset="sideOffset"
+        :class="
+          cn(
+            'rounded-md border border-node-component-tooltip-border bg-node-component-tooltip-surface px-2.5 py-1 text-xs leading-none text-node-component-tooltip shadow-none'
+          )
+        "
+        arrow-class="fill-node-component-tooltip-surface"
+      >
+        {{ content }}
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>

src/components/ui/tooltip/TooltipProvider.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+const { ...restProps } = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="restProps">
+    <slot />
+  </TooltipProvider>
+</template>

src/components/ui/tooltip/TooltipTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const { ...restProps } = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="restProps">
+    <slot />
+  </TooltipTrigger>
+</template>