fix: improve app delete alert dialog UX (#34644)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/apps/app-card.tsx

@@ -8,11 +8,12 @@ import type { EnvironmentVariable } from '@/app/components/workflow/types'
 import type { App } from '@/types/app'
 import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import * as React from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useId, useMemo, useState } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
+import Input from '@/app/components/base/input'
 import CustomPopover from '@/app/components/base/popover'
 import TagSelector from '@/app/components/base/tag-management/selector'
 import Tooltip from '@/app/components/base/tooltip'
@@ -69,6 +70,7 @@ type AppCardProps = {
 
 const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const { t } = useTranslation()
+  const deleteAppNameInputId = useId()
   const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
   const { isCurrentWorkspaceEditor } = useAppContext()
   const { onPlanInfoChanged } = useProviderContext()
@@ -89,14 +91,12 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       await mutateDeleteApp(app.id)
       toast.success(t('appDeleted', { ns: 'app' }))
       onPlanInfoChanged()
+      setShowConfirmDelete(false)
+      setConfirmDeleteInput('')
     }
     catch (e: any) {
       toast.error(`${t('appDeleteFailed', { ns: 'app' })}${'message' in e ? `: ${e.message}` : ''}`)
     }
-    finally {
-      setShowConfirmDelete(false)
-      setConfirmDeleteInput('')
-    }
   }, [app.id, mutateDeleteApp, onPlanInfoChanged, t])
 
   const onDeleteDialogOpenChange = useCallback((open: boolean) => {
@@ -108,6 +108,16 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       setConfirmDeleteInput('')
   }, [isDeleting])
 
+  const isDeleteConfirmDisabled = isDeleting || confirmDeleteInput !== app.name
+
+  const onDeleteDialogSubmit: React.FormEventHandler<HTMLFormElement> = useCallback((e) => {
+    e.preventDefault()
+    if (isDeleteConfirmDisabled)
+      return
+
+    void onConfirmDelete()
+  }, [isDeleteConfirmDisabled, onConfirmDelete])
+
   const onEdit: CreateAppModalProps['onConfirm'] = useCallback(async ({
     name,
     icon_type,
@@ -503,38 +513,51 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       )}
       <AlertDialog open={showConfirmDelete} onOpenChange={onDeleteDialogOpenChange}>
         <AlertDialogContent>
-          <div className="flex flex-col gap-2 px-6 pb-4 pt-6">
+          <form className="flex flex-col" onSubmit={onDeleteDialogSubmit}>
-            <AlertDialogTitle className="text-text-primary title-2xl-semi-bold">
+            <div className="flex flex-col gap-2 px-6 pt-6 pb-4">
-              {t('deleteAppConfirmTitle', { ns: 'app' })}
+              <AlertDialogTitle className="title-2xl-semi-bold text-text-primary">
-            </AlertDialogTitle>
+                {t('deleteAppConfirmTitle', { ns: 'app' })}
-            <AlertDialogDescription className="w-full whitespace-pre-wrap wrap-break-word text-text-tertiary system-md-regular">
+              </AlertDialogTitle>
-              {t('deleteAppConfirmContent', { ns: 'app' })}
+              <AlertDialogDescription className="w-full system-md-regular wrap-break-word whitespace-pre-wrap text-text-tertiary">
-            </AlertDialogDescription>
+                {t('deleteAppConfirmContent', { ns: 'app' })}
-            <div className="mt-2">
+              </AlertDialogDescription>
-              <label className="mb-1 block text-text-secondary system-sm-regular">
+              <div className="mt-2">
-                {t('deleteAppConfirmInputLabel', { ns: 'app', appName: app.name })}
+                <label htmlFor={deleteAppNameInputId} className="mb-1 block system-sm-regular text-text-secondary">
-              </label>
+                  <Trans
-              <input
+                    i18nKey="deleteAppConfirmInputLabel"
-                type="text"
+                    ns="app"
-                className="border-components-input-border bg-components-input-bg focus:border-components-input-border-focus focus:ring-components-input-border-focus h-9 w-full rounded-lg border px-3 text-sm text-text-primary placeholder:text-text-quaternary focus:outline-hidden focus:ring-1"
+                    values={{ appName: app.name }}
-                placeholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
+                    components={{
-                value={confirmDeleteInput}
+                      appName: <span className="system-sm-semibold text-text-primary" translate="no" />,
-                onChange={e => setConfirmDeleteInput(e.target.value)}
+                    }}
-              />
+                  />
+                </label>
+                <Input
+                  id={deleteAppNameInputId}
+                  name="confirm-app-name"
+                  type="text"
+                  autoComplete="off"
+                  spellCheck={false}
+                  placeholder={t('deleteAppConfirmInputPlaceholder', { ns: 'app' })}
+                  value={confirmDeleteInput}
+                  onChange={e => setConfirmDeleteInput(e.target.value)}
+                  className="border-components-input-border-hover bg-components-input-bg-normal focus:border-components-input-border-active focus:bg-components-input-bg-active"
+                />
+              </div>
             </div>
-          </div>
+            <AlertDialogActions>
-          <AlertDialogActions>
+              <AlertDialogCancelButton type="button" disabled={isDeleting}>
-            <AlertDialogCancelButton disabled={isDeleting}>
+                {t('operation.cancel', { ns: 'common' })}
-              {t('operation.cancel', { ns: 'common' })}
+              </AlertDialogCancelButton>
-            </AlertDialogCancelButton>
+              <AlertDialogConfirmButton
-            <AlertDialogConfirmButton
+                type="submit"
-              loading={isDeleting}
+                loading={isDeleting}
-              disabled={isDeleting || confirmDeleteInput !== app.name}
+                disabled={isDeleteConfirmDisabled}
-              onClick={onConfirmDelete}
+              >
-            >
+                {t('operation.confirm', { ns: 'common' })}
-              {t('operation.confirm', { ns: 'common' })}
+              </AlertDialogConfirmButton>
-            </AlertDialogConfirmButton>
+            </AlertDialogActions>
-          </AlertDialogActions>
+          </form>
         </AlertDialogContent>
       </AlertDialog>
       {secretEnvList.length > 0 && (

web/app/components/base/ui/alert-dialog/index.tsx

@@ -32,7 +32,7 @@ export function AlertDialogContent({
       <BaseAlertDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-1002 bg-background-overlay',
+          'inset-0 fixed z-1002 bg-background-overlay',
           'transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
           overlayClassName,
         )}
@@ -40,8 +40,8 @@ export function AlertDialogContent({
       <BaseAlertDialog.Popup
         {...popupProps}
         className={cn(
-          'fixed left-1/2 top-1/2 z-1002 max-h-[calc(100vh-2rem)] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
+          'fixed top-1/2 left-1/2 z-1002 max-h-[calc(100vh-2rem)] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
-          'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+          'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
           className,
         )}
       >

web/app/components/base/ui/context-menu/index.stories.tsx

@@ -22,7 +22,7 @@ import {
 const TriggerArea = ({ label = 'Right-click inside this area' }: { label?: string }) => (
   <ContextMenuTrigger
     aria-label="context menu trigger area"
-    render={<button type="button" className="flex h-44 w-80 select-none items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle px-6 text-center text-sm text-text-tertiary" />}
+    render={<button type="button" className="flex h-44 w-80 items-center justify-center rounded-xl border border-divider-subtle bg-background-default-subtle px-6 text-center text-sm text-text-tertiary select-none" />}
   >
     {label}
   </ContextMenuTrigger>

web/app/components/base/ui/dialog/index.tsx

@@ -33,7 +33,7 @@ export function DialogCloseButton({
       aria-label={ariaLabel}
       {...props}
       className={cn(
-        'absolute right-6 top-6 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-2xl hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-components-input-border-hover disabled:cursor-not-allowed disabled:opacity-50',
+        'absolute top-6 right-6 z-10 flex h-5 w-5 cursor-pointer items-center justify-center rounded-2xl hover:bg-state-base-hover focus-visible:bg-state-base-hover focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
         className,
       )}
     >
@@ -60,7 +60,7 @@ export function DialogContent({
       <BaseDialog.Backdrop
         {...backdropProps}
         className={cn(
-          'fixed inset-0 z-1002 bg-background-overlay',
+          'inset-0 fixed z-1002 bg-background-overlay',
           'transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
           overlayClassName,
           backdropProps?.className,
@@ -68,8 +68,8 @@ export function DialogContent({
       />
       <BaseDialog.Popup
         className={cn(
-          'fixed left-1/2 top-1/2 z-1002 max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
+          'fixed top-1/2 left-1/2 z-1002 max-h-[80dvh] w-[480px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 overflow-y-auto overscroll-contain rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-6 shadow-xl',
-          'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+          'transition-[transform,scale,opacity] duration-150 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
           className,
         )}
       >

web/app/components/base/ui/dropdown-menu/index.tsx

@@ -186,7 +186,7 @@ export function DropdownMenuSubTrigger({
       {...props}
     >
       {children}
-      <span aria-hidden className="i-ri-arrow-right-s-line ml-auto size-4 shrink-0 text-text-tertiary" />
+      <span aria-hidden className="ml-auto i-ri-arrow-right-s-line size-4 shrink-0 text-text-tertiary" />
     </Menu.SubmenuTrigger>
   )
 }

web/app/components/base/ui/number-field/index.stories.tsx

@@ -44,10 +44,10 @@ const FieldLabel = ({
   helperText,
 }: Pick<DemoFieldProps, 'label' | 'helperText'> & { inputId: string }) => (
   <div className="space-y-1">
-    <label htmlFor={inputId} className="text-text-secondary system-sm-medium">
+    <label htmlFor={inputId} className="system-sm-medium text-text-secondary">
       {label}
     </label>
-    <p className="text-text-tertiary system-xs-regular">{helperText}</p>
+    <p className="system-xs-regular text-text-tertiary">{helperText}</p>
   </div>
 )
 
@@ -97,7 +97,7 @@ const DemoField = ({
         </NumberFieldGroup>
       </NumberField>
       {showCurrentValue && (
-        <p className="text-text-quaternary system-xs-regular">
+        <p className="system-xs-regular text-text-quaternary">
           Current value:
           {' '}
           {formatValue ? formatValue(value) : formatNumericValue(value, unit)}

web/app/components/base/ui/number-field/index.tsx

@@ -84,7 +84,7 @@ export function NumberFieldInput({
 }
 
 export const numberFieldUnitVariants = cva(
-  'flex shrink-0 items-center self-stretch text-text-tertiary system-sm-regular',
+  'flex shrink-0 items-center self-stretch system-sm-regular text-text-tertiary',
   {
     variants: {
       size: {
@@ -133,9 +133,9 @@ export function NumberFieldControls({
 
 const numberFieldControlButtonVariants = cva(
   [
-    'flex touch-manipulation select-none items-center justify-center px-1.5 text-text-tertiary outline-hidden transition-colors',
+    'flex touch-manipulation items-center justify-center px-1.5 text-text-tertiary outline-hidden transition-colors select-none',
     'hover:bg-components-input-bg-hover focus-visible:bg-components-input-bg-hover',
-    'focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-components-input-border-active',
+    'focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:ring-inset',
     'disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:focus-visible:bg-transparent disabled:focus-visible:ring-0',
     'group-data-disabled/number-field:cursor-not-allowed hover:group-data-disabled/number-field:bg-transparent focus-visible:group-data-disabled/number-field:bg-transparent focus-visible:group-data-disabled/number-field:ring-0',
     'group-data-readonly/number-field:cursor-default hover:group-data-readonly/number-field:bg-transparent focus-visible:group-data-readonly/number-field:bg-transparent focus-visible:group-data-readonly/number-field:ring-0',

web/app/components/base/ui/popover/index.tsx

@@ -54,7 +54,7 @@ export function PopoverContent({
         <BasePopover.Popup
           className={cn(
             'rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
-            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
             popupClassName,
           )}
           {...popupProps}

web/app/components/base/ui/scroll-area/index.stories.tsx

@@ -32,8 +32,8 @@ type Story = StoryObj<typeof meta>
 const panelClassName = 'overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'
 const blurPanelClassName = 'overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xl shadow-shadow-shadow-7 backdrop-blur-[6px]'
 const labelClassName = 'text-text-tertiary system-xs-medium-uppercase tracking-[0.14em]'
-const titleClassName = 'text-text-primary system-sm-semibold'
+const titleClassName = 'system-sm-semibold text-text-primary'
-const bodyClassName = 'text-text-secondary system-sm-regular'
+const bodyClassName = 'system-sm-regular text-text-secondary'
 const insetScrollAreaClassName = 'h-full p-1'
 const insetViewportClassName = 'radius-3xl bg-components-panel-bg'
 const insetScrollbarClassName = 'data-[orientation=vertical]:my-1 data-[orientation=vertical]:me-1 data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:mb-1'
@@ -126,8 +126,8 @@ const StoryCard = ({
   <section className={cn('min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5', className)}>
     <div className="space-y-1">
       <div className={labelClassName}>{eyebrow}</div>
-      <h3 className="text-pretty text-text-primary system-md-semibold">{title}</h3>
+      <h3 className="system-md-semibold text-pretty text-text-primary">{title}</h3>
-      <p className="max-w-[72ch] text-pretty text-text-secondary system-sm-regular">{description}</p>
+      <p className="max-w-[72ch] system-sm-regular text-pretty text-text-secondary">{description}</p>
     </div>
     {children}
   </section>
@@ -140,7 +140,7 @@ const VerticalPanelPane = () => (
         <ScrollAreaContent className="space-y-3 p-4 pr-6">
           <div className="space-y-1">
             <div className={labelClassName}>Release board</div>
-            <div className="text-text-primary system-md-semibold">Weekly checkpoints</div>
+            <div className="system-md-semibold text-text-primary">Weekly checkpoints</div>
             <p className={bodyClassName}>A simple vertical panel with the default scrollbar skin and no business-specific overrides.</p>
           </div>
           {releaseRows.map(item => (
@@ -148,9 +148,9 @@ const VerticalPanelPane = () => (
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 space-y-1">
                   <h4 className={cn(titleClassName, 'truncate')}>{item.title}</h4>
-                  <p className="text-text-tertiary system-xs-regular">{item.meta}</p>
+                  <p className="system-xs-regular text-text-tertiary">{item.meta}</p>
                 </div>
-                <span className="rounded-full bg-state-base-hover px-2 py-1 text-text-secondary system-xs-medium">
+                <span className="rounded-full bg-state-base-hover px-2 py-1 system-xs-medium text-text-secondary">
                   {item.status}
                 </span>
               </div>
@@ -170,14 +170,14 @@ const StickyListPane = () => (
     <ScrollAreaRoot className={insetScrollAreaClassName}>
       <ScrollAreaViewport className={cn(insetViewportClassName, 'mask-[linear-gradient(to_bottom,transparent_0px,black_10px,black_calc(100%-14px),transparent_100%)]')}>
         <ScrollAreaContent className="min-h-full">
-          <div className="sticky top-0 z-10 border-b border-divider-subtle bg-components-panel-bg px-4 pb-3 pt-4">
+          <div className="sticky top-0 z-10 border-b border-divider-subtle bg-components-panel-bg px-4 pt-4 pb-3">
             <div className={labelClassName}>Sticky header</div>
             <div className="mt-1 flex items-center justify-between gap-3">
               <div>
-                <div className="text-text-primary system-md-semibold">Operational queue</div>
+                <div className="system-md-semibold text-text-primary">Operational queue</div>
-                <p className="mt-1 text-text-secondary system-xs-regular">The scrollbar is still the shared base/ui primitive, while the pane adds sticky structure and a viewport mask.</p>
+                <p className="mt-1 system-xs-regular text-text-secondary">The scrollbar is still the shared base/ui primitive, while the pane adds sticky structure and a viewport mask.</p>
               </div>
-              <span className="rounded-lg border border-divider-subtle bg-components-panel-bg-alt px-2.5 py-1 text-text-secondary system-xs-medium">
+              <span className="rounded-lg border border-divider-subtle bg-components-panel-bg-alt px-2.5 py-1 system-xs-medium text-text-secondary">
                 24 items
               </span>
             </div>
@@ -187,10 +187,10 @@ const StickyListPane = () => (
               <article key={item.id} className="rounded-xl border border-divider-subtle bg-components-panel-bg-alt px-3 py-3">
                 <div className="flex items-start justify-between gap-3">
                   <div className="min-w-0 space-y-1">
-                    <div className="truncate text-text-primary system-sm-semibold">{item.title}</div>
+                    <div className="truncate system-sm-semibold text-text-primary">{item.title}</div>
-                    <div className="line-clamp-2 wrap-break-word text-text-tertiary system-xs-regular">{item.note}</div>
+                    <div className="line-clamp-2 system-xs-regular wrap-break-word text-text-tertiary">{item.note}</div>
                   </div>
-                  <span className="text-text-quaternary system-xs-medium">{item.id}</span>
+                  <span className="system-xs-medium text-text-quaternary">{item.id}</span>
                 </div>
               </article>
             ))}
@@ -221,7 +221,7 @@ const WorkbenchPane = ({
         <ScrollAreaContent className="space-y-3 p-4 pr-6">
           <div className="space-y-1">
             <div className={labelClassName}>{eyebrow}</div>
-            <div className="text-text-primary system-md-semibold">{title}</div>
+            <div className="system-md-semibold text-text-primary">{title}</div>
           </div>
           {children}
         </ScrollAreaContent>
@@ -234,13 +234,13 @@ const WorkbenchPane = ({
 )
 
 const HorizontalRailPane = () => (
-  <div className={cn(panelClassName, 'h-[272px] min-w-0 max-w-full')}>
+  <div className={cn(panelClassName, 'h-[272px] max-w-full min-w-0')}>
     <ScrollAreaRoot className={insetScrollAreaClassName}>
       <ScrollAreaViewport className={insetViewportClassName}>
         <ScrollAreaContent className="min-h-full min-w-max space-y-4 p-4 pb-6">
           <div className="space-y-1">
             <div className={labelClassName}>Horizontal rail</div>
-            <div className="text-text-primary system-md-semibold">Model lanes</div>
+            <div className="system-md-semibold text-text-primary">Model lanes</div>
             <p className={bodyClassName}>This pane keeps the default track behavior and only changes the surface layout around it.</p>
           </div>
           <div className="flex gap-3">
@@ -250,10 +250,10 @@ const HorizontalRailPane = () => (
                   <span className="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-state-base-hover text-text-secondary">
                     <span aria-hidden className="i-ri-stack-line size-5" />
                   </span>
-                  <div className="text-text-primary system-sm-semibold">{card.title}</div>
+                  <div className="system-sm-semibold text-text-primary">{card.title}</div>
-                  <div className="text-text-secondary system-sm-regular">{card.detail}</div>
+                  <div className="system-sm-regular text-text-secondary">{card.detail}</div>
                 </div>
-                <div className="text-text-tertiary system-xs-regular">Drag cards into orchestration groups.</div>
+                <div className="system-xs-regular text-text-tertiary">Drag cards into orchestration groups.</div>
               </article>
             ))}
           </div>
@@ -315,8 +315,8 @@ const ScrollbarStatePane = ({
     <div className="min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5">
       <div className="space-y-1">
         <div className={labelClassName}>{eyebrow}</div>
-        <div className="text-text-primary system-md-semibold">{title}</div>
+        <div className="system-md-semibold text-text-primary">{title}</div>
-        <p className="text-text-secondary system-sm-regular">{description}</p>
+        <p className="system-sm-regular text-text-secondary">{description}</p>
       </div>
       <div className="mt-4 min-w-0 rounded-[24px] border border-divider-subtle bg-components-panel-bg p-3">
         <ScrollAreaRoot className="h-[320px] p-1">
@@ -324,8 +324,8 @@ const ScrollbarStatePane = ({
             <ScrollAreaContent className="min-w-0 space-y-2 p-4 pr-6">
               {scrollbarShowcaseRows.map(item => (
                 <article key={item.title} className="min-w-0 rounded-xl border border-divider-subtle bg-components-panel-bg-alt p-3">
-                  <div className="truncate text-text-primary system-sm-semibold">{item.title}</div>
+                  <div className="truncate system-sm-semibold text-text-primary">{item.title}</div>
-                  <div className="mt-1 wrap-break-word text-text-secondary system-sm-regular">{item.body}</div>
+                  <div className="mt-1 system-sm-regular wrap-break-word text-text-secondary">{item.body}</div>
                 </article>
               ))}
             </ScrollAreaContent>
@@ -343,22 +343,22 @@ const HorizontalScrollbarShowcasePane = () => (
   <div className="min-w-0 radius-6xl border border-divider-subtle bg-background-body p-5">
     <div className="space-y-1">
       <div className={labelClassName}>Horizontal</div>
-      <div className="text-text-primary system-md-semibold">Horizontal track reference</div>
+      <div className="system-md-semibold text-text-primary">Horizontal track reference</div>
-      <p className="text-text-secondary system-sm-regular">Current design delivery defines the horizontal scrollbar body, but not a horizontal edge hint.</p>
+      <p className="system-sm-regular text-text-secondary">Current design delivery defines the horizontal scrollbar body, but not a horizontal edge hint.</p>
     </div>
     <div className="mt-4 min-w-0 rounded-[24px] border border-divider-subtle bg-components-panel-bg p-3">
       <ScrollAreaRoot className="h-[240px] p-1">
         <ScrollAreaViewport className="radius-3xl bg-components-panel-bg">
           <ScrollAreaContent className="min-h-full min-w-max space-y-4 p-4 pb-6">
             <div className="space-y-1">
-              <div className="text-text-primary system-sm-semibold">Horizontal scrollbar</div>
+              <div className="system-sm-semibold text-text-primary">Horizontal scrollbar</div>
-              <div className="text-text-secondary system-sm-regular">A clean horizontal pane to inspect thickness, padding, and thumb behavior without extra masks.</div>
+              <div className="system-sm-regular text-text-secondary">A clean horizontal pane to inspect thickness, padding, and thumb behavior without extra masks.</div>
             </div>
             <div className="flex gap-3">
               {horizontalShowcaseCards.map(card => (
                 <article key={card.title} className="flex h-[120px] w-[220px] shrink-0 flex-col justify-between rounded-2xl border border-divider-subtle bg-components-panel-bg-alt p-4">
-                  <div className="text-text-primary system-sm-semibold">{card.title}</div>
+                  <div className="system-sm-semibold text-text-primary">{card.title}</div>
-                  <div className="text-text-secondary system-sm-regular">{card.body}</div>
+                  <div className="system-sm-regular text-text-secondary">{card.body}</div>
                 </article>
               ))}
             </div>
@@ -380,7 +380,7 @@ const OverlayPane = () => (
           <ScrollAreaContent className="space-y-2 p-3 pr-6">
             <div className="sticky top-0 z-10 rounded-xl border border-divider-subtle bg-components-panel-bg-blur px-3 py-3 backdrop-blur-[6px]">
               <div className={labelClassName}>Overlay palette</div>
-              <div className="mt-1 text-text-primary system-md-semibold">Quick actions</div>
+              <div className="mt-1 system-md-semibold text-text-primary">Quick actions</div>
             </div>
             {activityRows.map(item => (
               <article key={item.title} className="rounded-xl border border-divider-subtle bg-components-panel-bg px-3 py-3 shadow-sm shadow-shadow-shadow-2">
@@ -389,8 +389,8 @@ const OverlayPane = () => (
                     <span aria-hidden className="i-ri-flashlight-line size-4" />
                   </span>
                   <div className="space-y-1">
-                    <div className="text-text-primary system-sm-semibold">{item.title}</div>
+                    <div className="system-sm-semibold text-text-primary">{item.title}</div>
-                    <div className="text-text-secondary system-xs-regular">{item.body}</div>
+                    <div className="system-xs-regular text-text-secondary">{item.body}</div>
                   </div>
                 </div>
               </article>
@@ -413,22 +413,22 @@ const CornerPane = () => (
           <div className="flex items-start justify-between gap-6">
             <div className="space-y-1">
               <div className={labelClassName}>Corner surface</div>
-              <div className="text-text-primary system-md-semibold">Bi-directional inspector canvas</div>
+              <div className="system-md-semibold text-text-primary">Bi-directional inspector canvas</div>
               <p className={bodyClassName}>Both axes overflow here so the corner becomes visible as a deliberate seam between the two tracks.</p>
             </div>
-            <span className="rounded-full bg-state-base-hover px-2 py-1 text-text-secondary system-xs-medium">
+            <span className="rounded-full bg-state-base-hover px-2 py-1 system-xs-medium text-text-secondary">
               Always visible
             </span>
           </div>
           <div className="grid min-w-[560px] grid-cols-[220px_repeat(3,180px)] gap-3">
             {Array.from({ length: 12 }, (_, index) => (
               <article key={index} className="rounded-2xl border border-divider-subtle bg-components-panel-bg-alt p-4">
-                <div className="text-text-primary system-sm-semibold">
+                <div className="system-sm-semibold text-text-primary">
                   Cell
                   {' '}
                   {index + 1}
                 </div>
-                <p className="mt-2 text-text-secondary system-sm-regular">
+                <p className="mt-2 system-sm-regular text-text-secondary">
                   Wide-and-tall content to force both scrollbars and show the corner treatment clearly.
                 </p>
               </article>
@@ -458,7 +458,7 @@ const ExploreSidebarWebAppsPane = () => {
             <div className="flex size-6 shrink-0 items-center justify-center rounded-md bg-components-icon-bg-blue-solid">
               <span className="i-ri-apps-fill size-3.5 text-components-avatar-shape-fill-stop-100" />
             </div>
-            <div className="min-w-0 truncate text-components-menu-item-text-active system-sm-semibold">
+            <div className="min-w-0 truncate system-sm-semibold text-components-menu-item-text-active">
               Explore
             </div>
           </div>
@@ -466,10 +466,10 @@ const ExploreSidebarWebAppsPane = () => {
 
         <div className="space-y-1.5">
           <div className="flex items-center justify-between gap-3 px-2">
-            <p className="min-w-0 uppercase text-text-tertiary system-xs-medium-uppercase">
+            <p className="min-w-0 system-xs-medium-uppercase text-text-tertiary uppercase">
               Web Apps
             </p>
-            <span className="shrink-0 text-text-quaternary system-xs-medium">
+            <span className="shrink-0 system-xs-medium text-text-quaternary">
               {webAppsRows.length}
             </span>
           </div>
@@ -555,7 +555,7 @@ export const ThreePaneWorkbench: Story = {
             {releaseRows.map(item => (
               <button key={item.title} type="button" className={storyButtonClassName}>
                 <span className="min-w-0 truncate system-sm-medium">{item.title}</span>
-                <span className="text-text-quaternary system-xs-medium">{item.status}</span>
+                <span className="system-xs-medium text-text-quaternary">{item.status}</span>
               </button>
             ))}
           </div>
@@ -565,16 +565,16 @@ export const ThreePaneWorkbench: Story = {
             {Array.from({ length: 7 }, (_, index) => (
               <section key={index} className="rounded-2xl border border-divider-subtle bg-components-panel-bg-alt p-4">
                 <div className="flex items-center justify-between gap-3">
-                  <div className="text-text-primary system-sm-semibold">
+                  <div className="system-sm-semibold text-text-primary">
                     Section
                     {' '}
                     {index + 1}
                   </div>
-                  <span className="rounded-full bg-state-base-hover px-2 py-1 text-text-secondary system-xs-medium">
+                  <span className="rounded-full bg-state-base-hover px-2 py-1 system-xs-medium text-text-secondary">
                     Active
                   </span>
                 </div>
-                <p className="mt-2 text-text-secondary system-sm-regular">
+                <p className="mt-2 system-sm-regular text-text-secondary">
                   This pane is intentionally long so the default vertical scrollbar sits over a larger editorial surface.
                 </p>
               </section>
@@ -585,9 +585,9 @@ export const ThreePaneWorkbench: Story = {
           <div className="space-y-3">
             {queueRows.map(item => (
               <article key={item.id} className="rounded-xl border border-divider-subtle bg-components-panel-bg-alt p-3">
-                <div className="text-text-primary system-sm-semibold">{item.id}</div>
+                <div className="system-sm-semibold text-text-primary">{item.id}</div>
-                <div className="mt-1 text-text-secondary system-sm-regular">{item.title}</div>
+                <div className="mt-1 system-sm-regular text-text-secondary">{item.title}</div>
-                <div className="mt-2 text-text-tertiary system-xs-regular">{item.note}</div>
+                <div className="mt-2 system-xs-regular text-text-tertiary">{item.note}</div>
               </article>
             ))}
           </div>
@@ -658,7 +658,7 @@ export const PrimitiveComposition: Story = {
           <ScrollAreaViewport className={insetViewportClassName}>
             <ScrollAreaContent className="min-w-[560px] space-y-3 p-4 pr-6">
               {Array.from({ length: 8 }, (_, index) => (
-                <div key={index} className="rounded-xl border border-divider-subtle bg-components-panel-bg-alt px-3 py-3 text-text-secondary system-sm-regular">
+                <div key={index} className="rounded-xl border border-divider-subtle bg-components-panel-bg-alt px-3 py-3 system-sm-regular text-text-secondary">
                   Primitive row
                   {' '}
                   {index + 1}

web/app/components/base/ui/scroll-area/index.tsx

@@ -26,7 +26,7 @@ type ScrollAreaProps = Omit<ScrollAreaRootProps, 'children'> & {
 
 const scrollAreaScrollbarClassName = cn(
   styles.scrollbar,
-  'flex touch-none select-none overflow-clip p-1 opacity-100 transition-opacity motion-reduce:transition-none',
+  'flex touch-none overflow-clip p-1 opacity-100 transition-opacity select-none motion-reduce:transition-none',
   'pointer-events-none data-hovering:pointer-events-auto',
   'data-scrolling:pointer-events-auto',
   'data-[orientation=vertical]:absolute data-[orientation=vertical]:inset-y-0 data-[orientation=vertical]:w-3 data-[orientation=vertical]:justify-center',
@@ -41,7 +41,7 @@ const scrollAreaThumbClassName = cn(
 
 const scrollAreaViewportClassName = cn(
   'size-full min-h-0 min-w-0 outline-hidden',
-  'focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-components-input-border-hover',
+  'focus-visible:ring-1 focus-visible:ring-components-input-border-hover focus-visible:ring-inset',
 )
 
 const scrollAreaCornerClassName = 'bg-transparent'

web/app/components/base/ui/select/index.tsx

@@ -84,7 +84,7 @@ export function SelectTrigger({
         role="button"
         aria-label="Clear selection"
         tabIndex={-1}
-        className="shrink-0 cursor-pointer text-text-quaternary hover:text-text-secondary group-data-disabled:hidden group-data-readonly:hidden"
+        className="shrink-0 cursor-pointer text-text-quaternary group-data-disabled:hidden group-data-readonly:hidden hover:text-text-secondary"
         onClick={(e) => {
           e.stopPropagation()
           onClear?.()
@@ -97,7 +97,7 @@ export function SelectTrigger({
   }
   else {
     trailingIcon = (
-      <BaseSelect.Icon className="shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary data-open:text-text-secondary group-data-readonly:hidden">
+      <BaseSelect.Icon className="shrink-0 text-text-quaternary transition-colors group-hover:text-text-secondary group-data-readonly:hidden data-open:text-text-secondary">
         <span className="i-ri-arrow-down-s-line h-4 w-4" aria-hidden="true" />
       </BaseSelect.Icon>
     )
@@ -175,7 +175,7 @@ export function SelectContent({
         <BaseSelect.Popup
           className={cn(
             'rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg',
-            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-starting-style:scale-95 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',
+            'origin-(--transform-origin) transition-[transform,scale,opacity] data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',
             popupClassName,
           )}
           {...popupProps}
@@ -200,8 +200,8 @@ export function SelectItem({
   return (
     <BaseSelect.Item
       className={cn(
-        'flex h-8 cursor-pointer items-center rounded-lg px-2 text-text-secondary outline-hidden system-sm-medium',
+        'flex h-8 cursor-pointer items-center rounded-lg px-2 system-sm-medium text-text-secondary outline-hidden',
-        'data-disabled:cursor-not-allowed data-highlighted:bg-state-base-hover data-disabled:opacity-50',
+        'data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-state-base-hover',
         className,
       )}
       {...props}

web/app/components/base/ui/slider/index.stories.tsx

@@ -53,7 +53,7 @@ function SliderDemo({
         onValueChange={setValue}
         aria-label="Demo slider"
       />
-      <div className="text-center text-text-secondary system-sm-medium">
+      <div className="text-center system-sm-medium text-text-secondary">
         {value}
       </div>
     </div>

web/app/components/base/ui/slider/index.tsx

@@ -28,7 +28,7 @@ type SliderProps = ControlledSliderProps | UncontrolledSliderProps
 
 const sliderRootClassName = 'group/slider relative inline-flex w-full data-disabled:opacity-30'
 const sliderControlClassName = cn(
-  'relative flex h-5 w-full touch-none select-none items-center',
+  'relative flex h-5 w-full touch-none items-center select-none',
   'data-disabled:cursor-not-allowed',
 )
 const sliderTrackClassName = cn(
@@ -45,7 +45,7 @@ const sliderThumbClassName = cn(
   'bg-(--slider-knob,var(--color-components-slider-knob)) shadow-sm',
   'transition-[background-color,border-color,box-shadow,opacity] motion-reduce:transition-none',
   'hover:bg-(--slider-knob-hover,var(--color-components-slider-knob-hover))',
-  'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-components-slider-knob-border-hover focus-visible:ring-offset-0',
+  'focus-visible:ring-2 focus-visible:ring-components-slider-knob-border-hover focus-visible:ring-offset-0 focus-visible:outline-hidden',
   'active:shadow-md',
   'group-data-disabled/slider:bg-(--slider-knob-disabled,var(--color-components-slider-knob-disabled))',
   'group-data-disabled/slider:border-(--slider-knob-border,var(--color-components-slider-knob-border))',

web/app/components/base/ui/tooltip/index.tsx

@@ -41,8 +41,8 @@ export function TooltipContent({
       >
         <BaseTooltip.Popup
           className={cn(
-            variant === 'default' && 'max-w-[300px] wrap-break-word rounded-md bg-components-panel-bg px-3 py-2 text-left text-text-tertiary shadow-lg system-xs-regular',
+            variant === 'default' && 'max-w-[300px] rounded-md bg-components-panel-bg px-3 py-2 text-left system-xs-regular wrap-break-word text-text-tertiary shadow-lg',
-            'origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-starting-style:opacity-0 data-instant:transition-none motion-reduce:transition-none',
+            'origin-(--transform-origin) transition-opacity data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0 motion-reduce:transition-none',
             popupClassName,
           )}
           {...props}

web/eslint-suppressions.json

@@ -1383,7 +1383,7 @@
       "count": 1
     },
     "tailwindcss/enforce-consistent-class-order": {
-      "count": 15
+      "count": 10
     },
     "ts/no-explicit-any": {
       "count": 2
@@ -3808,71 +3808,6 @@
       "count": 1
     }
   },
-  "app/components/base/ui/alert-dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/ui/context-menu/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/ui/dialog/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 4
-    }
-  },
-  "app/components/base/ui/dropdown-menu/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/ui/number-field/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/ui/number-field/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 3
-    }
-  },
-  "app/components/base/ui/popover/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/ui/scroll-area/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 46
-    }
-  },
-  "app/components/base/ui/scroll-area/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/ui/select/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 5
-    }
-  },
-  "app/components/base/ui/slider/index.stories.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 1
-    }
-  },
-  "app/components/base/ui/slider/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
-  "app/components/base/ui/tooltip/index.tsx": {
-    "tailwindcss/enforce-consistent-class-order": {
-      "count": 2
-    }
-  },
   "app/components/base/video-gallery/VideoPlayer.tsx": {
     "react/set-state-in-effect": {
       "count": 1

web/i18n/ar-TN/app.json

@@ -36,8 +36,8 @@
   "createApp": "إنشاء تطبيق",
   "createFromConfigFile": "إنشاء من ملف DSL",
   "deleteAppConfirmContent": "حذف التطبيق لا رجعة فيه. لن يتمكن المستخدمون من الوصول إلى تطبيقك بعد الآن، وسيتم حذف جميع تكوينات المطالبة والسجلات بشكل دائم.",
-  "deleteAppConfirmInputLabel": "للتأكيد، اكتب \"{{appName}}\" في المربع أدناه:",
+  "deleteAppConfirmInputLabel": "للتأكيد، اكتب <appName>{{appName}}</appName> في المربع أدناه:",
-  "deleteAppConfirmInputPlaceholder": "أدخل اسم التطبيق",
+  "deleteAppConfirmInputPlaceholder": "أدخل اسم التطبيق…",
   "deleteAppConfirmTitle": "حذف هذا التطبيق؟",
   "dslUploader.browse": "تصفح",
   "dslUploader.button": "اسحب وأفلت الملف، أو",

web/i18n/de-DE/app.json

@@ -36,8 +36,8 @@
   "createApp": "Neue App erstellen",
   "createFromConfigFile": "App aus Konfigurationsdatei erstellen",
   "deleteAppConfirmContent": "Das Löschen der App ist unwiderruflich. Nutzer werden keinen Zugang mehr zu Ihrer App haben, und alle Prompt-Konfigurationen und Logs werden dauerhaft gelöscht.",
-  "deleteAppConfirmInputLabel": "Geben Sie zur Bestätigung \"{{appName}}\" in das Feld unten ein:",
+  "deleteAppConfirmInputLabel": "Geben Sie zur Bestätigung <appName>{{appName}}</appName> in das Feld unten ein:",
-  "deleteAppConfirmInputPlaceholder": "App-Namen eingeben",
+  "deleteAppConfirmInputPlaceholder": "App-Namen eingeben…",
   "deleteAppConfirmTitle": "Diese App löschen?",
   "dslUploader.browse": "Durchsuchen",
   "dslUploader.button": "Datei per Drag & Drop ablegen oder",

web/i18n/en-US/app.json

@@ -36,8 +36,8 @@
   "createApp": "CREATE APP",
   "createFromConfigFile": "Create from DSL file",
   "deleteAppConfirmContent": "Deleting the app is irreversible. Users will no longer be able to access your app, and all prompt configurations and logs will be permanently deleted.",
-  "deleteAppConfirmInputLabel": "To confirm, type \"{{appName}}\" in the box below:",
+  "deleteAppConfirmInputLabel": "To confirm, type <appName>{{appName}}</appName> in the box below:",
-  "deleteAppConfirmInputPlaceholder": "Enter app name",
+  "deleteAppConfirmInputPlaceholder": "Enter app name…",
   "deleteAppConfirmTitle": "Delete this app?",
   "dslUploader.browse": "Browse",
   "dslUploader.button": "Drag and drop file, or",

web/i18n/es-ES/app.json

@@ -36,8 +36,8 @@
   "createApp": "CREAR APP",
   "createFromConfigFile": "Crear desde archivo DSL",
   "deleteAppConfirmContent": "Eliminar la app es irreversible. Los usuarios ya no podrán acceder a tu app y todas las configuraciones y registros de prompts se eliminarán permanentemente.",
-  "deleteAppConfirmInputLabel": "Para confirmar, escriba \"{{appName}}\" en el cuadro a continuación:",
+  "deleteAppConfirmInputLabel": "Para confirmar, escriba <appName>{{appName}}</appName> en el cuadro a continuación:",
-  "deleteAppConfirmInputPlaceholder": "Ingrese el nombre de la app",
+  "deleteAppConfirmInputPlaceholder": "Ingrese el nombre de la app…",
   "deleteAppConfirmTitle": "¿Eliminar esta app?",
   "dslUploader.browse": "Examinar",
   "dslUploader.button": "Arrastrar y soltar archivo, o",

web/i18n/fa-IR/app.json

@@ -36,8 +36,8 @@
   "createApp": "ایجاد برنامه",
   "createFromConfigFile": "ایجاد از فایل DSL",
   "deleteAppConfirmContent": "حذف برنامه غیرقابل برگشت است. کاربران دیگر قادر به دسترسی به برنامه شما نخواهند بود و تمام تنظیمات و گزارشات درخواست‌ها به صورت دائم حذف خواهند شد.",
-  "deleteAppConfirmInputLabel": "برای تأیید، \"{{appName}}\" را در کادر زیر تایپ کنید:",
+  "deleteAppConfirmInputLabel": "برای تأیید، <appName>{{appName}}</appName> را در کادر زیر تایپ کنید:",
-  "deleteAppConfirmInputPlaceholder": "نام برنامه را وارد کنید",
+  "deleteAppConfirmInputPlaceholder": "نام برنامه را وارد کنید…",
   "deleteAppConfirmTitle": "آیا این برنامه حذف شود؟",
   "dslUploader.browse": "مرور",
   "dslUploader.button": "فایل را بکشید و رها کنید، یا",

web/i18n/fr-FR/app.json

@@ -36,8 +36,8 @@
   "createApp": "CRÉER UNE APPLICATION",
   "createFromConfigFile": "Créer à partir du fichier DSL",
   "deleteAppConfirmContent": "La suppression de l'application est irréversible. Les utilisateurs ne pourront plus accéder à votre application et toutes les configurations de prompt et les journaux seront définitivement supprimés.",
-  "deleteAppConfirmInputLabel": "Pour confirmer, tapez \"{{appName}}\" dans la case ci-dessous :",
+  "deleteAppConfirmInputLabel": "Pour confirmer, tapez <appName>{{appName}}</appName> dans la case ci-dessous :",
-  "deleteAppConfirmInputPlaceholder": "Entrez le nom de l'application",
+  "deleteAppConfirmInputPlaceholder": "Entrez le nom de l'application…",
   "deleteAppConfirmTitle": "Supprimer cette application ?",
   "dslUploader.browse": "Parcourir",
   "dslUploader.button": "Glisser-déposer un fichier, ou",

web/i18n/hi-IN/app.json

@@ -36,8 +36,8 @@
   "createApp": "ऐप बनाएँ",
   "createFromConfigFile": "डीएसएल फ़ाइल से बनाएँ",
   "deleteAppConfirmContent": "ऐप को हटाना अपरिवर्तनीय है। उपयोगकर्ता अब आपके ऐप तक पहुँचने में सक्षम नहीं होंगे, और सभी प्रॉम्प्ट कॉन्फ़िगरेशन और लॉग स्थायी रूप से हटा दिए जाएंगे।",
-  "deleteAppConfirmInputLabel": "पुष्टि करने के लिए, नीचे दिए गए बॉक्स में \"{{appName}}\" टाइप करें:",
+  "deleteAppConfirmInputLabel": "पुष्टि करने के लिए, नीचे दिए गए बॉक्स में <appName>{{appName}}</appName> टाइप करें:",
-  "deleteAppConfirmInputPlaceholder": "ऐप का नाम दर्ज करें",
+  "deleteAppConfirmInputPlaceholder": "ऐप का नाम दर्ज करें…",
   "deleteAppConfirmTitle": "इस ऐप को हटाएँ?",
   "dslUploader.browse": "ब्राउज़ करें",
   "dslUploader.button": "फ़ाइल खींचकर छोड़ें, या",

web/i18n/id-ID/app.json

@@ -36,8 +36,8 @@
   "createApp": "BUAT APLIKASI",
   "createFromConfigFile": "Buat dari file DSL",
   "deleteAppConfirmContent": "Menghapus aplikasi tidak dapat diubah. Pengguna tidak akan dapat lagi mengakses aplikasi Anda, dan semua konfigurasi prompt serta log akan dihapus secara permanen.",
-  "deleteAppConfirmInputLabel": "Untuk konfirmasi, ketik \"{{appName}}\" di kotak di bawah ini:",
+  "deleteAppConfirmInputLabel": "Untuk konfirmasi, ketik <appName>{{appName}}</appName> di kotak di bawah ini:",
-  "deleteAppConfirmInputPlaceholder": "Masukkan nama aplikasi",
+  "deleteAppConfirmInputPlaceholder": "Masukkan nama aplikasi…",
   "deleteAppConfirmTitle": "Hapus aplikasi ini?",
   "dslUploader.browse": "Ramban",
   "dslUploader.button": "Seret dan lepas file, atau",

web/i18n/it-IT/app.json

@@ -36,8 +36,8 @@
   "createApp": "CREA APP",
   "createFromConfigFile": "Crea da file DSL",
   "deleteAppConfirmContent": "Eliminare l'app è irreversibile. Gli utenti non potranno più accedere alla tua app e tutte le configurazioni e i log dei prompt verranno eliminati permanentemente.",
-  "deleteAppConfirmInputLabel": "Per confermare, digita \"{{appName}}\" nel campo sottostante:",
+  "deleteAppConfirmInputLabel": "Per confermare, digita <appName>{{appName}}</appName> nel campo sottostante:",
-  "deleteAppConfirmInputPlaceholder": "Inserisci il nome dell'app",
+  "deleteAppConfirmInputPlaceholder": "Inserisci il nome dell'app…",
   "deleteAppConfirmTitle": "Eliminare questa app?",
   "dslUploader.browse": "Sfoglia",
   "dslUploader.button": "Trascina e rilascia il file, o",

web/i18n/ja-JP/app.json

@@ -36,8 +36,8 @@
   "createApp": "アプリを作成する",
   "createFromConfigFile": "DSL ファイルから作成する",
   "deleteAppConfirmContent": "アプリを削除すると、元に戻すことはできません。他のユーザーはもはやこのアプリにアクセスできず、すべてのプロンプトの設定とログが永久に削除されます。",
-  "deleteAppConfirmInputLabel": "確認するには、下のボックスに「{{appName}}」と入力してください：",
+  "deleteAppConfirmInputLabel": "確認するには、下のボックスに<appName>{{appName}}</appName>と入力してください：",
-  "deleteAppConfirmInputPlaceholder": "アプリ名を入力",
+  "deleteAppConfirmInputPlaceholder": "アプリ名を入力…",
   "deleteAppConfirmTitle": "このアプリを削除しますか？",
   "dslUploader.browse": "参照",
   "dslUploader.button": "ファイルをドラッグ＆ドロップするか、",

web/i18n/ko-KR/app.json

@@ -36,8 +36,8 @@
   "createApp": "앱 만들기",
   "createFromConfigFile": "DSL 파일에서 생성하기",
   "deleteAppConfirmContent": "앱을 삭제하면 복구할 수 없습니다. 사용자는 더 이상 앱에 액세스할 수 없으며 모든 프롬프트 설정 및 로그가 영구적으로 삭제됩니다.",
-  "deleteAppConfirmInputLabel": "확인하려면 아래 상자에 \"{{appName}}\"을 입력하세요：",
+  "deleteAppConfirmInputLabel": "확인하려면 아래 상자에 <appName>{{appName}}</appName>을 입력하세요：",
-  "deleteAppConfirmInputPlaceholder": "앱 이름 입력",
+  "deleteAppConfirmInputPlaceholder": "앱 이름 입력…",
   "deleteAppConfirmTitle": "이 앱을 삭제하시겠습니까?",
   "dslUploader.browse": "찾아보기",
   "dslUploader.button": "파일을 드래그 앤 드롭하거나",

web/i18n/nl-NL/app.json

@@ -36,8 +36,8 @@
   "createApp": "CREATE APP",
   "createFromConfigFile": "Create from DSL file",
   "deleteAppConfirmContent": "Deleting the app is irreversible. Users will no longer be able to access your app, and all prompt configurations and logs will be permanently deleted.",
-  "deleteAppConfirmInputLabel": "To confirm, type \"{{appName}}\" in the box below:",
+  "deleteAppConfirmInputLabel": "To confirm, type <appName>{{appName}}</appName> in the box below:",
-  "deleteAppConfirmInputPlaceholder": "Enter app name",
+  "deleteAppConfirmInputPlaceholder": "Enter app name…",
   "deleteAppConfirmTitle": "Delete this app?",
   "dslUploader.browse": "Browse",
   "dslUploader.button": "Drag and drop file, or",

web/i18n/pl-PL/app.json

@@ -36,8 +36,8 @@
   "createApp": "UTWÓRZ APLIKACJĘ",
   "createFromConfigFile": "Utwórz z pliku DSL",
   "deleteAppConfirmContent": "Usunięcie aplikacji jest nieodwracalne. Użytkownicy nie będą mieli już dostępu do twojej aplikacji, a wszystkie konfiguracje monitów i dzienniki zostaną trwale usunięte.",
-  "deleteAppConfirmInputLabel": "Aby potwierdzić, wpisz \"{{appName}}\" w polu poniżej:",
+  "deleteAppConfirmInputLabel": "Aby potwierdzić, wpisz <appName>{{appName}}</appName> w polu poniżej:",
-  "deleteAppConfirmInputPlaceholder": "Wpisz nazwę aplikacji",
+  "deleteAppConfirmInputPlaceholder": "Wpisz nazwę aplikacji…",
   "deleteAppConfirmTitle": "Usunąć tę aplikację?",
   "dslUploader.browse": "Przeglądaj",
   "dslUploader.button": "Przeciągnij i upuść plik, lub",

web/i18n/pt-BR/app.json

@@ -36,8 +36,8 @@
   "createApp": "CRIAR APLICATIVO",
   "createFromConfigFile": "Criar a partir do arquivo DSL",
   "deleteAppConfirmContent": "A exclusão do aplicativo é irreversível. Os usuários não poderão mais acessar seu aplicativo e todas as configurações de prompt e logs serão permanentemente excluídas.",
-  "deleteAppConfirmInputLabel": "Para confirmar, digite \"{{appName}}\" na caixa abaixo:",
+  "deleteAppConfirmInputLabel": "Para confirmar, digite <appName>{{appName}}</appName> na caixa abaixo:",
-  "deleteAppConfirmInputPlaceholder": "Digite o nome do aplicativo",
+  "deleteAppConfirmInputPlaceholder": "Digite o nome do aplicativo…",
   "deleteAppConfirmTitle": "Excluir este aplicativo?",
   "dslUploader.browse": "Navegar",
   "dslUploader.button": "Arraste e solte o arquivo, ou",

web/i18n/ro-RO/app.json

@@ -36,8 +36,8 @@
   "createApp": "CREEAZĂ APLICAȚIE",
   "createFromConfigFile": "Creează din fișier DSL",
   "deleteAppConfirmContent": "Ștergerea aplicației este ireversibilă. Utilizatorii nu vor mai putea accesa aplicația ta, iar toate configurațiile promptului și jurnalele vor fi șterse permanent.",
-  "deleteAppConfirmInputLabel": "Pentru confirmare, tastați \"{{appName}}\" în caseta de mai jos:",
+  "deleteAppConfirmInputLabel": "Pentru confirmare, tastați <appName>{{appName}}</appName> în caseta de mai jos:",
-  "deleteAppConfirmInputPlaceholder": "Introduceți numele aplicației",
+  "deleteAppConfirmInputPlaceholder": "Introduceți numele aplicației…",
   "deleteAppConfirmTitle": "Ștergi această aplicație?",
   "dslUploader.browse": "Răsfoiți",
   "dslUploader.button": "Trageți și plasați fișierul, sau",

web/i18n/ru-RU/app.json

@@ -36,8 +36,8 @@
   "createApp": "СОЗДАТЬ ПРИЛОЖЕНИЕ",
   "createFromConfigFile": "Создать из файла DSL",
   "deleteAppConfirmContent": "Удаление приложения необратимо. Пользователи больше не смогут получить доступ к вашему приложению, и все настройки подсказок и журналы будут безвозвратно удалены.",
-  "deleteAppConfirmInputLabel": "Для подтверждения введите \"{{appName}}\" в поле ниже:",
+  "deleteAppConfirmInputLabel": "Для подтверждения введите <appName>{{appName}}</appName> в поле ниже:",
-  "deleteAppConfirmInputPlaceholder": "Введите название приложения",
+  "deleteAppConfirmInputPlaceholder": "Введите название приложения…",
   "deleteAppConfirmTitle": "Удалить это приложение?",
   "dslUploader.browse": "Обзор",
   "dslUploader.button": "Перетащите файл, или",

web/i18n/sl-SI/app.json

@@ -36,8 +36,8 @@
   "createApp": "USTVARI APLIKACIJO",
   "createFromConfigFile": "Ustvari iz datoteke DSL",
   "deleteAppConfirmContent": "Brisanje aplikacije je nepopravljivo. Uporabniki ne bodo več imeli dostopa do vaše aplikacije, vse konfiguracije in dnevniki pa bodo trajno izbrisani.",
-  "deleteAppConfirmInputLabel": "Za potrditev vnesite \"{{appName}}\" v polje spodaj:",
+  "deleteAppConfirmInputLabel": "Za potrditev vnesite <appName>{{appName}}</appName> v polje spodaj:",
-  "deleteAppConfirmInputPlaceholder": "Vnesite ime aplikacije",
+  "deleteAppConfirmInputPlaceholder": "Vnesite ime aplikacije…",
   "deleteAppConfirmTitle": "Izbrišem to aplikacijo?",
   "dslUploader.browse": "Prebrskaj",
   "dslUploader.button": "Povlecite in spustite datoteko, ali",

web/i18n/th-TH/app.json

@@ -36,8 +36,8 @@
   "createApp": "สร้างโปรเจกต์ใหม่",
   "createFromConfigFile": "สร้างจากไฟล์ DSL",
   "deleteAppConfirmContent": "การลบโปรเจกนั้นไม่สามารถย้อนกลับได้ ผู้ใช้จะไม่สามารถเข้าถึงโปรเจกต์ของคุณอีกต่อไป และการกําหนดค่าต่างๆและบันทึกทั้งหมดจะถูกลบอย่างถาวร",
-  "deleteAppConfirmInputLabel": "หากต้องการยืนยัน พิมพ์ \"{{appName}}\" ในช่องด้านล่าง:",
+  "deleteAppConfirmInputLabel": "หากต้องการยืนยัน พิมพ์ <appName>{{appName}}</appName> ในช่องด้านล่าง:",
-  "deleteAppConfirmInputPlaceholder": "ใส่ชื่อแอป",
+  "deleteAppConfirmInputPlaceholder": "ใส่ชื่อแอป…",
   "deleteAppConfirmTitle": "ลบโปรเจกต์นี้?",
   "dslUploader.browse": "เรียกดู",
   "dslUploader.button": "ลากและวางไฟล์ หรือ",

web/i18n/tr-TR/app.json

@@ -36,8 +36,8 @@
   "createApp": "UYGULAMA OLUŞTUR",
   "createFromConfigFile": "DSL dosyasından oluştur",
   "deleteAppConfirmContent": "Uygulamanın silinmesi geri alınamaz. Kullanıcılar artık uygulamanıza erişemeyecek ve tüm prompt yapılandırmaları ile loglar kalıcı olarak silinecektir.",
-  "deleteAppConfirmInputLabel": "Onaylamak için aşağıdaki kutuya \"{{appName}}\" yazın:",
+  "deleteAppConfirmInputLabel": "Onaylamak için aşağıdaki kutuya <appName>{{appName}}</appName> yazın:",
-  "deleteAppConfirmInputPlaceholder": "Uygulama adını girin",
+  "deleteAppConfirmInputPlaceholder": "Uygulama adını girin…",
   "deleteAppConfirmTitle": "Bu uygulamayı silmek istiyor musunuz?",
   "dslUploader.browse": "Gözat",
   "dslUploader.button": "Dosyayı sürükleyip bırakın veya",

web/i18n/uk-UA/app.json

@@ -36,8 +36,8 @@
   "createApp": "Створити додаток",
   "createFromConfigFile": "Створити з файлу DSL",
   "deleteAppConfirmContent": "Видалення додатка незворотнє. Користувачі більше не зможуть отримати доступ до вашого додатка, і всі налаштування запитів та журнали будуть остаточно видалені.",
-  "deleteAppConfirmInputLabel": "Для підтвердження введіть \"{{appName}}\" у поле нижче:",
+  "deleteAppConfirmInputLabel": "Для підтвердження введіть <appName>{{appName}}</appName> у поле нижче:",
-  "deleteAppConfirmInputPlaceholder": "Введіть назву додатка",
+  "deleteAppConfirmInputPlaceholder": "Введіть назву додатка…",
   "deleteAppConfirmTitle": "Видалити цей додаток?",
   "dslUploader.browse": "Огляд",
   "dslUploader.button": "Перетягніть файл, або",

web/i18n/vi-VN/app.json

@@ -36,8 +36,8 @@
   "createApp": "TẠO ỨNG DỤNG",
   "createFromConfigFile": "Tạo từ tệp DSL",
   "deleteAppConfirmContent": "Việc xóa ứng dụng là không thể hoàn tác. Người dùng sẽ không thể truy cập vào ứng dụng của bạn nữa và tất cả cấu hình cũng như nhật ký nhắc sẽ bị xóa vĩnh viễn.",
-  "deleteAppConfirmInputLabel": "Để xác nhận, hãy nhập \"{{appName}}\" vào ô bên dưới:",
+  "deleteAppConfirmInputLabel": "Để xác nhận, hãy nhập <appName>{{appName}}</appName> vào ô bên dưới:",
-  "deleteAppConfirmInputPlaceholder": "Nhập tên ứng dụng",
+  "deleteAppConfirmInputPlaceholder": "Nhập tên ứng dụng…",
   "deleteAppConfirmTitle": "Xóa ứng dụng này?",
   "dslUploader.browse": "Duyệt",
   "dslUploader.button": "Kéo và thả tệp, hoặc",

web/i18n/zh-Hans/app.json

@@ -36,8 +36,8 @@
   "createApp": "创建应用",
   "createFromConfigFile": "通过 DSL 文件创建",
   "deleteAppConfirmContent": "删除应用将无法撤销。用户将不能访问你的应用，所有 Prompt 编排配置和日志均将一并被删除。",
-  "deleteAppConfirmInputLabel": "请在下方输入框中输入\"{{appName}}\"以确认：",
+  "deleteAppConfirmInputLabel": "请在下方输入框中输入<appName>{{appName}}</appName>以确认：",
-  "deleteAppConfirmInputPlaceholder": "输入应用名称",
+  "deleteAppConfirmInputPlaceholder": "输入应用名称…",
   "deleteAppConfirmTitle": "确认删除应用？",
   "dslUploader.browse": "选择文件",
   "dslUploader.button": "拖拽文件至此，或者",

web/i18n/zh-Hant/app.json

@@ -36,8 +36,8 @@
   "createApp": "建立應用",
   "createFromConfigFile": "透過 DSL 檔案建立",
   "deleteAppConfirmContent": "刪除應用將無法復原。使用者將無法存取你的應用，所有 Prompt 設定和日誌都將一併被刪除。",
-  "deleteAppConfirmInputLabel": "請在下方輸入框中輸入「{{appName}}」以確認：",
+  "deleteAppConfirmInputLabel": "請在下方輸入框中輸入<appName>{{appName}}</appName>以確認：",
-  "deleteAppConfirmInputPlaceholder": "輸入應用程式名稱",
+  "deleteAppConfirmInputPlaceholder": "輸入應用程式名稱…",
   "deleteAppConfirmTitle": "確認刪除應用？",
   "dslUploader.browse": "選擇檔案",
   "dslUploader.button": "拖拽檔案至此，或者",