Consume boxel-ui directly

packages/boxel-ui/addon/package.json

@@ -13,9 +13,9 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "concurrently \"pnpm:build:*\" --names \"build:\"",
-    "build:js": "rollup --config",
-    "build:types": "ember-tsc --declaration --emitDeclarationOnly --noEmit false",
+    "build": "echo 'noop'",
+    "build:js": "echo 'noop'",
+    "build:types": "echo 'noop'",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\"",
     "lint:fix": "concurrently \"pnpm:lint:*:fix\" --names \"fix:\"",
     "lint:hbs": "ember-template-lint .",
@@ -124,11 +124,8 @@
     "version": 2
   },
   "exports": {
-    "./*": {
-      "types": "./declarations/*.d.ts",
-      "default": "./dist/*.js"
-    },
-    "./styles/*.css": "./dist/styles/*.css",
+    "./*.css": "./src/*.css",
+    "./*": "./src/*.gts",
     "./addon-main.js": "./addon-main.cjs"
   },
   "files": [

packages/boxel-ui/addon/src/components/alert/index.gts

@@ -3,7 +3,7 @@ import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import type { ComponentLike } from '@glint/template';
 
-import { cn, eq } from '../../helpers.ts';
+import { cn, eq } from '../../helpers.gts';
 import { FailureBordered, Warning } from '../../icons.gts';
 import Button, { type BoxelButtonKind } from '../button/index.gts';
 

packages/boxel-ui/addon/src/components/basic-fitted/usage.gts

@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
-import { FITTED_FORMATS } from '../../helpers.ts';
+import { FITTED_FORMATS } from '../../helpers.gts';
 import type { Icon } from '../../icons.ts';
 import CardContainer from '../card-container/index.gts';
 import {

packages/boxel-ui/addon/src/components/button/index.gts

@@ -2,7 +2,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { array, concat, hash } from '@ember/helper';
 import { LinkTo } from '@ember/routing';
 
-import { cn, eq, not, or, sanitizeHtml } from '../../helpers.ts';
+import { cn, eq, not, or, sanitizeHtml } from '../../helpers.gts';
 import LoadingIndicator from '../loading-indicator/index.gts';
 
 export type BoxelButtonKind =

packages/boxel-ui/addon/src/components/card-header/index.gts

@@ -1,5 +1,5 @@
 import Maximize from '@cardstack/boxel-icons/maximize';
-import type { MenuDivider } from '@cardstack/boxel-ui/helpers.ts';
+import type { MenuDivider } from '@cardstack/boxel-ui/helpers';
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';

packages/boxel-ui/addon/src/components/color-palette/index.gts

@@ -3,7 +3,7 @@ import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { cn, cssVar, eq } from '../../helpers.ts';
+import { cn, cssVar, eq } from '../../helpers.gts';
 import ColorPicker from '../color-picker/index.gts';
 import IconButton from '../icon-button/index.gts';
 import Tooltip from '../tooltip/index.gts';

packages/boxel-ui/addon/src/components/container/index.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { cn, element, eq } from '../../helpers.ts';
+import { cn, element, eq } from '../../helpers.gts';
 
 export type BoxelContainerDisplayOption =
   | 'default'

packages/boxel-ui/addon/src/components/filter-list/index.gts

@@ -5,7 +5,7 @@ import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import { cn } from '../../helpers.ts';
+import { cn } from '../../helpers.gts';
 import DropdownArrow from '../../icons/dropdown-arrow-down.gts';
 import type { Icon } from '../../icons/types.ts';
 import Button from '../button/index.gts';

packages/boxel-ui/addon/src/components/fitted-card-container/index.gts

@@ -6,7 +6,7 @@ import {
   fittedFormatById,
   fittedFormatIds,
   sanitizeHtmlSafe,
-} from '../../helpers.ts';
+} from '../../helpers.gts';
 
 interface Signature {
   Args: {

packages/boxel-ui/addon/src/components/fitted-card-container/usage.gts

@@ -7,7 +7,7 @@ import {
   type FittedFormatId,
   fittedFormatById,
   fittedFormatIds,
-} from '../../helpers.ts';
+} from '../../helpers.gts';
 import CardContainer from '../card-container/index.gts';
 import GridContainer from '../grid-container/index.gts';
 import FittedCardContainer from './index.gts';

packages/boxel-ui/addon/src/components/fitted-card/index.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { element } from '../../helpers.ts';
+import { element } from '../../helpers.gts';
 
 /**
  * FittedCard — generic responsive card layout for the fitted format.

packages/boxel-ui/addon/src/components/fitted-card/usage-preview.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { type FittedFormatSpec, cn, gt, gte } from '../../helpers.ts';
+import { type FittedFormatSpec, cn, gt, gte } from '../../helpers.gts';
 import CopyButton from '../copy-button/index.gts';
 
 export type Spec = Partial<FittedFormatSpec> & {

packages/boxel-ui/addon/src/components/fitted-card/usage.gts

@@ -6,7 +6,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
-import { FITTED_FORMATS } from '../../helpers.ts';
+import { FITTED_FORMATS } from '../../helpers.gts';
 import CardContainer from '../card-container/index.gts';
 import FittedCardContainer from '../fitted-card-container/index.gts';
 import BoxelInput from '../input/index.gts';

packages/boxel-ui/addon/src/components/grid-container/grid-item-container/index.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { type FittedFormatId } from '../../../helpers.ts';
+import { type FittedFormatId } from '../../../helpers.gts';
 import FittedCardContainer from '../../fitted-card-container/index.gts';
 
 export interface GridItemContainerSignature {

packages/boxel-ui/addon/src/components/grid-container/index.gts

@@ -7,7 +7,7 @@ import {
   fittedFormatById,
   fittedFormatIds,
   sanitizeHtmlSafe,
-} from '../../helpers.ts';
+} from '../../helpers.gts';
 import GridItemContainer, {
   type GridItemContainerSignature,
 } from './grid-item-container/index.gts';

packages/boxel-ui/addon/src/components/grid-container/usage.gts

@@ -7,7 +7,7 @@ import {
   type FittedFormatId,
   fittedFormatById,
   fittedFormatIds,
-} from '../../helpers.ts';
+} from '../../helpers.gts';
 import CardContainer from '../card-container/index.gts';
 import BoxelGridContainer from './index.gts';
 

packages/boxel-ui/addon/src/components/icon-button/usage.gts

@@ -5,7 +5,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
-import { cn, eq } from '../../helpers.ts';
+import { cn, eq } from '../../helpers.gts';
 import { ALL_ICON_COMPONENTS } from '../../icons.gts';
 import IconPlus from '../../icons/icon-plus.gts';
 import type { Icon } from '../../icons/types.ts';

packages/boxel-ui/addon/src/components/kanban/card.gts

@@ -2,7 +2,7 @@ import { cn } from '@cardstack/boxel-ui/helpers';
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import type { SafeString } from '@ember/template';
 
-import type { FittedFormatId } from '../../helpers.ts';
+import type { FittedFormatId } from '../../helpers.gts';
 import FittedCardContainer from '../fitted-card-container/index.gts';
 import type { KanbanPlacement } from './engine.ts';
 

packages/boxel-ui/addon/src/components/kanban/column-config-sidebar-row.gts

@@ -6,7 +6,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 
-import { bool, cn, cssVar } from '../../helpers.ts';
+import { bool, cn, cssVar } from '../../helpers.gts';
 import ContextButton from '../context-button/index.gts';
 import FieldContainer from '../field-container/index.gts';
 import IconButton from '../icon-button/index.gts';

packages/boxel-ui/addon/src/components/kanban/plane-inner.gts

@@ -12,7 +12,7 @@ import { on } from '@ember/modifier';
 import type { SafeString } from '@ember/template';
 import Component from '@glimmer/component';
 
-import type { FittedFormatId } from '../../helpers.ts';
+import type { FittedFormatId } from '../../helpers.gts';
 import { KanbanCard } from './card.gts';
 import { KanbanColumnHeader } from './column-header.gts';
 import type { KanbanDragManager } from './drag.gts';

packages/boxel-ui/addon/src/components/kanban/plane.gts

@@ -4,7 +4,7 @@ import { registerDestructor } from '@ember/destroyable';
 import type Owner from '@ember/owner';
 import Component from '@glimmer/component';
 
-import type { FittedFormatId } from '../../helpers.ts';
+import type { FittedFormatId } from '../../helpers.gts';
 import { type KanbanDragManagerArgs, KanbanDragManager } from './drag.gts';
 import { type KanbanColumnConfig, type KanbanPlacement } from './engine.ts';
 import { KanbanPlaneInner } from './plane-inner.gts';

packages/boxel-ui/addon/src/components/kanban/usage.gts

@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
 
-import { type FittedFormatId, cn, fittedFormatById } from '../../helpers.ts';
+import { type FittedFormatId, cn, fittedFormatById } from '../../helpers.gts';
 import {
   Card as CardIcon,
   Grid3x3 as GridIcon,

packages/boxel-ui/addon/src/components/label/index.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { cn, element, eq } from '../../helpers.ts';
+import { cn, element, eq } from '../../helpers.gts';
 
 interface Signature {
   Args: {

packages/boxel-ui/addon/src/components/multi-select/index.gts

@@ -9,7 +9,7 @@ import type {
 import PowerSelect from 'ember-power-select/components/power-select';
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
 
-import { cn, not } from '../../helpers.ts';
+import { cn, not } from '../../helpers.gts';
 import { BoxelAfterOptionsComponent } from './after-options.gts';
 import BoxelSelectedItem, {
   type SelectedItemSignature,

packages/boxel-ui/addon/src/components/multi-select/trigger.gts

@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 import type { Select } from 'ember-power-select/components/power-select';
 
-import { cn } from '../../helpers.ts';
+import { cn } from '../../helpers.gts';
 import CaretDown from '../../icons/caret-down.gts';
 import IconX from '../../icons/icon-x.gts';
 import Pill from '../pill/index.gts';

packages/boxel-ui/addon/src/components/picker/before-options-with-search.gts

@@ -6,7 +6,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import type { Select } from 'ember-power-select/components/power-select';
 
-import { eq } from '../../helpers.ts';
+import { eq } from '../../helpers.gts';
 import BoxelInput from '../input/index.gts';
 import type { PickerOption } from './index.gts';
 import PickerOptionRow from './option-row.gts';

packages/boxel-ui/addon/src/components/picker/option-row.gts

@@ -3,7 +3,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import type { Select } from 'ember-power-select/components/power-select';
 
-import { cn, sanitizeHtmlSafe } from '../../helpers.ts';
+import { cn, sanitizeHtmlSafe } from '../../helpers.gts';
 import CheckMark from '../../icons/check-mark.gts';
 import SelectAll from '../../icons/select-all.gts';
 import type { Icon } from '../../icons/types.ts';

packages/boxel-ui/addon/src/components/picker/trigger-labeled.gts

@@ -4,7 +4,7 @@ import Component from '@glimmer/component';
 import type { ComponentLike } from '@glint/template';
 import type { Select } from 'ember-power-select/components/power-select';
 
-import { cn } from '../../helpers.ts';
+import { cn } from '../../helpers.gts';
 import { not } from '../../helpers/truth-helpers.ts';
 import CaretDown from '../../icons/caret-down.gts';
 import Pill from '../pill/index.gts';

packages/boxel-ui/addon/src/components/pill/index.gts

@@ -2,7 +2,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { concat } from '@ember/helper';
 import { hash } from '@ember/helper';
 
-import { and, bool, cn, element, eq, not } from '../../helpers.ts';
+import { and, bool, cn, element, eq, not } from '../../helpers.gts';
 import { getContrastColor } from '../../helpers/contrast-color.ts';
 import cssVar from '../../helpers/css-var.ts';
 import type { BoxelButtonSize } from '../button/index.gts';

packages/boxel-ui/addon/src/components/pill/usage.gts

@@ -8,7 +8,7 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import { cssVar } from '../../helpers.ts';
+import { cssVar } from '../../helpers.gts';
 import { IconPlus } from '../../icons.gts';
 import { type BoxelButtonSize, buttonSizeOptions } from '../button/index.gts';
 import Pill, {

packages/boxel-ui/addon/src/components/progress-radial/index.gts

@@ -1,7 +1,7 @@
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
-import { cssVar } from '../../helpers.ts';
+import { cssVar } from '../../helpers.gts';
 
 interface Signature {
   Args: {

packages/boxel-ui/addon/src/components/radio-input/item.gts

@@ -2,7 +2,7 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { concat } from '@ember/helper';
 import { on } from '@ember/modifier';
 
-import { cn, not } from '../../helpers.ts';
+import { cn, not } from '../../helpers.gts';
 import cssVar from '../../helpers/css-var.ts';
 
 export interface Signature {

packages/boxel-ui/addon/src/components/resizable-panel-group/usage.gts

@@ -7,7 +7,7 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import { not } from '../../helpers.ts';
+import { not } from '../../helpers.gts';
 import cssVar from '../../helpers/css-var.ts';
 import ResizablePanelGroup from './index.gts';
 

packages/boxel-ui/addon/src/components/select/trigger.gts

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import type { Select } from 'ember-power-select/components/power-select';
 
-import { cn } from '../../helpers.ts';
+import { cn } from '../../helpers.gts';
 import { not } from '../../helpers/truth-helpers.ts';
 import CaretDown from '../../icons/caret-down.gts';
 

packages/boxel-ui/addon/src/components/select/usage.gts

@@ -11,7 +11,7 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import { cssVar } from '../../helpers.ts';
+import { cssVar } from '../../helpers.gts';
 import BoxelField from '../field-container/index.gts';
 import BoxelSelect from './index.gts';
 

packages/boxel-ui/addon/src/components/swatch/index.gts

@@ -1,6 +1,6 @@
 import type { TemplateOnlyComponent } from '@ember/component/template-only';
 
-import { cn, cssVar, eq, not } from '../../helpers.ts';
+import { cn, cssVar, eq, not } from '../../helpers.gts';
 
 interface Signature {
   Args: {

packages/boxel-ui/addon/src/components/switch/index.gts

@@ -1,7 +1,7 @@
 import { on } from '@ember/modifier';
 import Component from '@glimmer/component';
 
-import { cn } from '../../helpers.ts';
+import { cn } from '../../helpers.gts';
 
 interface SwitchSiganture {
   Args: SwitchArgs;

packages/boxel-ui/addon/src/components/tag-list/usage.gts

@@ -6,7 +6,7 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import { cssVar } from '../../helpers.ts';
+import { cssVar } from '../../helpers.gts';
 import TagList, { type TagItem } from './index.gts';
 
 export default class TagListUsage extends Component {

packages/boxel-ui/addon/src/components/tooltip/usage.gts

@@ -10,7 +10,7 @@ import {
   cssVariable,
 } from 'ember-freestyle/decorators/css-variable';
 
-import { cssVar } from '../../helpers.ts';
+import { cssVar } from '../../helpers.gts';
 import BoxelButton from '../button/index.gts';
 import BoxelTooltip, {
   type TooltipThemeVariant,

packages/boxel-ui/test-app/babel.config.mjs

@@ -15,6 +15,7 @@ export default {
         allowDeclareFields: true,
       },
     ],
+    'ember-concurrency/async-arrow-task-transform',
     [
       'babel-plugin-ember-template-compilation',
       {
@@ -23,7 +24,10 @@ export default {
           'ember-cli-htmlbars-inline-precompile',
           'htmlbars-inline-precompile',
         ],
-        transforms: [...templateCompatSupport()],
+        transforms: [
+          ...templateCompatSupport(),
+          'glimmer-scoped-css/ast-transform',
+        ],
       },
     ],
     [

packages/boxel-ui/test-app/package.json

@@ -69,6 +69,7 @@
     "ember-cli-deploy-smart-compress": "^2.0.0",
     "ember-cli-deprecation-workflow": "^3.0.2",
     "ember-cli-htmlbars": "^6.3.0",
+    "ember-concurrency": "catalog:",
     "ember-css-url": "^1.0.0",
     "ember-freestyle": "catalog:",
     "ember-load-initializers": "^3.0.0",
@@ -88,6 +89,7 @@
     "eslint-plugin-n": "catalog:",
     "eslint-plugin-prettier": "catalog:",
     "eslint-plugin-qunit": "catalog:",
+    "glimmer-scoped-css": "catalog:",
     "prettier": "catalog:",
     "prettier-plugin-ember-template-tag": "catalog:",
     "qunit": "catalog:",