create-yss-spec 3.5.2 → 3.5.4

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/theme.css

@@ -0,0 +1,107 @@
+@theme inline {
+  --font-sans: var(--brand-font-family);
+  --color-background: var(--brand-color-bg-container);
+  --color-foreground: var(--brand-color-text);
+  --color-primary: var(--yss-color-primary-control);
+  --color-primary-foreground: var(--yss-color-on-primary);
+  --color-secondary: var(--brand-color-fill-secondary);
+  --color-secondary-foreground: var(--brand-color-text);
+  --color-muted: var(--brand-color-bg-layout);
+  --color-muted-foreground: var(--brand-color-text-secondary);
+  --color-accent: var(--yss-colors-primary-bg, var(--brand-color-primary-bg));
+  --color-accent-foreground: var(--brand-color-text);
+  --color-destructive: var(--brand-color-error-active);
+  --color-border: var(--brand-color-border);
+  --color-input: var(--brand-color-border);
+  --color-ring: var(--yss-color-primary-control);
+  --color-popover: var(--brand-color-bg-elevated);
+  --color-popover-foreground: var(--brand-color-text);
+  --radius-lg: var(--brand-border-radius-lg);
+  --radius-md: var(--brand-border-radius);
+  --radius-sm: var(--brand-border-radius-sm);
+}
+@layer base { * { border-color:var(--brand-color-border); } }
+/* Layout and density come from ../prototype-theme.css. */
+/* New groups map existing roles; upstream files remain byte-for-byte original. */
+[data-slot="combobox-anchor"] {width:100%;border:1px solid var(--brand-color-border);border-radius:var(--brand-border-radius)}
+[data-slot="command-input-wrapper"] {height:var(--prototype-control-height);border:0;padding-inline:var(--brand-size-xs)}
+[data-slot="command-input"] {min-width:0;height:100%;min-height:0;border:0;padding:0;font:inherit;box-shadow:none}
+[data-slot="combobox-list"] {width:min(24rem,calc(100vw - var(--brand-size)));max-height:var(--reka-combobox-content-available-height);overflow:auto;background:var(--brand-color-bg-elevated);color:var(--brand-color-text);box-shadow:none}
+[data-slot="combobox-item"] {min-height:var(--prototype-control-height);white-space:normal;overflow-wrap:anywhere;font:inherit}
+[data-slot="combobox-item"][data-highlighted] {background:var(--brand-color-primary-bg)}
+[data-slot="popover-content"] {background:var(--brand-color-bg-elevated);color:var(--brand-color-text);box-shadow:none}
+[data-slot="range-calendar"] {padding:var(--brand-size-xs) 0;max-width:100%}
+[data-slot="range-calendar-trigger"] {width:100%;min-width:0;padding:0;font:inherit}
+[data-slot="range-calendar-grid"] {display:block;width:100%;min-width:0;table-layout:fixed}
+[data-slot="range-calendar-grid-head"],[data-slot="range-calendar-grid-body"] {display:block;width:100%}
+[data-slot="range-calendar-grid-row"] {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%}
+[data-slot="range-calendar-head-cell"] {width:auto;padding:var(--brand-size-xxs);font:inherit}
+[data-slot="range-calendar-cell"] {padding:0}
+[data-slot="range-calendar-trigger"][data-selected] {background:var(--brand-color-primary-bg);color:var(--brand-color-text)}
+[data-slot="range-calendar-trigger"]:is([data-selection-start],[data-selection-end]) {background:var(--yss-color-primary-control);color:var(--yss-color-on-primary)}
+[data-slot="range-calendar-prev-button"],[data-slot="range-calendar-next-button"] {opacity:1;min-width:var(--prototype-control-height);color:var(--brand-color-text)}
+/* Vue's upstream Button omits data-variant when using its default value.
+   Map that actual DOM, and AlertDialogAction, to the same project interaction tokens. */
+:is([data-slot="button"]:not([data-variant]),[data-slot="alert-dialog-action"]):not(:disabled):not([data-disabled]) {background:var(--yss-color-primary-control);color:var(--yss-color-on-primary)}
+:is([data-slot="button"]:not([data-variant]),[data-slot="alert-dialog-action"]):hover:not(:disabled):not([data-disabled]) {background:var(--yss-color-primary-control-hover)}
+:is([data-slot="button"]:not([data-variant]),[data-slot="alert-dialog-action"]):active:not(:disabled):not([data-disabled]) {background:var(--yss-colors-primary-active, var(--brand-color-primary-active))}
+[data-slot="select-trigger"] {width:100%}
+[data-slot="select-content"] {background:var(--brand-color-bg-elevated);color:var(--brand-color-text);box-shadow:none}
+[data-slot="select-item"] {font-size:inherit;min-height:var(--prototype-control-height);padding-block:var(--brand-size-xxs)}
+[data-slot="select-item"][data-highlighted] {background:var(--yss-colors-primary-bg, var(--brand-color-primary-bg))}
+[data-slot="checkbox"] {width:var(--brand-size);height:var(--brand-size);min-height:var(--brand-size);padding:0;position:relative;background:var(--brand-color-bg-container);border-color:var(--brand-color-border);border-radius:var(--brand-border-radius-sm);box-shadow:none}
+[data-slot="checkbox"]::after {content:"";position:absolute;inset:calc(var(--brand-size-xxs) * -1)}
+[data-slot="checkbox"][data-state="checked"] {background:var(--yss-color-primary-control);color:var(--yss-color-on-primary)}
+[data-slot="tabs-list"] {height:auto;padding:0;gap:var(--brand-size-sm);background:transparent;border-radius:0;border-bottom:1px solid var(--brand-color-border-secondary)}
+[data-slot="tabs-trigger"] {position:relative;height:var(--prototype-control-height);min-height:var(--prototype-control-height);padding-inline:var(--brand-size-xs);color:var(--brand-color-text-secondary);font-size:inherit;background:transparent;border:0;border-radius:0;box-shadow:none}
+[data-slot="tabs-trigger"]::after {content:"";position:absolute;inset:auto var(--brand-size-xs) -1px;height:2px;background:transparent;border-radius:var(--brand-border-radius-sm);transition:background-color var(--brand-motion-duration-fast) var(--brand-motion-ease-in-out)}
+[data-slot="tabs-trigger"][data-state="active"] {background:transparent;color:var(--yss-color-primary-control);box-shadow:none}
+[data-slot="tabs-trigger"][data-state="active"]::after {background:var(--yss-color-primary-control)}
+
+/* Local role mapping. Vendored source bytes remain identical to the pinned revision. */
+[data-slot="card"] {gap:var(--brand-size-sm);padding:var(--prototype-surface-padding);border-radius:var(--brand-border-radius-lg);box-shadow:none;background:var(--brand-color-bg-container)}
+[data-slot="card-header"],[data-slot="card-content"],[data-slot="card-footer"] {padding:0;gap:var(--brand-size-xxs)}
+[data-slot="card-title"] {font-size:inherit;line-height:inherit;font-weight:var(--brand-font-weight-strong)}
+[data-slot="card-description"],[data-slot="field-description"],[data-slot="sheet-description"],[data-slot="empty-description"] {font-size:inherit;line-height:inherit;color:var(--brand-color-text-secondary)}
+[data-slot="separator"] {background:var(--brand-color-border-secondary);margin-block:var(--brand-size-sm)}
+[data-slot="breadcrumb-list"] {gap:var(--brand-size-xs);font-size:inherit;line-height:inherit;color:var(--brand-color-text-secondary)}
+[data-slot="breadcrumb-page"] {color:var(--brand-color-text)}
+[data-slot="field"],[data-slot="field-content"] {gap:var(--brand-size-xxs);color:var(--brand-color-text)}
+[data-slot="field-group"],[data-slot="field-set"] {gap:var(--brand-size-sm)}
+[data-slot="field-label"],[data-slot="field-legend"] {font-size:inherit;line-height:inherit;margin:0;font-weight:var(--brand-font-weight-strong)}
+[data-slot="field-description"] {margin:0}
+[data-slot="field-error"] {font-size:inherit;color:var(--brand-color-error-active)}
+[data-slot="field-separator"] {margin:0;height:var(--brand-size-lg)}
+[data-slot="input-group"] {height:var(--prototype-control-height);min-height:var(--prototype-control-height);border-radius:var(--brand-border-radius);border-color:var(--brand-color-border);background:var(--brand-color-bg-container);box-shadow:none;gap:0}
+[data-slot="input-group"]:focus-within {outline:2px solid var(--yss-color-primary-control);outline-offset:2px}
+[data-slot="input-group"]:has([aria-invalid="true"]) {border-color:var(--brand-color-error-active)}
+[data-slot="input-group"]>[data-slot="input-group-control"] {border:0!important;border-radius:0;box-shadow:none;outline:none;background:transparent;font-size:inherit;height:100%;min-height:0;min-width:0;padding-inline:var(--brand-size-xs)}
+[data-slot="input-group"]:has(>textarea) {height:auto;min-height:calc(var(--prototype-control-height) * 3)}
+[data-slot="input-group"]>[data-slot="input-group-control"]:is(textarea) {padding:var(--brand-size-xs);min-height:calc(var(--prototype-control-height) * 3)}
+[data-slot="input-group-addon"] {margin:0;padding:0 var(--brand-size-xs);font-size:inherit;line-height:inherit;gap:var(--brand-size-xxs);color:var(--brand-color-text-secondary)}
+[data-slot="input-group-addon"]>[data-slot="button"] {height:calc(var(--prototype-control-height) - 2px);min-height:calc(var(--prototype-control-height) - 2px);padding-inline:var(--brand-size-xs)}
+[data-slot="alert"] {font-size:inherit;line-height:inherit;padding:var(--brand-size-xs) var(--brand-size-sm);border-radius:var(--brand-border-radius);color:var(--brand-color-text)}
+[data-slot="alert-description"] {font-size:inherit;line-height:inherit;color:inherit;gap:var(--brand-size-xxs)}
+[data-slot="empty"] {padding:var(--prototype-surface-padding);gap:var(--brand-size-sm)}
+[data-slot="empty-header"] {gap:var(--brand-size-xxs)}
+[data-slot="empty-title"] {font-size:var(--yss-typography-heading-md-font-size);font-weight:var(--brand-font-weight-strong)}
+[data-slot="skeleton"] {background:var(--brand-color-fill-secondary);border-radius:var(--brand-border-radius-sm)}
+[data-slot="spinner"] {width:var(--brand-size);height:var(--brand-size);display:inline-block;margin-right:var(--brand-size-xs);vertical-align:middle}
+[data-slot="sheet-content"] {width:min(480px,100%);max-width:100%;height:100dvh;overflow-y:auto;padding:var(--yss-components-modal-default-padding);gap:var(--brand-size-sm);background:var(--brand-color-bg-elevated);color:var(--brand-color-text);box-shadow:none;border-color:var(--brand-color-border)}
+[data-slot="sheet-header"],[data-slot="sheet-footer"] {padding:0;gap:var(--brand-size-xs)}
+[data-slot="sheet-title"] {font-size:var(--yss-typography-heading-md-font-size);line-height:var(--yss-typography-heading-md-line-height);font-weight:var(--brand-font-weight-strong)}
+[data-slot="sheet-overlay"] {background:var(--brand-color-text-quaternary)}
+[data-slot="sheet-content"]>button.absolute {width:var(--prototype-control-height);padding:0;display:grid;place-items:center;opacity:1;top:var(--brand-size-xs);right:var(--brand-size-xs)}
+[data-slot="dropdown-menu-content"] {max-width:calc(100vw - var(--brand-size-lg));padding:var(--brand-size-xxs);background:var(--brand-color-bg-elevated);border-color:var(--brand-color-border);color:var(--brand-color-text);border-radius:var(--brand-border-radius);box-shadow:none}
+[data-slot="dropdown-menu-item"] {min-height:var(--prototype-control-height);padding:var(--brand-size-xxs) var(--brand-size-xs);font-size:inherit;line-height:inherit;gap:var(--brand-size-xs);border-radius:var(--brand-border-radius-sm)}
+[data-slot="dropdown-menu-item"][data-highlighted] {background:var(--yss-colors-primary-bg);color:var(--brand-color-text)}
+[data-slot="dropdown-menu-item"][data-disabled] {color:var(--brand-color-text-tertiary);opacity:1}
+[data-slot="tooltip-content"] {font-size:var(--brand-font-size-sm);line-height:inherit;background:var(--brand-color-text);color:var(--brand-color-bg-container);border:0;border-radius:var(--brand-border-radius);padding:var(--brand-size-xxs) var(--brand-size-xs);max-width:calc(100vw - var(--brand-size-lg))}
+/* Reka positions the arrow wrapper. Clear the upstream decorative square transform. */
+[data-slot="tooltip-content"]>span>svg {fill:var(--brand-color-text);background:transparent;transform:none;translate:none;rotate:none;border-radius:0;width:var(--brand-size-xs);height:var(--brand-size-xxs)}
+[data-slot="pagination"] {justify-content:flex-end;margin-block:var(--brand-size-sm);color:var(--brand-color-text)}
+[data-slot="pagination-content"] {gap:var(--brand-size-xs);flex-wrap:wrap;list-style:none;padding:0}
+[data-slot="pagination-link"] {height:var(--prototype-control-height);min-width:var(--prototype-control-height);font-size:inherit;border-radius:var(--brand-border-radius);color:var(--brand-color-text)}
+@media(max-width:576px) {[data-slot="sheet-content"] {padding:var(--brand-size-sm)}[data-slot="card"] {padding:var(--brand-size-sm)}}
+
+[data-slot="input-group-addon"]>span {font-size:inherit}

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert/Alert.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { AlertVariants } from "."
+import { cn } from "@/lib/utils"
+import { alertVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: AlertVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    :class="cn(alertVariants({ variant }), props.class)"
+    role="alert"
+  >
+    <slot />
+  </div>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert/AlertDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-description"
+    :class="cn('text-muted-foreground col-start-2 text-sm [&_p]:leading-relaxed', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert/AlertTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-title"
+    :class="cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert/index.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Alert } from "./Alert.vue"
+export { default as AlertDescription } from "./AlertDescription.vue"
+export { default as AlertTitle } from "./AlertTitle.vue"
+
+export const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type AlertVariants = VariantProps<typeof alertVariants>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
+import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </AlertDialogRoot>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { AlertDialogActionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogAction } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { AlertDialogCancelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogCancel } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/registry/new-york-v4/ui/button"
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogContent,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      data-slot="alert-dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80"
+    />
+    <AlertDialogContent
+      data-slot="alert-dialog-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { AlertDialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  AlertDialogDescription,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogDescription
+    data-slot="alert-dialog-description"
+    v-bind="delegatedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-footer"
+    :class="
+      cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="alert-dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { AlertDialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { AlertDialogTitle } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <AlertDialogTitle
+    data-slot="alert-dialog-title"
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { AlertDialogTriggerProps } from "reka-ui"
+import { AlertDialogTrigger } from "reka-ui"
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from "./AlertDialog.vue"
+export { default as AlertDialogAction } from "./AlertDialogAction.vue"
+export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
+export { default as AlertDialogContent } from "./AlertDialogContent.vue"
+export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
+export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
+export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
+export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
+export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/badge/Badge.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { reactiveOmit } from "@vueuse/core"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/badge/index.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+         "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <nav
+    aria-label="breadcrumb"
+    data-slot="breadcrumb"
+    :class="props.class"
+  >
+    <slot />
+  </nav>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { MoreHorizontal } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-ellipsis"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex size-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-item"
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { Primitive } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
+  as: "a",
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ol
+    data-slot="breadcrumb-list"
+    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <span
+    data-slot="breadcrumb-page"
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('text-foreground font-normal', props.class)"
+  >
+    <slot />
+  </span>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ChevronRight } from "@lucide/vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

package/template/.pi/skills/yss-prototype-stage/assets/shadcn-vue-authoring/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from "./Breadcrumb.vue"
+export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
+export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
+export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
+export { default as BreadcrumbList } from "./BreadcrumbList.vue"
+export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"